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

package/lib/components/Stack/StackShim.js

@@ -0,0 +1,260 @@
+import * as React from 'react';
+import { classNamesFunction } from '@fluentui/react';
+import { __styles, mergeClasses } from '@griffel/react';
+import { getChildrenGapStyles } from './stackUtils';
+const stackClassNames = {
+  root: 'ms-Stack',
+  inner: 'ms-Stack-inner'
+};
+const getClassNames = /*#__PURE__*/classNamesFunction();
+
+const useStackStyles = /*#__PURE__*/__styles({
+  "root": {
+    "mc9l5x": "f22iagw",
+    "Beiy3e4": "f1vx9l62",
+    "Eh141a": "flvyvdh",
+    "a9b677": "f14z66ap",
+    "Bqenvij": "f11ysow2",
+    "B7ck84d": "f1ewtqcl",
+    "Bj0s3o2": "fh9g2hb",
+    "alpwn5": "f1mj8y37"
+  },
+  "horizontal": {
+    "Beiy3e4": "f1063pyq"
+  },
+  "verticalFill": {
+    "Bqenvij": "f1l02sjl"
+  },
+  "reversedVertical": {
+    "Beiy3e4": "f1gkdon0"
+  },
+  "reversedHorizontal": {
+    "Beiy3e4": "f1oztnx0"
+  },
+  "disableShrink": {
+    "alpwn5": "f1am4glz"
+  },
+  "wrap": {
+    "mc9l5x": "f22iagw",
+    "Eh141a": "fni485r",
+    "Bqenvij": "f1l02sjl"
+  },
+  "inner": {
+    "mc9l5x": "f22iagw",
+    "Beiy3e4": "f1vx9l62",
+    "Eh141a": "fni485r",
+    "B7ck84d": "f1ewtqcl",
+    "B2u0y6b": "f1w39fev",
+    "alpwn5": "f1mj8y37"
+  },
+  "innerWidth": {
+    "a9b677": "fly5x3f"
+  }
+}, {
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f14z66ap{width:auto;}", ".f11ysow2{height:auto;}", ".f1ewtqcl{box-sizing:border-box;}", ".fh9g2hb>*{text-overflow:ellipsis;}", ".f1mj8y37>*:not(.ms-StackItem){-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1l02sjl{height:100%;}", ".f1gkdon0{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}", ".f1oztnx0{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}", ".f1am4glz>*:not(.ms-StackItem){-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fni485r{-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}", ".f1w39fev{max-width:100vw;}", ".fly5x3f{width:100%;}"]
+});
+
+const useFlexGrowStyles = /*#__PURE__*/__styles({
+  "1": {
+    "Bh6795r": "fqerorx"
+  },
+  "2": {
+    "Bh6795r": "fv68sux"
+  },
+  "3": {
+    "Bh6795r": "f1g5s877"
+  },
+  "inherit": {
+    "Bh6795r": "fbrulcr"
+  },
+  "initial": {
+    "Bh6795r": "fqq5sy3"
+  },
+  "revert": {
+    "Bh6795r": "f1kc8nlq"
+  },
+  "unset": {
+    "Bh6795r": "fepjonw"
+  }
+}, {
+  "d": [".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fv68sux{-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;}", ".f1g5s877{-webkit-box-flex:3;-webkit-flex-grow:3;-ms-flex-positive:3;flex-grow:3;}", ".fbrulcr{-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;}", ".fqq5sy3{-webkit-box-flex:initial;-webkit-flex-grow:initial;-ms-flex-positive:initial;flex-grow:initial;}", ".f1kc8nlq{-webkit-box-flex:revert;-webkit-flex-grow:revert;-ms-flex-positive:revert;flex-grow:revert;}", ".fepjonw{-webkit-box-flex:unset;-webkit-flex-grow:unset;-ms-flex-positive:unset;flex-grow:unset;}"]
+});
+
+const useFlexAlignItemsStyles = /*#__PURE__*/__styles({
+  "baseline": {
+    "Bt984gj": "f1guyajx"
+  },
+  "center": {
+    "Bt984gj": "f122n59"
+  },
+  "start": {
+    "Bt984gj": "f6jr5hl"
+  },
+  "end": {
+    "Bt984gj": "fgs5rwf"
+  },
+  "stretch": {
+    "Bt984gj": "f1q9h2pe"
+  },
+  "space-between": {
+    "Bt984gj": "f1jkqsad"
+  },
+  "space-around": {
+    "Bt984gj": "ftnnmgl"
+  },
+  "space-evenly": {
+    "Bt984gj": "f1uhtmqw"
+  }
+}, {
+  "d": [".f1guyajx{-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".fgs5rwf{-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}", ".f1q9h2pe{-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;}", ".f1jkqsad{-webkit-align-items:space-between;-webkit-box-align:space-between;-ms-flex-align:space-between;align-items:space-between;}", ".ftnnmgl{-webkit-align-items:space-around;-webkit-box-align:space-around;-ms-flex-align:space-around;align-items:space-around;}", ".f1uhtmqw{-webkit-align-items:space-evenly;-webkit-box-align:space-evenly;-ms-flex-align:space-evenly;align-items:space-evenly;}"]
+});
+
+const useFlexJustifyContentStyles = /*#__PURE__*/__styles({
+  "baseline": {
+    "Brf1p80": "f1uf0ky1"
+  },
+  "center": {
+    "Brf1p80": "f4d9j23"
+  },
+  "start": {
+    "Brf1p80": "fbhxue7"
+  },
+  "end": {
+    "Brf1p80": "f9c4gz4"
+  },
+  "stretch": {
+    "Brf1p80": "fsxf2b5"
+  },
+  "space-between": {
+    "Brf1p80": "f1869bpl"
+  },
+  "space-around": {
+    "Brf1p80": "f1iw3tyt"
+  },
+  "space-evenly": {
+    "Brf1p80": "figf6al"
+  }
+}, {
+  "d": [".f1uf0ky1{-webkit-box-pack:baseline;-ms-flex-pack:baseline;-webkit-justify-content:baseline;justify-content:baseline;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fbhxue7{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}", ".f9c4gz4{-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1iw3tyt{-webkit-box-pack:space-around;-ms-flex-pack:space-around;-webkit-justify-content:space-around;justify-content:space-around;}", ".figf6al{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;-webkit-justify-content:space-evenly;justify-content:space-evenly;}"]
+});
+
+export const StackShim = props => {
+  const styles = useStackStyles();
+  const alignItemsFlexStyles = useFlexAlignItemsStyles();
+  const justifyContentFlexStyles = useFlexJustifyContentStyles();
+  const growFlexStyles = useFlexGrowStyles();
+  const {
+    as: RootType = 'div',
+    verticalFill,
+    horizontal,
+    reversed,
+    grow,
+    wrap,
+    horizontalAlign,
+    verticalAlign,
+    disableShrink,
+    className
+  } = props;
+  const tokens = { ...props.tokens
+  };
+  let tokensRootStyles = {};
+  let tokensInnerStyles = {};
+  let 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(getChildrenGapStyles, {
+        horizontal,
+        reversed,
+        tokens
+      });
+    }
+  }
+
+  const stackStyles = [wrap ? styles.wrap : styles.root, horizontal && styles.horizontal, verticalFill && styles.verticalFill];
+  const stackInnerStyles = [styles.inner, horizontal && styles.horizontal, (!tokens || !tokens.childrenGap) && styles.innerWidth];
+  let stackChildren = React.Children.toArray(props.children);
+
+  if (stackChildren.length === 1 && /*#__PURE__*/React.isValidElement(stackChildren[0]) && stackChildren[0].type === React.Fragment) {
+    stackChildren = stackChildren[0].props.children;
+  }
+
+  stackChildren = React.Children.map(stackChildren, child => {
+    if (!child) {
+      return null;
+    }
+
+    if (child.type && child.type.name === 'StackItemShim') {
+      const defaultItemProps = {
+        shrink: !disableShrink
+      };
+      return /*#__PURE__*/React.cloneElement(child, { ...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) {
+    const 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]);
+    }
+  }
+
+  const rootClass = mergeClasses(stackClassNames.root, ...stackStyles, childrenGapClassName && !wrap && childrenGapClassName.root, className);
+  const innerClass = mergeClasses(stackClassNames.inner, ...stackInnerStyles, childrenGapClassName && wrap && childrenGapClassName.inner);
+  return wrap ? /*#__PURE__*/React.createElement(RootType, {
+    className: rootClass,
+    style: tokensRootStyles
+  }, /*#__PURE__*/React.createElement("div", {
+    className: innerClass,
+    style: tokensInnerStyles
+  }, stackChildren)) : /*#__PURE__*/React.createElement(RootType, {
+    className: rootClass,
+    style: tokensRootStyles
+  }, stackChildren);
+};
+//# sourceMappingURL=StackShim.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Stack/StackShim.tsx"],"names":[],"mappings":"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","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"],"sourceRoot":"../src/"}

package/lib/components/Stack/index.js

@@ -0,0 +1,3 @@
+export * from './StackItemShim';
+export * from './StackShim';
+//# sourceMappingURL=index.js.map

package/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,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC","sourcesContent":["export * from './StackItemShim';\nexport * from './StackShim';\n"]}

package/lib/components/Stack/stackUtils.js

@@ -0,0 +1,168 @@
+import { getTheme } from '@fluentui/react'; // Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.
+
+const getThemedSpacing = (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.
+
+
+const getValueUnitGap = gap => {
+  const numericalPart = parseFloat(gap);
+  const numericalValue = isNaN(numericalPart) ? 0 : numericalPart;
+  const numericalString = isNaN(numericalPart) ? '' : numericalPart.toString();
+  const 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 const parseGap = (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'
+      }
+    };
+  }
+
+  const 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.
+
+
+  const 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 const parsePadding = (padding, theme) => {
+  if (padding === undefined || typeof padding === 'number' || padding === '') {
+    return padding;
+  }
+
+  const paddingValues = padding.split(' ');
+
+  if (paddingValues.length < 2) {
+    return getThemedSpacing(padding, theme);
+  }
+
+  return paddingValues.reduce((padding1, padding2) => {
+    return getThemedSpacing(padding1, theme) + ' ' + getThemedSpacing(padding2, theme);
+  });
+};
+/**
+ *
+ * getStyles function for Stack.tokens.childrenGap prop styling
+ */
+
+export const getChildrenGapStyles = props => {
+  const theme = getTheme();
+  const {
+    horizontal,
+    reversed
+  } = props;
+  const tokens = { ...props.tokens
+  };
+  const {
+    rowGap,
+    columnGap
+  } = parseGap(tokens.childrenGap, theme);
+  const horizontalMargin = `${-0.5 * columnGap.value}${columnGap.unit}`;
+  const 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})`
+      }
+    }]
+  };
+};
+//# sourceMappingURL=stackUtils.js.map

package/lib/components/Stack/stackUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Stack/stackUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import { getTheme, IStackProps, IStackTokens, IStyle, ITheme } from '@fluentui/react';\n\n// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.\nconst getThemedSpacing = (space: string, theme: ITheme): string => {\n  if (theme.spacing.hasOwnProperty(space)) {\n    return theme.spacing[space as keyof typeof theme.spacing];\n  }\n  return space;\n};\n\n// Helper function that takes a gap as a string and converts it into a { value, unit } representation.\nconst getValueUnitGap = (gap: string): { value: number; unit: string } => {\n  const numericalPart = parseFloat(gap);\n  const numericalValue = isNaN(numericalPart) ? 0 : numericalPart;\n  const numericalString = isNaN(numericalPart) ? '' : numericalPart.toString();\n\n  const unitPart = gap.substring(numericalString.toString().length);\n\n  return {\n    value: numericalValue,\n    unit: unitPart || 'px',\n  };\n};\n\n/**\n * Takes in a gap size in either a CSS-style format (e.g. 10 or \"10px\")\n *  or a key of a themed spacing value (e.g. \"s1\").\n * Returns the separate numerical value of the padding (e.g. 10)\n *  and the CSS unit (e.g. \"px\").\n */\nexport const parseGap = (\n  gap: IStackProps['gap'],\n  theme: ITheme,\n): { rowGap: { value: number; unit: string }; columnGap: { value: number; unit: string } } => {\n  if (gap === undefined || gap === '') {\n    return {\n      rowGap: {\n        value: 0,\n        unit: 'px',\n      },\n      columnGap: {\n        value: 0,\n        unit: 'px',\n      },\n    };\n  }\n\n  if (typeof gap === 'number') {\n    return {\n      rowGap: {\n        value: gap,\n        unit: 'px',\n      },\n      columnGap: {\n        value: gap,\n        unit: 'px',\n      },\n    };\n  }\n\n  const splitGap = gap.split(' ');\n\n  // If the array has more than two values, then return 0px.\n  if (splitGap.length > 2) {\n    return {\n      rowGap: {\n        value: 0,\n        unit: 'px',\n      },\n      columnGap: {\n        value: 0,\n        unit: 'px',\n      },\n    };\n  }\n\n  // If the array has two values, then parse each one.\n  if (splitGap.length === 2) {\n    return {\n      rowGap: getValueUnitGap(getThemedSpacing(splitGap[0], theme)),\n      columnGap: getValueUnitGap(getThemedSpacing(splitGap[1], theme)),\n    };\n  }\n\n  // Else, parse the numerical value and pass it as both the vertical and horizontal gap.\n  const calculatedGap = getValueUnitGap(getThemedSpacing(gap, theme));\n\n  return {\n    rowGap: calculatedGap,\n    columnGap: calculatedGap,\n  };\n};\n\n/**\n * Takes in a padding in a CSS-style format (e.g. 10, \"10px\", \"10px 10px\", etc.)\n *  where the separate padding values can also be the key of a themed spacing value\n *  (e.g. \"s1 m\", \"10px l1 20px l2\", etc.).\n * Returns a CSS-style padding.\n */\nexport const parsePadding = (padding: number | string | undefined, theme: ITheme): number | string | undefined => {\n  if (padding === undefined || typeof padding === 'number' || padding === '') {\n    return padding;\n  }\n\n  const paddingValues = padding.split(' ');\n  if (paddingValues.length < 2) {\n    return getThemedSpacing(padding, theme);\n  }\n\n  return paddingValues.reduce((padding1: string, padding2: string) => {\n    return getThemedSpacing(padding1, theme) + ' ' + getThemedSpacing(padding2, theme);\n  });\n};\n\nexport interface StackShimStyles {\n  root?: IStyle;\n  inner?: IStyle;\n}\n/**\n *\n * getStyles function for Stack.tokens.childrenGap prop styling\n */\nexport const getChildrenGapStyles = (props: IStackProps): StackShimStyles => {\n  const theme = getTheme();\n\n  const { horizontal, reversed } = props;\n  const tokens: IStackTokens = { ...props.tokens };\n\n  const { rowGap, columnGap } = parseGap(tokens.childrenGap, theme);\n  const horizontalMargin = `${-0.5 * columnGap.value}${columnGap.unit}`;\n  const verticalMargin = `${-0.5 * rowGap.value}${rowGap.unit}`;\n\n  return {\n    root: [\n      reversed &&\n        horizontal && {\n          '> *:not(:last-child)': {\n            marginLeft: `${columnGap.value}${columnGap.unit}`,\n          },\n        },\n      reversed &&\n        !horizontal && {\n          '> *:not(:last-child)': {\n            marginTop: `${rowGap.value}${rowGap.unit}`,\n          },\n        },\n      !reversed &&\n        horizontal && {\n          '> *:not(:first-child)': {\n            marginLeft: `${columnGap.value}${columnGap.unit}`,\n          },\n        },\n      !reversed &&\n        !horizontal && {\n          '> *:not(:first-child)': {\n            marginTop: `${rowGap.value}${rowGap.unit}`,\n          },\n        },\n    ],\n    inner: [\n      {\n        marginLeft: horizontalMargin,\n        marginRight: horizontalMargin,\n        marginTop: verticalMargin,\n        marginBottom: verticalMargin,\n        width: columnGap.value === 0 ? '100%' : `calc(100% + ${columnGap.value}${columnGap.unit})`,\n        '> *': {\n          margin: `${0.5 * rowGap.value}${rowGap.unit} ${0.5 * columnGap.value}${columnGap.unit}`,\n        },\n      },\n      horizontal && {\n        height: rowGap.value === 0 ? '100%' : `calc(100% + ${rowGap.value}${rowGap.unit})`,\n        '> *': {\n          maxWidth: columnGap.value === 0 ? '100%' : `calc(100% - ${columnGap.value}${columnGap.unit})`,\n        },\n      },\n      !horizontal && {\n        height: `calc(100% + ${rowGap.value}${rowGap.unit})`,\n        '> *': {\n          maxHeight: rowGap.value === 0 ? '100%' : `calc(100% - ${rowGap.value}${rowGap.unit})`,\n        },\n      },\n    ],\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Theme/index.js

@@ -0,0 +1,5 @@
+export * from './themeDuplicates';
+export * from './v8ThemeShim';
+export * from './v9BrandVariantsShim';
+export * from './v9ThemeShim';
+//# sourceMappingURL=index.js.map

package/lib/components/Theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC","sourcesContent":["export * from './themeDuplicates';\nexport * from './v8ThemeShim';\nexport * from './v9BrandVariantsShim';\nexport * from './v9ThemeShim';\n"]}