@fluentui/react-table 9.0.0-rc.4 → 9.0.0

package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js

@@ -19,6 +19,8 @@ export const useDataGridHeaderCell_unstable = (props, ref) => {
   } = useTableContext();
   const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);
   const sortDirection = useDataGridContext_unstable(ctx => sortable ? ctx.sort.getSortDirection(columnId) : undefined);
+  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);
+  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);
   const onClick = useEventCallback(e => {
     var _a;
     if (sortable) {
@@ -30,6 +32,7 @@ export const useDataGridHeaderCell_unstable = (props, ref) => {
     sortDirection,
     as: 'div',
     tabIndex: sortable ? undefined : 0,
+    ...(resizableColumns ? columnSizing.getTableHeaderCellProps(columnId) : {}),
     ...props,
     onClick
   }, ref);

package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SAASA,gBAAgB,QAAQ,2BAA2B;AAE5D,SAASC,2BAA2B,QAAQ,uCAAuC;AACnF,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,kBAAkB,QAAQ,gCAAgC;AACnE,SAASC,eAAe,QAAQ,6BAA6B;AAE7D;;;;;;;;;AASA,OAAO,MAAMC,8BAA8B,GAAG,CAC5CC,KAA8B,EAC9BC,GAA2B,KACA;EAC3B,MAAMC,QAAQ,GAAGL,kBAAkB,EAAE;EACrC,MAAM;IAAEM;EAAQ,CAAE,GAAGL,eAAe,EAAE;EACtC,MAAMM,gBAAgB,GAAGR,2BAA2B,CAACS,GAAG,IAAIA,GAAG,CAACC,IAAI,CAACF,gBAAgB,CAAC;EACtF,MAAMG,aAAa,GAAGX,2BAA2B,CAACS,GAAG,IACnDF,QAAQ,GAAGE,GAAG,CAACC,IAAI,CAACE,gBAAgB,CAACN,QAAQ,CAAC,GAAGO,SAAS,CAC3D;EACD,MAAMC,OAAO,GAAGhB,gBAAgB,CAAEiB,CAA+C,IAAI;;IACnF,IAAIR,QAAQ,EAAE;MACZC,gBAAgB,CAACO,CAAC,EAAET,QAAQ,CAAC;;IAE/B,WAAK,CAACQ,OAAO,+CAAbV,KAAK,EAAWW,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOhB,2BAA2B,CAChC;IAAEY,aAAa;IAAEK,EAAE,EAAE,KAAK;IAAEC,QAAQ,EAAEV,QAAQ,GAAGM,SAAS,GAAG,CAAC;IAAE,GAAGT,KAAK;IAAEU;EAAO,CAAE,EACnFT,GAAG,CACJ;AACH,CAAC","names":["useEventCallback","useTableHeaderCell_unstable","useDataGridContext_unstable","useColumnIdContext","useTableContext","useDataGridHeaderCell_unstable","props","ref","columnId","sortable","toggleColumnSort","ctx","sort","sortDirection","getSortDirection","undefined","onClick","e","as","tabIndex"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render DataGridHeaderCell.\n *\n * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n *\n * @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */\nexport const useDataGridHeaderCell_unstable = (\n  props: DataGridHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridHeaderCellState => {\n  const columnId = useColumnIdContext();\n  const { sortable } = useTableContext();\n  const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n  const sortDirection = useDataGridContext_unstable(ctx =>\n    sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n  );\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableHeaderCellElement>) => {\n    if (sortable) {\n      toggleColumnSort(e, columnId);\n    }\n    props.onClick?.(e);\n  });\n\n  return useTableHeaderCell_unstable(\n    { sortDirection, as: 'div', tabIndex: sortable ? undefined : 0, ...props, onClick },\n    ref,\n  );\n};\n"]}
+{"version":3,"mappings":"AACA,SAASA,gBAAgB,QAAQ,2BAA2B;AAE5D,SAASC,2BAA2B,QAAQ,uCAAuC;AACnF,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,kBAAkB,QAAQ,gCAAgC;AACnE,SAASC,eAAe,QAAQ,6BAA6B;AAE7D;;;;;;;;;AASA,OAAO,MAAMC,8BAA8B,GAAG,CAC5CC,KAA8B,EAC9BC,GAA2B,KACA;EAC3B,MAAMC,QAAQ,GAAGL,kBAAkB,EAAE;EACrC,MAAM;IAAEM;EAAQ,CAAE,GAAGL,eAAe,EAAE;EACtC,MAAMM,gBAAgB,GAAGR,2BAA2B,CAACS,GAAG,IAAIA,GAAG,CAACC,IAAI,CAACF,gBAAgB,CAAC;EACtF,MAAMG,aAAa,GAAGX,2BAA2B,CAACS,GAAG,IACnDF,QAAQ,GAAGE,GAAG,CAACC,IAAI,CAACE,gBAAgB,CAACN,QAAQ,CAAC,GAAGO,SAAS,CAC3D;EAED,MAAMC,gBAAgB,GAAGd,2BAA2B,CAACS,GAAG,IAAIA,GAAG,CAACK,gBAAgB,CAAC;EACjF,MAAMC,YAAY,GAAGf,2BAA2B,CAACS,GAAG,IAAIA,GAAG,CAACO,qBAAqB,CAAC;EAElF,MAAMC,OAAO,GAAGnB,gBAAgB,CAAEoB,CAA+C,IAAI;;IACnF,IAAIX,QAAQ,EAAE;MACZC,gBAAgB,CAACU,CAAC,EAAEZ,QAAQ,CAAC;;IAE/B,WAAK,CAACW,OAAO,+CAAbb,KAAK,EAAWc,CAAC,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOnB,2BAA2B,CAChC;IACEY,aAAa;IACbQ,EAAE,EAAE,KAAK;IACTC,QAAQ,EAAEb,QAAQ,GAAGM,SAAS,GAAG,CAAC;IAClC,IAAIC,gBAAgB,GAAGC,YAAY,CAACM,uBAAuB,CAACf,QAAQ,CAAC,GAAG,EAAE,CAAC;IAC3E,GAAGF,KAAK;IACRa;GACD,EACDZ,GAAG,CACJ;AACH,CAAC","names":["useEventCallback","useTableHeaderCell_unstable","useDataGridContext_unstable","useColumnIdContext","useTableContext","useDataGridHeaderCell_unstable","props","ref","columnId","sortable","toggleColumnSort","ctx","sort","sortDirection","getSortDirection","undefined","resizableColumns","columnSizing","columnSizing_unstable","onClick","e","as","tabIndex","getTableHeaderCellProps"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render DataGridHeaderCell.\n *\n * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n *\n * @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */\nexport const useDataGridHeaderCell_unstable = (\n  props: DataGridHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridHeaderCellState => {\n  const columnId = useColumnIdContext();\n  const { sortable } = useTableContext();\n  const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n  const sortDirection = useDataGridContext_unstable(ctx =>\n    sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n  );\n\n  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableHeaderCellElement>) => {\n    if (sortable) {\n      toggleColumnSort(e, columnId);\n    }\n    props.onClick?.(e);\n  });\n\n  return useTableHeaderCell_unstable(\n    {\n      sortDirection,\n      as: 'div',\n      tabIndex: sortable ? undefined : 0,\n      ...(resizableColumns ? columnSizing.getTableHeaderCellProps(columnId) : {}),\n      ...props,\n      onClick,\n    },\n    ref,\n  );\n};\n"]}

package/lib/components/DataGridHeaderCell/useDataGridHeaderCellStyles.js

@@ -3,7 +3,8 @@ import { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHe
 export const dataGridHeaderCellClassNames = {
   root: 'fui-DataGridHeaderCell',
   button: 'fui-DataGridHeaderCell__button',
-  sortIcon: 'fui-DataGridHeaderCell__sortIcon'
+  sortIcon: 'fui-DataGridHeaderCell__sortIcon',
+  aside: 'fui-DataGridHeaderCell__aside'
 };
 /**
  * Apply styling to the DataGridHeaderCell slots based on the state
@@ -17,6 +18,9 @@ export const useDataGridHeaderCellStyles_unstable = state => {
   if (state.sortIcon) {
     state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);
   }
+  if (state.aside) {
+    state.aside.className = mergeClasses(dataGridHeaderCellClassNames.aside, state.aside.className);
+  }
   return state;
 };
 //# sourceMappingURL=useDataGridHeaderCellStyles.js.map

package/lib/components/DataGridHeaderCell/useDataGridHeaderCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAG7C,SAASC,iCAAiC,QAAQ,6CAA6C;AAE/F,OAAO,MAAMC,4BAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,MAAM,EAAE,gCAAgC;EACxCC,QAAQ,EAAE;CACX;AAED;;;AAGA,OAAO,MAAMC,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9GN,iCAAiC,CAACM,KAAK,CAAC;EACxCA,KAAK,CAACJ,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,4BAA4B,CAACC,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACK,SAAS,CAAC;EAE5F,IAAID,KAAK,CAACH,MAAM,EAAE;IAChBG,KAAK,CAACH,MAAM,CAACI,SAAS,GAAGR,YAAY,CAACE,4BAA4B,CAACE,MAAM,EAAEG,KAAK,CAACH,MAAM,CAACI,SAAS,CAAC;;EAGpG,IAAID,KAAK,CAACF,QAAQ,EAAE;IAClBE,KAAK,CAACF,QAAQ,CAACG,SAAS,GAAGR,YAAY,CAACE,4BAA4B,CAACG,QAAQ,EAAEE,KAAK,CAACF,QAAQ,CAACG,SAAS,CAAC;;EAG1G,OAAOD,KAAK;AACd,CAAC","names":["mergeClasses","useTableHeaderCellStyles_unstable","dataGridHeaderCellClassNames","root","button","sortIcon","useDataGridHeaderCellStyles_unstable","state","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles';\n\nexport const dataGridHeaderCellClassNames: SlotClassNames<DataGridHeaderCellSlots> = {\n  root: 'fui-DataGridHeaderCell',\n  button: 'fui-DataGridHeaderCell__button',\n  sortIcon: 'fui-DataGridHeaderCell__sortIcon',\n};\n\n/**\n * Apply styling to the DataGridHeaderCell slots based on the state\n */\nexport const useDataGridHeaderCellStyles_unstable = (state: DataGridHeaderCellState): DataGridHeaderCellState => {\n  useTableHeaderCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className);\n\n  if (state.button) {\n    state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className);\n  }\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAG7C,SAASC,iCAAiC,QAAQ,6CAA6C;AAE/F,OAAO,MAAMC,4BAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,MAAM,EAAE,gCAAgC;EACxCC,QAAQ,EAAE,kCAAkC;EAC5CC,KAAK,EAAE;CACR;AAED;;;AAGA,OAAO,MAAMC,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9GP,iCAAiC,CAACO,KAAK,CAAC;EACxCA,KAAK,CAACL,IAAI,CAACM,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACC,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACM,SAAS,CAAC;EAE5F,IAAID,KAAK,CAACJ,MAAM,EAAE;IAChBI,KAAK,CAACJ,MAAM,CAACK,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACE,MAAM,EAAEI,KAAK,CAACJ,MAAM,CAACK,SAAS,CAAC;;EAGpG,IAAID,KAAK,CAACH,QAAQ,EAAE;IAClBG,KAAK,CAACH,QAAQ,CAACI,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACG,QAAQ,EAAEG,KAAK,CAACH,QAAQ,CAACI,SAAS,CAAC;;EAG1G,IAAID,KAAK,CAACF,KAAK,EAAE;IACfE,KAAK,CAACF,KAAK,CAACG,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACI,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACG,SAAS,CAAC;;EAGjG,OAAOD,KAAK;AACd,CAAC","names":["mergeClasses","useTableHeaderCellStyles_unstable","dataGridHeaderCellClassNames","root","button","sortIcon","aside","useDataGridHeaderCellStyles_unstable","state","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles';\n\nexport const dataGridHeaderCellClassNames: SlotClassNames<DataGridHeaderCellSlots> = {\n  root: 'fui-DataGridHeaderCell',\n  button: 'fui-DataGridHeaderCell__button',\n  sortIcon: 'fui-DataGridHeaderCell__sortIcon',\n  aside: 'fui-DataGridHeaderCell__aside',\n};\n\n/**\n * Apply styling to the DataGridHeaderCell slots based on the state\n */\nexport const useDataGridHeaderCellStyles_unstable = (state: DataGridHeaderCellState): DataGridHeaderCellState => {\n  useTableHeaderCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className);\n\n  if (state.button) {\n    state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className);\n  }\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);\n  }\n\n  if (state.aside) {\n    state.aside.className = mergeClasses(dataGridHeaderCellClassNames.aside, state.aside.className);\n  }\n\n  return state;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TableCellLayout.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSize } from '@fluentui/react-avatar';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellLayoutContextValues = {\n  avatar: {\n    size?: AvatarSize;\n  };\n};\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  content: Slot<'div'>;\n};\n\n/**\n * TableCellLayout Props\n */\nexport type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {\n  /**\n   * Renders design variants of the table cell\n   * @default undefined\n   */\n  appearance?: 'primary';\n};\n\n/**\n * State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &\n  Pick<TableCellLayoutProps, 'appearance'> & { avatarSize: AvatarSize | undefined } & Pick<TableContextValue, 'size'>;\n"]}
+{"version":3,"file":"TableCellLayout.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSize } from '@fluentui/react-avatar';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellLayoutContextValues = {\n  avatar: {\n    size?: AvatarSize;\n  };\n};\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  content: Slot<'div'>;\n};\n\n/**\n * TableCellLayout Props\n */\nexport type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {\n  /**\n   * Renders design variants of the table cell\n   * @default undefined\n   */\n  appearance?: 'primary';\n\n  /**\n   * Renders content with overflow: hidden and text-overflow: ellipsis\n   */\n  truncate?: boolean;\n};\n\n/**\n * State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &\n  Pick<TableCellLayoutProps, 'appearance' | 'truncate'> & { avatarSize: AvatarSize | undefined } & Pick<\n    TableContextValue,\n    'size'\n  >;\n"]}

