@fluentui/react-table 9.0.0-alpha.9 → 9.0.0-rc.2

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './TableHeaderCell';\nexport * from './TableHeaderCell.types';\nexport * from './renderTableHeaderCell';\nexport * from './useTableHeaderCell';\nexport * from './useTableHeaderCellStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/index.ts"],"sourcesContent":["export * from './TableHeaderCell';\nexport * from './TableHeaderCell.types';\nexport * from './renderTableHeaderCell';\nexport * from './useTableHeaderCell';\nexport * from './useTableHeaderCellStyles';\n"]}

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

@@ -4,25 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderTableHeaderCell_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of TableHeaderCell
  */
-
-
 const renderTableHeaderCell_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, React.createElement(slots.button, { ...slotProps.button
-  }, slotProps.root.children, slots.sortIcon && React.createElement(slots.sortIcon, { ...slotProps.sortIcon
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, React.createElement(slots.button, {
+    ...slotProps.button
+  }, slotProps.root.children, slots.sortIcon && React.createElement(slots.sortIcon, {
+    ...slotProps.sortIcon
   })));
 };
-
 exports.renderTableHeaderCell_unstable = renderTableHeaderCell_unstable;
 //# sourceMappingURL=renderTableHeaderCell.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/renderTableHeaderCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,8BAA8B,GAAI,KAAD,IAAgC;EAC5E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA+B,KAA/B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CAFrB,CADF,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';\n\n/**\n * Render the final JSX of TableHeaderCell\n */\nexport const renderTableHeaderCell_unstable = (state: TableHeaderCellState) => {\n  const { slots, slotProps } = getSlots<TableHeaderCellSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.button {...slotProps.button}>\n        {slotProps.root.children}\n        {slots.sortIcon && <slots.sortIcon {...slotProps.sortIcon} />}\n      </slots.button>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAuBH,KAAK,CAAC;EAElE,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACH,KAAK,CAACK,MAAM;IAAA,GAAKJ,SAAS,CAACI;EAAM,GAC/BJ,SAAS,CAACG,IAAI,CAACE,QAAQ,EACvBN,KAAK,CAACO,QAAQ,IAAIJ,oBAACH,KAAK,CAACO,QAAQ;IAAA,GAAKN,SAAS,CAACM;EAAQ,EAAI,CAChD,CACJ;AAEjB,CAAC;AAXYC,sCAA8B","names":["renderTableHeaderCell_unstable","state","slots","slotProps","react_utilities_1","React","root","button","children","sortIcon","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/renderTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';\n\n/**\n * Render the final JSX of TableHeaderCell\n */\nexport const renderTableHeaderCell_unstable = (state: TableHeaderCellState) => {\n  const { slots, slotProps } = getSlots<TableHeaderCellSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.button {...slotProps.button}>\n        {slotProps.root.children}\n        {slots.sortIcon && <slots.sortIcon {...slotProps.sortIcon} />}\n      </slots.button>\n    </slots.root>\n  );\n};\n"]}

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

@@ -4,20 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTableHeaderCell_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-
 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.
@@ -28,10 +27,8 @@ const sortIcons = {
  * @param props - props from this instance of TableHeaderCell
  * @param ref - reference to root HTMLElement of TableHeaderCell
  */
-
 const useTableHeaderCell_unstable = (props, ref) => {
-  var _a;
-
+  var _a, _b;
   const {
     noNativeElements,
     sortable
@@ -44,9 +41,9 @@ const useTableHeaderCell_unstable = (props, ref) => {
       sortIcon: 'span'
     },
     root: react_utilities_1.getNativeElementProps(rootComponent, {
-      ref,
+      ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useFocusWithin()),
       role: rootComponent === 'div' ? 'columnheader' : undefined,
-      'aria-sort': props.sortDirection,
+      'aria-sort': sortable ? (_b = props.sortDirection) !== null && _b !== void 0 ? _b : 'none' : undefined,
       ...props
     }),
     sortIcon: react_utilities_1.resolveShorthand(props.sortIcon, {
@@ -71,6 +68,5 @@ const useTableHeaderCell_unstable = (props, ref) => {
     noNativeElements
   };
 };
-
 exports.useTableHeaderCell_unstable = useTableHeaderCell_unstable;
 //# sourceMappingURL=useTableHeaderCell.js.map

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,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAMA,SAAS,GAAG;EAChBC,SAAS,eAAEC,oBAACC,4BAAc;IAACC,QAAQ,EAAE;EAAE,EAAI;EAC3CC,UAAU,eAAEH,oBAACC,8BAAgB;IAACC,QAAQ,EAAE;EAAE;CAC3C;AAED;;;;;;;;;AASO,MAAME,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;;EACxB,MAAM;IAAEC,gBAAgB;IAAEC;EAAQ,CAAE,GAAGC,8BAAe,EAAE;EAExD,MAAMC,aAAa,GAAG,YAAK,CAACC,EAAE,mCAAIJ,gBAAgB,IAAG,KAAK,GAAG,IAAI;EACjE,OAAO;IACLK,UAAU,EAAE;MACVC,IAAI,EAAEH,aAAa;MACnBI,MAAM,EAAE,QAAQ;MAChBC,QAAQ,EAAE;KACX;IACDF,IAAI,EAAEG,uCAAqB,CAACN,aAAa,EAAE;MACzCJ,GAAG,EAAEU,+BAAa,CAACV,GAAG,EAAEW,8BAAc,EAAE,CAAC;MACzCC,IAAI,EAAER,aAAa,KAAK,KAAK,GAAG,cAAc,GAAGS,SAAS;MAC1D,WAAW,EAAEX,QAAQ,GAAG,WAAK,CAACY,aAAa,mCAAI,MAAM,GAAGD,SAAS;MACjE,GAAGd;KACJ,CAAC;IACFU,QAAQ,EAAEC,kCAAgB,CAACX,KAAK,CAACU,QAAQ,EAAE;MACzCM,QAAQ,EAAE,CAAC,CAAChB,KAAK,CAACe,aAAa;MAC/BE,YAAY,EAAE;QAAEC,QAAQ,EAAElB,KAAK,CAACe,aAAa,GAAGtB,SAAS,CAACO,KAAK,CAACe,aAAa,CAAC,GAAGD;MAAS;KAC3F,CAAC;IACFL,MAAM,EAAEU,mCAAsB,CAACnB,KAAK,CAACS,MAAM,EAAE;MAC3CO,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZJ,IAAI,EAAE,cAAc;QACpBO,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAE,QAAQ;QACd,IAAIlB,QAAQ,IAAI;UACdU,IAAI,EAAEC,SAAS;UACfM,QAAQ,EAAEN;SACX;;KAEJ,CAAC;IACFX,QAAQ;IACRD;GACD;AACH,CAAC;AAtCYoB,mCAA2B","names":["sortIcons","ascending","React","react_icons_1","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","tableContext_1","rootComponent","as","components","root","button","sortIcon","react_utilities_1","react_tabster_1","role","undefined","sortDirection","required","defaultProps","children","react_aria_1","tabIndex","type","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\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: useMergedRefs(ref, useFocusWithin()),\n      role: rootComponent === 'div' ? 'columnheader' : undefined,\n      'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\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"]}

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

@@ -4,105 +4,106 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTableHeaderCellStyles_unstable = exports.tableHeaderCellClassNames = exports.tableHeaderCellClassName = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 exports.tableHeaderCellClassName = 'fui-TableHeaderCell';
 exports.tableHeaderCellClassNames = {
   root: 'fui-TableHeaderCell',
   button: 'fui-TableHeaderCell__button',
   sortIcon: 'fui-TableHeaderCell__sortIcon'
 };
-
 const useTableLayoutStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "mc9l5x": "f15pt5es",
-    "ha4doy": "fmrv4ls"
+  root: {
+    mc9l5x: "f15pt5es",
+    ha4doy: "fmrv4ls"
   }
 }, {
-  "d": [".f15pt5es{display:table-cell;}", ".fmrv4ls{vertical-align:middle;}"]
+  d: [".f15pt5es{display:table-cell;}", ".fmrv4ls{vertical-align:middle;}"]
 });
-
 const useFlexLayoutStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Bh6795r": "fqerorx",
-    "Bnnss6s": "f1neuvcm",
-    "xawz": "fkjuxzh",
-    "Bf4jedk": "f10tiqix"
+  root: {
+    mc9l5x: "f22iagw",
+    Bh6795r: "fqerorx",
+    Bnnss6s: "f1neuvcm",
+    xawz: "fkjuxzh",
+    Bf4jedk: "f10tiqix"
   }
 }, {
-  "d": [".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;}", ".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;}", ".f10tiqix{min-width:0px;}"]
+  d: [".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;}", ".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;}", ".f10tiqix{min-width:0px;}"]
 });
 /**
  * Styles for the root slot
  */
