@fluentui/react-table 9.17.6 → 9.18.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Fri, 04 Jul 2025 10:00:08 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:48 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.18.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.18.0)
+
+Thu, 17 Jul 2025 13:45:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.17.7..@fluentui/react-table_v9.18.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-aria to v9.15.4 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-avatar to v9.9.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-checkbox to v9.5.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-radio to v9.5.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
+## [9.17.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.17.7)
+
+Fri, 11 Jul 2025 15:59:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.17.6..@fluentui/react-table_v9.17.7)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.8.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
+- Bump @fluentui/react-checkbox to v9.4.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
+- Bump @fluentui/react-radio to v9.4.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
+
 ## [9.17.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.17.6)
 
-Fri, 04 Jul 2025 10:00:08 GMT 
+Fri, 04 Jul 2025 10:02:47 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.17.5..@fluentui/react-table_v9.17.6)
 
 ### Patches

package/lib/components/DataGrid/useDataGridStyles.styles.raw.js

@@ -0,0 +1,13 @@
+import { mergeClasses } from '@griffel/react';
+import { useTableStyles_unstable } from '../Table/useTableStyles.styles';
+export const dataGridClassNames = {
+    root: 'fui-DataGrid'
+};
+/**
+ * Apply styling to the DataGrid slots based on the state
+ */ export const useDataGridStyles_unstable = (state)=>{
+    'use no memo';
+    useTableStyles_unstable(state);
+    state.root.className = mergeClasses(dataGridClassNames.root, state.root.className);
+    return state;
+};

package/lib/components/DataGrid/useDataGridStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DataGrid/useDataGridStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridSlots, DataGridState } from './DataGrid.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableStyles_unstable } from '../Table/useTableStyles.styles';\n\nexport const dataGridClassNames: SlotClassNames<DataGridSlots> = {\n  root: 'fui-DataGrid',\n};\n\n/**\n * Apply styling to the DataGrid slots based on the state\n */\nexport const useDataGridStyles_unstable = (state: DataGridState): DataGridState => {\n  'use no memo';\n\n  useTableStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","useTableStyles_unstable","dataGridClassNames","root","useDataGridStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,uBAAuB,QAAQ,iCAAiC;AAEzE,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEAJ,wBAAwBI;IACxBA,MAAMF,IAAI,CAACG,SAAS,GAAGN,aAAaE,mBAAmBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAEjF,OAAOD;AACT,EAAE"}

package/lib/components/DataGridBody/useDataGridBodyStyles.styles.raw.js

@@ -0,0 +1,13 @@
+import { mergeClasses } from '@griffel/react';
+import { useTableBodyStyles_unstable } from '../TableBody/useTableBodyStyles.styles';
+export const dataGridBodyClassNames = {
+    root: 'fui-DataGridBody'
+};
+/**
+ * Apply styling to the DataGridBody slots based on the state
+ */ export const useDataGridBodyStyles_unstable = (state)=>{
+    'use no memo';
+    useTableBodyStyles_unstable(state);
+    state.root.className = mergeClasses(dataGridBodyClassNames.root, state.root.className);
+    return state;
+};

package/lib/components/DataGridBody/useDataGridBodyStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DataGridBody/useDataGridBodyStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridBodySlots, DataGridBodyState } from './DataGridBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableBodyStyles_unstable } from '../TableBody/useTableBodyStyles.styles';\n\nexport const dataGridBodyClassNames: SlotClassNames<DataGridBodySlots> = {\n  root: 'fui-DataGridBody',\n};\n\n/**\n * Apply styling to the DataGridBody slots based on the state\n */\nexport const useDataGridBodyStyles_unstable = (state: DataGridBodyState): DataGridBodyState => {\n  'use no memo';\n\n  useTableBodyStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridBodyClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","useTableBodyStyles_unstable","dataGridBodyClassNames","root","useDataGridBodyStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,2BAA2B,QAAQ,yCAAyC;AAErF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEAJ,4BAA4BI;IAC5BA,MAAMF,IAAI,CAACG,SAAS,GAAGN,aAAaE,uBAAuBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAErF,OAAOD;AACT,EAAE"}

