@fluentui/react-table 9.17.7 → 9.18.0

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    dataGridRowClassNames: function() {
+        return dataGridRowClassNames;
+    },
+    useDataGridRowStyles_unstable: function() {
+        return useDataGridRowStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _useTableRowStylesstyles = require("../TableRow/useTableRowStyles.styles");
+const _tableHeaderContext = require("../../contexts/tableHeaderContext");
+const _dataGridContext = require("../../contexts/dataGridContext");
+const _useTableSelectionCellStylesstyles = require("../TableSelectionCell/useTableSelectionCellStyles.styles");
+const dataGridRowClassNames = {
+    root: 'fui-DataGridRow',
+    selectionCell: 'fui-DataGridRow__selectionCell'
+};
+const useStyles = (0, _react.makeStyles)({
+    singleSelectHeader: {
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            [`& .${_useTableSelectionCellStylesstyles.tableSelectionCellClassNames.root}`]: {
+                opacity: 0
+            }
+        }, {
+            selector: 'focus-within'
+        }),
+        ':hover': {
+            [`& .${_useTableSelectionCellStylesstyles.tableSelectionCellClassNames.root}`]: {
+                opacity: 0
+            }
+        }
+    },
+    subtleSelection: {
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            [`& .${_useTableSelectionCellStylesstyles.tableSelectionCellClassNames.root}`]: {
+                opacity: 1
+            }
+        }, {
+            selector: 'focus-within'
+        }),
+        ':hover': {
+            [`& .${_useTableSelectionCellStylesstyles.tableSelectionCellClassNames.root}`]: {
+                opacity: 1
+            }
+        }
+    }
+});
+const useDataGridRowStyles_unstable = (state)=>{
+    'use no memo';
+    const isHeader = (0, _tableHeaderContext.useIsInTableHeader)();
+    const isSingleSelect = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.selection.selectionMode === 'single');
+    const isSubtle = (0, _dataGridContext.useDataGridContext_unstable)((ctx)=>ctx.subtleSelection);
+    const styles = useStyles();
+    (0, _useTableRowStylesstyles.useTableRowStyles_unstable)(state);
+    state.root.className = (0, _react.mergeClasses)(dataGridRowClassNames.root, state.root.className, isSubtle && styles.subtleSelection, isHeader && isSingleSelect && styles.singleSelectHeader);
+    if (state.selectionCell) {
+        state.selectionCell.className = (0, _react.mergeClasses)(dataGridRowClassNames.selectionCell, state.selectionCell.className);
+    }
+    return state;
+};

