@fluentui/react-table 9.0.0-alpha.14 → 9.0.0-alpha.16

package/lib/components/TableCellActions/useTableCellActionsStyles.js

@@ -5,27 +5,24 @@ export const tableCellActionsClassNames = {
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/__styles({
-  "root": {
-    "qhf8xq": "f1euv43f",
-    "j35jbq": ["f10k790i", "f1xynx9j"],
-    "Bhzewxz": "f1i1t8d1",
-    "Bz10aip": "f188r07x",
-    "abs64n": "fk73vx1",
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"]
+  root: {
+    qhf8xq: "f1euv43f",
+    j35jbq: ["f10k790i", "f1xynx9j"],
+    Bhzewxz: "f1i1t8d1",
+    Bz10aip: "f188r07x",
+    abs64n: "fk73vx1",
+    Frg6f3: ["fcgxt0o", "f1ujusj6"]
   },
-  "visible": {
-    "abs64n": "f5p0z4x"
+  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;}", ".f5p0z4x{opacity:1;}"]
+  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
  */
-
-
 export const useTableCellActionsStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(tableCellActionsClassNames.root, styles.root, state.visible && styles.visible, state.root.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAIA,OAAO,MAAM,0BAA0B,GAA0C;EAC/E,IAAI,EAAE;AADyE,CAA1E;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAeA;;AAEG;;;AACH,OAAO,MAAM,kCAAkC,GAAI,KAAD,IAAwD;EACxG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,0BAA0B,CAAC,IADM,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAHS,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAVM","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/"}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,gBAAgB;AAIzD,OAAO,MAAMC,0BAA0B,GAA0C;EAC/EC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAahB;AAEF;;;AAGA,OAAO,MAAMC,kCAAkC,GAAIC,KAA4B,IAA2B;EACxG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CACjCC,0BAA0B,CAACC,IAAI,EAC/BI,MAAM,CAACJ,IAAI,EACXG,KAAK,CAACG,OAAO,IAAIF,MAAM,CAACE,OAAO,EAC/BH,KAAK,CAACH,IAAI,CAACK,SAAS,CACrB;EAED,OAAOF,KAAK;AACd,CAAC","names":["mergeClasses","tableCellActionsClassNames","root","useStyles","useTableCellActionsStyles_unstable","state","styles","className","visible"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellActions/useTableCellActionsStyles.ts"],"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"]}

package/lib/components/TableCellLayout/TableCellLayout.js

@@ -6,7 +6,6 @@ import { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutCo
 /**
  * TableCellLayout component - TODO: add more docs
  */
-
 export const TableCellLayout = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTableCellLayout_unstable(props, ref);
   useTableCellLayoutStyles_unstable(state);

package/lib/components/TableCellLayout/TableCellLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,iCAAT,QAAkD,4BAAlD;AACA,SAAS,wCAAT,QAAyD,mCAAzD;AAIA;;AAEG;;AACH,OAAO,MAAM,eAAe,gBAA8C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,2BAA2B,CAAC,KAAD,EAAQ,GAAR,CAAzC;EAEA,iCAAiC,CAAC,KAAD,CAAjC;EACA,OAAO,8BAA8B,CAAC,KAAD,EAAQ,wCAAwC,CAAC,KAAD,CAAhD,CAArC;AACD,CALyE,CAAnE;AAOP,eAAe,CAAC,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { useTableCellLayout_unstable } from './useTableCellLayout';\nimport { renderTableCellLayout_unstable } from './renderTableCellLayout';\nimport { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles';\nimport { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutContextValues';\nimport type { TableCellLayoutProps } from './TableCellLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableCellLayout component - TODO: add more docs\n */\nexport const TableCellLayout: ForwardRefComponent<TableCellLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTableCellLayout_unstable(props, ref);\n\n  useTableCellLayoutStyles_unstable(state);\n  return renderTableCellLayout_unstable(state, useTableCellLayoutContextValues_unstable(state));\n});\n\nTableCellLayout.displayName = 'TableCellLayout';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,2BAA2B,QAAQ,sBAAsB;AAClE,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,iCAAiC,QAAQ,4BAA4B;AAC9E,SAASC,wCAAwC,QAAQ,mCAAmC;AAI5F;;;AAGA,OAAO,MAAMC,eAAe,gBAA8CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGR,2BAA2B,CAACM,KAAK,EAAEC,GAAG,CAAC;EAErDL,iCAAiC,CAACM,KAAK,CAAC;EACxC,OAAOP,8BAA8B,CAACO,KAAK,EAAEL,wCAAwC,CAACK,KAAK,CAAC,CAAC;AAC/F,CAAC,CAAC;AAEFJ,eAAe,CAACK,WAAW,GAAG,iBAAiB","names":["React","useTableCellLayout_unstable","renderTableCellLayout_unstable","useTableCellLayoutStyles_unstable","useTableCellLayoutContextValues_unstable","TableCellLayout","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableCellLayout_unstable } from './useTableCellLayout';\nimport { renderTableCellLayout_unstable } from './renderTableCellLayout';\nimport { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles';\nimport { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutContextValues';\nimport type { TableCellLayoutProps } from './TableCellLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableCellLayout component - TODO: add more docs\n */\nexport const TableCellLayout: ForwardRefComponent<TableCellLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTableCellLayout_unstable(props, ref);\n\n  useTableCellLayoutStyles_unstable(state);\n  return renderTableCellLayout_unstable(state, useTableCellLayoutContextValues_unstable(state));\n});\n\nTableCellLayout.displayName = 'TableCellLayout';\n"]}

package/lib/components/TableCellLayout/renderTableCellLayout.js

@@ -4,19 +4,23 @@ import { AvatarContextProvider } from '@fluentui/react-avatar';
 /**
  * Render the final JSX of TableCellLayout
  */
-
 export const renderTableCellLayout_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
   }, slots.media && /*#__PURE__*/React.createElement(AvatarContextProvider, {
     value: contextValues.avatar
-  }, /*#__PURE__*/React.createElement(slots.media, { ...slotProps.media
-  })), slots.wrapper && /*#__PURE__*/React.createElement(slots.wrapper, { ...slotProps.wrapper
-  }, slots.main && /*#__PURE__*/React.createElement(slots.main, { ...slotProps.main
-  }, slotProps.root.children), slots.description && /*#__PURE__*/React.createElement(slots.description, { ...slotProps.description
+  }, /*#__PURE__*/React.createElement(slots.media, {
+    ...slotProps.media
+  })), slots.wrapper && /*#__PURE__*/React.createElement(slots.wrapper, {
+    ...slotProps.wrapper
+  }, slots.main && /*#__PURE__*/React.createElement(slots.main, {
+    ...slotProps.main
+  }, slotProps.root.children), slots.description && /*#__PURE__*/React.createElement(slots.description, {
+    ...slotProps.description
   })));
 };
 //# sourceMappingURL=renderTableCellLayout.js.map

package/lib/components/TableCellLayout/renderTableCellLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,qBAAT,QAAsC,wBAAtC;AAGA;;AAEG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,aAF4C,KAG1C;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAuB,KAAvB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,iBACC,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,CAFJ,EAMG,KAAK,CAAC,OAAN,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADjB,EAEG,KAAK,CAAC,WAAN,iBAAqB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAlB,CAFxB,CAPJ,CADF;AAeD,CArBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport type { TableCellLayoutState, TableCellLayoutSlots, TableCellLayoutContextValues } from './TableCellLayout.types';\n\n/**\n * Render the final JSX of TableCellLayout\n */\nexport const renderTableCellLayout_unstable = (\n  state: TableCellLayoutState,\n  contextValues: TableCellLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlots<TableCellLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <slots.media {...slotProps.media} />\n        </AvatarContextProvider>\n      )}\n      {slots.wrapper && (\n        <slots.wrapper {...slotProps.wrapper}>\n          {slots.main && <slots.main {...slotProps.main}>{slotProps.root.children}</slots.main>}\n          {slots.description && <slots.description {...slotProps.description} />}\n        </slots.wrapper>\n      )}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,qBAAqB,QAAQ,wBAAwB;AAG9D;;;AAGA,OAAO,MAAMC,8BAA8B,GAAG,CAC5CC,KAA2B,EAC3BC,aAA2C,KACzC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAuBG,KAAK,CAAC;EAElE,oBACEJ,oBAACM,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBACVT,oBAACE,qBAAqB;IAACQ,KAAK,EAAEL,aAAa,CAACM;EAAM,gBAChDX,oBAACM,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,CAEvC,EACAH,KAAK,CAACM,OAAO,iBACZZ,oBAACM,KAAK,CAACM,OAAO;IAAA,GAAKL,SAAS,CAACK;EAAO,GACjCN,KAAK,CAACO,IAAI,iBAAIb,oBAACM,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,GAAGN,SAAS,CAACC,IAAI,CAACM,QAAQ,CAAc,EACpFR,KAAK,CAACS,WAAW,iBAAIf,oBAACM,KAAK,CAACS,WAAW;IAAA,GAAKR,SAAS,CAACQ;EAAW,EAAI,CAEzE,CACU;AAEjB,CAAC","names":["React","getSlots","AvatarContextProvider","renderTableCellLayout_unstable","state","contextValues","slots","slotProps","root","media","value","avatar","wrapper","main","children","description"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport type { TableCellLayoutState, TableCellLayoutSlots, TableCellLayoutContextValues } from './TableCellLayout.types';\n\n/**\n * Render the final JSX of TableCellLayout\n */\nexport const renderTableCellLayout_unstable = (\n  state: TableCellLayoutState,\n  contextValues: TableCellLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlots<TableCellLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <slots.media {...slotProps.media} />\n        </AvatarContextProvider>\n      )}\n      {slots.wrapper && (\n        <slots.wrapper {...slotProps.wrapper}>\n          {slots.main && <slots.main {...slotProps.main}>{slotProps.root.children}</slots.main>}\n          {slots.description && <slots.description {...slotProps.description} />}\n        </slots.wrapper>\n      )}\n    </slots.root>\n  );\n};\n"]}

package/lib/components/TableCellLayout/useTableCellLayout.js

@@ -14,7 +14,6 @@ const tableAvatarSizeMap = {
  * @param props - props from this instance of TableCellLayout
  * @param ref - reference to root HTMLElement of TableCellLayout
  */
-
 export const useTableCellLayout_unstable = (props, ref) => {
   const {
     size

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA,MAAM,kBAAkB,GAAG;EACzB,MAAM,EAAE,EADiB;EAEzB,KAAK,EAAE,EAFkB;EAGzB,eAAe;AAHU,CAA3B;AAMA;;;;;;;;AAQG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;EACxB,MAAM;IAAE;EAAF,IAAW,eAAe,EAAhC;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,qBAAqB,CAAC,KAAD,EAAQ;MAAE,GAAF;MAAO,GAAG;IAAV,CAAR,CARtB;IASL,UAAU,EAAE,KAAK,CAAC,UATb;IAUL,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MAAE,QAAQ,EAAE;IAAZ,CAAb,CAVjB;IAWL,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAP,CAXlB;IAYL,WAAW,EAAE,gBAAgB,CAAC,KAAK,CAAC,WAAP,CAZxB;IAaL,OAAO,EAAE,gBAAgB,CAAC,KAAK,CAAC,OAAP,EAAgB;MAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,WAAR,IAAuB,CAAC,CAAC,KAAK,CAAC;IAA3C,CAAhB,CAbpB;IAcL,UAAU,EAAE,kBAAkB,CAAC,IAAD,CAdzB;IAeL;EAfK,CAAP;AAiBD,CAvBM","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/"}
+{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAEnF,SAASC,eAAe,QAAQ,6BAA6B;AAE7D,MAAMC,kBAAkB,GAAG;EACzBC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE,EAAE;EACT,aAAa,EAAE;CACP;AAEV;;;;;;;;;AASA,OAAO,MAAMC,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;EACxB,MAAM;IAAEC;EAAI,CAAE,GAAGP,eAAe,EAAE;EAElC,OAAO;IACLQ,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE,MAAM;MACZC,WAAW,EAAE,MAAM;MACnBC,OAAO,EAAE,KAAK;MACdC,KAAK,EAAE;KACR;IACDJ,IAAI,EAAEX,qBAAqB,CAAC,KAAK,EAAE;MAAEQ,GAAG;MAAE,GAAGD;IAAK,CAAE,CAAC;IACrDS,UAAU,EAAET,KAAK,CAACS,UAAU;IAC5BJ,IAAI,EAAEX,gBAAgB,CAACM,KAAK,CAACK,IAAI,EAAE;MAAEK,QAAQ,EAAE;IAAI,CAAE,CAAC;IACtDF,KAAK,EAAEd,gBAAgB,CAACM,KAAK,CAACQ,KAAK,CAAC;IACpCF,WAAW,EAAEZ,gBAAgB,CAACM,KAAK,CAACM,WAAW,CAAC;IAChDC,OAAO,EAAEb,gBAAgB,CAACM,KAAK,CAACO,OAAO,EAAE;MAAEG,QAAQ,EAAE,CAAC,CAACV,KAAK,CAACM,WAAW,IAAI,CAAC,CAACN,KAAK,CAACW;IAAQ,CAAE,CAAC;IAC/FC,UAAU,EAAEhB,kBAAkB,CAACM,IAAI,CAAC;IACpCA;GACD;AACH,CAAC","names":["getNativeElementProps","resolveShorthand","useTableContext","tableAvatarSizeMap","medium","small","useTableCellLayout_unstable","props","ref","size","components","root","main","description","wrapper","media","appearance","required","children","avatarSize"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts"],"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"]}

package/lib/components/TableCellLayout/useTableCellLayoutContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,wCAAV,CAAmD,KAAnD,EAA8E;EAClF,MAAM;IAAE;EAAF,IAAiB,KAAvB;EAEA,MAAM,MAAM,GAAG,KAAK,CAAC,OAAN,CACb,OAAO;IACL,IAAI,EAAE;EADD,CAAP,CADa,EAIb,CAAC,UAAD,CAJa,CAAf;EAOA,OAAO;IACL;EADK,CAAP;AAGD","sourcesContent":["import * as React from 'react';\nimport type { TableCellLayoutState, TableCellLayoutContextValues } from './TableCellLayout.types';\n\nexport function useTableCellLayoutContextValues_unstable(state: TableCellLayoutState): TableCellLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo(\n    () => ({\n      size: avatarSize,\n    }),\n    [avatarSize],\n  );\n\n  return {\n    avatar,\n  };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAM,SAAUC,wCAAwC,CAACC,KAA2B;EAClF,MAAM;IAAEC;EAAU,CAAE,GAAGD,KAAK;EAE5B,MAAME,MAAM,GAAGJ,KAAK,CAACK,OAAO,CAC1B,OAAO;IACLC,IAAI,EAAEH;GACP,CAAC,EACF,CAACA,UAAU,CAAC,CACb;EAED,OAAO;IACLC;GACD;AACH","names":["React","useTableCellLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableCellLayoutState, TableCellLayoutContextValues } from './TableCellLayout.types';\n\nexport function useTableCellLayoutContextValues_unstable(state: TableCellLayoutState): TableCellLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo(\n    () => ({\n      size: avatarSize,\n    }),\n    [avatarSize],\n  );\n\n  return {\n    avatar,\n  };\n}\n"]}

package/lib/components/TableCellLayout/useTableCellLayoutStyles.js

@@ -11,57 +11,53 @@ export const tableCellLayoutClassNames = {
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "i8kkvl": "fsnqrgy",
-    "Belr9w4": "fylz90v",
-    "Bh6795r": "fqerorx",
-    "Bnnss6s": "f1neuvcm",
-    "xawz": "fkjuxzh"
+  root: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    i8kkvl: "fsnqrgy",
+    Belr9w4: "fylz90v",
+    Bh6795r: "fqerorx",
+    Bnnss6s: "f1neuvcm",
+    xawz: "fkjuxzh"
   },
-  "wrapper": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1vx9l62"
+  wrapper: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62"
   },
