@fluentui/react-table 9.0.0-alpha.1 → 9.0.0-alpha.3

package/lib/components/TableCell/useTableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/TableCell/useTableCell.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;;;EAC1G,MAAM,gBAAgB,GAAG,eAAe,CAAC,GAAG,IAAI,GAAG,CAAC,gBAAZ,CAAxC;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;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,aADI;MAEV,KAAK,EAAE;IAFG,CADP;IAKL,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAP,CALlB;IAML,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,MAA1B,GAAmC,SAFA;MAGzC,GAAG;IAHsC,CAAhB;EANtB,CAAP;AAYD,CAjBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TableCellProps, TableCellState } from './TableCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableCell.\n *\n * The returned state can be modified with hooks such as useTableCellStyles_unstable,\n * before being passed to renderTableCell_unstable.\n *\n * @param props - props from this instance of TableCell\n * @param ref - reference to root HTMLElement of TableCell\n */\nexport const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTMLElement>): TableCellState => {\n  const noNativeElements = useTableContext(ctx => ctx.noNativeElements);\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'td';\n\n  return {\n    components: {\n      root: rootComponent,\n      media: 'span',\n    },\n    media: resolveShorthand(props.media),\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'cell' : undefined,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableCell/useTableCell.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;;;EAC1G,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,IAA7D;EAEA,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,MAA1B,GAAmC,SAFA;MAGzC,GAAG;IAHsC,CAAhB;EAJtB,CAAP;AAUD,CAfM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableCellProps, TableCellState } from './TableCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableCell.\n *\n * The returned state can be modified with hooks such as useTableCellStyles_unstable,\n * before being passed to renderTableCell_unstable.\n *\n * @param props - props from this instance of TableCell\n * @param ref - reference to root HTMLElement of TableCell\n */\nexport const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTMLElement>): TableCellState => {\n  const { noNativeElements } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'td';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'cell' : undefined,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableCell/useTableCellStyles.js

@@ -2,8 +2,7 @@ import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const tableCellClassName = 'fui-TableCell';
 export const tableCellClassNames = {
-  root: tableCellClassName,
-  media: 'fui-TableCell__media'
+  root: tableCellClassName
 };
 /**
  * Styles for the root slot
@@ -11,24 +10,16 @@ export const tableCellClassNames = {
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
+    "qhf8xq": "f10pi13n",
+    "ha4doy": "fmrv4ls",
+    "mc9l5x": "f15pt5es",
     "z8tnut": "f1nbblvp",
     "z189sj": ["f1vdfbxk", "f1f5gg8d"],
     "Byoj8tv": "f1ov4xf1",
-    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "i8kkvl": "fsnqrgy",
-    "Belr9w4": "fylz90v",
-    "Bh6795r": "fqerorx",
-    "Bnnss6s": "f1neuvcm",
-    "xawz": "fkjuxzh"
-  },
-  "media": {
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59"
+    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  "d": [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".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;}"]
+  "d": [".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f15pt5es{display:table-cell;}", ".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}"]
 });
 /**
  * Apply styling to the TableCell slots based on the state
@@ -38,11 +29,6 @@ const useStyles = /*#__PURE__*/__styles({
 export const useTableCellStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.root.className);
-
-  if (state.media) {
-    state.media.className = mergeClasses(tableCellClassNames.media, styles.media);
-  }
-
   return state;
 };
 //# sourceMappingURL=useTableCellStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/TableCell/useTableCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,kBAAkB,GAAG,eAA3B;AACP,OAAO,MAAM,mBAAmB,GAAmC;EACjE,IAAI,EAAE,kBAD2D;EAEjE,KAAK,EAAE;AAF0D,CAA5D;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAeA;;AAEG;;;AACH,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAA0C;EACnF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAmB,CAAC,IAArB,EAA2B,MAAM,CAAC,IAAlC,EAAwC,KAAK,CAAC,IAAN,CAAW,SAAnD,CAAnC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,mBAAmB,CAAC,KAArB,EAA4B,MAAM,CAAC,KAAnC,CAApC;EACD;;EAED,OAAO,KAAP;AACD,CARM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellSlots, TableCellState } from './TableCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames: SlotClassNames<TableCellSlots> = {\n  root: tableCellClassName,\n  media: 'fui-TableCell__media',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    ...shorthands.flex(1, 1, '0px'),\n  },\n\n  media: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\n/**\n * Apply styling to the TableCell slots based on the state\n */\nexport const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.root.className);\n  if (state.media) {\n    state.media.className = mergeClasses(tableCellClassNames.media, styles.media);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableCell/useTableCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,kBAAkB,GAAG,eAA3B;AACP,OAAO,MAAM,mBAAmB,GAAmC;EACjE,IAAI,EAAE;AAD2D,CAA5D;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AASA;;AAEG;;;AACH,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAA0C;EACnF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAmB,CAAC,IAArB,EAA2B,MAAM,CAAC,IAAlC,EAAwC,KAAK,CAAC,IAAN,CAAW,SAAnD,CAAnC;EACA,OAAO,KAAP;AACD,CAJM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellSlots, TableCellState } from './TableCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames: SlotClassNames<TableCellSlots> = {\n  root: tableCellClassName,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n    verticalAlign: 'middle',\n    display: 'table-cell',\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n  },\n});\n\n/**\n * Apply styling to the TableCell slots based on the state\n */\nexport const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableCellActions/TableCellActions.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useTableCellActions_unstable } from './useTableCellActions';
+import { renderTableCellActions_unstable } from './renderTableCellActions';
+import { useTableCellActionsStyles_unstable } from './useTableCellActionsStyles';
+/**
+ * TableCellActions component - TODO: add more docs
+ */
+
+export const TableCellActions = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTableCellActions_unstable(props, ref);
+  useTableCellActionsStyles_unstable(state);
+  return renderTableCellActions_unstable(state);
+});
+TableCellActions.displayName = 'TableCellActions';
+//# sourceMappingURL=TableCellActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TableCellActions/TableCellActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AAIA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1G,MAAM,KAAK,GAAG,4BAA4B,CAAC,KAAD,EAAQ,GAAR,CAA1C;EAEA,kCAAkC,CAAC,KAAD,CAAlC;EACA,OAAO,+BAA+B,CAAC,KAAD,CAAtC;AACD,CAL2E,CAArE;AAOP,gBAAgB,CAAC,WAAjB,GAA+B,kBAA/B","sourcesContent":["import * as React from 'react';\nimport { useTableCellActions_unstable } from './useTableCellActions';\nimport { renderTableCellActions_unstable } from './renderTableCellActions';\nimport { useTableCellActionsStyles_unstable } from './useTableCellActionsStyles';\nimport type { TableCellActionsProps } from './TableCellActions.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableCellActions component - TODO: add more docs\n */\nexport const TableCellActions: ForwardRefComponent<TableCellActionsProps> = React.forwardRef((props, ref) => {\n  const state = useTableCellActions_unstable(props, ref);\n\n  useTableCellActionsStyles_unstable(state);\n  return renderTableCellActions_unstable(state);\n});\n\nTableCellActions.displayName = 'TableCellActions';\n"],"sourceRoot":"../src/"}

