@fluentui/react-migration-v8-v9 1.0.3 → 1.0.4

package/lib-amd/components/Menu/shimMenuProps.js

@@ -0,0 +1,30 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react"], function (require, exports, tslib_1, React, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.shimMenuHeaderProps = exports.shimMenuItemCheckboxProps = exports.shimMenuItemProps = exports.shimMenuProps = void 0;
+    var shimMenuProps = function (props) {
+        return {
+            hasIcons: props === null || props === void 0 ? void 0 : props.items.some(function (i) { return i.iconProps; }),
+            hasCheckmarks: props === null || props === void 0 ? void 0 : props.items.some(function (i) { return i.canCheck || i.checked; }),
+        };
+    };
+    exports.shimMenuProps = shimMenuProps;
+    var shimMenuItemProps = function (props) {
+        //TODO: Handle menuItem.onRenderIcon
+        var icon = props.iconProps ? React.createElement(react_1.Icon, tslib_1.__assign({}, props.iconProps)) : undefined;
+        return tslib_1.__assign(tslib_1.__assign({}, props), { 'aria-label': props.ariaLabel, children: props.text, icon: icon, secondaryContent: props.secondaryText });
+    };
+    exports.shimMenuItemProps = shimMenuItemProps;
+    var shimMenuItemCheckboxProps = function (props) {
+        return tslib_1.__assign(tslib_1.__assign({}, exports.shimMenuItemProps(props)), { name: props.text || 'name', value: props.value || 'value' });
+    };
+    exports.shimMenuItemCheckboxProps = shimMenuItemCheckboxProps;
+    var shimMenuHeaderProps = function (props) {
+        var _a;
+        return {
+            children: (_a = props.sectionProps) === null || _a === void 0 ? void 0 : _a.title,
+        };
+    };
+    exports.shimMenuHeaderProps = shimMenuHeaderProps;
+});
+//# sourceMappingURL=shimMenuProps.js.map

package/lib-amd/components/Menu/shimMenuProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimMenuProps.js","sourceRoot":"../src/","sources":["components/Menu/shimMenuProps.tsx"],"names":[],"mappings":";;;;IAMO,IAAM,aAAa,GAAG,UAAC,KAA2B;QACvD,OAAO;YACL,QAAQ,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,SAAS,EAAX,CAAW,CAAC;YAC7C,aAAa,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,OAAO,EAAvB,CAAuB,CAAC;SAC/D,CAAC;IACJ,CAAC,CAAC;IALW,QAAA,aAAa,iBAKxB;IAEK,IAAM,iBAAiB,GAAG,UAAC,KAA0B;QAC1D,oCAAoC;QACpC,IAAM,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAC,YAAI,uBAAK,KAAK,CAAC,SAAS,EAAI,CAAC,CAAC,CAAC,SAAS,CAAC;QAEzE,OAAO,sCACF,KAAK,KACR,YAAY,EAAE,KAAK,CAAC,SAAS,EAC7B,QAAQ,EAAE,KAAK,CAAC,IAAI,EACpB,IAAI,MAAA,EACJ,gBAAgB,EAAE,KAAK,CAAC,aAAa,GACrB,CAAC;IACrB,CAAC,CAAC;IAXW,QAAA,iBAAiB,qBAW5B;IAEK,IAAM,yBAAyB,GAAG,UAAC,KAA0B;QAClE,6CACK,yBAAiB,CAAC,KAAK,CAAC,KAC3B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,MAAM,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,OAAO,IAC7B;IACJ,CAAC,CAAC;IANW,QAAA,yBAAyB,6BAMpC;IAEK,IAAM,mBAAmB,GAAG,UAAC,KAA0B;;QAC5D,OAAO;YACL,QAAQ,EAAE,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK;SACpC,CAAC;IACJ,CAAC,CAAC;IAJW,QAAA,mBAAmB,uBAI9B","sourcesContent":["import * as React from 'react';\n\nimport { Icon } from '@fluentui/react';\nimport type { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react';\nimport type { MenuItemProps, MenuGroupHeaderProps, MenuItemCheckboxProps, MenuProps } from '@fluentui/react-menu';\n\nexport const shimMenuProps = (props: IContextualMenuProps): Partial<MenuProps> => {\n  return {\n    hasIcons: props?.items.some(i => i.iconProps),\n    hasCheckmarks: props?.items.some(i => i.canCheck || i.checked),\n  };\n};\n\nexport const shimMenuItemProps = (props: IContextualMenuItem): MenuItemProps => {\n  //TODO: Handle menuItem.onRenderIcon\n  const icon = props.iconProps ? <Icon {...props.iconProps} /> : undefined;\n\n  return {\n    ...props,\n    'aria-label': props.ariaLabel,\n    children: props.text,\n    icon,\n    secondaryContent: props.secondaryText,\n  } as MenuItemProps;\n};\n\nexport const shimMenuItemCheckboxProps = (props: IContextualMenuItem): MenuItemCheckboxProps => {\n  return {\n    ...shimMenuItemProps(props),\n    name: props.text || 'name',\n    value: props.value || 'value',\n  };\n};\n\nexport const shimMenuHeaderProps = (props: IContextualMenuItem): MenuGroupHeaderProps => {\n  return {\n    children: props.sectionProps?.title,\n  };\n};\n"]}

package/lib-amd/components/Stack/StackItemShim.js

@@ -0,0 +1,150 @@
+define(["require", "exports", "tslib", "react", "@griffel/react"], function (require, exports, tslib_1, React, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.StackItemShim = void 0;
+    var stackItemClassNames = {
+        root: 'ms-StackItem',
+    };
+    var useStackItemShimStyles = react_1.makeStyles({
+        root: {
+            height: 'auto',
+            width: 'auto',
+        },
+        disableShrink: {
+            flexShrink: 0,
+        },
+        verticalFill: {
+            height: '100%',
+        },
+    });
+    var useFlexAlignSelfStyles = react_1.makeStyles({
+        auto: {
+            alignSelf: 'auto',
+        },
+        baseline: {
+            alignSelf: 'baseline',
+        },
+        center: {
+            alignSelf: 'center',
+        },
+        start: {
+            alignSelf: 'flex-start',
+        },
+        end: {
+            alignSelf: 'flex-end',
+        },
+        stretch: {
+            alignSelf: 'stretch',
+        },
+    });
+    var useFlexGrowStyles = react_1.makeStyles({
+        inherit: {
+            flexGrow: 'inherit',
+        },
+        initial: {
+            flexGrow: 'initial',
+        },
+        revert: {
+            flexGrow: 'revert',
+        },
+        unset: {
+            flexGrow: 'unset',
+        },
+        '1': {
+            flexGrow: 1,
+        },
+        '2': {
+            flexGrow: 2,
+        },
+        '3': {
+            flexGrow: 3,
+        },
+    });
+    var useFlexShrinkStyles = react_1.makeStyles({
+        inherit: {
+            flexShrink: 'inherit',
+        },
+        initial: {
+            flexShrink: 'initial',
+        },
+        revert: {
+            flexShrink: 'revert',
+        },
+        unset: {
+            flexShrink: 'unset',
+        },
+        0: {
+            flexShrink: 0,
+        },
+        1: {
+            flexShrink: 1,
+        },
+        2: {
+            flexShrink: 2,
+        },
+    });
+    var useFlexOrderStyles = react_1.makeStyles({
+        inherit: {
+            order: 'inherit',
+        },
+        initial: {
+            order: 'initial',
+        },
+        unset: {
+            order: 'unset',
+        },
+        revert: {
+            order: 'revert',
+        },
+        '-3': {
+            order: -3,
+        },
+        '-2': {
+            order: -2,
+        },
+        '-1': {
+            order: -1,
+        },
+        '0': {
+            order: 0,
+        },
+        '1': {
+            order: 1,
+        },
+        '2': {
+            order: 2,
+        },
+        '3': {
+            order: 3,
+        },
+    });
+    var StackItemShim = function (props) {
+        var grow = props.grow, shrink = props.shrink, disableShrink = props.disableShrink, align = props.align, verticalFill = props.verticalFill, order = props.order, className = props.className, children = props.children;
+        var styles = useStackItemShimStyles();
+        var alignSelfStyles = useFlexAlignSelfStyles();
+        var shrinkFlexStyles = useFlexShrinkStyles();
+        var growFlexStyles = useFlexGrowStyles();
+        var orderFlexStyles = useFlexOrderStyles();
+        var stackItemStyles = [styles.root, align && alignSelfStyles[align], verticalFill && styles.verticalFill];
+        if (order) {
+            stackItemStyles.push(orderFlexStyles[order]);
+        }
+        if (grow) {
+            var flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];
+            stackItemStyles.push(flexGrow);
+        }
+        if (shrink && !disableShrink) {
+            stackItemStyles.push(shrinkFlexStyles[1]);
+        }
+        else if (disableShrink || (!grow && !shrink)) {
+            stackItemStyles.push(shrinkFlexStyles[0]);
+        }
+        if (disableShrink) {
+            stackItemStyles.push(styles.disableShrink);
+        }
+        var rootStyles = react_1.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([stackItemClassNames.root], stackItemStyles), [className]));
+        return React.createElement("div", { className: rootStyles }, children);
+    };
+    exports.StackItemShim = StackItemShim;
+});
+//# sourceMappingURL=StackItemShim.js.map