-  "media": {
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59"
+  media: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59"
   },
-  "mediaExtraSmall": {
-    "Be2twd7": "f4ybsrx"
+  mediaExtraSmall: {
+    Be2twd7: "f4ybsrx"
   },
-  "mediaSmallAndMedium": {
-    "Be2twd7": "fe5j1ua"
+  mediaSmallAndMedium: {
+    Be2twd7: "fe5j1ua"
   },
-  "mediaPrimary": {
-    "Be2twd7": "f1rt2boy"
+  mediaPrimary: {
+    Be2twd7: "f1rt2boy"
   },
-  "mainPrimary": {
-    "Bhrd7zp": "fl43uef"
+  mainPrimary: {
+    Bhrd7zp: "fl43uef"
   },
-  "description": {
-    "sj55zd": "fkfq4zb",
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fy9rknc",
-    "Bhrd7zp": "figsok6",
-    "Bg96gwp": "fwrc4pm"
+  description: {
+    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;}", ".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);}"]
+  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
  */
-
-
 export const useTableCellLayoutStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, state.root.className);
   const primary = state.appearance === 'primary';
-
   if (state.media) {
     const mediaSizedStyles = {
       small: styles.mediaSmallAndMedium,
@@ -70,19 +66,15 @@ export const useTableCellLayoutStyles_unstable = state => {
     };
     state.media.className = mergeClasses(tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);
   }
-
   if (state.main) {
     state.main.className = mergeClasses(tableCellLayoutClassNames.main, primary && styles.mainPrimary, state.main.className);
   }
-
   if (state.description) {
     state.description.className = mergeClasses(tableCellLayoutClassNames.description, styles.description, state.description.className);
   }
-
   if (state.wrapper) {
     state.wrapper.className = mergeClasses(tableCellLayoutClassNames.wrapper, styles.wrapper, state.wrapper.className);
   }
-
   return state;
 };
 //# sourceMappingURL=useTableCellLayoutStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AAEA,OAAO,MAAM,yBAAyB,GAAyC;EAC7E,IAAI,EAAE,qBADuE;EAE7E,KAAK,EAAE,4BAFsE;EAG7E,IAAI,EAAE,2BAHuE;EAI7E,WAAW,EAAE,kCAJgE;EAK7E,OAAO,EAAE;AALoE,CAAxE;AAQP;;AAEG;;AACH,MAAM,SAAS,gBAAG;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;;;AACH,OAAO,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,yBAAyB,CAAC,IAA3B,EAAiC,MAAM,CAAC,IAAxC,EAA8C,KAAK,CAAC,IAAN,CAAW,SAAzD,CAAnC;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,YAAY,CAClC,yBAAyB,CAAC,KADQ,EAElC,MAAM,CAAC,KAF2B,EAGlC,gBAAgB,CAAC,KAAK,CAAC,IAAP,CAHkB,EAIlC,OAAO,IAAI,MAAM,CAAC,YAJgB,EAKlC,KAAK,CAAC,KAAN,CAAY,SALsB,CAApC;EAOD;;EAED,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,yBAAyB,CAAC,IADO,EAEjC,OAAO,IAAI,MAAM,CAAC,WAFe,EAGjC,KAAK,CAAC,IAAN,CAAW,SAHsB,CAAnC;EAKD;;EAED,IAAI,KAAK,CAAC,WAAV,EAAuB;IACrB,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,YAAY,CACxC,yBAAyB,CAAC,WADc,EAExC,MAAM,CAAC,WAFiC,EAGxC,KAAK,CAAC,WAAN,CAAkB,SAHsB,CAA1C;EAKD;;EAED,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,yBAAyB,CAAC,OAA3B,EAAoC,MAAM,CAAC,OAA3C,EAAoD,KAAK,CAAC,OAAN,CAAc,SAAlE,CAAtC;EACD;;EAED,OAAO,KAAP;AACD,CA1CM","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/"}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAG9C,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAO,MAAMC,yBAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,IAAI,EAAE,2BAA2B;EACjCC,WAAW,EAAE,kCAAkC;EAC/CC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,SAAS,gBAAG;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,EAqChB;AAEF;;;AAGA,OAAO,MAAMC,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACP,IAAI,CAACS,SAAS,GAAGd,YAAY,CAACI,yBAAyB,CAACC,IAAI,EAAEQ,MAAM,CAACR,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACS,SAAS,CAAC;EACtG,MAAMC,OAAO,GAAGH,KAAK,CAACI,UAAU,KAAK,SAAS;EAE9C,IAAIJ,KAAK,CAACN,KAAK,EAAE;IACf,MAAMW,gBAAgB,GAAG;MACvBC,KAAK,EAAEL,MAAM,CAACM,mBAAmB;MACjCC,MAAM,EAAEP,MAAM,CAACM,mBAAmB;MAClC,aAAa,EAAEN,MAAM,CAACQ;KACvB;IAEDT,KAAK,CAACN,KAAK,CAACQ,SAAS,GAAGd,YAAY,CAClCI,yBAAyB,CAACE,KAAK,EAC/BO,MAAM,CAACP,KAAK,EACZW,gBAAgB,CAACL,KAAK,CAACU,IAAI,CAAC,EAC5BP,OAAO,IAAIF,MAAM,CAACU,YAAY,EAC9BX,KAAK,CAACN,KAAK,CAACQ,SAAS,CACtB;;EAGH,IAAIF,KAAK,CAACL,IAAI,EAAE;IACdK,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGd,YAAY,CACjCI,yBAAyB,CAACG,IAAI,EAC9BQ,OAAO,IAAIF,MAAM,CAACW,WAAW,EAC7BZ,KAAK,CAACL,IAAI,CAACO,SAAS,CACrB;;EAGH,IAAIF,KAAK,CAACJ,WAAW,EAAE;IACrBI,KAAK,CAACJ,WAAW,CAACM,SAAS,GAAGd,YAAY,CACxCI,yBAAyB,CAACI,WAAW,EACrCK,MAAM,CAACL,WAAW,EAClBI,KAAK,CAACJ,WAAW,CAACM,SAAS,CAC5B;;EAGH,IAAIF,KAAK,CAACH,OAAO,EAAE;IACjBG,KAAK,CAACH,OAAO,CAACK,SAAS,GAAGd,YAAY,CAACI,yBAAyB,CAACK,OAAO,EAAEI,MAAM,CAACJ,OAAO,EAAEG,KAAK,CAACH,OAAO,CAACK,SAAS,CAAC;;EAGpH,OAAOF,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","typographyStyles","tableCellLayoutClassNames","root","media","main","description","wrapper","useStyles","useTableCellLayoutStyles_unstable","state","styles","className","primary","appearance","mediaSizedStyles","small","mediaSmallAndMedium","medium","mediaExtraSmall","size","mediaPrimary","mainPrimary"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts"],"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"]}

package/lib/components/TableHeader/TableHeader.js

@@ -5,7 +5,6 @@ import { useTableHeaderStyles_unstable } from './useTableHeaderStyles';
 /**
  * TableHeader component - TODO: add more docs
  */
-
 export const TableHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTableHeader_unstable(props, ref);
   useTableHeaderStyles_unstable(state);

package/lib/components/TableHeader/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useTableHeader_unstable } from './useTableHeader';\nimport { renderTableHeader_unstable } from './renderTableHeader';\nimport { useTableHeaderStyles_unstable } from './useTableHeaderStyles';\nimport type { TableHeaderProps } from './TableHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableHeader component - TODO: add more docs\n */\nexport const TableHeader: ForwardRefComponent<TableHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useTableHeader_unstable(props, ref);\n\n  useTableHeaderStyles_unstable(state);\n  return renderTableHeader_unstable(state);\n});\n\nTableHeader.displayName = 'TableHeader';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDJ,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACK,WAAW,GAAG,aAAa","names":["React","useTableHeader_unstable","renderTableHeader_unstable","useTableHeaderStyles_unstable","TableHeader","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableHeader_unstable } from './useTableHeader';\nimport { renderTableHeader_unstable } from './renderTableHeader';\nimport { useTableHeaderStyles_unstable } from './useTableHeaderStyles';\nimport type { TableHeaderProps } from './TableHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableHeader component - TODO: add more docs\n */\nexport const TableHeader: ForwardRefComponent<TableHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useTableHeader_unstable(props, ref);\n\n  useTableHeaderStyles_unstable(state);\n  return renderTableHeader_unstable(state);\n});\n\nTableHeader.displayName = 'TableHeader';\n"]}