-
-
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "z8tnut": "f1nbblvp",
-    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
-    "Byoj8tv": "f1ov4xf1",
-    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
+  root: {
+    z8tnut: "f1nbblvp",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "f1ov4xf1",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
+    B3nxjsc: "fhix6mv",
+    Bmvh20x: "fha7anx",
+    robkg1: "f1fmzww4",
+    pehzd3: ["fs9qmxf", "f187m4uq"],
+    B8osjzx: ["f187m4uq", "fs9qmxf"],
+    u7xebq: ["f145mzao", "f1uha7eq"],
+    Blsv9te: ["f1uha7eq", "f145mzao"]
   },
-  "rootInteractive": {
-    "Jwef8y": "f1t94bn6",
-    "ecr2s2": "f1wfn5kd"
+  rootInteractive: {
+    Jwef8y: "f1t94bn6",
+    ecr2s2: "f1wfn5kd"
   },
-  "resetButton": {
-    "B3rzk8w": "fq6nmtn",
-    "B7ck84d": "f1e4lqlz",
-    "De3pzq": "f1u2r49w",
-    "sj55zd": "f1ym3bx4",
-    "Bahqtrf": "f1mo0ibp",
-    "Be2twd7": "fjoy568",
-    "Bg96gwp": "fytdu2e",
-    "B68tc82": "f1mtd64y",
-    "Bmxbyg5": "f1y7q3j9",
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["fhxju0i", "f1cnd47f"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1cnd47f", "fhxju0i"],
-    "icvyot": "f1ern45e",
-    "vrafjx": ["f1n71otn", "f1deefiw"],
-    "oivjwe": "f1h8hb77",
-    "wvpqe5": ["f1deefiw", "f1n71otn"],
-    "Bv0vk6g": "f37px4s",
-    "fsow6f": "fgusgyc"
+  resetButton: {
+    B3rzk8w: "fq6nmtn",
+    B7ck84d: "f1e4lqlz",
+    De3pzq: "f1u2r49w",
+    sj55zd: "f1ym3bx4",
+    Bahqtrf: "f1mo0ibp",
+    Be2twd7: "fjoy568",
+    Bg96gwp: "fytdu2e",
+    B68tc82: "f1mtd64y",
+    Bmxbyg5: "f1y7q3j9",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1cnd47f", "fhxju0i"],
+    icvyot: "f1ern45e",
+    vrafjx: ["f1n71otn", "f1deefiw"],
+    oivjwe: "f1h8hb77",
+    wvpqe5: ["f1deefiw", "f1n71otn"],
+    Bv0vk6g: "f37px4s",
+    fsow6f: "fgusgyc"
   },
-  "button": {
-    "qhf8xq": "f10pi13n",
-    "a9b677": "fly5x3f",
-    "mc9l5x": "f22iagw",
-    "Bh6795r": "fqerorx",
-    "Bqenvij": "f1l02sjl",
-    "Bt984gj": "f122n59",
-    "i8kkvl": "fsnqrgy",
-    "Belr9w4": "fylz90v",
-    "sshi5w": "f5pgtk9",
-    "Bnnss6s": "f1neuvcm",
-    "xawz": "fkjuxzh"
+  button: {
+    qhf8xq: "f10pi13n",
+    a9b677: "fly5x3f",
+    mc9l5x: "f22iagw",
+    Bh6795r: "fqerorx",
+    Bqenvij: "f1l02sjl",
+    Bt984gj: "f122n59",
+    i8kkvl: "f1ufnopg",
+    Belr9w4: "f14sijuj",
+    sshi5w: "f1nxs5xn",
+    Bnnss6s: "f1neuvcm",
+    xawz: "fkjuxzh",
+    oeaueh: "f1s6fcnf"
   },
-  "sortable": {
-    "Bceei9c": "f1k6fduh"
+  sortable: {
+    Bceei9c: "f1k6fduh"
   },
-  "sortIcon": {
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59"
+  sortIcon: {
+    mc9l5x: "f22iagw",
+    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;}"],
-  "h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
-  "a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
+  d: [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}", ".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}", ".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}", ".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}", ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}", ".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;}", ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
+  h: [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
+  a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });
 /**
  * Apply styling to the TableHeaderCell slots based on the state
  */
-
-
 const useTableHeaderCellStyles_unstable = state => {
   const styles = useStyles();
   const layoutStyles = {
@@ -111,13 +112,10 @@ const useTableHeaderCellStyles_unstable = state => {
   };
   state.root.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
   state.button.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);
-
   if (state.sortIcon) {
     state.sortIcon.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
   }
-
   return state;
 };
-
 exports.useTableHeaderCellStyles_unstable = useTableHeaderCellStyles_unstable;
 //# sourceMappingURL=useTableHeaderCellStyles.js.map

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,"mappings":";;;;;;AAAA;AACA;AAEA;AAGaA,gCAAwB,GAAG,qBAAqB;AAChDA,iCAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,MAAM,EAAE,6BAA6B;EACrCC,QAAQ,EAAE;CACX;AAED,MAAMC,oBAAoB,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKrC;AAEF,MAAMC,mBAAmB,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAMpC;AAEF;;;AAGA,MAAME,SAAS,gBAAGF,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAwD1B;AAEF;;;AAGO,MAAMG,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAER,oBAAoB,EAAE;IAC7BS,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGT,oBAAY,CACjCL,iCAAyB,CAACC,IAAI,EAC9BS,MAAM,CAACT,IAAI,EACXQ,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACM,eAAe,EACxCP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,CAACZ,IAAI,GAAGU,YAAY,CAACC,KAAK,CAACX,IAAI,EACzEQ,KAAK,CAACR,IAAI,CAACa,SAAS,CACrB;EACDL,KAAK,CAACP,MAAM,CAACY,SAAS,GAAGT,oBAAY,CACnCL,iCAAyB,CAACE,MAAM,EAChCQ,MAAM,CAACQ,WAAW,EAClBR,MAAM,CAACR,MAAM,EACbO,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACK,QAAQ,EACjCN,KAAK,CAACP,MAAM,CAACY,SAAS,CACvB;EAED,IAAIL,KAAK,CAACN,QAAQ,EAAE;IAClBM,KAAK,CAACN,QAAQ,CAACW,SAAS,GAAGT,oBAAY,CACrCL,iCAAyB,CAACG,QAAQ,EAClCO,MAAM,CAACP,QAAQ,EACfM,KAAK,CAACN,QAAQ,CAACW,SAAS,CACzB;;EAGH,OAAOL,KAAK;AACd,CAAC;AA9BYT,yCAAiC","names":["exports","root","button","sortIcon","useTableLayoutStyles","react_1","useFlexLayoutStyles","useStyles","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","sortable","rootInteractive","noNativeElements","resetButton"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\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    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus-within', enableOutline: true },\n    ),\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    outlineStyle: 'none',\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"]}

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

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableRow = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useTableRow_1 = /*#__PURE__*/require("./useTableRow");
-
 const renderTableRow_1 = /*#__PURE__*/require("./renderTableRow");
-
 const useTableRowStyles_1 = /*#__PURE__*/require("./useTableRowStyles");
 /**
- * TableRow component - TODO: add more docs
+ * TableRow component
  */
-
-
 exports.TableRow = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTableRow_1.useTableRow_unstable(props, ref);
   useTableRowStyles_1.useTableRowStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/TableRow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useTableRow_unstable } from './useTableRow';\nimport { renderTableRow_unstable } from './renderTableRow';\nimport { useTableRowStyles_unstable } from './useTableRowStyles';\nimport type { TableRowProps } from './TableRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableRow component - TODO: add more docs\n */\nexport const TableRow: ForwardRefComponent<TableRowProps> = React.forwardRef((props, ref) => {\n  const state = useTableRow_unstable(props, ref);\n\n  useTableRowStyles_unstable(state);\n  return renderTableRow_unstable(state);\n});\n\nTableRow.displayName = 'TableRow';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,gBAAQ,gBAAuCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGC,kCAAoB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE9CG,8CAA0B,CAACF,KAAK,CAAC;EACjC,OAAOG,wCAAuB,CAACH,KAAK,CAAC;AACvC,CAAC,CAAC;AAEFL,gBAAQ,CAACS,WAAW,GAAG,UAAU","names":["exports","React","forwardRef","props","ref","state","useTableRow_1","useTableRowStyles_1","renderTableRow_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableRow/TableRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableRow_unstable } from './useTableRow';\nimport { renderTableRow_unstable } from './renderTableRow';\nimport { useTableRowStyles_unstable } from './useTableRowStyles';\nimport type { TableRowProps } from './TableRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableRow component\n */\nexport const TableRow: ForwardRefComponent<TableRowProps> = React.forwardRef((props, ref) => {\n  const state = useTableRow_unstable(props, ref);\n\n  useTableRowStyles_unstable(state);\n  return renderTableRow_unstable(state);\n});\n\nTableRow.displayName = 'TableRow';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./TableRow"), exports);
-
 tslib_1.__exportStar(require("./TableRow.types"), exports);
-
 tslib_1.__exportStar(require("./renderTableRow"), exports);
-
 tslib_1.__exportStar(require("./useTableRow"), exports);
-
 tslib_1.__exportStar(require("./useTableRowStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './TableRow';\nexport * from './TableRow.types';\nexport * from './renderTableRow';\nexport * from './useTableRow';\nexport * from './useTableRowStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableRow/index.ts"],"sourcesContent":["export * from './TableRow';\nexport * from './TableRow.types';\nexport * from './renderTableRow';\nexport * from './useTableRow';\nexport * from './useTableRowStyles';\n"]}

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

@@ -4,24 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderTableRow_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of TableRow
  */
-
-
 const renderTableRow_unstable = state => {
   const {
     slots,
     slotProps
-  } = react_utilities_1.getSlots(state); // TODO Add additional slots in the appropriate place
-
-  return React.createElement(slots.root, { ...slotProps.root
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, {
+    ...slotProps.root
   });
 };
-
 exports.renderTableRow_unstable = renderTableRow_unstable;
 //# sourceMappingURL=renderTableRow.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/renderTableRow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B,CAD8D,CAG9D;;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableRowState, TableRowSlots } from './TableRow.types';\n\n/**\n * Render the final JSX of TableRow\n */\nexport const renderTableRow_unstable = (state: TableRowState) => {\n  const { slots, slotProps } = getSlots<TableRowSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,uBAAuB,GAAIC,KAAoB,IAAI;EAC9D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAgBH,KAAK,CAAC;EAE3D,OAAOI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI;AAC3C,CAAC;AAJYC,+BAAuB","names":["renderTableRow_unstable","state","slots","slotProps","react_utilities_1","React","root","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableRow/renderTableRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableRowState, TableRowSlots } from './TableRow.types';\n\n/**\n * Render the final JSX of TableRow\n */\nexport const renderTableRow_unstable = (state: TableRowState) => {\n  const { slots, slotProps } = getSlots<TableRowSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"]}

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

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTableRow_unstable = void 0;
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
-
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
+const tableHeaderContext_1 = /*#__PURE__*/require("../../contexts/tableHeaderContext");
 /**
  * Create the state required to render TableRow.
  *
@@ -19,31 +17,30 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
  * @param props - props from this instance of TableRow
  * @param ref - reference to root HTMLElement of TableRow
  */
-
-
 const useTableRow_unstable = (props, ref) => {
   var _a, _b;
-
   const {
     noNativeElements,
     size
   } = 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();
+  const isHeaderRow = tableHeaderContext_1.useIsInTableHeader();
   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
     }),
     size,
     noNativeElements,
-    appearance: (_b = props.appearance) !== null && _b !== void 0 ? _b : 'none'
+    appearance: (_b = props.appearance) !== null && _b !== void 0 ? _b : 'none',
+    isHeaderRow
   };
 };
