@fluentui/react-table 9.0.0-alpha.12 → 9.0.0-alpha.13

package/lib-commonjs/components/TableCell/useTableCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,kBAAA,GAAqB,eAArB;AACA,OAAA,CAAA,mBAAA,GAAsD;EACjE,IAAI,EAAE,OAAA,CAAA;AAD2D,CAAtD;;AAIb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AASA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACI,MAAM,2BAA2B,GAAI,KAAD,IAA0C;EACnF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,mBAAA,CAAoB,IADC,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHhD,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAMA,OAAO,KAAP;AACD,CAbM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellSlots, TableCellState } from './TableCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames: SlotClassNames<TableCellSlots> = {\n  root: tableCellClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    minWidth: '0px',\n    alignItems: 'center',\n    ...shorthands.flex(1, 1, '0px'),\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n  },\n});\n\n/**\n * Apply styling to the TableCell slots based on the state\n */\nexport const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAIa,OAAA,CAAA,kBAAA,GAAqB,eAArB;AACA,OAAA,CAAA,mBAAA,GAAsD;EACjE,IAAI,EAAE,OAAA,CAAA;AAD2D,CAAtD;;AAIb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAmBA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAqBA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAeA;;AAEG;;;AACI,MAAM,2BAA2B,GAAI,KAAD,IAA0C;EACnF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,mBAAA,CAAoB,IADC,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHhD,EAIrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,KAAK,CAAC,IAAxB,CAAzB,GAAyD,YAAY,CAAC,KAAb,CAAmB,KAAK,CAAC,IAAzB,CAJpC,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;EAOA,OAAO,KAAP;AACD,CAdM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableCellSlots, TableCellState } from './TableCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames: SlotClassNames<TableCellSlots> = {\n  root: tableCellClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n\n  medium: {\n    height: '44px',\n  },\n\n  small: {\n    height: '34px',\n  },\n\n  'extra-small': {\n    height: '24px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    minWidth: '0px',\n    alignItems: 'center',\n    ...shorthands.flex(1, 1, '0px'),\n  },\n\n  medium: {\n    minHeight: '44px',\n  },\n\n  small: {\n    minHeight: '34px',\n  },\n\n  'extra-small': {\n    minHeight: '24px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n});\n\n/**\n * Apply styling to the TableCell slots based on the state\n */\nexport const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n    state.root.className,\n  );\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableCellActions/useTableCellActions.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTableCellActions_unstable = void 0;
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 /**
  * Create the state required to render TableCellActions.
  *
@@ -27,7 +25,7 @@ const useTableCellActions_unstable = (props, ref) => {
       root: 'div'
     },
     root: react_utilities_1.getNativeElementProps('div', {
-      ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useFocusWithin()),
+      ref,
       ...props
     }),
     visible: (_a = props.visible) !== null && _a !== void 0 ? _a : false

package/lib-commonjs/components/TableCellActions/useTableCellActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;;;EACzB,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAA,CAAA,cAAA,EAAnB,CAD4B;MAEjC,GAAG;IAF8B,CAA7B,CAJD;IAQL,OAAO,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB;EARrB,CAAP;AAUD,CAdM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';\n\n/**\n * Create the state required to render TableCellActions.\n *\n * The returned state can be modified with hooks such as useTableCellActionsStyles_unstable,\n * before being passed to renderTableCellActions_unstable.\n *\n * @param props - props from this instance of TableCellActions\n * @param ref - reference to root HTMLElement of TableCellActions\n */\nexport const useTableCellActions_unstable = (\n  props: TableCellActionsProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellActionsState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, useFocusWithin()),\n      ...props,\n    }),\n    visible: props.visible ?? false,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;;;EACzB,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAA7B,CAJD;IAQL,OAAO,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB;EARrB,CAAP;AAUD,CAdM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';\n\n/**\n * Create the state required to render TableCellActions.\n *\n * The returned state can be modified with hooks such as useTableCellActionsStyles_unstable,\n * before being passed to renderTableCellActions_unstable.\n *\n * @param props - props from this instance of TableCellActions\n * @param ref - reference to root HTMLElement of TableCellActions\n */\nexport const useTableCellActions_unstable = (\n  props: TableCellActionsProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellActionsState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    visible: props.visible ?? false,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableCellActions/useTableCellActionsStyles.js

@@ -7,8 +7,6 @@ exports.useTableCellActionsStyles_unstable = exports.tableCellActionsClassNames
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
-const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
-
 exports.tableCellActionsClassNames = {
   root: 'fui-TableCellActions'
 };