package/lib/components/TableHeader/renderTableHeader.js

@@ -4,7 +4,6 @@ import { TableHeaderContextProvider } from '../../contexts/tableHeaderContext';
 /**
  * Render the final JSX of TableHeader
  */
-
 export const renderTableHeader_unstable = state => {
   const {
     slots,
@@ -12,7 +11,8 @@ export const renderTableHeader_unstable = state => {
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(TableHeaderContextProvider, {
     value: ""
-  }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
   }));
 };
 //# sourceMappingURL=renderTableHeader.js.map

package/lib/components/TableHeader/renderTableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/renderTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,0BAAT,QAA2C,mCAA3C;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,0BAAD,EAA2B;IAAC,KAAK,EAAC;EAAP,CAA3B,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { TableHeaderContextProvider } from '../../contexts/tableHeaderContext';\nimport type { TableHeaderState, TableHeaderSlots } from './TableHeader.types';\n\n/**\n * Render the final JSX of TableHeader\n */\nexport const renderTableHeader_unstable = (state: TableHeaderState) => {\n  const { slots, slotProps } = getSlots<TableHeaderSlots>(state);\n\n  return (\n    <TableHeaderContextProvider value=\"\">\n      <slots.root {...slotProps.root} />\n    </TableHeaderContextProvider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,0BAA0B,QAAQ,mCAAmC;AAG9E;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAmBG,KAAK,CAAC;EAE9D,oBACEJ,oBAACE,0BAA0B;IAACK,KAAK,EAAC;EAAE,gBAClCP,oBAACK,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,EAAI,CACP;AAEjC,CAAC","names":["React","getSlots","TableHeaderContextProvider","renderTableHeader_unstable","state","slots","slotProps","value","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeader/renderTableHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { TableHeaderContextProvider } from '../../contexts/tableHeaderContext';\nimport type { TableHeaderState, TableHeaderSlots } from './TableHeader.types';\n\n/**\n * Render the final JSX of TableHeader\n */\nexport const renderTableHeader_unstable = (state: TableHeaderState) => {\n  const { slots, slotProps } = getSlots<TableHeaderSlots>(state);\n\n  return (\n    <TableHeaderContextProvider value=\"\">\n      <slots.root {...slotProps.root} />\n    </TableHeaderContextProvider>\n  );\n};\n"]}

package/lib/components/TableHeader/useTableHeader.js

@@ -9,10 +9,8 @@ import { useTableContext } from '../../contexts/tableContext';
  * @param props - props from this instance of TableHeader
  * @param ref - reference to root HTMLElement of TableHeader
  */
-
 export const useTableHeader_unstable = (props, ref) => {
   var _a;
-
   const {
     noNativeElements
   } = useTableContext();

package/lib/components/TableHeader/useTableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;;;EAChH,MAAM;IAAE;EAAF,IAAuB,eAAe,EAA5C;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,OAA7D;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,UAA1B,GAAuC,SAFJ;MAGzC,GAAG;IAHsC,CAAhB,CAJtB;IASL;EATK,CAAP;AAWD,CAfM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableHeaderProps, TableHeaderState } from './TableHeader.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableHeader.\n *\n * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,\n * before being passed to renderTableHeader_unstable.\n *\n * @param props - props from this instance of TableHeader\n * @param ref - reference to root HTMLElement of TableHeader\n */\nexport const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<HTMLElement>): TableHeaderState => {\n  const { noNativeElements } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'thead';\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'rowgroup' : undefined,\n      ...props,\n    }),\n    noNativeElements,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAASA,qBAAqB,QAAQ,2BAA2B;AAEjE,SAASC,eAAe,QAAQ,6BAA6B;AAE7D;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;;EAChH,MAAM;IAAEC;EAAgB,CAAE,GAAGJ,eAAe,EAAE;EAE9C,MAAMK,aAAa,GAAG,YAAK,CAACC,EAAE,mCAAIF,gBAAgB,IAAG,KAAK,GAAG,OAAO;EACpE,OAAO;IACLG,UAAU,EAAE;MACVC,IAAI,EAAEH;KACP;IACDG,IAAI,EAAET,qBAAqB,CAACM,aAAa,EAAE;MACzCF,GAAG;MACHM,IAAI,EAAEJ,aAAa,KAAK,KAAK,GAAG,UAAU,GAAGK,SAAS;MACtD,GAAGR;KACJ,CAAC;IACFE;GACD;AACH,CAAC","names":["getNativeElementProps","useTableContext","useTableHeader_unstable","props","ref","noNativeElements","rootComponent","as","components","root","role","undefined"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableHeaderProps, TableHeaderState } from './TableHeader.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableHeader.\n *\n * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,\n * before being passed to renderTableHeader_unstable.\n *\n * @param props - props from this instance of TableHeader\n * @param ref - reference to root HTMLElement of TableHeader\n */\nexport const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<HTMLElement>): TableHeaderState => {\n  const { noNativeElements } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'thead';\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'rowgroup' : undefined,\n      ...props,\n    }),\n    noNativeElements,\n  };\n};\n"]}