package/lib-amd/components/Stack/StackItemShim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackItemShim.js","sourceRoot":"../src/","sources":["components/Stack/StackItemShim.tsx"],"names":[],"mappings":";;;;IAKA,IAAM,mBAAmB,GAAG;QAC1B,IAAI,EAAE,cAAc;KACrB,CAAC;IAEF,IAAM,sBAAsB,GAAG,kBAAU,CAAC;QACxC,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,aAAa,EAAE;YACb,UAAU,EAAE,CAAC;SACd;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,MAAM;SACf;KACF,CAAC,CAAC;IAEH,IAAM,sBAAsB,GAAG,kBAAU,CAAC;QACxC,IAAI,EAAE;YACJ,SAAS,EAAE,MAAM;SAClB;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,UAAU;SACtB;QACD,MAAM,EAAE;YACN,SAAS,EAAE,QAAQ;SACpB;QACD,KAAK,EAAE;YACL,SAAS,EAAE,YAAY;SACxB;QACD,GAAG,EAAE;YACH,SAAS,EAAE,UAAU;SACtB;QACD,OAAO,EAAE;YACP,SAAS,EAAE,SAAS;SACrB;KACF,CAAC,CAAC;IAEH,IAAM,iBAAiB,GAAG,kBAAU,CAAC;QACnC,OAAO,EAAE;YACP,QAAQ,EAAE,SAAS;SACpB;QACD,OAAO,EAAE;YACP,QAAQ,EAAE,SAAS;SACpB;QACD,MAAM,EAAE;YACN,QAAQ,EAAE,QAAQ;SACnB;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,OAAO;SAClB;QACD,GAAG,EAAE;YACH,QAAQ,EAAE,CAAC;SACZ;QACD,GAAG,EAAE;YACH,QAAQ,EAAE,CAAC;SACZ;QACD,GAAG,EAAE;YACH,QAAQ,EAAE,CAAC;SACZ;KACF,CAAC,CAAC;IAEH,IAAM,mBAAmB,GAAG,kBAAU,CAAC;QACrC,OAAO,EAAE;YACP,UAAU,EAAE,SAAS;SACtB;QACD,OAAO,EAAE;YACP,UAAU,EAAE,SAAS;SACtB;QACD,MAAM,EAAE;YACN,UAAU,EAAE,QAAQ;SACrB;QACD,KAAK,EAAE;YACL,UAAU,EAAE,OAAO;SACpB;QACD,CAAC,EAAE;YACD,UAAU,EAAE,CAAC;SACd;QACD,CAAC,EAAE;YACD,UAAU,EAAE,CAAC;SACd;QACD,CAAC,EAAE;YACD,UAAU,EAAE,CAAC;SACd;KACF,CAAC,CAAC;IAEH,IAAM,kBAAkB,GAAG,kBAAU,CAAC;QACpC,OAAO,EAAE;YACP,KAAK,EAAE,SAAS;SACjB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,SAAS;SACjB;QACD,KAAK,EAAE;YACL,KAAK,EAAE,OAAO;SACf;QACD,MAAM,EAAE;YACN,KAAK,EAAE,QAAQ;SAChB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,CAAC,CAAC;SACV;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,CAAC,CAAC;SACV;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,CAAC,CAAC;SACV;QACD,GAAG,EAAE;YACH,KAAK,EAAE,CAAC;SACT;QACD,GAAG,EAAE;YACH,KAAK,EAAE,CAAC;SACT;QACD,GAAG,EAAE;YACH,KAAK,EAAE,CAAC;SACT;QACD,GAAG,EAAE;YACH,KAAK,EAAE,CAAC;SACT;KACF,CAAC,CAAC;IAEI,IAAM,aAAa,GAAG,UAAC,KAAsB;QAC1C,IAAA,IAAI,GAA6E,KAAK,KAAlF,EAAE,MAAM,GAAqE,KAAK,OAA1E,EAAE,aAAa,GAAsD,KAAK,cAA3D,EAAE,KAAK,GAA+C,KAAK,MAApD,EAAE,YAAY,GAAiC,KAAK,aAAtC,EAAE,KAAK,GAA0B,KAAK,MAA/B,EAAE,SAAS,GAAe,KAAK,UAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAE/F,IAAM,MAAM,GAAG,sBAAsB,EAAE,CAAC;QACxC,IAAM,eAAe,GAAG,sBAAsB,EAAE,CAAC;QACjD,IAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;QAC/C,IAAM,cAAc,GAA2B,iBAAiB,EAAE,CAAC;QACnE,IAAM,eAAe,GAA2B,kBAAkB,EAAE,CAAC;QAErE,IAAM,eAAe,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,IAAI,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY,IAAI,MAAM,CAAC,YAAY,CAAC,CAAC;QAE5G,IAAI,KAAK,EAAE;YACT,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;SAC9C;QAED,IAAI,IAAI,EAAE;YACR,IAAM,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC1E,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAChC;QAED,IAAI,MAAM,IAAI,CAAC,aAAa,EAAE;YAC5B,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;SAC3C;aAAM,IAAI,aAAa,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE;YAC9C,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;SAC3C;QAED,IAAI,aAAa,EAAE;YACjB,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;SAC5C;QAED,IAAM,UAAU,GAAG,oBAAY,4DAAC,mBAAmB,CAAC,IAAI,GAAK,eAAe,IAAE,SAAS,GAAC,CAAC;QAEzF,OAAO,6BAAK,SAAS,EAAE,UAAU,IAAG,QAAQ,CAAO,CAAC;IACtD,CAAC,CAAC;IAjCW,QAAA,aAAa,iBAiCxB","sourcesContent":["import * as React from 'react';\n\nimport { IStackItemProps } from '@fluentui/react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nconst stackItemClassNames = {\n  root: 'ms-StackItem',\n};\n\nconst useStackItemShimStyles = makeStyles({\n  root: {\n    height: 'auto',\n    width: 'auto',\n  },\n  disableShrink: {\n    flexShrink: 0,\n  },\n  verticalFill: {\n    height: '100%',\n  },\n});\n\nconst useFlexAlignSelfStyles = makeStyles({\n  auto: {\n    alignSelf: 'auto',\n  },\n  baseline: {\n    alignSelf: 'baseline',\n  },\n  center: {\n    alignSelf: 'center',\n  },\n  start: {\n    alignSelf: 'flex-start',\n  },\n  end: {\n    alignSelf: 'flex-end',\n  },\n  stretch: {\n    alignSelf: 'stretch',\n  },\n});\n\nconst useFlexGrowStyles = makeStyles({\n  inherit: {\n    flexGrow: 'inherit',\n  },\n  initial: {\n    flexGrow: 'initial',\n  },\n  revert: {\n    flexGrow: 'revert',\n  },\n  unset: {\n    flexGrow: 'unset',\n  },\n  '1': {\n    flexGrow: 1,\n  },\n  '2': {\n    flexGrow: 2,\n  },\n  '3': {\n    flexGrow: 3,\n  },\n});\n\nconst useFlexShrinkStyles = makeStyles({\n  inherit: {\n    flexShrink: 'inherit',\n  },\n  initial: {\n    flexShrink: 'initial',\n  },\n  revert: {\n    flexShrink: 'revert',\n  },\n  unset: {\n    flexShrink: 'unset',\n  },\n  0: {\n    flexShrink: 0,\n  },\n  1: {\n    flexShrink: 1,\n  },\n  2: {\n    flexShrink: 2,\n  },\n});\n\nconst useFlexOrderStyles = makeStyles({\n  inherit: {\n    order: 'inherit',\n  },\n  initial: {\n    order: 'initial',\n  },\n  unset: {\n    order: 'unset',\n  },\n  revert: {\n    order: 'revert',\n  },\n  '-3': {\n    order: -3,\n  },\n  '-2': {\n    order: -2,\n  },\n  '-1': {\n    order: -1,\n  },\n  '0': {\n    order: 0,\n  },\n  '1': {\n    order: 1,\n  },\n  '2': {\n    order: 2,\n  },\n  '3': {\n    order: 3,\n  },\n});\n\nexport const StackItemShim = (props: IStackItemProps) => {\n  const { grow, shrink, disableShrink, align, verticalFill, order, className, children } = props;\n\n  const styles = useStackItemShimStyles();\n  const alignSelfStyles = useFlexAlignSelfStyles();\n  const shrinkFlexStyles = useFlexShrinkStyles();\n  const growFlexStyles: Record<string, string> = useFlexGrowStyles();\n  const orderFlexStyles: Record<string, string> = useFlexOrderStyles();\n\n  const stackItemStyles = [styles.root, align && alignSelfStyles[align], verticalFill && styles.verticalFill];\n\n  if (order) {\n    stackItemStyles.push(orderFlexStyles[order]);\n  }\n\n  if (grow) {\n    const flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];\n    stackItemStyles.push(flexGrow);\n  }\n\n  if (shrink && !disableShrink) {\n    stackItemStyles.push(shrinkFlexStyles[1]);\n  } else if (disableShrink || (!grow && !shrink)) {\n    stackItemStyles.push(shrinkFlexStyles[0]);\n  }\n\n  if (disableShrink) {\n    stackItemStyles.push(styles.disableShrink);\n  }\n\n  const rootStyles = mergeClasses(stackItemClassNames.root, ...stackItemStyles, className);\n\n  return <div className={rootStyles}>{children}</div>;\n};\n"]}

