@fluentui/react-table 9.17.7 → 9.18.0

package/lib/components/TableHeaderCell/useTableHeaderCellStyles.styles.raw.js

@@ -0,0 +1,101 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const tableHeaderCellClassName = 'fui-TableHeaderCell';
+export const tableHeaderCellClassNames = {
+    root: 'fui-TableHeaderCell',
+    button: 'fui-TableHeaderCell__button',
+    sortIcon: 'fui-TableHeaderCell__sortIcon',
+    aside: 'fui-TableHeaderCell__aside'
+};
+const useTableLayoutStyles = makeStyles({
+    root: {
+        display: 'table-cell',
+        verticalAlign: 'middle'
+    }
+});
+const useFlexLayoutStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flex: '1 1 0px',
+        minWidth: '0px'
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        fontWeight: tokens.fontWeightRegular,
+        padding: `0px ${tokens.spacingHorizontalS}`,
+        ...createCustomFocusIndicatorStyle({
+            outline: `2px solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium
+        }, {
+            selector: 'focus-within'
+        }),
+        position: 'relative'
+    },
+    rootInteractive: {
+        ':hover': {
+            color: tokens.colorNeutralForeground1Hover,
+            backgroundColor: tokens.colorSubtleBackgroundHover
+        },
+        ':active': {
+            color: tokens.colorNeutralForeground1Pressed,
+            backgroundColor: tokens.colorSubtleBackgroundPressed
+        }
+    },
+    resetButton: {
+        resize: 'horizontal',
+        boxSizing: 'content-box',
+        backgroundColor: 'inherit',
+        color: 'inherit',
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        lineHeight: 'normal',
+        overflow: 'visible',
+        padding: '0',
+        border: 'none',
+        textAlign: 'unset'
+    },
+    button: {
+        position: 'relative',
+        width: '100%',
+        display: 'flex',
+        flexGrow: 1,
+        height: '100%',
+        alignItems: 'center',
+        gap: tokens.spacingHorizontalXS,
+        minHeight: '32px',
+        flex: '1 1 0px',
+        outlineStyle: 'none'
+    },
+    sortable: {
+        cursor: 'pointer'
+    },
+    sortIcon: {
+        display: 'flex',
+        alignItems: 'center',
+        paddingTop: tokens.spacingVerticalXXS
+    },
+    resizeHandle: {}
+});
+/**
+ * Apply styling to the TableHeaderCell slots based on the state
+ */ export const useTableHeaderCellStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+    state.button.className = mergeClasses(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);
+    if (state.sortIcon) {
+        state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
+    }
+    if (state.aside) {
+        state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n  aside: 'fui-TableHeaderCell__aside',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flex: '1 1 0px',\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    fontWeight: tokens.fontWeightRegular,\n    padding: `0px ${tokens.spacingHorizontalS}`,\n    ...createCustomFocusIndicatorStyle(\n      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n      { selector: 'focus-within' },\n    ),\n    position: 'relative',\n  },\n\n  rootInteractive: {\n    ':hover': {\n      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground1Pressed,\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  resetButton: {\n    resize: 'horizontal',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    overflow: 'visible',\n    padding: '0',\n    border: 'none',\n    textAlign: 'unset',\n  },\n\n  button: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    gap: tokens.spacingHorizontalXS,\n    minHeight: '32px',\n    flex: '1 1 0px',\n    outlineStyle: 'none',\n  },\n\n  sortable: {\n    cursor: 'pointer',\n  },\n\n  sortIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n\n  resizeHandle: {},\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderCellClassNames.root,\n    styles.root,\n    state.sortable && styles.rootInteractive,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  if (state.aside) {\n    state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","aside","useTableLayoutStyles","display","verticalAlign","useFlexLayoutStyles","flex","minWidth","useStyles","fontWeight","fontWeightRegular","padding","spacingHorizontalS","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","position","rootInteractive","color","colorNeutralForeground1Hover","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground1Pressed","colorSubtleBackgroundPressed","resetButton","resize","boxSizing","fontFamily","fontSize","lineHeight","overflow","border","textAlign","width","flexGrow","height","alignItems","gap","spacingHorizontalXS","minHeight","outlineStyle","sortable","cursor","paddingTop","spacingVerticalXXS","resizeHandle","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","className","noNativeElements"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.raw.js

@@ -0,0 +1,49 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const tableResizeHandleClassNames = {
+    root: 'fui-TableResizeHandle'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        width: '16px',
+        margin: '0 -8px',
+        cursor: 'col-resize',
+        opacity: 0,
+        transitionProperty: 'opacity',
+        transitionDuration: '.2s',
+        zIndex: 1,
+        // If mouse users focus on the resize handle through a context menu, we want the handle
+        // to be visible because the mouse might not be hovering over the handle
+        ':focus': {
+            opacity: 1,
+            outlineStyle: 'none'
+        },
+        ':hover': {
+            opacity: 1
+        },
+        '::after': {
+            content: '" "',
+            display: 'block',
+            width: '1px',
+            position: 'absolute',
+            left: '50%',
+            top: 0,
+            bottom: 0,
+            backgroundColor: tokens.colorNeutralStroke1
+        }
+    }
+});
+/**
+ * Apply styling to the TableResizeHandle slots based on the state
+ */ export const useTableResizeHandleStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableResizeHandle/useTableResizeHandleStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableResizeHandleSlots, TableResizeHandleState } from './TableResizeHandle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const tableResizeHandleClassNames: SlotClassNames<TableResizeHandleSlots> = {\n  root: 'fui-TableResizeHandle',\n  // TODO: add class names for all slots on TableResizeHandleSlots.\n  // Should be of the form `<slotName>: 'fui-TableResizeHandle__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    bottom: 0,\n    width: '16px',\n    margin: '0 -8px',\n    cursor: 'col-resize',\n    opacity: 0,\n    transitionProperty: 'opacity',\n    transitionDuration: '.2s',\n    zIndex: 1,\n\n    // If mouse users focus on the resize handle through a context menu, we want the handle\n    // to be visible because the mouse might not be hovering over the handle\n    ':focus': {\n      opacity: 1,\n      outlineStyle: 'none',\n    },\n\n    ':hover': {\n      opacity: 1,\n    },\n\n    '::after': {\n      content: '\" \"',\n      display: 'block',\n      width: '1px',\n      position: 'absolute',\n      left: '50%',\n      top: 0,\n      bottom: 0,\n      backgroundColor: tokens.colorNeutralStroke1,\n    },\n  },\n});\n\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */\nexport const useTableResizeHandleStyles_unstable = (state: TableResizeHandleState): TableResizeHandleState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tableResizeHandleClassNames","root","useStyles","position","right","top","bottom","width","margin","cursor","opacity","transitionProperty","transitionDuration","zIndex","outlineStyle","content","display","left","backgroundColor","colorNeutralStroke1","useTableResizeHandleStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;AAGR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,UAAU;QACVC,OAAO;QACPC,KAAK;QACLC,QAAQ;QACRC,OAAO;QACPC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,oBAAoB;QACpBC,oBAAoB;QACpBC,QAAQ;QAER,uFAAuF;QACvF,wEAAwE;QACxE,UAAU;YACRH,SAAS;YACTI,cAAc;QAChB;QAEA,UAAU;YACRJ,SAAS;QACX;QAEA,WAAW;YACTK,SAAS;YACTC,SAAS;YACTT,OAAO;YACPJ,UAAU;YACVc,MAAM;YACNZ,KAAK;YACLC,QAAQ;YACRY,iBAAiBnB,OAAOoB,mBAAmB;QAC7C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClD;IAEA,MAAMC,SAASpB;IACfmB,MAAMpB,IAAI,CAACsB,SAAS,GAAGzB,aAAaE,4BAA4BC,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACsB,SAAS;IACvG,OAAOF;AACT,EAAE"}

package/lib/components/TableRow/useTableRowStyles.styles.raw.js

@@ -0,0 +1,137 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';
+import { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const tableRowClassName = 'fui-TableRow';
+export const tableRowClassNames = {
+    root: tableRowClassName
+};
+const useTableLayoutStyles = makeStyles({
+    root: {
+        display: 'table-row'
+    }
+});
+const useFlexLayoutStyles = makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'center'
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        color: tokens.colorNeutralForeground1,
+        boxSizing: 'border-box',
+        ...createCustomFocusIndicatorStyle({
+            [`& .${tableSelectionCellClassNames.root}`]: {
+                opacity: 1
+            },
+            [`& .${tableCellActionsClassNames.root}`]: {
+                opacity: 1
+            }
+        }, {
+            selector: 'focus-within'
+        }),
+        ...createCustomFocusIndicatorStyle({
+            outline: `2px solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium
+        }, {
+            selector: 'focus'
+        })
+    },
+    rootInteractive: {
+        ...createCustomFocusIndicatorStyle({
+            [`& .${tableCellActionsClassNames.root}`]: {
+                opacity: 1
+            }
+        }, {
+            selector: 'focus-within'
+        }),
+        ':active': {
+            backgroundColor: tokens.colorSubtleBackgroundPressed,
+            color: tokens.colorNeutralForeground1Pressed,
+            [`& .${tableCellActionsClassNames.root}`]: {
+                opacity: 1
+            },
+            [`& .${tableSelectionCellClassNames.root}`]: {
+                opacity: 1
+            }
+        },
+        ':hover': {
+            backgroundColor: tokens.colorSubtleBackgroundHover,
+            color: tokens.colorNeutralForeground1Hover,
+            [`& .${tableCellActionsClassNames.root}`]: {
+                opacity: 1
+            },
+            [`& .${tableSelectionCellClassNames.root}`]: {
+                opacity: 1
+            }
+        },
+        // High contrast styles
+        '@media (forced-colors: active)': {
+            ':hover': {
+                color: 'Highlight',
+                ...shorthands.borderColor('Highlight')
+            }
+        }
+    },
+    medium: {
+        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`
+    },
+    small: {
+        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`
+    },
+    'extra-small': {
+        fontSize: tokens.fontSizeBase200
+    },
+    brand: {
+        backgroundColor: tokens.colorBrandBackground2,
+        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),
+        ':active': {
+            backgroundColor: tokens.colorBrandBackground2,
+            color: tokens.colorNeutralForeground1
+        },
+        '@media(forced-colors: active)': {
+            border: '2px solid transparent',
+            borderRadius: tokens.borderRadiusMedium,
+            boxSizing: 'border-box',
+            ':focus-visible': {
+                outlineOffset: '-4px'
+            }
+        }
+    },
+    neutral: {
+        '@media(forced-colors: active)': {
+            border: '2px solid transparent',
+            borderRadius: tokens.borderRadiusMedium,
+            boxSizing: 'border-box',
+            ':focus-visible': {
+                outlineOffset: '-4px'
+            }
+        },
+        backgroundColor: tokens.colorSubtleBackgroundSelected,
+        color: tokens.colorNeutralForeground1Hover,
+        ':hover': {
+            backgroundColor: tokens.colorSubtleBackgroundSelected
+        },
+        ':active': {
+            backgroundColor: tokens.colorSubtleBackgroundSelected
+        },
+        ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)
+    },
+    none: {}
+});
+/**
+ * Apply styling to the TableRow slots based on the state
+ */ export const useTableRowStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);
+    return state;
+};

package/lib/components/TableRow/useTableRowStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableRow/useTableRowStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n  root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    color: tokens.colorNeutralForeground1,\n    boxSizing: 'border-box',\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableSelectionCellClassNames.root}`]: {\n          opacity: 1,\n        },\n        [`& .${tableCellActionsClassNames.root}`]: {\n          opacity: 1,\n        },\n      },\n      { selector: 'focus-within' },\n    ),\n    ...createCustomFocusIndicatorStyle(\n      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n      { selector: 'focus' },\n    ),\n  },\n\n  rootInteractive: {\n    ...createCustomFocusIndicatorStyle(\n      {\n        [`& .${tableCellActionsClassNames.root}`]: {\n          opacity: 1,\n        },\n      },\n      { selector: 'focus-within' },\n    ),\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground1Pressed,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        opacity: 1,\n      },\n    },\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground1Hover,\n      [`& .${tableCellActionsClassNames.root}`]: {\n        opacity: 1,\n      },\n      [`& .${tableSelectionCellClassNames.root}`]: {\n        opacity: 1,\n      },\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n      ':hover': {\n        color: 'Highlight',\n        ...shorthands.borderColor('Highlight'),\n      },\n    },\n  },\n\n  medium: { borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}` },\n\n  small: { borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}` },\n\n  'extra-small': {\n    fontSize: tokens.fontSizeBase200,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    ':active': {\n      backgroundColor: tokens.colorBrandBackground2,\n      color: tokens.colorNeutralForeground1,\n    },\n\n    '@media(forced-colors: active)': {\n      border: '2px solid transparent',\n      borderRadius: tokens.borderRadiusMedium,\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n  },\n\n  neutral: {\n    '@media(forced-colors: active)': {\n      border: '2px solid transparent',\n      borderRadius: tokens.borderRadiusMedium,\n      boxSizing: 'border-box',\n      ':focus-visible': {\n        outlineOffset: '-4px',\n      },\n    },\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    color: tokens.colorNeutralForeground1Hover,\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundSelected,\n    },\n\n    ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n  },\n\n  none: {},\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\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    tableRowClassNames.root,\n    styles.root,\n    !state.isHeaderRow && styles.rootInteractive,\n    styles[state.size],\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    styles[state.appearance],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","display","useFlexLayoutStyles","alignItems","useStyles","color","colorNeutralForeground1","boxSizing","opacity","selector","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","rootInteractive","backgroundColor","colorSubtleBackgroundPressed","colorNeutralForeground1Pressed","colorSubtleBackgroundHover","colorNeutralForeground1Hover","borderColor","medium","borderBottom","strokeWidthThin","colorNeutralStroke2","small","fontSize","fontSizeBase200","brand","colorBrandBackground2","colorTransparentStrokeInteractive","border","outlineOffset","neutral","colorSubtleBackgroundSelected","colorNeutralStrokeOnBrand","none","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/TableSelectionCell/useTableSelectionCellStyles.styles.raw.js

