@fluentui/react-table 9.18.5 → 9.19.0

package/lib-commonjs/components/TableRow/useTableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableRow/useTableRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n  const focusWithinRef = useFocusWithin();\n  const isHeaderRow = useIsInTableHeader();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef) as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'row' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n    isHeaderRow,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusVisible","useFocusWithin","useTableContext","useIsInTableHeader","useTableRow_unstable","props","ref","noNativeElements","size","rootComponent","as","focusVisibleRef","focusWithinRef","isHeaderRow","components","root","always","role","undefined","elementType","appearance"],"mappings":";;;;+BAgBaQ;;;;;;;iEAhBU,QAAQ;gCAC+B,4BAA4B;8BAC1C,0BAA0B;8BAE1C,8BAA8B;oCAC3B,oCAAoC;AAWhE,6BAA6B,CAACC,OAAsBC;IACzD,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,OAAGN,6BAAAA;QACbG;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAAA,AAAE,MAAA,QAARL,cAAAA,KAAAA,IAAAA,YAAYE,gBAAAA,CAAe,GAAI,QAAQ;IAC7D,MAAMI,sBAAkBX,6BAAAA;IACxB,MAAMY,qBAAiBX,4BAAAA;IACvB,MAAMY,kBAAcV,sCAAAA;QAmBNE;IAjBd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMhB,oBAAAA,CAAKiB,MAAM,KACfnB,wCAAAA,EAAyBY,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FH,SAAKR,6BAAAA,EAAcQ,KAAKK,iBAAiBC;YACzCK,MAAMR,kBAAkB,QAAQ,QAAQS;YACxC,GAAGb,KAAK;QACV,IACA;YAAEc,aAAaV;QAAc;QAE/BD;QACAD;QACAa,YAAYf,CAAAA,oBAAAA,MAAMe,UAAAA,AAAU,MAAA,QAAhBf,sBAAAA,KAAAA,IAAAA,oBAAoB;QAChCQ;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TableRow/useTableRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n  const focusWithinRef = useFocusWithin();\n  const isHeaderRow = useIsInTableHeader();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef) as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'row' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n    isHeaderRow,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusVisible","useFocusWithin","useTableContext","useIsInTableHeader","useTableRow_unstable","props","ref","noNativeElements","size","rootComponent","as","focusVisibleRef","focusWithinRef","isHeaderRow","components","root","always","role","undefined","elementType","appearance"],"mappings":"AAAA;;;;;+BAkBaQ;;;;;;;iEAhBU,QAAQ;gCAC+B,4BAA4B;8BAC1C,0BAA0B;8BAE1C,8BAA8B;oCAC3B,oCAAoC;AAWhE,6BAA6B,CAACC,OAAsBC;IACzD,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,GAAGN,iCAAAA;QACbG;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAAA,AAAE,MAAA,QAARL,cAAAA,KAAAA,IAAAA,YAAYE,gBAAAA,CAAe,GAAI,QAAQ;IAC7D,MAAMI,sBAAkBX,6BAAAA;IACxB,MAAMY,qBAAiBX,4BAAAA;IACvB,MAAMY,kBAAcV,sCAAAA;QAmBNE;IAjBd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMhB,oBAAAA,CAAKiB,MAAM,KACfnB,wCAAAA,EAAyBY,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FH,SAAKR,6BAAAA,EAAcQ,KAAKK,iBAAiBC;YACzCK,MAAMR,kBAAkB,QAAQ,QAAQS;YACxC,GAAGb,KAAK;QACV,IACA;YAAEc,aAAaV;QAAc;QAE/BD;QACAD;QACAa,YAAYf,CAAAA,oBAAAA,MAAMe,UAAAA,AAAU,MAAA,QAAhBf,sBAAAA,KAAAA,IAAAA,oBAAoB;QAChCQ;IACF;AACF,EAAE"}

package/lib-commonjs/components/TableRow/useTableRowStyles.styles.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/TableRow/useTableRowStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableRowStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n    root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-row'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForeground1,\n        boxSizing: 'border-box',\n        ...createCustomFocusIndicatorStyle({\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}`,\n            borderRadius: tokens.borderRadiusMedium\n        }, {\n            selector: 'focus'\n        })\n    },\n    rootInteractive: {\n        ...createCustomFocusIndicatorStyle({\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    medium: {\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n    },\n    small: {\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n    },\n    'extra-small': {\n        fontSize: tokens.fontSizeBase200\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        ':active': {\n            backgroundColor: tokens.colorBrandBackground2,\n            color: tokens.colorNeutralForeground1\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    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        ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)\n    },\n    none: {}\n});\n/**\n * Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(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);\n    return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","ze5xyy","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","medium","B9xav0g","oivjwe","Bn0qgzm","Bgfg5da","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","uu68id","Bxeuatn","felo30","Bc736ss","Bhz882k","n51gp8","Eshu5l","Bk6ri7n","v49c4f","Bn1d65q","c4eypz","v3aym","hft9gk","Bjwas2f","Bk5ld8o","gwxt9v","B6k8go","h6lo6r","Beo2b4z","w1pwid","Btyw6ap","Hkxhyr","Brwvgy3","yadkgm","neutral","none","p","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"mappings":"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"}
+{"version":3,"sources":["useTableRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n    root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-row'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForeground1,\n        boxSizing: 'border-box',\n        ...createCustomFocusIndicatorStyle({\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}`,\n            borderRadius: tokens.borderRadiusMedium\n        }, {\n            selector: 'focus'\n        })\n    },\n    rootInteractive: {\n        ...createCustomFocusIndicatorStyle({\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    medium: {\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n    },\n    small: {\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n    },\n    'extra-small': {\n        fontSize: tokens.fontSizeBase200\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        ':active': {\n            backgroundColor: tokens.colorBrandBackground2,\n            color: tokens.colorNeutralForeground1\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    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        ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)\n    },\n    none: {}\n});\n/**\n * Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(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);\n    return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","ze5xyy","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","medium","B9xav0g","oivjwe","Bn0qgzm","Bgfg5da","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","uu68id","Bxeuatn","felo30","Bc736ss","Bhz882k","n51gp8","Eshu5l","Bk6ri7n","v49c4f","Bn1d65q","c4eypz","v3aym","hft9gk","Bjwas2f","Bk5ld8o","gwxt9v","B6k8go","h6lo6r","Beo2b4z","w1pwid","Btyw6ap","Hkxhyr","Brwvgy3","yadkgm","neutral","none","p","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +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"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TableRow/useTableRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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"],"mappings":"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"}

package/lib-commonjs/components/TableSelectionCell/TableSelectionCell.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/TableSelectionCell/TableSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableSelectionCell/TableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableSelectionCell_unstable } from './useTableSelectionCell';\nimport { renderTableSelectionCell_unstable } from './renderTableSelectionCell';\nimport { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles.styles';\nimport type { TableSelectionCellProps } from './TableSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableSelectionCell component\n */\nexport const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableSelectionCell_unstable(props, ref);\n\n  useTableSelectionCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableSelectionCellStyles_unstable')(state);\n\n  return renderTableSelectionCell_unstable(state);\n});\n\nTableSelectionCell.displayName = 'TableSelectionCell';\n"],"names":["React","useTableSelectionCell_unstable","renderTableSelectionCell_unstable","useTableSelectionCellStyles_unstable","useCustomStyleHook_unstable","TableSelectionCell","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;uCACgB,0BAA0B;0CACvB,6BAA6B;mDAC1B,uCAAuC;qCAGhD,kCAAkC;AAKvE,2BAAMA,WAAAA,GAAmEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvG,MAAMC,QAAQR,yDAAAA,EAA+BM,OAAOC;QAEpDL,uEAAAA,EAAqCM;QAErCL,gDAAAA,EAA4B,wCAAwCK;IAEpE,WAAOP,2DAAAA,EAAkCO;AAC3C,GAAG;AAEHJ,mBAAmBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TableSelectionCell/TableSelectionCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTableSelectionCell_unstable } from './useTableSelectionCell';\nimport { renderTableSelectionCell_unstable } from './renderTableSelectionCell';\nimport { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles.styles';\nimport type { TableSelectionCellProps } from './TableSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableSelectionCell component\n */\nexport const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableSelectionCell_unstable(props, ref);\n\n  useTableSelectionCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableSelectionCellStyles_unstable')(state);\n\n  return renderTableSelectionCell_unstable(state);\n});\n\nTableSelectionCell.displayName = 'TableSelectionCell';\n"],"names":["React","useTableSelectionCell_unstable","renderTableSelectionCell_unstable","useTableSelectionCellStyles_unstable","useCustomStyleHook_unstable","TableSelectionCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;uCACgB,0BAA0B;0CACvB,6BAA6B;mDAC1B,uCAAuC;qCAGhD,kCAAkC;AAKvE,MAAMK,qBAAAA,WAAAA,GAAmEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvG,MAAMC,YAAQR,qDAAAA,EAA+BM,OAAOC;QAEpDL,uEAAAA,EAAqCM;QAErCL,gDAAAA,EAA4B,wCAAwCK;IAEpE,WAAOP,2DAAAA,EAAkCO;AAC3C,GAAG;AAEHJ,mBAAmBK,WAAW,GAAG"}