package/lib/components/TableHeader/useTableHeaderStyles.js

@@ -3,33 +3,29 @@ export const tableHeaderClassName = 'fui-TableHeader';
 export const tableHeaderClassNames = {
   root: 'fui-TableHeader'
 };
-
 const useFlexLayoutStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "ftgm304"
+  root: {
+    mc9l5x: "ftgm304"
   },
-  "roottable": {
-    "mc9l5x": "f1tp1avn"
+  roottable: {
+    mc9l5x: "f1tp1avn"
   },
-  "rootFlex": {
-    "mc9l5x": "ftgm304"
+  rootFlex: {
+    mc9l5x: "ftgm304"
   }
 }, {
-  "d": [".ftgm304{display:block;}", ".f1tp1avn{display:table-row-group;}"]
+  d: [".ftgm304{display:block;}", ".f1tp1avn{display:table-row-group;}"]
 });
-
 const useTableLayoutStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "f1tp1avn"
+  root: {
+    mc9l5x: "f1tp1avn"
   }
 }, {
-  "d": [".f1tp1avn{display:table-row-group;}"]
+  d: [".f1tp1avn{display:table-row-group;}"]
 });
 /**
  * Apply styling to the TableHeader slots based on the state
  */
-
-
 export const useTableHeaderStyles_unstable = state => {
   const layoutStyles = {
     table: useTableLayoutStyles(),

package/lib/components/TableHeader/useTableHeaderStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;AAIA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AACP,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE;AAD+D,CAAhE;;AAIP,MAAM,mBAAmB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;;AAcA,MAAM,oBAAoB,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;AAMA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBADiC,EAEjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAFpC,EAGjC,KAAK,CAAC,IAAN,CAAW,SAHsB,CAAnC;EAMA,OAAO,KAAP;AACD,CAZM","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableHeaderSlots, TableHeaderState } from './TableHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableHeaderClassName = 'fui-TableHeader';\nexport const tableHeaderClassNames: SlotClassNames<TableHeaderSlots> = {\n  root: 'fui-TableHeader',\n};\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n\n  roottable: {\n    display: 'table-row-group',\n  },\n\n  rootFlex: {\n    display: 'block',\n  },\n});\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row-group',\n  },\n});\n\n/**\n * Apply styling to the TableHeader slots based on the state\n */\nexport const useTableHeaderStyles_unstable = (state: TableHeaderState): TableHeaderState => {\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderClassName,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,YAAY,kBAAoB,gBAAgB;AAIzD,OAAO,MAAMC,oBAAoB,GAAG,iBAAiB;AACrD,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE;CACP;AAED,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAY1B;AAEF,MAAMC,oBAAoB,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAI3B;AAEF;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,YAAY,GAAG;IACnBC,KAAK,EAAEJ,oBAAoB,EAAE;IAC7BK,IAAI,EAAEN,mBAAmB;GAC1B;EACDG,KAAK,CAACJ,IAAI,CAACQ,SAAS,GAAGX,YAAY,CACjCC,oBAAoB,EACpBM,KAAK,CAACK,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACP,IAAI,GAAGK,YAAY,CAACC,KAAK,CAACN,IAAI,EACzEI,KAAK,CAACJ,IAAI,CAACQ,SAAS,CACrB;EAED,OAAOJ,KAAK;AACd,CAAC","names":["mergeClasses","tableHeaderClassName","tableHeaderClassNames","root","useFlexLayoutStyles","useTableLayoutStyles","useTableHeaderStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableHeaderSlots, TableHeaderState } from './TableHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableHeaderClassName = 'fui-TableHeader';\nexport const tableHeaderClassNames: SlotClassNames<TableHeaderSlots> = {\n  root: 'fui-TableHeader',\n};\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n\n  roottable: {\n    display: 'table-row-group',\n  },\n\n  rootFlex: {\n    display: 'block',\n  },\n});\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row-group',\n  },\n});\n\n/**\n * Apply styling to the TableHeader slots based on the state\n */\nexport const useTableHeaderStyles_unstable = (state: TableHeaderState): TableHeaderState => {\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderClassName,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}