@@ -0,0 +1,74 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const CELL_WIDTH = 44;
+export const tableSelectionCellClassNames = {
+    root: 'fui-TableSelectionCell',
+    checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',
+    radioIndicator: 'fui-TableSelectionCell__radioIndicator'
+};
+const useTableLayoutStyles = makeStyles({
+    root: {
+        display: 'table-cell',
+        width: `${CELL_WIDTH}px`
+    }
+});
+const useFlexLayoutStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flex: '1 1 0px',
+        minWidth: `${CELL_WIDTH}px`,
+        maxWidth: `${CELL_WIDTH}px`,
+        justifyContent: 'center'
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        textAlign: 'center',
+        whiteSpace: 'nowrap',
+        padding: '0',
+        ...createCustomFocusIndicatorStyle({
+            outline: `2px solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium
+        }, {
+            selector: 'focus'
+        })
+    },
+    radioIndicator: {
+        display: 'flex',
+        flexGrow: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    subtle: {
+        opacity: 0,
+        ...createCustomFocusIndicatorStyle({
+            opacity: 1
+        }, {
+            selector: 'focus-within'
+        })
+    },
+    hidden: {
+        opacity: 0
+    }
+});
+/**
+ * Apply styling to the TableSelectionCell slots based on the state
+ */ export const useTableSelectionCellStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);
+    if (state.checkboxIndicator) {
+        state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);
+    }
+    if (state.radioIndicator) {
+        state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const CELL_WIDTH = 44;\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    width: `${CELL_WIDTH}px`,\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flex: '1 1 0px',\n    minWidth: `${CELL_WIDTH}px`,\n    maxWidth: `${CELL_WIDTH}px`,\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n    padding: '0',\n    ...createCustomFocusIndicatorStyle(\n      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n      { selector: 'focus' },\n    ),\n  },\n\n  radioIndicator: {\n    display: 'flex',\n    flexGrow: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n\n  subtle: {\n    opacity: 0,\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  hidden: {\n    opacity: 0,\n  },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\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    tableSelectionCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.subtle && state.checked === false && styles.subtle,\n    state.hidden && styles.hidden,\n    state.root.className,\n  );\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.radioIndicator,\n      styles.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","display","width","useFlexLayoutStyles","flex","minWidth","maxWidth","justifyContent","useStyles","textAlign","whiteSpace","padding","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","flexGrow","alignItems","subtle","opacity","hidden","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","className","noNativeElements","checked"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,aAAa,GAAG;AAE7B,OAAO,MAAMC,+BAAwE;IACnFC,MAAM;IACNC,mBAAmB;IACnBC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,uBAAuBT,WAAW;IACtCM,MAAM;QACJI,SAAS;QACTC,OAAO,CAAC,EAAEP,WAAW,EAAE,CAAC;IAC1B;AACF;AAEA,MAAMQ,sBAAsBZ,WAAW;IACrCM,MAAM;QACJI,SAAS;QACTG,MAAM;QACNC,UAAU,CAAC,EAAEV,WAAW,EAAE,CAAC;QAC3BW,UAAU,CAAC,EAAEX,WAAW,EAAE,CAAC;QAC3BY,gBAAgB;IAClB;AACF;AAEA;;CAEC,GACD,MAAMC,YAAYjB,WAAW;IAC3BM,MAAM;QACJY,WAAW;QACXC,YAAY;QACZC,SAAS;QACT,GAAGlB,gCACD;YAAEmB,SAAS,CAAC,UAAU,EAAElB,OAAOmB,iBAAiB,CAAC,CAAC;YAAEC,cAAcpB,OAAOqB,kBAAkB;QAAC,GAC5F;YAAEC,UAAU;QAAQ,EACrB;IACH;IAEAjB,gBAAgB;QACdE,SAAS;QACTgB,UAAU;QACVC,YAAY;QACZX,gBAAgB;IAClB;IAEAY,QAAQ;QACNC,SAAS;QACT,GAAG3B,gCACD;YACE2B,SAAS;QACX,GACA;YAAEJ,UAAU;QAAe,EAC5B;IACH;IAEAK,QAAQ;QACND,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,uCAAuC,CAACC;IACnD;IAEA,MAAMC,SAAShB;IACf,MAAMiB,eAAe;QACnBC,OAAO1B;QACPI,MAAMD;IACR;IACAoB,MAAM1B,IAAI,CAAC8B,SAAS,GAAGnC,aACrBI,6BAA6BC,IAAI,EACjC2B,OAAO3B,IAAI,EACX0B,MAAMK,gBAAgB,GAAGH,aAAarB,IAAI,CAACP,IAAI,GAAG4B,aAAaC,KAAK,CAAC7B,IAAI,EACzE0B,MAAMJ,MAAM,IAAII,MAAMM,OAAO,KAAK,SAASL,OAAOL,MAAM,EACxDI,MAAMF,MAAM,IAAIG,OAAOH,MAAM,EAC7BE,MAAM1B,IAAI,CAAC8B,SAAS;IAEtB,IAAIJ,MAAMzB,iBAAiB,EAAE;QAC3ByB,MAAMzB,iBAAiB,CAAC6B,SAAS,GAAGnC,aAClCI,6BAA6BE,iBAAiB,EAC9CyB,MAAMzB,iBAAiB,CAAC6B,SAAS;IAErC;IAEA,IAAIJ,MAAMxB,cAAc,EAAE;QACxBwB,MAAMxB,cAAc,CAAC4B,SAAS,GAAGnC,aAC/BI,6BAA6BG,cAAc,EAC3CyB,OAAOzB,cAAc,EACrBwB,MAAMxB,cAAc,CAAC4B,SAAS;IAElC;IAEA,OAAOJ;AACT,EAAE"}

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

@@ -0,0 +1,29 @@
+"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, {
+    dataGridClassNames: function() {
+        return dataGridClassNames;
+    },
+    useDataGridStyles_unstable: function() {
+        return useDataGridStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _useTableStylesstyles = require("../Table/useTableStyles.styles");
+const dataGridClassNames = {
+    root: 'fui-DataGrid'
+};
+const useDataGridStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _useTableStylesstyles.useTableStyles_unstable)(state);
+    state.root.className = (0, _react.mergeClasses)(dataGridClassNames.root, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["dataGridClassNames","useDataGridStyles_unstable","root","state","useTableStyles_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,kBAAAA;eAAAA;;IAOAC,0BAAAA;eAAAA;;;uBAZgB;sCAGW;AAEjC,MAAMD,qBAAoD;IAC/DE,MAAM;AACR;AAKO,MAAMD,6BAA6B,CAACE;IACzC;IAEAC,IAAAA,6CAAAA,EAAwBD;IACxBA,MAAMD,IAAI,CAACG,SAAS,GAAGC,IAAAA,mBAAAA,EAAaN,mBAAmBE,IAAI,EAAEC,MAAMD,IAAI,CAACG,SAAS;IAEjF,OAAOF;AACT"}

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

@@ -0,0 +1,29 @@
+"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, {
+    dataGridBodyClassNames: function() {
+        return dataGridBodyClassNames;
+    },
+    useDataGridBodyStyles_unstable: function() {
+        return useDataGridBodyStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _useTableBodyStylesstyles = require("../TableBody/useTableBodyStyles.styles");
+const dataGridBodyClassNames = {
+    root: 'fui-DataGridBody'
+};
+const useDataGridBodyStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _useTableBodyStylesstyles.useTableBodyStyles_unstable)(state);
+    state.root.className = (0, _react.mergeClasses)(dataGridBodyClassNames.root, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["dataGridBodyClassNames","useDataGridBodyStyles_unstable","root","state","useTableBodyStyles_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,sBAAAA;eAAAA;;IAOAC,8BAAAA;eAAAA;;;uBAZgB;0CAGe;AAErC,MAAMD,yBAA4D;IACvEE,MAAM;AACR;AAKO,MAAMD,iCAAiC,CAACE;IAC7C;IAEAC,IAAAA,qDAAAA,EAA4BD;IAC5BA,MAAMD,IAAI,CAACG,SAAS,GAAGC,IAAAA,mBAAAA,EAAaN,uBAAuBE,IAAI,EAAEC,MAAMD,IAAI,CAACG,SAAS;IAErF,OAAOF;AACT"}

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

@@ -0,0 +1,29 @@
+"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, {
+    dataGridCellClassNames: function() {
+        return dataGridCellClassNames;
+    },
+    useDataGridCellStyles_unstable: function() {
+        return useDataGridCellStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _useTableCellStylesstyles = require("../TableCell/useTableCellStyles.styles");
+const dataGridCellClassNames = {
+    root: 'fui-DataGridCell'
+};
+const useDataGridCellStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _useTableCellStylesstyles.useTableCellStyles_unstable)(state);
+    state.root.className = (0, _react.mergeClasses)(dataGridCellClassNames.root, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["dataGridCellClassNames","useDataGridCellStyles_unstable","root","state","useTableCellStyles_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,sBAAAA;eAAAA;;IAOAC,8BAAAA;eAAAA;;;uBAZgB;0CAGe;AAErC,MAAMD,yBAA4D;IACvEE,MAAM;AACR;AAKO,MAAMD,iCAAiC,CAACE;IAC7C;IAEAC,IAAAA,qDAAAA,EAA4BD;IAC5BA,MAAMD,IAAI,CAACG,SAAS,GAAGC,IAAAA,mBAAAA,EAAaN,uBAAuBE,IAAI,EAAEC,MAAMD,IAAI,CAACG,SAAS;IAErF,OAAOF;AACT"}

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

@@ -0,0 +1,29 @@
+"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, {
+    dataGridHeaderClassNames: function() {
+        return dataGridHeaderClassNames;
+    },
+    useDataGridHeaderStyles_unstable: function() {
+        return useDataGridHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _useTableHeaderStylesstyles = require("../TableHeader/useTableHeaderStyles.styles");
+const dataGridHeaderClassNames = {
+    root: 'fui-DataGridHeader'
+};
+const useDataGridHeaderStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _useTableHeaderStylesstyles.useTableHeaderStyles_unstable)(state);
+    state.root.className = (0, _react.mergeClasses)(dataGridHeaderClassNames.root, state.root.className);
+    return state;
+};

package/lib-commonjs/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":["dataGridHeaderClassNames","useDataGridHeaderStyles_unstable","root","state","useTableHeaderStyles_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IAOAC,gCAAAA;eAAAA;;;uBAZgB;4CAGiB;AAEvC,MAAMD,2BAAgE;IAC3EE,MAAM;AACR;AAKO,MAAMD,mCAAmC,CAACE;IAC/C;IAEAC,IAAAA,yDAAAA,EAA8BD;IAC9BA,MAAMD,IAAI,CAACG,SAAS,GAAGC,IAAAA,mBAAAA,EAAaN,yBAAyBE,IAAI,EAAEC,MAAMD,IAAI,CAACG,SAAS;IAEvF,OAAOF;AACT"}

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

@@ -0,0 +1,41 @@
+"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, {
+    dataGridHeaderCellClassNames: function() {
+        return dataGridHeaderCellClassNames;
+    },
+    useDataGridHeaderCellStyles_unstable: function() {
+        return useDataGridHeaderCellStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _useTableHeaderCellStylesstyles = require("../TableHeaderCell/useTableHeaderCellStyles.styles");
+const dataGridHeaderCellClassNames = {
+    root: 'fui-DataGridHeaderCell',
+    button: 'fui-DataGridHeaderCell__button',
+    sortIcon: 'fui-DataGridHeaderCell__sortIcon',
+    aside: 'fui-DataGridHeaderCell__aside'
+};
+const useDataGridHeaderCellStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _useTableHeaderCellStylesstyles.useTableHeaderCellStyles_unstable)(state);
+    state.root.className = (0, _react.mergeClasses)(dataGridHeaderCellClassNames.root, state.root.className);
+    if (state.button) {
+        state.button.className = (0, _react.mergeClasses)(dataGridHeaderCellClassNames.button, state.button.className);
+    }
+    if (state.sortIcon) {
+        state.sortIcon.className = (0, _react.mergeClasses)(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);
+    }
+    if (state.aside) {
+        state.aside.className = (0, _react.mergeClasses)(dataGridHeaderCellClassNames.aside, state.aside.className);
+    }
+    return state;
+};

package/lib-commonjs/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":["dataGridHeaderCellClassNames","useDataGridHeaderCellStyles_unstable","root","button","sortIcon","aside","state","useTableHeaderCellStyles_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,4BAAAA;eAAAA;;IAUAC,oCAAAA;eAAAA;;;uBAfgB;gDAGqB;AAE3C,MAAMD,+BAAwE;IACnFE,MAAM;IACNC,QAAQ;IACRC,UAAU;IACVC,OAAO;AACT;AAKO,MAAMJ,uCAAuC,CAACK;IACnD;IAEAC,IAAAA,iEAAAA,EAAkCD;IAClCA,MAAMJ,IAAI,CAACM,SAAS,GAAGC,IAAAA,mBAAAA,EAAaT,6BAA6BE,IAAI,EAAEI,MAAMJ,IAAI,CAACM,SAAS;IAE3F,IAAIF,MAAMH,MAAM,EAAE;QAChBG,MAAMH,MAAM,CAACK,SAAS,GAAGC,IAAAA,mBAAAA,EAAaT,6BAA6BG,MAAM,EAAEG,MAAMH,MAAM,CAACK,SAAS;IACnG;IAEA,IAAIF,MAAMF,QAAQ,EAAE;QAClBE,MAAMF,QAAQ,CAACI,SAAS,GAAGC,IAAAA,mBAAAA,EAAaT,6BAA6BI,QAAQ,EAAEE,MAAMF,QAAQ,CAACI,SAAS;IACzG;IAEA,IAAIF,MAAMD,KAAK,EAAE;QACfC,MAAMD,KAAK,CAACG,SAAS,GAAGC,IAAAA,mBAAAA,EAAaT,6BAA6BK,KAAK,EAAEC,MAAMD,KAAK,CAACG,SAAS;IAChG;IAEA,OAAOF;AACT"}