package/lib/components/TableCellActions/TableCellActions.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TableCellActions.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellActions.types.js","sourceRoot":"../src/","sources":["components/TableCellActions/TableCellActions.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TableCellActionsSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TableCellActions Props\n */\nexport type TableCellActionsProps = ComponentProps<TableCellActionsSlots> & {\n  /**\n   * When true, the actions are always visible regardless of row hover.\n   * Can be useful keeping the actions visible when a popout surface is opened.\n   */\n  visible?: boolean;\n};\n\n/**\n * State used in rendering TableCellActions\n */\nexport type TableCellActionsState = ComponentState<TableCellActionsSlots> &\n  Pick<Required<TableCellActionsProps>, 'visible'>;\n"]}

package/lib/components/TableCellActions/index.js

@@ -0,0 +1,6 @@
+export * from './TableCellActions';
+export * from './TableCellActions.types';
+export * from './renderTableCellActions';
+export * from './useTableCellActions';
+export * from './useTableCellActionsStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/TableCellActions/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './TableCellActions';\nexport * from './TableCellActions.types';\nexport * from './renderTableCellActions';\nexport * from './useTableCellActions';\nexport * from './useTableCellActionsStyles';\n"]}

package/lib/components/TableCellActions/renderTableCellActions.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TableCellActions
+ */
+
+export const renderTableCellActions_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state); // TODO Add additional slots in the appropriate place
+
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  });
+};
+//# sourceMappingURL=renderTableCellActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TableCellActions/renderTableCellActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAiC;EAC9E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAwB,KAAxB,CAArC,CAD8E,CAG9E;;EACA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableCellActionsState, TableCellActionsSlots } from './TableCellActions.types';\n\n/**\n * Render the final JSX of TableCellActions\n */\nexport const renderTableCellActions_unstable = (state: TableCellActionsState) => {\n  const { slots, slotProps } = getSlots<TableCellActionsSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableCellActions/useTableCellActions.js