package/lib/components/TableCellLayout/useTableCellLayout.js

@@ -31,6 +31,7 @@ export const useTableCellLayout_unstable = (props, ref) => {
       ...props
     }),
     appearance: props.appearance,
+    truncate: props.truncate,
     main: resolveShorthand(props.main, {
       required: true
     }),

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

@@ -1 +1 @@
-{"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","content","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      content: '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    content: resolveShorthand(props.content, { required: !!props.description || !!props.children }),\n    avatarSize: tableAvatarSizeMap[size],\n    size,\n  };\n};\n"]}
+{"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;IAC5BC,QAAQ,EAAEV,KAAK,CAACU,QAAQ;IACxBL,IAAI,EAAEX,gBAAgB,CAACM,KAAK,CAACK,IAAI,EAAE;MAAEM,QAAQ,EAAE;IAAI,CAAE,CAAC;IACtDH,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;MAAEI,QAAQ,EAAE,CAAC,CAACX,KAAK,CAACM,WAAW,IAAI,CAAC,CAACN,KAAK,CAACY;IAAQ,CAAE,CAAC;IAC/FC,UAAU,EAAEjB,kBAAkB,CAACM,IAAI,CAAC;IACpCA;GACD;AACH,CAAC","names":["getNativeElementProps","resolveShorthand","useTableContext","tableAvatarSizeMap","medium","small","useTableCellLayout_unstable","props","ref","size","components","root","main","description","content","media","appearance","truncate","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      content: 'div',\n      media: 'span',\n    },\n    root: getNativeElementProps('div', { ref, ...props }),\n    appearance: props.appearance,\n    truncate: props.truncate,\n    main: resolveShorthand(props.main, { required: true }),\n    media: resolveShorthand(props.media),\n    description: resolveShorthand(props.description),\n    content: resolveShorthand(props.content, { required: !!props.description || !!props.children }),\n    avatarSize: tableAvatarSizeMap[size],\n    size,\n  };\n};\n"]}