package/lib-commonjs/components/TableSelectionCell/renderTableSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableSelectionCell/renderTableSelectionCell.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell.types';\n\n/**\n * Render the final JSX of TableSelectionCell\n */\nexport const renderTableSelectionCell_unstable = (state: TableSelectionCellState) => {\n  assertSlots<TableSelectionCellSlots>(state);\n\n  return (\n    <state.root>\n      {state.type === 'checkbox' && state.checkboxIndicator && <state.checkboxIndicator />}\n\n      {state.type === 'radio' && state.radioIndicator && <state.radioIndicator />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTableSelectionCell_unstable","state","root","type","checkboxIndicator","radioIndicator"],"mappings":";;;;+BAQaC;;;;;;4BAPb,iCAAiD;gCACrB,4BAA4B;AAMjD,0CAA0C,CAACC;QAChDF,2BAAAA,EAAqCE;IAErC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,IAAI,KAAK,cAAcF,MAAMG,iBAAiB,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,iBAAiB,EAAA,CAAA;YAEhFH,MAAME,IAAI,KAAK,WAAWF,MAAMI,cAAc,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,cAAc,EAAA,CAAA;;;AAG9E,EAAE"}
+{"version":3,"sources":["../src/components/TableSelectionCell/renderTableSelectionCell.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell.types';\n\n/**\n * Render the final JSX of TableSelectionCell\n */\nexport const renderTableSelectionCell_unstable = (state: TableSelectionCellState): JSXElement => {\n  assertSlots<TableSelectionCellSlots>(state);\n\n  return (\n    <state.root>\n      {state.type === 'checkbox' && state.checkboxIndicator && <state.checkboxIndicator />}\n\n      {state.type === 'radio' && state.radioIndicator && <state.radioIndicator />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTableSelectionCell_unstable","state","root","type","checkboxIndicator","radioIndicator"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCACrB,4BAA4B;AAOjD,0CAA0C,CAACC;QAChDF,2BAAAA,EAAqCE;IAErC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,IAAI,KAAK,cAAcF,MAAMG,iBAAiB,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,iBAAiB,EAAA,CAAA;YAEhFH,MAAME,IAAI,KAAK,WAAWF,MAAMI,cAAc,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,cAAc,EAAA,CAAA;;;AAG9E,EAAE"}

package/lib-commonjs/components/TableSelectionCell/useTableSelectionCell.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/TableSelectionCell/useTableSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableSelectionCell/useTableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, useMergedRefs(ref, useFocusWithin()));\n  const { noNativeElements } = useTableContext();\n  const {\n    type = 'checkbox',\n    checked = false,\n    subtle = false,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    hidden = false,\n    invisible = false,\n  } = props;\n\n  return {\n    ...tableCellState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: Radio,\n    },\n    checkboxIndicator: slot.optional(props.checkboxIndicator, {\n      renderByDefault: type === 'checkbox',\n      defaultProps: { checked: props.checked },\n      elementType: Checkbox,\n    }),\n    radioIndicator: slot.optional(props.radioIndicator, {\n      renderByDefault: type === 'radio',\n      defaultProps: { checked: !!checked, input: { name: useId('table-selection-radio') } },\n      elementType: Radio,\n    }),\n    type,\n    checked,\n    noNativeElements,\n    subtle,\n    hidden: invisible || hidden,\n  };\n};\n"],"names":["React","useId","slot","useMergedRefs","Checkbox","Radio","useTableCell_unstable","useTableContext","useFocusWithin","useTableSelectionCell_unstable","props","ref","tableCellState","noNativeElements","type","checked","subtle","hidden","invisible","components","checkboxIndicator","radioIndicator","optional","renderByDefault","defaultProps","elementType","input","name"],"mappings":";;;;+BAkBaS;;;;;;;iEAlBU,QAAQ;gCACY,4BAA4B;+BAC9C,2BAA2B;4BAC9B,wBAAwB;8BAER,4BAA4B;8BAClC,8BAA8B;8BAC/B,0BAA0B;AAWlD,uCAAuC,CAC5CC,OACAC;IAEA,MAAMC,qBAAiBN,mCAAAA,EAAsBI,WAAOP,6BAAAA,EAAcQ,KAAKH,gCAAAA;IACvE,MAAM,EAAEK,gBAAgB,EAAE,OAAGN,6BAAAA;IAC7B,MAAM,EACJO,OAAO,UAAU,EACjBC,UAAU,KAAK,EACfC,SAAS,KAAK,EACd,AACAC,SAAS,KAAK,EACdC,YAAY,KAAK,EAClB,GAAGR,sBAH0D;IAK9D,OAAO;QACL,GAAGE,cAAc;QACjBO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,eAAeO,UAAU;YAC5BC,mBAAmBhB,uBAAAA;YACnBiB,gBAAgBhB,iBAAAA;QAClB;QACAe,mBAAmBlB,oBAAAA,CAAKoB,QAAQ,CAACZ,MAAMU,iBAAiB,EAAE;YACxDG,iBAAiBT,SAAS;YAC1BU,cAAc;gBAAET,SAASL,MAAMK,OAAO;YAAC;YACvCU,aAAarB,uBAAAA;QACf;QACAiB,gBAAgBnB,oBAAAA,CAAKoB,QAAQ,CAACZ,MAAMW,cAAc,EAAE;YAClDE,iBAAiBT,SAAS;YAC1BU,cAAc;gBAAET,SAAS,CAAC,CAACA;gBAASW,OAAO;oBAAEC,UAAM1B,qBAAAA,EAAM;gBAAyB;YAAE;YACpFwB,aAAapB,iBAAAA;QACf;QACAS;QACAC;QACAF;QACAG;QACAC,QAAQC,aAAaD;IACvB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TableSelectionCell/useTableSelectionCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, useMergedRefs(ref, useFocusWithin()));\n  const { noNativeElements } = useTableContext();\n  const {\n    type = 'checkbox',\n    checked = false,\n    subtle = false,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    hidden = false,\n    invisible = false,\n  } = props;\n\n  return {\n    ...tableCellState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: Radio,\n    },\n    checkboxIndicator: slot.optional(props.checkboxIndicator, {\n      renderByDefault: type === 'checkbox',\n      defaultProps: { checked: props.checked },\n      elementType: Checkbox,\n    }),\n    radioIndicator: slot.optional(props.radioIndicator, {\n      renderByDefault: type === 'radio',\n      defaultProps: { checked: !!checked, input: { name: useId('table-selection-radio') } },\n      elementType: Radio,\n    }),\n    type,\n    checked,\n    noNativeElements,\n    subtle,\n    hidden: invisible || hidden,\n  };\n};\n"],"names":["React","useId","slot","useMergedRefs","Checkbox","Radio","useTableCell_unstable","useTableContext","useFocusWithin","useTableSelectionCell_unstable","props","ref","tableCellState","noNativeElements","type","checked","subtle","hidden","invisible","components","checkboxIndicator","radioIndicator","optional","renderByDefault","defaultProps","elementType","input","name"],"mappings":"AAAA;;;;;+BAoBaS;;;;;;;iEAlBU,QAAQ;gCACY,4BAA4B;+BAC9C,2BAA2B;4BAC9B,wBAAwB;8BAER,4BAA4B;8BAClC,8BAA8B;8BAC/B,0BAA0B;AAWlD,uCAAuC,CAC5CC,OACAC;IAEA,MAAMC,qBAAiBN,mCAAAA,EAAsBI,OAAOP,iCAAAA,EAAcQ,SAAKH,4BAAAA;IACvE,MAAM,EAAEK,gBAAgB,EAAE,OAAGN,6BAAAA;IAC7B,MAAM,EACJO,OAAO,UAAU,EACjBC,UAAU,KAAK,EACfC,SAAS,KAAK,EACd,AACAC,SAAS,KAAK,EACdC,YAAY,KAAK,EAClB,GAAGR,sBAH0D;IAK9D,OAAO;QACL,GAAGE,cAAc;QACjBO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,eAAeO,UAAU;YAC5BC,mBAAmBhB,uBAAAA;YACnBiB,gBAAgBhB,iBAAAA;QAClB;QACAe,mBAAmBlB,oBAAAA,CAAKoB,QAAQ,CAACZ,MAAMU,iBAAiB,EAAE;YACxDG,iBAAiBT,SAAS;YAC1BU,cAAc;gBAAET,SAASL,MAAMK,OAAO;YAAC;YACvCU,aAAarB,uBAAAA;QACf;QACAiB,gBAAgBnB,oBAAAA,CAAKoB,QAAQ,CAACZ,MAAMW,cAAc,EAAE;YAClDE,iBAAiBT,SAAS;YAC1BU,cAAc;gBAAET,SAAS,CAAC,CAACA;gBAASW,OAAO;oBAAEC,UAAM1B,qBAAAA,EAAM;gBAAyB;YAAE;YACpFwB,aAAapB,iBAAAA;QACf;QACAS;QACAC;QACAF;QACAG;QACAC,QAAQC,aAAaD;IACvB;AACF,EAAE"}