@@ -0,0 +1,27 @@
+import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
+import { useFocusWithin } from '@fluentui/react-tabster';
+/**
+ * Create the state required to render TableCellActions.
+ *
+ * The returned state can be modified with hooks such as useTableCellActionsStyles_unstable,
+ * before being passed to renderTableCellActions_unstable.
+ *
+ * @param props - props from this instance of TableCellActions
+ * @param ref - reference to root HTMLElement of TableCellActions
+ */
+
+export const useTableCellActions_unstable = (props, ref) => {
+  var _a;
+
+  return {
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref: useMergedRefs(ref, useFocusWithin()),
+      ...props
+    }),
+    visible: (_a = props.visible) !== null && _a !== void 0 ? _a : false
+  };
+};
+//# sourceMappingURL=useTableCellActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TableCellActions/useTableCellActions.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,SAAS,cAAT,QAA+B,yBAA/B;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,4BAA4B,GAAG,CAC1C,KAD0C,EAE1C,GAF0C,KAGjB;;;EACzB,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,cAAc,EAApB,CADe;MAEjC,GAAG;IAF8B,CAAR,CAJtB;IAQL,OAAO,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,EAAb,GAAiB;EARrB,CAAP;AAUD,CAdM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';\n\n/**\n * Create the state required to render TableCellActions.\n *\n * The returned state can be modified with hooks such as useTableCellActionsStyles_unstable,\n * before being passed to renderTableCellActions_unstable.\n *\n * @param props - props from this instance of TableCellActions\n * @param ref - reference to root HTMLElement of TableCellActions\n */\nexport const useTableCellActions_unstable = (\n  props: TableCellActionsProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellActionsState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, useFocusWithin()),\n      ...props,\n    }),\n    visible: props.visible ?? false,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableCellActions/useTableCellActionsStyles.js

@@ -0,0 +1,40 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const tableCellActionsClassNames = {
+  root: 'fui-TableCellActions'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "qhf8xq": "f1euv43f",
+    "j35jbq": ["f10k790i", "f1xynx9j"],
+    "Bhzewxz": "f1i1t8d1",
+    "Bz10aip": "f188r07x",
+    "abs64n": "fk73vx1",
+    "Frg6f3": ["fcgxt0o", "f1ujusj6"],
+    "Brovlpu": "ftqa4ok",
+    "B486eqv": "f2hkw1w",
+    "Bs2wo6l": "f1g03rbe"
+  },
+  "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;}", ".f1g03rbe.fui-focus-within:focus-within{opacity:1;}", ".f5p0z4x{opacity:1;}"],
+  "f": [".ftqa4ok:focus{outline-style:none;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
+});
+/**
+ * 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);
+  return state;
+};
+//# sourceMappingURL=useTableCellActionsStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TableCellActions/useTableCellActionsStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,SAAS,+BAAT,QAAgD,yBAAhD;AAEA,OAAO,MAAM,0BAA0B,GAA0C;EAC/E,IAAI,EAAE;AADyE,CAA1E;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAsBA;;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';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots> = {\n  root: 'fui-TableCellActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    right: '0px',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    opacity: 0,\n    marginLeft: 'auto',\n\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  visible: {\n    opacity: 1,\n  },\n});\n\n/**\n * Apply styling to the TableCellActions slots based on the state\n */\nexport const useTableCellActionsStyles_unstable = (state: TableCellActionsState): TableCellActionsState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tableCellActionsClassNames.root,\n    styles.root,\n    state.visible && styles.visible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableCellLayout/TableCellLayout.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useTableCellLayout_unstable } from './useTableCellLayout';
+import { renderTableCellLayout_unstable } from './renderTableCellLayout';
+import { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles';
+/**
+ * TableCellLayout component - TODO: add more docs
+ */
+
+export const TableCellLayout = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTableCellLayout_unstable(props, ref);
+  useTableCellLayoutStyles_unstable(state);
+  return renderTableCellLayout_unstable(state);
+});
+TableCellLayout.displayName = 'TableCellLayout';
+//# sourceMappingURL=TableCellLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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;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 { useTableCellLayout_unstable } from './useTableCellLayout';\nimport { renderTableCellLayout_unstable } from './renderTableCellLayout';\nimport { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles';\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);\n});\n\nTableCellLayout.displayName = 'TableCellLayout';\n"],"sourceRoot":"../src/"}

