@fluentui/react-table 9.19.14 → 9.19.16

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

@@ -27,8 +27,10 @@ export const useDataGridRowStyles_unstable = state => {
   const isSubtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);
   const styles = useStyles();
   useTableRowStyles_unstable(state);
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className, isSubtle && styles.subtleSelection);
   if (state.selectionCell) {
+    // eslint-disable-next-line react-hooks/immutability
     state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);
   }
   return state;

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

@@ -1 +1 @@
-{"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":[]}
+{"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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className, isSubtle && styles.subtleSelection);\n    if (state.selectionCell) {\n        // eslint-disable-next-line react-hooks/immutability\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;EACjC;EACAA,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;IACrB;IACAQ,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

@@ -31,8 +31,10 @@ const useStyles = makeStyles({
     const isSubtle = useDataGridContext_unstable((ctx)=>ctx.subtleSelection);
     const styles = useStyles();
     useTableRowStyles_unstable(state);
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className, isSubtle && styles.subtleSelection);
     if (state.selectionCell) {
+        // eslint-disable-next-line react-hooks/immutability
         state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);
     }
     return state;

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

@@ -1 +1 @@
-{"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"}
+{"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  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    dataGridRowClassNames.root,\n    state.root.className,\n    isSubtle && styles.subtleSelection,\n  );\n  if (state.selectionCell) {\n    // eslint-disable-next-line react-hooks/immutability\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;IAC3B,oDAAoD;IACpDA,MAAMP,IAAI,CAACW,SAAS,GAAGjB,aACrBK,sBAAsBC,IAAI,EAC1BO,MAAMP,IAAI,CAACW,SAAS,EACpBH,YAAYE,OAAOP,eAAe;IAEpC,IAAII,MAAMN,aAAa,EAAE;QACvB,oDAAoD;QACpDM,MAAMN,aAAa,CAACU,SAAS,GAAGjB,aAAaK,sBAAsBE,aAAa,EAAEM,MAAMN,aAAa,CAACU,SAAS;IACjH;IAEA,OAAOJ;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGridSelectionCell/DataGridSelectionCell.types.ts"],"sourcesContent":["import {\n  TableSelectionCellProps,\n  TableSelectionCellSlots,\n  TableSelectionCellState,\n} from '../TableSelectionCell/TableSelectionCell.types';\n\nexport type DataGridSelectionCellSlots = TableSelectionCellSlots;\n\n/**\n * DataGridSelectionCell Props\n */\nexport type DataGridSelectionCellProps = TableSelectionCellProps;\n\n/**\n * State used in rendering DataGridSelectionCell\n */\nexport type DataGridSelectionCellState = TableSelectionCellState;\n"],"names":[],"mappings":"AAaA;;CAEC,GACD,WAAiE"}
+{"version":3,"sources":["../src/components/DataGridSelectionCell/DataGridSelectionCell.types.ts"],"sourcesContent":["import type {\n  TableSelectionCellProps,\n  TableSelectionCellSlots,\n  TableSelectionCellState,\n} from '../TableSelectionCell/TableSelectionCell.types';\n\nexport type DataGridSelectionCellSlots = TableSelectionCellSlots;\n\n/**\n * DataGridSelectionCell Props\n */\nexport type DataGridSelectionCellProps = TableSelectionCellProps;\n\n/**\n * State used in rendering DataGridSelectionCell\n */\nexport type DataGridSelectionCellState = TableSelectionCellState;\n"],"names":[],"mappings":"AAaA;;CAEC,GACD,WAAiE"}

package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { useEventCallback } from '@fluentui/react-utilities';
 import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
 import { useTableRowIdContext } from '../../contexts/rowIdContext';

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../src/components/DataGridSelectionCell/useDataGridSelectionCell.ts"],"sourcesContent":["'use client';\n\nimport type * 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":["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;AAGA,SAASA,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