-
 exports.useTableRow_unstable = useTableRow_unstable;
 //# sourceMappingURL=useTableRow.js.map

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,"mappings":";;;;;;AACA;AACA;AAEA;AACA;AAEA;;;;;;;;;AASO,MAAMA,oBAAoB,GAAG,CAACC,KAAoB,EAAEC,GAA2B,KAAmB;;EACvG,MAAM;IAAEC,gBAAgB;IAAEC;EAAI,CAAE,GAAGC,8BAAe,EAAE;EACpD,MAAMC,aAAa,GAAG,YAAK,CAACC,EAAE,mCAAIJ,gBAAgB,IAAG,KAAK,GAAG,IAAI;EACjE,MAAMK,eAAe,GAAGC,+BAAe,EAAE;EACzC,MAAMC,cAAc,GAAGD,8BAAc,EAAE;EACvC,MAAME,WAAW,GAAGC,uCAAkB,EAAE;EAExC,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAER;KACP;IACDQ,IAAI,EAAEC,uCAAqB,CAACT,aAAa,EAAE;MACzCJ,GAAG,EAAEa,+BAAa,CAACb,GAAG,EAAEM,eAAe,EAAEE,cAAc,CAAC;MACxDM,IAAI,EAAEV,aAAa,KAAK,KAAK,GAAG,KAAK,GAAGW,SAAS;MACjD,GAAGhB;KACJ,CAAC;IACFG,IAAI;IACJD,gBAAgB;IAChBe,UAAU,EAAE,WAAK,CAACA,UAAU,mCAAI,MAAM;IACtCP;GACD;AACH,CAAC;AArBYQ,4BAAoB","names":["useTableRow_unstable","props","ref","noNativeElements","size","tableContext_1","rootComponent","as","focusVisibleRef","react_tabster_1","focusWithinRef","isHeaderRow","tableHeaderContext_1","components","root","react_utilities_1","role","undefined","appearance","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableRow/useTableRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\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  const isHeaderRow = useIsInTableHeader();\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    isHeaderRow,\n  };\n};\n"]}