package/lib/components/TableCellLayout/TableCellLayout.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TableCellLayout.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellLayout.types.js","sourceRoot":"../src/","sources":["components/TableCellLayout/TableCellLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TableCellLayoutSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Slot for an icon or other visual element\n   */\n  media: Slot<'span'>;\n\n  /**\n   * Main text for the table cell. Children of the root slot are automatically rendered here\n   */\n  main: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description: Slot<'span'>;\n\n  /**\n   * A layout wrapper for the main and description slots\n   */\n  wrapper: Slot<'div'>;\n};\n\n/**\n * TableCellLayout Props\n */\nexport type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {\n  appearance?: 'primary';\n};\n\n/**\n * State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> & Pick<TableCellLayoutProps, 'appearance'>;\n"]}

package/lib/components/TableCellLayout/index.js

@@ -0,0 +1,6 @@
+export * from './TableCellLayout';
+export * from './TableCellLayout.types';
+export * from './renderTableCellLayout';
+export * from './useTableCellLayout';
+export * from './useTableCellLayoutStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/TableCellLayout/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './TableCellLayout';\nexport * from './TableCellLayout.types';\nexport * from './renderTableCellLayout';\nexport * from './useTableCellLayout';\nexport * from './useTableCellLayoutStyles';\n"]}

package/lib/components/TableCellLayout/renderTableCellLayout.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TableCellLayout
+ */
+
+export const renderTableCellLayout_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, slots.media && /*#__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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TableCellLayout/renderTableCellLayout.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,EACG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADlB,EAEG,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,CAHJ,CADF;AAWD,CAdM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableCellLayoutState, TableCellLayoutSlots } from './TableCellLayout.types';\n\n/**\n * Render the final JSX of TableCellLayout\n */\nexport const renderTableCellLayout_unstable = (state: TableCellLayoutState) => {\n  const { slots, slotProps } = getSlots<TableCellLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.media && <slots.media {...slotProps.media} />}\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/"}

package/lib/components/TableCellLayout/useTableCellLayout.js