package/lib/components/DataGridCell/useDataGridCellStyles.styles.raw.js

@@ -0,0 +1,13 @@
+import { mergeClasses } from '@griffel/react';
+import { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles.styles';
+export const dataGridCellClassNames = {
+    root: 'fui-DataGridCell'
+};
+/**
+ * Apply styling to the DataGridCell slots based on the state
+ */ export const useDataGridCellStyles_unstable = (state)=>{
+    'use no memo';
+    useTableCellStyles_unstable(state);
+    state.root.className = mergeClasses(dataGridCellClassNames.root, state.root.className);
+    return state;
+};

package/lib/components/DataGridCell/useDataGridCellStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DataGridCell/useDataGridCellStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridCellSlots, DataGridCellState } from './DataGridCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles.styles';\n\nexport const dataGridCellClassNames: SlotClassNames<DataGridCellSlots> = {\n  root: 'fui-DataGridCell',\n};\n\n/**\n * Apply styling to the DataGridCell slots based on the state\n */\nexport const useDataGridCellStyles_unstable = (state: DataGridCellState): DataGridCellState => {\n  'use no memo';\n\n  useTableCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridCellClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","useTableCellStyles_unstable","dataGridCellClassNames","root","useDataGridCellStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,2BAA2B,QAAQ,yCAAyC;AAErF,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEAJ,4BAA4BI;IAC5BA,MAAMF,IAAI,CAACG,SAAS,GAAGN,aAAaE,uBAAuBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAErF,OAAOD;AACT,EAAE"}

package/lib/components/DataGridHeader/useDataGridHeaderStyles.styles.raw.js

@@ -0,0 +1,13 @@
+import { mergeClasses } from '@griffel/react';
+import { useTableHeaderStyles_unstable } from '../TableHeader/useTableHeaderStyles.styles';
+export const dataGridHeaderClassNames = {
+    root: 'fui-DataGridHeader'
+};
+/**
+ * Apply styling to the DataGridHeader slots based on the state
+ */ export const useDataGridHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    useTableHeaderStyles_unstable(state);
+    state.root.className = mergeClasses(dataGridHeaderClassNames.root, state.root.className);
+    return state;
+};