package/lib/components/TableHeaderCell/TableHeaderCell.js

@@ -5,7 +5,6 @@ import { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles';
 /**
  * TableHeaderCell component - TODO: add more docs
  */
-
 export const TableHeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTableHeaderCell_unstable(props, ref);
   useTableHeaderCellStyles_unstable(state);

package/lib/components/TableHeaderCell/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,iCAAT,QAAkD,4BAAlD;AAIA;;AAEG;;AACH,OAAO,MAAM,eAAe,gBAA8C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,2BAA2B,CAAC,KAAD,EAAQ,GAAR,CAAzC;EAEA,iCAAiC,CAAC,KAAD,CAAjC;EACA,OAAO,8BAA8B,CAAC,KAAD,CAArC;AACD,CALyE,CAAnE;AAOP,eAAe,CAAC,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { useTableHeaderCell_unstable } from './useTableHeaderCell';\nimport { renderTableHeaderCell_unstable } from './renderTableHeaderCell';\nimport { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles';\nimport type { TableHeaderCellProps } from './TableHeaderCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableHeaderCell component - TODO: add more docs\n */\nexport const TableHeaderCell: ForwardRefComponent<TableHeaderCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableHeaderCell_unstable(props, ref);\n\n  useTableHeaderCellStyles_unstable(state);\n  return renderTableHeaderCell_unstable(state);\n});\n\nTableHeaderCell.displayName = 'TableHeaderCell';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,2BAA2B,QAAQ,sBAAsB;AAClE,SAASC,8BAA8B,QAAQ,yBAAyB;AACxE,SAASC,iCAAiC,QAAQ,4BAA4B;AAI9E;;;AAGA,OAAO,MAAMC,eAAe,gBAA8CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxG,MAAMC,KAAK,GAAGP,2BAA2B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAErDJ,iCAAiC,CAACK,KAAK,CAAC;EACxC,OAAON,8BAA8B,CAACM,KAAK,CAAC;AAC9C,CAAC,CAAC;AAEFJ,eAAe,CAACK,WAAW,GAAG,iBAAiB","names":["React","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","useTableHeaderCellStyles_unstable","TableHeaderCell","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableHeaderCell_unstable } from './useTableHeaderCell';\nimport { renderTableHeaderCell_unstable } from './renderTableHeaderCell';\nimport { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles';\nimport type { TableHeaderCellProps } from './TableHeaderCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableHeaderCell component - TODO: add more docs\n */\nexport const TableHeaderCell: ForwardRefComponent<TableHeaderCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableHeaderCell_unstable(props, ref);\n\n  useTableHeaderCellStyles_unstable(state);\n  return renderTableHeaderCell_unstable(state);\n});\n\nTableHeaderCell.displayName = 'TableHeaderCell';\n"]}