@@ -23,18 +21,13 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "Bhzewxz": "f1i1t8d1",
     "Bz10aip": "f188r07x",
     "abs64n": "fk73vx1",
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
-    "Brovlpu": "ftqa4ok",
-    "B486eqv": "f2hkw1w",
-    "B113ap8": "f1upwfw9"
+    "Frg6f3": ["fcgxt0o", "f1ujusj6"]
   },
   "visible": {
     "abs64n": "f5p0z4x"
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f1i1t8d1{top:50%;}", ".f188r07x{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}", ".fk73vx1{opacity:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f1upwfw9[data-fui-focus-visible]:focus-within{opacity:1;}", ".f5p0z4x{opacity:1;}"],
-  "f": [".ftqa4ok:focus{outline-style:none;}"],
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
+  "d": [".f1euv43f{position:absolute;}", ".f10k790i{right:0px;}", ".f1xynx9j{left:0px;}", ".f1i1t8d1{top:50%;}", ".f188r07x{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}", ".fk73vx1{opacity:0;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f5p0z4x{opacity:1;}"]
 });
 /**
  * Apply styling to the TableCellActions slots based on the state

package/lib-commonjs/components/TableCellActions/useTableCellActionsStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEa,OAAA,CAAA,0BAAA,GAAoE;EAC/E,IAAI,EAAE;AADyE,CAApE;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAsBA;;AAEG;;;AACI,MAAM,kCAAkC,GAAI,KAAD,IAAwD;EACxG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,0BAAA,CAA2B,IADN,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAHH,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,kCAAA,GAAkC,kCAAlC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots> = {\n  root: 'fui-TableCellActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    right: '0px',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    opacity: 0,\n    marginLeft: 'auto',\n\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  visible: {\n    opacity: 1,\n  },\n});\n\n/**\n * Apply styling to the TableCellActions slots based on the state\n */\nexport const useTableCellActionsStyles_unstable = (state: TableCellActionsState): TableCellActionsState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tableCellActionsClassNames.root,\n    styles.root,\n    state.visible && styles.visible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,0BAAA,GAAoE;EAC/E,IAAI,EAAE;AADyE,CAApE;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAeA;;AAEG;;;AACI,MAAM,kCAAkC,GAAI,KAAD,IAAwD;EACxG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,0BAAA,CAA2B,IADN,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAHH,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,kCAAA,GAAkC,kCAAlC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots> = {\n  root: 'fui-TableCellActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    right: '0px',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    opacity: 0,\n    marginLeft: 'auto',\n  },\n\n  visible: {\n    opacity: 1,\n  },\n});\n\n/**\n * Apply styling to the TableCellActions slots based on the state\n */\nexport const useTableCellActionsStyles_unstable = (state: TableCellActionsState): TableCellActionsState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tableCellActionsClassNames.root,\n    styles.root,\n    state.visible && styles.visible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableCellLayout/useTableCellLayout.js

@@ -12,7 +12,7 @@ const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
 const tableAvatarSizeMap = {
   medium: 32,
   small: 24,
-  smaller: 20
+  'extra-small': 20
 };
 /**
  * Create the state required to render TableCellLayout.
@@ -49,7 +49,8 @@ const useTableCellLayout_unstable = (props, ref) => {
     wrapper: react_utilities_1.resolveShorthand(props.wrapper, {
       required: !!props.description || !!props.children
     }),
-    avatarSize: tableAvatarSizeMap[size]
+    avatarSize: tableAvatarSizeMap[size],
+    size
   };
 };
 

package/lib-commonjs/components/TableCellLayout/useTableCellLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,MAAM,kBAAkB,GAAG;EACzB,MAAM,EAAE,EADiB;EAEzB,KAAK,EAAE,EAFkB;EAGzB,OAAO,EAAE;AAHgB,CAA3B;AAMA;;;;;;;;AAQG;;AACI,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;EACxB,MAAM;IAAE;EAAF,IAAW,cAAA,CAAA,eAAA,EAAjB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,WAAW,EAAE,MAHH;MAIV,OAAO,EAAE,KAJC;MAKV,KAAK,EAAE;IALG,CADP;IAQL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MAAE,GAAF;MAAO,GAAG;IAAV,CAA7B,CARD;IASL,UAAU,EAAE,KAAK,CAAC,UATb;IAUL,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MAAE,QAAQ,EAAE;IAAZ,CAA7B,CAVD;IAWL,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,CAXF;IAYL,WAAW,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,WAAvB,CAZR;IAaL,OAAO,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,OAAvB,EAAgC;MAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,WAAR,IAAuB,CAAC,CAAC,KAAK,CAAC;IAA3C,CAAhC,CAbJ;IAcL,UAAU,EAAE,kBAAkB,CAAC,IAAD;EAdzB,CAAP;AAgBD,CAtBM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\nconst tableAvatarSizeMap = {\n  medium: 32,\n  small: 24,\n  smaller: 20,\n} as const;\n\n/**\n * Create the state required to render TableCellLayout.\n *\n * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,\n * before being passed to renderTableCellLayout_unstable.\n *\n * @param props - props from this instance of TableCellLayout\n * @param ref - reference to root HTMLElement of TableCellLayout\n */\nexport const useTableCellLayout_unstable = (\n  props: TableCellLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellLayoutState => {\n  const { size } = useTableContext();\n\n  return {\n    components: {\n      root: 'div',\n      main: 'span',\n      description: 'span',\n      wrapper: 'div',\n      media: 'span',\n    },\n    root: getNativeElementProps('div', { ref, ...props }),\n    appearance: props.appearance,\n    main: resolveShorthand(props.main, { required: true }),\n    media: resolveShorthand(props.media),\n    description: resolveShorthand(props.description),\n    wrapper: resolveShorthand(props.wrapper, { required: !!props.description || !!props.children }),\n    avatarSize: tableAvatarSizeMap[size],\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,MAAM,kBAAkB,GAAG;EACzB,MAAM,EAAE,EADiB;EAEzB,KAAK,EAAE,EAFkB;EAGzB,eAAe;AAHU,CAA3B;AAMA;;;;;;;;AAQG;;AACI,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;EACxB,MAAM;IAAE;EAAF,IAAW,cAAA,CAAA,eAAA,EAAjB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE,MAFI;MAGV,WAAW,EAAE,MAHH;MAIV,OAAO,EAAE,KAJC;MAKV,KAAK,EAAE;IALG,CADP;IAQL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MAAE,GAAF;MAAO,GAAG;IAAV,CAA7B,CARD;IASL,UAAU,EAAE,KAAK,CAAC,UATb;IAUL,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MAAE,QAAQ,EAAE;IAAZ,CAA7B,CAVD;IAWL,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,CAXF;IAYL,WAAW,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,WAAvB,CAZR;IAaL,OAAO,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,OAAvB,EAAgC;MAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,WAAR,IAAuB,CAAC,CAAC,KAAK,CAAC;IAA3C,CAAhC,CAbJ;IAcL,UAAU,EAAE,kBAAkB,CAAC,IAAD,CAdzB;IAeL;EAfK,CAAP;AAiBD,CAvBM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\nconst tableAvatarSizeMap = {\n  medium: 32,\n  small: 24,\n  'extra-small': 20,\n} as const;\n\n/**\n * Create the state required to render TableCellLayout.\n *\n * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,\n * before being passed to renderTableCellLayout_unstable.\n *\n * @param props - props from this instance of TableCellLayout\n * @param ref - reference to root HTMLElement of TableCellLayout\n */\nexport const useTableCellLayout_unstable = (\n  props: TableCellLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellLayoutState => {\n  const { size } = useTableContext();\n\n  return {\n    components: {\n      root: 'div',\n      main: 'span',\n      description: 'span',\n      wrapper: 'div',\n      media: 'span',\n    },\n    root: getNativeElementProps('div', { ref, ...props }),\n    appearance: props.appearance,\n    main: resolveShorthand(props.main, { required: true }),\n    media: resolveShorthand(props.media),\n    description: resolveShorthand(props.description),\n    wrapper: resolveShorthand(props.wrapper, { required: !!props.description || !!props.children }),\n    avatarSize: tableAvatarSizeMap[size],\n    size,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableCellLayout/useTableCellLayoutStyles.js

@@ -9,6 +9,8 @@ const react_1 = /*#__PURE__*/require("@griffel/react");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
+const react_theme_2 = /*#__PURE__*/require("@fluentui/react-theme");
+
 exports.tableCellLayoutClassNames = {
   root: 'fui-TableCellLayout',
   media: 'fui-TableCellLayout__media',
@@ -38,19 +40,27 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "mc9l5x": "f22iagw",
     "Bt984gj": "f122n59"
   },
+  "mediaExtraSmall": {
+    "Be2twd7": "f4ybsrx"
+  },
+  "mediaSmallAndMedium": {
+    "Be2twd7": "fe5j1ua"
+  },
   "mediaPrimary": {
-    "B5pe6w7": "fqgjdyf",
-    "p4uzdd": "fppfxz8"
+    "Be2twd7": "f1rt2boy"
   },
   "mainPrimary": {
     "Bhrd7zp": "fl43uef"
   },
   "description": {
-    "Be2twd7": "fkhj508",
-    "sj55zd": "fkfq4zb"
+    "sj55zd": "fkfq4zb",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "fwrc4pm"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fqgjdyf svg{width:28px;}", ".fppfxz8 svg{height:28px;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
 });
 /**
  * Apply styling to the TableCellLayout slots based on the state
@@ -63,7 +73,12 @@ const useTableCellLayoutStyles_unstable = state => {
   const primary = state.appearance === 'primary';
 
   if (state.media) {
-    state.media.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.media, styles.media, primary && styles.mediaPrimary, state.media.className);
+    const mediaSizedStyles = {
+      small: styles.mediaSmallAndMedium,
+      medium: styles.mediaSmallAndMedium,
+      'extra-small': styles.mediaExtraSmall
+    };
+    state.media.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);
   }
 
   if (state.main) {

package/lib-commonjs/components/TableCellLayout/useTableCellLayoutStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,yBAAA,GAAkE;EAC7E,IAAI,EAAE,qBADuE;EAE7E,KAAK,EAAE,4BAFsE;EAG7E,IAAI,EAAE,2BAHuE;EAI7E,WAAW,EAAE,kCAJgE;EAK7E,OAAO,EAAE;AALoE,CAAlE;AAQb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAkCA;;AAEG;;;AACI,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,yBAAA,CAA0B,IAAvC,EAA6C,MAAM,CAAC,IAApD,EAA0D,KAAK,CAAC,IAAN,CAAW,SAArE,CAAvB;EACA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAN,KAAqB,SAArC;;EAEA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,yBAAA,CAA0B,KADJ,EAEtB,MAAM,CAAC,KAFe,EAGtB,OAAO,IAAI,MAAM,CAAC,YAHI,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;EAMD;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,yBAAA,CAA0B,IADL,EAErB,OAAO,IAAI,MAAM,CAAC,WAFG,EAGrB,KAAK,CAAC,IAAN,CAAW,SAHU,CAAvB;EAKD;;EAED,IAAI,KAAK,CAAC,WAAV,EAAuB;IACrB,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,OAAA,CAAA,YAAA,CAC5B,OAAA,CAAA,yBAAA,CAA0B,WADE,EAE5B,MAAM,CAAC,WAFqB,EAG5B,KAAK,CAAC,WAAN,CAAkB,SAHU,CAA9B;EAKD;;EAED,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,yBAAA,CAA0B,OAAvC,EAAgD,MAAM,CAAC,OAAvD,EAAgE,KAAK,CAAC,OAAN,CAAc,SAA9E,CAA1B;EACD;;EAED,OAAO,KAAP;AACD,CAnCM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {\n  root: 'fui-TableCellLayout',\n  media: 'fui-TableCellLayout__media',\n  main: 'fui-TableCellLayout__main',\n  description: 'fui-TableCellLayout__description',\n  wrapper: 'fui-TableCellLayout__wrapper',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    ...shorthands.flex(1, 1, '0px'),\n  },\n  wrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  media: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  mediaPrimary: {\n    '& svg': {\n      width: '28px',\n      height: '28px',\n    },\n  },\n\n  mainPrimary: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  description: {\n    fontSize: tokens.fontSizeBase300,\n    color: tokens.colorNeutralForeground2,\n  },\n});\n\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */\nexport const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, state.root.className);\n  const primary = state.appearance === 'primary';\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      tableCellLayoutClassNames.media,\n      styles.media,\n      primary && styles.mediaPrimary,\n      state.media.className,\n    );\n  }\n\n  if (state.main) {\n    state.main.className = mergeClasses(\n      tableCellLayoutClassNames.main,\n      primary && styles.mainPrimary,\n      state.main.className,\n    );\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      tableCellLayoutClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.wrapper) {\n    state.wrapper.className = mergeClasses(tableCellLayoutClassNames.wrapper, styles.wrapper, state.wrapper.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEa,OAAA,CAAA,yBAAA,GAAkE;EAC7E,IAAI,EAAE,qBADuE;EAE7E,KAAK,EAAE,4BAFsE;EAG7E,IAAI,EAAE,2BAHuE;EAI7E,WAAW,EAAE,kCAJgE;EAK7E,OAAO,EAAE;AALoE,CAAlE;AAQb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuCA;;AAEG;;;AACI,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,yBAAA,CAA0B,IAAvC,EAA6C,MAAM,CAAC,IAApD,EAA0D,KAAK,CAAC,IAAN,CAAW,SAArE,CAAvB;EACA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAN,KAAqB,SAArC;;EAEA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,MAAM,gBAAgB,GAAG;MACvB,KAAK,EAAE,MAAM,CAAC,mBADS;MAEvB,MAAM,EAAE,MAAM,CAAC,mBAFQ;MAGvB,eAAe,MAAM,CAAC;IAHC,CAAzB;IAMA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,yBAAA,CAA0B,KADJ,EAEtB,MAAM,CAAC,KAFe,EAGtB,gBAAgB,CAAC,KAAK,CAAC,IAAP,CAHM,EAItB,OAAO,IAAI,MAAM,CAAC,YAJI,EAKtB,KAAK,CAAC,KAAN,CAAY,SALU,CAAxB;EAOD;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,yBAAA,CAA0B,IADL,EAErB,OAAO,IAAI,MAAM,CAAC,WAFG,EAGrB,KAAK,CAAC,IAAN,CAAW,SAHU,CAAvB;EAKD;;EAED,IAAI,KAAK,CAAC,WAAV,EAAuB;IACrB,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,OAAA,CAAA,YAAA,CAC5B,OAAA,CAAA,yBAAA,CAA0B,WADE,EAE5B,MAAM,CAAC,WAFqB,EAG5B,KAAK,CAAC,WAAN,CAAkB,SAHU,CAA9B;EAKD;;EAED,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,yBAAA,CAA0B,OAAvC,EAAgD,MAAM,CAAC,OAAvD,EAAgE,KAAK,CAAC,OAAN,CAAc,SAA9E,CAA1B;EACD;;EAED,OAAO,KAAP;AACD,CA1CM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {\n  root: 'fui-TableCellLayout',\n  media: 'fui-TableCellLayout__media',\n  main: 'fui-TableCellLayout__main',\n  description: 'fui-TableCellLayout__description',\n  wrapper: 'fui-TableCellLayout__wrapper',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    ...shorthands.flex(1, 1, '0px'),\n  },\n  wrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  media: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  mediaExtraSmall: {\n    fontSize: '16px',\n  },\n\n  mediaSmallAndMedium: {\n    fontSize: '20px',\n  },\n\n  mediaPrimary: {\n    fontSize: '24px',\n  },\n\n  mainPrimary: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  description: {\n    color: tokens.colorNeutralForeground2,\n    ...typographyStyles.caption1,\n  },\n});\n\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */\nexport const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, state.root.className);\n  const primary = state.appearance === 'primary';\n\n  if (state.media) {\n    const mediaSizedStyles = {\n      small: styles.mediaSmallAndMedium,\n      medium: styles.mediaSmallAndMedium,\n      'extra-small': styles.mediaExtraSmall,\n    };\n\n    state.media.className = mergeClasses(\n      tableCellLayoutClassNames.media,\n      styles.media,\n      mediaSizedStyles[state.size],\n      primary && styles.mediaPrimary,\n      state.media.className,\n    );\n  }\n\n  if (state.main) {\n    state.main.className = mergeClasses(\n      tableCellLayoutClassNames.main,\n      primary && styles.mainPrimary,\n      state.main.className,\n    );\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      tableCellLayoutClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.wrapper) {\n    state.wrapper.className = mergeClasses(tableCellLayoutClassNames.wrapper, styles.wrapper, state.wrapper.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js

@@ -16,8 +16,12 @@ const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
 const react_aria_1 = /*#__PURE__*/require("@fluentui/react-aria");
 
 const sortIcons = {
-  ascending: /*#__PURE__*/React.createElement(react_icons_1.ArrowUpRegular, null),
-  descending: /*#__PURE__*/React.createElement(react_icons_1.ArrowDownRegular, null)
+  ascending: /*#__PURE__*/React.createElement(react_icons_1.ArrowUpRegular, {
+    fontSize: 12
+  }),
+  descending: /*#__PURE__*/React.createElement(react_icons_1.ArrowDownRegular, {
+    fontSize: 12
+  })
 };
 /**
  * Create the state required to render TableHeaderCell.

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAEA,MAAM,SAAS,GAAG;EAChB,SAAS,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,cAAD,EAAe,IAAf,CADK;EAEhB,UAAU,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,gBAAD,EAAiB,IAAjB;AAFI,CAAlB;AAKA;;;;;;;;AAQG;;AACI,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;;;EACxB,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAAiC,cAAA,CAAA,eAAA,EAAvC;EAEA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,aADI;MAEV,MAAM,EAAE,QAFE;MAGV,QAAQ,EAAE;IAHA,CADP;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,cAA1B,GAA2C,SAFR;MAGzC,aAAa,KAAK,CAAC,aAHsB;MAIzC,GAAG;IAJsC,CAArC,CAND;IAYL,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,QAAvB,EAAiC;MACzC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,aADuB;MAEzC,YAAY,EAAE;QAAE,QAAQ,EAAE,KAAK,CAAC,aAAN,GAAsB,SAAS,CAAC,KAAK,CAAC,aAAP,CAA/B,GAAuD;MAAnE;IAF2B,CAAjC,CAZL;IAgBL,MAAM,EAAE,YAAA,CAAA,sBAAA,CAAuB,KAAK,CAAC,MAA7B,EAAqC;MAC3C,QAAQ,EAAE,IADiC;MAE3C,YAAY,EAAE;QACZ,IAAI,EAAE,cADM;QAEZ,QAAQ,EAAE,CAAC,CAFC;QAGZ,IAAI,EAAE,QAHM;QAIZ,IAAI,QAAQ,IAAI;UACd,IAAI,EAAE,SADQ;UAEd,QAAQ,EAAE;QAFI,CAAhB;MAJY;IAF6B,CAArC,CAhBH;IA4BL,QA5BK;IA6BL;EA7BK,CAAP;AA+BD,CAtCM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\n\nconst sortIcons = {\n  ascending: <ArrowUpRegular />,\n  descending: <ArrowDownRegular />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n  props: TableHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n  const { noNativeElements, sortable } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n  return {\n    components: {\n      root: rootComponent,\n      button: 'button',\n      sortIcon: 'span',\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'columnheader' : undefined,\n      'aria-sort': props.sortDirection,\n      ...props,\n    }),\n    sortIcon: resolveShorthand(props.sortIcon, {\n      required: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n    }),\n    button: useARIAButtonShorthand(props.button, {\n      required: true,\n      defaultProps: {\n        role: 'presentation',\n        tabIndex: -1,\n        type: 'button',\n        ...(sortable && {\n          role: undefined,\n          tabIndex: undefined,\n        }),\n      },\n    }),\n    sortable,\n    noNativeElements,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAEA,MAAM,SAAS,GAAG;EAChB,SAAS,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,cAAD,EAAe;IAAC,QAAQ,EAAE;EAAX,CAAf,CADK;EAEhB,UAAU,eAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,gBAAD,EAAiB;IAAC,QAAQ,EAAE;EAAX,CAAjB;AAFI,CAAlB;AAKA;;;;;;;;AAQG;;AACI,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;;;EACxB,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAAiC,cAAA,CAAA,eAAA,EAAvC;EAEA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,aADI;MAEV,MAAM,EAAE,QAFE;MAGV,QAAQ,EAAE;IAHA,CADP;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,cAA1B,GAA2C,SAFR;MAGzC,aAAa,KAAK,CAAC,aAHsB;MAIzC,GAAG;IAJsC,CAArC,CAND;IAYL,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,QAAvB,EAAiC;MACzC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,aADuB;MAEzC,YAAY,EAAE;QAAE,QAAQ,EAAE,KAAK,CAAC,aAAN,GAAsB,SAAS,CAAC,KAAK,CAAC,aAAP,CAA/B,GAAuD;MAAnE;IAF2B,CAAjC,CAZL;IAgBL,MAAM,EAAE,YAAA,CAAA,sBAAA,CAAuB,KAAK,CAAC,MAA7B,EAAqC;MAC3C,QAAQ,EAAE,IADiC;MAE3C,YAAY,EAAE;QACZ,IAAI,EAAE,cADM;QAEZ,QAAQ,EAAE,CAAC,CAFC;QAGZ,IAAI,EAAE,QAHM;QAIZ,IAAI,QAAQ,IAAI;UACd,IAAI,EAAE,SADQ;UAEd,QAAQ,EAAE;QAFI,CAAhB;MAJY;IAF6B,CAArC,CAhBH;IA4BL,QA5BK;IA6BL;EA7BK,CAAP;AA+BD,CAtCM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\n\nconst sortIcons = {\n  ascending: <ArrowUpRegular fontSize={12} />,\n  descending: <ArrowDownRegular fontSize={12} />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n  props: TableHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n  const { noNativeElements, sortable } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n  return {\n    components: {\n      root: rootComponent,\n      button: 'button',\n      sortIcon: 'span',\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'columnheader' : undefined,\n      'aria-sort': props.sortDirection,\n      ...props,\n    }),\n    sortIcon: resolveShorthand(props.sortIcon, {\n      required: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n    }),\n    button: useARIAButtonShorthand(props.button, {\n      required: true,\n      defaultProps: {\n        role: 'presentation',\n        tabIndex: -1,\n        type: 'button',\n        ...(sortable && {\n          role: undefined,\n          tabIndex: undefined,\n        }),\n      },\n    }),\n    sortable,\n    noNativeElements,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js

@@ -80,9 +80,9 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "Bh6795r": "fqerorx",
     "Bqenvij": "f1l02sjl",
     "Bt984gj": "f122n59",
-    "i8kkvl": "fsnqrgy",
-    "Belr9w4": "fylz90v",
-    "sshi5w": "f5pgtk9",
+    "i8kkvl": "f1ufnopg",
+    "Belr9w4": "f14sijuj",
+    "sshi5w": "f1nxs5xn",
     "Bnnss6s": "f1neuvcm",
     "xawz": "fkjuxzh"
   },
@@ -91,10 +91,11 @@ const useStyles = /*#__PURE__*/react_1.__styles({
   },
   "sortIcon": {
     "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59"
+    "Bt984gj": "f122n59",
+    "z8tnut": "fclwglc"
   }
 }, {
-  "d": [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f5pgtk9{min-height:44px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1k6fduh{cursor:pointer;}"],
+  "d": [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
   "h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
   "a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,wBAAA,GAA2B,qBAA3B;AACA,OAAA,CAAA,yBAAA,GAAkE;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAlE;;AAMb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAQA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAiDA;;AAEG;;;AACI,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,yBAAA,CAA0B,IADL,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,eAHJ,EAIrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAJhD,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;EAOA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CACvB,OAAA,CAAA,yBAAA,CAA0B,MADH,EAEvB,MAAM,CAAC,WAFgB,EAGvB,MAAM,CAAC,MAHgB,EAIvB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJF,EAKvB,KAAK,CAAC,MAAN,CAAa,SALU,CAAzB;;EAQA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CACzB,OAAA,CAAA,yBAAA,CAA0B,QADD,EAEzB,MAAM,CAAC,QAFkB,EAGzB,KAAK,CAAC,QAAN,CAAe,SAHU,CAA3B;EAKD;;EAED,OAAO,KAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n  },\n\n  rootInteractive: {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  resetButton: {\n    resize: 'horizontal',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n  button: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    minHeight: '44px',\n    ...shorthands.flex(1, 1, '0px'),\n  },\n  sortable: {\n    cursor: 'pointer',\n  },\n\n  sortIcon: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderCellClassNames.root,\n    styles.root,\n    state.sortable && styles.rootInteractive,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,wBAAA,GAA2B,qBAA3B;AACA,OAAA,CAAA,yBAAA,GAAkE;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAlE;;AAMb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAQA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAkDA;;AAEG;;;AACI,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,yBAAA,CAA0B,IADL,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,eAHJ,EAIrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAJhD,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;EAOA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CACvB,OAAA,CAAA,yBAAA,CAA0B,MADH,EAEvB,MAAM,CAAC,WAFgB,EAGvB,MAAM,CAAC,MAHgB,EAIvB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJF,EAKvB,KAAK,CAAC,MAAN,CAAa,SALU,CAAzB;;EAQA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CACzB,OAAA,CAAA,yBAAA,CAA0B,QADD,EAEzB,MAAM,CAAC,QAFkB,EAGzB,KAAK,CAAC,QAAN,CAAe,SAHU,CAA3B;EAKD;;EAED,OAAO,KAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n  },\n\n  rootInteractive: {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  resetButton: {\n    resize: 'horizontal',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n  button: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalXS),\n    minHeight: '32px',\n    ...shorthands.flex(1, 1, '0px'),\n  },\n  sortable: {\n    cursor: 'pointer',\n  },\n\n  sortIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderCellClassNames.root,\n    styles.root,\n    state.sortable && styles.rootInteractive,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableRow/useTableRow.js

@@ -30,12 +30,13 @@ const useTableRow_unstable = (props, ref) => {
   } = tableContext_1.useTableContext();
   const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'tr';
   const focusVisibleRef = react_tabster_1.useFocusVisible();
+  const focusWithinRef = react_tabster_1.useFocusWithin();
   return {
     components: {
       root: rootComponent
     },
     root: react_utilities_1.getNativeElementProps(rootComponent, {
-      ref: react_utilities_1.useMergedRefs(ref, focusVisibleRef),
+      ref: react_utilities_1.useMergedRefs(ref, focusVisibleRef, focusWithinRef),
       role: rootComponent === 'div' ? 'row' : undefined,
       ...props
     }),

package/lib-commonjs/components/TableRow/useTableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRow.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;;;EACvG,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAA6B,cAAA,CAAA,eAAA,EAAnC;EACA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EACA,MAAM,eAAe,GAAG,eAAA,CAAA,eAAA,EAAxB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAnB,CADoC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,KAA1B,GAAkC,SAFC;MAGzC,GAAG;IAHsC,CAArC,CAJD;IASL,IATK;IAUL,gBAVK;IAWL,UAAU,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,EAAhB,GAAoB;EAX3B,CAAP;AAaD,CAlBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useFocusVisible } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref: useMergedRefs(ref, focusVisibleRef),\n      role: rootComponent === 'div' ? 'row' : undefined,\n      ...props,\n    }),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRow.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;;;EACvG,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAA6B,cAAA,CAAA,eAAA,EAAnC;EACA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EACA,MAAM,eAAe,GAAG,eAAA,CAAA,eAAA,EAAxB;EACA,MAAM,cAAc,GAAG,eAAA,CAAA,cAAA,EAAvB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAnB,EAAoC,cAApC,CADoC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,KAA1B,GAAkC,SAFC;MAGzC,GAAG;IAHsC,CAArC,CAJD;IASL,IATK;IAUL,gBAVK;IAWL,UAAU,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,EAAhB,GAAoB;EAX3B,CAAP;AAaD,CAnBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n  const focusWithinRef = useFocusWithin();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef),\n      role: rootComponent === 'div' ? 'row' : undefined,\n      ...props,\n    }),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableRow/useTableRowStyles.js

@@ -25,36 +25,18 @@ exports.tableRowClassNames = {
 const useTableLayoutStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "mc9l5x": "f1u0rzck"
-  },
-  "medium": {
-    "Bqenvij": "f1ft4266"
-  },
-  "small": {
-    "Bqenvij": "fbsu25e"
-  },
-  "smaller": {
-    "Bqenvij": "frvgh55"
   }
 }, {
-  "d": [".f1u0rzck{display:table-row;}", ".f1ft4266{height:44px;}", ".fbsu25e{height:34px;}", ".frvgh55{height:24px;}"]
+  "d": [".f1u0rzck{display:table-row;}"]
 });
 
 const useFlexLayoutStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Bt984gj": "f122n59"
-  },
-  "medium": {
-    "sshi5w": "f5pgtk9"
-  },
-  "small": {
-    "sshi5w": "fcep9tg"
-  },
-  "smaller": {
-    "sshi5w": "f1pha7fy"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f5pgtk9{min-height:44px;}", ".fcep9tg{min-height:34px;}", ".f1pha7fy{min-height:24px;}"]
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]
 });
 /**
  * Styles for the root slot
@@ -65,26 +47,32 @@ const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "sj55zd": "f19n0e5",
     "B7ck84d": "f1ewtqcl",
-    "Befpiv7": "fblfkud",
+    "Bconypa": "f1jazu75",
+    "B6guboy": "f1xeqee6",
     "Bn4voq9": "fz36nt7",
     "g9k6zt": "f9znhxp",
+    "Bfpq7zp": "fqrak0z",
     "kdpuga": ["f1o2ludy", "f1kjnpwc"],
     "Bw81rd7": ["f1kjnpwc", "f1o2ludy"],
     "B6xbmo0": ["fxmnebo", "f1witrsb"],
     "dm238s": ["f1witrsb", "fxmnebo"]
   },
+  "noAppearanceFocusWithin": {
+    "Brovlpu": "ftqa4ok",
+    "B486eqv": "f2hkw1w",
+    "B5tto1x": "fgfzuaq",
+    "Bm5rygw": "f13cic75"
+  },
   "rootInteractive": {
     "ecr2s2": "f1wfn5kd",
     "lj723h": "f1g4hkjv",
     "Bw1l9kw": "flaujjr",
     "B43xm9u": "f15ngxrw",
-    "Bs8fhbl": "f18sq9la",
     "i921ia": "fjbbrdp",
     "Jwef8y": "f1t94bn6",
     "Bi91k9c": "feu1g3u",
     "Bi7d7a3": "f14h8iit",
     "Bpt6rm4": "f1uorfem",
-    "Bt8cqyk": "f1fcpt6",
     "ff6mpl": "fw60kww"
   },
   "medium": {
@@ -97,7 +85,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "oivjwe": "fg706s2",
     "B9xav0g": "frpde29"
   },
-  "smaller": {
+  "extra-small": {
     "Be2twd7": "fy9rknc"
   },
   "brand": {
@@ -149,7 +137,6 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "yadkgm": "f1e0wld5",
     "De3pzq": "fq5gl1p",
     "sj55zd": "f1cgsbmv",
-    "Jwef8y": "f1uqaxdt",
     "ecr2s2": "fa9o754",
     "g2u3we": "frmsihh",
     "h3c5rm": ["frttxa5", "f11o2r7f"],
@@ -158,9 +145,11 @@ const useStyles = /*#__PURE__*/react_1.__styles({
   },
   "none": {}
 }, {
-  "d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".fblfkud[data-fui-focus-visible]:focus-within .fui-TableSelectionCell{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"],
-  "a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".f18sq9la:active .fui-TableSelectionCell{background-color:var(--colorSubtleBackgroundHover);}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
-  "h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f14h8iit:hover .fui-TableCellActions{background-color:var(--colorSubtleBackgroundHover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".f1fcpt6:hover .fui-TableSelectionCell{background-color:var(--colorSubtleBackgroundHover);}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
+  "d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1jazu75[data-fui-focus-within]:focus-within .fui-TableSelectionCell{opacity:1;}", ".f1xeqee6[data-fui-focus-within]:focus-within .fui-TableCellActions{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".fgfzuaq[data-fui-focus-within]:focus-within .fui-TableCellActions{background-color:var(--colorSubtleBackgroundHover);}", ".f13cic75[data-fui-focus-within]:focus-within{background-color:var(--colorSubtleBackgroundHover);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"],
+  "f": [".ftqa4ok:focus{outline-style:none;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
+  "h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f14h8iit:hover .fui-TableCellActions{background-color:var(--colorSubtleBackgroundHover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}"],
   "m": [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
     "m": "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
@@ -247,7 +236,7 @@ const useTableRowStyles_unstable = state => {
     table: useTableLayoutStyles(),
     flex: useFlexLayoutStyles()
   };
-  state.root.className = react_1.mergeClasses(exports.tableRowClassNames.root, styles.root, !isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], styles[state.appearance], state.root.className);
+  state.root.className = react_1.mergeClasses(exports.tableRowClassNames.root, styles.root, !isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.appearance === 'none' && !isHeaderRow && styles.noAppearanceFocusWithin, state.root.className);
   return state;
 };
 

package/lib-commonjs/components/TableRow/useTableRowStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n  root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row',\n  },\n\n  medium: {\n    height: '44px',\n  },\n\n  small: {\n    height: '34px',\n  },\n\n  smaller: {\n    height: '24px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  medium: {\n    minHeight: '44px',\n  },\n\n  small: {\n    minHeight: '34px',\n  },\n\n  smaller: {\n    minHeight: '24px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    boxSizing: 'border-box',\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableSelectionCellClassNames.root}`]: {\n          opacity: 1,\n        },\n      },\n      { selector: 'focus-within' },\n    ),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  rootInteractive: {\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground1Pressed,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        opacity: 1,\n      },\n    },\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground1Hover,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        opacity: 1,\n      },\n    },\n  },\n\n  medium: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  small: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  smaller: {\n    fontSize: tokens.fontSizeBase200,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorNeutralForeground1Hover,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackground2,\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n    },\n\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n  },\n\n  neutral: {\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground1Hover,\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n  },\n\n  none: {},\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n  const isHeaderRow = useIsInTableHeader();\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableRowClassNames.root,\n    styles.root,\n    !isHeaderRow && styles.rootInteractive,\n    styles[state.size],\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n    styles[state.appearance],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n  root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    boxSizing: 'border-box',\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableSelectionCellClassNames.root}`]: {\n          opacity: 1,\n        },\n        [`& .${tableCellActionsClassNames.root}`]: {\n          opacity: 1,\n        },\n      },\n      { selector: 'focus-within' },\n    ),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  // When focus is within the row the background colour\n  // should be the same as hover, except when there is a brand\n  // or neutral appearance applied on the row\n  noAppearanceFocusWithin: {\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableCellActionsClassNames.root}`]: {\n          backgroundColor: tokens.colorSubtleBackgroundHover,\n        },\n\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  rootInteractive: {\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground1Pressed,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        opacity: 1,\n      },\n    },\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground1Hover,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        opacity: 1,\n      },\n    },\n  },\n\n  medium: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  small: {\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n  },\n\n  'extra-small': {\n    fontSize: tokens.fontSizeBase200,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorNeutralForeground1Hover,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackground2,\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n    },\n\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n  },\n\n  neutral: {\n    '@media(forced-colors: active)': {\n      ...shorthands.border('2px', 'solid', 'transparent'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground1Hover,\n\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n  },\n\n  none: {},\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n  const isHeaderRow = useIsInTableHeader();\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableRowClassNames.root,\n    styles.root,\n    !isHeaderRow && styles.rootInteractive,\n    styles[state.size],\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    styles[state.appearance],\n    state.appearance === 'none' && !isHeaderRow && styles.noAppearanceFocusWithin,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js

@@ -55,21 +55,19 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     "mc9l5x": "f22iagw",
     "Bh6795r": "fqerorx",
     "Bt984gj": "f122n59",
-    "Brf1p80": "f4d9j23",
-    "B5pe6w7": "f1cqkysu",
-    "p4uzdd": "f1sgf1mg"
+    "Brf1p80": "f4d9j23"
   },
   "subtle": {
     "abs64n": "fk73vx1",
     "Brovlpu": "ftqa4ok",
     "B486eqv": "f2hkw1w",
-    "B113ap8": "f1upwfw9"
+    "B8a84jv": "f1y7ij6c"
   },
   "hidden": {
     "Bcdw1i0": "fd7fpy0"
   }
 }, {
-  "d": [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1cqkysu svg{width:16px;}", ".f1sgf1mg svg{height:16px;}", ".fk73vx1{opacity:0;}", ".f1upwfw9[data-fui-focus-visible]:focus-within{opacity:1;}", ".fd7fpy0{visibility:hidden;}"],
+  "d": [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fk73vx1{opacity:0;}", ".f1y7ij6c[data-fui-focus-within]:focus-within{opacity:1;}", ".fd7fpy0{visibility:hidden;}"],
   "f": [".ftqa4ok:focus{outline-style:none;}"],
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });

package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEa,OAAA,CAAA,4BAAA,GAAwE;EACnF,IAAI,EAAE,wBAD6E;EAEnF,iBAAiB,EAAE,2CAFgE;EAGnF,cAAc,EAAE;AAHmE,CAAxE;;AAMb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAUA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAiCA;;AAEG;;;AACI,MAAM,oCAAoC,GAAI,KAAD,IAA4D;EAC9G,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,4BAAA,CAA6B,IADR,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHhD,EAIrB,KAAK,CAAC,MAAN,IAAgB,KAAK,CAAC,OAAN,KAAkB,KAAlC,IAA2C,MAAM,CAAC,MAJ7B,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALF,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;EAQA,IAAI,KAAK,CAAC,iBAAV,EAA6B;IAC3B,KAAK,CAAC,iBAAN,CAAwB,SAAxB,GAAoC,OAAA,CAAA,YAAA,CAClC,OAAA,CAAA,4BAAA,CAA6B,iBADK,EAElC,KAAK,CAAC,iBAAN,CAAwB,SAFU,CAApC;EAID;;EAED,IAAI,KAAK,CAAC,cAAV,EAA0B;IACxB,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,OAAA,CAAA,YAAA,CAC/B,OAAA,CAAA,4BAAA,CAA6B,cADE,EAE/B,MAAM,CAAC,cAFwB,EAG/B,KAAK,CAAC,cAAN,CAAqB,SAHU,CAAjC;EAKD;;EAED,OAAO,KAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,oCAAA,GAAoC,oCAApC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    width: '44px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '44px',\n    maxWidth: '44px',\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n    ...shorthands.padding(0),\n  },\n\n  radioIndicator: {\n    display: 'flex',\n    flexGrow: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    '& svg': {\n      width: '16px',\n      height: '16px',\n    },\n  },\n\n  subtle: {\n    opacity: 0,\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  hidden: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableSelectionCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.subtle && state.checked === false && styles.subtle,\n    state.hidden && styles.hidden,\n    state.root.className,\n  );\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.radioIndicator,\n      styles.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEa,OAAA,CAAA,4BAAA,GAAwE;EACnF,IAAI,EAAE,wBAD6E;EAEnF,iBAAiB,EAAE,2CAFgE;EAGnF,cAAc,EAAE;AAHmE,CAAxE;;AAMb,MAAM,oBAAoB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAUA;;AAEG;;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AA6BA;;AAEG;;;AACI,MAAM,oCAAoC,GAAI,KAAD,IAA4D;EAC9G,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,4BAAA,CAA6B,IADR,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAHhD,EAIrB,KAAK,CAAC,MAAN,IAAgB,KAAK,CAAC,OAAN,KAAkB,KAAlC,IAA2C,MAAM,CAAC,MAJ7B,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALF,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;EAQA,IAAI,KAAK,CAAC,iBAAV,EAA6B;IAC3B,KAAK,CAAC,iBAAN,CAAwB,SAAxB,GAAoC,OAAA,CAAA,YAAA,CAClC,OAAA,CAAA,4BAAA,CAA6B,iBADK,EAElC,KAAK,CAAC,iBAAN,CAAwB,SAFU,CAApC;EAID;;EAED,IAAI,KAAK,CAAC,cAAV,EAA0B;IACxB,KAAK,CAAC,cAAN,CAAqB,SAArB,GAAiC,OAAA,CAAA,YAAA,CAC/B,OAAA,CAAA,4BAAA,CAA6B,cADE,EAE/B,MAAM,CAAC,cAFwB,EAG/B,KAAK,CAAC,cAAN,CAAqB,SAHU,CAAjC;EAKD;;EAED,OAAO,KAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,oCAAA,GAAoC,oCAApC","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    width: '44px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '44px',\n    maxWidth: '44px',\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n    ...shorthands.padding(0),\n  },\n\n  radioIndicator: {\n    display: 'flex',\n    flexGrow: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n\n  subtle: {\n    opacity: 0,\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  hidden: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableSelectionCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.subtle && state.checked === false && styles.subtle,\n    state.hidden && styles.hidden,\n    state.root.className,\n  );\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.radioIndicator,\n      styles.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/contexts/columnIdContext.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnIdContextProvider = exports.useColumnIdContext = exports.columnIdContextDefaultValue = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const columnIdContext = /*#__PURE__*/React.createContext(undefined);
+exports.columnIdContextDefaultValue = '';
+
+const useColumnIdContext = () => {
+  var _a;
+
+  return (_a = React.useContext(columnIdContext)) !== null && _a !== void 0 ? _a : exports.columnIdContextDefaultValue;
+};
+
+exports.useColumnIdContext = useColumnIdContext;
+exports.ColumnIdContextProvider = columnIdContext.Provider;
+//# sourceMappingURL=columnIdContext.js.map

package/lib-commonjs/contexts/columnIdContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-table/src/contexts/columnIdContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAM,eAAe,gBAAG,KAAK,CAAC,aAAN,CAA0C,SAA1C,CAAxB;AAEa,OAAA,CAAA,2BAAA,GAA8B,EAA9B;;AAEN,MAAM,kBAAkB,GAAG,MAAK;EAAA,IAAA,EAAA;;EAAC,OAAA,CAAA,EAAA,GAAA,KAAK,CAAC,UAAN,CAAiB,eAAjB,CAAA,MAAiC,IAAjC,IAAiC,EAAA,KAAA,KAAA,CAAjC,GAAiC,EAAjC,GAAqC,OAAA,CAAA,2BAArC;AAAgE,CAAjG;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AAEA,OAAA,CAAA,uBAAA,GAA0B,eAAe,CAAC,QAA1C","sourcesContent":["import * as React from 'react';\nimport type { ColumnId } from '../hooks/';\n\nconst columnIdContext = React.createContext<ColumnId | undefined>(undefined);\n\nexport const columnIdContextDefaultValue = '';\n\nexport const useColumnIdContext = () => React.useContext(columnIdContext) ?? columnIdContextDefaultValue;\n\nexport const ColumnIdContextProvider = columnIdContext.Provider;\n"],"sourceRoot":"../src/"}

package/lib-commonjs/contexts/dataGridContext.js

@@ -11,6 +11,9 @@ const hooks_1 = /*#__PURE__*/require("../hooks");
 
 const dataGridContext = /*#__PURE__*/react_context_selector_1.createContext(undefined);
 const dataGridContextDefaultValue = { ...hooks_1.defaultTableState,
+  subtleSelection: false,
+  selectableRows: false,
+  selectionAppearance: 'brand',
   focusMode: 'none'
 };
 exports.DataGridContextProvider = dataGridContext.Provider;