@fluentui/react-table 9.18.5 → 9.19.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridHeaderCell/DataGridHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridHeaderCell_unstable } from './useDataGridHeaderCell';\nimport { renderDataGridHeaderCell_unstable } from './renderDataGridHeaderCell';\nimport { useDataGridHeaderCellStyles_unstable } from './useDataGridHeaderCellStyles.styles';\nimport type { DataGridHeaderCellProps } from './DataGridHeaderCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DataGridHeaderCell component\n */\nexport const DataGridHeaderCell: ForwardRefComponent<DataGridHeaderCellProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridHeaderCell_unstable(props, ref);\n\n  useDataGridHeaderCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDataGridHeaderCellStyles_unstable')(state);\n\n  return renderDataGridHeaderCell_unstable(state);\n});\n\nDataGridHeaderCell.displayName = 'DataGridHeaderCell';\n"],"names":["React","useDataGridHeaderCell_unstable","renderDataGridHeaderCell_unstable","useDataGridHeaderCellStyles_unstable","useCustomStyleHook_unstable","DataGridHeaderCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,mCAAmEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvG,MAAMC,QAAQR,+BAA+BM,OAAOC;IAEpDL,qCAAqCM;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO;AAC3C,GAAG;AAEHJ,mBAAmBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/DataGridHeaderCell/DataGridHeaderCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDataGridHeaderCell_unstable } from './useDataGridHeaderCell';\nimport { renderDataGridHeaderCell_unstable } from './renderDataGridHeaderCell';\nimport { useDataGridHeaderCellStyles_unstable } from './useDataGridHeaderCellStyles.styles';\nimport type { DataGridHeaderCellProps } from './DataGridHeaderCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DataGridHeaderCell component\n */\nexport const DataGridHeaderCell: ForwardRefComponent<DataGridHeaderCellProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridHeaderCell_unstable(props, ref);\n\n  useDataGridHeaderCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDataGridHeaderCellStyles_unstable')(state);\n\n  return renderDataGridHeaderCell_unstable(state);\n});\n\nDataGridHeaderCell.displayName = 'DataGridHeaderCell';\n"],"names":["React","useDataGridHeaderCell_unstable","renderDataGridHeaderCell_unstable","useDataGridHeaderCellStyles_unstable","useCustomStyleHook_unstable","DataGridHeaderCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,mCAAmEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvG,MAAMC,QAAQR,+BAA+BM,OAAOC;IAEpDL,qCAAqCM;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO;AAC3C,GAAG;AAEHJ,mBAAmBK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridHeaderCell/DataGridHeaderCell.types.ts"],"sourcesContent":["import {\n  TableHeaderCellProps,\n  TableHeaderCellSlots,\n  TableHeaderCellState,\n} from '../TableHeaderCell/TableHeaderCell.types';\n\nexport type DataGridHeaderCellSlots = TableHeaderCellSlots;\n\n/**\n * DataGridHeaderCell Props\n */\nexport type DataGridHeaderCellProps = Omit<TableHeaderCellProps, 'sortable'>;\n\n/**\n * State used in rendering DataGridHeaderCell\n */\nexport type DataGridHeaderCellState = TableHeaderCellState;\n"],"names":[],"mappings":"AAaA;;CAEC,GACD,WAA2D"}
+{"version":3,"sources":["../src/components/DataGridHeaderCell/DataGridHeaderCell.types.ts"],"sourcesContent":["import {\n  TableHeaderCellProps,\n  TableHeaderCellSlots,\n  TableHeaderCellState,\n} from '../TableHeaderCell/TableHeaderCell.types';\n\nimport { DataGridCellProps } from '../DataGridCell/DataGridCell.types';\n\nexport type DataGridHeaderCellSlots = TableHeaderCellSlots;\n\n/**\n * DataGridHeaderCell Props\n */\nexport type DataGridHeaderCellProps = Omit<TableHeaderCellProps, 'sortable'> & Pick<DataGridCellProps, 'focusMode'>;\n\n/**\n * State used in rendering DataGridHeaderCell\n */\nexport type DataGridHeaderCellState = TableHeaderCellState;\n"],"names":[],"mappings":"AAeA;;CAEC,GACD,WAA2D"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridHeaderCell/renderDataGridHeaderCell.tsx"],"sourcesContent":["import type { DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { renderTableHeaderCell_unstable } from '../TableHeaderCell/renderTableHeaderCell';\n\n/**\n * Render the final JSX of DataGridHeaderCell\n */\nexport const renderDataGridHeaderCell_unstable = (state: DataGridHeaderCellState) => {\n  return renderTableHeaderCell_unstable(state);\n};\n"],"names":["renderTableHeaderCell_unstable","renderDataGridHeaderCell_unstable","state"],"mappings":"AACA,SAASA,8BAA8B,QAAQ,2CAA2C;AAE1F;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD,OAAOF,+BAA+BE;AACxC,EAAE"}
+{"version":3,"sources":["../src/components/DataGridHeaderCell/renderDataGridHeaderCell.tsx"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\nimport type { DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { renderTableHeaderCell_unstable } from '../TableHeaderCell/renderTableHeaderCell';\n\n/**\n * Render the final JSX of DataGridHeaderCell\n */\nexport const renderDataGridHeaderCell_unstable = (state: DataGridHeaderCellState): JSXElement => {\n  return renderTableHeaderCell_unstable(state);\n};\n"],"names":["renderTableHeaderCell_unstable","renderDataGridHeaderCell_unstable","state"],"mappings":"AAEA,SAASA,8BAA8B,QAAQ,2CAA2C;AAE1F;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD,OAAOF,+BAA+BE;AACxC,EAAE"}

package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js

@@ -1,4 +1,6 @@
+'use client';
 import * as React from 'react';
+import { useFocusableGroup } from '@fluentui/react-tabster';
 import { useEventCallback } from '@fluentui/react-utilities';
 import { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';
 import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
@@ -30,6 +32,10 @@ import { isColumnSortable } from '../../utils/isColumnSortable';
     const getTableHeaderCellProps = useDataGridContext_unstable((ctx)=>{
         return ctx.columnSizing_unstable.getTableHeaderCellProps;
     });
+    const { focusMode = sortable ? 'none' : 'cell' } = props;
+    const focusableGroupAttr = useFocusableGroup({
+        tabBehavior: 'limited-trap-focus'
+    });
     // eslint-disable-next-line @typescript-eslint/no-deprecated -- prefer HTMLTableCellElement
     const onClick = useEventCallback((e)=>{
         var _props_onClick;
@@ -42,7 +48,8 @@ import { isColumnSortable } from '../../utils/isColumnSortable';
         sortable,
         sortDirection,
         as: 'div',
-        tabIndex: sortable ? undefined : 0,
+        tabIndex: focusMode !== 'none' ? 0 : undefined,
+        ...focusMode === 'group' && focusableGroupAttr,
         ...resizableColumns ? getTableHeaderCellProps(columnId) : {},
         ...props,
         onClick

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

@@ -1 +1 @@
-{"version":3,"sources":["../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';\nimport { isColumnSortable } from '../../utils/isColumnSortable';\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: gridSortable } = useTableContext();\n  const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n\n  const sortable = useDataGridContext_unstable(ctx => {\n    const columnSortable = !!ctx.columns.find(c => c.columnId === columnId && isColumnSortable(c));\n    if (!gridSortable) {\n      // if the grid is not sortable - disable sorting on all columns\n      return false;\n    }\n\n    return columnSortable;\n  });\n\n  const sortDirection = useDataGridContext_unstable(ctx =>\n    sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n  );\n  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n  const getTableHeaderCellProps = useDataGridContext_unstable(ctx => {\n    return ctx.columnSizing_unstable.getTableHeaderCellProps;\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- prefer HTMLTableCellElement\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      sortable,\n      sortDirection,\n      as: 'div',\n      tabIndex: sortable ? undefined : 0,\n      ...(resizableColumns ? getTableHeaderCellProps(columnId) : {}),\n      ...props,\n      onClick,\n    },\n    ref,\n  );\n};\n"],"names":["React","useEventCallback","useTableHeaderCell_unstable","useDataGridContext_unstable","useColumnIdContext","useTableContext","isColumnSortable","useDataGridHeaderCell_unstable","props","ref","columnId","sortable","gridSortable","toggleColumnSort","ctx","sort","columnSortable","columns","find","c","sortDirection","getSortDirection","undefined","resizableColumns","getTableHeaderCellProps","columnSizing_unstable","onClick","e","as","tabIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,2BAA2B,QAAQ,wCAAwC;AACpF,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,+BAA+B;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,WAAWN;IACjB,MAAM,EAAEO,UAAUC,YAAY,EAAE,GAAGP;IACnC,MAAMQ,mBAAmBV,4BAA4BW,CAAAA,MAAOA,IAAIC,IAAI,CAACF,gBAAgB;IAErF,MAAMF,WAAWR,4BAA4BW,CAAAA;QAC3C,MAAME,iBAAiB,CAAC,CAACF,IAAIG,OAAO,CAACC,IAAI,CAACC,CAAAA,IAAKA,EAAET,QAAQ,KAAKA,YAAYJ,iBAAiBa;QAC3F,IAAI,CAACP,cAAc;YACjB,+DAA+D;YAC/D,OAAO;QACT;QAEA,OAAOI;IACT;IAEA,MAAMI,gBAAgBjB,4BAA4BW,CAAAA,MAChDH,WAAWG,IAAIC,IAAI,CAACM,gBAAgB,CAACX,YAAYY;IAEnD,MAAMC,mBAAmBpB,4BAA4BW,CAAAA,MAAOA,IAAIS,gBAAgB;IAChF,MAAMC,0BAA0BrB,4BAA4BW,CAAAA;QAC1D,OAAOA,IAAIW,qBAAqB,CAACD,uBAAuB;IAC1D;IAEA,2FAA2F;IAC3F,MAAME,UAAUzB,iBAAiB,CAAC0B;YAIhCnB;QAHA,IAAIG,UAAU;YACZE,iBAAiBc,GAAGjB;QACtB;SACAF,iBAAAA,MAAMkB,OAAO,cAAblB,qCAAAA,oBAAAA,OAAgBmB;IAClB;IAEA,OAAOzB,4BACL;QACES;QACAS;QACAQ,IAAI;QACJC,UAAUlB,WAAWW,YAAY;QACjC,GAAIC,mBAAmBC,wBAAwBd,YAAY,CAAC,CAAC;QAC7D,GAAGF,KAAK;QACRkB;IACF,GACAjB;AAEJ,EAAE"}
+{"version":3,"sources":["../src/components/DataGridHeaderCell/useDataGridHeaderCell.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\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';\nimport { isColumnSortable } from '../../utils/isColumnSortable';\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: gridSortable } = useTableContext();\n  const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n\n  const sortable = useDataGridContext_unstable(ctx => {\n    const columnSortable = !!ctx.columns.find(c => c.columnId === columnId && isColumnSortable(c));\n    if (!gridSortable) {\n      // if the grid is not sortable - disable sorting on all columns\n      return false;\n    }\n\n    return columnSortable;\n  });\n\n  const sortDirection = useDataGridContext_unstable(ctx =>\n    sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n  );\n  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n  const getTableHeaderCellProps = useDataGridContext_unstable(ctx => {\n    return ctx.columnSizing_unstable.getTableHeaderCellProps;\n  });\n\n  const { focusMode = sortable ? 'none' : 'cell' } = props;\n  const focusableGroupAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- prefer HTMLTableCellElement\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      sortable,\n      sortDirection,\n      as: 'div',\n      tabIndex: focusMode !== 'none' ? 0 : undefined,\n      ...(focusMode === 'group' && focusableGroupAttr),\n      ...(resizableColumns ? getTableHeaderCellProps(columnId) : {}),\n      ...props,\n      onClick,\n    },\n    ref,\n  );\n};\n"],"names":["React","useFocusableGroup","useEventCallback","useTableHeaderCell_unstable","useDataGridContext_unstable","useColumnIdContext","useTableContext","isColumnSortable","useDataGridHeaderCell_unstable","props","ref","columnId","sortable","gridSortable","toggleColumnSort","ctx","sort","columnSortable","columns","find","c","sortDirection","getSortDirection","undefined","resizableColumns","getTableHeaderCellProps","columnSizing_unstable","focusMode","focusableGroupAttr","tabBehavior","onClick","e","as","tabIndex"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,2BAA2B,QAAQ,wCAAwC;AACpF,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,+BAA+B;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,WAAWN;IACjB,MAAM,EAAEO,UAAUC,YAAY,EAAE,GAAGP;IACnC,MAAMQ,mBAAmBV,4BAA4BW,CAAAA,MAAOA,IAAIC,IAAI,CAACF,gBAAgB;IAErF,MAAMF,WAAWR,4BAA4BW,CAAAA;QAC3C,MAAME,iBAAiB,CAAC,CAACF,IAAIG,OAAO,CAACC,IAAI,CAACC,CAAAA,IAAKA,EAAET,QAAQ,KAAKA,YAAYJ,iBAAiBa;QAC3F,IAAI,CAACP,cAAc;YACjB,+DAA+D;YAC/D,OAAO;QACT;QAEA,OAAOI;IACT;IAEA,MAAMI,gBAAgBjB,4BAA4BW,CAAAA,MAChDH,WAAWG,IAAIC,IAAI,CAACM,gBAAgB,CAACX,YAAYY;IAEnD,MAAMC,mBAAmBpB,4BAA4BW,CAAAA,MAAOA,IAAIS,gBAAgB;IAChF,MAAMC,0BAA0BrB,4BAA4BW,CAAAA;QAC1D,OAAOA,IAAIW,qBAAqB,CAACD,uBAAuB;IAC1D;IAEA,MAAM,EAAEE,YAAYf,WAAW,SAAS,MAAM,EAAE,GAAGH;IACnD,MAAMmB,qBAAqB3B,kBAAkB;QAAE4B,aAAa;IAAqB;IAEjF,2FAA2F;IAC3F,MAAMC,UAAU5B,iBAAiB,CAAC6B;YAIhCtB;QAHA,IAAIG,UAAU;YACZE,iBAAiBiB,GAAGpB;QACtB;SACAF,iBAAAA,MAAMqB,OAAO,cAAbrB,qCAAAA,oBAAAA,OAAgBsB;IAClB;IAEA,OAAO5B,4BACL;QACES;QACAS;QACAW,IAAI;QACJC,UAAUN,cAAc,SAAS,IAAIJ;QACrC,GAAII,cAAc,WAAWC,kBAAkB;QAC/C,GAAIJ,mBAAmBC,wBAAwBd,YAAY,CAAC,CAAC;QAC7D,GAAGF,KAAK;QACRqB;IACF,GACApB;AAEJ,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { mergeClasses } from '@griffel/react';
 import { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles.styles';
 export const dataGridHeaderCellClassNames = {

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","useTableHeaderCellStyles_unstable","dataGridHeaderCellClassNames","root","button","sortIcon","aside","useDataGridHeaderCellStyles_unstable","state","className"],"sources":["useDataGridHeaderCellStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles.styles';\nexport const dataGridHeaderCellClassNames = {\n    root: 'fui-DataGridHeaderCell',\n    button: 'fui-DataGridHeaderCell__button',\n    sortIcon: 'fui-DataGridHeaderCell__sortIcon',\n    aside: 'fui-DataGridHeaderCell__aside'\n};\n/**\n * Apply styling to the DataGridHeaderCell slots based on the state\n */ export const useDataGridHeaderCellStyles_unstable = (state)=>{\n    'use no memo';\n    useTableHeaderCellStyles_unstable(state);\n    state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className);\n    if (state.button) {\n        state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className);\n    }\n    if (state.sortIcon) {\n        state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(dataGridHeaderCellClassNames.aside, state.aside.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,iCAAiC,QAAQ,oDAAoD;AACtG,OAAO,MAAMC,4BAA4B,GAAG;EACxCC,IAAI,EAAE,wBAAwB;EAC9BC,MAAM,EAAE,gCAAgC;EACxCC,QAAQ,EAAE,kCAAkC;EAC5CC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,oCAAoC,GAAIC,KAAK,IAAG;EAC7D,aAAa;;EACbP,iCAAiC,CAACO,KAAK,CAAC;EACxCA,KAAK,CAACL,IAAI,CAACM,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACC,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACM,SAAS,CAAC;EAC5F,IAAID,KAAK,CAACJ,MAAM,EAAE;IACdI,KAAK,CAACJ,MAAM,CAACK,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACE,MAAM,EAAEI,KAAK,CAACJ,MAAM,CAACK,SAAS,CAAC;EACtG;EACA,IAAID,KAAK,CAACH,QAAQ,EAAE;IAChBG,KAAK,CAACH,QAAQ,CAACI,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACG,QAAQ,EAAEG,KAAK,CAACH,QAAQ,CAACI,SAAS,CAAC;EAC5G;EACA,IAAID,KAAK,CAACF,KAAK,EAAE;IACbE,KAAK,CAACF,KAAK,CAACG,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACI,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACG,SAAS,CAAC;EACnG;EACA,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","useTableHeaderCellStyles_unstable","dataGridHeaderCellClassNames","root","button","sortIcon","aside","useDataGridHeaderCellStyles_unstable","state","className"],"sources":["useDataGridHeaderCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses } from '@griffel/react';\nimport { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles.styles';\nexport const dataGridHeaderCellClassNames = {\n    root: 'fui-DataGridHeaderCell',\n    button: 'fui-DataGridHeaderCell__button',\n    sortIcon: 'fui-DataGridHeaderCell__sortIcon',\n    aside: 'fui-DataGridHeaderCell__aside'\n};\n/**\n * Apply styling to the DataGridHeaderCell slots based on the state\n */ export const useDataGridHeaderCellStyles_unstable = (state)=>{\n    'use no memo';\n    useTableHeaderCellStyles_unstable(state);\n    state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className);\n    if (state.button) {\n        state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className);\n    }\n    if (state.sortIcon) {\n        state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(dataGridHeaderCellClassNames.aside, state.aside.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,iCAAiC,QAAQ,oDAAoD;AACtG,OAAO,MAAMC,4BAA4B,GAAG;EACxCC,IAAI,EAAE,wBAAwB;EAC9BC,MAAM,EAAE,gCAAgC;EACxCC,QAAQ,EAAE,kCAAkC;EAC5CC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,oCAAoC,GAAIC,KAAK,IAAG;EAC7D,aAAa;;EACbP,iCAAiC,CAACO,KAAK,CAAC;EACxCA,KAAK,CAACL,IAAI,CAACM,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACC,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACM,SAAS,CAAC;EAC5F,IAAID,KAAK,CAACJ,MAAM,EAAE;IACdI,KAAK,CAACJ,MAAM,CAACK,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACE,MAAM,EAAEI,KAAK,CAACJ,MAAM,CAACK,SAAS,CAAC;EACtG;EACA,IAAID,KAAK,CAACH,QAAQ,EAAE;IAChBG,KAAK,CAACH,QAAQ,CAACI,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACG,QAAQ,EAAEG,KAAK,CAACH,QAAQ,CAACI,SAAS,CAAC;EAC5G;EACA,IAAID,KAAK,CAACF,KAAK,EAAE;IACbE,KAAK,CAACF,KAAK,CAACG,SAAS,GAAGT,YAAY,CAACE,4BAA4B,CAACI,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACG,SAAS,CAAC;EACnG;EACA,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses } from '@griffel/react';
 import { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles.styles';
 export const dataGridHeaderCellClassNames = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.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.styles';\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  'use no memo';\n\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"],"names":["mergeClasses","useTableHeaderCellStyles_unstable","dataGridHeaderCellClassNames","root","button","sortIcon","aside","useDataGridHeaderCellStyles_unstable","state","className"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,iCAAiC,QAAQ,qDAAqD;AAEvG,OAAO,MAAMC,+BAAwE;IACnFC,MAAM;IACNC,QAAQ;IACRC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAACC;IACnD;IAEAP,kCAAkCO;IAClCA,MAAML,IAAI,CAACM,SAAS,GAAGT,aAAaE,6BAA6BC,IAAI,EAAEK,MAAML,IAAI,CAACM,SAAS;IAE3F,IAAID,MAAMJ,MAAM,EAAE;QAChBI,MAAMJ,MAAM,CAACK,SAAS,GAAGT,aAAaE,6BAA6BE,MAAM,EAAEI,MAAMJ,MAAM,CAACK,SAAS;IACnG;IAEA,IAAID,MAAMH,QAAQ,EAAE;QAClBG,MAAMH,QAAQ,CAACI,SAAS,GAAGT,aAAaE,6BAA6BG,QAAQ,EAAEG,MAAMH,QAAQ,CAACI,SAAS;IACzG;IAEA,IAAID,MAAMF,KAAK,EAAE;QACfE,MAAMF,KAAK,CAACG,SAAS,GAAGT,aAAaE,6BAA6BI,KAAK,EAAEE,MAAMF,KAAK,CAACG,SAAS;IAChG;IAEA,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport type { DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles.styles';\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  'use no memo';\n\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"],"names":["mergeClasses","useTableHeaderCellStyles_unstable","dataGridHeaderCellClassNames","root","button","sortIcon","aside","useDataGridHeaderCellStyles_unstable","state","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,iCAAiC,QAAQ,qDAAqD;AAEvG,OAAO,MAAMC,+BAAwE;IACnFC,MAAM;IACNC,QAAQ;IACRC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAACC;IACnD;IAEAP,kCAAkCO;IAClCA,MAAML,IAAI,CAACM,SAAS,GAAGT,aAAaE,6BAA6BC,IAAI,EAAEK,MAAML,IAAI,CAACM,SAAS;IAE3F,IAAID,MAAMJ,MAAM,EAAE;QAChBI,MAAMJ,MAAM,CAACK,SAAS,GAAGT,aAAaE,6BAA6BE,MAAM,EAAEI,MAAMJ,MAAM,CAACK,SAAS;IACnG;IAEA,IAAID,MAAMH,QAAQ,EAAE;QAClBG,MAAMH,QAAQ,CAACI,SAAS,GAAGT,aAAaE,6BAA6BG,QAAQ,EAAEG,MAAMH,QAAQ,CAACI,SAAS;IACzG;IAEA,IAAID,MAAMF,KAAK,EAAE;QACfE,MAAMF,KAAK,CAACG,SAAS,GAAGT,aAAaE,6BAA6BI,KAAK,EAAEE,MAAMF,KAAK,CAACG,SAAS;IAChG;IAEA,OAAOD;AACT,EAAE"}

package/lib/components/DataGridRow/DataGridRow.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useDataGridRow_unstable } from './useDataGridRow';
 import { renderDataGridRow_unstable } from './renderDataGridRow';

package/lib/components/DataGridRow/DataGridRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridRow/DataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridRow_unstable } from './useDataGridRow';\nimport { renderDataGridRow_unstable } from './renderDataGridRow';\nimport { useDataGridRowStyles_unstable } from './useDataGridRowStyles.styles';\nimport type { DataGridRowProps } from './DataGridRow.types';\nimport type { ForwardRefComponent, JSXElement } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DataGridRow component\n */\nexport const DataGridRow: ForwardRefComponent<DataGridRowProps> &\n  (<TItem>(props: DataGridRowProps<TItem>) => JSXElement) = React.forwardRef<HTMLElement, DataGridRowProps>(\n  (props, ref) => {\n    const state = useDataGridRow_unstable(props, ref);\n\n    useDataGridRowStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useDataGridRowStyles_unstable')(state);\n\n    return renderDataGridRow_unstable(state);\n  },\n) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSXElement);\n\nDataGridRow.displayName = 'DataGridRow';\n"],"names":["React","useDataGridRow_unstable","renderDataGridRow_unstable","useDataGridRowStyles_unstable","useCustomStyleHook_unstable","DataGridRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAC+CL,MAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GACmG;AAErGJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/DataGridRow/DataGridRow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDataGridRow_unstable } from './useDataGridRow';\nimport { renderDataGridRow_unstable } from './renderDataGridRow';\nimport { useDataGridRowStyles_unstable } from './useDataGridRowStyles.styles';\nimport type { DataGridRowProps } from './DataGridRow.types';\nimport type { ForwardRefComponent, JSXElement } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DataGridRow component\n */\nexport const DataGridRow: ForwardRefComponent<DataGridRowProps> &\n  (<TItem>(props: DataGridRowProps<TItem>) => JSXElement) = React.forwardRef<HTMLElement, DataGridRowProps>(\n  (props, ref) => {\n    const state = useDataGridRow_unstable(props, ref);\n\n    useDataGridRowStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useDataGridRowStyles_unstable')(state);\n\n    return renderDataGridRow_unstable(state);\n  },\n) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSXElement);\n\nDataGridRow.displayName = 'DataGridRow';\n"],"names":["React","useDataGridRow_unstable","renderDataGridRow_unstable","useDataGridRowStyles_unstable","useCustomStyleHook_unstable","DataGridRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAC+CL,MAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GACmG;AAErGJ,YAAYK,WAAW,GAAG"}

package/lib/components/DataGridRow/renderDataGridRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridRow/renderDataGridRow.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DataGridRowState, DataGridRowSlots } from './DataGridRow.types';\nimport { ColumnIdContextProvider } from '../../contexts/columnIdContext';\n\n/**\n * Render the final JSX of DataGridRow\n */\nexport const renderDataGridRow_unstable = (state: DataGridRowState) => {\n  assertSlots<DataGridRowSlots>(state);\n\n  return (\n    <state.root>\n      {state.selectionCell && <state.selectionCell />}\n      {state.columnDefs.map(columnDef => (\n        <ColumnIdContextProvider value={columnDef.columnId} key={columnDef.columnId}>\n          {state.renderCell(columnDef, state.dataGridContextValue)}\n        </ColumnIdContextProvider>\n      ))}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","ColumnIdContextProvider","renderDataGridRow_unstable","state","root","selectionCell","columnDefs","map","columnDef","value","columnId","renderCell","dataGridContextValue"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,uBAAuB,QAAQ,iCAAiC;AAEzE;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCH,YAA8BG;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,aAAa,kBAAI,KAACF,MAAME,aAAa;YAC3CF,MAAMG,UAAU,CAACC,GAAG,CAACC,CAAAA,0BACpB,KAACP;oBAAwBQ,OAAOD,UAAUE,QAAQ;8BAC/CP,MAAMQ,UAAU,CAACH,WAAWL,MAAMS,oBAAoB;mBADAJ,UAAUE,QAAQ;;;AAMnF,EAAE"}
+{"version":3,"sources":["../src/components/DataGridRow/renderDataGridRow.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { DataGridRowState, DataGridRowSlots } from './DataGridRow.types';\nimport { ColumnIdContextProvider } from '../../contexts/columnIdContext';\n\n/**\n * Render the final JSX of DataGridRow\n */\nexport const renderDataGridRow_unstable = (state: DataGridRowState): JSXElement => {\n  assertSlots<DataGridRowSlots>(state);\n\n  return (\n    <state.root>\n      {state.selectionCell && <state.selectionCell />}\n      {state.columnDefs.map(columnDef => (\n        <ColumnIdContextProvider value={columnDef.columnId} key={columnDef.columnId}>\n          {state.renderCell(columnDef, state.dataGridContextValue)}\n        </ColumnIdContextProvider>\n      ))}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","ColumnIdContextProvider","renderDataGridRow_unstable","state","root","selectionCell","columnDefs","map","columnDef","value","columnId","renderCell","dataGridContextValue"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,uBAAuB,QAAQ,iCAAiC;AAEzE;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCH,YAA8BG;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,aAAa,kBAAI,KAACF,MAAME,aAAa;YAC3CF,MAAMG,UAAU,CAACC,GAAG,CAACC,CAAAA,0BACpB,KAACP;oBAAwBQ,OAAOD,UAAUE,QAAQ;8BAC/CP,MAAMQ,UAAU,CAACH,WAAWL,MAAMS,oBAAoB;mBADAJ,UAAUE,QAAQ;;;AAMnF,EAAE"}

package/lib/components/DataGridRow/useDataGridRow.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { isInteractiveHTMLElement, useEventCallback, slot } from '@fluentui/react-utilities';
 import { Space } from '@fluentui/keyboard-keys';
@@ -66,12 +67,7 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
         },
         selectionCell: slot.optional(props.selectionCell, {
             renderByDefault: selectable,
-            elementType: DataGridSelectionCell,
-            defaultProps: {
-                radioIndicator: {
-                    disabled: isHeader
-                }
-            }
+            elementType: DataGridSelectionCell
         }),
         renderCell: props.children,
         columnDefs,

package/lib/components/DataGridRow/useDataGridRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridRow/useDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { dataGridContextDefaultValue, useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  const rowId = useTableRowIdContext();\n  const isHeader = useIsInTableHeader();\n  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n  const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n  const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n  const focusMode = useDataGridContext_unstable(ctx => ctx.focusMode);\n  const compositeRowTabsterAttribute = useDataGridContext_unstable(ctx => ctx.compositeRowTabsterAttribute);\n\n  const tabbable = focusMode === 'row_unstable' || focusMode === 'composite';\n  const appearance = useDataGridContext_unstable(ctx => {\n    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n      return ctx.selectionAppearance;\n    }\n\n    return 'none';\n  });\n  const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader) {\n      toggleRow(e, rowId);\n    }\n\n    props.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target as HTMLElement)) {\n      // stop scrolling\n      e.preventDefault();\n      toggleRow(e, rowId);\n    }\n\n    props.onKeyDown?.(e);\n  });\n\n  const baseState = useTableRow_unstable(\n    {\n      appearance,\n      'aria-selected': selectable ? selected : undefined,\n      tabIndex: tabbable && !isHeader ? 0 : undefined,\n      ...(focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute),\n      ...props,\n      onClick,\n      onKeyDown,\n      children: null,\n      as: 'div',\n    },\n    ref,\n  );\n\n  return {\n    ...baseState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      selectionCell: DataGridSelectionCell,\n    },\n    selectionCell: slot.optional(props.selectionCell, {\n      renderByDefault: selectable,\n      elementType: DataGridSelectionCell,\n      defaultProps: {\n        radioIndicator: {\n          disabled: isHeader,\n        },\n      },\n    }),\n    renderCell: props.children,\n    columnDefs,\n    // This context value should not be used internally\n    // It's intended to help power user render functions\n    dataGridContextValue: useStableDataGridContextValue(),\n  };\n};\n\nfunction useStableDataGridContextValue() {\n  const ref = React.useRef(dataGridContextDefaultValue);\n\n  // Heads up!\n  // We will not re-render when the context value changes, but we will have the latest value of the context when we do\n  // render for other reasons.\n  //\n  // This relies on a context selector that always returns the same value:\n  // - we will not re-render when the context value changes\n  // - we will store the context value in a ref\n  useDataGridContext_unstable(ctx => {\n    ref.current = ctx;\n    return null;\n  });\n\n  return ref.current!;\n}\n"],"names":["React","isInteractiveHTMLElement","useEventCallback","slot","Space","useTableRow_unstable","dataGridContextDefaultValue","useDataGridContext_unstable","DataGridSelectionCell","useTableRowIdContext","useIsInTableHeader","useDataGridRow_unstable","props","ref","rowId","isHeader","columnDefs","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","focusMode","compositeRowTabsterAttribute","tabbable","appearance","selectionAppearance","toggleRow","onClick","e","onKeyDown","key","target","preventDefault","baseState","undefined","tabIndex","children","as","components","selectionCell","optional","renderByDefault","elementType","defaultProps","radioIndicator","disabled","renderCell","dataGridContextValue","useStableDataGridContextValue","useRef","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC7F,SAASC,KAAK,QAAQ,0BAA0B;AAEhD,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,2BAA2B,EAAEC,2BAA2B,QAAQ,iCAAiC;AAC1G,SAASC,qBAAqB,QAAQ,iDAAiD;AACvF,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,QAAQL;IACd,MAAMM,WAAWL;IACjB,MAAMM,aAAaT,4BAA4BU,CAAAA,MAAOA,IAAIC,OAAO;IACjE,MAAMC,aAAaZ,4BAA4BU,CAAAA,MAAOA,IAAIG,cAAc;IACxE,MAAMC,WAAWd,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACC,aAAa,CAACT;IAChF,MAAMU,YAAYjB,4BAA4BU,CAAAA,MAAOA,IAAIO,SAAS;IAClE,MAAMC,+BAA+BlB,4BAA4BU,CAAAA,MAAOA,IAAIQ,4BAA4B;IAExG,MAAMC,WAAWF,cAAc,kBAAkBA,cAAc;IAC/D,MAAMG,aAAapB,4BAA4BU,CAAAA;QAC7C,IAAI,CAACF,YAAYI,cAAcF,IAAIK,SAAS,CAACC,aAAa,CAACT,QAAQ;YACjE,OAAOG,IAAIW,mBAAmB;QAChC;QAEA,OAAO;IACT;IACA,MAAMC,YAAYtB,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACO,SAAS;IAE5E,MAAMC,UAAU5B,iBAAiB,CAAC6B;YAKhCnB;QAJA,IAAIO,cAAc,CAACJ,UAAU;YAC3Bc,UAAUE,GAAGjB;QACf;SAEAF,iBAAAA,MAAMkB,OAAO,cAAblB,qCAAAA,oBAAAA,OAAgBmB;IAClB;IAEA,MAAMC,YAAY9B,iBAAiB,CAAC6B;YAOlCnB;QANA,IAAIO,cAAc,CAACJ,YAAYgB,EAAEE,GAAG,KAAK7B,SAAS,CAACH,yBAAyB8B,EAAEG,MAAM,GAAkB;YACpG,iBAAiB;YACjBH,EAAEI,cAAc;YAChBN,UAAUE,GAAGjB;QACf;SAEAF,mBAAAA,MAAMoB,SAAS,cAAfpB,uCAAAA,sBAAAA,OAAkBmB;IACpB;IAEA,MAAMK,YAAY/B,qBAChB;QACEsB;QACA,iBAAiBR,aAAaE,WAAWgB;QACzCC,UAAUZ,YAAY,CAACX,WAAW,IAAIsB;QACtC,GAAIb,cAAc,eAAe,CAACT,YAAYU,4BAA4B;QAC1E,GAAGb,KAAK;QACRkB;QACAE;QACAO,UAAU;QACVC,IAAI;IACN,GACA3B;IAGF,OAAO;QACL,GAAGuB,SAAS;QACZK,YAAY;YACV,4DAA4D;YAC5D,GAAGL,UAAUK,UAAU;YACvBC,eAAelC;QACjB;QACAkC,eAAevC,KAAKwC,QAAQ,CAAC/B,MAAM8B,aAAa,EAAE;YAChDE,iBAAiBzB;YACjB0B,aAAarC;YACbsC,cAAc;gBACZC,gBAAgB;oBACdC,UAAUjC;gBACZ;YACF;QACF;QACAkC,YAAYrC,MAAM2B,QAAQ;QAC1BvB;QACA,mDAAmD;QACnD,oDAAoD;QACpDkC,sBAAsBC;IACxB;AACF,EAAE;AAEF,SAASA;IACP,MAAMtC,MAAMb,MAAMoD,MAAM,CAAC9C;IAEzB,YAAY;IACZ,oHAAoH;IACpH,4BAA4B;IAC5B,EAAE;IACF,wEAAwE;IACxE,yDAAyD;IACzD,6CAA6C;IAC7CC,4BAA4BU,CAAAA;QAC1BJ,IAAIwC,OAAO,GAAGpC;QACd,OAAO;IACT;IAEA,OAAOJ,IAAIwC,OAAO;AACpB"}
+{"version":3,"sources":["../src/components/DataGridRow/useDataGridRow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { dataGridContextDefaultValue, useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n  const rowId = useTableRowIdContext();\n  const isHeader = useIsInTableHeader();\n  const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n  const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n  const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n  const focusMode = useDataGridContext_unstable(ctx => ctx.focusMode);\n  const compositeRowTabsterAttribute = useDataGridContext_unstable(ctx => ctx.compositeRowTabsterAttribute);\n\n  const tabbable = focusMode === 'row_unstable' || focusMode === 'composite';\n  const appearance = useDataGridContext_unstable(ctx => {\n    if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n      return ctx.selectionAppearance;\n    }\n\n    return 'none';\n  });\n  const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader) {\n      toggleRow(e, rowId);\n    }\n\n    props.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target as HTMLElement)) {\n      // stop scrolling\n      e.preventDefault();\n      toggleRow(e, rowId);\n    }\n\n    props.onKeyDown?.(e);\n  });\n\n  const baseState = useTableRow_unstable(\n    {\n      appearance,\n      'aria-selected': selectable ? selected : undefined,\n      tabIndex: tabbable && !isHeader ? 0 : undefined,\n      ...(focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute),\n      ...props,\n      onClick,\n      onKeyDown,\n      children: null,\n      as: 'div',\n    },\n    ref,\n  );\n\n  return {\n    ...baseState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      selectionCell: DataGridSelectionCell,\n    },\n    selectionCell: slot.optional(props.selectionCell, {\n      renderByDefault: selectable,\n      elementType: DataGridSelectionCell,\n    }),\n    renderCell: props.children,\n    columnDefs,\n    // This context value should not be used internally\n    // It's intended to help power user render functions\n    dataGridContextValue: useStableDataGridContextValue(),\n  };\n};\n\nfunction useStableDataGridContextValue() {\n  const ref = React.useRef(dataGridContextDefaultValue);\n\n  // Heads up!\n  // We will not re-render when the context value changes, but we will have the latest value of the context when we do\n  // render for other reasons.\n  //\n  // This relies on a context selector that always returns the same value:\n  // - we will not re-render when the context value changes\n  // - we will store the context value in a ref\n  useDataGridContext_unstable(ctx => {\n    ref.current = ctx;\n    return null;\n  });\n\n  return ref.current!;\n}\n"],"names":["React","isInteractiveHTMLElement","useEventCallback","slot","Space","useTableRow_unstable","dataGridContextDefaultValue","useDataGridContext_unstable","DataGridSelectionCell","useTableRowIdContext","useIsInTableHeader","useDataGridRow_unstable","props","ref","rowId","isHeader","columnDefs","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","focusMode","compositeRowTabsterAttribute","tabbable","appearance","selectionAppearance","toggleRow","onClick","e","onKeyDown","key","target","preventDefault","baseState","undefined","tabIndex","children","as","components","selectionCell","optional","renderByDefault","elementType","renderCell","dataGridContextValue","useStableDataGridContextValue","useRef","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC7F,SAASC,KAAK,QAAQ,0BAA0B;AAEhD,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,2BAA2B,EAAEC,2BAA2B,QAAQ,iCAAiC;AAC1G,SAASC,qBAAqB,QAAQ,iDAAiD;AACvF,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,QAAQL;IACd,MAAMM,WAAWL;IACjB,MAAMM,aAAaT,4BAA4BU,CAAAA,MAAOA,IAAIC,OAAO;IACjE,MAAMC,aAAaZ,4BAA4BU,CAAAA,MAAOA,IAAIG,cAAc;IACxE,MAAMC,WAAWd,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACC,aAAa,CAACT;IAChF,MAAMU,YAAYjB,4BAA4BU,CAAAA,MAAOA,IAAIO,SAAS;IAClE,MAAMC,+BAA+BlB,4BAA4BU,CAAAA,MAAOA,IAAIQ,4BAA4B;IAExG,MAAMC,WAAWF,cAAc,kBAAkBA,cAAc;IAC/D,MAAMG,aAAapB,4BAA4BU,CAAAA;QAC7C,IAAI,CAACF,YAAYI,cAAcF,IAAIK,SAAS,CAACC,aAAa,CAACT,QAAQ;YACjE,OAAOG,IAAIW,mBAAmB;QAChC;QAEA,OAAO;IACT;IACA,MAAMC,YAAYtB,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACO,SAAS;IAE5E,MAAMC,UAAU5B,iBAAiB,CAAC6B;YAKhCnB;QAJA,IAAIO,cAAc,CAACJ,UAAU;YAC3Bc,UAAUE,GAAGjB;QACf;SAEAF,iBAAAA,MAAMkB,OAAO,cAAblB,qCAAAA,oBAAAA,OAAgBmB;IAClB;IAEA,MAAMC,YAAY9B,iBAAiB,CAAC6B;YAOlCnB;QANA,IAAIO,cAAc,CAACJ,YAAYgB,EAAEE,GAAG,KAAK7B,SAAS,CAACH,yBAAyB8B,EAAEG,MAAM,GAAkB;YACpG,iBAAiB;YACjBH,EAAEI,cAAc;YAChBN,UAAUE,GAAGjB;QACf;SAEAF,mBAAAA,MAAMoB,SAAS,cAAfpB,uCAAAA,sBAAAA,OAAkBmB;IACpB;IAEA,MAAMK,YAAY/B,qBAChB;QACEsB;QACA,iBAAiBR,aAAaE,WAAWgB;QACzCC,UAAUZ,YAAY,CAACX,WAAW,IAAIsB;QACtC,GAAIb,cAAc,eAAe,CAACT,YAAYU,4BAA4B;QAC1E,GAAGb,KAAK;QACRkB;QACAE;QACAO,UAAU;QACVC,IAAI;IACN,GACA3B;IAGF,OAAO;QACL,GAAGuB,SAAS;QACZK,YAAY;YACV,4DAA4D;YAC5D,GAAGL,UAAUK,UAAU;YACvBC,eAAelC;QACjB;QACAkC,eAAevC,KAAKwC,QAAQ,CAAC/B,MAAM8B,aAAa,EAAE;YAChDE,iBAAiBzB;YACjB0B,aAAarC;QACf;QACAsC,YAAYlC,MAAM2B,QAAQ;QAC1BvB;QACA,mDAAmD;QACnD,oDAAoD;QACpD+B,sBAAsBC;IACxB;AACF,EAAE;AAEF,SAASA;IACP,MAAMnC,MAAMb,MAAMiD,MAAM,CAAC3C;IAEzB,YAAY;IACZ,oHAAoH;IACpH,4BAA4B;IAC5B,EAAE;IACF,wEAAwE;IACxE,yDAAyD;IACzD,6CAA6C;IAC7CC,4BAA4BU,CAAAA;QAC1BJ,IAAIqC,OAAO,GAAGjC;QACd,OAAO;IACT;IAEA,OAAOJ,IAAIqC,OAAO;AACpB"}

package/lib/components/DataGridRow/useDataGridRowStyles.styles.js

@@ -1,7 +1,8 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles.styles';
-import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
 import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
 import { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';
 export const dataGridRowClassNames = {
@@ -9,17 +10,13 @@ export const dataGridRowClassNames = {
   selectionCell: 'fui-DataGridRow__selectionCell'
 };
 const useStyles = /*#__PURE__*/__styles({
-  singleSelectHeader: {
-    Bconypa: "f6fspww",
-    ff6mpl: "fqzoyx6"
-  },
   subtleSelection: {
     Bconypa: "f1jazu75",
     ff6mpl: "fw60kww"
   }
 }, {
-  d: [".f6fspww[data-fui-focus-within]:focus-within .fui-TableSelectionCell{opacity:0;}", ".f1jazu75[data-fui-focus-within]:focus-within .fui-TableSelectionCell{opacity:1;}"],
-  h: [".fqzoyx6:hover .fui-TableSelectionCell{opacity:0;}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}"]
+  d: [".f1jazu75[data-fui-focus-within]:focus-within .fui-TableSelectionCell{opacity:1;}"],
+  h: [".fw60kww:hover .fui-TableSelectionCell{opacity:1;}"]
 });
 /**
  * Apply styling to the DataGridRow slots based on the state
@@ -27,12 +24,10 @@ const useStyles = /*#__PURE__*/__styles({
 export const useDataGridRowStyles_unstable = state => {
   'use no memo';
 
-  const isHeader = useIsInTableHeader();
-  const isSingleSelect = useDataGridContext_unstable(ctx => ctx.selection.selectionMode === 'single');
   const isSubtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);
   const styles = useStyles();
   useTableRowStyles_unstable(state);
-  state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className, isSubtle && styles.subtleSelection, isHeader && isSingleSelect && styles.singleSelectHeader);
+  state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className, isSubtle && styles.subtleSelection);
   if (state.selectionCell) {
     state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);
   }

package/lib/components/DataGridRow/useDataGridRowStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","useTableRowStyles_unstable","useIsInTableHeader","useDataGridContext_unstable","tableSelectionCellClassNames","dataGridRowClassNames","root","selectionCell","useStyles","singleSelectHeader","Bconypa","ff6mpl","subtleSelection","d","h","useDataGridRowStyles_unstable","state","isHeader","isSingleSelect","ctx","selection","selectionMode","isSubtle","styles","className"],"sources":["useDataGridRowStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles.styles';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nexport const dataGridRowClassNames = {\n    root: 'fui-DataGridRow',\n    selectionCell: 'fui-DataGridRow__selectionCell'\n};\nconst useStyles = makeStyles({\n    singleSelectHeader: {\n        ...createCustomFocusIndicatorStyle({\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 0\n            }\n        }, {\n            selector: 'focus-within'\n        }),\n        ':hover': {\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 0\n            }\n        }\n    },\n    subtleSelection: {\n        ...createCustomFocusIndicatorStyle({\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            }\n        }, {\n            selector: 'focus-within'\n        }),\n        ':hover': {\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            }\n        }\n    }\n});\n/**\n * Apply styling to the DataGridRow slots based on the state\n */ export const useDataGridRowStyles_unstable = (state)=>{\n    'use no memo';\n    const isHeader = useIsInTableHeader();\n    const isSingleSelect = useDataGridContext_unstable((ctx)=>ctx.selection.selectionMode === 'single');\n    const isSubtle = useDataGridContext_unstable((ctx)=>ctx.subtleSelection);\n    const styles = useStyles();\n    useTableRowStyles_unstable(state);\n    state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className, isSubtle && styles.subtleSelection, isHeader && isSingleSelect && styles.singleSelectHeader);\n    if (state.selectionCell) {\n        state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,kBAAkB,QAAQ,mCAAmC;AACtE,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,4BAA4B,QAAQ,0DAA0D;AACvG,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,aAAa,EAAE;AACnB,CAAC;AACD,MAAMC,SAAS,gBAAGV,QAAA;EAAAW,kBAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;AAAA,CA6BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,QAAQ,GAAGf,kBAAkB,CAAC,CAAC;EACrC,MAAMgB,cAAc,GAAGf,2BAA2B,CAAEgB,GAAG,IAAGA,GAAG,CAACC,SAAS,CAACC,aAAa,KAAK,QAAQ,CAAC;EACnG,MAAMC,QAAQ,GAAGnB,2BAA2B,CAAEgB,GAAG,IAAGA,GAAG,CAACP,eAAe,CAAC;EACxE,MAAMW,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1BP,0BAA0B,CAACe,KAAK,CAAC;EACjCA,KAAK,CAACV,IAAI,CAACkB,SAAS,GAAGzB,YAAY,CAACM,qBAAqB,CAACC,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACkB,SAAS,EAAEF,QAAQ,IAAIC,MAAM,CAACX,eAAe,EAAEK,QAAQ,IAAIC,cAAc,IAAIK,MAAM,CAACd,kBAAkB,CAAC;EAClL,IAAIO,KAAK,CAACT,aAAa,EAAE;IACrBS,KAAK,CAACT,aAAa,CAACiB,SAAS,GAAGzB,YAAY,CAACM,qBAAqB,CAACE,aAAa,EAAES,KAAK,CAACT,aAAa,CAACiB,SAAS,CAAC;EACpH;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","useTableRowStyles_unstable","useDataGridContext_unstable","tableSelectionCellClassNames","dataGridRowClassNames","root","selectionCell","useStyles","subtleSelection","Bconypa","ff6mpl","d","h","useDataGridRowStyles_unstable","state","isSubtle","ctx","styles","className"],"sources":["useDataGridRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles.styles';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nexport const dataGridRowClassNames = {\n    root: 'fui-DataGridRow',\n    selectionCell: 'fui-DataGridRow__selectionCell'\n};\nconst useStyles = makeStyles({\n    subtleSelection: {\n        ...createCustomFocusIndicatorStyle({\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            }\n        }, {\n            selector: 'focus-within'\n        }),\n        ':hover': {\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            }\n        }\n    }\n});\n/**\n * Apply styling to the DataGridRow slots based on the state\n */ export const useDataGridRowStyles_unstable = (state)=>{\n    'use no memo';\n    const isSubtle = useDataGridContext_unstable((ctx)=>ctx.subtleSelection);\n    const styles = useStyles();\n    useTableRowStyles_unstable(state);\n    state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className, isSubtle && styles.subtleSelection);\n    if (state.selectionCell) {\n        state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,SAASC,4BAA4B,QAAQ,0DAA0D;AACvG,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,aAAa,EAAE;AACnB,CAAC;AACD,MAAMC,SAAS,gBAAGT,QAAA;EAAAU,eAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAejB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,QAAQ,GAAGb,2BAA2B,CAAEc,GAAG,IAAGA,GAAG,CAACR,eAAe,CAAC;EACxE,MAAMS,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1BN,0BAA0B,CAACa,KAAK,CAAC;EACjCA,KAAK,CAACT,IAAI,CAACa,SAAS,GAAGnB,YAAY,CAACK,qBAAqB,CAACC,IAAI,EAAES,KAAK,CAACT,IAAI,CAACa,SAAS,EAAEH,QAAQ,IAAIE,MAAM,CAACT,eAAe,CAAC;EACzH,IAAIM,KAAK,CAACR,aAAa,EAAE;IACrBQ,KAAK,CAACR,aAAa,CAACY,SAAS,GAAGnB,YAAY,CAACK,qBAAqB,CAACE,aAAa,EAAEQ,KAAK,CAACR,aAAa,CAACY,SAAS,CAAC;EACpH;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DataGridRow/useDataGridRowStyles.styles.raw.js

@@ -1,7 +1,7 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles.styles';
-import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
 import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
 import { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';
 export const dataGridRowClassNames = {
@@ -9,20 +9,6 @@ export const dataGridRowClassNames = {
     selectionCell: 'fui-DataGridRow__selectionCell'
 };
 const useStyles = makeStyles({
-    singleSelectHeader: {
-        ...createCustomFocusIndicatorStyle({
-            [`& .${tableSelectionCellClassNames.root}`]: {
-                opacity: 0
-            }
-        }, {
-            selector: 'focus-within'
-        }),
-        ':hover': {
-            [`& .${tableSelectionCellClassNames.root}`]: {
-                opacity: 0
-            }
-        }
-    },
     subtleSelection: {
         ...createCustomFocusIndicatorStyle({
             [`& .${tableSelectionCellClassNames.root}`]: {
@@ -42,12 +28,10 @@ const useStyles = makeStyles({
  * Apply styling to the DataGridRow slots based on the state
  */ export const useDataGridRowStyles_unstable = (state)=>{
     'use no memo';
-    const isHeader = useIsInTableHeader();
-    const isSingleSelect = useDataGridContext_unstable((ctx)=>ctx.selection.selectionMode === 'single');
     const isSubtle = useDataGridContext_unstable((ctx)=>ctx.subtleSelection);
     const styles = useStyles();
     useTableRowStyles_unstable(state);
-    state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className, isSubtle && styles.subtleSelection, isHeader && isSingleSelect && styles.singleSelectHeader);
+    state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className, isSubtle && styles.subtleSelection);
     if (state.selectionCell) {
         state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);
     }

package/lib/components/DataGridRow/useDataGridRowStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridRow/useDataGridRowStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { DataGridRowSlots, DataGridRowState } from './DataGridRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles.styles';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\n\nexport const dataGridRowClassNames: SlotClassNames<DataGridRowSlots> = {\n  root: 'fui-DataGridRow',\n  selectionCell: 'fui-DataGridRow__selectionCell',\n};\n\nconst useStyles = makeStyles({\n  singleSelectHeader: {\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableSelectionCellClassNames.root}`]: {\n          opacity: 0,\n        },\n      },\n      { selector: 'focus-within' },\n    ),\n\n    ':hover': {\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        opacity: 0,\n      },\n    },\n  },\n\n  subtleSelection: {\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableSelectionCellClassNames.root}`]: {\n          opacity: 1,\n        },\n      },\n      { selector: 'focus-within' },\n    ),\n\n    ':hover': {\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        opacity: 1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the DataGridRow slots based on the state\n */\nexport const useDataGridRowStyles_unstable = (state: DataGridRowState): DataGridRowState => {\n  'use no memo';\n\n  const isHeader = useIsInTableHeader();\n  const isSingleSelect = useDataGridContext_unstable(ctx => ctx.selection.selectionMode === 'single');\n  const isSubtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);\n  const styles = useStyles();\n\n  useTableRowStyles_unstable(state);\n  state.root.className = mergeClasses(\n    dataGridRowClassNames.root,\n    state.root.className,\n    isSubtle && styles.subtleSelection,\n    isHeader && isSingleSelect && styles.singleSelectHeader,\n  );\n  if (state.selectionCell) {\n    state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","useTableRowStyles_unstable","useIsInTableHeader","useDataGridContext_unstable","tableSelectionCellClassNames","dataGridRowClassNames","root","selectionCell","useStyles","singleSelectHeader","opacity","selector","subtleSelection","useDataGridRowStyles_unstable","state","isHeader","isSingleSelect","ctx","selection","selectionMode","isSubtle","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,+BAA+B,QAAQ,0BAA0B;AAG1E,SAASC,0BAA0B,QAAQ,uCAAuC;AAClF,SAASC,kBAAkB,QAAQ,oCAAoC;AACvE,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,4BAA4B,QAAQ,2DAA2D;AAExG,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,eAAe;AACjB,EAAE;AAEF,MAAMC,YAAYV,WAAW;IAC3BW,oBAAoB;QAClB,GAAGT,gCACD;YACE,CAAC,CAAC,GAAG,EAAEI,6BAA6BE,IAAI,EAAE,CAAC,EAAE;gBAC3CI,SAAS;YACX;QACF,GACA;YAAEC,UAAU;QAAe,EAC5B;QAED,UAAU;YACR,CAAC,CAAC,GAAG,EAAEP,6BAA6BE,IAAI,EAAE,CAAC,EAAE;gBAC3CI,SAAS;YACX;QACF;IACF;IAEAE,iBAAiB;QACf,GAAGZ,gCACD;YACE,CAAC,CAAC,GAAG,EAAEI,6BAA6BE,IAAI,EAAE,CAAC,EAAE;gBAC3CI,SAAS;YACX;QACF,GACA;YAAEC,UAAU;QAAe,EAC5B;QAED,UAAU;YACR,CAAC,CAAC,GAAG,EAAEP,6BAA6BE,IAAI,EAAE,CAAC,EAAE;gBAC3CI,SAAS;YACX;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMG,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,WAAWb;IACjB,MAAMc,iBAAiBb,4BAA4Bc,CAAAA,MAAOA,IAAIC,SAAS,CAACC,aAAa,KAAK;IAC1F,MAAMC,WAAWjB,4BAA4Bc,CAAAA,MAAOA,IAAIL,eAAe;IACvE,MAAMS,SAASb;IAEfP,2BAA2Ba;IAC3BA,MAAMR,IAAI,CAACgB,SAAS,GAAGvB,aACrBM,sBAAsBC,IAAI,EAC1BQ,MAAMR,IAAI,CAACgB,SAAS,EACpBF,YAAYC,OAAOT,eAAe,EAClCG,YAAYC,kBAAkBK,OAAOZ,kBAAkB;IAEzD,IAAIK,MAAMP,aAAa,EAAE;QACvBO,MAAMP,aAAa,CAACe,SAAS,GAAGvB,aAAaM,sBAAsBE,aAAa,EAAEO,MAAMP,aAAa,CAACe,SAAS;IACjH;IAEA,OAAOR;AACT,EAAE"}
+{"version":3,"sources":["../src/components/DataGridRow/useDataGridRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { DataGridRowSlots, DataGridRowState } from './DataGridRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles.styles';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\n\nexport const dataGridRowClassNames: SlotClassNames<DataGridRowSlots> = {\n  root: 'fui-DataGridRow',\n  selectionCell: 'fui-DataGridRow__selectionCell',\n};\n\nconst useStyles = makeStyles({\n  subtleSelection: {\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableSelectionCellClassNames.root}`]: {\n          opacity: 1,\n        },\n      },\n      { selector: 'focus-within' },\n    ),\n\n    ':hover': {\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        opacity: 1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the DataGridRow slots based on the state\n */\nexport const useDataGridRowStyles_unstable = (state: DataGridRowState): DataGridRowState => {\n  'use no memo';\n\n  const isSubtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);\n  const styles = useStyles();\n\n  useTableRowStyles_unstable(state);\n  state.root.className = mergeClasses(\n    dataGridRowClassNames.root,\n    state.root.className,\n    isSubtle && styles.subtleSelection,\n  );\n  if (state.selectionCell) {\n    state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","useTableRowStyles_unstable","useDataGridContext_unstable","tableSelectionCellClassNames","dataGridRowClassNames","root","selectionCell","useStyles","subtleSelection","opacity","selector","useDataGridRowStyles_unstable","state","isSubtle","ctx","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,+BAA+B,QAAQ,0BAA0B;AAG1E,SAASC,0BAA0B,QAAQ,uCAAuC;AAClF,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,4BAA4B,QAAQ,2DAA2D;AAExG,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,eAAe;AACjB,EAAE;AAEF,MAAMC,YAAYT,WAAW;IAC3BU,iBAAiB;QACf,GAAGR,gCACD;YACE,CAAC,CAAC,GAAG,EAAEG,6BAA6BE,IAAI,EAAE,CAAC,EAAE;gBAC3CI,SAAS;YACX;QACF,GACA;YAAEC,UAAU;QAAe,EAC5B;QAED,UAAU;YACR,CAAC,CAAC,GAAG,EAAEP,6BAA6BE,IAAI,EAAE,CAAC,EAAE;gBAC3CI,SAAS;YACX;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,WAAWX,4BAA4BY,CAAAA,MAAOA,IAAIN,eAAe;IACvE,MAAMO,SAASR;IAEfN,2BAA2BW;IAC3BA,MAAMP,IAAI,CAACW,SAAS,GAAGjB,aACrBK,sBAAsBC,IAAI,EAC1BO,MAAMP,IAAI,CAACW,SAAS,EACpBH,YAAYE,OAAOP,eAAe;IAEpC,IAAII,MAAMN,aAAa,EAAE;QACvBM,MAAMN,aAAa,CAACU,SAAS,GAAGjB,aAAaK,sBAAsBE,aAAa,EAAEM,MAAMN,aAAa,CAACU,SAAS;IACjH;IAEA,OAAOJ;AACT,EAAE"}

package/lib/components/DataGridSelectionCell/DataGridSelectionCell.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useDataGridSelectionCell_unstable } from './useDataGridSelectionCell';
 import { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionCell';

package/lib/components/DataGridSelectionCell/DataGridSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridSelectionCell/DataGridSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridSelectionCell_unstable } from './useDataGridSelectionCell';\nimport { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionCell';\nimport { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles.styles';\nimport type { DataGridSelectionCellProps } from './DataGridSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DataGridSelectionCell component\n */\nexport const DataGridSelectionCell: ForwardRefComponent<DataGridSelectionCellProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridSelectionCell_unstable(props, ref);\n\n  useDataGridSelectionCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDataGridSelectionCellStyles_unstable')(state);\n\n  return renderDataGridSelectionCell_unstable(state);\n});\n\nDataGridSelectionCell.displayName = 'DataGridSelectionCell';\n"],"names":["React","useDataGridSelectionCell_unstable","renderDataGridSelectionCell_unstable","useDataGridSelectionCellStyles_unstable","useCustomStyleHook_unstable","DataGridSelectionCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sCAAyEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQR,kCAAkCM,OAAOC;IAEvDL,wCAAwCM;IAExCL,4BAA4B,2CAA2CK;IAEvE,OAAOP,qCAAqCO;AAC9C,GAAG;AAEHJ,sBAAsBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/DataGridSelectionCell/DataGridSelectionCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDataGridSelectionCell_unstable } from './useDataGridSelectionCell';\nimport { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionCell';\nimport { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles.styles';\nimport type { DataGridSelectionCellProps } from './DataGridSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DataGridSelectionCell component\n */\nexport const DataGridSelectionCell: ForwardRefComponent<DataGridSelectionCellProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridSelectionCell_unstable(props, ref);\n\n  useDataGridSelectionCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDataGridSelectionCellStyles_unstable')(state);\n\n  return renderDataGridSelectionCell_unstable(state);\n});\n\nDataGridSelectionCell.displayName = 'DataGridSelectionCell';\n"],"names":["React","useDataGridSelectionCell_unstable","renderDataGridSelectionCell_unstable","useDataGridSelectionCellStyles_unstable","useCustomStyleHook_unstable","DataGridSelectionCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sCAAyEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQR,kCAAkCM,OAAOC;IAEvDL,wCAAwCM;IAExCL,4BAA4B,2CAA2CK;IAEvE,OAAOP,qCAAqCO;AAC9C,GAAG;AAEHJ,sBAAsBK,WAAW,GAAG"}

package/lib/components/DataGridSelectionCell/renderDataGridSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridSelectionCell/renderDataGridSelectionCell.tsx"],"sourcesContent":["import type { DataGridSelectionCellState } from './DataGridSelectionCell.types';\nimport { renderTableSelectionCell_unstable } from '../TableSelectionCell/renderTableSelectionCell';\n\n/**\n * Render the final JSX of DataGridSelectionCell\n */\nexport const renderDataGridSelectionCell_unstable = (state: DataGridSelectionCellState) => {\n  return renderTableSelectionCell_unstable(state);\n};\n"],"names":["renderTableSelectionCell_unstable","renderDataGridSelectionCell_unstable","state"],"mappings":"AACA,SAASA,iCAAiC,QAAQ,iDAAiD;AAEnG;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAACC;IACnD,OAAOF,kCAAkCE;AAC3C,EAAE"}
+{"version":3,"sources":["../src/components/DataGridSelectionCell/renderDataGridSelectionCell.tsx"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\nimport type { DataGridSelectionCellState } from './DataGridSelectionCell.types';\nimport { renderTableSelectionCell_unstable } from '../TableSelectionCell/renderTableSelectionCell';\n\n/**\n * Render the final JSX of DataGridSelectionCell\n */\nexport const renderDataGridSelectionCell_unstable = (state: DataGridSelectionCellState): JSXElement => {\n  return renderTableSelectionCell_unstable(state);\n};\n"],"names":["renderTableSelectionCell_unstable","renderDataGridSelectionCell_unstable","state"],"mappings":"AAEA,SAASA,iCAAiC,QAAQ,iDAAiD;AAEnG;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAACC;IACnD,OAAOF,kCAAkCE;AAC3C,EAAE"}

package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useEventCallback } from '@fluentui/react-utilities';
 import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
@@ -39,6 +40,7 @@ import { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSe
         invisible: isHeader && type === 'radio',
         'aria-selected': checked === 'mixed' ? undefined : checked,
         subtle,
+        radioIndicator: isHeader ? null : undefined,
         ...props,
         onClick
     }, ref);

package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridSelectionCell/useDataGridSelectionCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\nimport { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';\nimport type { DataGridSelectionCellProps, DataGridSelectionCellState } from './DataGridSelectionCell.types';\n\n/**\n * Create the state required to render DataGridSelectionCell.\n *\n * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,\n * before being passed to renderDataGridSelectionCell_unstable.\n *\n * @param props - props from this instance of DataGridSelectionCell\n * @param ref - reference to root HTMLElement of DataGridSelectionCell\n */\nexport const useDataGridSelectionCell_unstable = (\n  props: DataGridSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridSelectionCellState => {\n  const isHeader = useIsInTableHeader();\n  const rowId = useTableRowIdContext();\n  const subtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);\n  const checked = useDataGridContext_unstable(ctx => {\n    if (isHeader && ctx.selection.selectionMode === 'multiselect') {\n      return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;\n    }\n\n    return ctx.selection.isRowSelected(rowId);\n  });\n\n  const toggleAllRows = useDataGridContext_unstable(ctx => ctx.selection.toggleAllRows);\n  const type = useDataGridContext_unstable(ctx =>\n    ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio',\n  );\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableCellElement>) => {\n    if (isHeader) {\n      toggleAllRows(e);\n    }\n\n    props.onClick?.(e);\n  });\n\n  return useTableSelectionCell_unstable(\n    {\n      as: 'div',\n      role: 'gridcell',\n      checked,\n      type,\n      invisible: isHeader && type === 'radio',\n      'aria-selected': checked === 'mixed' ? undefined : checked,\n      subtle,\n      ...props,\n      onClick,\n    },\n    ref,\n  );\n};\n"],"names":["React","useEventCallback","useDataGridContext_unstable","useTableRowIdContext","useIsInTableHeader","useTableSelectionCell_unstable","useDataGridSelectionCell_unstable","props","ref","isHeader","rowId","subtle","ctx","subtleSelection","checked","selection","selectionMode","allRowsSelected","someRowsSelected","isRowSelected","toggleAllRows","type","onClick","e","as","role","invisible","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE,SAASC,kBAAkB,QAAQ,oCAAoC;AACvE,SAASC,8BAA8B,QAAQ,8CAA8C;AAG7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAMC,WAAWL;IACjB,MAAMM,QAAQP;IACd,MAAMQ,SAAST,4BAA4BU,CAAAA,MAAOA,IAAIC,eAAe;IACrE,MAAMC,UAAUZ,4BAA4BU,CAAAA;QAC1C,IAAIH,YAAYG,IAAIG,SAAS,CAACC,aAAa,KAAK,eAAe;YAC7D,OAAOJ,IAAIG,SAAS,CAACE,eAAe,GAAG,OAAOL,IAAIG,SAAS,CAACG,gBAAgB,GAAG,UAAU;QAC3F;QAEA,OAAON,IAAIG,SAAS,CAACI,aAAa,CAACT;IACrC;IAEA,MAAMU,gBAAgBlB,4BAA4BU,CAAAA,MAAOA,IAAIG,SAAS,CAACK,aAAa;IACpF,MAAMC,OAAOnB,4BAA4BU,CAAAA,MACvCA,IAAIG,SAAS,CAACC,aAAa,KAAK,gBAAgB,aAAa;IAG/D,MAAMM,UAAUrB,iBAAiB,CAACsB;YAKhChB;QAJA,IAAIE,UAAU;YACZW,cAAcG;QAChB;SAEAhB,iBAAAA,MAAMe,OAAO,cAAbf,qCAAAA,oBAAAA,OAAgBgB;IAClB;IAEA,OAAOlB,+BACL;QACEmB,IAAI;QACJC,MAAM;QACNX;QACAO;QACAK,WAAWjB,YAAYY,SAAS;QAChC,iBAAiBP,YAAY,UAAUa,YAAYb;QACnDH;QACA,GAAGJ,KAAK;QACRe;IACF,GACAd;AAEJ,EAAE"}
+{"version":3,"sources":["../src/components/DataGridSelectionCell/useDataGridSelectionCell.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\nimport { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';\nimport type { DataGridSelectionCellProps, DataGridSelectionCellState } from './DataGridSelectionCell.types';\n\n/**\n * Create the state required to render DataGridSelectionCell.\n *\n * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,\n * before being passed to renderDataGridSelectionCell_unstable.\n *\n * @param props - props from this instance of DataGridSelectionCell\n * @param ref - reference to root HTMLElement of DataGridSelectionCell\n */\nexport const useDataGridSelectionCell_unstable = (\n  props: DataGridSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridSelectionCellState => {\n  const isHeader = useIsInTableHeader();\n  const rowId = useTableRowIdContext();\n  const subtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);\n  const checked = useDataGridContext_unstable(ctx => {\n    if (isHeader && ctx.selection.selectionMode === 'multiselect') {\n      return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;\n    }\n\n    return ctx.selection.isRowSelected(rowId);\n  });\n\n  const toggleAllRows = useDataGridContext_unstable(ctx => ctx.selection.toggleAllRows);\n  const type = useDataGridContext_unstable(ctx =>\n    ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio',\n  );\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableCellElement>) => {\n    if (isHeader) {\n      toggleAllRows(e);\n    }\n\n    props.onClick?.(e);\n  });\n\n  return useTableSelectionCell_unstable(\n    {\n      as: 'div',\n      role: 'gridcell',\n      checked,\n      type,\n      invisible: isHeader && type === 'radio',\n      'aria-selected': checked === 'mixed' ? undefined : checked,\n      subtle,\n      radioIndicator: isHeader ? null : undefined,\n      ...props,\n      onClick,\n    },\n    ref,\n  );\n};\n"],"names":["React","useEventCallback","useDataGridContext_unstable","useTableRowIdContext","useIsInTableHeader","useTableSelectionCell_unstable","useDataGridSelectionCell_unstable","props","ref","isHeader","rowId","subtle","ctx","subtleSelection","checked","selection","selectionMode","allRowsSelected","someRowsSelected","isRowSelected","toggleAllRows","type","onClick","e","as","role","invisible","undefined","radioIndicator"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE,SAASC,kBAAkB,QAAQ,oCAAoC;AACvE,SAASC,8BAA8B,QAAQ,8CAA8C;AAG7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAMC,WAAWL;IACjB,MAAMM,QAAQP;IACd,MAAMQ,SAAST,4BAA4BU,CAAAA,MAAOA,IAAIC,eAAe;IACrE,MAAMC,UAAUZ,4BAA4BU,CAAAA;QAC1C,IAAIH,YAAYG,IAAIG,SAAS,CAACC,aAAa,KAAK,eAAe;YAC7D,OAAOJ,IAAIG,SAAS,CAACE,eAAe,GAAG,OAAOL,IAAIG,SAAS,CAACG,gBAAgB,GAAG,UAAU;QAC3F;QAEA,OAAON,IAAIG,SAAS,CAACI,aAAa,CAACT;IACrC;IAEA,MAAMU,gBAAgBlB,4BAA4BU,CAAAA,MAAOA,IAAIG,SAAS,CAACK,aAAa;IACpF,MAAMC,OAAOnB,4BAA4BU,CAAAA,MACvCA,IAAIG,SAAS,CAACC,aAAa,KAAK,gBAAgB,aAAa;IAG/D,MAAMM,UAAUrB,iBAAiB,CAACsB;YAKhChB;QAJA,IAAIE,UAAU;YACZW,cAAcG;QAChB;SAEAhB,iBAAAA,MAAMe,OAAO,cAAbf,qCAAAA,oBAAAA,OAAgBgB;IAClB;IAEA,OAAOlB,+BACL;QACEmB,IAAI;QACJC,MAAM;QACNX;QACAO;QACAK,WAAWjB,YAAYY,SAAS;QAChC,iBAAiBP,YAAY,UAAUa,YAAYb;QACnDH;QACAiB,gBAAgBnB,WAAW,OAAOkB;QAClC,GAAGpB,KAAK;QACRe;IACF,GACAd;AAEJ,EAAE"}

package/lib/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { mergeClasses } from '@griffel/react';
 import { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles.styles';
 export const dataGridSelectionCellClassNames = {

package/lib/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","useTableSelectionCellStyles_unstable","dataGridSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useDataGridSelectionCellStyles_unstable","state","className"],"sources":["useDataGridSelectionCellStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nexport const dataGridSelectionCellClassNames = {\n    root: 'fui-DataGridSelectionCell',\n    checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator',\n    radioIndicator: 'fui-DataGridSelectionCell__radioIndicator'\n};\n/**\n * Apply styling to the DataGridSelectionCell slots based on the state\n */ export const useDataGridSelectionCellStyles_unstable = (state)=>{\n    'use no memo';\n    useTableSelectionCellStyles_unstable(state);\n    state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);\n    if (state.checkboxIndicator) {\n        state.checkboxIndicator.className = mergeClasses(dataGridSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n    }\n    if (state.radioIndicator) {\n        state.radioIndicator.className = mergeClasses(dataGridSelectionCellClassNames.radioIndicator, state.radioIndicator.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,oCAAoC,QAAQ,0DAA0D;AAC/G,OAAO,MAAMC,+BAA+B,GAAG;EAC3CC,IAAI,EAAE,2BAA2B;EACjCC,iBAAiB,EAAE,8CAA8C;EACjEC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,uCAAuC,GAAIC,KAAK,IAAG;EAChE,aAAa;;EACbN,oCAAoC,CAACM,KAAK,CAAC;EAC3CA,KAAK,CAACJ,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,+BAA+B,CAACC,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACK,SAAS,CAAC;EAC/F,IAAID,KAAK,CAACH,iBAAiB,EAAE;IACzBG,KAAK,CAACH,iBAAiB,CAACI,SAAS,GAAGR,YAAY,CAACE,+BAA+B,CAACE,iBAAiB,EAAEG,KAAK,CAACH,iBAAiB,CAACI,SAAS,CAAC;EAC1I;EACA,IAAID,KAAK,CAACF,cAAc,EAAE;IACtBE,KAAK,CAACF,cAAc,CAACG,SAAS,GAAGR,YAAY,CAACE,+BAA+B,CAACG,cAAc,EAAEE,KAAK,CAACF,cAAc,CAACG,SAAS,CAAC;EACjI;EACA,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","useTableSelectionCellStyles_unstable","dataGridSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useDataGridSelectionCellStyles_unstable","state","className"],"sources":["useDataGridSelectionCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses } from '@griffel/react';\nimport { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nexport const dataGridSelectionCellClassNames = {\n    root: 'fui-DataGridSelectionCell',\n    checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator',\n    radioIndicator: 'fui-DataGridSelectionCell__radioIndicator'\n};\n/**\n * Apply styling to the DataGridSelectionCell slots based on the state\n */ export const useDataGridSelectionCellStyles_unstable = (state)=>{\n    'use no memo';\n    useTableSelectionCellStyles_unstable(state);\n    state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);\n    if (state.checkboxIndicator) {\n        state.checkboxIndicator.className = mergeClasses(dataGridSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n    }\n    if (state.radioIndicator) {\n        state.radioIndicator.className = mergeClasses(dataGridSelectionCellClassNames.radioIndicator, state.radioIndicator.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,oCAAoC,QAAQ,0DAA0D;AAC/G,OAAO,MAAMC,+BAA+B,GAAG;EAC3CC,IAAI,EAAE,2BAA2B;EACjCC,iBAAiB,EAAE,8CAA8C;EACjEC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,uCAAuC,GAAIC,KAAK,IAAG;EAChE,aAAa;;EACbN,oCAAoC,CAACM,KAAK,CAAC;EAC3CA,KAAK,CAACJ,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,+BAA+B,CAACC,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACK,SAAS,CAAC;EAC/F,IAAID,KAAK,CAACH,iBAAiB,EAAE;IACzBG,KAAK,CAACH,iBAAiB,CAACI,SAAS,GAAGR,YAAY,CAACE,+BAA+B,CAACE,iBAAiB,EAAEG,KAAK,CAACH,iBAAiB,CAACI,SAAS,CAAC;EAC1I;EACA,IAAID,KAAK,CAACF,cAAc,EAAE;IACtBE,KAAK,CAACF,cAAc,CAACG,SAAS,GAAGR,YAAY,CAACE,+BAA+B,CAACG,cAAc,EAAEE,KAAK,CAACF,cAAc,CAACG,SAAS,CAAC;EACjI;EACA,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses } from '@griffel/react';
 import { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles.styles';
 export const dataGridSelectionCellClassNames = {

package/lib/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridSelectionCellSlots, DataGridSelectionCellState } from './DataGridSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\n\nexport const dataGridSelectionCellClassNames: SlotClassNames<DataGridSelectionCellSlots> = {\n  root: 'fui-DataGridSelectionCell',\n  checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-DataGridSelectionCell__radioIndicator',\n};\n\n/**\n * Apply styling to the DataGridSelectionCell slots based on the state\n */\nexport const useDataGridSelectionCellStyles_unstable = (\n  state: DataGridSelectionCellState,\n): DataGridSelectionCellState => {\n  'use no memo';\n\n  useTableSelectionCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);\n\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      dataGridSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      dataGridSelectionCellClassNames.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["mergeClasses","useTableSelectionCellStyles_unstable","dataGridSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useDataGridSelectionCellStyles_unstable","state","className"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,oCAAoC,QAAQ,2DAA2D;AAEhH,OAAO,MAAMC,kCAA8E;IACzFC,MAAM;IACNC,mBAAmB;IACnBC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,0CAA0C,CACrDC;IAEA;IAEAN,qCAAqCM;IACrCA,MAAMJ,IAAI,CAACK,SAAS,GAAGR,aAAaE,gCAAgCC,IAAI,EAAEI,MAAMJ,IAAI,CAACK,SAAS;IAE9F,IAAID,MAAMH,iBAAiB,EAAE;QAC3BG,MAAMH,iBAAiB,CAACI,SAAS,GAAGR,aAClCE,gCAAgCE,iBAAiB,EACjDG,MAAMH,iBAAiB,CAACI,SAAS;IAErC;IAEA,IAAID,MAAMF,cAAc,EAAE;QACxBE,MAAMF,cAAc,CAACG,SAAS,GAAGR,aAC/BE,gCAAgCG,cAAc,EAC9CE,MAAMF,cAAc,CAACG,SAAS;IAElC;IAEA,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport type { DataGridSelectionCellSlots, DataGridSelectionCellState } from './DataGridSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\n\nexport const dataGridSelectionCellClassNames: SlotClassNames<DataGridSelectionCellSlots> = {\n  root: 'fui-DataGridSelectionCell',\n  checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-DataGridSelectionCell__radioIndicator',\n};\n\n/**\n * Apply styling to the DataGridSelectionCell slots based on the state\n */\nexport const useDataGridSelectionCellStyles_unstable = (\n  state: DataGridSelectionCellState,\n): DataGridSelectionCellState => {\n  'use no memo';\n\n  useTableSelectionCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);\n\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      dataGridSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      dataGridSelectionCellClassNames.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["mergeClasses","useTableSelectionCellStyles_unstable","dataGridSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useDataGridSelectionCellStyles_unstable","state","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,oCAAoC,QAAQ,2DAA2D;AAEhH,OAAO,MAAMC,kCAA8E;IACzFC,MAAM;IACNC,mBAAmB;IACnBC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,0CAA0C,CACrDC;IAEA;IAEAN,qCAAqCM;IACrCA,MAAMJ,IAAI,CAACK,SAAS,GAAGR,aAAaE,gCAAgCC,IAAI,EAAEI,MAAMJ,IAAI,CAACK,SAAS;IAE9F,IAAID,MAAMH,iBAAiB,EAAE;QAC3BG,MAAMH,iBAAiB,CAACI,SAAS,GAAGR,aAClCE,gCAAgCE,iBAAiB,EACjDG,MAAMH,iBAAiB,CAACI,SAAS;IAErC;IAEA,IAAID,MAAMF,cAAc,EAAE;QACxBE,MAAMF,cAAc,CAACG,SAAS,GAAGR,aAC/BE,gCAAgCG,cAAc,EAC9CE,MAAMF,cAAc,CAACG,SAAS;IAElC;IAEA,OAAOD;AACT,EAAE"}

package/lib/components/Table/Table.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTable_unstable } from './useTable';
 import { renderTable_unstable } from './renderTable';

package/lib/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Table/Table.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTable_unstable } from './useTable';\nimport { renderTable_unstable } from './renderTable';\nimport { useTableStyles_unstable } from './useTableStyles.styles';\nimport type { TableProps } from './Table.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTableContextValues_unstable } from './useTableContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Table component\n */\nexport const Table: ForwardRefComponent<TableProps> = React.forwardRef((props, ref) => {\n  const state = useTable_unstable(props, ref);\n\n  useTableStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableStyles_unstable')(state);\n\n  return renderTable_unstable(state, useTableContextValues_unstable(state));\n});\n\nTable.displayName = 'Table';\n"],"names":["React","useTable_unstable","renderTable_unstable","useTableStyles_unstable","useTableContextValues_unstable","useCustomStyleHook_unstable","Table","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQT,kBAAkBO,OAAOC;IAEvCN,wBAAwBO;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOR,qBAAqBQ,OAAON,+BAA+BM;AACpE,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTable_unstable } from './useTable';\nimport { renderTable_unstable } from './renderTable';\nimport { useTableStyles_unstable } from './useTableStyles.styles';\nimport type { TableProps } from './Table.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTableContextValues_unstable } from './useTableContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Table component\n */\nexport const Table: ForwardRefComponent<TableProps> = React.forwardRef((props, ref) => {\n  const state = useTable_unstable(props, ref);\n\n  useTableStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableStyles_unstable')(state);\n\n  return renderTable_unstable(state, useTableContextValues_unstable(state));\n});\n\nTable.displayName = 'Table';\n"],"names":["React","useTable_unstable","renderTable_unstable","useTableStyles_unstable","useTableContextValues_unstable","useCustomStyleHook_unstable","Table","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQT,kBAAkBO,OAAOC;IAEvCN,wBAAwBO;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOR,qBAAqBQ,OAAON,+BAA+BM;AACpE,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

package/lib/components/Table/renderTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Table/renderTable.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableState, TableSlots, TableContextValues } from './Table.types';\nimport { TableContextProvider } from '../../contexts/tableContext';\n\n/**\n * Render the final JSX of Table\n */\nexport const renderTable_unstable = (state: TableState, contextValues: TableContextValues) => {\n  assertSlots<TableSlots>(state);\n\n  return (\n    <TableContextProvider value={contextValues.table}>\n      <state.root />\n    </TableContextProvider>\n  );\n};\n"],"names":["assertSlots","TableContextProvider","renderTable_unstable","state","contextValues","value","table","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,oBAAoB,QAAQ,8BAA8B;AAEnE;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC;IACtDJ,YAAwBG;IAExB,qBACE,KAACF;QAAqBI,OAAOD,cAAcE,KAAK;kBAC9C,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/Table/renderTable.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TableState, TableSlots, TableContextValues } from './Table.types';\nimport { TableContextProvider } from '../../contexts/tableContext';\n\n/**\n * Render the final JSX of Table\n */\nexport const renderTable_unstable = (state: TableState, contextValues: TableContextValues): JSXElement => {\n  assertSlots<TableSlots>(state);\n\n  return (\n    <TableContextProvider value={contextValues.table}>\n      <state.root />\n    </TableContextProvider>\n  );\n};\n"],"names":["assertSlots","TableContextProvider","renderTable_unstable","state","contextValues","value","table","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,oBAAoB,QAAQ,8BAA8B;AAEnE;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC;IACtDJ,YAAwBG;IAExB,qBACE,KAACF;QAAqBI,OAAOD,cAAcE,KAAK;kBAC9C,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

package/lib/components/Table/useTableContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export function useTableContextValues_unstable(state) {
     const { size, noNativeElements, sortable } = state;

package/lib/components/Table/useTableContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Table/useTableContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableContextValues, TableState } from './Table.types';\n\nexport function useTableContextValues_unstable(state: TableState): TableContextValues {\n  const { size, noNativeElements, sortable } = state;\n\n  const tableContext = React.useMemo(\n    () => ({\n      noNativeElements,\n      size,\n      sortable,\n    }),\n    [noNativeElements, size, sortable],\n  );\n\n  return {\n    table: tableContext,\n  };\n}\n"],"names":["React","useTableContextValues_unstable","state","size","noNativeElements","sortable","tableContext","useMemo","table"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,+BAA+BC,KAAiB;IAC9D,MAAM,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,QAAQ,EAAE,GAAGH;IAE7C,MAAMI,eAAeN,MAAMO,OAAO,CAChC,IAAO,CAAA;YACLH;YACAD;YACAE;QACF,CAAA,GACA;QAACD;QAAkBD;QAAME;KAAS;IAGpC,OAAO;QACLG,OAAOF;IACT;AACF"}
+{"version":3,"sources":["../src/components/Table/useTableContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TableContextValues, TableState } from './Table.types';\n\nexport function useTableContextValues_unstable(state: TableState): TableContextValues {\n  const { size, noNativeElements, sortable } = state;\n\n  const tableContext = React.useMemo(\n    () => ({\n      noNativeElements,\n      size,\n      sortable,\n    }),\n    [noNativeElements, size, sortable],\n  );\n\n  return {\n    table: tableContext,\n  };\n}\n"],"names":["React","useTableContextValues_unstable","state","size","noNativeElements","sortable","tableContext","useMemo","table"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,+BAA+BC,KAAiB;IAC9D,MAAM,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,QAAQ,EAAE,GAAGH;IAE7C,MAAMI,eAAeN,MAAMO,OAAO,CAChC,IAAO,CAAA;YACLH;YACAD;YACAE;QACF,CAAA,GACA;QAACD;QAAkBD;QAAME;KAAS;IAGpC,OAAO;QACLG,OAAOF;IACT;AACF"}

package/lib/components/Table/useTableStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const tableClassName = 'fui-Table';

package/lib/components/Table/useTableStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","tableClassName","tableClassNames","root","useTableLayoutStyles","mc9l5x","ha4doy","a9b677","B73mfa3","d","useFlexLayoutStyles","useStyles","po53p8","De3pzq","useTableStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames = {\n    root: 'fui-Table'\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table',\n        verticalAlign: 'middle',\n        width: '100%',\n        tableLayout: 'fixed'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'block'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        borderCollapse: 'collapse',\n        backgroundColor: tokens.colorSubtleBackground\n    }\n});\n/**\n * Apply styling to the Table slots based on the state\n */ export const useTableStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableClassName, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG,WAAW;AACzC,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAO5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAK,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAI3B,CAAC;AACF;AACA;AACA;AAAI,MAAME,SAAS,gBAAGb,QAAA;EAAAK,IAAA;IAAAS,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,uBAAuB,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACb,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1B,MAAMM,YAAY,GAAG;IACjBC,KAAK,EAAEd,oBAAoB,CAAC,CAAC;IAC7Be,IAAI,EAAET,mBAAmB,CAAC;EAC9B,CAAC;EACDK,KAAK,CAACZ,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CAACE,cAAc,EAAEe,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAAChB,IAAI,GAAGc,YAAY,CAACC,KAAK,CAACf,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACiB,SAAS,CAAC;EACjK,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","tableClassName","tableClassNames","root","useTableLayoutStyles","mc9l5x","ha4doy","a9b677","B73mfa3","d","useFlexLayoutStyles","useStyles","po53p8","De3pzq","useTableStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames = {\n    root: 'fui-Table'\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table',\n        verticalAlign: 'middle',\n        width: '100%',\n        tableLayout: 'fixed'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'block'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        borderCollapse: 'collapse',\n        backgroundColor: tokens.colorSubtleBackground\n    }\n});\n/**\n * Apply styling to the Table slots based on the state\n */ export const useTableStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableClassName, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG,WAAW;AACzC,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAO5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGZ,QAAA;EAAAK,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAI3B,CAAC;AACF;AACA;AACA;AAAI,MAAME,SAAS,gBAAGb,QAAA;EAAAK,IAAA;IAAAS,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,uBAAuB,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACb,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1B,MAAMM,YAAY,GAAG;IACjBC,KAAK,EAAEd,oBAAoB,CAAC,CAAC;IAC7Be,IAAI,EAAET,mBAAmB,CAAC;EAC9B,CAAC;EACDK,KAAK,CAACZ,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CAACE,cAAc,EAAEe,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAAChB,IAAI,GAAGc,YAAY,CAACC,KAAK,CAACf,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACiB,SAAS,CAAC;EACjK,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Table/useTableStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const tableClassName = 'fui-Table';

package/lib/components/Table/useTableStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Table/useTableStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n  root: 'fui-Table',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table',\n    verticalAlign: 'middle',\n    width: '100%',\n    tableLayout: 'fixed',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    borderCollapse: 'collapse',\n    backgroundColor: tokens.colorSubtleBackground,\n  },\n});\n\n/**\n * Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableClassName,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tableClassName","tableClassNames","root","useTableLayoutStyles","display","verticalAlign","width","tableLayout","useFlexLayoutStyles","useStyles","borderCollapse","backgroundColor","colorSubtleBackground","useTableStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,iBAAiB,YAAY;AAC1C,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,WAAW;IACtCK,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,OAAO;QACPC,aAAa;IACf;AACF;AAEA,MAAMC,sBAAsBX,WAAW;IACrCK,MAAM;QACJE,SAAS;IACX;AACF;AAEA;;CAEC,GACD,MAAMK,YAAYZ,WAAW;IAC3BK,MAAM;QACJQ,gBAAgB;QAChBC,iBAAiBZ,OAAOa,qBAAqB;IAC/C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC;IAEA,MAAMC,SAASN;IACf,MAAMO,eAAe;QACnBC,OAAOd;QACPe,MAAMV;IACR;IACAM,MAAMZ,IAAI,CAACiB,SAAS,GAAGrB,aACrBE,gBACAe,OAAOb,IAAI,EACXY,MAAMM,gBAAgB,GAAGJ,aAAaE,IAAI,CAAChB,IAAI,GAAGc,aAAaC,KAAK,CAACf,IAAI,EACzEY,MAAMZ,IAAI,CAACiB,SAAS;IAGtB,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Table/useTableStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n  root: 'fui-Table',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table',\n    verticalAlign: 'middle',\n    width: '100%',\n    tableLayout: 'fixed',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    borderCollapse: 'collapse',\n    backgroundColor: tokens.colorSubtleBackground,\n  },\n});\n\n/**\n * Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableClassName,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tableClassName","tableClassNames","root","useTableLayoutStyles","display","verticalAlign","width","tableLayout","useFlexLayoutStyles","useStyles","borderCollapse","backgroundColor","colorSubtleBackground","useTableStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,iBAAiB,YAAY;AAC1C,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,WAAW;IACtCK,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,OAAO;QACPC,aAAa;IACf;AACF;AAEA,MAAMC,sBAAsBX,WAAW;IACrCK,MAAM;QACJE,SAAS;IACX;AACF;AAEA;;CAEC,GACD,MAAMK,YAAYZ,WAAW;IAC3BK,MAAM;QACJQ,gBAAgB;QAChBC,iBAAiBZ,OAAOa,qBAAqB;IAC/C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC;IAEA,MAAMC,SAASN;IACf,MAAMO,eAAe;QACnBC,OAAOd;QACPe,MAAMV;IACR;IACAM,MAAMZ,IAAI,CAACiB,SAAS,GAAGrB,aACrBE,gBACAe,OAAOb,IAAI,EACXY,MAAMM,gBAAgB,GAAGJ,aAAaE,IAAI,CAAChB,IAAI,GAAGc,aAAaC,KAAK,CAACf,IAAI,EACzEY,MAAMZ,IAAI,CAACiB,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib/components/TableBody/TableBody.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTableBody_unstable } from './useTableBody';
 import { renderTableBody_unstable } from './renderTableBody';

package/lib/components/TableBody/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableBody/TableBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableBody_unstable } from './useTableBody';\nimport { renderTableBody_unstable } from './renderTableBody';\nimport { useTableBodyStyles_unstable } from './useTableBodyStyles.styles';\nimport type { TableBodyProps } from './TableBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableBody component\n */\nexport const TableBody: ForwardRefComponent<TableBodyProps> = React.forwardRef((props, ref) => {\n  const state = useTableBody_unstable(props, ref);\n\n  useTableBodyStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableBodyStyles_unstable')(state);\n\n  return renderTableBody_unstable(state);\n});\n\nTableBody.displayName = 'TableBody';\n"],"names":["React","useTableBody_unstable","renderTableBody_unstable","useTableBodyStyles_unstable","useCustomStyleHook_unstable","TableBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAG1E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAE3CL,4BAA4BM;IAE5BL,4BAA4B,+BAA+BK;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TableBody/TableBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTableBody_unstable } from './useTableBody';\nimport { renderTableBody_unstable } from './renderTableBody';\nimport { useTableBodyStyles_unstable } from './useTableBodyStyles.styles';\nimport type { TableBodyProps } from './TableBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableBody component\n */\nexport const TableBody: ForwardRefComponent<TableBodyProps> = React.forwardRef((props, ref) => {\n  const state = useTableBody_unstable(props, ref);\n\n  useTableBodyStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableBodyStyles_unstable')(state);\n\n  return renderTableBody_unstable(state);\n});\n\nTableBody.displayName = 'TableBody';\n"],"names":["React","useTableBody_unstable","renderTableBody_unstable","useTableBodyStyles_unstable","useCustomStyleHook_unstable","TableBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAG1E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAE3CL,4BAA4BM;IAE5BL,4BAA4B,+BAA+BK;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

package/lib/components/TableBody/renderTableBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableBody/renderTableBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableBodyState, TableBodySlots } from './TableBody.types';\n\n/**\n * Render the final JSX of TableBody\n */\nexport const renderTableBody_unstable = (state: TableBodyState) => {\n  assertSlots<TableBodySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTableBody_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/TableBody/renderTableBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TableBodyState, TableBodySlots } from './TableBody.types';\n\n/**\n * Render the final JSX of TableBody\n */\nexport const renderTableBody_unstable = (state: TableBodyState): JSXElement => {\n  assertSlots<TableBodySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTableBody_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/TableBody/useTableBody.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useTableContext } from '../../contexts/tableContext';