package/lib/components/TableCellLayout/useTableCellLayoutStyles.js

@@ -21,10 +21,16 @@ const useStyles = /*#__PURE__*/__styles({
     Bnnss6s: "f1neuvcm",
     xawz: "fkjuxzh"
   },
+  rootTruncate: {
+    B68tc82: "f1p9o1ba"
+  },
   content: {
     mc9l5x: "f22iagw",
     Beiy3e4: "f1vx9l62"
   },
+  contentTruncate: {
+    B68tc82: "f1p9o1ba"
+  },
   media: {
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59"
@@ -41,6 +47,11 @@ const useStyles = /*#__PURE__*/__styles({
   mainPrimary: {
     Bhrd7zp: "fl43uef"
   },
+  mainTruncate: {
+    B68tc82: "f1p9o1ba",
+    Huce71: "fz5stix",
+    ygn44y: "f1cmbuwj"
+  },
   description: {
     sj55zd: "fkfq4zb",
     Bahqtrf: "fk6fouc",
@@ -49,14 +60,17 @@ const useStyles = /*#__PURE__*/__styles({
     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;}", ".f1p9o1ba{overflow-x:hidden;}", ".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);}", ".fz5stix{white-space:nowrap;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".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 {
+    truncate
+  } = state;
+  state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, truncate && styles.rootTruncate, state.root.className);
   const primary = state.appearance === 'primary';
   if (state.media) {
     const mediaSizedStyles = {
@@ -67,13 +81,13 @@ 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);
+    state.main.className = mergeClasses(tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);
   }
   if (state.description) {
     state.description.className = mergeClasses(tableCellLayoutClassNames.description, styles.description, state.description.className);
   }
   if (state.content) {
-    state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, state.content.className);
+    state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);
   }
   return state;
 };

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