package/lib-commonjs/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":["dataGridRowClassNames","useDataGridRowStyles_unstable","root","selectionCell","useStyles","makeStyles","singleSelectHeader","createCustomFocusIndicatorStyle","tableSelectionCellClassNames","opacity","selector","subtleSelection","state","isHeader","useIsInTableHeader","isSingleSelect","useDataGridContext_unstable","ctx","selection","selectionMode","isSubtle","styles","useTableRowStyles_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,qBAAAA;eAAAA;;IA4CAC,6BAAAA;eAAAA;;;uBArD4B;8BACO;yCAGL;oCACR;iCACS;mDACC;AAEtC,MAAMD,wBAA0D;IACrEE,MAAM;IACNC,eAAe;AACjB;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,oBAAoB;QAClB,GAAGC,IAAAA,6CAAAA,EACD;YACE,CAAC,CAAC,GAAG,EAAEC,+DAAAA,CAA6BN,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC3CO,SAAS;YACX;QACF,GACA;YAAEC,UAAU;QAAe,EAC5B;QAED,UAAU;YACR,CAAC,CAAC,GAAG,EAAEF,+DAAAA,CAA6BN,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC3CO,SAAS;YACX;QACF;IACF;IAEAE,iBAAiB;QACf,GAAGJ,IAAAA,6CAAAA,EACD;YACE,CAAC,CAAC,GAAG,EAAEC,+DAAAA,CAA6BN,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC3CO,SAAS;YACX;QACF,GACA;YAAEC,UAAU;QAAe,EAC5B;QAED,UAAU;YACR,CAAC,CAAC,GAAG,EAAEF,+DAAAA,CAA6BN,IAAI,CAAC,CAAC,CAAC,EAAE;gBAC3CO,SAAS;YACX;QACF;IACF;AACF;AAKO,MAAMR,gCAAgC,CAACW;IAC5C;IAEA,MAAMC,WAAWC,IAAAA,sCAAAA;IACjB,MAAMC,iBAAiBC,IAAAA,4CAAAA,EAA4BC,CAAAA,MAAOA,IAAIC,SAAS,CAACC,aAAa,KAAK;IAC1F,MAAMC,WAAWJ,IAAAA,4CAAAA,EAA4BC,CAAAA,MAAOA,IAAIN,eAAe;IACvE,MAAMU,SAASjB;IAEfkB,IAAAA,mDAAAA,EAA2BV;IAC3BA,MAAMV,IAAI,CAACqB,SAAS,GAAGC,IAAAA,mBAAAA,EACrBxB,sBAAsBE,IAAI,EAC1BU,MAAMV,IAAI,CAACqB,SAAS,EACpBH,YAAYC,OAAOV,eAAe,EAClCE,YAAYE,kBAAkBM,OAAOf,kBAAkB;IAEzD,IAAIM,MAAMT,aAAa,EAAE;QACvBS,MAAMT,aAAa,CAACoB,SAAS,GAAGC,IAAAA,mBAAAA,EAAaxB,sBAAsBG,aAAa,EAAES,MAAMT,aAAa,CAACoB,SAAS;IACjH;IAEA,OAAOX;AACT"}

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    dataGridSelectionCellClassNames: function() {
+        return dataGridSelectionCellClassNames;
+    },
+    useDataGridSelectionCellStyles_unstable: function() {
+        return useDataGridSelectionCellStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _useTableSelectionCellStylesstyles = require("../TableSelectionCell/useTableSelectionCellStyles.styles");
+const dataGridSelectionCellClassNames = {
+    root: 'fui-DataGridSelectionCell',
+    checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator',
+    radioIndicator: 'fui-DataGridSelectionCell__radioIndicator'
+};
+const useDataGridSelectionCellStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _useTableSelectionCellStylesstyles.useTableSelectionCellStyles_unstable)(state);
+    state.root.className = (0, _react.mergeClasses)(dataGridSelectionCellClassNames.root, state.root.className);
+    if (state.checkboxIndicator) {
+        state.checkboxIndicator.className = (0, _react.mergeClasses)(dataGridSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
+    }
+    if (state.radioIndicator) {
+        state.radioIndicator.className = (0, _react.mergeClasses)(dataGridSelectionCellClassNames.radioIndicator, state.radioIndicator.className);
+    }
+    return state;
+};

