first commit

node_modules/@fluentui/react/lib/components/Stack/Stack.d.ts

@@ -0,0 +1,9 @@
+/** @jsxRuntime classic */
+/** @jsx withSlots */
+import * as React from 'react';
+import type { IStackProps } from './Stack.types';
+import type { IStackItemProps } from './StackItem/StackItem.types';
+export declare const Stack: React.FunctionComponent<IStackProps> & {
+    Item: React.FunctionComponent<IStackItemProps>;
+};
+export default Stack;

node_modules/@fluentui/react/lib/components/Stack/Stack.js

@@ -0,0 +1,90 @@
+import { __assign, __rest } from "tslib";
+/** @jsxRuntime classic */
+/** @jsx withSlots */
+import * as React from 'react';
+import { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy';
+import { useId } from '@fluentui/react-hooks';
+import { css, getNativeProps, htmlElementProperties, warnDeprecations } from '../../Utilities';
+import { styles, GlobalClassNames as StackGlobalClassNames } from './Stack.styles';
+import { StackItem } from './StackItem/StackItem';
+var StackView = function (props) {
+    var _a = props.as, RootType = _a === void 0 ? 'div' : _a, _b = props.disableShrink, disableShrink = _b === void 0 ? false : _b, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    _c = props.doNotRenderFalsyValues, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    doNotRenderFalsyValues = _c === void 0 ? false : _c, _d = props.enableScopedSelectors, enableScopedSelectors = _d === void 0 ? false : _d, wrap = props.wrap, rest = __rest(props, ["as", "disableShrink", "doNotRenderFalsyValues", "enableScopedSelectors", "wrap"]);
+    warnDeprecations('Stack', props, {
+        gap: 'tokens.childrenGap',
+        maxHeight: 'tokens.maxHeight',
+        maxWidth: 'tokens.maxWidth',
+        padding: 'tokens.padding',
+    });
+    var stackInnerId = useId('stack-inner');
+    var stackChildren = _processStackChildren(props.children, {
+        disableShrink: disableShrink,
+        enableScopedSelectors: enableScopedSelectors,
+        doNotRenderFalsyValues: doNotRenderFalsyValues,
+    });
+    var nativeProps = getNativeProps(rest, htmlElementProperties);
+    var Slots = getSlots(props, {
+        root: RootType,
+        inner: 'div',
+    });
+    if (wrap) {
+        return (withSlots(Slots.root, __assign({}, nativeProps),
+            withSlots(Slots.inner, { key: stackInnerId }, stackChildren)));
+    }
+    return withSlots(Slots.root, __assign({}, nativeProps), stackChildren);
+};
+function _processStackChildren(children, _a) {
+    var disableShrink = _a.disableShrink, enableScopedSelectors = _a.enableScopedSelectors, doNotRenderFalsyValues = _a.doNotRenderFalsyValues;
+    var childrenArray = React.Children.toArray(children);
+    childrenArray = React.Children.map(childrenArray, function (child) {
+        if (!child) {
+            return doNotRenderFalsyValues ? null : child;
+        }
+        // We need to allow children that aren't falsy values, but not valid elements since they could be
+        // a string like <Stack>{'sample string'}</Stack>
+        if (!React.isValidElement(child)) {
+            return child;
+        }
+        if (child.type === React.Fragment) {
+            var fragmentChild = child;
+            return fragmentChild.props.children
+                ? _processStackChildren(fragmentChild.props.children, {
+                    disableShrink: disableShrink,
+                    enableScopedSelectors: enableScopedSelectors,
+                    doNotRenderFalsyValues: doNotRenderFalsyValues,
+                })
+                : null;
+        }
+        var childAsReactElement = child;
+        var defaultItemProps = {};
+        if (_isStackItem(child)) {
+            defaultItemProps = { shrink: !disableShrink };
+        }
+        var childClassName = childAsReactElement.props.className;
+        return React.cloneElement(childAsReactElement, __assign(__assign(__assign(__assign({}, defaultItemProps), childAsReactElement.props), (childClassName && { className: childClassName })), (enableScopedSelectors && { className: css(StackGlobalClassNames.child, childClassName) })));
+    });
+    return childrenArray;
+}
+function _isStackItem(item) {
+    // In theory, we should be able to just check item.type === StackItem.
+    // However, under certain unclear circumstances (see https://github.com/microsoft/fluentui/issues/10785),
+    // the object identity is different despite the function implementation being the same.
+    return (!!item &&
+        typeof item === 'object' &&
+        !!item.type &&
+        // StackItem is generated by createComponent, so we need to check its displayName instead of name
+        item.type.displayName === StackItem.displayName);
+}
+var StackStatics = {
+    Item: StackItem,
+};
+export var Stack = createComponent(StackView, {
+    displayName: 'Stack',
+    styles: styles,
+    statics: StackStatics,
+});
+export default Stack;
+//# sourceMappingURL=Stack.js.map

node_modules/@fluentui/react/lib/components/Stack/Stack.styles.d.ts

@@ -0,0 +1,7 @@
+import type { IStackComponent } from './Stack.types';
+export declare const GlobalClassNames: {
+    root: string;
+    inner: string;
+    child: string;
+};
+export declare const styles: IStackComponent['styles'];

node_modules/@fluentui/react/lib/components/Stack/Stack.styles.js

@@ -0,0 +1,159 @@
+import { __assign } from "tslib";
+import { getGlobalClassNames } from '../../Styling';
+import { GlobalClassNames as StackItemGlobalClassNames } from './StackItem/StackItem.styles';
+import { parseGap, parsePadding } from './StackUtils';
+var nameMap = {
+    start: 'flex-start',
+    end: 'flex-end',
+};
+export var GlobalClassNames = {
+    root: 'ms-Stack',
+    inner: 'ms-Stack-inner',
+    child: 'ms-Stack-child',
+};
+export var styles = function (props, theme, tokens) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var className = props.className, disableShrink = props.disableShrink, enableScopedSelectors = props.enableScopedSelectors, grow = props.grow, horizontal = props.horizontal, horizontalAlign = props.horizontalAlign, reversed = props.reversed, verticalAlign = props.verticalAlign, verticalFill = props.verticalFill, wrap = props.wrap;
+    var classNames = getGlobalClassNames(GlobalClassNames, theme);
+    /*  eslint-disable @typescript-eslint/no-deprecated */
+    var childrenGap = tokens && tokens.childrenGap ? tokens.childrenGap : props.gap;
+    var maxHeight = tokens && tokens.maxHeight ? tokens.maxHeight : props.maxHeight;
+    var maxWidth = tokens && tokens.maxWidth ? tokens.maxWidth : props.maxWidth;
+    var padding = tokens && tokens.padding ? tokens.padding : props.padding;
+    /* eslint-enable @typescript-eslint/no-deprecated */
+    var _p = parseGap(childrenGap, theme), rowGap = _p.rowGap, columnGap = _p.columnGap;
+    var horizontalMargin = "".concat(-0.5 * columnGap.value).concat(columnGap.unit);
+    var verticalMargin = "".concat(-0.5 * rowGap.value).concat(rowGap.unit);
+    // styles to be applied to all direct children regardless of wrap or direction
+    var childStyles = {
+        textOverflow: 'ellipsis',
+    };
+    var childSelector = '> ' + (enableScopedSelectors ? '.' + GlobalClassNames.child : '*');
+    var disableShrinkStyles = (_a = {},
+        // flexShrink styles are applied by the StackItem
+        _a["".concat(childSelector, ":not(.").concat(StackItemGlobalClassNames.root, ")")] = {
+            flexShrink: 0,
+        },
+        _a);
+    if (wrap) {
+        return {
+            root: [
+                classNames.root,
+                {
+                    flexWrap: 'wrap',
+                    maxWidth: maxWidth,
+                    maxHeight: maxHeight,
+                    width: 'auto',
+                    overflow: 'visible',
+                    height: '100%',
+                },
+                horizontalAlign && (_b = {},
+                    _b[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,
+                    _b),
+                verticalAlign && (_c = {},
+                    _c[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,
+                    _c),
+                className,
+                {
+                    // not allowed to be overridden by className
+                    // since this is necessary in order to prevent collapsing margins
+                    display: 'flex',
+                },
+                horizontal && {
+                    height: verticalFill ? '100%' : 'auto',
+                },
+            ],
+            inner: [
+                classNames.inner,
+                (_d = {
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        marginLeft: horizontalMargin,
+                        marginRight: horizontalMargin,
+                        marginTop: verticalMargin,
+                        marginBottom: verticalMargin,
+                        overflow: 'visible',
+                        boxSizing: 'border-box',
+                        padding: parsePadding(padding, theme),
+                        // avoid unnecessary calc() calls if horizontal gap is 0
+                        width: columnGap.value === 0 ? '100%' : "calc(100% + ".concat(columnGap.value).concat(columnGap.unit, ")"),
+                        maxWidth: '100vw'
+                    },
+                    _d[childSelector] = __assign({ margin: "".concat(0.5 * rowGap.value).concat(rowGap.unit, " ").concat(0.5 * columnGap.value).concat(columnGap.unit) }, childStyles),
+                    _d),
+                disableShrink && disableShrinkStyles,
+                horizontalAlign && (_e = {},
+                    _e[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,
+                    _e),
+                verticalAlign && (_f = {},
+                    _f[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,
+                    _f),
+                horizontal && (_g = {
+                        flexDirection: reversed ? 'row-reverse' : 'row',
+                        // avoid unnecessary calc() calls if vertical gap is 0
+                        height: rowGap.value === 0 ? '100%' : "calc(100% + ".concat(rowGap.value).concat(rowGap.unit, ")")
+                    },
+                    _g[childSelector] = {
+                        maxWidth: columnGap.value === 0 ? '100%' : "calc(100% - ".concat(columnGap.value).concat(columnGap.unit, ")"),
+                    },
+                    _g),
+                !horizontal && (_h = {
+                        flexDirection: reversed ? 'column-reverse' : 'column',
+                        height: "calc(100% + ".concat(rowGap.value).concat(rowGap.unit, ")")
+                    },
+                    _h[childSelector] = {
+                        maxHeight: rowGap.value === 0 ? '100%' : "calc(100% - ".concat(rowGap.value).concat(rowGap.unit, ")"),
+                    },
+                    _h),
+            ],
+        };
+    }
+    return {
+        root: [
+            classNames.root,
+            (_j = {
+                    display: 'flex',
+                    flexDirection: horizontal ? (reversed ? 'row-reverse' : 'row') : reversed ? 'column-reverse' : 'column',
+                    flexWrap: 'nowrap',
+                    width: 'auto',
+                    height: verticalFill ? '100%' : 'auto',
+                    maxWidth: maxWidth,
+                    maxHeight: maxHeight,
+                    padding: parsePadding(padding, theme),
+                    boxSizing: 'border-box'
+                },
+                _j[childSelector] = childStyles,
+                _j),
+            disableShrink && disableShrinkStyles,
+            grow && {
+                flexGrow: grow === true ? 1 : grow,
+            },
+            horizontalAlign && (_k = {},
+                _k[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,
+                _k),
+            verticalAlign && (_l = {},
+                _l[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,
+                _l),
+            horizontal &&
+                columnGap.value > 0 && (_m = {},
+                // apply gap margin to every direct child except the first direct child if the direction is not reversed,
+                // and the last direct one if it is
+                _m[reversed ? "".concat(childSelector, ":not(:last-child)") : "".concat(childSelector, ":not(:first-child)")] = {
+                    marginLeft: "".concat(columnGap.value).concat(columnGap.unit),
+                },
+                _m),
+            !horizontal &&
+                rowGap.value > 0 && (_o = {},
+                // apply gap margin to every direct child except the first direct child if the direction is not reversed,
+                // and the last direct one if it is
+                _o[reversed ? "".concat(childSelector, ":not(:last-child)") : "".concat(childSelector, ":not(:first-child)")] = {
+                    marginTop: "".concat(rowGap.value).concat(rowGap.unit),
+                },
+                _o),
+            className,
+        ],
+        // TODO: this cast may be hiding some potential issues with styling and name
+        //        lookups and should be removed
+    };
+};
+//# sourceMappingURL=Stack.styles.js.map

node_modules/@fluentui/react/lib/components/Stack/Stack.types.d.ts

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import type { IComponentStyles, IHTMLSlot, ISlotProp, IComponent, IStyleableComponentProps, ISlottableProps } from '@fluentui/foundation-legacy';
+/**
+ * Defines a type made by the union of the different values that the align-items and justify-content flexbox
+ * properties can take.
+ * {@docCategory Stack}
+ */
+export type Alignment = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'baseline' | 'stretch';
+/**
+ * {@docCategory Stack}
+ */
+export type IStackComponent = IComponent<IStackProps, IStackTokens, IStackStyles>;
+/**
+ * {@docCategory Stack}
+ */
+export type IStackTokenReturnType = ReturnType<Extract<IStackComponent['tokens'], Function>>;
+/**
+ * {@docCategory Stack}
+ */
+export type IStackStylesReturnType = ReturnType<Extract<IStackComponent['styles'], Function>>;
+/**
+ * {@docCategory Stack}
+ */
+export type IStackSlot = ISlotProp<IStackProps>;
+/**
+ * {@docCategory Stack}
+ */
+export interface IStackSlots {
+    /**
+     * Defines root slot of the component.
+     */
+    root?: IHTMLSlot;
+    /**
+     * Defines a slot that is placed inside the root slot in order to achieve wrapping. Only used when the wrap
+     * property is set to true.
+     */
+    inner?: IHTMLSlot;
+}
+/**
+ * {@docCategory Stack}
+ */
+export interface IStackProps extends ISlottableProps<IStackSlots>, IStyleableComponentProps<IStackProps, IStackTokens, IStackStyles>, React.HTMLAttributes<HTMLElement> {
+    /**
+     * Defines how to render the Stack.
+     */
+    as?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+    /**
+     * Defines whether to render Stack children horizontally.
+     * @defaultvalue false
+     */
+    horizontal?: boolean;
+    /**
+     * Defines whether to render Stack children in the opposite direction (bottom-to-top if it's a vertical Stack and
+     * right-to-left if it's a horizontal Stack).
+     * @defaultvalue false
+     */
+    reversed?: boolean;
+    /**
+     * Defines how to align Stack children horizontally (along the x-axis).
+     */
+    horizontalAlign?: Alignment;
+    /**
+     * Defines how to align Stack children vertically (along the y-axis).
+     */
+    verticalAlign?: Alignment;
+    /**
+     * Defines whether the Stack should take up 100% of the height of its parent.
+     * This property is required to be set to true when using the `grow` flag on children in vertical oriented Stacks.
+     * Stacks are rendered as block elements and grow horizontally to the container already.
+     * @defaultvalue false
+     */
+    verticalFill?: boolean;
+    /**
+     * Defines whether Stack children should not shrink to fit the available space.
+     * @defaultvalue false
+     */
+    disableShrink?: boolean;
+    /**
+     * Defines how much to grow the Stack in proportion to its siblings.
+     */
+    grow?: boolean | number | 'inherit' | 'initial' | 'unset';
+    /**
+     * Defines the spacing between Stack children.
+     * The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'.
+     * If 'column gap' is omitted, it's set to the same value as 'row gap'.
+     * @deprecated Use `tokens.childrenGap` instead.
+     */
+    gap?: number | string;
+    /**
+     * Defines the maximum width that the Stack can take.
+     * @deprecated Use `tokens.maxWidth` instead.
+     */
+    maxWidth?: number | string;
+    /**
+     * Defines the maximum height that the Stack can take.
+     * @deprecated Use `tokens.maxHeight` instead.
+     */
+    maxHeight?: number | string;
+    /**
+     * Defines the inner padding of the Stack.
+     * @deprecated Use `tokens.padding` instead.
+     */
+    padding?: number | string;
+    /**
+     * Defines whether Stack children should wrap onto multiple rows or columns when they are about to overflow
+     * the size of the Stack.
+     * @defaultvalue false
+     */
+    wrap?: boolean;
+    /**
+     * Defines if scoped style selectors are enabled for the Stack component, which greatly helps in style recalculation
+     * performance, but requires children of the Stack to be able to accept a className prop (excluding Fragments).
+     * @defaultvalue false
+     */
+    enableScopedSelectors?: boolean;
+    /**
+     * When receiving a falsy value, render null instead.
+     *
+     * @deprecated Default behavior now allows rendering falsy values so cases like
+     * this one can happen:
+     * ```tsx
+     * <Stack>0 1 2 3 4</Stack>
+     * ```
+     */
+    doNotRenderFalsyValues?: boolean;
+}
+/**
+ * {@docCategory Stack}
+ */
+export interface IStackTokens {
+    /**
+     * Defines the spacing between Stack children.
+     * The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'.
+     * If 'column gap' is omitted, it's set to the same value as 'row gap'.
+     */
+    childrenGap?: number | string;
+    /**
+     * Defines a maximum height for the Stack.
+     */
+    maxHeight?: number | string;
+    /**
+     * Defines a maximum width for the Stack.
+     */
+    maxWidth?: number | string;
+    /**
+     * Defines the padding to be applied to the Stack contents relative to its border.
+     */
+    padding?: number | string;
+}
+/**
+ * {@docCategory Stack}
+ */
+export type IStackStyles = IComponentStyles<IStackSlots>;

node_modules/@fluentui/react/lib/components/Stack/Stack.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Stack.types.js.map

node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.d.ts

@@ -0,0 +1,6 @@
+/** @jsxRuntime classic */
+/** @jsx withSlots */
+import * as React from 'react';
+import type { IStackItemProps } from './StackItem.types';
+export declare const StackItem: React.FunctionComponent<IStackItemProps>;
+export default StackItem;

node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.js

@@ -0,0 +1,22 @@
+import { __assign } from "tslib";
+import { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy';
+import { getNativeProps, htmlElementProperties } from '../../../Utilities';
+import { StackItemStyles as styles } from './StackItem.styles';
+var StackItemView = function (props) {
+    var children = props.children;
+    var nativeProps = getNativeProps(props, htmlElementProperties);
+    // eslint-disable-next-line eqeqeq
+    if (children == null) {
+        return null;
+    }
+    var Slots = getSlots(props, {
+        root: 'div',
+    });
+    return withSlots(Slots.root, __assign({}, nativeProps), children);
+};
+export var StackItem = createComponent(StackItemView, {
+    displayName: 'StackItem',
+    styles: styles,
+});
+export default StackItem;
+//# sourceMappingURL=StackItem.js.map

node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackItem.js","sourceRoot":"../src/","sources":["components/Stack/StackItem/StackItem.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,eAAe,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAG/D,IAAM,aAAa,GAAgC,UAAA,KAAK;IAC9C,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAC3B,IAAM,WAAW,GAAG,cAAc,CAAuC,KAAK,EAAE,qBAAqB,CAAC,CAAC;IACvG,kCAAkC;IAClC,IAAI,QAAQ,IAAI,IAAI,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAM,KAAK,GAAG,QAAQ,CAAmC,KAAK,EAAE;QAC9D,IAAI,EAAE,KAAK;KACZ,CAAC,CAAC;IAEH,OAAO,UAAC,KAAK,CAAC,IAAI,eAAK,WAAW,GAAG,QAAQ,CAAc,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAA6C,eAAe,CAAC,aAAa,EAAE;IAChG,WAAW,EAAE,WAAW;IACxB,MAAM,QAAA;CACP,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC","sourcesContent":["/** @jsxRuntime classic */\n/** @jsx withSlots */\nimport * as React from 'react';\nimport { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy';\nimport { getNativeProps, htmlElementProperties } from '../../../Utilities';\nimport { StackItemStyles as styles } from './StackItem.styles';\nimport type { IStackItemComponent, IStackItemProps, IStackItemSlots } from './StackItem.types';\n\nconst StackItemView: IStackItemComponent['view'] = props => {\n  const { children } = props;\n  const nativeProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, htmlElementProperties);\n  // eslint-disable-next-line eqeqeq\n  if (children == null) {\n    return null;\n  }\n\n  const Slots = getSlots<IStackItemProps, IStackItemSlots>(props, {\n    root: 'div',\n  });\n\n  return <Slots.root {...nativeProps}>{children}</Slots.root>;\n};\n\nexport const StackItem: React.FunctionComponent<IStackItemProps> = createComponent(StackItemView, {\n  displayName: 'StackItem',\n  styles,\n});\n\nexport default StackItem;\n"]}

node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.styles.d.ts

@@ -0,0 +1,5 @@
+import type { IStackItemComponent } from './StackItem.types';
+export declare const GlobalClassNames: {
+    root: string;
+};
+export declare const StackItemStyles: IStackItemComponent['styles'];

node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.styles.js

@@ -0,0 +1,45 @@
+import { getGlobalClassNames } from '../../../Styling';
+export var GlobalClassNames = {
+    root: 'ms-StackItem',
+};
+var alignMap = {
+    start: 'flex-start',
+    end: 'flex-end',
+};
+export var StackItemStyles = function (props, theme, tokens) {
+    var grow = props.grow, shrink = props.shrink, disableShrink = props.disableShrink, align = props.align, verticalFill = props.verticalFill, order = props.order, className = props.className, _a = props.basis, basis = _a === void 0 ? 'auto' : _a;
+    var classNames = getGlobalClassNames(GlobalClassNames, theme);
+    return {
+        root: [
+            theme.fonts.medium,
+            classNames.root,
+            {
+                flexBasis: basis,
+                margin: tokens.margin,
+                padding: tokens.padding,
+                height: verticalFill ? '100%' : 'auto',
+                width: 'auto',
+            },
+            grow && {
+                flexGrow: grow === true ? 1 : grow,
+            },
+            (disableShrink || (!grow && !shrink)) && {
+                flexShrink: 0,
+            },
+            shrink &&
+                !disableShrink && {
+                flexShrink: 1,
+            },
+            align && {
+                alignSelf: alignMap[align] || align,
+            },
+            order && {
+                order: order,
+            },
+            className,
+        ],
+        // TODO: this cast may be hiding some potential issues with styling and name
+        //        lookups and should be removed
+    };
+};
+//# sourceMappingURL=StackItem.styles.js.map

node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackItem.styles.js","sourceRoot":"../src/","sources":["components/Stack/StackItem/StackItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvD,MAAM,CAAC,IAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,cAAc;CACrB,CAAC;AAEF,IAAM,QAAQ,GAA8B;IAC1C,KAAK,EAAE,YAAY;IACnB,GAAG,EAAE,UAAU;CAChB,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAkC,UAAC,KAAK,EAAE,KAAK,EAAE,MAAM;IACzE,IAAA,IAAI,GAAmF,KAAK,KAAxF,EAAE,MAAM,GAA2E,KAAK,OAAhF,EAAE,aAAa,GAA4D,KAAK,cAAjE,EAAE,KAAK,GAAqD,KAAK,MAA1D,EAAE,YAAY,GAAuC,KAAK,aAA5C,EAAE,KAAK,GAAgC,KAAK,MAArC,EAAE,SAAS,GAAqB,KAAK,UAA1B,EAAE,KAAmB,KAAK,MAAV,EAAd,KAAK,mBAAG,MAAM,KAAA,CAAW;IAErG,IAAM,UAAU,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAEhE,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,UAAU,CAAC,IAAI;YACf;gBACE,SAAS,EAAE,KAAK;gBAChB,MAAM,EAAE,MAAM,CAAC,MAAM;gBACrB,OAAO,EAAE,MAAM,CAAC,OAAO;gBACvB,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;gBACtC,KAAK,EAAE,MAAM;aACd;YACD,IAAI,IAAI;gBACN,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;aACnC;YACD,CAAC,aAAa,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI;gBACvC,UAAU,EAAE,CAAC;aACd;YACD,MAAM;gBACJ,CAAC,aAAa,IAAI;gBAChB,UAAU,EAAE,CAAC;aACd;YACH,KAAK,IAAI;gBACP,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK;aACpC;YACD,KAAK,IAAI;gBACP,KAAK,OAAA;aACN;YACD,SAAS;SACV;QACD,4EAA4E;QAC5E,uCAAuC;KACpB,CAAC;AACxB,CAAC,CAAC","sourcesContent":["import { getGlobalClassNames } from '../../../Styling';\nimport type { IStackItemComponent, IStackItemStyles, IStackItemStylesReturnType } from './StackItem.types';\n\nexport const GlobalClassNames = {\n  root: 'ms-StackItem',\n};\n\nconst alignMap: { [key: string]: string } = {\n  start: 'flex-start',\n  end: 'flex-end',\n};\n\nexport const StackItemStyles: IStackItemComponent['styles'] = (props, theme, tokens): IStackItemStylesReturnType => {\n  const { grow, shrink, disableShrink, align, verticalFill, order, className, basis = 'auto' } = props;\n\n  const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n  return {\n    root: [\n      theme.fonts.medium,\n      classNames.root,\n      {\n        flexBasis: basis,\n        margin: tokens.margin,\n        padding: tokens.padding,\n        height: verticalFill ? '100%' : 'auto',\n        width: 'auto',\n      },\n      grow && {\n        flexGrow: grow === true ? 1 : grow,\n      },\n      (disableShrink || (!grow && !shrink)) && {\n        flexShrink: 0,\n      },\n      shrink &&\n        !disableShrink && {\n          flexShrink: 1,\n        },\n      align && {\n        alignSelf: alignMap[align] || align,\n      },\n      order && {\n        order,\n      },\n      className,\n    ],\n    // TODO: this cast may be hiding some potential issues with styling and name\n    //        lookups and should be removed\n  } as IStackItemStyles;\n};\n"]}

node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.types.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import type { IComponentStyles, IHTMLSlot, IComponent, ISlotProp, IStyleableComponentProps } from '@fluentui/foundation-legacy';
+/**
+ * {@docCategory Stack}
+ */
+export type IStackItemComponent = IComponent<IStackItemProps, IStackItemTokens, IStackItemStyles>;
+/**
+ * {@docCategory Stack}
+ */
+export type IStackItemSlot = ISlotProp<IStackItemProps>;
+/**
+ * {@docCategory Stack}
+ */
+export interface IStackItemSlots {
+    root?: IHTMLSlot;
+}
+/**
+ * {@docCategory Stack}
+ */
+export type IStackItemTokenReturnType = ReturnType<Extract<IStackItemComponent['tokens'], Function>>;
+/**
+ * {@docCategory Stack}
+ */
+export type IStackItemStylesReturnType = ReturnType<Extract<IStackItemComponent['styles'], Function>>;
+/**
+ * {@docCategory Stack}
+ */
+export interface IStackItemProps extends IStackItemSlots, IStyleableComponentProps<IStackItemProps, IStackItemTokens, IStackItemStyles>, React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+    /**
+     * Defines a CSS class name used to style the StackItem.
+     */
+    className?: string;
+    /**
+     * Defines how much to grow the StackItem in proportion to its siblings.
+     */
+    grow?: boolean | number | 'inherit' | 'initial' | 'unset';
+    /**
+     * Defines at what ratio should the StackItem shrink to fit the available space.
+     */
+    shrink?: boolean | number | 'inherit' | 'initial' | 'unset';
+    /**
+     * Defines whether the StackItem should be prevented from shrinking.
+     * This can be used to prevent a StackItem from shrinking when it is inside of a Stack that has shrinking items.
+     * @defaultvalue false
+     */
+    disableShrink?: boolean;
+    /**
+     * Defines how to align the StackItem along the x-axis (for vertical Stacks) or the y-axis (for horizontal Stacks).
+     */
+    align?: 'auto' | 'stretch' | 'baseline' | 'start' | 'center' | 'end';
+    /**
+     * Defines whether the StackItem should take up 100% of the height of its parent.
+     * @defaultvalue true
+     */
+    verticalFill?: boolean;
+    /**
+     * Defines the initial main size of the StackItem, setting the size of the content box unless otherwise set with
+     * box-sizing.
+     * @defaultvalue auto
+     */
+    basis?: React.CSSProperties['flexBasis'];
+    /**
+     * Defines order of the StackItem.
+     * @defaultvalue 0
+     */
+    order?: number | string;
+}
+/**
+ * {@docCategory Stack}
+ */
+export interface IStackItemTokens {
+    /**
+     * Defines the margin to be applied to the StackItem relative to its container.
+     */
+    margin?: number | string;
+    /**
+     * Defines the padding to be applied to the StackItem contents relative to its border.
+     */
+    padding?: number | string;
+}
+/**
+ * {@docCategory Stack}
+ */
+export type IStackItemStyles = IComponentStyles<IStackItemSlots>;

node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=StackItem.types.js.map

node_modules/@fluentui/react/lib/components/Stack/StackItem/StackItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackItem.types.js","sourceRoot":"../src/","sources":["components/Stack/StackItem/StackItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type {\n  IComponentStyles,\n  IHTMLSlot,\n  IComponent,\n  ISlotProp,\n  IStyleableComponentProps,\n} from '@fluentui/foundation-legacy';\n\n/**\n * {@docCategory Stack}\n */\nexport type IStackItemComponent = IComponent<IStackItemProps, IStackItemTokens, IStackItemStyles>;\n\n/**\n * {@docCategory Stack}\n */\nexport type IStackItemSlot = ISlotProp<IStackItemProps>;\n\n/**\n * {@docCategory Stack}\n */\nexport interface IStackItemSlots {\n  root?: IHTMLSlot;\n}\n\n// The following two types are redundant with IStackItemComponent but are needed until TS function return widening\n// issue is resolved: https://github.com/Microsoft/TypeScript/issues/241\n// For now, these helper types can be used to provide return type safety when specifying tokens and styles functions.\n\n/**\n * {@docCategory Stack}\n */\nexport type IStackItemTokenReturnType = ReturnType<Extract<IStackItemComponent['tokens'], Function>>;\n\n/**\n * {@docCategory Stack}\n */\nexport type IStackItemStylesReturnType = ReturnType<Extract<IStackItemComponent['styles'], Function>>;\n\n/**\n * {@docCategory Stack}\n */\nexport interface IStackItemProps\n  extends IStackItemSlots,\n    IStyleableComponentProps<IStackItemProps, IStackItemTokens, IStackItemStyles>,\n    React.HTMLAttributes<HTMLElement> {\n  children?: React.ReactNode;\n  /**\n   * Defines a CSS class name used to style the StackItem.\n   */\n  className?: string;\n\n  /**\n   * Defines how much to grow the StackItem in proportion to its siblings.\n   */\n  grow?: boolean | number | 'inherit' | 'initial' | 'unset';\n\n  /**\n   * Defines at what ratio should the StackItem shrink to fit the available space.\n   */\n  shrink?: boolean | number | 'inherit' | 'initial' | 'unset';\n\n  /**\n   * Defines whether the StackItem should be prevented from shrinking.\n   * This can be used to prevent a StackItem from shrinking when it is inside of a Stack that has shrinking items.\n   * @defaultvalue false\n   */\n  disableShrink?: boolean;\n\n  /**\n   * Defines how to align the StackItem along the x-axis (for vertical Stacks) or the y-axis (for horizontal Stacks).\n   */\n  align?: 'auto' | 'stretch' | 'baseline' | 'start' | 'center' | 'end';\n\n  /**\n   * Defines whether the StackItem should take up 100% of the height of its parent.\n   * @defaultvalue true\n   */\n  verticalFill?: boolean;\n\n  /**\n   * Defines the initial main size of the StackItem, setting the size of the content box unless otherwise set with\n   * box-sizing.\n   * @defaultvalue auto\n   */\n  basis?: React.CSSProperties['flexBasis'];\n\n  /**\n   * Defines order of the StackItem.\n   * @defaultvalue 0\n   */\n  order?: number | string;\n}\n\n/**\n * {@docCategory Stack}\n */\nexport interface IStackItemTokens {\n  /**\n   * Defines the margin to be applied to the StackItem relative to its container.\n   */\n  margin?: number | string;\n\n  /**\n   * Defines the padding to be applied to the StackItem contents relative to its border.\n   */\n  padding?: number | string;\n}\n\n/**\n * {@docCategory Stack}\n */\nexport type IStackItemStyles = IComponentStyles<IStackItemSlots>;\n"]}

node_modules/@fluentui/react/lib/components/Stack/StackUtils.d.ts

@@ -0,0 +1,25 @@
+import type { ITheme } from '../../Styling';
+import type { IStackProps } from './Stack.types';
+/**
+ * Takes in a gap size in either a CSS-style format (e.g. 10 or "10px")
+ *  or a key of a themed spacing value (e.g. "s1").
+ * Returns the separate numerical value of the padding (e.g. 10)
+ *  and the CSS unit (e.g. "px").
+ */
+export declare const parseGap: (gap: IStackProps["gap"], theme: ITheme) => {
+    rowGap: {
+        value: number;
+        unit: string;
+    };
+    columnGap: {
+        value: number;
+        unit: string;
+    };
+};
+/**
+ * Takes in a padding in a CSS-style format (e.g. 10, "10px", "10px 10px", etc.)
+ *  where the separate padding values can also be the key of a themed spacing value
+ *  (e.g. "s1 m", "10px l1 20px l2", etc.).
+ * Returns a CSS-style padding.
+ */
+export declare const parsePadding: (padding: number | string | undefined, theme: ITheme) => number | string | undefined;

node_modules/@fluentui/react/lib/components/Stack/StackUtils.js

@@ -0,0 +1,96 @@
+// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
+var _getThemedSpacing = function (space, theme) {
+    if (theme.spacing.hasOwnProperty(space)) {
+        return theme.spacing[space];
+    }
+    return space;
+};
+// Helper function that takes a gap as a string and converts it into a { value, unit } representation.
+var _getValueUnitGap = function (gap) {
+    var numericalPart = parseFloat(gap);
+    var numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
+    var numericalString = isNaN(numericalPart) ? '' : numericalPart.toString();
+    var unitPart = gap.substring(numericalString.toString().length);
+    return {
+        value: numericalValue,
+        unit: unitPart || 'px',
+    };
+};
+/**
+ * Takes in a gap size in either a CSS-style format (e.g. 10 or "10px")
+ *  or a key of a themed spacing value (e.g. "s1").
+ * Returns the separate numerical value of the padding (e.g. 10)
+ *  and the CSS unit (e.g. "px").
+ */
+export var parseGap = function (gap, theme) {
+    if (gap === undefined || gap === '') {
+        return {
+            rowGap: {
+                value: 0,
+                unit: 'px',
+            },
+            columnGap: {
+                value: 0,
+                unit: 'px',
+            },
+        };
+    }
+    if (typeof gap === 'number') {
+        return {
+            rowGap: {
+                value: gap,
+                unit: 'px',
+            },
+            columnGap: {
+                value: gap,
+                unit: 'px',
+            },
+        };
+    }
+    var splitGap = gap.split(' ');
+    // If the array has more than two values, then return 0px.
+    if (splitGap.length > 2) {
+        return {
+            rowGap: {
+                value: 0,
+                unit: 'px',
+            },
+            columnGap: {
+                value: 0,
+                unit: 'px',
+            },
+        };
+    }
+    // If the array has two values, then parse each one.
+    if (splitGap.length === 2) {
+        return {
+            rowGap: _getValueUnitGap(_getThemedSpacing(splitGap[0], theme)),
+            columnGap: _getValueUnitGap(_getThemedSpacing(splitGap[1], theme)),
+        };
+    }
+    // Else, parse the numerical value and pass it as both the vertical and horizontal gap.
+    var calculatedGap = _getValueUnitGap(_getThemedSpacing(gap, theme));
+    return {
+        rowGap: calculatedGap,
+        columnGap: calculatedGap,
+    };
+};
+/**
+ * Takes in a padding in a CSS-style format (e.g. 10, "10px", "10px 10px", etc.)
+ *  where the separate padding values can also be the key of a themed spacing value
+ *  (e.g. "s1 m", "10px l1 20px l2", etc.).
+ * Returns a CSS-style padding.
+ */
+export var parsePadding = function (padding, theme) {
+    if (padding === undefined || typeof padding === 'number' || padding === '') {
+        return padding;
+    }
+    var paddingValues = padding.split(' ');
+    if (paddingValues.length < 2) {
+        return _getThemedSpacing(padding, theme);
+    }
+    return paddingValues.reduce(function (padding1, padding2) {
+        return _getThemedSpacing(padding1, theme) + ' ' + _getThemedSpacing(padding2, theme);
+    });
+};
+//# sourceMappingURL=StackUtils.js.map

node_modules/@fluentui/react/lib/components/Stack/index.d.ts

@@ -0,0 +1,4 @@
+export * from './StackItem/StackItem';
+export * from './StackItem/StackItem.types';
+export * from './Stack';
+export * from './Stack.types';

node_modules/@fluentui/react/lib/components/Stack/index.js

@@ -0,0 +1,5 @@
+export * from './StackItem/StackItem';
+export * from './StackItem/StackItem.types';
+export * from './Stack';
+export * from './Stack.types';
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib/components/Stack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Stack/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC","sourcesContent":["export * from './StackItem/StackItem';\nexport * from './StackItem/StackItem.types';\nexport * from './Stack';\nexport * from './Stack.types';\n"]}