@@ -1 +1 @@
-{"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","content","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  content: 'fui-TableCellLayout__content',\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  content: {\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.content) {\n    state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, state.content.className);\n  }\n\n  return state;\n};\n"]}
+{"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;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAoDhB;AAEF;;;AAGA,OAAO,MAAMC,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAM;IAAEI;EAAQ,CAAE,GAAGF,KAAK;EAE1BA,KAAK,CAACP,IAAI,CAACU,SAAS,GAAGf,YAAY,CACjCI,yBAAyB,CAACC,IAAI,EAC9BQ,MAAM,CAACR,IAAI,EACXS,QAAQ,IAAID,MAAM,CAACG,YAAY,EAC/BJ,KAAK,CAACP,IAAI,CAACU,SAAS,CACrB;EACD,MAAME,OAAO,GAAGL,KAAK,CAACM,UAAU,KAAK,SAAS;EAE9C,IAAIN,KAAK,CAACN,KAAK,EAAE;IACf,MAAMa,gBAAgB,GAAG;MACvBC,KAAK,EAAEP,MAAM,CAACQ,mBAAmB;MACjCC,MAAM,EAAET,MAAM,CAACQ,mBAAmB;MAClC,aAAa,EAAER,MAAM,CAACU;KACvB;IAEDX,KAAK,CAACN,KAAK,CAACS,SAAS,GAAGf,YAAY,CAClCI,yBAAyB,CAACE,KAAK,EAC/BO,MAAM,CAACP,KAAK,EACZa,gBAAgB,CAACP,KAAK,CAACY,IAAI,CAAC,EAC5BP,OAAO,IAAIJ,MAAM,CAACY,YAAY,EAC9Bb,KAAK,CAACN,KAAK,CAACS,SAAS,CACtB;;EAGH,IAAIH,KAAK,CAACL,IAAI,EAAE;IACdK,KAAK,CAACL,IAAI,CAACQ,SAAS,GAAGf,YAAY,CACjCI,yBAAyB,CAACG,IAAI,EAC9BO,QAAQ,IAAID,MAAM,CAACa,YAAY,EAC/BT,OAAO,IAAIJ,MAAM,CAACc,WAAW,EAC7Bf,KAAK,CAACL,IAAI,CAACQ,SAAS,CACrB;;EAGH,IAAIH,KAAK,CAACJ,WAAW,EAAE;IACrBI,KAAK,CAACJ,WAAW,CAACO,SAAS,GAAGf,YAAY,CACxCI,yBAAyB,CAACI,WAAW,EACrCK,MAAM,CAACL,WAAW,EAClBI,KAAK,CAACJ,WAAW,CAACO,SAAS,CAC5B;;EAGH,IAAIH,KAAK,CAACH,OAAO,EAAE;IACjBG,KAAK,CAACH,OAAO,CAACM,SAAS,GAAGf,YAAY,CACpCI,yBAAyB,CAACK,OAAO,EACjCI,MAAM,CAACJ,OAAO,EACdK,QAAQ,IAAID,MAAM,CAACe,eAAe,EAClChB,KAAK,CAACH,OAAO,CAACM,SAAS,CACxB;;EAGH,OAAOH,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","typographyStyles","tableCellLayoutClassNames","root","media","main","description","content","useStyles","useTableCellLayoutStyles_unstable","state","styles","truncate","className","rootTruncate","primary","appearance","mediaSizedStyles","small","mediaSmallAndMedium","medium","mediaExtraSmall","size","mediaPrimary","mainTruncate","mainPrimary","contentTruncate"],"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  content: 'fui-TableCellLayout__content',\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\n  rootTruncate: {\n    overflowX: 'hidden',\n  },\n\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  contentTruncate: {\n    overflowX: 'hidden',\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  mainTruncate: {\n    overflowX: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\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  const { truncate } = state;\n\n  state.root.className = mergeClasses(\n    tableCellLayoutClassNames.root,\n    styles.root,\n    truncate && styles.rootTruncate,\n    state.root.className,\n  );\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      truncate && styles.mainTruncate,\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.content) {\n    state.content.className = mergeClasses(\n      tableCellLayoutClassNames.content,\n      styles.content,\n      truncate && styles.contentTruncate,\n      state.content.className,\n    );\n  }\n\n  return state;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { SortDirection, TableContextValue } from '../Table/Table.types';\n\nexport type TableHeaderCellSlots = {\n  root: Slot<'th', 'div'>;\n\n  sortIcon: Slot<'span'>;\n\n  /**\n   * Button handles correct narration and interactions for sorting;\n   */\n  button: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * TableHeaderCell Props\n */\nexport type TableHeaderCellProps = ComponentProps<Partial<TableHeaderCellSlots>> & {\n  /**\n   * @default undefined\n   */\n  sortDirection?: SortDirection;\n};\n\n/**\n * State used in rendering TableHeaderCell\n */\nexport type TableHeaderCellState = ComponentState<TableHeaderCellSlots> &\n  Pick<TableContextValue, 'noNativeElements' | 'sortable'>;\n"]}
+{"version":3,"file":"TableHeaderCell.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { SortDirection, TableContextValue } from '../Table/Table.types';\n\nexport type TableHeaderCellSlots = {\n  root: Slot<'th', 'div'>;\n\n  sortIcon: Slot<'span'>;\n\n  /**\n   * Button handles correct narration and interactions for sorting;\n   */\n  button: NonNullable<Slot<ARIAButtonSlotProps>>;\n  /**\n   * aside content for anything that should be after main content of the table header cell\n   */\n  aside: Slot<'span'>;\n};\n\n/**\n * TableHeaderCell Props\n */\nexport type TableHeaderCellProps = ComponentProps<Partial<TableHeaderCellSlots>> & {\n  /**\n   * @default undefined\n   */\n  sortDirection?: SortDirection;\n};\n\n/**\n * State used in rendering TableHeaderCell\n */\nexport type TableHeaderCellState = ComponentState<TableHeaderCellSlots> &\n  Pick<TableContextValue, 'noNativeElements' | 'sortable'>;\n"]}

package/lib/components/TableHeaderCell/renderTableHeaderCell.js

@@ -14,6 +14,8 @@ export const renderTableHeaderCell_unstable = state => {
     ...slotProps.button
   }, slotProps.root.children, slots.sortIcon && /*#__PURE__*/React.createElement(slots.sortIcon, {
     ...slotProps.sortIcon
-  })));
+  })), slots.aside && /*#__PURE__*/React.createElement(slots.aside, {
+    ...slotProps.aside
+  }));
 };
 //# sourceMappingURL=renderTableHeaderCell.js.map

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

@@ -1 +1 @@
-{"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"]}
+{"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,EACdL,KAAK,CAACM,KAAK,iBAAIV,oBAACI,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,CACzC;AAEjB,CAAC","names":["React","getSlots","renderTableHeaderCell_unstable","state","slots","slotProps","root","button","children","sortIcon","aside"],"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.aside && <slots.aside {...slotProps.aside} />}\n    </slots.root>\n  );\n};\n"]}

package/lib/components/TableHeaderCell/useTableHeaderCell.js