package/lib/components/TableHeaderCell/renderTableHeaderCell.js

@@ -3,15 +3,17 @@ import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of TableHeaderCell
  */
-
 export const renderTableHeaderCell_unstable = state => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, /*#__PURE__*/React.createElement(slots.button, { ...slotProps.button
-  }, slotProps.root.children, slots.sortIcon && /*#__PURE__*/React.createElement(slots.sortIcon, { ...slotProps.sortIcon
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.button, {
+    ...slotProps.button
+  }, slotProps.root.children, slots.sortIcon && /*#__PURE__*/React.createElement(slots.sortIcon, {
+    ...slotProps.sortIcon
   })));
 };
 //# sourceMappingURL=renderTableHeaderCell.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/renderTableHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAAgC;EAC5E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAuB,KAAvB,CAArC;EAEA,oBACE,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,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CAFrB,CADF,CADF;AAQD,CAXM","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAuBE,KAAK,CAAC;EAElE,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,MAAM;IAAA,GAAKF,SAAS,CAACE;EAAM,GAC/BF,SAAS,CAACC,IAAI,CAACE,QAAQ,EACvBJ,KAAK,CAACK,QAAQ,iBAAIT,oBAACI,KAAK,CAACK,QAAQ;IAAA,GAAKJ,SAAS,CAACI;EAAQ,EAAI,CAChD,CACJ;AAEjB,CAAC","names":["React","getSlots","renderTableHeaderCell_unstable","state","slots","slotProps","root","button","children","sortIcon"],"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/components/TableHeaderCell/useTableHeaderCell.js