package/lib/components/DataGridHeader/useDataGridHeaderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DataGridHeader/useDataGridHeaderStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableHeaderStyles_unstable } from '../TableHeader/useTableHeaderStyles.styles';\n\nexport const dataGridHeaderClassNames: SlotClassNames<DataGridHeaderSlots> = {\n  root: 'fui-DataGridHeader',\n};\n\n/**\n * Apply styling to the DataGridHeader slots based on the state\n */\nexport const useDataGridHeaderStyles_unstable = (state: DataGridHeaderState): DataGridHeaderState => {\n  'use no memo';\n\n  useTableHeaderStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridHeaderClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","useTableHeaderStyles_unstable","dataGridHeaderClassNames","root","useDataGridHeaderStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,6BAA6B,QAAQ,6CAA6C;AAE3F,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEAJ,8BAA8BI;IAC9BA,MAAMF,IAAI,CAACG,SAAS,GAAGN,aAAaE,yBAAyBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAEvF,OAAOD;AACT,EAAE"}

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

@@ -0,0 +1,25 @@
+import { mergeClasses } from '@griffel/react';
+import { useTableHeaderCellStyles_unstable } from '../TableHeaderCell/useTableHeaderCellStyles.styles';
+export const dataGridHeaderCellClassNames = {
+    root: 'fui-DataGridHeaderCell',
+    button: 'fui-DataGridHeaderCell__button',
+    sortIcon: 'fui-DataGridHeaderCell__sortIcon',
+    aside: 'fui-DataGridHeaderCell__aside'
+};
+/**
+ * Apply styling to the DataGridHeaderCell slots based on the state
+ */ export const useDataGridHeaderCellStyles_unstable = (state)=>{
+    'use no memo';
+    useTableHeaderCellStyles_unstable(state);
+    state.root.className = mergeClasses(dataGridHeaderCellClassNames.root, state.root.className);
+    if (state.button) {
+        state.button.className = mergeClasses(dataGridHeaderCellClassNames.button, state.button.className);
+    }
+    if (state.sortIcon) {
+        state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);
+    }
+    if (state.aside) {
+        state.aside.className = mergeClasses(dataGridHeaderCellClassNames.aside, state.aside.className);
+    }
+    return state;
+};

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { mergeClasses } from '@griffel/react';
+import { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles.styles';
+export const dataGridSelectionCellClassNames = {
+    root: 'fui-DataGridSelectionCell',
+    checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator',
+    radioIndicator: 'fui-DataGridSelectionCell__radioIndicator'
+};
+/**
+ * Apply styling to the DataGridSelectionCell slots based on the state
+ */ export const useDataGridSelectionCellStyles_unstable = (state)=>{
+    'use no memo';
+    useTableSelectionCellStyles_unstable(state);
+    state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);
+    if (state.checkboxIndicator) {
+        state.checkboxIndicator.className = mergeClasses(dataGridSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
+    }
+    if (state.radioIndicator) {
+        state.radioIndicator.className = mergeClasses(dataGridSelectionCellClassNames.radioIndicator, state.radioIndicator.className);
+    }
+    return state;
+};

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

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

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

@@ -0,0 +1,39 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const tableClassName = 'fui-Table';
+export const tableClassNames = {
+    root: 'fui-Table'
+};
+const useTableLayoutStyles = makeStyles({
+    root: {
+        display: 'table',
+        verticalAlign: 'middle',
+        width: '100%',
+        tableLayout: 'fixed'
+    }
+});
+const useFlexLayoutStyles = makeStyles({
+    root: {
+        display: 'block'
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        borderCollapse: 'collapse',
+        backgroundColor: tokens.colorSubtleBackground
+    }
+});
+/**
+ * Apply styling to the Table slots based on the state
+ */ export const useTableStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    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

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

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

@@ -0,0 +1,26 @@
+import { mergeClasses, makeStyles } from '@griffel/react';
+const useTableLayoutStyles = makeStyles({
+    root: {
+        display: 'table-row-group'
+    }
+});
+const useFlexLayoutStyles = makeStyles({
+    root: {
+        display: 'block'
+    }
+});
+export const tableBodyClassName = 'fui-TableBody';
+export const tableBodyClassNames = {
+    root: 'fui-TableBody'
+};
+/**
+ * Apply styling to the TableBody slots based on the state
+ */ export const useTableBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableBody/useTableBodyStyles.styles.ts"],"sourcesContent":["import { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,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"}

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

@@ -0,0 +1,65 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const tableCellClassName = 'fui-TableCell';
+export const tableCellClassNames = {
+    root: tableCellClassName
+};
+const useTableLayoutStyles = makeStyles({
+    root: {
+        display: 'table-cell',
+        verticalAlign: 'middle'
+    },
+    medium: {
+        height: '44px'
+    },
+    small: {
+        height: '34px'
+    },
+    'extra-small': {
+        height: '24px'
+    }
+});
+const useFlexLayoutStyles = makeStyles({
+    root: {
+        display: 'flex',
+        minWidth: '0px',
+        alignItems: 'center',
+        flex: '1 1 0px'
+    },
+    medium: {
+        minHeight: '44px'
+    },
+    small: {
+        minHeight: '34px'
+    },
+    'extra-small': {
+        minHeight: '24px'
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        position: 'relative',
+        padding: `0px ${tokens.spacingHorizontalS}`,
+        ...createCustomFocusIndicatorStyle({
+            outline: `2px solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium
+        }, {
+            selector: 'focus'
+        })
+    }
+});
+/**
+ * Apply styling to the TableCell slots based on the state
+ */ export const useTableCellStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableCell/useTableCellStyles.styles.ts"],"sourcesContent":["import { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,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,CAAC,CAAC;QAE3C,GAAGlB,gCACD;YAAEmB,SAAS,CAAC,UAAU,EAAEpB,OAAOqB,iBAAiB,CAAC,CAAC;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"}

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

@@ -0,0 +1,28 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const tableCellActionsClassNames = {
+    root: 'fui-TableCellActions'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        backgroundColor: 'inherit',
+        position: 'absolute',
+        right: '0px',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        opacity: 0,
+        marginLeft: 'auto'
+    },
+    visible: {
+        opacity: 1
+    }
+});
+/**
+ * Apply styling to the TableCellActions slots based on the state
+ */ export const useTableCellActionsStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableCellActions/useTableCellActionsStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots> = {\n  root: 'fui-TableCellActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,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"}

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

@@ -0,0 +1,82 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { typographyStyles } from '@fluentui/react-theme';
+export const tableCellLayoutClassNames = {
+    root: 'fui-TableCellLayout',
+    media: 'fui-TableCellLayout__media',
+    main: 'fui-TableCellLayout__main',
+    description: 'fui-TableCellLayout__description',
+    content: 'fui-TableCellLayout__content'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: tokens.spacingHorizontalS,
+        flex: '1 1 0px'
+    },
+    rootTruncate: {
+        overflowX: 'hidden'
+    },
+    content: {
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    contentTruncate: {
+        overflowX: 'hidden'
+    },
+    media: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    mediaExtraSmall: {
+        fontSize: '16px'
+    },
+    mediaSmallAndMedium: {
+        fontSize: '20px'
+    },
+    mediaPrimary: {
+        fontSize: '24px'
+    },
+    mainPrimary: {
+        fontWeight: tokens.fontWeightSemibold
+    },
+    mainTruncate: {
+        overflowX: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    },
+    description: {
+        color: tokens.colorNeutralForeground2,
+        ...typographyStyles.caption1
+    }
+});
+/**
+ * Apply styling to the TableCellLayout slots based on the state
+ */ export const useTableCellLayoutStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { truncate } = state;
+    state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, truncate && styles.rootTruncate, state.root.className);
+    const primary = state.appearance === 'primary';
+    if (state.media) {
+        const mediaSizedStyles = {
+            small: styles.mediaSmallAndMedium,
+            medium: styles.mediaSmallAndMedium,
+            'extra-small': styles.mediaExtraSmall
+        };
+        state.media.className = mergeClasses(tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);
+    }
+    if (state.main) {
+        state.main.className = mergeClasses(tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);
+    }
+    if (state.description) {
+        state.description.className = mergeClasses(tableCellLayoutClassNames.description, styles.description, state.description.className);
+    }
+    if (state.content) {
+        state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableCellLayout/useTableCellLayoutStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {\n  root: 'fui-TableCellLayout',\n  media: 'fui-TableCellLayout__media',\n  main: 'fui-TableCellLayout__main',\n  description: 'fui-TableCellLayout__description',\n  content: 'fui-TableCellLayout__content',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: tokens.spacingHorizontalS,\n    flex: '1 1 0px',\n  },\n\n  rootTruncate: {\n    overflowX: 'hidden',\n  },\n\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  contentTruncate: {\n    overflowX: 'hidden',\n  },\n\n  media: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  mediaExtraSmall: {\n    fontSize: '16px',\n  },\n\n  mediaSmallAndMedium: {\n    fontSize: '20px',\n  },\n\n  mediaPrimary: {\n    fontSize: '24px',\n  },\n\n  mainPrimary: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  mainTruncate: {\n    overflowX: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n  },\n\n  description: {\n    color: tokens.colorNeutralForeground2,\n    ...typographyStyles.caption1,\n  },\n});\n\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */\nexport const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { truncate } = state;\n\n  state.root.className = mergeClasses(\n    tableCellLayoutClassNames.root,\n    styles.root,\n    truncate && styles.rootTruncate,\n    state.root.className,\n  );\n  const primary = state.appearance === 'primary';\n\n  if (state.media) {\n    const mediaSizedStyles = {\n      small: styles.mediaSmallAndMedium,\n      medium: styles.mediaSmallAndMedium,\n      'extra-small': styles.mediaExtraSmall,\n    };\n\n    state.media.className = mergeClasses(\n      tableCellLayoutClassNames.media,\n      styles.media,\n      mediaSizedStyles[state.size],\n      primary && styles.mediaPrimary,\n      state.media.className,\n    );\n  }\n\n  if (state.main) {\n    state.main.className = mergeClasses(\n      tableCellLayoutClassNames.main,\n      truncate && styles.mainTruncate,\n      primary && styles.mainPrimary,\n      state.main.className,\n    );\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      tableCellLayoutClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(\n      tableCellLayoutClassNames.content,\n      styles.content,\n      truncate && styles.contentTruncate,\n      state.content.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","tableCellLayoutClassNames","root","media","main","description","content","useStyles","display","alignItems","gap","spacingHorizontalS","flex","rootTruncate","overflowX","flexDirection","contentTruncate","mediaExtraSmall","fontSize","mediaSmallAndMedium","mediaPrimary","mainPrimary","fontWeight","fontWeightSemibold","mainTruncate","whiteSpace","textOverflow","color","colorNeutralForeground2","caption1","useTableCellLayoutStyles_unstable","state","styles","truncate","className","primary","appearance","mediaSizedStyles","small","medium","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,aAAa;IACbC,SAAS;AACX,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYV,WAAW;IAC3BK,MAAM;QACJM,SAAS;QACTC,YAAY;QACZC,KAAKX,OAAOY,kBAAkB;QAC9BC,MAAM;IACR;IAEAC,cAAc;QACZC,WAAW;IACb;IAEAR,SAAS;QACPE,SAAS;QACTO,eAAe;IACjB;IAEAC,iBAAiB;QACfF,WAAW;IACb;IAEAX,OAAO;QACLK,SAAS;QACTC,YAAY;IACd;IAEAQ,iBAAiB;QACfC,UAAU;IACZ;IAEAC,qBAAqB;QACnBD,UAAU;IACZ;IAEAE,cAAc;QACZF,UAAU;IACZ;IAEAG,aAAa;QACXC,YAAYvB,OAAOwB,kBAAkB;IACvC;IAEAC,cAAc;QACZV,WAAW;QACXW,YAAY;QACZC,cAAc;IAChB;IAEArB,aAAa;QACXsB,OAAO5B,OAAO6B,uBAAuB;QACrC,GAAG5B,iBAAiB6B,QAAQ;IAC9B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASzB;IACf,MAAM,EAAE0B,QAAQ,EAAE,GAAGF;IAErBA,MAAM7B,IAAI,CAACgC,SAAS,GAAGpC,aACrBG,0BAA0BC,IAAI,EAC9B8B,OAAO9B,IAAI,EACX+B,YAAYD,OAAOnB,YAAY,EAC/BkB,MAAM7B,IAAI,CAACgC,SAAS;IAEtB,MAAMC,UAAUJ,MAAMK,UAAU,KAAK;IAErC,IAAIL,MAAM5B,KAAK,EAAE;QACf,MAAMkC,mBAAmB;YACvBC,OAAON,OAAOb,mBAAmB;YACjCoB,QAAQP,OAAOb,mBAAmB;YAClC,eAAea,OAAOf,eAAe;QACvC;QAEAc,MAAM5B,KAAK,CAAC+B,SAAS,GAAGpC,aACtBG,0BAA0BE,KAAK,EAC/B6B,OAAO7B,KAAK,EACZkC,gBAAgB,CAACN,MAAMS,IAAI,CAAC,EAC5BL,WAAWH,OAAOZ,YAAY,EAC9BW,MAAM5B,KAAK,CAAC+B,SAAS;IAEzB;IAEA,IAAIH,MAAM3B,IAAI,EAAE;QACd2B,MAAM3B,IAAI,CAAC8B,SAAS,GAAGpC,aACrBG,0BAA0BG,IAAI,EAC9B6B,YAAYD,OAAOR,YAAY,EAC/BW,WAAWH,OAAOX,WAAW,EAC7BU,MAAM3B,IAAI,CAAC8B,SAAS;IAExB;IAEA,IAAIH,MAAM1B,WAAW,EAAE;QACrB0B,MAAM1B,WAAW,CAAC6B,SAAS,GAAGpC,aAC5BG,0BAA0BI,WAAW,EACrC2B,OAAO3B,WAAW,EAClB0B,MAAM1B,WAAW,CAAC6B,SAAS;IAE/B;IAEA,IAAIH,MAAMzB,OAAO,EAAE;QACjByB,MAAMzB,OAAO,CAAC4B,SAAS,GAAGpC,aACxBG,0BAA0BK,OAAO,EACjC0B,OAAO1B,OAAO,EACd2B,YAAYD,OAAOhB,eAAe,EAClCe,MAAMzB,OAAO,CAAC4B,SAAS;IAE3B;IAEA,OAAOH;AACT,EAAE"}

package/lib/components/TableHeader/useTableHeaderStyles.styles.raw.js

@@ -0,0 +1,26 @@
+import { mergeClasses, makeStyles } from '@griffel/react';
+export const tableHeaderClassName = 'fui-TableHeader';
+export const tableHeaderClassNames = {
+    root: 'fui-TableHeader'
+};
+const useFlexLayoutStyles = makeStyles({
+    root: {
+        display: 'block'
+    }
+});
+const useTableLayoutStyles = makeStyles({
+    root: {
+        display: 'table-row-group'
+    }
+});
+/**
+ * Apply styling to the TableHeader slots based on the state
+ */ export const useTableHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = mergeClasses(tableHeaderClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeader/useTableHeaderStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableHeaderSlots, TableHeaderState } from './TableHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableHeaderClassName = 'fui-TableHeader';\nexport const tableHeaderClassNames: SlotClassNames<TableHeaderSlots> = {\n  root: 'fui-TableHeader',\n};\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row-group',\n  },\n});\n\n/**\n * Apply styling to the TableHeader slots based on the state\n */\nexport const useTableHeaderStyles_unstable = (state: TableHeaderState): TableHeaderState => {\n  'use no memo';\n\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderClassName,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","tableHeaderClassName","tableHeaderClassNames","root","useFlexLayoutStyles","display","useTableLayoutStyles","useTableHeaderStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,uBAAuB,kBAAkB;AACtD,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,sBAAsBJ,WAAW;IACrCG,MAAM;QACJE,SAAS;IACX;AACF;AAEA,MAAMC,uBAAuBN,WAAW;IACtCG,MAAM;QACJE,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,eAAe;QACnBC,OAAOJ;QACPK,MAAMP;IACR;IACAI,MAAML,IAAI,CAACS,SAAS,GAAGb,aACrBE,sBACAO,MAAMK,gBAAgB,GAAGJ,aAAaE,IAAI,CAACR,IAAI,GAAGM,aAAaC,KAAK,CAACP,IAAI,EACzEK,MAAML,IAAI,CAACS,SAAS;IAGtB,OAAOJ;AACT,EAAE"}