@@ -32,7 +32,8 @@ export const useTableHeaderCell_unstable = (props, ref) => {
     components: {
       root: rootComponent,
       button: 'button',
-      sortIcon: 'span'
+      sortIcon: 'span',
+      aside: 'span'
     },
     root: getNativeElementProps(rootComponent, {
       ref: useMergedRefs(ref, useFocusWithin()),
@@ -40,6 +41,7 @@ export const useTableHeaderCell_unstable = (props, ref) => {
       'aria-sort': sortable ? (_b = props.sortDirection) !== null && _b !== void 0 ? _b : 'none' : undefined,
       ...props
     }),
+    aside: resolveShorthand(props.aside),
     sortIcon: resolveShorthand(props.sortIcon, {
       required: !!props.sortDirection,
       defaultProps: {

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

@@ -1 +1 @@
-{"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"]}
+{"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,MAAM;MAChBC,KAAK,EAAE;KACR;IACDH,IAAI,EAAEpB,qBAAqB,CAACiB,aAAa,EAAE;MACzCH,GAAG,EAAEZ,aAAa,CAACY,GAAG,EAAEX,cAAc,EAAE,CAAC;MACzCqB,IAAI,EAAEP,aAAa,KAAK,KAAK,GAAG,cAAc,GAAGQ,SAAS;MAC1D,WAAW,EAAET,QAAQ,GAAG,WAAK,CAACU,aAAa,mCAAI,MAAM,GAAGD,SAAS;MACjE,GAAGZ;KACJ,CAAC;IACFU,KAAK,EAAEtB,gBAAgB,CAACY,KAAK,CAACU,KAAK,CAAC;IACpCD,QAAQ,EAAErB,gBAAgB,CAACY,KAAK,CAACS,QAAQ,EAAE;MACzCK,QAAQ,EAAE,CAAC,CAACd,KAAK,CAACa,aAAa;MAC/BE,YAAY,EAAE;QAAEC,QAAQ,EAAEhB,KAAK,CAACa,aAAa,GAAGlB,SAAS,CAACK,KAAK,CAACa,aAAa,CAAC,GAAGD;MAAS;KAC3F,CAAC;IACFJ,MAAM,EAAEd,sBAAsB,CAACM,KAAK,CAACQ,MAAM,EAAE;MAC3CM,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZJ,IAAI,EAAE,cAAc;QACpBM,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAE,QAAQ;QACd,IAAIf,QAAQ,IAAI;UACdQ,IAAI,EAAEC,SAAS;UACfK,QAAQ,EAAEL;SACX;;KAEJ,CAAC;IACFT,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","aside","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      aside: '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    aside: resolveShorthand(props.aside),\n    sortIcon: resolveShorthand(props.sortIcon, {\n      required: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n    }),\n    button: useARIAButtonShorthand(props.button, {\n      required: true,\n      defaultProps: {\n        role: 'presentation',\n        tabIndex: -1,\n        type: 'button',\n        ...(sortable && {\n          role: undefined,\n          tabIndex: undefined,\n        }),\n      },\n    }),\n    sortable,\n    noNativeElements,\n  };\n};\n"]}

package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js

@@ -5,7 +5,8 @@ export const tableHeaderCellClassName = 'fui-TableHeaderCell';
 export const tableHeaderCellClassNames = {
   root: 'fui-TableHeaderCell',
   button: 'fui-TableHeaderCell__button',
-  sortIcon: 'fui-TableHeaderCell__sortIcon'
+  sortIcon: 'fui-TableHeaderCell__sortIcon',
+  aside: 'fui-TableHeaderCell__aside'
 };
 const useTableLayoutStyles = /*#__PURE__*/__styles({
   root: {
@@ -41,7 +42,8 @@ const useStyles = /*#__PURE__*/__styles({
     pehzd3: ["fs9qmxf", "f187m4uq"],
     B8osjzx: ["f187m4uq", "fs9qmxf"],
     u7xebq: ["f145mzao", "f1uha7eq"],
-    Blsv9te: ["f1uha7eq", "f145mzao"]
+    Blsv9te: ["f1uha7eq", "f145mzao"],
+    qhf8xq: "f10pi13n"
   },
   rootInteractive: {
     Jwef8y: "f1t94bn6",
@@ -89,9 +91,10 @@ const useStyles = /*#__PURE__*/__styles({
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
     z8tnut: "fclwglc"
-  }
+  },
+  resizeHandle: {}
 }, {
-  d: [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}", ".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}", ".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}", ".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}", ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
+  d: [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}", ".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}", ".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}", ".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}", ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".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;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
   h: [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
   a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });
@@ -109,6 +112,9 @@ export const useTableHeaderCellStyles_unstable = state => {
   if (state.sortIcon) {
     state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
   }
+  if (state.aside) {
+    state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);
+  }
   return state;
 };
 //# sourceMappingURL=useTableHeaderCellStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,SAASC,+BAA+B,QAAQ,yBAAyB;AAGzE,OAAO,MAAMC,wBAAwB,GAAG,qBAAqB;AAC7D,OAAO,MAAMC,yBAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,MAAM,EAAE,6BAA6B;EACrCC,QAAQ,EAAE;CACX;AAED,MAAMC,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK3B;AAEF,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAM1B;AAEF;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAwDhB;AAEF;;;AAGA,OAAO,MAAMC,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAEP,oBAAoB,EAAE;IAC7BQ,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGlB,YAAY,CACjCK,yBAAyB,CAACC,IAAI,EAC9BQ,MAAM,CAACR,IAAI,EACXO,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACM,eAAe,EACxCP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,CAACX,IAAI,GAAGS,YAAY,CAACC,KAAK,CAACV,IAAI,EACzEO,KAAK,CAACP,IAAI,CAACY,SAAS,CACrB;EACDL,KAAK,CAACN,MAAM,CAACW,SAAS,GAAGlB,YAAY,CACnCK,yBAAyB,CAACE,MAAM,EAChCO,MAAM,CAACQ,WAAW,EAClBR,MAAM,CAACP,MAAM,EACbM,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACK,QAAQ,EACjCN,KAAK,CAACN,MAAM,CAACW,SAAS,CACvB;EAED,IAAIL,KAAK,CAACL,QAAQ,EAAE;IAClBK,KAAK,CAACL,QAAQ,CAACU,SAAS,GAAGlB,YAAY,CACrCK,yBAAyB,CAACG,QAAQ,EAClCM,MAAM,CAACN,QAAQ,EACfK,KAAK,CAACL,QAAQ,CAACU,SAAS,CACzB;;EAGH,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","useTableLayoutStyles","useFlexLayoutStyles","useStyles","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","sortable","rootInteractive","noNativeElements","resetButton"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus-within', enableOutline: true },\n    ),\n  },\n\n  rootInteractive: {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  resetButton: {\n    resize: 'horizontal',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n  button: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalXS),\n    minHeight: '32px',\n    ...shorthands.flex(1, 1, '0px'),\n    outlineStyle: 'none',\n  },\n  sortable: {\n    cursor: 'pointer',\n  },\n\n  sortIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderCellClassNames.root,\n    styles.root,\n    state.sortable && styles.rootInteractive,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,SAASC,+BAA+B,QAAQ,yBAAyB;AAGzE,OAAO,MAAMC,wBAAwB,GAAG,qBAAqB;AAC7D,OAAO,MAAMC,yBAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,MAAM,EAAE,6BAA6B;EACrCC,QAAQ,EAAE,+BAA+B;EACzCC,KAAK,EAAE;CACR;AAED,MAAMC,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK3B;AAEF,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAM1B;AAEF;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EA6DhB;AAEF;;;AAGA,OAAO,MAAMC,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAEP,oBAAoB,EAAE;IAC7BQ,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGnB,YAAY,CACjCK,yBAAyB,CAACC,IAAI,EAC9BS,MAAM,CAACT,IAAI,EACXQ,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACM,eAAe,EACxCP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,CAACZ,IAAI,GAAGU,YAAY,CAACC,KAAK,CAACX,IAAI,EACzEQ,KAAK,CAACR,IAAI,CAACa,SAAS,CACrB;EACDL,KAAK,CAACP,MAAM,CAACY,SAAS,GAAGnB,YAAY,CACnCK,yBAAyB,CAACE,MAAM,EAChCQ,MAAM,CAACQ,WAAW,EAClBR,MAAM,CAACR,MAAM,EACbO,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACK,QAAQ,EACjCN,KAAK,CAACP,MAAM,CAACY,SAAS,CACvB;EAED,IAAIL,KAAK,CAACN,QAAQ,EAAE;IAClBM,KAAK,CAACN,QAAQ,CAACW,SAAS,GAAGnB,YAAY,CACrCK,yBAAyB,CAACG,QAAQ,EAClCO,MAAM,CAACP,QAAQ,EACfM,KAAK,CAACN,QAAQ,CAACW,SAAS,CACzB;;EAGH,IAAIL,KAAK,CAACL,KAAK,EAAE;IACfK,KAAK,CAACL,KAAK,CAACU,SAAS,GAAGnB,YAAY,CAACK,yBAAyB,CAACI,KAAK,EAAEM,MAAM,CAACS,YAAY,EAAEV,KAAK,CAACL,KAAK,CAACU,SAAS,CAAC;;EAGnH,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","aside","useTableLayoutStyles","useFlexLayoutStyles","useStyles","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","sortable","rootInteractive","noNativeElements","resetButton","resizeHandle"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n  aside: 'fui-TableHeaderCell__aside',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus-within', enableOutline: true },\n    ),\n    position: 'relative',\n  },\n\n  rootInteractive: {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  resetButton: {\n    resize: 'horizontal',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n\n  button: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalXS),\n    minHeight: '32px',\n    ...shorthands.flex(1, 1, '0px'),\n    outlineStyle: 'none',\n  },\n\n  sortable: {\n    cursor: 'pointer',\n  },\n\n  sortIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n\n  resizeHandle: {},\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderCellClassNames.root,\n    styles.root,\n    state.sortable && styles.rootInteractive,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  if (state.aside) {\n    state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n  }\n\n  return state;\n};\n"]}