@@ -0,0 +1,36 @@
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render TableCellLayout.
+ *
+ * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,
+ * before being passed to renderTableCellLayout_unstable.
+ *
+ * @param props - props from this instance of TableCellLayout
+ * @param ref - reference to root HTMLElement of TableCellLayout
+ */
+
+export const useTableCellLayout_unstable = (props, ref) => {
+  return {
+    components: {
+      root: 'div',
+      main: 'span',
+      description: 'span',
+      wrapper: 'div',
+      media: 'span'
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
+    appearance: props.appearance,
+    main: resolveShorthand(props.main, {
+      required: true
+    }),
+    media: resolveShorthand(props.media),
+    description: resolveShorthand(props.description),
+    wrapper: resolveShorthand(props.wrapper, {
+      required: !!props.description || !!props.children
+    })
+  };
+};
+//# sourceMappingURL=useTableCellLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TableCellLayout/useTableCellLayout.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;EACxB,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;EAbpB,CAAP;AAeD,CAnBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';\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  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  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableCellLayout/useTableCellLayoutStyles.js

@@ -0,0 +1,74 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const tableCellLayoutClassNames = {
+  root: 'fui-TableCellLayout',
+  media: 'fui-TableCellLayout__media',
+  main: 'fui-TableCellLayout__main',
+  description: 'fui-TableCellLayout__description',
+  wrapper: 'fui-TableCellLayout__wrapper'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "mc9l5x": "f22iagw",
+    "Bt984gj": "f122n59",
+    "i8kkvl": "fsnqrgy",
+    "Belr9w4": "fylz90v",
+    "Bh6795r": "fqerorx",
+    "Bnnss6s": "f1neuvcm",
+    "xawz": "fkjuxzh"
+  },
+  "wrapper": {
+    "mc9l5x": "f22iagw",
+    "Beiy3e4": "f1vx9l62"
+  },
+  "media": {
+    "mc9l5x": "f22iagw",
+    "Bt984gj": "f122n59"
+  },
+  "mediaPrimary": {
+    "B5pe6w7": "fqgjdyf",
+    "p4uzdd": "fppfxz8"
+  },
+  "mainPrimary": {
+    "Bhrd7zp": "fl43uef"
+  },
+  "description": {
+    "Be2twd7": "fkhj508",
+    "sj55zd": "fkfq4zb"
+  }
+}, {
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fqgjdyf svg{width:28px;}", ".fppfxz8 svg{height:28px;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"]
+});
+/**
+ * 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) {
+    state.media.className = mergeClasses(tableCellLayoutClassNames.media, styles.media, 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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TableCellLayout/useTableCellLayoutStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,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;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAkCA;;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,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,yBAAyB,CAAC,KADQ,EAElC,MAAM,CAAC,KAF2B,EAGlC,OAAO,IAAI,MAAM,CAAC,YAHgB,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;EAMD;;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,CAnCM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {\n  root: 'fui-TableCellLayout',\n  media: 'fui-TableCellLayout__media',\n  main: 'fui-TableCellLayout__main',\n  description: 'fui-TableCellLayout__description',\n  wrapper: 'fui-TableCellLayout__wrapper',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    ...shorthands.flex(1, 1, '0px'),\n  },\n  wrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  media: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  mediaPrimary: {\n    '& svg': {\n      width: '28px',\n      height: '28px',\n    },\n  },\n\n  mainPrimary: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  description: {\n    fontSize: tokens.fontSizeBase300,\n    color: tokens.colorNeutralForeground2,\n  },\n});\n\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */\nexport const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, state.root.className);\n  const primary = state.appearance === 'primary';\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      tableCellLayoutClassNames.media,\n      styles.media,\n      primary && styles.mediaPrimary,\n      state.media.className,\n    );\n  }\n\n  if (state.main) {\n    state.main.className = mergeClasses(\n      tableCellLayoutClassNames.main,\n      primary && styles.mainPrimary,\n      state.main.className,\n    );\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      tableCellLayoutClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.wrapper) {\n    state.wrapper.className = mergeClasses(tableCellLayoutClassNames.wrapper, styles.wrapper, state.wrapper.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableHeader/useTableHeader.js

@@ -14,8 +14,10 @@ import { useTableContext } from '../../contexts/tableContext';
 export const useTableHeader_unstable = (props, ref) => {
   var _a;
 
-  const noNativeElements = useTableContext(ctx => ctx.noNativeElements);
-  const sortable = useTableContext(ctx => ctx.sortable);
+  const {
+    noNativeElements,
+    sortable
+  } = useTableContext();
   const keyboardNavAttr = useArrowNavigationGroup({
     axis: 'horizontal',
     circular: true

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

@@ -1 +1 @@
-{"version":3,"sources":["components/TableHeader/useTableHeader.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;;;EAChH,MAAM,gBAAgB,GAAG,eAAe,CAAC,GAAG,IAAI,GAAG,CAAC,gBAAZ,CAAxC;EACA,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,IAAI,GAAG,CAAC,QAAZ,CAAhC;EACA,MAAM,eAAe,GAAG,uBAAuB,CAAC;IAAE,IAAI,EAAE,YAAR;IAAsB,QAAQ,EAAE;EAAhC,CAAD,CAA/C;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,IAAI,QAAQ,IAAI,eAAhB,CAHyC;MAIzC,GAAG;IAJsC,CAAhB;EAJtB,CAAP;AAWD,CAjBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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(ctx => ctx.noNativeElements);\n  const sortable = useTableContext(ctx => ctx.sortable);\n  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'horizontal', circular: true });\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      ...(sortable && keyboardNavAttr),\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableHeader/useTableHeader.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;;;EAChH,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAAiC,eAAe,EAAtD;EACA,MAAM,eAAe,GAAG,uBAAuB,CAAC;IAAE,IAAI,EAAE,YAAR;IAAsB,QAAQ,EAAE;EAAhC,CAAD,CAA/C;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,IAAI,QAAQ,IAAI,eAAhB,CAHyC;MAIzC,GAAG;IAJsC,CAAhB;EAJtB,CAAP;AAWD,CAhBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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, sortable } = useTableContext();\n  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'horizontal', circular: true });\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      ...(sortable && keyboardNavAttr),\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableHeader/useTableHeaderStyles.js

@@ -1,14 +1,24 @@
-import { mergeClasses } from '@griffel/react';
+import { mergeClasses, __styles } from '@griffel/react';
 export const tableHeaderClassName = 'fui-TableHeader';
 export const tableHeaderClassNames = {
   root: 'fui-TableHeader'
 };
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "mc9l5x": "f1tp1avn"
+  }
+}, {
+  "d": [".f1tp1avn{display:table-row-group;}"]
+});
 /**
  * Apply styling to the TableHeader slots based on the state
  */
 
+
 export const useTableHeaderStyles_unstable = state => {
-  state.root.className = mergeClasses(tableHeaderClassName, state.root.className);
+  const styles = useStyles();
+  state.root.className = mergeClasses(tableHeaderClassName, styles.root, state.root.className);
   return state;
 };
 //# sourceMappingURL=useTableHeaderStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/TableHeader/useTableHeaderStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AAIA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AACP,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE;AAD+D,CAAhE;AAIP;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,KAAK,CAAC,IAAN,CAAW,SAAlC,CAAnC;EAEA,OAAO,KAAP;AACD,CAJM","sourcesContent":["import { mergeClasses } 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\n/**\n * Apply styling to the TableHeader slots based on the state\n */\nexport const useTableHeaderStyles_unstable = (state: TableHeaderState): TableHeaderState => {\n  state.root.className = mergeClasses(tableHeaderClassName, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["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,SAAS,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAMA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;EAEA,OAAO,KAAP;AACD,CALM","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 useStyles = 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 styles = useStyles();\n  state.root.className = mergeClasses(tableHeaderClassName, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableHeaderCell/useTableHeaderCell.js

@@ -20,8 +20,10 @@ const sortIcons = {
 export const useTableHeaderCell_unstable = (props, ref) => {
   var _a;
 
-  const noNativeElements = useTableContext(ctx => ctx.noNativeElements);
-  const sortable = useTableContext(ctx => ctx.sortable);
+  const {
+    noNativeElements,
+    sortable
+  } = useTableContext();
   const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'th';
   return {
     components: {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;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,IAAf,CADK;EAEhB,UAAU,eAAE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB,IAAjB;AAFI,CAAlB;AAKA;;;;;;;;AAQG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;;;EACxB,MAAM,gBAAgB,GAAG,eAAe,CAAC,GAAG,IAAI,GAAG,CAAC,gBAAZ,CAAxC;EACA,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,IAAI,GAAG,CAAC,QAAZ,CAAhC;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,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,cAA1B,GAA2C,SAFR;MAGzC,aAAa,KAAK,CAAC,aAHsB;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;EA5BK,CAAP;AA8BD,CAtCM","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 = useTableContext(ctx => ctx.noNativeElements);\n  const sortable = useTableContext(ctx => ctx.sortable);\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  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;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,IAAf,CADK;EAEhB,UAAU,eAAE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB,IAAjB;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,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,cAA1B,GAA2C,SAFR;MAGzC,aAAa,KAAK,CAAC,aAHsB;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;EA5BK,CAAP;AA8BD,CArCM","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  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js

@@ -12,18 +12,15 @@ export const tableHeaderCellClassNames = {
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
-    "sshi5w": "f5pgtk9",
+    "mc9l5x": "f15pt5es",
+    "ha4doy": "fmrv4ls",
     "z8tnut": "f1nbblvp",
     "z189sj": ["f1vdfbxk", "f1f5gg8d"],
     "Byoj8tv": "f1ov4xf1",
-    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "Bh6795r": "fqerorx",
-    "Bnnss6s": "f1neuvcm",
-    "xawz": "fkjuxzh"
+    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
   },
   "resetButton": {
+    "B3rzk8w": "fq6nmtn",
     "B7ck84d": "f1e4lqlz",
     "De3pzq": "f1u2r49w",
     "sj55zd": "f1ym3bx4",
@@ -44,12 +41,17 @@ const useStyles = /*#__PURE__*/__styles({
     "fsow6f": "fgusgyc"
   },
   "button": {
+    "qhf8xq": "f10pi13n",
+    "a9b677": "fly5x3f",
     "mc9l5x": "f22iagw",
     "Bh6795r": "fqerorx",
     "Bqenvij": "f1l02sjl",
     "Bt984gj": "f122n59",
     "i8kkvl": "fsnqrgy",
-    "Belr9w4": "fylz90v"
+    "Belr9w4": "fylz90v",
+    "sshi5w": "f5pgtk9",
+    "Bnnss6s": "f1neuvcm",
+    "xawz": "fkjuxzh"
   },
   "sortable": {
     "Bceei9c": "f1k6fduh"
@@ -59,7 +61,7 @@ const useStyles = /*#__PURE__*/__styles({
     "Bt984gj": "f122n59"
   }
 }, {
-  "d": [".f5pgtk9{min-height:44px;}", ".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".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;}", ".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;}", ".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;}", ".f1l02sjl{height:100%;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".f1k6fduh{cursor:pointer;}"]
+  "d": [".f15pt5es{display:table-cell;}", ".fmrv4ls{vertical-align:middle;}", ".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;}"]
 });
 /**
  * Apply styling to the TableHeaderCell slots based on the state

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

@@ -1 +1 @@
-{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,wBAAwB,GAAG,qBAAjC;AACP,OAAO,MAAM,yBAAyB,GAAyC;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAxE;AAMP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;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;EAAA;EAAA;IAAA;EAAA;EAAA;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,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,yBAAyB,CAAC,MADS,EAEnC,MAAM,CAAC,WAF4B,EAGnC,MAAM,CAAC,MAH4B,EAInC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJU,EAKnC,KAAK,CAAC,MAAN,CAAa,SALsB,CAArC;;EAQA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,yBAAyB,CAAC,QADW,EAErC,MAAM,CAAC,QAF8B,EAGrC,KAAK,CAAC,QAAN,CAAe,SAHsB,CAAvC;EAKD;;EAED,OAAO,KAAP;AACD,CApBM","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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    minHeight: '44px',\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.flex(1, 1, '0px'),\n  },\n\n  resetButton: {\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    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\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  state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.root.className);\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,wBAAwB,GAAG,qBAAjC;AACP,OAAO,MAAM,yBAAyB,GAAyC;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAxE;AAMP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;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;AAAA,EAAlB;AA0CA;;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,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,yBAAyB,CAAC,MADS,EAEnC,MAAM,CAAC,WAF4B,EAGnC,MAAM,CAAC,MAH4B,EAInC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJU,EAKnC,KAAK,CAAC,MAAN,CAAa,SALsB,CAArC;;EAQA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,yBAAyB,CAAC,QADW,EAErC,MAAM,CAAC,QAF8B,EAGrC,KAAK,CAAC,QAAN,CAAe,SAHsB,CAAvC;EAKD;;EAED,OAAO,KAAP;AACD,CApBM","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\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\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  state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.root.className);\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/"}