package/lib-commonjs/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":["dataGridSelectionCellClassNames","useDataGridSelectionCellStyles_unstable","root","checkboxIndicator","radioIndicator","state","useTableSelectionCellStyles_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,+BAAAA;eAAAA;;IASAC,uCAAAA;eAAAA;;;uBAdgB;mDAGwB;AAE9C,MAAMD,kCAA8E;IACzFE,MAAM;IACNC,mBAAmB;IACnBC,gBAAgB;AAClB;AAKO,MAAMH,0CAA0C,CACrDI;IAEA;IAEAC,IAAAA,uEAAAA,EAAqCD;IACrCA,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAAA,EAAaR,gCAAgCE,IAAI,EAAEG,MAAMH,IAAI,CAACK,SAAS;IAE9F,IAAIF,MAAMF,iBAAiB,EAAE;QAC3BE,MAAMF,iBAAiB,CAACI,SAAS,GAAGC,IAAAA,mBAAAA,EAClCR,gCAAgCG,iBAAiB,EACjDE,MAAMF,iBAAiB,CAACI,SAAS;IAErC;IAEA,IAAIF,MAAMD,cAAc,EAAE;QACxBC,MAAMD,cAAc,CAACG,SAAS,GAAGC,IAAAA,mBAAAA,EAC/BR,gCAAgCI,cAAc,EAC9CC,MAAMD,cAAc,CAACG,SAAS;IAElC;IAEA,OAAOF;AACT"}

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tableClassName: function() {
+        return tableClassName;
+    },
+    tableClassNames: function() {
+        return tableClassNames;
+    },
+    useTableStyles_unstable: function() {
+        return useTableStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const tableClassName = 'fui-Table';
+const tableClassNames = {
+    root: 'fui-Table'
+};
+const useTableLayoutStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'table',
+        verticalAlign: 'middle',
+        width: '100%',
+        tableLayout: 'fixed'
+    }
+});
+const useFlexLayoutStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'block'
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        borderCollapse: 'collapse',
+        backgroundColor: _reacttheme.tokens.colorSubtleBackground
+    }
+});
+const useTableStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = (0, _react.mergeClasses)(tableClassName, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["tableClassName","tableClassNames","useTableStyles_unstable","root","useTableLayoutStyles","makeStyles","display","verticalAlign","width","tableLayout","useFlexLayoutStyles","useStyles","borderCollapse","backgroundColor","tokens","colorSubtleBackground","state","styles","layoutStyles","table","flex","className","mergeClasses","noNativeElements"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,cAAAA;eAAAA;;IACAC,eAAAA;eAAAA;;IAgCAC,uBAAAA;eAAAA;;;uBAtC4B;4BAClB;AAIhB,MAAMF,iBAAiB;AACvB,MAAMC,kBAA8C;IACzDE,MAAM;AACR;AAEA,MAAMC,uBAAuBC,IAAAA,iBAAAA,EAAW;IACtCF,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,OAAO;QACPC,aAAa;IACf;AACF;AAEA,MAAMC,sBAAsBL,IAAAA,iBAAAA,EAAW;IACrCF,MAAM;QACJG,SAAS;IACX;AACF;AAEA;;CAEC,GACD,MAAMK,YAAYN,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJS,gBAAgB;QAChBC,iBAAiBC,kBAAAA,CAAOC,qBAAqB;IAC/C;AACF;AAKO,MAAMb,0BAA0B,CAACc;IACtC;IAEA,MAAMC,SAASN;IACf,MAAMO,eAAe;QACnBC,OAAOf;QACPgB,MAAMV;IACR;IACAM,MAAMb,IAAI,CAACkB,SAAS,GAAGC,IAAAA,mBAAAA,EACrBtB,gBACAiB,OAAOd,IAAI,EACXa,MAAMO,gBAAgB,GAAGL,aAAaE,IAAI,CAACjB,IAAI,GAAGe,aAAaC,KAAK,CAAChB,IAAI,EACzEa,MAAMb,IAAI,CAACkB,SAAS;IAGtB,OAAOL;AACT"}

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tableBodyClassName: function() {
+        return tableBodyClassName;
+    },
+    tableBodyClassNames: function() {
+        return tableBodyClassNames;
+    },
+    useTableBodyStyles_unstable: function() {
+        return useTableBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const useTableLayoutStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'table-row-group'
+    }
+});
+const useFlexLayoutStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'block'
+    }
+});
+const tableBodyClassName = 'fui-TableBody';
+const tableBodyClassNames = {
+    root: 'fui-TableBody'
+};
+const useTableBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = (0, _react.mergeClasses)(tableBodyClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["tableBodyClassName","tableBodyClassNames","useTableBodyStyles_unstable","useTableLayoutStyles","makeStyles","root","display","useFlexLayoutStyles","state","layoutStyles","table","flex","className","mergeClasses","noNativeElements"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAgBaA,kBAAAA;eAAAA;;IACAC,mBAAAA;eAAAA;;IAOAC,2BAAAA;eAAAA;;;uBAxB4B;AAIzC,MAAMC,uBAAuBC,IAAAA,iBAAAA,EAAW;IACtCC,MAAM;QACJC,SAAS;IACX;AACF;AAEA,MAAMC,sBAAsBH,IAAAA,iBAAAA,EAAW;IACrCC,MAAM;QACJC,SAAS;IACX;AACF;AAEO,MAAMN,qBAAqB;AAC3B,MAAMC,sBAAsD;IACjEI,MAAM;AACR;AAKO,MAAMH,8BAA8B,CAACM;IAC1C;IAEA,MAAMC,eAAe;QACnBC,OAAOP;QACPQ,MAAMJ;IACR;IACAC,MAAMH,IAAI,CAACO,SAAS,GAAGC,IAAAA,mBAAAA,EACrBb,oBACAQ,MAAMM,gBAAgB,GAAGL,aAAaE,IAAI,CAACN,IAAI,GAAGI,aAAaC,KAAK,CAACL,IAAI,EACzEG,MAAMH,IAAI,CAACO,SAAS;IAGtB,OAAOJ;AACT"}

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

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tableCellClassName: function() {
+        return tableCellClassName;
+    },
+    tableCellClassNames: function() {
+        return tableCellClassNames;
+    },
+    useTableCellStyles_unstable: function() {
+        return useTableCellStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const tableCellClassName = 'fui-TableCell';
+const tableCellClassNames = {
+    root: tableCellClassName
+};
+const useTableLayoutStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'table-cell',
+        verticalAlign: 'middle'
+    },
+    medium: {
+        height: '44px'
+    },
+    small: {
+        height: '34px'
+    },
+    'extra-small': {
+        height: '24px'
+    }
+});
+const useFlexLayoutStyles = (0, _react.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 = (0, _react.makeStyles)({
+    root: {
+        position: 'relative',
+        padding: `0px ${_reacttheme.tokens.spacingHorizontalS}`,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            outline: `2px solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+            borderRadius: _reacttheme.tokens.borderRadiusMedium
+        }, {
+            selector: 'focus'
+        })
+    }
+});
+const useTableCellStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = (0, _react.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-commonjs/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":["tableCellClassName","tableCellClassNames","useTableCellStyles_unstable","root","useTableLayoutStyles","makeStyles","display","verticalAlign","medium","height","small","useFlexLayoutStyles","minWidth","alignItems","flex","minHeight","useStyles","position","padding","tokens","spacingHorizontalS","createCustomFocusIndicatorStyle","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","state","styles","layoutStyles","table","className","mergeClasses","noNativeElements","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,kBAAAA;eAAAA;;IACAC,mBAAAA;eAAAA;;IA8DAC,2BAAAA;eAAAA;;;uBArE4B;4BAClB;8BACyB;AAIzC,MAAMF,qBAAqB;AAC3B,MAAMC,sBAAsD;IACjEE,MAAMH;AACR;AAEA,MAAMI,uBAAuBC,IAAAA,iBAAAA,EAAW;IACtCF,MAAM;QACJG,SAAS;QACTC,eAAe;IACjB;IAEAC,QAAQ;QACNC,QAAQ;IACV;IAEAC,OAAO;QACLD,QAAQ;IACV;IAEA,eAAe;QACbA,QAAQ;IACV;AACF;AAEA,MAAME,sBAAsBN,IAAAA,iBAAAA,EAAW;IACrCF,MAAM;QACJG,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,YAAYX,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJc,UAAU;QACVC,SAAS,CAAC,IAAI,EAAEC,kBAAAA,CAAOC,kBAAkB,CAAC,CAAC;QAE3C,GAAGC,IAAAA,6CAAAA,EACD;YAAEC,SAAS,CAAC,UAAU,EAAEH,kBAAAA,CAAOI,iBAAiB,CAAC,CAAC;YAAEC,cAAcL,kBAAAA,CAAOM,kBAAkB;QAAC,GAC5F;YAAEC,UAAU;QAAQ,EACrB;IACH;AACF;AAKO,MAAMxB,8BAA8B,CAACyB;IAC1C;IAEA,MAAMC,SAASZ;IACf,MAAMa,eAAe;QACnBC,OAAO1B;QACPU,MAAMH;IACR;IACAgB,MAAMxB,IAAI,CAAC4B,SAAS,GAAGC,IAAAA,mBAAAA,EACrB/B,oBAAoBE,IAAI,EACxByB,OAAOzB,IAAI,EACXwB,MAAMM,gBAAgB,GAAGJ,aAAaf,IAAI,CAACX,IAAI,GAAG0B,aAAaC,KAAK,CAAC3B,IAAI,EACzEwB,MAAMM,gBAAgB,GAAGJ,aAAaf,IAAI,CAACa,MAAMO,IAAI,CAAC,GAAGL,aAAaC,KAAK,CAACH,MAAMO,IAAI,CAAC,EACvFP,MAAMxB,IAAI,CAAC4B,SAAS;IAEtB,OAAOJ;AACT"}

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tableCellActionsClassNames: function() {
+        return tableCellActionsClassNames;
+    },
+    useTableCellActionsStyles_unstable: function() {
+        return useTableCellActionsStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const tableCellActionsClassNames = {
+    root: 'fui-TableCellActions'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        backgroundColor: 'inherit',
+        position: 'absolute',
+        right: '0px',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        opacity: 0,
+        marginLeft: 'auto'
+    },
+    visible: {
+        opacity: 1
+    }
+});
+const useTableCellActionsStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(tableCellActionsClassNames.root, styles.root, state.visible && styles.visible, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["tableCellActionsClassNames","useTableCellActionsStyles_unstable","root","useStyles","makeStyles","backgroundColor","position","right","top","transform","opacity","marginLeft","visible","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,0BAAAA;eAAAA;;IA0BAC,kCAAAA;eAAAA;;;uBA9B4B;AAIlC,MAAMD,6BAAoE;IAC/EE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,iBAAiB;QACjBC,UAAU;QACVC,OAAO;QACPC,KAAK;QACLC,WAAW;QACXC,SAAS;QACTC,YAAY;IACd;IAEAC,SAAS;QACPF,SAAS;IACX;AACF;AAKO,MAAMT,qCAAqC,CAACY;IACjD;IAEA,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAAA,EACrBhB,2BAA2BE,IAAI,EAC/BY,OAAOZ,IAAI,EACXW,MAAMD,OAAO,IAAIE,OAAOF,OAAO,EAC/BC,MAAMX,IAAI,CAACa,SAAS;IAGtB,OAAOF;AACT"}

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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tableCellLayoutClassNames: function() {
+        return tableCellLayoutClassNames;
+    },
+    useTableCellLayoutStyles_unstable: function() {
+        return useTableCellLayoutStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+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 = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: _reacttheme.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: _reacttheme.tokens.fontWeightSemibold
+    },
+    mainTruncate: {
+        overflowX: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    },
+    description: {
+        color: _reacttheme.tokens.colorNeutralForeground2,
+        ..._reacttheme.typographyStyles.caption1
+    }
+});
+const useTableCellLayoutStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { truncate } = state;
+    state.root.className = (0, _react.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 = (0, _react.mergeClasses)(tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);
+    }
+    if (state.main) {
+        state.main.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);
+    }
+    if (state.description) {
+        state.description.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.description, styles.description, state.description.className);
+    }
+    if (state.content) {
+        state.content.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);
+    }
+    return state;
+};

package/lib-commonjs/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":["tableCellLayoutClassNames","useTableCellLayoutStyles_unstable","root","media","main","description","content","useStyles","makeStyles","display","alignItems","gap","tokens","spacingHorizontalS","flex","rootTruncate","overflowX","flexDirection","contentTruncate","mediaExtraSmall","fontSize","mediaSmallAndMedium","mediaPrimary","mainPrimary","fontWeight","fontWeightSemibold","mainTruncate","whiteSpace","textOverflow","color","colorNeutralForeground2","typographyStyles","caption1","state","styles","truncate","className","mergeClasses","primary","appearance","mediaSizedStyles","small","medium","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,yBAAAA;eAAAA;;IAoEAC,iCAAAA;eAAAA;;;uBA1E4B;4BAClB;AAKhB,MAAMD,4BAAkE;IAC7EE,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,aAAa;IACbC,SAAS;AACX;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BN,MAAM;QACJO,SAAS;QACTC,YAAY;QACZC,KAAKC,kBAAAA,CAAOC,kBAAkB;QAC9BC,MAAM;IACR;IAEAC,cAAc;QACZC,WAAW;IACb;IAEAV,SAAS;QACPG,SAAS;QACTQ,eAAe;IACjB;IAEAC,iBAAiB;QACfF,WAAW;IACb;IAEAb,OAAO;QACLM,SAAS;QACTC,YAAY;IACd;IAEAS,iBAAiB;QACfC,UAAU;IACZ;IAEAC,qBAAqB;QACnBD,UAAU;IACZ;IAEAE,cAAc;QACZF,UAAU;IACZ;IAEAG,aAAa;QACXC,YAAYZ,kBAAAA,CAAOa,kBAAkB;IACvC;IAEAC,cAAc;QACZV,WAAW;QACXW,YAAY;QACZC,cAAc;IAChB;IAEAvB,aAAa;QACXwB,OAAOjB,kBAAAA,CAAOkB,uBAAuB;QACrC,GAAGC,4BAAAA,CAAiBC,QAAQ;IAC9B;AACF;AAKO,MAAM/B,oCAAoC,CAACgC;IAChD;IAEA,MAAMC,SAAS3B;IACf,MAAM,EAAE4B,QAAQ,EAAE,GAAGF;IAErBA,MAAM/B,IAAI,CAACkC,SAAS,GAAGC,IAAAA,mBAAAA,EACrBrC,0BAA0BE,IAAI,EAC9BgC,OAAOhC,IAAI,EACXiC,YAAYD,OAAOnB,YAAY,EAC/BkB,MAAM/B,IAAI,CAACkC,SAAS;IAEtB,MAAME,UAAUL,MAAMM,UAAU,KAAK;IAErC,IAAIN,MAAM9B,KAAK,EAAE;QACf,MAAMqC,mBAAmB;YACvBC,OAAOP,OAAOb,mBAAmB;YACjCqB,QAAQR,OAAOb,mBAAmB;YAClC,eAAea,OAAOf,eAAe;QACvC;QAEAc,MAAM9B,KAAK,CAACiC,SAAS,GAAGC,IAAAA,mBAAAA,EACtBrC,0BAA0BG,KAAK,EAC/B+B,OAAO/B,KAAK,EACZqC,gBAAgB,CAACP,MAAMU,IAAI,CAAC,EAC5BL,WAAWJ,OAAOZ,YAAY,EAC9BW,MAAM9B,KAAK,CAACiC,SAAS;IAEzB;IAEA,IAAIH,MAAM7B,IAAI,EAAE;QACd6B,MAAM7B,IAAI,CAACgC,SAAS,GAAGC,IAAAA,mBAAAA,EACrBrC,0BAA0BI,IAAI,EAC9B+B,YAAYD,OAAOR,YAAY,EAC/BY,WAAWJ,OAAOX,WAAW,EAC7BU,MAAM7B,IAAI,CAACgC,SAAS;IAExB;IAEA,IAAIH,MAAM5B,WAAW,EAAE;QACrB4B,MAAM5B,WAAW,CAAC+B,SAAS,GAAGC,IAAAA,mBAAAA,EAC5BrC,0BAA0BK,WAAW,EACrC6B,OAAO7B,WAAW,EAClB4B,MAAM5B,WAAW,CAAC+B,SAAS;IAE/B;IAEA,IAAIH,MAAM3B,OAAO,EAAE;QACjB2B,MAAM3B,OAAO,CAAC8B,SAAS,GAAGC,IAAAA,mBAAAA,EACxBrC,0BAA0BM,OAAO,EACjC4B,OAAO5B,OAAO,EACd6B,YAAYD,OAAOhB,eAAe,EAClCe,MAAM3B,OAAO,CAAC8B,SAAS;IAE3B;IAEA,OAAOH;AACT"}

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tableHeaderClassName: function() {
+        return tableHeaderClassName;
+    },
+    tableHeaderClassNames: function() {
+        return tableHeaderClassNames;
+    },
+    useTableHeaderStyles_unstable: function() {
+        return useTableHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const tableHeaderClassName = 'fui-TableHeader';
+const tableHeaderClassNames = {
+    root: 'fui-TableHeader'
+};
+const useFlexLayoutStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'block'
+    }
+});
+const useTableLayoutStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'table-row-group'
+    }
+});
+const useTableHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = (0, _react.mergeClasses)(tableHeaderClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["tableHeaderClassName","tableHeaderClassNames","useTableHeaderStyles_unstable","root","useFlexLayoutStyles","makeStyles","display","useTableLayoutStyles","state","layoutStyles","table","flex","className","mergeClasses","noNativeElements"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,oBAAAA;eAAAA;;IACAC,qBAAAA;eAAAA;;IAmBAC,6BAAAA;eAAAA;;;uBAxB4B;AAIlC,MAAMF,uBAAuB;AAC7B,MAAMC,wBAA0D;IACrEE,MAAM;AACR;AAEA,MAAMC,sBAAsBC,IAAAA,iBAAAA,EAAW;IACrCF,MAAM;QACJG,SAAS;IACX;AACF;AAEA,MAAMC,uBAAuBF,IAAAA,iBAAAA,EAAW;IACtCF,MAAM;QACJG,SAAS;IACX;AACF;AAKO,MAAMJ,gCAAgC,CAACM;IAC5C;IAEA,MAAMC,eAAe;QACnBC,OAAOH;QACPI,MAAMP;IACR;IACAI,MAAML,IAAI,CAACS,SAAS,GAAGC,IAAAA,mBAAAA,EACrBb,sBACAQ,MAAMM,gBAAgB,GAAGL,aAAaE,IAAI,CAACR,IAAI,GAAGM,aAAaC,KAAK,CAACP,IAAI,EACzEK,MAAML,IAAI,CAACS,SAAS;IAGtB,OAAOJ;AACT"}