@@ -14,11 +14,14 @@ export const useDataGridSelectionCellStyles_unstable = state => {
   'use no memo';
 
   useTableSelectionCellStyles_unstable(state);
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);
   if (state.checkboxIndicator) {
+    // eslint-disable-next-line react-hooks/immutability
     state.checkboxIndicator.className = mergeClasses(dataGridSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
   }
   if (state.radioIndicator) {
+    // eslint-disable-next-line react-hooks/immutability
     state.radioIndicator.className = mergeClasses(dataGridSelectionCellClassNames.radioIndicator, state.radioIndicator.className);
   }
   return state;

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":["'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":[]}
+{"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    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);\n    if (state.checkboxIndicator) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.checkboxIndicator.className = mergeClasses(dataGridSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n    }\n    if (state.radioIndicator) {\n        // eslint-disable-next-line react-hooks/immutability\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;EAC3C;EACAA,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;IACzB;IACAG,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;IACtB;IACAE,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

@@ -11,11 +11,14 @@ export const dataGridSelectionCellClassNames = {
  */ export const useDataGridSelectionCellStyles_unstable = (state)=>{
     'use no memo';
     useTableSelectionCellStyles_unstable(state);
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);
     if (state.checkboxIndicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.checkboxIndicator.className = mergeClasses(dataGridSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
     }
     if (state.radioIndicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.radioIndicator.className = mergeClasses(dataGridSelectionCellClassNames.radioIndicator, state.radioIndicator.className);
     }
     return state;

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

@@ -1 +1 @@
-{"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"}
+{"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  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);\n\n  if (state.checkboxIndicator) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.checkboxIndicator.className = mergeClasses(\n      dataGridSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    // eslint-disable-next-line react-hooks/immutability\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;IACrC,oDAAoD;IACpDA,MAAMJ,IAAI,CAACK,SAAS,GAAGR,aAAaE,gCAAgCC,IAAI,EAAEI,MAAMJ,IAAI,CAACK,SAAS;IAE9F,IAAID,MAAMH,iBAAiB,EAAE;QAC3B,oDAAoD;QACpDG,MAAMH,iBAAiB,CAACI,SAAS,GAAGR,aAClCE,gCAAgCE,iBAAiB,EACjDG,MAAMH,iBAAiB,CAACI,SAAS;IAErC;IAEA,IAAID,MAAMF,cAAc,EAAE;QACxB,oDAAoD;QACpDE,MAAMF,cAAc,CAACG,SAAS,GAAGR,aAC/BE,gCAAgCG,cAAc,EAC9CE,MAAMF,cAAc,CAACG,SAAS;IAElC;IAEA,OAAOD;AACT,EAAE"}

package/lib/components/Table/useTable.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render Table.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Table/useTable.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableProps, TableState } from './Table.types';\n\n/**\n * Create the state required to render Table.\n *\n * The returned state can be modified with hooks such as useTableStyles_unstable,\n * before being passed to renderTable_unstable.\n *\n * @param props - props from this instance of Table\n * @param ref - reference to root HTMLElement of Table\n */\nexport const useTable_unstable = (props: TableProps, ref: React.Ref<HTMLElement>): TableState => {\n  const rootComponent = props.as ?? props.noNativeElements ? 'div' : 'table';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'table' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    size: props.size ?? 'medium',\n    noNativeElements: props.noNativeElements ?? false,\n    sortable: props.sortable ?? false,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTable_unstable","props","ref","rootComponent","as","noNativeElements","components","root","always","role","undefined","elementType","size","sortable"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;QAC7BD;IAAtB,MAAME,gBAAgBF,CAAAA,CAAAA,YAAAA,MAAMG,EAAE,cAARH,uBAAAA,YAAYA,MAAMI,gBAAgB,AAAD,IAAI,QAAQ;QAiB3DJ,aACYA,yBACRA;IAjBZ,OAAO;QACLK,YAAY;YACVC,MAAMJ;QACR;QACAI,MAAMR,KAAKS,MAAM,CACfV,yBAAyBK,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FD,KAAKA;YACLO,MAAMN,kBAAkB,QAAQ,UAAUO;YAC1C,GAAGT,KAAK;QACV,IACA;YAAEU,aAAaR;QAAc;QAE/BS,MAAMX,CAAAA,cAAAA,MAAMW,IAAI,cAAVX,yBAAAA,cAAc;QACpBI,kBAAkBJ,CAAAA,0BAAAA,MAAMI,gBAAgB,cAAtBJ,qCAAAA,0BAA0B;QAC5CY,UAAUZ,CAAAA,kBAAAA,MAAMY,QAAQ,cAAdZ,6BAAAA,kBAAkB;IAC9B;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Table/useTable.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableProps, TableState } from './Table.types';\n\n/**\n * Create the state required to render Table.\n *\n * The returned state can be modified with hooks such as useTableStyles_unstable,\n * before being passed to renderTable_unstable.\n *\n * @param props - props from this instance of Table\n * @param ref - reference to root HTMLElement of Table\n */\nexport const useTable_unstable = (props: TableProps, ref: React.Ref<HTMLElement>): TableState => {\n  const rootComponent = props.as ?? props.noNativeElements ? 'div' : 'table';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'table' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    size: props.size ?? 'medium',\n    noNativeElements: props.noNativeElements ?? false,\n    sortable: props.sortable ?? false,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useTable_unstable","props","ref","rootComponent","as","noNativeElements","components","root","always","role","undefined","elementType","size","sortable"],"mappings":"AACA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;QAC7BD;IAAtB,MAAME,gBAAgBF,CAAAA,CAAAA,YAAAA,MAAMG,EAAE,cAARH,uBAAAA,YAAYA,MAAMI,gBAAgB,AAAD,IAAI,QAAQ;QAiB3DJ,aACYA,yBACRA;IAjBZ,OAAO;QACLK,YAAY;YACVC,MAAMJ;QACR;QACAI,MAAMR,KAAKS,MAAM,CACfV,yBAAyBK,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FD,KAAKA;YACLO,MAAMN,kBAAkB,QAAQ,UAAUO;YAC1C,GAAGT,KAAK;QACV,IACA;YAAEU,aAAaR;QAAc;QAE/BS,MAAMX,CAAAA,cAAAA,MAAMW,IAAI,cAAVX,yBAAAA,cAAc;QACpBI,kBAAkBJ,CAAAA,0BAAAA,MAAMI,gBAAgB,cAAtBJ,qCAAAA,0BAA0B;QAC5CY,UAAUZ,CAAAA,kBAAAA,MAAMY,QAAQ,cAAdZ,6BAAAA,kBAAkB;IAC9B;AACF,EAAE"}

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../src/components/Table/useTableContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { 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

@@ -45,6 +45,7 @@ export const useTableStyles_unstable = state => {
     table: useTableLayoutStyles(),
     flex: useFlexLayoutStyles()
   };
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(tableClassName, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
   return state;
 };

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":["'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":[]}
+{"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    // eslint-disable-next-line react-hooks/immutability\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;EACD;EACAK,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

@@ -35,6 +35,7 @@ const useFlexLayoutStyles = makeStyles({
         table: useTableLayoutStyles(),
         flex: useFlexLayoutStyles()
     };
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(tableClassName, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"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"}
+{"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  // eslint-disable-next-line react-hooks/immutability\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;IACA,oDAAoD;IACpDM,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.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableBody/TableBody.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableBodySlots = {\n  root: Slot<'tbody', 'div'>;\n};\n\n/**\n * TableBody Props\n */\nexport type TableBodyProps = ComponentProps<TableBodySlots>;\n\n/**\n * State used in rendering TableBody\n */\nexport type TableBodyState = ComponentState<TableBodySlots> & Pick<TableContextValue, 'noNativeElements'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA0G"}
+{"version":3,"sources":["../src/components/TableBody/TableBody.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { TableContextValue } from '../Table/Table.types';\n\nexport type TableBodySlots = {\n  root: Slot<'tbody', 'div'>;\n};\n\n/**\n * TableBody Props\n */\nexport type TableBodyProps = ComponentProps<TableBodySlots>;\n\n/**\n * State used in rendering TableBody\n */\nexport type TableBodyState = ComponentState<TableBodySlots> & Pick<TableContextValue, 'noNativeElements'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA0G"}

package/lib/components/TableBody/useTableBody.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableBody/useTableBody.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableBodyProps, TableBodyState } from './TableBody.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableBody.\n *\n * The returned state can be modified with hooks such as useTableBodyStyles_unstable,\n * before being passed to renderTableBody_unstable.\n *\n * @param props - props from this instance of TableBody\n * @param ref - reference to root HTMLElement of TableBody\n */\nexport const useTableBody_unstable = (props: TableBodyProps, ref: React.Ref<HTMLElement>): TableBodyState => {\n  const { noNativeElements } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tbody';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'rowgroup' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    noNativeElements,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTableContext","useTableBody_unstable","props","ref","noNativeElements","rootComponent","as","components","root","always","role","undefined","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,gBAAgB,EAAE,GAAGJ;QACPE;IAAtB,MAAMG,gBAAgBH,CAAAA,CAAAA,YAAAA,MAAMI,EAAE,cAARJ,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;IAE7D,OAAO;QACLG,YAAY;YACVC,MAAMH;QACR;QACAG,MAAMT,KAAKU,MAAM,CACfX,yBAAyBO,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FF,KAAKA;YACLO,MAAML,kBAAkB,QAAQ,aAAaM;YAC7C,GAAGT,KAAK;QACV,IACA;YAAEU,aAAaP;QAAc;QAE/BD;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TableBody/useTableBody.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableBodyProps, TableBodyState } from './TableBody.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableBody.\n *\n * The returned state can be modified with hooks such as useTableBodyStyles_unstable,\n * before being passed to renderTableBody_unstable.\n *\n * @param props - props from this instance of TableBody\n * @param ref - reference to root HTMLElement of TableBody\n */\nexport const useTableBody_unstable = (props: TableBodyProps, ref: React.Ref<HTMLElement>): TableBodyState => {\n  const { noNativeElements } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tbody';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'rowgroup' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    noNativeElements,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useTableContext","useTableBody_unstable","props","ref","noNativeElements","rootComponent","as","components","root","always","role","undefined","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,gBAAgB,EAAE,GAAGJ;QACPE;IAAtB,MAAMG,gBAAgBH,CAAAA,CAAAA,YAAAA,MAAMI,EAAE,cAARJ,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;IAE7D,OAAO;QACLG,YAAY;YACVC,MAAMH;QACR;QACAG,MAAMT,KAAKU,MAAM,CACfX,yBAAyBO,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FF,KAAKA;YACLO,MAAML,kBAAkB,QAAQ,aAAaM;YAC7C,GAAGT,KAAK;QACV,IACA;YAAEU,aAAaP;QAAc;QAE/BD;IACF;AACF,EAAE"}

package/lib/components/TableBody/useTableBodyStyles.styles.js

@@ -29,6 +29,7 @@ export const useTableBodyStyles_unstable = state => {
     table: useTableLayoutStyles(),
     flex: useFlexLayoutStyles()
   };
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(tableBodyClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","useTableLayoutStyles","root","mc9l5x","d","useFlexLayoutStyles","tableBodyClassName","tableBodyClassNames","useTableBodyStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-row-group'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'block'\n    }\n});\nexport const tableBodyClassName = 'fui-TableBody';\nexport const tableBodyClassNames = {\n    root: 'fui-TableBody'\n};\n/**\n * Apply styling to the TableBody slots based on the state\n */ export const useTableBodyStyles_unstable = (state)=>{\n    'use no memo';\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableBodyClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,MAAMC,oBAAoB,gBAAGD,QAAA;EAAAE,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGL,QAAA;EAAAE,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI3B,CAAC;AACF,OAAO,MAAME,kBAAkB,GAAG,eAAe;AACjD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BL,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMM,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACb,MAAMC,YAAY,GAAG;IACjBC,KAAK,EAAEV,oBAAoB,CAAC,CAAC;IAC7BW,IAAI,EAAEP,mBAAmB,CAAC;EAC9B,CAAC;EACDI,KAAK,CAACP,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACO,kBAAkB,EAAEG,KAAK,CAACK,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACV,IAAI,GAAGQ,YAAY,CAACC,KAAK,CAACT,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACW,SAAS,CAAC;EACxJ,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","useTableLayoutStyles","root","mc9l5x","d","useFlexLayoutStyles","tableBodyClassName","tableBodyClassNames","useTableBodyStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-row-group'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'block'\n    }\n});\nexport const tableBodyClassName = 'fui-TableBody';\nexport const tableBodyClassNames = {\n    root: 'fui-TableBody'\n};\n/**\n * Apply styling to the TableBody slots based on the state\n */ export const useTableBodyStyles_unstable = (state)=>{\n    'use no memo';\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tableBodyClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,MAAMC,oBAAoB,gBAAGD,QAAA;EAAAE,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGL,QAAA;EAAAE,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI3B,CAAC;AACF,OAAO,MAAME,kBAAkB,GAAG,eAAe;AACjD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BL,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMM,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACb,MAAMC,YAAY,GAAG;IACjBC,KAAK,EAAEV,oBAAoB,CAAC,CAAC;IAC7BW,IAAI,EAAEP,mBAAmB,CAAC;EAC9B,CAAC;EACD;EACAI,KAAK,CAACP,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACO,kBAAkB,EAAEG,KAAK,CAACK,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACV,IAAI,GAAGQ,YAAY,CAACC,KAAK,CAACT,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACW,SAAS,CAAC;EACxJ,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TableBody/useTableBodyStyles.styles.raw.js

@@ -22,6 +22,7 @@ export const tableBodyClassNames = {
         table: useTableLayoutStyles(),
         flex: useFlexLayoutStyles()
     };
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(tableBodyClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
     return state;
 };

package/lib/components/TableBody/useTableBodyStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableBody/useTableBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableBodySlots, TableBodyState } from './TableBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row-group',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\nexport const tableBodyClassName = 'fui-TableBody';\nexport const tableBodyClassNames: SlotClassNames<TableBodySlots> = {\n  root: 'fui-TableBody',\n};\n\n/**\n * Apply styling to the TableBody slots based on the state\n */\nexport const useTableBodyStyles_unstable = (state: TableBodyState): TableBodyState => {\n  'use no memo';\n\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableBodyClassName,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","useTableLayoutStyles","root","display","useFlexLayoutStyles","tableBodyClassName","tableBodyClassNames","useTableBodyStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI1D,MAAMC,uBAAuBD,WAAW;IACtCE,MAAM;QACJC,SAAS;IACX;AACF;AAEA,MAAMC,sBAAsBJ,WAAW;IACrCE,MAAM;QACJC,SAAS;IACX;AACF;AAEA,OAAO,MAAME,qBAAqB,gBAAgB;AAClD,OAAO,MAAMC,sBAAsD;IACjEJ,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMK,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,eAAe;QACnBC,OAAOT;QACPU,MAAMP;IACR;IACAI,MAAMN,IAAI,CAACU,SAAS,GAAGb,aACrBM,oBACAG,MAAMK,gBAAgB,GAAGJ,aAAaE,IAAI,CAACT,IAAI,GAAGO,aAAaC,KAAK,CAACR,IAAI,EACzEM,MAAMN,IAAI,CAACU,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TableBody/useTableBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableBodySlots, TableBodyState } from './TableBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row-group',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\nexport const tableBodyClassName = 'fui-TableBody';\nexport const tableBodyClassNames: SlotClassNames<TableBodySlots> = {\n  root: 'fui-TableBody',\n};\n\n/**\n * Apply styling to the TableBody slots based on the state\n */\nexport const useTableBodyStyles_unstable = (state: TableBodyState): TableBodyState => {\n  'use no memo';\n\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tableBodyClassName,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","useTableLayoutStyles","root","display","useFlexLayoutStyles","tableBodyClassName","tableBodyClassNames","useTableBodyStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI1D,MAAMC,uBAAuBD,WAAW;IACtCE,MAAM;QACJC,SAAS;IACX;AACF;AAEA,MAAMC,sBAAsBJ,WAAW;IACrCE,MAAM;QACJC,SAAS;IACX;AACF;AAEA,OAAO,MAAME,qBAAqB,gBAAgB;AAClD,OAAO,MAAMC,sBAAsD;IACjEJ,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMK,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,eAAe;QACnBC,OAAOT;QACPU,MAAMP;IACR;IACA,oDAAoD;IACpDI,MAAMN,IAAI,CAACU,SAAS,GAAGb,aACrBM,oBACAG,MAAMK,gBAAgB,GAAGJ,aAAaE,IAAI,CAACT,IAAI,GAAGO,aAAaC,KAAK,CAACR,IAAI,EACzEM,MAAMN,IAAI,CAACU,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableCell/TableCell.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellSlots = {\n  root: Slot<'td', 'div'>;\n};\n\n/**\n * TableCell Props\n */\nexport type TableCellProps = ComponentProps<TableCellSlots> & {};\n\n/**\n * State used in rendering TableCell\n */\nexport type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAAmH"}
+{"version":3,"sources":["../src/components/TableCell/TableCell.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellSlots = {\n  root: Slot<'td', 'div'>;\n};\n\n/**\n * TableCell Props\n */\nexport type TableCellProps = ComponentProps<TableCellSlots> & {};\n\n/**\n * State used in rendering TableCell\n */\nexport type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAAmH"}

package/lib/components/TableCell/useTableCell.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableCell/useTableCell.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableCellProps, TableCellState } from './TableCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableCell.\n *\n * The returned state can be modified with hooks such as useTableCellStyles_unstable,\n * before being passed to renderTableCell_unstable.\n *\n * @param props - props from this instance of TableCell\n * @param ref - reference to root HTMLElement of TableCell\n */\nexport const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTMLElement>): TableCellState => {\n  const { noNativeElements, size } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'td';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'cell' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    noNativeElements,\n    size,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTableContext","useTableCell_unstable","props","ref","noNativeElements","size","rootComponent","as","components","root","always","role","undefined","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,GAAGL;QAEbE;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;IAE7D,OAAO;QACLI,YAAY;YACVC,MAAMH;QACR;QACAG,MAAMV,KAAKW,MAAM,CACfZ,yBAAyBQ,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FH,KAAKA;YACLQ,MAAML,kBAAkB,QAAQ,SAASM;YACzC,GAAGV,KAAK;QACV,IACA;YAAEW,aAAaP;QAAc;QAE/BF;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TableCell/useTableCell.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableCellProps, TableCellState } from './TableCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableCell.\n *\n * The returned state can be modified with hooks such as useTableCellStyles_unstable,\n * before being passed to renderTableCell_unstable.\n *\n * @param props - props from this instance of TableCell\n * @param ref - reference to root HTMLElement of TableCell\n */\nexport const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTMLElement>): TableCellState => {\n  const { noNativeElements, size } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'td';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'cell' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    noNativeElements,\n    size,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useTableContext","useTableCell_unstable","props","ref","noNativeElements","size","rootComponent","as","components","root","always","role","undefined","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,GAAGL;QAEbE;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;IAE7D,OAAO;QACLI,YAAY;YACVC,MAAMH;QACR;QACAG,MAAMV,KAAKW,MAAM,CACfZ,yBAAyBQ,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FH,KAAKA;YACLQ,MAAML,kBAAkB,QAAQ,SAASM;YACzC,GAAGV,KAAK;QACV,IACA;YAAEW,aAAaP;QAAc;QAE/BF;QACAC;IACF;AACF,EAAE"}

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

@@ -89,6 +89,7 @@ export const useTableCellStyles_unstable = state => {
     table: useTableLayoutStyles(),
     flex: useFlexLayoutStyles()
   };
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","tableCellClassName","tableCellClassNames","root","useTableLayoutStyles","mc9l5x","ha4doy","medium","Bqenvij","small","d","useFlexLayoutStyles","Bf4jedk","Bt984gj","xawz","Bh6795r","Bnnss6s","fkmc3a","sshi5w","p","useStyles","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","useTableCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","size"],"sources":["useTableCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames = {\n    root: tableCellClassName\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-cell',\n        verticalAlign: 'middle'\n    },\n    medium: {\n        height: '44px'\n    },\n    small: {\n        height: '34px'\n    },\n    'extra-small': {\n        height: '24px'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        minWidth: '0px',\n        alignItems: 'center',\n        flex: '1 1 0px'\n    },\n    medium: {\n        minHeight: '44px'\n    },\n    small: {\n        minHeight: '34px'\n    },\n    'extra-small': {\n        minHeight: '24px'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'relative',\n        padding: `0px ${tokens.spacingHorizontalS}`,\n        ...createCustomFocusIndicatorStyle({\n            outline: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium\n        }, {\n            selector: 'focus'\n        })\n    }\n});\n/**\n * Apply styling to the TableCell slots based on the state\n */ export const useTableCellStyles_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(tableCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,kBAAkB,GAAG,eAAe;AACjD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAEF;AACV,CAAC;AACD,MAAMG,oBAAoB,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAD,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAc5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGd,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAO,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAV,MAAA;IAAAW,MAAA;EAAA;EAAAT,KAAA;IAAAS,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAR,CAAA;IAAAS,CAAA;EAAA;AAAA,CAgB3B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGvB,QAAA;EAAAM,IAAA;IAAAkB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAzB,CAAA;IAAAS,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAWrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMiB,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,YAAY,GAAG;IACjBC,KAAK,EAAEpC,oBAAoB,CAAC,CAAC;IAC7BqC,IAAI,EAAE9B,mBAAmB,CAAC;EAC9B,CAAC;EACD0B,KAAK,CAAClC,IAAI,CAACuC,SAAS,GAAG5C,YAAY,CAACI,mBAAmB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACtC,IAAI,GAAGoC,YAAY,CAACC,KAAK,CAACrC,IAAI,EAAEkC,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACJ,KAAK,CAACO,IAAI,CAAC,GAAGL,YAAY,CAACC,KAAK,CAACH,KAAK,CAACO,IAAI,CAAC,EAAEP,KAAK,CAAClC,IAAI,CAACuC,SAAS,CAAC;EACpQ,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","tableCellClassName","tableCellClassNames","root","useTableLayoutStyles","mc9l5x","ha4doy","medium","Bqenvij","small","d","useFlexLayoutStyles","Bf4jedk","Bt984gj","xawz","Bh6795r","Bnnss6s","fkmc3a","sshi5w","p","useStyles","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","useTableCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","size"],"sources":["useTableCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames = {\n    root: tableCellClassName\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-cell',\n        verticalAlign: 'middle'\n    },\n    medium: {\n        height: '44px'\n    },\n    small: {\n        height: '34px'\n    },\n    'extra-small': {\n        height: '24px'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        minWidth: '0px',\n        alignItems: 'center',\n        flex: '1 1 0px'\n    },\n    medium: {\n        minHeight: '44px'\n    },\n    small: {\n        minHeight: '34px'\n    },\n    'extra-small': {\n        minHeight: '24px'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'relative',\n        padding: `0px ${tokens.spacingHorizontalS}`,\n        ...createCustomFocusIndicatorStyle({\n            outline: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium\n        }, {\n            selector: 'focus'\n        })\n    }\n});\n/**\n * Apply styling to the TableCell slots based on the state\n */ export const useTableCellStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,kBAAkB,GAAG,eAAe;AACjD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAEF;AACV,CAAC;AACD,MAAMG,oBAAoB,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAD,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAc5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGd,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAO,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAV,MAAA;IAAAW,MAAA;EAAA;EAAAT,KAAA;IAAAS,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAR,CAAA;IAAAS,CAAA;EAAA;AAAA,CAgB3B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGvB,QAAA;EAAAM,IAAA;IAAAkB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAzB,CAAA;IAAAS,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAWrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMiB,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAMmB,YAAY,GAAG;IACjBC,KAAK,EAAEpC,oBAAoB,CAAC,CAAC;IAC7BqC,IAAI,EAAE9B,mBAAmB,CAAC;EAC9B,CAAC;EACD;EACA0B,KAAK,CAAClC,IAAI,CAACuC,SAAS,GAAG5C,YAAY,CAACI,mBAAmB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACtC,IAAI,GAAGoC,YAAY,CAACC,KAAK,CAACrC,IAAI,EAAEkC,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACJ,KAAK,CAACO,IAAI,CAAC,GAAGL,YAAY,CAACC,KAAK,CAACH,KAAK,CAACO,IAAI,CAAC,EAAEP,KAAK,CAAClC,IAAI,CAACuC,SAAS,CAAC;EACpQ,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TableCell/useTableCellStyles.styles.raw.js

@@ -61,6 +61,7 @@ const useFlexLayoutStyles = makeStyles({
         table: useTableLayoutStyles(),
         flex: useFlexLayoutStyles()
     };
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableCell/useTableCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableCellSlots, TableCellState } from './TableCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames: SlotClassNames<TableCellSlots> = {\n  root: tableCellClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n\n  medium: {\n    height: '44px',\n  },\n\n  small: {\n    height: '34px',\n  },\n\n  'extra-small': {\n    height: '24px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    minWidth: '0px',\n    alignItems: 'center',\n    flex: '1 1 0px',\n  },\n\n  medium: {\n    minHeight: '44px',\n  },\n\n  small: {\n    minHeight: '34px',\n  },\n\n  'extra-small': {\n    minHeight: '24px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n    padding: `0px ${tokens.spacingHorizontalS}`,\n\n    ...createCustomFocusIndicatorStyle(\n      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n      { selector: 'focus' },\n    ),\n  },\n});\n\n/**\n * Apply styling to the TableCell slots based on the state\n */\nexport const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {\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    tableCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","tableCellClassName","tableCellClassNames","root","useTableLayoutStyles","display","verticalAlign","medium","height","small","useFlexLayoutStyles","minWidth","alignItems","flex","minHeight","useStyles","position","padding","spacingHorizontalS","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useTableCellStyles_unstable","state","styles","layoutStyles","table","className","noNativeElements","size"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAI1E,OAAO,MAAMC,qBAAqB,gBAAgB;AAClD,OAAO,MAAMC,sBAAsD;IACjEC,MAAMF;AACR,EAAE;AAEF,MAAMG,uBAAuBP,WAAW;IACtCM,MAAM;QACJE,SAAS;QACTC,eAAe;IACjB;IAEAC,QAAQ;QACNC,QAAQ;IACV;IAEAC,OAAO;QACLD,QAAQ;IACV;IAEA,eAAe;QACbA,QAAQ;IACV;AACF;AAEA,MAAME,sBAAsBb,WAAW;IACrCM,MAAM;QACJE,SAAS;QACTM,UAAU;QACVC,YAAY;QACZC,MAAM;IACR;IAEAN,QAAQ;QACNO,WAAW;IACb;IAEAL,OAAO;QACLK,WAAW;IACb;IAEA,eAAe;QACbA,WAAW;IACb;AACF;AAEA;;CAEC,GACD,MAAMC,YAAYlB,WAAW;IAC3BM,MAAM;QACJa,UAAU;QACVC,SAAS,CAAC,IAAI,EAAElB,OAAOmB,kBAAkB,EAAE;QAE3C,GAAGlB,gCACD;YAAEmB,SAAS,CAAC,UAAU,EAAEpB,OAAOqB,iBAAiB,EAAE;YAAEC,cAActB,OAAOuB,kBAAkB;QAAC,GAC5F;YAAEC,UAAU;QAAQ,EACrB;IACH;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,SAASX;IACf,MAAMY,eAAe;QACnBC,OAAOxB;QACPS,MAAMH;IACR;IACAe,MAAMtB,IAAI,CAAC0B,SAAS,GAAG/B,aACrBI,oBAAoBC,IAAI,EACxBuB,OAAOvB,IAAI,EACXsB,MAAMK,gBAAgB,GAAGH,aAAad,IAAI,CAACV,IAAI,GAAGwB,aAAaC,KAAK,CAACzB,IAAI,EACzEsB,MAAMK,gBAAgB,GAAGH,aAAad,IAAI,CAACY,MAAMM,IAAI,CAAC,GAAGJ,aAAaC,KAAK,CAACH,MAAMM,IAAI,CAAC,EACvFN,MAAMtB,IAAI,CAAC0B,SAAS;IAEtB,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TableCell/useTableCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableCellSlots, TableCellState } from './TableCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames: SlotClassNames<TableCellSlots> = {\n  root: tableCellClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n\n  medium: {\n    height: '44px',\n  },\n\n  small: {\n    height: '34px',\n  },\n\n  'extra-small': {\n    height: '24px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    minWidth: '0px',\n    alignItems: 'center',\n    flex: '1 1 0px',\n  },\n\n  medium: {\n    minHeight: '44px',\n  },\n\n  small: {\n    minHeight: '34px',\n  },\n\n  'extra-small': {\n    minHeight: '24px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n    padding: `0px ${tokens.spacingHorizontalS}`,\n\n    ...createCustomFocusIndicatorStyle(\n      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n      { selector: 'focus' },\n    ),\n  },\n});\n\n/**\n * Apply styling to the TableCell slots based on the state\n */\nexport const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tableCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","tableCellClassName","tableCellClassNames","root","useTableLayoutStyles","display","verticalAlign","medium","height","small","useFlexLayoutStyles","minWidth","alignItems","flex","minHeight","useStyles","position","padding","spacingHorizontalS","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useTableCellStyles_unstable","state","styles","layoutStyles","table","className","noNativeElements","size"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAI1E,OAAO,MAAMC,qBAAqB,gBAAgB;AAClD,OAAO,MAAMC,sBAAsD;IACjEC,MAAMF;AACR,EAAE;AAEF,MAAMG,uBAAuBP,WAAW;IACtCM,MAAM;QACJE,SAAS;QACTC,eAAe;IACjB;IAEAC,QAAQ;QACNC,QAAQ;IACV;IAEAC,OAAO;QACLD,QAAQ;IACV;IAEA,eAAe;QACbA,QAAQ;IACV;AACF;AAEA,MAAME,sBAAsBb,WAAW;IACrCM,MAAM;QACJE,SAAS;QACTM,UAAU;QACVC,YAAY;QACZC,MAAM;IACR;IAEAN,QAAQ;QACNO,WAAW;IACb;IAEAL,OAAO;QACLK,WAAW;IACb;IAEA,eAAe;QACbA,WAAW;IACb;AACF;AAEA;;CAEC,GACD,MAAMC,YAAYlB,WAAW;IAC3BM,MAAM;QACJa,UAAU;QACVC,SAAS,CAAC,IAAI,EAAElB,OAAOmB,kBAAkB,EAAE;QAE3C,GAAGlB,gCACD;YAAEmB,SAAS,CAAC,UAAU,EAAEpB,OAAOqB,iBAAiB,EAAE;YAAEC,cAActB,OAAOuB,kBAAkB;QAAC,GAC5F;YAAEC,UAAU;QAAQ,EACrB;IACH;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,SAASX;IACf,MAAMY,eAAe;QACnBC,OAAOxB;QACPS,MAAMH;IACR;IACA,oDAAoD;IACpDe,MAAMtB,IAAI,CAAC0B,SAAS,GAAG/B,aACrBI,oBAAoBC,IAAI,EACxBuB,OAAOvB,IAAI,EACXsB,MAAMK,gBAAgB,GAAGH,aAAad,IAAI,CAACV,IAAI,GAAGwB,aAAaC,KAAK,CAACzB,IAAI,EACzEsB,MAAMK,gBAAgB,GAAGH,aAAad,IAAI,CAACY,MAAMM,IAAI,CAAC,GAAGJ,aAAaC,KAAK,CAACH,MAAMM,IAAI,CAAC,EACvFN,MAAMtB,IAAI,CAAC0B,SAAS;IAEtB,OAAOJ;AACT,EAAE"}