package/lib-amd/components/Stack/StackShim.js

@@ -0,0 +1,242 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react", "@griffel/react", "./stackUtils"], function (require, exports, tslib_1, React, react_1, react_2, stackUtils_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.StackShim = void 0;
+    var stackClassNames = {
+        root: 'ms-Stack',
+        inner: 'ms-Stack-inner',
+    };
+    var getClassNames = react_1.classNamesFunction();
+    var useStackStyles = react_2.makeStyles({
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            flexWrap: 'nowrap',
+            width: 'auto',
+            height: 'auto',
+            boxSizing: 'border-box',
+            '> *': {
+                textOverflow: 'ellipsis',
+            },
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            '> *:not(.ms-StackItem)': {
+                flexShrink: 1,
+            },
+        },
+        horizontal: {
+            flexDirection: 'row',
+        },
+        verticalFill: {
+            height: '100%',
+        },
+        reversedVertical: {
+            flexDirection: 'column-reverse',
+        },
+        reversedHorizontal: {
+            flexDirection: 'row-reverse',
+        },
+        disableShrink: {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            '> *:not(.ms-StackItem)': {
+                flexShrink: 0,
+            },
+        },
+        wrap: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            height: '100%',
+        },
+        inner: {
+            display: 'flex',
+            flexDirection: 'column',
+            flexWrap: 'wrap',
+            boxSizing: 'border-box',
+            maxWidth: '100vw',
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            '> *:not(.ms-StackItem)': {
+                flexShrink: 1,
+            },
+        },
+        innerWidth: {
+            width: '100%',
+        },
+    });
+    var useFlexGrowStyles = react_2.makeStyles({
+        inherit: {
+            flexGrow: 'inherit',
+        },
+        initial: {
+            flexGrow: 'initial',
+        },
+        revert: {
+            flexGrow: 'revert',
+        },
+        unset: {
+            flexGrow: 'unset',
+        },
+        '1': {
+            flexGrow: 1,
+        },
+        '2': {
+            flexGrow: 2,
+        },
+        '3': {
+            flexGrow: 3,
+        },
+    });
+    var useFlexAlignItemsStyles = react_2.makeStyles({
+        baseline: {
+            alignItems: 'baseline',
+        },
+        center: {
+            alignItems: 'center',
+        },
+        start: {
+            alignItems: 'flex-start',
+        },
+        end: {
+            alignItems: 'flex-end',
+        },
+        stretch: {
+            alignItems: 'stretch',
+        },
+        'space-between': {
+            alignItems: 'space-between',
+        },
+        'space-around': {
+            alignItems: 'space-around',
+        },
+        'space-evenly': {
+            alignItems: 'space-evenly',
+        },
+    });
+    var useFlexJustifyContentStyles = react_2.makeStyles({
+        baseline: {
+            justifyContent: 'baseline',
+        },
+        center: {
+            justifyContent: 'center',
+        },
+        start: {
+            justifyContent: 'flex-start',
+        },
+        end: {
+            justifyContent: 'flex-end',
+        },
+        stretch: {
+            justifyContent: 'stretch',
+        },
+        'space-between': {
+            justifyContent: 'space-between',
+        },
+        'space-around': {
+            justifyContent: 'space-around',
+        },
+        'space-evenly': {
+            justifyContent: 'space-evenly',
+        },
+    });
+    var StackShim = function (props) {
+        var styles = useStackStyles();
+        var alignItemsFlexStyles = useFlexAlignItemsStyles();
+        var justifyContentFlexStyles = useFlexJustifyContentStyles();
+        var growFlexStyles = useFlexGrowStyles();
+        var _a = props.as, RootType = _a === void 0 ? 'div' : _a, verticalFill = props.verticalFill, horizontal = props.horizontal, reversed = props.reversed, grow = props.grow, wrap = props.wrap, horizontalAlign = props.horizontalAlign, verticalAlign = props.verticalAlign, disableShrink = props.disableShrink, className = props.className;
+        var tokens = tslib_1.__assign({}, props.tokens);
+        var tokensRootStyles = {};
+        var tokensInnerStyles = {};
+        var childrenGapClassName;
+        if (tokens) {
+            tokensRootStyles = {
+                padding: !wrap ? tokens.padding : undefined,
+                maxHeight: tokens.maxHeight,
+                maxWidth: tokens.maxWidth,
+            };
+            tokensInnerStyles = {
+                padding: wrap ? tokens.padding : undefined,
+            };
+            if (tokens.childrenGap) {
+                childrenGapClassName = getClassNames(stackUtils_1.getChildrenGapStyles, {
+                    horizontal: horizontal,
+                    reversed: reversed,
+                    tokens: tokens,
+                });
+            }
+        }
+        var stackStyles = [
+            wrap ? styles.wrap : styles.root,
+            horizontal && styles.horizontal,
+            verticalFill && styles.verticalFill,
+        ];
+        var stackInnerStyles = [
+            styles.inner,
+            horizontal && styles.horizontal,
+            (!tokens || !tokens.childrenGap) && styles.innerWidth,
+        ];
+        var stackChildren = React.Children.toArray(props.children);
+        if (stackChildren.length === 1 &&
+            React.isValidElement(stackChildren[0]) &&
+            stackChildren[0].type === React.Fragment) {
+            stackChildren = stackChildren[0].props.children;
+        }
+        stackChildren = React.Children.map(stackChildren, function (child) {
+            if (!child) {
+                return null;
+            }
+            if (child.type && child.type.name === 'StackItemShim') {
+                var defaultItemProps = {
+                    shrink: !disableShrink,
+                };
+                return React.cloneElement(child, tslib_1.__assign(tslib_1.__assign({}, defaultItemProps), child.props));
+            }
+            return child;
+        });
+        if (reversed) {
+            if (horizontal) {
+                stackStyles.push(styles.reversedHorizontal);
+                stackInnerStyles.push(styles.reversedHorizontal);
+            }
+            else {
+                stackStyles.push(styles.reversedVertical);
+                stackInnerStyles.push(styles.reversedVertical);
+            }
+        }
+        if (grow) {
+            var flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];
+            stackStyles.push(flexGrow);
+        }
+        if (disableShrink) {
+            stackStyles.push(styles.disableShrink);
+        }
+        if (horizontalAlign) {
+            if (horizontal) {
+                stackStyles.push(justifyContentFlexStyles[horizontalAlign]);
+                stackInnerStyles.push(justifyContentFlexStyles[horizontalAlign]);
+            }
+            else {
+                stackStyles.push(alignItemsFlexStyles[horizontalAlign]);
+                stackInnerStyles.push(alignItemsFlexStyles[horizontalAlign]);
+            }
+        }
+        if (verticalAlign) {
+            if (horizontal) {
+                stackStyles.push(alignItemsFlexStyles[verticalAlign]);
+                stackInnerStyles.push(alignItemsFlexStyles[verticalAlign]);
+            }
+            else {
+                stackStyles.push(justifyContentFlexStyles[verticalAlign]);
+                stackInnerStyles.push(justifyContentFlexStyles[verticalAlign]);
+            }
+        }
+        var rootClass = react_2.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([stackClassNames.root], stackStyles), [childrenGapClassName && !wrap && childrenGapClassName.root,
+            className]));
+        var innerClass = react_2.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([stackClassNames.inner], stackInnerStyles), [childrenGapClassName && wrap && childrenGapClassName.inner]));
+        return wrap ? (React.createElement(RootType, { className: rootClass, style: tokensRootStyles },
+            React.createElement("div", { className: innerClass, style: tokensInnerStyles }, stackChildren))) : (React.createElement(RootType, { className: rootClass, style: tokensRootStyles }, stackChildren));
+    };
+    exports.StackShim = StackShim;
+});
+//# sourceMappingURL=StackShim.js.map