@@ -21,10 +21,8 @@ const sortIcons = {
  * @param props - props from this instance of TableHeaderCell
  * @param ref - reference to root HTMLElement of TableHeaderCell
  */
-
 export const useTableHeaderCell_unstable = (props, ref) => {
   var _a, _b;
-
   const {
     noNativeElements,
     sortable

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,aAAlD,QAAuE,2BAAvE;AACA,SAAS,cAAT,QAA+B,yBAA/B;AACA,SAAS,cAAT,EAAyB,gBAAzB,QAAiD,uBAAjD;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AACA,SAAS,sBAAT,QAAuC,sBAAvC;AAEA,MAAM,SAAS,GAAG;EAChB,SAAS,eAAE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe;IAAC,QAAQ,EAAE;EAAX,CAAf,CADK;EAEhB,UAAU,eAAE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB;IAAC,QAAQ,EAAE;EAAX,CAAjB;AAFI,CAAlB;AAKA;;;;;;;;AAQG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;;;EACxB,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAAiC,eAAe,EAAtD;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,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,cAAc,EAApB,CADuB;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,cAA1B,GAA2C,SAFR;MAGzC,aAAa,QAAQ,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,aAAN,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,EAAnB,GAAuB,MAA1B,GAAmC,SAHf;MAIzC,GAAG;IAJsC,CAAhB,CANtB;IAYL,QAAQ,EAAE,gBAAgB,CAAC,KAAK,CAAC,QAAP,EAAiB;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,CAAjB,CAZrB;IAgBL,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC,MAAP,EAAe;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,CAAf,CAhBzB;IA4BL,QA5BK;IA6BL;EA7BK,CAAP;AA+BD,CAtCM","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,2BAA2B;AAClG,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,uBAAuB;AAExE,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,sBAAsB,QAAQ,sBAAsB;AAE7D,MAAMC,SAAS,GAAG;EAChBC,SAAS,eAAEV,oBAACK,cAAc;IAACM,QAAQ,EAAE;EAAE,EAAI;EAC3CC,UAAU,eAAEZ,oBAACM,gBAAgB;IAACK,QAAQ,EAAE;EAAE;CAC3C;AAED;;;;;;;;;AASA,OAAO,MAAME,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;;EACxB,MAAM;IAAEC,gBAAgB;IAAEC;EAAQ,CAAE,GAAGV,eAAe,EAAE;EAExD,MAAMW,aAAa,GAAG,YAAK,CAACC,EAAE,mCAAIH,gBAAgB,IAAG,KAAK,GAAG,IAAI;EACjE,OAAO;IACLI,UAAU,EAAE;MACVC,IAAI,EAAEH,aAAa;MACnBI,MAAM,EAAE,QAAQ;MAChBC,QAAQ,EAAE;KACX;IACDF,IAAI,EAAEpB,qBAAqB,CAACiB,aAAa,EAAE;MACzCH,GAAG,EAAEZ,aAAa,CAACY,GAAG,EAAEX,cAAc,EAAE,CAAC;MACzCoB,IAAI,EAAEN,aAAa,KAAK,KAAK,GAAG,cAAc,GAAGO,SAAS;MAC1D,WAAW,EAAER,QAAQ,GAAG,WAAK,CAACS,aAAa,mCAAI,MAAM,GAAGD,SAAS;MACjE,GAAGX;KACJ,CAAC;IACFS,QAAQ,EAAErB,gBAAgB,CAACY,KAAK,CAACS,QAAQ,EAAE;MACzCI,QAAQ,EAAE,CAAC,CAACb,KAAK,CAACY,aAAa;MAC/BE,YAAY,EAAE;QAAEC,QAAQ,EAAEf,KAAK,CAACY,aAAa,GAAGjB,SAAS,CAACK,KAAK,CAACY,aAAa,CAAC,GAAGD;MAAS;KAC3F,CAAC;IACFH,MAAM,EAAEd,sBAAsB,CAACM,KAAK,CAACQ,MAAM,EAAE;MAC3CK,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZJ,IAAI,EAAE,cAAc;QACpBM,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAE,QAAQ;QACd,IAAId,QAAQ,IAAI;UACdO,IAAI,EAAEC,SAAS;UACfK,QAAQ,EAAEL;SACX;;KAEJ,CAAC;IACFR,QAAQ;IACRD;GACD;AACH,CAAC","names":["React","getNativeElementProps","resolveShorthand","useMergedRefs","useFocusWithin","ArrowUpRegular","ArrowDownRegular","useTableContext","useARIAButtonShorthand","sortIcons","ascending","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","rootComponent","as","components","root","button","sortIcon","role","undefined","sortDirection","required","defaultProps","children","tabIndex","type"],"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"]}