package/lib/components/TableResizeHandle/TableResizeHandle.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useTableResizeHandle_unstable } from './useTableResizeHandle';
+import { renderTableResizeHandle_unstable } from './renderTableResizeHandle';
+import { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles';
+/**
+ * TableResizeHandle component - TODO: add more docs
+ */
+export const TableResizeHandle = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTableResizeHandle_unstable(props, ref);
+  useTableResizeHandleStyles_unstable(state);
+  return renderTableResizeHandle_unstable(state);
+});
+TableResizeHandle.displayName = 'TableResizeHandle';
+//# sourceMappingURL=TableResizeHandle.js.map

package/lib/components/TableResizeHandle/TableResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,gCAAgC,QAAQ,2BAA2B;AAC5E,SAASC,mCAAmC,QAAQ,8BAA8B;AAIlF;;;AAGA,OAAO,MAAMC,iBAAiB,gBAAgDJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5G,MAAMC,KAAK,GAAGP,6BAA6B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEvDJ,mCAAmC,CAACK,KAAK,CAAC;EAC1C,OAAON,gCAAgC,CAACM,KAAK,CAAC;AAChD,CAAC,CAAC;AAEFJ,iBAAiB,CAACK,WAAW,GAAG,mBAAmB","names":["React","useTableResizeHandle_unstable","renderTableResizeHandle_unstable","useTableResizeHandleStyles_unstable","TableResizeHandle","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableResizeHandle_unstable } from './useTableResizeHandle';\nimport { renderTableResizeHandle_unstable } from './renderTableResizeHandle';\nimport { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles';\nimport type { TableResizeHandleProps } from './TableResizeHandle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableResizeHandle component - TODO: add more docs\n */\nexport const TableResizeHandle: ForwardRefComponent<TableResizeHandleProps> = React.forwardRef((props, ref) => {\n  const state = useTableResizeHandle_unstable(props, ref);\n\n  useTableResizeHandleStyles_unstable(state);\n  return renderTableResizeHandle_unstable(state);\n});\n\nTableResizeHandle.displayName = 'TableResizeHandle';\n"]}

package/lib/components/TableResizeHandle/TableResizeHandle.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableResizeHandle.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TableResizeHandleSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TableResizeHandle Props\n */\nexport type TableResizeHandleProps = ComponentProps<TableResizeHandleSlots> & {};\n\n/**\n * State used in rendering TableResizeHandle\n */\nexport type TableResizeHandleState = ComponentState<TableResizeHandleSlots>;\n"]}

package/lib/components/TableResizeHandle/index.js

@@ -0,0 +1,6 @@
+export * from './TableResizeHandle';
+export * from './TableResizeHandle.types';
+export * from './renderTableResizeHandle';
+export * from './useTableResizeHandle';
+export * from './useTableResizeHandleStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './TableResizeHandle';\nexport * from './TableResizeHandle.types';\nexport * from './renderTableResizeHandle';\nexport * from './useTableResizeHandle';\nexport * from './useTableResizeHandleStyles';\n"]}

package/lib/components/TableResizeHandle/renderTableResizeHandle.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TableResizeHandle
+ */
+export const renderTableResizeHandle_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  });
+};
+//# sourceMappingURL=renderTableResizeHandle.js.map