package/lib-amd/components/Stack/StackShim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackShim.js","sourceRoot":"../src/","sources":["components/Stack/StackShim.tsx"],"names":[],"mappings":";;;;IAQA,IAAM,eAAe,GAAG;QACtB,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,gBAAgB;KACxB,CAAC;IAEF,IAAM,aAAa,GAAG,0BAAkB,EAAgC,CAAC;IAEzE,IAAM,cAAc,GAAG,kBAAU,CAAC;QAChC,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,YAAY;YACvB,KAAK,EAAE;gBACL,YAAY,EAAE,UAAU;aACzB;YACD,6DAA6D;YAC7D,aAAa;YACb,wBAAwB,EAAE;gBACxB,UAAU,EAAE,CAAC;aACd;SACF;QACD,UAAU,EAAE;YACV,aAAa,EAAE,KAAK;SACrB;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,MAAM;SACf;QACD,gBAAgB,EAAE;YAChB,aAAa,EAAE,gBAAgB;SAChC;QACD,kBAAkB,EAAE;YAClB,aAAa,EAAE,aAAa;SAC7B;QACD,aAAa,EAAE;YACb,6DAA6D;YAC7D,aAAa;YACb,wBAAwB,EAAE;gBACxB,UAAU,EAAE,CAAC;aACd;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;SACf;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,QAAQ,EAAE,MAAM;YAChB,SAAS,EAAE,YAAY;YACvB,QAAQ,EAAE,OAAO;YACjB,6DAA6D;YAC7D,aAAa;YACb,wBAAwB,EAAE;gBACxB,UAAU,EAAE,CAAC;aACd;SACF;QACD,UAAU,EAAE;YACV,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAC;IAEH,IAAM,iBAAiB,GAAG,kBAAU,CAAC;QACnC,OAAO,EAAE;YACP,QAAQ,EAAE,SAAS;SACpB;QACD,OAAO,EAAE;YACP,QAAQ,EAAE,SAAS;SACpB;QACD,MAAM,EAAE;YACN,QAAQ,EAAE,QAAQ;SACnB;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,OAAO;SAClB;QACD,GAAG,EAAE;YACH,QAAQ,EAAE,CAAC;SACZ;QACD,GAAG,EAAE;YACH,QAAQ,EAAE,CAAC;SACZ;QACD,GAAG,EAAE;YACH,QAAQ,EAAE,CAAC;SACZ;KACF,CAAC,CAAC;IAEH,IAAM,uBAAuB,GAAG,kBAAU,CAAC;QACzC,QAAQ,EAAE;YACR,UAAU,EAAE,UAAU;SACvB;QACD,MAAM,EAAE;YACN,UAAU,EAAE,QAAQ;SACrB;QACD,KAAK,EAAE;YACL,UAAU,EAAE,YAAY;SACzB;QACD,GAAG,EAAE;YACH,UAAU,EAAE,UAAU;SACvB;QACD,OAAO,EAAE;YACP,UAAU,EAAE,SAAS;SACtB;QACD,eAAe,EAAE;YACf,UAAU,EAAE,eAAe;SAC5B;QAED,cAAc,EAAE;YACd,UAAU,EAAE,cAAc;SAC3B;QACD,cAAc,EAAE;YACd,UAAU,EAAE,cAAc;SAC3B;KACF,CAAC,CAAC;IAEH,IAAM,2BAA2B,GAAG,kBAAU,CAAC;QAC7C,QAAQ,EAAE;YACR,cAAc,EAAE,UAAU;SAC3B;QACD,MAAM,EAAE;YACN,cAAc,EAAE,QAAQ;SACzB;QACD,KAAK,EAAE;YACL,cAAc,EAAE,YAAY;SAC7B;QACD,GAAG,EAAE;YACH,cAAc,EAAE,UAAU;SAC3B;QACD,OAAO,EAAE;YACP,cAAc,EAAE,SAAS;SAC1B;QACD,eAAe,EAAE;YACf,cAAc,EAAE,eAAe;SAChC;QAED,cAAc,EAAE;YACd,cAAc,EAAE,cAAc;SAC/B;QACD,cAAc,EAAE;YACd,cAAc,EAAE,cAAc;SAC/B;KACF,CAAC,CAAC;IAEI,IAAM,SAAS,GAAG,UAAC,KAAkB;QAC1C,IAAM,MAAM,GAAG,cAAc,EAAE,CAAC;QAChC,IAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;QACvD,IAAM,wBAAwB,GAAG,2BAA2B,EAAE,CAAC;QAC/D,IAAM,cAAc,GAA2B,iBAAiB,EAAE,CAAC;QAGjE,IAAA,KAUE,KAAK,GAVa,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EACpB,YAAY,GASV,KAAK,aATK,EACZ,UAAU,GAQR,KAAK,WARG,EACV,QAAQ,GAON,KAAK,SAPC,EACR,IAAI,GAMF,KAAK,KANH,EACJ,IAAI,GAKF,KAAK,KALH,EACJ,eAAe,GAIb,KAAK,gBAJQ,EACf,aAAa,GAGX,KAAK,cAHM,EACb,aAAa,GAEX,KAAK,cAFM,EACb,SAAS,GACP,KAAK,UADE,CACD;QAEV,IAAM,MAAM,wBAAsB,KAAK,CAAC,MAAM,CAAE,CAAC;QAEjD,IAAI,gBAAgB,GAAG,EAAE,CAAC;QAC1B,IAAI,iBAAiB,GAAG,EAAE,CAAC;QAC3B,IAAI,oBAAoB,CAAC;QAEzB,IAAI,MAAM,EAAE;YACV,gBAAgB,GAAG;gBACjB,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;gBAC3C,SAAS,EAAE,MAAM,CAAC,SAAS;gBAC3B,QAAQ,EAAE,MAAM,CAAC,QAAQ;aAC1B,CAAC;YAEF,iBAAiB,GAAG;gBAClB,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;aAC3C,CAAC;YAEF,IAAI,MAAM,CAAC,WAAW,EAAE;gBACtB,oBAAoB,GAAG,aAAa,CAAC,iCAAoB,EAAE;oBACzD,UAAU,YAAA;oBACV,QAAQ,UAAA;oBACR,MAAM,QAAA;iBACP,CAAC,CAAC;aACJ;SACF;QAED,IAAM,WAAW,GAAG;YAClB,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI;YAChC,UAAU,IAAI,MAAM,CAAC,UAAU;YAC/B,YAAY,IAAI,MAAM,CAAC,YAAY;SACpC,CAAC;QAEF,IAAM,gBAAgB,GAAG;YACvB,MAAM,CAAC,KAAK;YACZ,UAAU,IAAI,MAAM,CAAC,UAAU;YAC/B,CAAC,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,MAAM,CAAC,UAAU;SACtD,CAAC;QAEF,IAAI,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC3D,IACE,aAAa,CAAC,MAAM,KAAK,CAAC;YAC1B,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;YACtC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,QAAQ,EACxC;YACA,aAAa,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;SACjD;QAED,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAChC,aAAqC,EACrC,UAAC,KAA0C;YACzC,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO,IAAI,CAAC;aACb;YAED,IAAI,KAAK,CAAC,IAAI,IAAM,KAA4B,CAAC,IAA4B,CAAC,IAAI,KAAK,eAAe,EAAE;gBACtG,IAAM,gBAAgB,GAAoB;oBACxC,MAAM,EAAE,CAAC,aAAa;iBACvB,CAAC;gBAEF,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,wCAC1B,gBAAgB,GAChB,KAAK,CAAC,KAAK,EACd,CAAC;aACJ;YAED,OAAO,KAAK,CAAC;QACf,CAAC,CACF,CAAC;QAEF,IAAI,QAAQ,EAAE;YACZ,IAAI,UAAU,EAAE;gBACd,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;gBAC5C,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;aAClD;iBAAM;gBACL,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;gBAC1C,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;aAChD;SACF;QAED,IAAI,IAAI,EAAE;YACR,IAAM,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC1E,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC5B;QAED,IAAI,aAAa,EAAE;YACjB,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;SACxC;QAED,IAAI,eAAe,EAAE;YACnB,IAAI,UAAU,EAAE;gBACd,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,eAAe,CAAC,CAAC,CAAC;gBAC5D,gBAAgB,CAAC,IAAI,CAAC,wBAAwB,CAAC,eAAe,CAAC,CAAC,CAAC;aAClE;iBAAM;gBACL,WAAW,CAAC,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC;gBACxD,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC;aAC9D;SACF;QAED,IAAI,aAAa,EAAE;YACjB,IAAI,UAAU,EAAE;gBACd,WAAW,CAAC,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC,CAAC;gBACtD,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC,CAAC;aAC5D;iBAAM;gBACL,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,aAAa,CAAC,CAAC,CAAC;gBAC1D,gBAAgB,CAAC,IAAI,CAAC,wBAAwB,CAAC,aAAa,CAAC,CAAC,CAAC;aAChE;SACF;QAED,IAAM,SAAS,GAAG,oBAAY,4DAC5B,eAAe,CAAC,IAAI,GACjB,WAAW,IACd,oBAAoB,IAAI,CAAC,IAAI,IAAI,oBAAoB,CAAC,IAAI;YAC1D,SAAS,GACV,CAAC;QAEF,IAAM,UAAU,GAAG,oBAAY,4DAC7B,eAAe,CAAC,KAAK,GAClB,gBAAgB,IACnB,oBAAoB,IAAI,IAAI,IAAI,oBAAoB,CAAC,KAAK,GAC3D,CAAC;QAEF,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,oBAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB;YACrD,6BAAK,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,iBAAiB,IACjD,aAAa,CACV,CACG,CACZ,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,IACpD,aAAa,CACL,CACZ,CAAC;IACJ,CAAC,CAAC;IAvJW,QAAA,SAAS,aAuJpB","sourcesContent":["import * as React from 'react';\n\nimport { classNamesFunction } from '@fluentui/react';\nimport type { IStackProps, IStackTokens, IStackItemProps } from '@fluentui/react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getChildrenGapStyles } from './stackUtils';\nimport type { StackShimStyles } from './stackUtils';\n\nconst stackClassNames = {\n  root: 'ms-Stack',\n  inner: 'ms-Stack-inner',\n};\n\nconst getClassNames = classNamesFunction<IStackProps, StackShimStyles>();\n\nconst useStackStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexWrap: 'nowrap',\n    width: 'auto',\n    height: 'auto',\n    boxSizing: 'border-box',\n    '> *': {\n      textOverflow: 'ellipsis',\n    },\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    '> *:not(.ms-StackItem)': {\n      flexShrink: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: 'row',\n  },\n  verticalFill: {\n    height: '100%',\n  },\n  reversedVertical: {\n    flexDirection: 'column-reverse',\n  },\n  reversedHorizontal: {\n    flexDirection: 'row-reverse',\n  },\n  disableShrink: {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    '> *:not(.ms-StackItem)': {\n      flexShrink: 0,\n    },\n  },\n  wrap: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    height: '100%',\n  },\n  inner: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexWrap: 'wrap',\n    boxSizing: 'border-box',\n    maxWidth: '100vw',\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    '> *:not(.ms-StackItem)': {\n      flexShrink: 1,\n    },\n  },\n  innerWidth: {\n    width: '100%',\n  },\n});\n\nconst useFlexGrowStyles = makeStyles({\n  inherit: {\n    flexGrow: 'inherit',\n  },\n  initial: {\n    flexGrow: 'initial',\n  },\n  revert: {\n    flexGrow: 'revert',\n  },\n  unset: {\n    flexGrow: 'unset',\n  },\n  '1': {\n    flexGrow: 1,\n  },\n  '2': {\n    flexGrow: 2,\n  },\n  '3': {\n    flexGrow: 3,\n  },\n});\n\nconst useFlexAlignItemsStyles = makeStyles({\n  baseline: {\n    alignItems: 'baseline',\n  },\n  center: {\n    alignItems: 'center',\n  },\n  start: {\n    alignItems: 'flex-start',\n  },\n  end: {\n    alignItems: 'flex-end',\n  },\n  stretch: {\n    alignItems: 'stretch',\n  },\n  'space-between': {\n    alignItems: 'space-between',\n  },\n\n  'space-around': {\n    alignItems: 'space-around',\n  },\n  'space-evenly': {\n    alignItems: 'space-evenly',\n  },\n});\n\nconst useFlexJustifyContentStyles = makeStyles({\n  baseline: {\n    justifyContent: 'baseline',\n  },\n  center: {\n    justifyContent: 'center',\n  },\n  start: {\n    justifyContent: 'flex-start',\n  },\n  end: {\n    justifyContent: 'flex-end',\n  },\n  stretch: {\n    justifyContent: 'stretch',\n  },\n  'space-between': {\n    justifyContent: 'space-between',\n  },\n\n  'space-around': {\n    justifyContent: 'space-around',\n  },\n  'space-evenly': {\n    justifyContent: 'space-evenly',\n  },\n});\n\nexport const StackShim = (props: IStackProps) => {\n  const styles = useStackStyles();\n  const alignItemsFlexStyles = useFlexAlignItemsStyles();\n  const justifyContentFlexStyles = useFlexJustifyContentStyles();\n  const growFlexStyles: Record<string, string> = useFlexGrowStyles();\n\n  const {\n    as: RootType = 'div',\n    verticalFill,\n    horizontal,\n    reversed,\n    grow,\n    wrap,\n    horizontalAlign,\n    verticalAlign,\n    disableShrink,\n    className,\n  } = props;\n\n  const tokens: IStackTokens = { ...props.tokens };\n\n  let tokensRootStyles = {};\n  let tokensInnerStyles = {};\n  let childrenGapClassName;\n\n  if (tokens) {\n    tokensRootStyles = {\n      padding: !wrap ? tokens.padding : undefined,\n      maxHeight: tokens.maxHeight,\n      maxWidth: tokens.maxWidth,\n    };\n\n    tokensInnerStyles = {\n      padding: wrap ? tokens.padding : undefined,\n    };\n\n    if (tokens.childrenGap) {\n      childrenGapClassName = getClassNames(getChildrenGapStyles, {\n        horizontal,\n        reversed,\n        tokens,\n      });\n    }\n  }\n\n  const stackStyles = [\n    wrap ? styles.wrap : styles.root,\n    horizontal && styles.horizontal,\n    verticalFill && styles.verticalFill,\n  ];\n\n  const stackInnerStyles = [\n    styles.inner,\n    horizontal && styles.horizontal,\n    (!tokens || !tokens.childrenGap) && styles.innerWidth,\n  ];\n\n  let stackChildren = React.Children.toArray(props.children);\n  if (\n    stackChildren.length === 1 &&\n    React.isValidElement(stackChildren[0]) &&\n    stackChildren[0].type === React.Fragment\n  ) {\n    stackChildren = stackChildren[0].props.children;\n  }\n\n  stackChildren = React.Children.map(\n    stackChildren as React.ReactElement[],\n    (child: React.ReactElement<IStackItemProps>) => {\n      if (!child) {\n        return null;\n      }\n\n      if (child.type && ((child as React.ReactElement).type as React.ComponentType).name === 'StackItemShim') {\n        const defaultItemProps: IStackItemProps = {\n          shrink: !disableShrink,\n        };\n\n        return React.cloneElement(child, {\n          ...defaultItemProps,\n          ...child.props,\n        });\n      }\n\n      return child;\n    },\n  );\n\n  if (reversed) {\n    if (horizontal) {\n      stackStyles.push(styles.reversedHorizontal);\n      stackInnerStyles.push(styles.reversedHorizontal);\n    } else {\n      stackStyles.push(styles.reversedVertical);\n      stackInnerStyles.push(styles.reversedVertical);\n    }\n  }\n\n  if (grow) {\n    const flexGrow = grow === true ? growFlexStyles[1] : growFlexStyles[grow];\n    stackStyles.push(flexGrow);\n  }\n\n  if (disableShrink) {\n    stackStyles.push(styles.disableShrink);\n  }\n\n  if (horizontalAlign) {\n    if (horizontal) {\n      stackStyles.push(justifyContentFlexStyles[horizontalAlign]);\n      stackInnerStyles.push(justifyContentFlexStyles[horizontalAlign]);\n    } else {\n      stackStyles.push(alignItemsFlexStyles[horizontalAlign]);\n      stackInnerStyles.push(alignItemsFlexStyles[horizontalAlign]);\n    }\n  }\n\n  if (verticalAlign) {\n    if (horizontal) {\n      stackStyles.push(alignItemsFlexStyles[verticalAlign]);\n      stackInnerStyles.push(alignItemsFlexStyles[verticalAlign]);\n    } else {\n      stackStyles.push(justifyContentFlexStyles[verticalAlign]);\n      stackInnerStyles.push(justifyContentFlexStyles[verticalAlign]);\n    }\n  }\n\n  const rootClass = mergeClasses(\n    stackClassNames.root,\n    ...stackStyles,\n    childrenGapClassName && !wrap && childrenGapClassName.root,\n    className,\n  );\n\n  const innerClass = mergeClasses(\n    stackClassNames.inner,\n    ...stackInnerStyles,\n    childrenGapClassName && wrap && childrenGapClassName.inner,\n  );\n\n  return wrap ? (\n    <RootType className={rootClass} style={tokensRootStyles}>\n      <div className={innerClass} style={tokensInnerStyles}>\n        {stackChildren}\n      </div>\n    </RootType>\n  ) : (\n    <RootType className={rootClass} style={tokensRootStyles}>\n      {stackChildren}\n    </RootType>\n  );\n};\n"]}