package/lib/components/TableCellActions/useTableCellActions.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render TableCellActions.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableCellActions/useTableCellActions.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';\n\n/**\n * Create the state required to render TableCellActions.\n *\n * The returned state can be modified with hooks such as useTableCellActionsStyles_unstable,\n * before being passed to renderTableCellActions_unstable.\n *\n * @param props - props from this instance of TableCellActions\n * @param ref - reference to root HTMLElement of TableCellActions\n */\nexport const useTableCellActions_unstable = (\n  props: TableCellActionsProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellActionsState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    visible: props.visible ?? false,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTableCellActions_unstable","props","ref","components","root","always","elementType","visible"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;QAgBWD;IAdX,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;QAEvBC,SAASN,CAAAA,iBAAAA,MAAMM,OAAO,cAAbN,4BAAAA,iBAAiB;IAC5B;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TableCellActions/useTableCellActions.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';\n\n/**\n * Create the state required to render TableCellActions.\n *\n * The returned state can be modified with hooks such as useTableCellActionsStyles_unstable,\n * before being passed to renderTableCellActions_unstable.\n *\n * @param props - props from this instance of TableCellActions\n * @param ref - reference to root HTMLElement of TableCellActions\n */\nexport const useTableCellActions_unstable = (\n  props: TableCellActionsProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellActionsState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    visible: props.visible ?? false,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useTableCellActions_unstable","props","ref","components","root","always","elementType","visible"],"mappings":"AACA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;QAgBWD;IAdX,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;QAEvBC,SAASN,CAAAA,iBAAAA,MAAMM,OAAO,cAAbN,4BAAAA,iBAAiB;IAC5B;AACF,EAAE"}

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

@@ -30,6 +30,7 @@ export const useTableCellActionsStyles_unstable = state => {
   'use no memo';
 
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(tableCellActionsClassNames.root, styles.root, state.visible && styles.visible, state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tableCellActionsClassNames","root","useStyles","De3pzq","qhf8xq","j35jbq","Bhzewxz","Bz10aip","abs64n","Frg6f3","visible","d","useTableCellActionsStyles_unstable","state","styles","className"],"sources":["useTableCellActionsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const tableCellActionsClassNames = {\n    root: 'fui-TableCellActions'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: 'inherit',\n        position: 'absolute',\n        right: '0px',\n        top: '50%',\n        transform: 'translateY(-50%)',\n        opacity: 0,\n        marginLeft: 'auto'\n    },\n    visible: {\n        opacity: 1\n    }\n});\n/**\n * Apply styling to the TableCellActions slots based on the state\n */ export const useTableCellActionsStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(tableCellActionsClassNames.root, styles.root, state.visible && styles.visible, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAG,CAAA;AAAA,CAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGhB,YAAY,CAACC,0BAA0B,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACH,OAAO,IAAII,MAAM,CAACJ,OAAO,EAAEG,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACxI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tableCellActionsClassNames","root","useStyles","De3pzq","qhf8xq","j35jbq","Bhzewxz","Bz10aip","abs64n","Frg6f3","visible","d","useTableCellActionsStyles_unstable","state","styles","className"],"sources":["useTableCellActionsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const tableCellActionsClassNames = {\n    root: 'fui-TableCellActions'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: 'inherit',\n        position: 'absolute',\n        right: '0px',\n        top: '50%',\n        transform: 'translateY(-50%)',\n        opacity: 0,\n        marginLeft: 'auto'\n    },\n    visible: {\n        opacity: 1\n    }\n});\n/**\n * Apply styling to the TableCellActions slots based on the state\n */ export const useTableCellActionsStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tableCellActionsClassNames.root, styles.root, state.visible && styles.visible, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAG,CAAA;AAAA,CAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1B;EACAW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGhB,YAAY,CAACC,0BAA0B,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACH,OAAO,IAAII,MAAM,CAACJ,OAAO,EAAEG,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACxI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TableCellActions/useTableCellActionsStyles.styles.raw.js