package/lib/components/TableResizeHandle/renderTableResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,gCAAgC,GAAIC,KAA6B,IAAI;EAChF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAyBE,KAAK,CAAC;EACpE,oBAAOH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,EAAI;AAC3C,CAAC","names":["React","getSlots","renderTableResizeHandle_unstable","state","slots","slotProps","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/renderTableResizeHandle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableResizeHandleState, TableResizeHandleSlots } from './TableResizeHandle.types';\n\n/**\n * Render the final JSX of TableResizeHandle\n */\nexport const renderTableResizeHandle_unstable = (state: TableResizeHandleState) => {\n  const { slots, slotProps } = getSlots<TableResizeHandleSlots>(state);\n  return <slots.root {...slotProps.root} />;\n};\n"]}

package/lib/components/TableResizeHandle/useTableResizeHandle.js

@@ -0,0 +1,28 @@
+import { getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render TableResizeHandle.
+ *
+ * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,
+ * before being passed to renderTableResizeHandle_unstable.
+ *
+ * @param props - props from this instance of TableResizeHandle
+ * @param ref - reference to root HTMLElement of TableResizeHandle
+ */
+export const useTableResizeHandle_unstable = (props, ref) => {
+  const onClick = useEventCallback(event => {
+    var _a;
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    event.stopPropagation();
+  });
+  return {
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      ...props,
+      onClick
+    })
+  };
+};
+//# sourceMappingURL=useTableResizeHandle.js.map

package/lib/components/TableResizeHandle/useTableResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAGnF;;;;;;;;;AASA,OAAO,MAAMC,6BAA6B,GAAG,CAC3CC,KAA6B,EAC7BC,GAA2B,KACD;EAC1B,MAAMC,OAAO,GAAGJ,gBAAgB,CAAEK,KAAuC,IAAI;;IAC3E,WAAK,CAACD,OAAO,+CAAbF,KAAK,EAAWG,KAAK,CAAC;IACtBA,KAAK,CAACC,eAAe,EAAE;EACzB,CAAC,CAAC;EACF,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAET,qBAAqB,CAAC,KAAK,EAAE;MACjCI,GAAG;MACH,GAAGD,KAAK;MACRE;KACD;GACF;AACH,CAAC","names":["getNativeElementProps","useEventCallback","useTableResizeHandle_unstable","props","ref","onClick","event","stopPropagation","components","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';\nimport type { TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle.types';\n\n/**\n * Create the state required to render TableResizeHandle.\n *\n * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,\n * before being passed to renderTableResizeHandle_unstable.\n *\n * @param props - props from this instance of TableResizeHandle\n * @param ref - reference to root HTMLElement of TableResizeHandle\n */\nexport const useTableResizeHandle_unstable = (\n  props: TableResizeHandleProps,\n  ref: React.Ref<HTMLElement>,\n): TableResizeHandleState => {\n  const onClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    props.onClick?.(event);\n    event.stopPropagation();\n  });\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n      onClick,\n    }),\n  };\n};\n"]}

package/lib/components/TableResizeHandle/useTableResizeHandleStyles.js

@@ -0,0 +1,49 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const tableResizeHandleClassNames = {
+  root: 'fui-TableResizeHandle'
+  // TODO: add class names for all slots on TableResizeHandleSlots.
+  // Should be of the form `<slotName>: 'fui-TableResizeHandle__<slotName>`
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    qhf8xq: "f1euv43f",
+    j35jbq: ["f1e31b4d", "f1vgc2s3"],
+    Bhzewxz: "f15twtuk",
+    B5kzvoi: "f1yab3r1",
+    a9b677: "fjw5fx7",
+    B6of3ja: "f1hu3pq6",
+    t21cq0: ["fn2i5td", "f1eybr6b"],
+    jrapky: "f19f4twv",
+    Frg6f3: ["f1eybr6b", "fn2i5td"],
+    Bceei9c: "fc3en1c",
+    abs64n: "fk73vx1",
+    Bmy1vo4: "f13u1uyl",
+    B3o57yi: "fezquic",
+    Bj3rh1h: "f19g0ac",
+    B7zu5sd: "f15pjodv",
+    Bs6t6z0: "ftgrb5f",
+    Fdvyjd: "f2df6js",
+    Biobvvw: "fshsryb",
+    Hdbjpj: "f11ef69",
+    jc51t6: ["f12lb1dx", "f13tbxeo"],
+    u6d25: "fu4ulse",
+    Bj55yzk: "fw2wsqs",
+    Bkbwdz4: "f1swzn7y"
+  }
+}, {
+  d: [".f1euv43f{position:absolute;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fjw5fx7{width:16px;}", ".f1hu3pq6{margin-top:0;}", ".fn2i5td{margin-right:-8px;}", ".f1eybr6b{margin-left:-8px;}", ".f19f4twv{margin-bottom:0;}", ".fc3en1c{cursor:col-resize;}", ".fk73vx1{opacity:0;}", ".f13u1uyl{transition-property:opacity;}", ".fezquic{transition-duration:.2s;}", ".f19g0ac{z-index:1;}", ".ftgrb5f:after{content:\" \";}", ".f2df6js:after{display:block;}", ".fshsryb:after{width:1px;}", ".f11ef69:after{position:absolute;}", ".f12lb1dx:after{left:50%;}", ".f13tbxeo:after{right:50%;}", ".fu4ulse:after{top:0;}", ".fw2wsqs:after{bottom:0;}", ".f1swzn7y:after{background-color:var(--colorNeutralStroke1);}"],
+  h: [".f15pjodv:hover{opacity:1;}"]
+});
+/**
+ * Apply styling to the TableResizeHandle slots based on the state
+ */
+export const useTableResizeHandleStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useTableResizeHandleStyles.js.map