package/lib-amd/components/Stack/index.js

@@ -0,0 +1,7 @@
+define(["require", "exports", "tslib", "./StackItemShim", "./StackShim"], function (require, exports, tslib_1, StackItemShim_1, StackShim_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(StackItemShim_1, exports);
+    tslib_1.__exportStar(StackShim_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/Stack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Stack/index.ts"],"names":[],"mappings":";;;IAAA,+CAAgC;IAChC,2CAA4B","sourcesContent":["export * from './StackItemShim';\nexport * from './StackShim';\n"]}

package/lib-amd/components/Stack/stackUtils.js

@@ -0,0 +1,168 @@
+define(["require", "exports", "tslib", "@fluentui/react"], function (require, exports, tslib_1, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getChildrenGapStyles = exports.parsePadding = exports.parseGap = void 0;
+    // 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").
+     */
+    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,
+        };
+    };
+    exports.parseGap = parseGap;
+    /**
+     * 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.
+     */
+    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);
+        });
+    };
+    exports.parsePadding = parsePadding;
+    /**
+     *
+     * getStyles function for Stack.tokens.childrenGap prop styling
+     */
+    var getChildrenGapStyles = function (props) {
+        var theme = react_1.getTheme();
+        var horizontal = props.horizontal, reversed = props.reversed;
+        var tokens = tslib_1.__assign({}, props.tokens);
+        var _a = exports.parseGap(tokens.childrenGap, theme), rowGap = _a.rowGap, columnGap = _a.columnGap;
+        var horizontalMargin = "" + -0.5 * columnGap.value + columnGap.unit;
+        var verticalMargin = "" + -0.5 * rowGap.value + rowGap.unit;
+        return {
+            root: [
+                reversed &&
+                    horizontal && {
+                    '> *:not(:last-child)': {
+                        marginLeft: "" + columnGap.value + columnGap.unit,
+                    },
+                },
+                reversed &&
+                    !horizontal && {
+                    '> *:not(:last-child)': {
+                        marginTop: "" + rowGap.value + rowGap.unit,
+                    },
+                },
+                !reversed &&
+                    horizontal && {
+                    '> *:not(:first-child)': {
+                        marginLeft: "" + columnGap.value + columnGap.unit,
+                    },
+                },
+                !reversed &&
+                    !horizontal && {
+                    '> *:not(:first-child)': {
+                        marginTop: "" + rowGap.value + rowGap.unit,
+                    },
+                },
+            ],
+            inner: [
+                {
+                    marginLeft: horizontalMargin,
+                    marginRight: horizontalMargin,
+                    marginTop: verticalMargin,
+                    marginBottom: verticalMargin,
+                    width: columnGap.value === 0 ? '100%' : "calc(100% + " + columnGap.value + columnGap.unit + ")",
+                    '> *': {
+                        margin: "" + 0.5 * rowGap.value + rowGap.unit + " " + 0.5 * columnGap.value + columnGap.unit,
+                    },
+                },
+                horizontal && {
+                    height: rowGap.value === 0 ? '100%' : "calc(100% + " + rowGap.value + rowGap.unit + ")",
+                    '> *': {
+                        maxWidth: columnGap.value === 0 ? '100%' : "calc(100% - " + columnGap.value + columnGap.unit + ")",
+                    },
+                },
+                !horizontal && {
+                    height: "calc(100% + " + rowGap.value + rowGap.unit + ")",
+                    '> *': {
+                        maxHeight: rowGap.value === 0 ? '100%' : "calc(100% - " + rowGap.value + rowGap.unit + ")",
+                    },
+                },
+            ],
+        };
+    };
+    exports.getChildrenGapStyles = getChildrenGapStyles;
+});
+//# sourceMappingURL=stackUtils.js.map