@@ -24,6 +24,7 @@ export const tableCellActionsClassNames = {
  */ export const useTableCellActionsStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(tableCellActionsClassNames.root, styles.root, state.visible && styles.visible, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableCellActions/useTableCellActionsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots> = {\n  root: 'fui-TableCellActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: 'inherit',\n    position: 'absolute',\n    right: '0px',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    opacity: 0,\n    marginLeft: 'auto',\n  },\n\n  visible: {\n    opacity: 1,\n  },\n});\n\n/**\n * Apply styling to the TableCellActions slots based on the state\n */\nexport const useTableCellActionsStyles_unstable = (state: TableCellActionsState): TableCellActionsState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tableCellActionsClassNames.root,\n    styles.root,\n    state.visible && styles.visible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tableCellActionsClassNames","root","useStyles","backgroundColor","position","right","top","transform","opacity","marginLeft","visible","useTableCellActionsStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,6BAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,iBAAiB;QACjBC,UAAU;QACVC,OAAO;QACPC,KAAK;QACLC,WAAW;QACXC,SAAS;QACTC,YAAY;IACd;IAEAC,SAAS;QACPF,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMG,qCAAqC,CAACC;IACjD;IAEA,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGf,aACrBC,2BAA2BC,IAAI,EAC/BY,OAAOZ,IAAI,EACXW,MAAMF,OAAO,IAAIG,OAAOH,OAAO,EAC/BE,MAAMX,IAAI,CAACa,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TableCellActions/useTableCellActionsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots> = {\n  root: 'fui-TableCellActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: 'inherit',\n    position: 'absolute',\n    right: '0px',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    opacity: 0,\n    marginLeft: 'auto',\n  },\n\n  visible: {\n    opacity: 1,\n  },\n});\n\n/**\n * Apply styling to the TableCellActions slots based on the state\n */\nexport const useTableCellActionsStyles_unstable = (state: TableCellActionsState): TableCellActionsState => {\n  'use no memo';\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tableCellActionsClassNames.root,\n    styles.root,\n    state.visible && styles.visible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tableCellActionsClassNames","root","useStyles","backgroundColor","position","right","top","transform","opacity","marginLeft","visible","useTableCellActionsStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,6BAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,iBAAiB;QACjBC,UAAU;QACVC,OAAO;QACPC,KAAK;QACLC,WAAW;QACXC,SAAS;QACTC,YAAY;IACd;IAEAC,SAAS;QACPF,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMG,qCAAqC,CAACC;IACjD;IAEA,MAAMC,SAASX;IACf,oDAAoD;IACpDU,MAAMX,IAAI,CAACa,SAAS,GAAGf,aACrBC,2BAA2BC,IAAI,EAC/BY,OAAOZ,IAAI,EACXW,MAAMF,OAAO,IAAIG,OAAOH,OAAO,EAC/BE,MAAMX,IAAI,CAACa,SAAS;IAGtB,OAAOF;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableCellLayout/TableCellLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSize } from '@fluentui/react-avatar';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellLayoutContextValues = {\n  avatar: {\n    size?: AvatarSize;\n  };\n};\n\nexport type TableCellLayoutSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Slot for an icon or other visual element\n   */\n  media: Slot<'span'>;\n\n  /**\n   * Main text for the table cell. Children of the root slot are automatically rendered here\n   */\n  main: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description: Slot<'span'>;\n\n  /**\n   * A layout wrapper for the main and description slots\n   */\n  content: Slot<'div'>;\n};\n\n/**\n * TableCellLayout Props\n */\nexport type TableCellLayoutProps = Omit<ComponentProps<Partial<TableCellLayoutSlots>>, 'content'> &\n  Pick<Partial<TableCellLayoutSlots>, 'content'> & {\n    /**\n     * Renders design variants of the table cell\n     * @default undefined\n     */\n    appearance?: 'primary';\n\n    /**\n     * Renders content with overflow: hidden and text-overflow: ellipsis\n     */\n    truncate?: boolean;\n  };\n\n/**\n * State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &\n  Pick<TableCellLayoutProps, 'appearance' | 'truncate'> & { avatarSize: AvatarSize | undefined } & Pick<\n    TableContextValue,\n    'size'\n  >;\n"],"names":[],"mappings":"AAmDA;;CAEC,GACD,WAII"}
+{"version":3,"sources":["../src/components/TableCellLayout/TableCellLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSize } from '@fluentui/react-avatar';\nimport type { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellLayoutContextValues = {\n  avatar: {\n    size?: AvatarSize;\n  };\n};\n\nexport type TableCellLayoutSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Slot for an icon or other visual element\n   */\n  media: Slot<'span'>;\n\n  /**\n   * Main text for the table cell. Children of the root slot are automatically rendered here\n   */\n  main: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description: Slot<'span'>;\n\n  /**\n   * A layout wrapper for the main and description slots\n   */\n  content: Slot<'div'>;\n};\n\n/**\n * TableCellLayout Props\n */\nexport type TableCellLayoutProps = Omit<ComponentProps<Partial<TableCellLayoutSlots>>, 'content'> &\n  Pick<Partial<TableCellLayoutSlots>, 'content'> & {\n    /**\n     * Renders design variants of the table cell\n     * @default undefined\n     */\n    appearance?: 'primary';\n\n    /**\n     * Renders content with overflow: hidden and text-overflow: ellipsis\n     */\n    truncate?: boolean;\n  };\n\n/**\n * State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &\n  Pick<TableCellLayoutProps, 'appearance' | 'truncate'> & { avatarSize: AvatarSize | undefined } & Pick<\n    TableContextValue,\n    'size'\n  >;\n"],"names":[],"mappings":"AAmDA;;CAEC,GACD,WAII"}

package/lib/components/TableCellLayout/useTableCellLayout.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableCellLayout/useTableCellLayout.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\nconst tableAvatarSizeMap = {\n  medium: 32,\n  small: 24,\n  'extra-small': 20,\n} as const;\n\n/**\n * Create the state required to render TableCellLayout.\n *\n * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,\n * before being passed to renderTableCellLayout_unstable.\n *\n * @param props - props from this instance of TableCellLayout\n * @param ref - reference to root HTMLElement of TableCellLayout\n */\nexport const useTableCellLayout_unstable = (\n  props: TableCellLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellLayoutState => {\n  const { size } = useTableContext();\n\n  return {\n    components: {\n      root: 'div',\n      main: 'span',\n      description: 'span',\n      content: 'div',\n      media: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(\n        'div',\n        {\n          // FIXME:\n          // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n          // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n          ref: ref as React.Ref<HTMLDivElement>,\n          ...props,\n        },\n        // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n        ['content'],\n      ),\n      { elementType: 'div' },\n    ),\n    appearance: props.appearance,\n    truncate: props.truncate,\n    main: slot.optional(props.main, { renderByDefault: true, elementType: 'span' }),\n    media: slot.optional(props.media, { elementType: 'span' }),\n    description: slot.optional(props.description, { elementType: 'span' }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.description || !!props.children,\n      elementType: 'div',\n    }),\n    avatarSize: tableAvatarSizeMap[size],\n    size,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTableContext","tableAvatarSizeMap","medium","small","useTableCellLayout_unstable","props","ref","size","components","root","main","description","content","media","always","elementType","appearance","truncate","optional","renderByDefault","children","avatarSize"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGP;IAEjB,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,aAAa;YACbC,SAAS;YACTC,OAAO;QACT;QACAJ,MAAMV,KAAKe,MAAM,CACfhB,yBACE,OACA;YACE,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FQ,KAAKA;YACL,GAAGD,KAAK;QACV,GACA,qFAAqF;QACrF;YAAC;SAAU,GAEb;YAAEU,aAAa;QAAM;QAEvBC,YAAYX,MAAMW,UAAU;QAC5BC,UAAUZ,MAAMY,QAAQ;QACxBP,MAAMX,KAAKmB,QAAQ,CAACb,MAAMK,IAAI,EAAE;YAAES,iBAAiB;YAAMJ,aAAa;QAAO;QAC7EF,OAAOd,KAAKmB,QAAQ,CAACb,MAAMQ,KAAK,EAAE;YAAEE,aAAa;QAAO;QACxDJ,aAAaZ,KAAKmB,QAAQ,CAACb,MAAMM,WAAW,EAAE;YAAEI,aAAa;QAAO;QACpEH,SAASb,KAAKmB,QAAQ,CAACb,MAAMO,OAAO,EAAE;YACpCO,iBAAiB,CAAC,CAACd,MAAMM,WAAW,IAAI,CAAC,CAACN,MAAMe,QAAQ;YACxDL,aAAa;QACf;QACAM,YAAYpB,kBAAkB,CAACM,KAAK;QACpCA;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TableCellLayout/useTableCellLayout.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\nconst tableAvatarSizeMap = {\n  medium: 32,\n  small: 24,\n  'extra-small': 20,\n} as const;\n\n/**\n * Create the state required to render TableCellLayout.\n *\n * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,\n * before being passed to renderTableCellLayout_unstable.\n *\n * @param props - props from this instance of TableCellLayout\n * @param ref - reference to root HTMLElement of TableCellLayout\n */\nexport const useTableCellLayout_unstable = (\n  props: TableCellLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellLayoutState => {\n  const { size } = useTableContext();\n\n  return {\n    components: {\n      root: 'div',\n      main: 'span',\n      description: 'span',\n      content: 'div',\n      media: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(\n        'div',\n        {\n          // FIXME:\n          // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n          // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n          ref: ref as React.Ref<HTMLDivElement>,\n          ...props,\n        },\n        // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n        ['content'],\n      ),\n      { elementType: 'div' },\n    ),\n    appearance: props.appearance,\n    truncate: props.truncate,\n    main: slot.optional(props.main, { renderByDefault: true, elementType: 'span' }),\n    media: slot.optional(props.media, { elementType: 'span' }),\n    description: slot.optional(props.description, { elementType: 'span' }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.description || !!props.children,\n      elementType: 'div',\n    }),\n    avatarSize: tableAvatarSizeMap[size],\n    size,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useTableContext","tableAvatarSizeMap","medium","small","useTableCellLayout_unstable","props","ref","size","components","root","main","description","content","media","always","elementType","appearance","truncate","optional","renderByDefault","children","avatarSize"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGP;IAEjB,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,aAAa;YACbC,SAAS;YACTC,OAAO;QACT;QACAJ,MAAMV,KAAKe,MAAM,CACfhB,yBACE,OACA;YACE,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FQ,KAAKA;YACL,GAAGD,KAAK;QACV,GACA,qFAAqF;QACrF;YAAC;SAAU,GAEb;YAAEU,aAAa;QAAM;QAEvBC,YAAYX,MAAMW,UAAU;QAC5BC,UAAUZ,MAAMY,QAAQ;QACxBP,MAAMX,KAAKmB,QAAQ,CAACb,MAAMK,IAAI,EAAE;YAAES,iBAAiB;YAAMJ,aAAa;QAAO;QAC7EF,OAAOd,KAAKmB,QAAQ,CAACb,MAAMQ,KAAK,EAAE;YAAEE,aAAa;QAAO;QACxDJ,aAAaZ,KAAKmB,QAAQ,CAACb,MAAMM,WAAW,EAAE;YAAEI,aAAa;QAAO;QACpEH,SAASb,KAAKmB,QAAQ,CAACb,MAAMO,OAAO,EAAE;YACpCO,iBAAiB,CAAC,CAACd,MAAMM,WAAW,IAAI,CAAC,CAACN,MAAMe,QAAQ;YACxDL,aAAa;QACf;QACAM,YAAYpB,kBAAkB,CAACM,KAAK;QACpCA;IACF;AACF,EAAE"}

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

@@ -80,6 +80,7 @@ export const useTableCellLayoutStyles_unstable = state => {
   const {
     truncate
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, truncate && styles.rootTruncate, state.root.className);
   const primary = state.appearance === 'primary';
   if (state.media) {
@@ -88,15 +89,19 @@ export const useTableCellLayoutStyles_unstable = state => {
       medium: styles.mediaSmallAndMedium,
       'extra-small': styles.mediaExtraSmall
     };
+    // eslint-disable-next-line react-hooks/immutability
     state.media.className = mergeClasses(tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);
   }
   if (state.main) {
+    // eslint-disable-next-line react-hooks/immutability
     state.main.className = mergeClasses(tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);
   }
   if (state.description) {
+    // eslint-disable-next-line react-hooks/immutability
     state.description.className = mergeClasses(tableCellLayoutClassNames.description, styles.description, state.description.className);
   }
   if (state.content) {
+    // eslint-disable-next-line react-hooks/immutability
     state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);
   }
   return state;