package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.styles.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableSelectionCellStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const CELL_WIDTH = 44;\nexport const tableSelectionCellClassNames = {\n    root: 'fui-TableSelectionCell',\n    checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n    radioIndicator: 'fui-TableSelectionCell__radioIndicator'\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-cell',\n        width: `${CELL_WIDTH}px`\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 * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        textAlign: 'center',\n        whiteSpace: 'nowrap',\n        padding: '0',\n        ...createCustomFocusIndicatorStyle({\n            outline: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium\n        }, {\n            selector: 'focus'\n        })\n    },\n    radioIndicator: {\n        display: 'flex',\n        flexGrow: 1,\n        alignItems: 'center',\n        justifyContent: 'center'\n    },\n    subtle: {\n        opacity: 0,\n        ...createCustomFocusIndicatorStyle({\n            opacity: 1\n        }, {\n            selector: 'focus-within'\n        })\n    },\n    hidden: {\n        opacity: 0\n    }\n});\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */ export const useTableSelectionCellStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(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);\n    if (state.checkboxIndicator) {\n        state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n    }\n    if (state.radioIndicator) {\n        state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","mc9l5x","a9b677","d","useFlexLayoutStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","Bf4jedk","B2u0y6b","Brf1p80","p","useStyles","fsow6f","Huce71","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bt984gj","subtle","abs64n","B8a84jv","hidden","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","checked"],"mappings":"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"}
+{"version":3,"sources":["useTableSelectionCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const CELL_WIDTH = 44;\nexport const tableSelectionCellClassNames = {\n    root: 'fui-TableSelectionCell',\n    checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n    radioIndicator: 'fui-TableSelectionCell__radioIndicator'\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-cell',\n        width: `${CELL_WIDTH}px`\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 * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        textAlign: 'center',\n        whiteSpace: 'nowrap',\n        padding: '0',\n        ...createCustomFocusIndicatorStyle({\n            outline: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium\n        }, {\n            selector: 'focus'\n        })\n    },\n    radioIndicator: {\n        display: 'flex',\n        flexGrow: 1,\n        alignItems: 'center',\n        justifyContent: 'center'\n    },\n    subtle: {\n        opacity: 0,\n        ...createCustomFocusIndicatorStyle({\n            opacity: 1\n        }, {\n            selector: 'focus-within'\n        })\n    },\n    hidden: {\n        opacity: 0\n    }\n});\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */ export const useTableSelectionCellStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(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);\n    if (state.checkboxIndicator) {\n        state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n    }\n    if (state.radioIndicator) {\n        state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","mc9l5x","a9b677","d","useFlexLayoutStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","Bf4jedk","B2u0y6b","Brf1p80","p","useStyles","fsow6f","Huce71","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","Bt984gj","subtle","abs64n","B8a84jv","hidden","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","checked"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +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"],"mappings":";;;;;;;;;;;IAMaI,UAAAA;;;IAEAC,4BAAAA;;;wCA8DA0B;eAAAA;;;uBAtE4B,iBAAiB;8BAGV,0BAA0B;4BACnD,wBAAwB;AAExC,mBAAmB,GAAG;AAEtB,qCAA8E;IACnFzB,MAAM;IACNC,mBAAmB;IACnBC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,2BAAuBT,iBAAAA,EAAW;IACtCM,MAAM;QACJI,SAAS;QACTC,OAAO,GAAGP,WAAW,EAAE,CAAC;IAC1B;AACF;AAEA,MAAMQ,0BAAsBZ,iBAAAA,EAAW;IACrCM,MAAM;QACJI,SAAS;QACTG,MAAM;QACNC,UAAU,GAAGV,WAAW,EAAE,CAAC;QAC3BW,UAAU,GAAGX,WAAW,EAAE,CAAC;QAC3BY,gBAAgB;IAClB;AACF;AAEA;;CAEC,GACD,MAAMC,gBAAYjB,iBAAAA,EAAW;IAC3BM,MAAM;QACJY,WAAW;QACXC,YAAY;QACZC,SAAS;QACT,OAAGlB,6CAAAA,EACD;YAAEmB,SAAS,CAAC,UAAU,EAAElB,kBAAAA,CAAOmB,iBAAiB,EAAE;YAAEC,cAAcpB,kBAAAA,CAAOqB,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,iDAAAA,EACD;YACE2B,SAAS;QACX,GACA;YAAEJ,UAAU;QAAe,EAC5B;IACH;IAEAK,QAAQ;QACND,SAAS;IACX;AACF;AAKO,6CAA6C,CAACG;IACnD;IAEA,MAAMC,SAAShB;IACf,MAAMiB,eAAe;QACnBC,OAAO1B;QACPI,MAAMD;IACR;IACAoB,MAAM1B,IAAI,CAAC8B,SAAS,OAAGnC,mBAAAA,EACrBI,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,OAAGnC,mBAAAA,EAClCI,6BAA6BE,iBAAiB,EAC9CyB,MAAMzB,iBAAiB,CAAC6B,SAAS;IAErC;IAEA,IAAIJ,MAAMxB,cAAc,EAAE;QACxBwB,MAAMxB,cAAc,CAAC4B,SAAS,OAAGnC,mBAAAA,EAC/BI,6BAA6BG,cAAc,EAC3CyB,OAAOzB,cAAc,EACrBwB,MAAMxB,cAAc,CAAC4B,SAAS;IAElC;IAEA,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TableSelectionCell/useTableSelectionCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,UAAAA;;;gCAEAC;;;IA8DA0B,oCAAAA;;;;uBAtE4B,iBAAiB;8BAGV,0BAA0B;4BACnD,wBAAwB;AAExC,mBAAmB,GAAG;AAEtB,MAAM1B,+BAAwE;IACnFC,MAAM;IACNC,mBAAmB;IACnBC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,2BAAuBT,iBAAAA,EAAW;IACtCM,MAAM;QACJI,SAAS;QACTC,OAAO,GAAGP,WAAW,EAAE,CAAC;IAC1B;AACF;AAEA,MAAMQ,0BAAsBZ,iBAAAA,EAAW;IACrCM,MAAM;QACJI,SAAS;QACTG,MAAM;QACNC,UAAU,GAAGV,WAAW,EAAE,CAAC;QAC3BW,UAAU,GAAGX,WAAW,EAAE,CAAC;QAC3BY,gBAAgB;IAClB;AACF;AAEA;;CAEC,GACD,MAAMC,gBAAYjB,iBAAAA,EAAW;IAC3BM,MAAM;QACJY,WAAW;QACXC,YAAY;QACZC,SAAS;QACT,OAAGlB,6CAAAA,EACD;YAAEmB,SAAS,CAAC,UAAU,EAAElB,kBAAAA,CAAOmB,iBAAiB,EAAE;YAAEC,cAAcpB,kBAAAA,CAAOqB,kBAAkB;QAAC,GAC5F;YAAEC,UAAU;QAAQ,EACrB;IACH;IAEAjB,gBAAgB;QACdE,SAAS;QACTgB,UAAU;QACVC,YAAY;QACZX,gBAAgB;IAClB;IAEAY,QAAQ;QACNC,SAAS;QACT,OAAG3B,6CAAAA,EACD;YACE2B,SAAS;QACX,GACA;YAAEJ,UAAU;QAAe,EAC5B;IACH;IAEAK,QAAQ;QACND,SAAS;IACX;AACF;AAKO,6CAA6C,CAACG;IACnD;IAEA,MAAMC,SAAShB;IACf,MAAMiB,eAAe;QACnBC,OAAO1B;QACPI,MAAMD;IACR;IACAoB,MAAM1B,IAAI,CAAC8B,SAAS,OAAGnC,mBAAAA,EACrBI,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,OAAGnC,mBAAAA,EAClCI,6BAA6BE,iBAAiB,EAC9CyB,MAAMzB,iBAAiB,CAAC6B,SAAS;IAErC;IAEA,IAAIJ,MAAMxB,cAAc,EAAE;QACxBwB,MAAMxB,cAAc,CAAC4B,SAAS,OAAGnC,mBAAAA,EAC/BI,6BAA6BG,cAAc,EAC3CyB,OAAOzB,cAAc,EACrBwB,MAAMxB,cAAc,CAAC4B,SAAS;IAElC;IAEA,OAAOJ;AACT,EAAE"}

package/lib-commonjs/contexts/columnIdContext.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/contexts/columnIdContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/columnIdContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableColumnId } from '../hooks/';\n\nconst columnIdContext = React.createContext<TableColumnId | undefined>(undefined);\n\nexport const columnIdContextDefaultValue = '';\n\nexport const useColumnIdContext = () => React.useContext(columnIdContext) ?? columnIdContextDefaultValue;\n\nexport const ColumnIdContextProvider = columnIdContext.Provider;\n"],"names":["React","columnIdContext","createContext","undefined","columnIdContextDefaultValue","useColumnIdContext","useContext","ColumnIdContextProvider","Provider"],"mappings":";;;;;;;;;;;2BASaO;;;+BAJAH;;;sBAEAC;;;;;iEAPU,QAAQ;AAG/B,MAAMJ,gCAAkBD,OAAME,aAAa,CAA4BC;AAEhE,MAAMC,8BAA8B,GAAG;AAEvC,MAAMC,qBAAqB;QAAML;WAAAA,CAAAA,oBAAAA,OAAMM,UAAU,CAACL,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B;AAElG,MAAMG,0BAA0BN,gBAAgBO,QAAQ,CAAC"}
+{"version":3,"sources":["../src/contexts/columnIdContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TableColumnId } from '../hooks/';\n\nconst columnIdContext = React.createContext<TableColumnId | undefined>(undefined);\n\nexport const columnIdContextDefaultValue = '';\n\nexport const useColumnIdContext = (): TableColumnId => React.useContext(columnIdContext) ?? columnIdContextDefaultValue;\n\nexport const ColumnIdContextProvider = columnIdContext.Provider;\n"],"names":["React","columnIdContext","createContext","undefined","columnIdContextDefaultValue","useColumnIdContext","useContext","ColumnIdContextProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;2BAWaO;;;+BAJAH;;;sBAEAC;;;;;iEAPU,QAAQ;AAG/B,MAAMJ,gCAAkBD,OAAME,aAAa,CAA4BC;AAEhE,MAAMC,8BAA8B,GAAG;AAEvC,MAAMC,qBAAqB;QAAqBL;WAAAA,CAAAA,oBAAAA,OAAMM,UAAU,CAACL,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B;AAEjH,MAAMG,0BAA0BN,gBAAgBO,QAAQ,CAAC"}

package/lib-commonjs/contexts/dataGridContext.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/contexts/dataGridContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/dataGridContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nexport const dataGridContextDefaultValue: DataGridContextValue = {\n  ...defaultTableState,\n  subtleSelection: false,\n  selectableRows: false,\n  selectionAppearance: 'brand',\n  focusMode: 'none',\n  compositeRowTabsterAttribute: {} as TabsterDOMAttribute,\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>) =>\n  useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","compositeRowTabsterAttribute","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":";;;;;;;;;;;2BAiBaW;;;+BATAN;;;+BAWAQ;;;;sCAnBqC,mCAAmC;uBAInD,WAAW;AAE7C,MAAMV,sBAAkBH,mCAAAA,EAAgDI;AAEjE,MAAMC,8BAAoD;IAC/D,GAAGH,wBAAiB;IACpBI,iBAAiB;IACjBC,gBAAgB;IAChBC,qBAAqB;IACrBC,WAAW;IACXC,8BAA8B,CAAC;AACjC,EAAE;AAEK,MAAMC,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEzD,MAAMC,8BAA8B,CAAIC,eAC7Cb,wCAAAA,EAAmBE,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}
+{"version":3,"sources":["../src/contexts/dataGridContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nexport const dataGridContextDefaultValue: DataGridContextValue = {\n  ...defaultTableState,\n  subtleSelection: false,\n  selectableRows: false,\n  selectionAppearance: 'brand',\n  focusMode: 'none',\n  compositeRowTabsterAttribute: {} as TabsterDOMAttribute,\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>): T =>\n  useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","compositeRowTabsterAttribute","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;2BAmBaW;;;+BATAN;;;+BAWAQ;;;;sCAnBqC,mCAAmC;uBAInD,WAAW;AAE7C,MAAMV,sBAAkBH,mCAAAA,EAAgDI;AAEjE,MAAMC,8BAAoD;IAC/D,GAAGH,wBAAiB;IACpBI,iBAAiB;IACjBC,gBAAgB;IAChBC,qBAAqB;IACrBC,WAAW;IACXC,8BAA8B,CAAC;AACjC,EAAE;AAEK,MAAMC,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEzD,MAAMC,8BAA8B,CAAIC,eAC7Cb,wCAAAA,EAAmBE,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}

package/lib-commonjs/contexts/rowIdContext.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/contexts/rowIdContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/rowIdContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableRowId } from '../hooks/';\n\nconst rowIdContext = React.createContext<TableRowId | undefined>(undefined);\n\nexport const tableRowIdContextDefaultValue = '';\n\nexport const useTableRowIdContext = () => React.useContext(rowIdContext) ?? tableRowIdContextDefaultValue;\n\nexport const TableRowIdContextProvider = rowIdContext.Provider;\n"],"names":["React","rowIdContext","createContext","undefined","tableRowIdContextDefaultValue","useTableRowIdContext","useContext","TableRowIdContextProvider","Provider"],"mappings":";;;;;;;;;;;6BASaO;;;iCAJAH;;;wBAEAC;;;;;iEAPU,QAAQ;AAG/B,MAAMJ,6BAAeD,OAAME,aAAa,CAAyBC;AAE1D,MAAMC,gCAAgC,GAAG;AAEzC,MAAMC,uBAAuB;QAAML;WAAAA,CAAAA,oBAAAA,OAAMM,UAAU,CAACL,aAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAkCI;EAA8B;AAEnG,MAAMG,4BAA4BN,aAAaO,QAAQ,CAAC"}
+{"version":3,"sources":["../src/contexts/rowIdContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TableRowId } from '../hooks/';\n\nconst rowIdContext = React.createContext<TableRowId | undefined>(undefined);\n\nexport const tableRowIdContextDefaultValue = '';\n\nexport const useTableRowIdContext = (): TableRowId => React.useContext(rowIdContext) ?? tableRowIdContextDefaultValue;\n\nexport const TableRowIdContextProvider = rowIdContext.Provider;\n"],"names":["React","rowIdContext","createContext","undefined","tableRowIdContextDefaultValue","useTableRowIdContext","useContext","TableRowIdContextProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;6BAWaO;;;iCAJAH;;;wBAEAC;;;;;iEAPU,QAAQ;AAG/B,MAAMJ,6BAAeD,OAAME,aAAa,CAAyBC;AAE1D,MAAMC,gCAAgC,GAAG;AAEzC,MAAMC,uBAAuB;QAAkBL;WAAAA,CAAAA,oBAAAA,OAAMM,UAAU,CAACL,aAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAkCI;EAA8B;AAE/G,MAAMG,4BAA4BN,aAAaO,QAAQ,CAAC"}

package/lib-commonjs/contexts/tableContext.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/contexts/tableContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/tableContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableContextValue } from '../components/Table/Table.types';\n\nconst tableContext = React.createContext<TableContextValue | undefined>(undefined);\n\nexport const tableContextDefaultValue: TableContextValue = {\n  size: 'medium',\n  noNativeElements: false,\n  sortable: false,\n};\n\nexport const TableContextProvider = tableContext.Provider;\nexport const useTableContext = () => React.useContext(tableContext) ?? tableContextDefaultValue;\n"],"names":["React","tableContext","createContext","undefined","tableContextDefaultValue","size","noNativeElements","sortable","TableContextProvider","Provider","useTableContext","useContext"],"mappings":";;;;;;;;;;;wBAWaQ;;;4BANAJ;;;mBAOAM;;;;;iEAZU,QAAQ;AAG/B,MAAMT,6BAAeD,OAAME,aAAa,CAAgCC;AAEjE,MAAMC,2BAA8C;IACzDC,MAAM;IACNC,kBAAkB;IAClBC,UAAU;AACZ,EAAE;AAEK,MAAMC,uBAAuBP,aAAaQ,QAAQ,CAAC;AACnD,MAAMC,kBAAkB;QAAMV;WAAAA,CAAAA,oBAAAA,OAAMW,UAAU,CAACV,aAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAkCI;EAAyB"}
+{"version":3,"sources":["../src/contexts/tableContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TableContextValue } from '../components/Table/Table.types';\n\nconst tableContext = React.createContext<TableContextValue | undefined>(undefined);\n\nexport const tableContextDefaultValue: TableContextValue = {\n  size: 'medium',\n  noNativeElements: false,\n  sortable: false,\n};\n\nexport const TableContextProvider = tableContext.Provider;\nexport const useTableContext = (): TableContextValue => React.useContext(tableContext) ?? tableContextDefaultValue;\n"],"names":["React","tableContext","createContext","undefined","tableContextDefaultValue","size","noNativeElements","sortable","TableContextProvider","Provider","useTableContext","useContext"],"mappings":"AAAA;;;;;;;;;;;;IAaaQ,oBAAAA;;;4BANAJ;;;mBAOAM;;;;;iEAZU,QAAQ;AAG/B,MAAMT,6BAAeD,OAAME,aAAa,CAAgCC;AAEjE,MAAMC,2BAA8C;IACzDC,MAAM;IACNC,kBAAkB;IAClBC,UAAU;AACZ,EAAE;AAEK,6BAA6BN,aAAaQ,QAAQ,CAAC;AACnD,MAAMC,kBAAkB;QAAyBV;WAAAA,CAAAA,oBAAAA,OAAMW,UAAU,CAACV,aAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAkCI;EAAyB"}

package/lib-commonjs/contexts/tableHeaderContext.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/contexts/tableHeaderContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/tableHeaderContext.ts"],"sourcesContent":["import * as React from 'react';\n\nconst tableHeaderContext = React.createContext<string | undefined>(undefined);\n\nconst tableHeaderContextDefaultValue = '';\n\nexport const TableHeaderContextProvider = tableHeaderContext.Provider;\nexport const useIsInTableHeader = () => React.useContext(tableHeaderContext) === tableHeaderContextDefaultValue;\n"],"names":["React","tableHeaderContext","createContext","undefined","tableHeaderContextDefaultValue","TableHeaderContextProvider","Provider","useIsInTableHeader","useContext"],"mappings":";;;;;;;;;;;8BAMaK;;;sBACAE;;;;;iEAPU,QAAQ;AAE/B,MAAMN,mCAAqBD,OAAME,aAAa,CAAqBC;AAEnE,MAAMC,iCAAiC;AAEhC,MAAMC,6BAA6BJ,mBAAmBK,QAAQ,CAAC;AAC/D,MAAMC,qBAAqB,IAAMP,OAAMQ,UAAU,CAACP,wBAAwBG,+BAA+B"}
+{"version":3,"sources":["../src/contexts/tableHeaderContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst tableHeaderContext = React.createContext<string | undefined>(undefined);\n\nconst tableHeaderContextDefaultValue = '';\n\nexport const TableHeaderContextProvider = tableHeaderContext.Provider;\nexport const useIsInTableHeader = (): boolean =>\n  React.useContext(tableHeaderContext) === tableHeaderContextDefaultValue;\n"],"names":["React","tableHeaderContext","createContext","undefined","tableHeaderContextDefaultValue","TableHeaderContextProvider","Provider","useIsInTableHeader","useContext"],"mappings":"AAAA;;;;;;;;;;;;8BAQaK;;;sBACAE;;;;;iEAPU,QAAQ;AAE/B,MAAMN,mCAAqBD,OAAME,aAAa,CAAqBC;AAEnE,MAAMC,iCAAiC;AAEhC,MAAMC,6BAA6BJ,mBAAmBK,QAAQ,CAAC;AAC/D,MAAMC,qBAAqB,IAChCP,OAAMQ,UAAU,CAACP,wBAAwBG,+BAA+B"}

package/lib-commonjs/hooks/createColumn.js

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "createTableColumn", {
         return createTableColumn;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const defaultCompare = ()=>0;
 const defaultRenderCell = ()=>{
     if (process.env.NODE_ENV !== 'production') {

package/lib-commonjs/hooks/createColumn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/createColumn.ts"],"sourcesContent":["import { CreateTableColumnOptions } from './types';\n\nconst defaultCompare = () => 0;\n\nconst defaultRenderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderCell function that renders null');\n  }\n\n  return null;\n};\n\nconst defaultRenderHeaderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderHeaderCell function that renders null');\n  }\n\n  return null;\n};\n\n/**\n * Helper function to create column definition with defaults\n * @param options - column definition options\n * @returns - column definition with defaults\n */\nexport function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>) {\n  const {\n    columnId,\n    renderCell = defaultRenderCell,\n    renderHeaderCell = defaultRenderHeaderCell,\n    compare = defaultCompare,\n  } = options;\n\n  return {\n    columnId,\n    renderCell,\n    renderHeaderCell,\n    compare,\n  };\n}\n"],"names":["defaultCompare","defaultRenderCell","process","env","NODE_ENV","console","warn","defaultRenderHeaderCell","createTableColumn","options","columnId","renderCell","renderHeaderCell","compare"],"mappings":";;;;;;;eA2BgBQ;;;AAzBhB,MAAMR,iBAAiB,IAAM;AAE7B,MAAMC,oBAAoB;IACxB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;AACT;AAEA,MAAMC,0BAA0B;IAC9B,IAAIL,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;AACT;AAOO,2BAAkCG,OAAwC;IAC/E,MAAM,EACJC,QAAQ,EACRC,aAAaV,iBAAiB,EAC9BW,mBAAmBL,uBAAuB,EAC1CM,UAAUb,cAAc,EACzB,GAAGS;IAEJ,OAAO;QACLC;QACAC;QACAC;QACAC;IACF;AACF"}
+{"version":3,"sources":["../src/hooks/createColumn.ts"],"sourcesContent":["import * as React from 'react';\nimport { CreateTableColumnOptions, TableColumnId } from './types';\n\nconst defaultCompare = () => 0;\n\nconst defaultRenderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderCell function that renders null');\n  }\n\n  return null;\n};\n\nconst defaultRenderHeaderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderHeaderCell function that renders null');\n  }\n\n  return null;\n};\n\n/**\n * Helper function to create column definition with defaults\n * @param options - column definition options\n * @returns - column definition with defaults\n */\nexport function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>): {\n  columnId: TableColumnId;\n  renderCell: (item: TItem) => React.ReactNode;\n  renderHeaderCell: (data?: unknown) => React.ReactNode;\n  compare: (a: TItem, b: TItem) => number;\n} {\n  const {\n    columnId,\n    renderCell = defaultRenderCell,\n    renderHeaderCell = defaultRenderHeaderCell,\n    compare = defaultCompare,\n  } = options;\n\n  return {\n    columnId,\n    renderCell,\n    renderHeaderCell,\n    compare,\n  };\n}\n"],"names":["React","defaultCompare","defaultRenderCell","process","env","NODE_ENV","console","warn","defaultRenderHeaderCell","createTableColumn","options","columnId","renderCell","renderHeaderCell","compare"],"mappings":";;;;;;;eA4BgBS;;;;iEA5BO,QAAQ;AAG/B,MAAMR,iBAAiB,IAAM;AAE7B,MAAMC,oBAAoB;IACxB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;AACT;AAEA,MAAMC,0BAA0B;IAC9B,IAAIL,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;AACT;AAOO,2BAAkCG,OAAwC;IAM/E,MAAM,EACJC,QAAQ,EACRC,aAAaV,iBAAiB,EAC9BW,mBAAmBL,uBAAuB,EAC1CM,UAAUb,cAAc,EACzB,GAAGS;IAEJ,OAAO;QACLC;QACAC;QACAC;QACAC;IACF;AACF"}

package/lib-commonjs/hooks/useKeyboardResizing.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -18,7 +19,7 @@ const PRECISION_MODIFIER = _keyboardkeys.Shift;
 const PRECISION_FACTOR = 1 / 4;
 function useKeyboardResizing(columnResizeState) {
     const [columnId, setColumnId] = _react.useState();
-    const onChangeRef = _react.useRef();
+    const onChangeRef = _react.useRef(undefined);
     const { findPrevFocusable } = (0, _reacttabster.useFocusFinders)();
     const columnResizeStateRef = _react.useRef(columnResizeState);
     _react.useEffect(()=>{

package/lib-commonjs/hooks/useKeyboardResizing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n  const [columnId, setColumnId] = React.useState<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n  const { findPrevFocusable } = useFocusFinders();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement>>());\n\n  const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n    if (!columnId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(columnId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n        resizeHandleRefs.get(columnId)?.current?.blur();\n        break;\n    }\n  });\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      setColumnId(colId);\n      onChangeRef.current?.(colId, true);\n\n      const handle = resizeHandleRefs.get(colId)?.current;\n      if (handle) {\n        handle.setAttribute('tabindex', '-1');\n        handle.tabIndex = -1;\n        handle.focus();\n      }\n    },\n    [resizeHandleRefs],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (!columnId) {\n      return;\n    }\n    // Notify the onChange listener that we are disabling interactive mode.\n    onChangeRef.current?.(columnId, false);\n    // Find the previous focusable element (table header button) and focus it.\n    const el = resizeHandleRefs.get(columnId)?.current;\n    if (el) {\n      findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n      el.removeAttribute('tabindex');\n    }\n\n    setColumnId(undefined);\n  }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId !== colId) {\n      enableInteractiveMode(colId);\n      setColumnId(colId);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  const getKeyboardResizingRef = React.useCallback(\n    (colId: TableColumnId) => {\n      const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n      resizeHandleRefs.set(colId, ref);\n      return ref;\n    },\n    [resizeHandleRefs],\n  );\n\n  // This makes sure the left and right arrow keys are ignored in tabster,\n  // so that they can be used for resizing.\n  const tabsterAttrs = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: {\n        ArrowLeft: true,\n        ArrowRight: true,\n      },\n    },\n  });\n\n  return {\n    toggleInteractiveMode,\n    columnId,\n    getKeyboardResizingProps: React.useCallback(\n      (colId: TableColumnId, currentWidth: number) => ({\n        onKeyDown: keyboardHandler,\n        onBlur: disableInteractiveMode,\n        ref: getKeyboardResizingRef(colId),\n        role: 'separator',\n        'aria-label': 'Resize column',\n        'aria-valuetext': `${currentWidth} pixels`,\n        'aria-hidden': colId === columnId ? false : true,\n        tabIndex: colId === columnId ? 0 : undefined,\n        ...tabsterAttrs,\n      }),\n      [columnId, disableInteractiveMode, getKeyboardResizingRef, keyboardHandler, tabsterAttrs],\n    ),\n  };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useKeyboardResizing.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState): {\n  toggleInteractiveMode: (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => void;\n  columnId: TableColumnId | undefined;\n  getKeyboardResizingProps: (\n    colId: TableColumnId,\n    currentWidth: number,\n  ) => {\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    onBlur: () => void;\n    ref: React.RefObject<HTMLDivElement>;\n    role: string;\n    'aria-label': string;\n    'aria-valuetext': string;\n    'aria-hidden': boolean;\n    tabIndex?: number;\n  };\n} {\n  const [columnId, setColumnId] = React.useState<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>(undefined);\n  const { findPrevFocusable } = useFocusFinders();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement | null>>());\n\n  const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n    if (!columnId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(columnId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n        resizeHandleRefs.get(columnId)?.current?.blur();\n        break;\n    }\n  });\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      setColumnId(colId);\n      onChangeRef.current?.(colId, true);\n\n      const handle = resizeHandleRefs.get(colId)?.current;\n      if (handle) {\n        handle.setAttribute('tabindex', '-1');\n        handle.tabIndex = -1;\n        handle.focus();\n      }\n    },\n    [resizeHandleRefs],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (!columnId) {\n      return;\n    }\n    // Notify the onChange listener that we are disabling interactive mode.\n    onChangeRef.current?.(columnId, false);\n    // Find the previous focusable element (table header button) and focus it.\n    const el = resizeHandleRefs.get(columnId)?.current;\n    if (el) {\n      findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n      el.removeAttribute('tabindex');\n    }\n\n    setColumnId(undefined);\n  }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId !== colId) {\n      enableInteractiveMode(colId);\n      setColumnId(colId);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  const getKeyboardResizingRef = React.useCallback(\n    (colId: TableColumnId) => {\n      const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n      resizeHandleRefs.set(colId, ref);\n      return ref;\n    },\n    [resizeHandleRefs],\n  );\n\n  // This makes sure the left and right arrow keys are ignored in tabster,\n  // so that they can be used for resizing.\n  const tabsterAttrs = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: {\n        ArrowLeft: true,\n        ArrowRight: true,\n      },\n    },\n  });\n\n  return {\n    toggleInteractiveMode,\n    columnId,\n    getKeyboardResizingProps: React.useCallback(\n      (colId: TableColumnId, currentWidth: number) => ({\n        onKeyDown: keyboardHandler,\n        onBlur: disableInteractiveMode,\n        ref: getKeyboardResizingRef(colId) as React.RefObject<HTMLDivElement>,\n        role: 'separator',\n        'aria-label': 'Resize column',\n        'aria-valuetext': `${currentWidth} pixels`,\n        'aria-hidden': colId === columnId ? false : true,\n        tabIndex: colId === columnId ? 0 : undefined,\n        ...tabsterAttrs,\n      }),\n      [columnId, disableInteractiveMode, getKeyboardResizingRef, keyboardHandler, tabsterAttrs],\n    ),\n  };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","undefined","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"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"}

package/lib-commonjs/hooks/useMeasureElement.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/hooks/useMeasureElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useMeasureElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Provides a way of reporting element width.\n * Returns\n * `width` - current element width (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n */\nexport function useMeasureElement<TElement extends HTMLElement = HTMLElement>() {\n  const [width, setWidth] = React.useState(0);\n\n  const container = React.useRef<HTMLElement | undefined>(undefined);\n\n  const resizeObserverRef = React.useRef<ResizeObserver | null>(null);\n\n  const { targetDocument } = useFluent();\n\n  // the handler for resize observer\n  const handleResize = React.useCallback(() => {\n    const containerWidth = container.current?.getBoundingClientRect().width;\n    setWidth(containerWidth || 0);\n  }, []);\n\n  const measureElementRef = React.useCallback(\n    (el: TElement | null) => {\n      if (!targetDocument) {\n        return;\n      }\n\n      // if the element is removed, stop observing it\n      if (!el && resizeObserverRef.current && container.current) {\n        resizeObserverRef.current.unobserve(container.current);\n      }\n\n      container.current = undefined;\n\n      if (el?.parentElement) {\n        container.current = el.parentElement;\n        handleResize();\n        resizeObserverRef.current?.observe(container.current);\n      }\n    },\n    [targetDocument, handleResize],\n  );\n\n  React.useEffect(() => {\n    resizeObserverRef.current = createResizeObserverFromDocument(targetDocument, handleResize);\n\n    if (!container.current || !resizeObserverRef.current) {\n      return;\n    }\n\n    resizeObserverRef.current.observe(container.current);\n\n    return () => {\n      resizeObserverRef.current?.disconnect();\n    };\n  }, [handleResize, targetDocument]);\n\n  return { width, measureElementRef };\n}\n\n/**\n * FIXME - TS 3.8/3.9 don't have ResizeObserver types by default, move this to a shared utility once we bump the minbar\n * A utility method that creates a ResizeObserver from a target document\n * @param targetDocument - document to use to create the ResizeObserver\n * @param callback  - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback\n * @returns a ResizeObserver instance or null if the global does not exist on the document\n */\nexport function createResizeObserverFromDocument(\n  targetDocument: Document | null | undefined,\n  callback: ResizeObserverCallback,\n) {\n  if (!targetDocument?.defaultView?.ResizeObserver) {\n    return null;\n  }\n\n  return new targetDocument.defaultView.ResizeObserver(callback);\n}\n"],"names":["React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","resizeObserverRef","targetDocument","handleResize","useCallback","containerWidth","current","getBoundingClientRect","measureElementRef","el","unobserve","parentElement","observe","useEffect","createResizeObserverFromDocument","disconnect","callback","defaultView","ResizeObserver"],"mappings":";;;;;;;;;;;oCAsEgBuB;eAAAA;;IA7DApB,iBAAAA;;;;;iEATO,QAAQ;qCACiB,kCAAkC;AAQ3E;IACL,MAAM,CAACC,OAAOC,SAAS,GAAGL,OAAMM,QAAQ,CAAC;IAEzC,MAAMC,YAAYP,OAAMQ,MAAM,CAA0BC;IAExD,MAAMC,oBAAoBV,OAAMQ,MAAM,CAAwB;IAE9D,MAAM,EAAEG,cAAc,EAAE,OAAGT,uCAAAA;IAE3B,kCAAkC;IAClC,MAAMU,eAAeZ,OAAMa,WAAW,CAAC;YACdN;QAAvB,MAAMO,iBAAAA,CAAiBP,qBAAAA,UAAUQ,OAAAA,AAAO,MAAA,QAAjBR,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBS,qBAAqB,GAAGZ,KAAK;QACvEC,SAASS,kBAAkB;IAC7B,GAAG,EAAE;IAEL,MAAMG,oBAAoBjB,OAAMa,WAAW,CACzC,CAACK;QACC,IAAI,CAACP,gBAAgB;YACnB;QACF;QAEA,+CAA+C;QAC/C,IAAI,CAACO,MAAMR,kBAAkBK,OAAO,IAAIR,UAAUQ,OAAO,EAAE;YACzDL,kBAAkBK,OAAO,CAACI,SAAS,CAACZ,UAAUQ,OAAO;QACvD;QAEAR,UAAUQ,OAAO,GAAGN;QAEpB,IAAIS,OAAAA,QAAAA,OAAAA,KAAAA,IAAAA,KAAAA,IAAAA,GAAIE,aAAa,EAAE;gBAGrBV;YAFAH,UAAUQ,OAAO,GAAGG,GAAGE,aAAa;YACpCR;aACAF,6BAAAA,kBAAkBK,OAAAA,AAAO,MAAA,QAAzBL,+BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,2BAA2BW,OAAO,CAACd,UAAUQ,OAAO;QACtD;IACF,GACA;QAACJ;QAAgBC;KAAa;IAGhCZ,OAAMsB,SAAS,CAAC;QACdZ,kBAAkBK,OAAO,GAAGQ,iCAAiCZ,gBAAgBC;QAE7E,IAAI,CAACL,UAAUQ,OAAO,IAAI,CAACL,kBAAkBK,OAAO,EAAE;YACpD;QACF;QAEAL,kBAAkBK,OAAO,CAACM,OAAO,CAACd,UAAUQ,OAAO;QAEnD,OAAO;gBACLL;aAAAA,6BAAAA,kBAAkBK,OAAAA,AAAO,MAAA,QAAzBL,+BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,2BAA2Bc,UAAU;QACvC;IACF,GAAG;QAACZ;QAAcD;KAAe;IAEjC,OAAO;QAAEP;QAAOa;IAAkB;AACpC;AASO,0CACLN,cAA2C,EAC3Cc,QAAgC;QAE3Bd;IAAL,IAAI,EAACA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,8BAAAA,eAAgBe,WAAAA,AAAW,MAAA,QAA3Bf,gCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,4BAA6BgB,cAAAA,AAAc,GAAE;QAChD,OAAO;IACT;IAEA,OAAO,IAAIhB,eAAee,WAAW,CAACC,cAAc,CAACF;AACvD"}
+{"version":3,"sources":["../src/hooks/useMeasureElement.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Provides a way of reporting element width.\n * Returns\n * `width` - current element width (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n */\nexport function useMeasureElement<TElement extends HTMLElement = HTMLElement>(): {\n  width: number;\n  measureElementRef: (el: TElement | null) => void;\n} {\n  const [width, setWidth] = React.useState(0);\n\n  const container = React.useRef<HTMLElement | undefined>(undefined);\n\n  const resizeObserverRef = React.useRef<ResizeObserver | null>(null);\n\n  const { targetDocument } = useFluent();\n\n  // the handler for resize observer\n  const handleResize = React.useCallback(() => {\n    const containerWidth = container.current?.getBoundingClientRect().width;\n    setWidth(containerWidth || 0);\n  }, []);\n\n  const measureElementRef = React.useCallback(\n    (el: TElement | null) => {\n      if (!targetDocument) {\n        return;\n      }\n\n      // if the element is removed, stop observing it\n      if (!el && resizeObserverRef.current && container.current) {\n        resizeObserverRef.current.unobserve(container.current);\n      }\n\n      container.current = undefined;\n\n      if (el?.parentElement) {\n        container.current = el.parentElement;\n        handleResize();\n        resizeObserverRef.current?.observe(container.current);\n      }\n    },\n    [targetDocument, handleResize],\n  );\n\n  React.useEffect(() => {\n    resizeObserverRef.current = createResizeObserverFromDocument(targetDocument, handleResize);\n\n    if (!container.current || !resizeObserverRef.current) {\n      return;\n    }\n\n    resizeObserverRef.current.observe(container.current);\n\n    return () => {\n      resizeObserverRef.current?.disconnect();\n    };\n  }, [handleResize, targetDocument]);\n\n  return { width, measureElementRef };\n}\n\n/**\n * FIXME - TS 3.8/3.9 don't have ResizeObserver types by default, move this to a shared utility once we bump the minbar\n * A utility method that creates a ResizeObserver from a target document\n * @param targetDocument - document to use to create the ResizeObserver\n * @param callback  - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback\n * @returns a ResizeObserver instance or null if the global does not exist on the document\n */\nexport function createResizeObserverFromDocument(\n  targetDocument: Document | null | undefined,\n  callback: ResizeObserverCallback,\n): ResizeObserver | null {\n  if (!targetDocument?.defaultView?.ResizeObserver) {\n    return null;\n  }\n\n  return new targetDocument.defaultView.ResizeObserver(callback);\n}\n"],"names":["React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","resizeObserverRef","targetDocument","handleResize","useCallback","containerWidth","current","getBoundingClientRect","measureElementRef","el","unobserve","parentElement","observe","useEffect","createResizeObserverFromDocument","disconnect","callback","defaultView","ResizeObserver"],"mappings":"AAAA;;;;;;;;;;;;oCA2EgBuB;eAAAA;;IAhEApB,iBAAAA;;;;;iEATO,QAAQ;qCACiB,kCAAkC;AAQ3E;IAIL,MAAM,CAACC,OAAOC,SAAS,GAAGL,OAAMM,QAAQ,CAAC;IAEzC,MAAMC,YAAYP,OAAMQ,MAAM,CAA0BC;IAExD,MAAMC,oBAAoBV,OAAMQ,MAAM,CAAwB;IAE9D,MAAM,EAAEG,cAAc,EAAE,OAAGT,uCAAAA;IAE3B,kCAAkC;IAClC,MAAMU,eAAeZ,OAAMa,WAAW,CAAC;YACdN;QAAvB,MAAMO,iBAAAA,CAAiBP,qBAAAA,UAAUQ,OAAO,AAAPA,MAAO,QAAjBR,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBS,qBAAqB,GAAGZ,KAAK;QACvEC,SAASS,kBAAkB;IAC7B,GAAG,EAAE;IAEL,MAAMG,oBAAoBjB,OAAMa,WAAW,CACzC,CAACK;QACC,IAAI,CAACP,gBAAgB;YACnB;QACF;QAEA,+CAA+C;QAC/C,IAAI,CAACO,MAAMR,kBAAkBK,OAAO,IAAIR,UAAUQ,OAAO,EAAE;YACzDL,kBAAkBK,OAAO,CAACI,SAAS,CAACZ,UAAUQ,OAAO;QACvD;QAEAR,UAAUQ,OAAO,GAAGN;QAEpB,IAAIS,OAAAA,QAAAA,OAAAA,KAAAA,IAAAA,KAAAA,IAAAA,GAAIE,aAAa,EAAE;gBAGrBV;YAFAH,UAAUQ,OAAO,GAAGG,GAAGE,aAAa;YACpCR;aACAF,6BAAAA,kBAAkBK,OAAAA,AAAO,MAAA,QAAzBL,+BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,2BAA2BW,OAAO,CAACd,UAAUQ,OAAO;QACtD;IACF,GACA;QAACJ;QAAgBC;KAAa;IAGhCZ,OAAMsB,SAAS,CAAC;QACdZ,kBAAkBK,OAAO,GAAGQ,iCAAiCZ,gBAAgBC;QAE7E,IAAI,CAACL,UAAUQ,OAAO,IAAI,CAACL,kBAAkBK,OAAO,EAAE;YACpD;QACF;QAEAL,kBAAkBK,OAAO,CAACM,OAAO,CAACd,UAAUQ,OAAO;QAEnD,OAAO;gBACLL;aAAAA,6BAAAA,kBAAkBK,OAAAA,AAAO,MAAA,QAAzBL,+BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,2BAA2Bc,UAAU;QACvC;IACF,GAAG;QAACZ;QAAcD;KAAe;IAEjC,OAAO;QAAEP;QAAOa;IAAkB;AACpC;AASO,0CACLN,cAA2C,EAC3Cc,QAAgC;QAE3Bd;IAAL,IAAI,EAACA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,8BAAAA,eAAgBe,WAAAA,AAAW,MAAA,QAA3Bf,gCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,4BAA6BgB,cAAAA,AAAc,GAAE;QAChD,OAAO;IACT;IAEA,OAAO,IAAIhB,eAAee,WAAW,CAACC,cAAc,CAACF;AACvD"}

package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  NativeTouchOrMouseEvent,\n  ReactTouchOrMouseEvent,\n  getEventClientCoords,\n  isMouseEvent,\n  isTouchEvent,\n  useAnimationFrame,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const { targetDocument } = useFluent();\n\n  const { getColumnWidth, setColumnWidth } = columnResizeState;\n\n  const recalculatePosition = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      const { clientX } = getEventClientCoords(e);\n      const dx = clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [setColumnWidth],\n  );\n\n  const [requestRecalcFrame] = useAnimationFrame();\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      requestRecalcFrame(() => recalculatePosition(e));\n    },\n    [requestRecalcFrame, recalculatePosition],\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: NativeTouchOrMouseEvent) => {\n      if (isMouseEvent(event)) {\n        targetDocument?.removeEventListener('mouseup', onDragEnd);\n        targetDocument?.removeEventListener('mousemove', onDrag);\n      }\n      if (isTouchEvent(event)) {\n        targetDocument?.removeEventListener('touchend', onDragEnd);\n        targetDocument?.removeEventListener('touchmove', onDrag);\n      }\n      setDragging(false);\n    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = React.useCallback(\n    (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n      // Keep the width locally so that we decouple the calculation of the next with from rendering.\n      // This makes the whole experience much faster and more precise\n      currentWidth.current = getColumnWidth(columnId);\n      mouseX.current = getEventClientCoords(event).clientX;\n      colId.current = columnId;\n\n      if (isMouseEvent(event)) {\n        // ignore other buttons than primary mouse button\n        if (event.target !== event.currentTarget || event.button !== 0) {\n          return;\n        }\n        targetDocument?.addEventListener('mouseup', onDragEnd);\n        targetDocument?.addEventListener('mousemove', onDrag);\n        setDragging(true);\n      }\n\n      if (isTouchEvent(event)) {\n        targetDocument?.addEventListener('touchend', onDragEnd);\n        targetDocument?.addEventListener('touchmove', onDrag);\n        setDragging(true);\n      }\n    },\n    [getColumnWidth, onDrag, onDragEnd, targetDocument],\n  );\n\n  return {\n    getOnMouseDown,\n    dragging,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useAnimationFrame","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","dragging","setDragging","useState","targetDocument","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","dx","current","columnId","width","requestRecalcFrame","onDrag","onDragEnd","event","removeEventListener","getOnMouseDown","target","currentTarget","button","addEventListener"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  NativeTouchOrMouseEvent,\n  ReactTouchOrMouseEvent,\n  getEventClientCoords,\n  isMouseEvent,\n  isTouchEvent,\n  useAnimationFrame,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState): {\n  getOnMouseDown: (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => void;\n  dragging: boolean;\n} {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const { targetDocument } = useFluent();\n\n  const { getColumnWidth, setColumnWidth } = columnResizeState;\n\n  const recalculatePosition = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      const { clientX } = getEventClientCoords(e);\n      const dx = clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [setColumnWidth],\n  );\n\n  const [requestRecalcFrame] = useAnimationFrame();\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      requestRecalcFrame(() => recalculatePosition(e));\n    },\n    [requestRecalcFrame, recalculatePosition],\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: NativeTouchOrMouseEvent) => {\n      if (isMouseEvent(event)) {\n        targetDocument?.removeEventListener('mouseup', onDragEnd);\n        targetDocument?.removeEventListener('mousemove', onDrag);\n      }\n      if (isTouchEvent(event)) {\n        targetDocument?.removeEventListener('touchend', onDragEnd);\n        targetDocument?.removeEventListener('touchmove', onDrag);\n      }\n      setDragging(false);\n    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = React.useCallback(\n    (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n      // Keep the width locally so that we decouple the calculation of the next with from rendering.\n      // This makes the whole experience much faster and more precise\n      currentWidth.current = getColumnWidth(columnId);\n      mouseX.current = getEventClientCoords(event).clientX;\n      colId.current = columnId;\n\n      if (isMouseEvent(event)) {\n        // ignore other buttons than primary mouse button\n        if (event.target !== event.currentTarget || event.button !== 0) {\n          return;\n        }\n        targetDocument?.addEventListener('mouseup', onDragEnd);\n        targetDocument?.addEventListener('mousemove', onDrag);\n        setDragging(true);\n      }\n\n      if (isTouchEvent(event)) {\n        targetDocument?.addEventListener('touchend', onDragEnd);\n        targetDocument?.addEventListener('touchmove', onDrag);\n        setDragging(true);\n      }\n    },\n    [getColumnWidth, onDrag, onDragEnd, targetDocument],\n  );\n\n  return {\n    getOnMouseDown,\n    dragging,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useAnimationFrame","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","dragging","setDragging","useState","targetDocument","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","dx","current","columnId","width","requestRecalcFrame","onDrag","onDragEnd","event","removeEventListener","getOnMouseDown","target","currentTarget","button","addEventListener"],"mappings":"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"}

package/lib-commonjs/hooks/useTableColumnResizeState.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/hooks/useTableColumnResizeState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer =\n  <T>(autoFitColumns?: boolean) =>\n  (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n    switch (action.type) {\n      case 'CONTAINER_WIDTH_UPDATED':\n        return {\n          ...state,\n          containerWidth: action.containerWidth,\n          columnWidthState: autoFitColumns\n            ? adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth)\n            : state.columnWidthState,\n        };\n\n      case 'COLUMNS_UPDATED':\n        const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n        return {\n          ...state,\n          columns: action.columns,\n          columnWidthState: autoFitColumns ? adjustColumnWidthsToFitContainer(newS, state.containerWidth) : newS,\n        };\n\n      case 'COLUMN_SIZING_OPTIONS_UPDATED':\n        const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n        return {\n          ...state,\n          columnSizingOptions: action.columnSizingOptions,\n          columnWidthState: autoFitColumns\n            ? adjustColumnWidthsToFitContainer(newState, state.containerWidth)\n            : newState,\n        };\n\n      case 'SET_COLUMN_WIDTH':\n        const { columnId, width } = action;\n        const { containerWidth } = state;\n\n        const column = getColumnById(state.columnWidthState, columnId);\n        let newColumnWidthState = [...state.columnWidthState];\n\n        if (!column) {\n          return state;\n        }\n\n        // Adjust the column width and measure the new total width\n        newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n        // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n        newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n        // Adjust the widths to the container size\n        if (autoFitColumns) {\n          newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n        }\n\n        return { ...state, columnWidthState: newColumnWidthState };\n    }\n  };\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions, autoFitColumns = true } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(autoFitColumns), [autoFitColumns]);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: KeyboardEvent | MouseEvent | TouchEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: React.useCallback(\n      (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n      [state.columnWidthState],\n    ),\n    getColumns: React.useCallback(() => state.columnWidthState, [state.columnWidthState]),\n    getColumnWidth: React.useCallback(\n      (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n      [state.columnWidthState],\n    ),\n    setColumnWidth,\n  };\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","autoFitColumns","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","useCallback","colId","getColumns"],"mappings":";;;;+BAmGgBuB;;;;;;;gCAnG4C,4BAA4B;iEACjE,QAAQ;mCAexB,6BAA6B;AA4BpC,MAAMf,gBACJ,CAAIC,iBACJ,CAACC,OAA0BC;QACzB,OAAQA,OAAOC,IAAI;YACjB,KAAK;gBACH,OAAO;oBACL,GAAGF,KAAK;oBACRG,gBAAgBF,OAAOE,cAAc;oBACrCC,kBAAkBL,qBACdL,mDAAAA,EAAiCM,MAAMI,gBAAgB,EAAEH,OAAOE,cAAc,IAC9EH,MAAMI,gBAAgB;gBAC5B;YAEF,KAAK;gBACH,MAAMC,WAAOZ,2CAAAA,EAAyBQ,OAAOK,OAAO,EAAEN,MAAMI,gBAAgB,EAAEJ,MAAMO,mBAAmB;gBACvG,OAAO;oBACL,GAAGP,KAAK;oBACRM,SAASL,OAAOK,OAAO;oBACvBF,kBAAkBL,qBAAiBL,mDAAAA,EAAiCW,MAAML,MAAMG,cAAc,IAAIE;gBACpG;YAEF,KAAK;gBACH,MAAMG,eAAWf,2CAAAA,EAAyBO,MAAMM,OAAO,EAAEN,MAAMI,gBAAgB,EAAEH,OAAOM,mBAAmB;gBAC3G,OAAO;oBACL,GAAGP,KAAK;oBACRO,qBAAqBN,OAAOM,mBAAmB;oBAC/CH,kBAAkBL,qBACdL,mDAAAA,EAAiCc,UAAUR,MAAMG,cAAc,IAC/DK;gBACN;YAEF,KAAK;gBACH,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGT;gBAC5B,MAAM,EAAEE,cAAc,EAAE,GAAGH;gBAE3B,MAAMW,aAAShB,gCAAAA,EAAcK,MAAMI,gBAAgB,EAAEK;gBACrD,IAAIG,sBAAsB;uBAAIZ,MAAMI,gBAAgB;iBAAC;gBAErD,IAAI,CAACO,QAAQ;oBACX,OAAOX;gBACT;gBAEA,0DAA0D;gBAC1DY,0BAAsBhB,oCAAAA,EAAkBgB,qBAAqBH,UAAU,SAASC;gBAChF,0GAA0G;gBAC1GE,0BAAsBhB,oCAAAA,EAAkBgB,qBAAqBH,UAAU,cAAcC;gBACrF,0CAA0C;gBAC1C,IAAIX,gBAAgB;oBAClBa,0BAAsBlB,mDAAAA,EAAiCkB,qBAAqBT;gBAC9E;gBAEA,OAAO;oBAAE,GAAGH,KAAK;oBAAEI,kBAAkBQ;gBAAoB;QAC7D;IACF;AAEK,mCACLN,OAAmC,EACnCH,cAAsB,EACtBW,SAAqC,CAAC,CAAC;IAEvC,MAAM,EAAEC,cAAc,EAAER,mBAAmB,EAAER,iBAAiB,IAAI,EAAE,GAAGe;IAEvE,MAAME,UAAUxB,OAAMyB,OAAO,CAAC,IAAMnB,cAAiBC,iBAAiB;QAACA;KAAe;IAEtF,MAAM,CAACC,OAAOkB,SAAS,GAAG1B,OAAM2B,UAAU,CAACH,SAAS;QAClDV;QACAH,gBAAgB;QAChBC,sBAAkBX,2CAAAA,EAAyBa,SAASc,WAAWb;QAC/DA;IACF;QAEAhB,yCAAAA,EAA0B;QACxB2B,SAAS;YAAEhB,MAAM;YAA2BC;QAAe;IAC7D,GAAG;QAACA;KAAe;QAEnBZ,yCAAAA,EAA0B;QACxB2B,SAAS;YAAEhB,MAAM;YAAmBI;QAAQ;IAC9C,GAAG;QAACA;KAAQ;IAEZf,6CAAAA,EAA0B;QACxB2B,SAAS;YAAEhB,MAAM;YAAiCK;QAAoB;IACxE,GAAG;QAACA;KAAoB;IAExB,MAAMc,qBAAiB/B,gCAAAA,EACrB,CAACgC,OAA4DC;QAC3D,IAAI,EAAEb,KAAK,EAAE,GAAGa;QAChB,MAAM,EAAEd,QAAQ,EAAE,GAAGc;QACrB,MAAMC,UAAM7B,gCAAAA,EAAcK,MAAMI,gBAAgB,EAAEK;QAClD,IAAI,CAACe,KAAK;YACR;QACF;QAEAd,QAAQe,KAAKC,GAAG,CAACF,IAAIG,QAAQ,IAAI,GAAGjB;QAEpC,IAAIK,gBAAgB;YAClBA,eAAeO,OAAO;gBAAEb;gBAAUC;YAAM;QAC1C;QACAQ,SAAS;YAAEhB,MAAM;YAAoBO;YAAUC;QAAM;IACvD;IAGF,OAAO;QACLf,eAAeH,OAAMoC,WAAW,CAC9B,CAACC,YAAyBlC,gCAAAA,EAAcK,MAAMI,gBAAgB,EAAEyB,QAChE;YAAC7B,MAAMI,gBAAgB;SAAC;QAE1B0B,YAAYtC,OAAMoC,WAAW,CAAC,IAAM5B,MAAMI,gBAAgB,EAAE;YAACJ,MAAMI,gBAAgB;SAAC;QACpFP,gBAAgBL,OAAMoC,WAAW,CAC/B,CAACC,YAAyBhC,iCAAAA,EAAeG,MAAMI,gBAAgB,EAAEyB,QACjE;YAAC7B,MAAMI,gBAAgB;SAAC;QAE1BiB;IACF;AACF"}
+{"version":3,"sources":["../src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer =\n  <T>(autoFitColumns?: boolean) =>\n  (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n    switch (action.type) {\n      case 'CONTAINER_WIDTH_UPDATED':\n        return {\n          ...state,\n          containerWidth: action.containerWidth,\n          columnWidthState: autoFitColumns\n            ? adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth)\n            : state.columnWidthState,\n        };\n\n      case 'COLUMNS_UPDATED':\n        const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n        return {\n          ...state,\n          columns: action.columns,\n          columnWidthState: autoFitColumns ? adjustColumnWidthsToFitContainer(newS, state.containerWidth) : newS,\n        };\n\n      case 'COLUMN_SIZING_OPTIONS_UPDATED':\n        const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n        return {\n          ...state,\n          columnSizingOptions: action.columnSizingOptions,\n          columnWidthState: autoFitColumns\n            ? adjustColumnWidthsToFitContainer(newState, state.containerWidth)\n            : newState,\n        };\n\n      case 'SET_COLUMN_WIDTH':\n        const { columnId, width } = action;\n        const { containerWidth } = state;\n\n        const column = getColumnById(state.columnWidthState, columnId);\n        let newColumnWidthState = [...state.columnWidthState];\n\n        if (!column) {\n          return state;\n        }\n\n        // Adjust the column width and measure the new total width\n        newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n        // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n        newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n        // Adjust the widths to the container size\n        if (autoFitColumns) {\n          newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n        }\n\n        return { ...state, columnWidthState: newColumnWidthState };\n    }\n  };\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions, autoFitColumns = true } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(autoFitColumns), [autoFitColumns]);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: KeyboardEvent | MouseEvent | TouchEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: React.useCallback(\n      (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n      [state.columnWidthState],\n    ),\n    getColumns: React.useCallback(() => state.columnWidthState, [state.columnWidthState]),\n    getColumnWidth: React.useCallback(\n      (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n      [state.columnWidthState],\n    ),\n    setColumnWidth,\n  };\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","autoFitColumns","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","useCallback","colId","getColumns"],"mappings":"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"}

package/lib-commonjs/hooks/useTableColumnSizing.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true