package/lib/components/TableResizeHandle/useTableResizeHandleStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,OAAO,MAAMC,2BAA2B,GAA2C;EACjFC,IAAI,EAAE;EACN;EACA;CACD;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EA6BhB;AAEF;;;AAGA,OAAO,MAAMC,mCAAmC,GAAIC,KAA6B,IAA4B;EAC3G,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGT,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","tableResizeHandleClassNames","root","useStyles","useTableResizeHandleStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableResizeHandleSlots, TableResizeHandleState } from './TableResizeHandle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const tableResizeHandleClassNames: SlotClassNames<TableResizeHandleSlots> = {\n  root: 'fui-TableResizeHandle',\n  // TODO: add class names for all slots on TableResizeHandleSlots.\n  // Should be of the form `<slotName>: 'fui-TableResizeHandle__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    bottom: 0,\n    width: '16px',\n    ...shorthands.margin(0, '-8px'),\n    cursor: 'col-resize',\n    opacity: 0,\n    transitionProperty: 'opacity',\n    transitionDuration: '.2s',\n    zIndex: 1,\n\n    ':hover': {\n      opacity: 1,\n    },\n\n    ':after': {\n      content: '\" \"',\n      display: 'block',\n      width: '1px',\n      position: 'absolute',\n      left: '50%',\n      top: 0,\n      bottom: 0,\n      backgroundColor: tokens.colorNeutralStroke1,\n    },\n  },\n});\n\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */\nexport const useTableResizeHandleStyles_unstable = (state: TableResizeHandleState): TableResizeHandleState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"]}

package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js

@@ -1,6 +1,7 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
+export const CELL_WIDTH = 44;
 export const tableSelectionCellClassNames = {
   root: 'fui-TableSelectionCell',
   checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,OAAO,MAAMC,4BAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,iBAAiB,EAAE,2CAA2C;EAC9DC,cAAc,EAAE;CACjB;AAED,MAAMC,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK3B;AAEF,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAQ1B;AAEF;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAkChB;AAEF;;;AAGA,OAAO,MAAMC,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9G,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAEP,oBAAoB,EAAE;IAC7BQ,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGjB,YAAY,CACjCI,4BAA4B,CAACC,IAAI,EACjCQ,MAAM,CAACR,IAAI,EACXO,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACX,IAAI,GAAGS,YAAY,CAACC,KAAK,CAACV,IAAI,EACzEO,KAAK,CAACO,MAAM,IAAIP,KAAK,CAACQ,OAAO,KAAK,KAAK,IAAIP,MAAM,CAACM,MAAM,EACxDP,KAAK,CAACS,MAAM,IAAIR,MAAM,CAACQ,MAAM,EAC7BT,KAAK,CAACP,IAAI,CAACY,SAAS,CACrB;EACD,IAAIL,KAAK,CAACN,iBAAiB,EAAE;IAC3BM,KAAK,CAACN,iBAAiB,CAACW,SAAS,GAAGjB,YAAY,CAC9CI,4BAA4B,CAACE,iBAAiB,EAC9CM,KAAK,CAACN,iBAAiB,CAACW,SAAS,CAClC;;EAGH,IAAIL,KAAK,CAACL,cAAc,EAAE;IACxBK,KAAK,CAACL,cAAc,CAACU,SAAS,GAAGjB,YAAY,CAC3CI,4BAA4B,CAACG,cAAc,EAC3CM,MAAM,CAACN,cAAc,EACrBK,KAAK,CAACL,cAAc,CAACU,SAAS,CAC/B;;EAGH,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","useFlexLayoutStyles","useStyles","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","subtle","checked","hidden"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    width: '44px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '44px',\n    maxWidth: '44px',\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n    ...shorthands.padding(0),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  radioIndicator: {\n    display: 'flex',\n    flexGrow: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n\n  subtle: {\n    opacity: 0,\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  hidden: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableSelectionCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.subtle && state.checked === false && styles.subtle,\n    state.hidden && styles.hidden,\n    state.root.className,\n  );\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.radioIndicator,\n      styles.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAE9C,OAAO,MAAMC,UAAU,GAAG,EAAE;AAE5B,OAAO,MAAMC,4BAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,iBAAiB,EAAE,2CAA2C;EAC9DC,cAAc,EAAE;CACjB;AAED,MAAMC,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK3B;AAEF,MAAMC,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAQ1B;AAEF;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAkChB;AAEF;;;AAGA,OAAO,MAAMC,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9G,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAEP,oBAAoB,EAAE;IAC7BQ,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGlB,YAAY,CACjCK,4BAA4B,CAACC,IAAI,EACjCQ,MAAM,CAACR,IAAI,EACXO,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACX,IAAI,GAAGS,YAAY,CAACC,KAAK,CAACV,IAAI,EACzEO,KAAK,CAACO,MAAM,IAAIP,KAAK,CAACQ,OAAO,KAAK,KAAK,IAAIP,MAAM,CAACM,MAAM,EACxDP,KAAK,CAACS,MAAM,IAAIR,MAAM,CAACQ,MAAM,EAC7BT,KAAK,CAACP,IAAI,CAACY,SAAS,CACrB;EACD,IAAIL,KAAK,CAACN,iBAAiB,EAAE;IAC3BM,KAAK,CAACN,iBAAiB,CAACW,SAAS,GAAGlB,YAAY,CAC9CK,4BAA4B,CAACE,iBAAiB,EAC9CM,KAAK,CAACN,iBAAiB,CAACW,SAAS,CAClC;;EAGH,IAAIL,KAAK,CAACL,cAAc,EAAE;IACxBK,KAAK,CAACL,cAAc,CAACU,SAAS,GAAGlB,YAAY,CAC3CK,4BAA4B,CAACG,cAAc,EAC3CM,MAAM,CAACN,cAAc,EACrBK,KAAK,CAACL,cAAc,CAACU,SAAS,CAC/B;;EAGH,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","useFlexLayoutStyles","useStyles","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","subtle","checked","hidden"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const CELL_WIDTH = 44;\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    width: `${CELL_WIDTH}px`,\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: `${CELL_WIDTH}px`,\n    maxWidth: `${CELL_WIDTH}px`,\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n    ...shorthands.padding(0),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  radioIndicator: {\n    display: 'flex',\n    flexGrow: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n\n  subtle: {\n    opacity: 0,\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  hidden: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableSelectionCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.subtle && state.checked === false && styles.subtle,\n    state.hidden && styles.hidden,\n    state.root.className,\n  );\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.radioIndicator,\n      styles.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib/hooks/index.js

@@ -3,4 +3,5 @@ export * from './useTableFeatures';
 export * from './useTableSort';
 export * from './useTableSelection';
 export * from './createColumn';
+export * from './useTableColumnSizing';
 //# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\nexport * from './useTableColumnSizing';\n"]}