@fluentui/react-table 9.18.6 → 9.19.1

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/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 = (): TableColumnId => 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;QAAqBL;WAAAA,CAAAA,oBAAAA,OAAMM,UAAU,CAACL,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B;AAEjH,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>): 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 = (): TableRowId => 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;QAAkBL;WAAAA,CAAAA,oBAAAA,OAAMM,UAAU,CAACL,aAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAkCI;EAA8B;AAE/G,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 = (): TableContextValue => 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;QAAyBV;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 = (): boolean =>\n  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,IAChCP,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/useKeyboardResizing.js

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

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  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":";;;;+BAUgBa;;;;;;;iEAVO,QAAQ;8BACoC,0BAA0B;gCAC5D,4BAA4B;8BAEP,0BAA0B;AAEhF,MAAMH,OAAO;AACb,MAAMC,qBAAqBN,mBAAAA;AAC3B,MAAMO,mBAAmB,IAAI;AAEtB,6BAA6BE,iBAAoC;IAiBtE,MAAM,CAACC,UAAUC,YAAY,GAAGhB,OAAMiB,QAAQ;IAC9C,MAAMC,cAAclB,OAAMmB,MAAM,CAAqCC;IACrE,MAAM,EAAEC,iBAAiB,EAAE,OAAGb,6BAAAA;IAE9B,MAAMc,uBAAuBtB,OAAMmB,MAAM,CAAoBL;IAC7Dd,OAAMuB,SAAS,CAAC;QACdD,qBAAqBE,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAkB;IAEtB,MAAM,CAACW,iBAAiB,GAAGzB,OAAMiB,QAAQ,CAAC,IAAM,IAAIS;IAEpD,MAAMC,sBAAkBpB,gCAAAA,EAAiB,CAACqB;QACxC,IAAI,CAACb,UAAU;YACb;QACF;QAEA,MAAMc,QAAQP,qBAAqBE,OAAO,CAACM,cAAc,CAACf;QAC1D,MAAMgB,oBAAoBH,MAAMI,gBAAgB,CAACrB;QAEjD,MAAMsB,YAAY;YAChBL,MAAMM,cAAc;YACpBN,MAAMO,eAAe;QACvB;QAEA,OAAQP,MAAMQ,GAAG;YACf,KAAKnC,uBAAAA;gBACHgC;gBACAX,qBAAqBE,OAAO,CAACa,cAAc,CAACT,MAAMU,WAAW,EAAE;oBAC7DvB;oBACAc,OAAOA,QAASE,CAAAA,oBAAoBrB,OAAOE,mBAAmBF,IAAAA,CAAG;gBACnE;gBACA;YAEF,KAAKR,wBAAAA;gBACH+B;gBACAX,qBAAqBE,OAAO,CAACa,cAAc,CAACT,MAAMU,WAAW,EAAE;oBAC7DvB;oBACAc,OAAOA,QAASE,qBAAoBrB,OAAOE,mBAAmBF,IAAAA,CAAG;gBACnE;gBACA;YAEF,KAAKJ,mBAAAA;YACL,KAAKH,mBAAAA;YACL,KAAKC,oBAAAA;oBAEH,AACAqB,+BAAAA,2DAD0F;gBAD1FQ;iBAEAR,wBAAAA,iBAAiBc,GAAG,CAACxB,SAAAA,MAAAA,QAArBU,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,gCAAAA,sBAAgCD,OAAAA,AAAO,MAAA,QAAvCC,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAAyCe,IAAI;gBAC7C;QACJ;IACF;IAEA,MAAMC,wBAAwBzC,OAAM0C,WAAW,CAC7C,CAACC;YAECzB,sBAEeO;QAHfT,YAAY2B;SACZzB,uBAAAA,YAAYM,OAAAA,AAAO,MAAA,QAAnBN,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAAA,IAAAA,CAAAA,aAAsByB,OAAO;QAE7B,MAAMC,SAAAA,CAASnB,wBAAAA,iBAAiBc,GAAG,CAACI,MAAAA,MAAAA,QAArBlB,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAA6BD,OAAO;QACnD,IAAIoB,QAAQ;YACVA,OAAOC,YAAY,CAAC,YAAY;YAChCD,OAAOE,QAAQ,GAAG,CAAC;YACnBF,OAAOG,KAAK;QACd;IACF,GACA;QAACtB;KAAiB;IAGpB,MAAMuB,yBAAyBhD,OAAM0C,WAAW,CAAC;YAI/C,AACAxB,sBAEWO,iDAH4D;QAHvE,IAAI,CAACV,UAAU;YACb;QACF;SAEAG,uBAAAA,YAAYM,OAAAA,AAAO,MAAA,QAAnBN,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAAA,IAAAA,CAAAA,aAAsBH,UAAU;QAChC,0EAA0E;QAC1E,MAAMkC,KAAKxB,AAALwB,yBAAKxB,iBAAiBc,GAAG,CAACxB,SAAAA,MAAAA,QAArBU,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAgCD,OAAO;QAClD,IAAIyB,IAAI;gBACN5B;aAAAA,qBAAAA,kBAAkB4B,GAAAA,MAAAA,QAAlB5B,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAuB0B,KAAK,IAAI,wDAAwD;YACxFE,GAAGC,eAAe,CAAC;QACrB;QAEAlC,YAAYI;IACd,GAAG;QAACL;QAAUM;QAAmBI;KAAiB;IAElD,MAAM0B,wBAAwB,CAACR,OAAsBS;QACnDlC,YAAYM,OAAO,GAAG4B;QACtB,IAAI,CAACrC,UAAU;YACb0B,sBAAsBE;QACxB,OAAO,IAAIA,SAAS5B,aAAa4B,OAAO;YACtCF,sBAAsBE;YACtB3B,YAAY2B;QACd,OAAO;YACLK;QACF;IACF;IAEA,MAAMK,yBAAyBrD,OAAM0C,WAAW,CAC9C,CAACC;QACC,MAAMW,MAAM7B,iBAAiBc,GAAG,CAACI,wBAAU3C,OAAMuD,SAAS;QAC1D9B,iBAAiB+B,GAAG,CAACb,OAAOW;QAC5B,OAAOA;IACT,GACA;QAAC7B;KAAiB;IAGpB,wEAAwE;IACxE,yCAAyC;IACzC,MAAMgC,mBAAehD,kCAAAA,EAAqB;QACxCiD,WAAW;YACTC,eAAe;gBACb1D,WAAW;gBACXC,YAAY;YACd;QACF;IACF;IAEA,OAAO;QACLiD;QACApC;QACA6C,0BAA0B5D,OAAM0C,WAAW,CACzC,CAACC,OAAsBkB,eAA0B,CAAA;gBAC/CC,WAAWnC;gBACXoC,QAAQf;gBACRM,KAAKD,uBAAuBV;gBAC5BqB,MAAM;gBACN,cAAc;gBACd,kBAAkB,GAAGH,aAAa,OAAO,CAAC;gBAC1C,eAAelB,UAAU5B,WAAW,QAAQ;gBAC5C+B,UAAUH,UAAU5B,WAAW,IAAIK;gBACnC,GAAGqC,YAAY;aACjB,CAAA,EACA;YAAC1C;YAAUiC;YAAwBK;YAAwB1B;YAAiB8B;SAAa;IAE7F;AACF"}
+{"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  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":";;;;;;;;;;;oCAyEgBuB;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,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  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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"}
+{"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":"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"}
+{"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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n  ColumnWidthState,\n  EnableKeyboardModeOnChangeCallback,\n  TableColumnId,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\n\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableProps: () => ({}),\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n  enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n  'use no memo';\n\n  // False positive, these plugin hooks are intended to be run on every render\n\n  return (tableState: TableFeaturesState<TItem>): TableFeaturesState<TItem> =>\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useTableColumnSizingState(tableState, { autoFitColumns: true, ...params });\n}\n\nfunction getColumnStyles(column: ColumnWidthState, dragging?: boolean): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n    // Fixed the unwanted sort: https://github.com/microsoft/fluentui/issues/27803\n    ...(dragging ? { pointerEvents: 'none' } : {}),\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params: UseTableColumnSizingParams = {},\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n  // Creates the keyboard handler for resizing columns\n  const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n\n  const { autoFitColumns } = params;\n\n  const enableKeyboardMode = React.useCallback(\n    (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n      (e: React.MouseEvent | React.TouchEvent) => {\n        e.preventDefault();\n        e.nativeEvent.stopPropagation();\n        toggleInteractiveMode(columnId, onChange);\n      },\n    [toggleInteractiveMode],\n  );\n\n  const { getColumnById, setColumnWidth, getColumns } = columnResizeState;\n  const { getOnMouseDown, dragging } = mouseHandler;\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) => setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: getColumns,\n      getTableProps: (props = {}) => {\n        return {\n          ...props,\n          style: {\n            minWidth: 'fit-content',\n            ...(props.style || {}),\n          },\n        };\n      },\n      getTableHeaderCellProps: React.useCallback(\n        (columnId: TableColumnId) => {\n          const col = getColumnById(columnId);\n          const isLastColumn = columns[columns.length - 1]?.columnId === columnId;\n\n          const aside =\n            isLastColumn && autoFitColumns ? null : (\n              <TableResizeHandle\n                onMouseDown={getOnMouseDown(columnId)}\n                onTouchStart={getOnMouseDown(columnId)}\n                {...getKeyboardResizingProps(columnId, col?.width || 0)}\n              />\n            );\n\n          return col\n            ? {\n                style: getColumnStyles(col, dragging),\n                aside,\n              }\n            : {};\n        },\n        [getColumnById, columns, dragging, getKeyboardResizingProps, getOnMouseDown, autoFitColumns],\n      ),\n      getTableCellProps: React.useCallback(\n        (columnId: TableColumnId) => {\n          const col = getColumnById(columnId);\n          return col ? { style: getColumnStyles(col) } : {};\n        },\n        [getColumnById],\n      ),\n      enableKeyboardMode,\n    },\n  };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","autoFitColumns","getColumnStyles","column","dragging","width","minWidth","maxWidth","pointerEvents","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","getColumnById","getColumns","tableRef","columnSizing_unstable","w","undefined","props","col","isLastColumn","length","aside","onMouseDown","onTouchStart"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useTableColumnSizing.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n  ColumnWidthState,\n  EnableKeyboardModeOnChangeCallback,\n  TableColumnId,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\n\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableProps: () => ({}),\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n  enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n  'use no memo';\n\n  // False positive, these plugin hooks are intended to be run on every render\n\n  return (tableState: TableFeaturesState<TItem>): TableFeaturesState<TItem> =>\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useTableColumnSizingState(tableState, { autoFitColumns: true, ...params });\n}\n\nfunction getColumnStyles(column: ColumnWidthState, dragging?: boolean): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n    // Fixed the unwanted sort: https://github.com/microsoft/fluentui/issues/27803\n    ...(dragging ? { pointerEvents: 'none' } : {}),\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params: UseTableColumnSizingParams = {},\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n  // Creates the keyboard handler for resizing columns\n  const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n\n  const { autoFitColumns } = params;\n\n  const enableKeyboardMode = React.useCallback(\n    (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n      (e: React.MouseEvent | React.TouchEvent) => {\n        e.preventDefault();\n        e.nativeEvent.stopPropagation();\n        toggleInteractiveMode(columnId, onChange);\n      },\n    [toggleInteractiveMode],\n  );\n\n  const { getColumnById, setColumnWidth, getColumns } = columnResizeState;\n  const { getOnMouseDown, dragging } = mouseHandler;\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) => setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: getColumns,\n      getTableProps: (props = {}) => {\n        return {\n          ...props,\n          style: {\n            minWidth: 'fit-content',\n            ...(props.style || {}),\n          },\n        };\n      },\n      getTableHeaderCellProps: React.useCallback(\n        (columnId: TableColumnId) => {\n          const col = getColumnById(columnId);\n          const isLastColumn = columns[columns.length - 1]?.columnId === columnId;\n\n          const aside =\n            isLastColumn && autoFitColumns ? null : (\n              <TableResizeHandle\n                onMouseDown={getOnMouseDown(columnId)}\n                onTouchStart={getOnMouseDown(columnId)}\n                {...getKeyboardResizingProps(columnId, col?.width || 0)}\n              />\n            );\n\n          return col\n            ? {\n                style: getColumnStyles(col, dragging),\n                aside,\n              }\n            : {};\n        },\n        [getColumnById, columns, dragging, getKeyboardResizingProps, getOnMouseDown, autoFitColumns],\n      ),\n      getTableCellProps: React.useCallback(\n        (columnId: TableColumnId) => {\n          const col = getColumnById(columnId);\n          return col ? { style: getColumnStyles(col) } : {};\n        },\n        [getColumnById],\n      ),\n      enableKeyboardMode,\n    },\n  };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","autoFitColumns","getColumnStyles","column","dragging","width","minWidth","maxWidth","pointerEvents","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","getColumnById","getColumns","tableRef","columnSizing_unstable","w","undefined","props","col","isLastColumn","length","aside","onMouseDown","onTouchStart"],"mappings":"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"}

package/lib-commonjs/hooks/useTableCompositeNavigation.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTableCompositeNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, ArrowUp, ArrowLeft } from '@fluentui/keyboard-keys';\nimport {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useMergedTabsterAttributes_unstable,\n  TabsterDOMAttribute,\n  useFocusFinders,\n  GroupperMoveFocusEvent,\n  MoverMoveFocusEvent,\n  GroupperMoveFocusActions,\n  MoverKeys,\n} from '@fluentui/react-tabster';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useTableCompositeNavigation(): {\n  onTableKeyDown: React.KeyboardEventHandler;\n  tableTabsterAttribute: TabsterDOMAttribute;\n  tableRowTabsterAttribute: TabsterDOMAttribute;\n} {\n  const horizontalAttr = useArrowNavigationGroup({ axis: 'horizontal' });\n  const gridAttr = useArrowNavigationGroup({ axis: 'grid' });\n  const groupperAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent();\n\n  const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);\n\n  const onKeyDown: React.KeyboardEventHandler = React.useCallback(\n    e => {\n      if (!targetDocument) {\n        return;\n      }\n\n      let activeElement = targetDocument.activeElement;\n      if (!activeElement || !e.currentTarget.contains(activeElement)) {\n        return;\n      }\n      const activeElementRole = activeElement.getAttribute('role');\n\n      // Enter groupper when in row focus mode to navigate cells\n      if (e.key === ArrowRight && activeElementRole === 'row' && isHTMLElement(activeElement)) {\n        findFirstFocusable(activeElement)?.focus();\n      }\n\n      if (activeElementRole === 'row') {\n        return;\n      }\n\n      const isInCell = (() => {\n        let cur = isHTMLElement(activeElement) ? activeElement : null;\n        while (cur) {\n          const curRole = cur.getAttribute('role');\n          if (curRole === 'cell' || curRole === 'gridcell') {\n            return true;\n          }\n\n          cur = cur.parentElement;\n        }\n\n        return false;\n      })();\n\n      // Escape groupper focus trap before arrow left, arrow down or arrow up\n      if (e.key === ArrowLeft && isInCell) {\n        activeElement.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n        return;\n      }\n      if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {\n        activeElement.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n\n        activeElement = targetDocument.activeElement;\n\n        if (activeElement) {\n          activeElement.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys[e.key] }));\n        }\n      }\n    },\n    [targetDocument, findFirstFocusable],\n  );\n\n  return {\n    onTableKeyDown: onKeyDown,\n    tableTabsterAttribute: gridAttr,\n    tableRowTabsterAttribute: rowAttr,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","ArrowDown","ArrowRight","ArrowUp","ArrowLeft","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","useFocusFinders","GroupperMoveFocusEvent","MoverMoveFocusEvent","GroupperMoveFocusActions","MoverKeys","isHTMLElement","useTableCompositeNavigation","horizontalAttr","axis","gridAttr","groupperAttr","tabBehavior","findFirstFocusable","targetDocument","rowAttr","onKeyDown","useCallback","e","activeElement","currentTarget","contains","activeElementRole","getAttribute","key","focus","isInCell","cur","curRole","parentElement","dispatchEvent","action","Escape","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":";;;;+BAgBgBgB;;;;;;;iEAhBO,QAAQ;qCACiB,kCAAkC;8BACxB,0BAA0B;8BAW7E,0BAA0B;gCACH,4BAA4B;AAEnD;IAKL,MAAMC,qBAAiBV,qCAAAA,EAAwB;QAAEW,MAAM;IAAa;IACpE,MAAMC,eAAWZ,qCAAAA,EAAwB;QAAEW,MAAM;IAAO;IACxD,MAAME,mBAAeZ,+BAAAA,EAAkB;QAAEa,aAAa;IAAqB;IAC3E,MAAM,EAAEC,kBAAkB,EAAE,OAAGZ,6BAAAA;IAC/B,MAAM,EAAEa,cAAc,EAAE,GAAGrB,2CAAAA;IAE3B,MAAMsB,cAAUf,iDAAAA,EAAoCQ,gBAAgBG;IAEpE,MAAMK,YAAwCzB,OAAM0B,WAAW,CAC7DC,CAAAA;QACE,IAAI,CAACJ,gBAAgB;YACnB;QACF;QAEA,IAAIK,gBAAgBL,eAAeK,aAAa;QAChD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC9D;QACF;QACA,MAAMG,oBAAoBH,cAAcI,YAAY,CAAC;QAErD,0DAA0D;QAC1D,IAAIL,EAAEM,GAAG,KAAK7B,wBAAAA,IAAc2B,sBAAsB,aAAShB,6BAAAA,EAAca,gBAAgB;gBACvFN;aAAAA,sBAAAA,mBAAmBM,cAAAA,MAAAA,QAAnBN,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAmCY,KAAK;QAC1C;QAEA,IAAIH,sBAAsB,OAAO;YAC/B;QACF;QAEA,MAAMI,WAAY,CAAA;YAChB,IAAIC,UAAMrB,6BAAAA,EAAca,iBAAiBA,gBAAgB;YACzD,MAAOQ,IAAK;gBACV,MAAMC,UAAUD,IAAIJ,YAAY,CAAC;gBACjC,IAAIK,YAAY,UAAUA,YAAY,YAAY;oBAChD,OAAO;gBACT;gBAEAD,MAAMA,IAAIE,aAAa;YACzB;YAEA,OAAO;SACT,CAAA;QAEA,uEAAuE;QACvE,IAAIX,EAAEM,GAAG,KAAK3B,uBAAAA,IAAa6B,UAAU;YACnCP,cAAcW,aAAa,CAAC,IAAI5B,oCAAAA,CAAuB;gBAAE6B,QAAQ3B,sCAAAA,CAAyB4B,MAAM;YAAC;YACjG;QACF;QACA,IAAKd,CAAAA,EAAEM,GAAG,KAAK9B,uBAAAA,IAAawB,EAAEM,GAAG,KAAK5B,qBAAAA,AAAM,KAAM8B,UAAU;YAC1DP,cAAcW,aAAa,CAAC,IAAI5B,oCAAAA,CAAuB;gBAAE6B,QAAQ3B,sCAAAA,CAAyB4B,MAAM;YAAC;YAEjGb,gBAAgBL,eAAeK,aAAa;YAE5C,IAAIA,eAAe;gBACjBA,cAAcW,aAAa,CAAC,IAAI3B,iCAAAA,CAAoB;oBAAEqB,KAAKnB,uBAAS,CAACa,EAAEM,GAAG,CAAC;gBAAC;YAC9E;QACF;IACF,GACA;QAACV;QAAgBD;KAAmB;IAGtC,OAAO;QACLoB,gBAAgBjB;QAChBkB,uBAAuBxB;QACvByB,0BAA0BpB;IAC5B;AACF"}
+{"version":3,"sources":["../src/hooks/useTableCompositeNavigation.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, ArrowUp, ArrowLeft } from '@fluentui/keyboard-keys';\nimport {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useMergedTabsterAttributes_unstable,\n  TabsterDOMAttribute,\n  useFocusFinders,\n  GroupperMoveFocusEvent,\n  MoverMoveFocusEvent,\n  GroupperMoveFocusActions,\n  MoverKeys,\n} from '@fluentui/react-tabster';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useTableCompositeNavigation(): {\n  onTableKeyDown: React.KeyboardEventHandler;\n  tableTabsterAttribute: TabsterDOMAttribute;\n  tableRowTabsterAttribute: TabsterDOMAttribute;\n} {\n  const horizontalAttr = useArrowNavigationGroup({ axis: 'horizontal' });\n  const gridAttr = useArrowNavigationGroup({ axis: 'grid' });\n  const groupperAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent();\n\n  const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);\n\n  const onKeyDown: React.KeyboardEventHandler = React.useCallback(\n    e => {\n      if (!targetDocument) {\n        return;\n      }\n\n      let activeElement = targetDocument.activeElement;\n      if (!activeElement || !e.currentTarget.contains(activeElement)) {\n        return;\n      }\n      const activeElementRole = activeElement.getAttribute('role');\n\n      // Enter groupper when in row focus mode to navigate cells\n      if (e.key === ArrowRight && activeElementRole === 'row' && isHTMLElement(activeElement)) {\n        findFirstFocusable(activeElement)?.focus();\n      }\n\n      if (activeElementRole === 'row') {\n        return;\n      }\n\n      const isInCell = (() => {\n        let cur = isHTMLElement(activeElement) ? activeElement : null;\n        while (cur) {\n          const curRole = cur.getAttribute('role');\n          if (curRole === 'cell' || curRole === 'gridcell') {\n            return true;\n          }\n\n          cur = cur.parentElement;\n        }\n\n        return false;\n      })();\n\n      // Escape groupper focus trap before arrow left, arrow down or arrow up\n      if (e.key === ArrowLeft && isInCell) {\n        activeElement.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n        return;\n      }\n      if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {\n        activeElement.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n\n        activeElement = targetDocument.activeElement;\n\n        if (activeElement) {\n          activeElement.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys[e.key] }));\n        }\n      }\n    },\n    [targetDocument, findFirstFocusable],\n  );\n\n  return {\n    onTableKeyDown: onKeyDown,\n    tableTabsterAttribute: gridAttr,\n    tableRowTabsterAttribute: rowAttr,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","ArrowDown","ArrowRight","ArrowUp","ArrowLeft","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","useFocusFinders","GroupperMoveFocusEvent","MoverMoveFocusEvent","GroupperMoveFocusActions","MoverKeys","isHTMLElement","useTableCompositeNavigation","horizontalAttr","axis","gridAttr","groupperAttr","tabBehavior","findFirstFocusable","targetDocument","rowAttr","onKeyDown","useCallback","e","activeElement","currentTarget","contains","activeElementRole","getAttribute","key","focus","isInCell","cur","curRole","parentElement","dispatchEvent","action","Escape","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":"AAAA;;;;;+BAkBgBgB;;;;;;;iEAhBO,QAAQ;qCACiB,kCAAkC;8BACxB,0BAA0B;8BAW7E,0BAA0B;gCACH,4BAA4B;AAEnD;IAKL,MAAMC,qBAAiBV,qCAAAA,EAAwB;QAAEW,MAAM;IAAa;IACpE,MAAMC,eAAWZ,qCAAAA,EAAwB;QAAEW,MAAM;IAAO;IACxD,MAAME,mBAAeZ,+BAAAA,EAAkB;QAAEa,aAAa;IAAqB;IAC3E,MAAM,EAAEC,kBAAkB,EAAE,OAAGZ,6BAAAA;IAC/B,MAAM,EAAEa,cAAc,EAAE,OAAGrB,uCAAAA;IAE3B,MAAMsB,cAAUf,iDAAAA,EAAoCQ,gBAAgBG;IAEpE,MAAMK,YAAwCzB,OAAM0B,WAAW,CAC7DC,CAAAA;QACE,IAAI,CAACJ,gBAAgB;YACnB;QACF;QAEA,IAAIK,gBAAgBL,eAAeK,aAAa;QAChD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC9D;QACF;QACA,MAAMG,oBAAoBH,cAAcI,YAAY,CAAC;QAErD,0DAA0D;QAC1D,IAAIL,EAAEM,GAAG,KAAK7B,wBAAAA,IAAc2B,sBAAsB,aAAShB,6BAAAA,EAAca,gBAAgB;gBACvFN;aAAAA,sBAAAA,mBAAmBM,cAAAA,MAAAA,QAAnBN,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAmCY,KAAK;QAC1C;QAEA,IAAIH,sBAAsB,OAAO;YAC/B;QACF;QAEA,MAAMI,WAAY,CAAA;YAChB,IAAIC,UAAMrB,6BAAAA,EAAca,iBAAiBA,gBAAgB;YACzD,MAAOQ,IAAK;gBACV,MAAMC,UAAUD,IAAIJ,YAAY,CAAC;gBACjC,IAAIK,YAAY,UAAUA,YAAY,YAAY;oBAChD,OAAO;gBACT;gBAEAD,MAAMA,IAAIE,aAAa;YACzB;YAEA,OAAO;SACT,CAAA;QAEA,uEAAuE;QACvE,IAAIX,EAAEM,GAAG,KAAK3B,uBAAAA,IAAa6B,UAAU;YACnCP,cAAcW,aAAa,CAAC,IAAI5B,oCAAAA,CAAuB;gBAAE6B,QAAQ3B,sCAAAA,CAAyB4B,MAAM;YAAC;YACjG;QACF;QACA,IAAKd,CAAAA,EAAEM,GAAG,KAAK9B,uBAAAA,IAAawB,EAAEM,GAAG,KAAK5B,qBAAAA,AAAM,KAAM8B,UAAU;YAC1DP,cAAcW,aAAa,CAAC,IAAI5B,oCAAAA,CAAuB;gBAAE6B,QAAQ3B,sCAAAA,CAAyB4B,MAAM;YAAC;YAEjGb,gBAAgBL,eAAeK,aAAa;YAE5C,IAAIA,eAAe;gBACjBA,cAAcW,aAAa,CAAC,IAAI3B,iCAAAA,CAAoB;oBAAEqB,KAAKnB,uBAAS,CAACa,EAAEM,GAAG,CAAC;gBAAC;YAC9E;QACF;IACF,GACA;QAACV;QAAgBD;KAAmB;IAGtC,OAAO;QACLoB,gBAAgBjB;QAChBkB,uBAAuBxB;QACvByB,0BAA0BpB;IAC5B;AACF"}

package/lib-commonjs/hooks/useTableFeatures.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTableFeatures.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  UseTableFeaturesOptions,\n  TableFeaturesState,\n  TableRowData,\n  RowEnhancer,\n  TableFeaturePlugin,\n  TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n  selection: defaultTableSelectionState,\n  sort: defaultTableSortState,\n  getRows: () => [],\n  getRowId: () => '',\n  items: [],\n  columns: [],\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: defaultColumnSizingState,\n  tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n  options: UseTableFeaturesOptions<TItem>,\n  plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n  const { items, getRowId, columns } = options;\n\n  const getRows = React.useCallback(\n    <TRowState extends TableRowData<TItem>>(rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>) => {\n      return items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n    },\n    [items, getRowId],\n  );\n\n  const initialState: TableFeaturesState<TItem> = {\n    getRowId,\n    items,\n    columns,\n    getRows,\n    selection: defaultTableSelectionState,\n    sort: defaultTableSortState as TableSortState<TItem>,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: defaultColumnSizingState,\n    tableRef: React.createRef(),\n  };\n\n  return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","useCallback","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"mappings":";;;;;;;;;;;IAeaM,iBAAAA;;;oBAYGU;eAAAA;;;;iEA3BO,QAAQ;mCASY,sBAAsB;8BAC3B,iBAAiB;sCACd,yBAAyB;AAElE,MAAMZ,qBAAkEC,CAAAA,MAAOA;AAExE,0BAAuD;IAC5DE,WAAWN,6CAAAA;IACXO,MAAMN,mCAAAA;IACNO,SAAS,IAAM,EAAE;IACjBC,UAAU,IAAM;IAChBC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBV,8CAAAA;IACvBW,wBAAUd,OAAMe,SAAS;AAC3B,EAAE;AAEK,0BACLE,OAAuC,EACvCC,UAAgC,EAAE;IAElC,MAAM,EAAEP,KAAK,EAAED,QAAQ,EAAEE,OAAO,EAAE,GAAGK;IAErC,MAAMR,UAAUT,OAAMmB,WAAW,CAC/B,CAAwCC,cAAchB,kBAAmD;QACvG,OAAOO,MAAMU,GAAG,CAAC,CAACC,MAAMC;gBAAiCb;mBAA3BU,YAAY;gBAAEE;gBAAME,OAAOd,CAAAA,YAAAA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWY,KAAAA,MAAAA,QAAXZ,cAAAA,KAAAA,IAAAA,YAAoBa;YAAE;;IACjF,GACA;QAACZ;QAAOD;KAAS;IAGnB,MAAMe,eAA0C;QAC9Cf;QACAC;QACAC;QACAH;QACAF,WAAWN,6CAAAA;QACXO,MAAMN,mCAAAA;QACN,gEAAgE;QAChEW,uBAAuBV,8CAAAA;QACvBW,wBAAUd,OAAMe,SAAS;IAC3B;IAEA,OAAOG,QAAQQ,MAAM,CAAC,CAACC,OAAOC,SAAWA,OAAOD,QAAQF;AAC1D"}
+{"version":3,"sources":["../src/hooks/useTableFeatures.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  UseTableFeaturesOptions,\n  TableFeaturesState,\n  TableRowData,\n  RowEnhancer,\n  TableFeaturePlugin,\n  TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n  selection: defaultTableSelectionState,\n  sort: defaultTableSortState,\n  getRows: () => [],\n  getRowId: () => '',\n  items: [],\n  columns: [],\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: defaultColumnSizingState,\n  tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n  options: UseTableFeaturesOptions<TItem>,\n  plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n  const { items, getRowId, columns } = options;\n\n  const getRows = React.useCallback(\n    <TRowState extends TableRowData<TItem>>(rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>) => {\n      return items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n    },\n    [items, getRowId],\n  );\n\n  const initialState: TableFeaturesState<TItem> = {\n    getRowId,\n    items,\n    columns,\n    getRows,\n    selection: defaultTableSelectionState,\n    sort: defaultTableSortState as TableSortState<TItem>,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: defaultColumnSizingState,\n    tableRef: React.createRef(),\n  };\n\n  return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","useCallback","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"mappings":"AAAA;;;;;;;;;;;;IAiBaM,iBAAAA;;;IAYGU,gBAAAA;;;;;iEA3BO,QAAQ;mCASY,sBAAsB;8BAC3B,iBAAiB;sCACd,yBAAyB;AAElE,MAAMZ,qBAAkEC,CAAAA,MAAOA;AAExE,0BAAuD;IAC5DE,WAAWN,6CAAAA;IACXO,MAAMN,mCAAAA;IACNO,SAAS,IAAM,EAAE;IACjBC,UAAU,IAAM;IAChBC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBV,8CAAAA;IACvBW,wBAAUd,OAAMe,SAAS;AAC3B,EAAE;AAEK,0BACLE,OAAuC,EACvCC,UAAgC,EAAE;IAElC,MAAM,EAAEP,KAAK,EAAED,QAAQ,EAAEE,OAAO,EAAE,GAAGK;IAErC,MAAMR,UAAUT,OAAMmB,WAAW,CAC/B,CAAwCC,cAAchB,kBAAmD;QACvG,OAAOO,MAAMU,GAAG,CAAC,CAACC,MAAMC;gBAAiCb;mBAA3BU,YAAY;gBAAEE;gBAAME,OAAOd,CAAAA,YAAAA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWY,KAAAA,MAAAA,QAAXZ,cAAAA,KAAAA,IAAAA,YAAoBa;YAAE;;IACjF,GACA;QAACZ;QAAOD;KAAS;IAGnB,MAAMe,eAA0C;QAC9Cf;QACAC;QACAC;QACAH;QACAF,WAAWN,6CAAAA;QACXO,MAAMN,mCAAAA;QACN,gEAAgE;QAChEW,uBAAuBV,8CAAAA;QACvBW,wBAAUd,OAAMe,SAAS;IAC3B;IAEA,OAAOG,QAAQQ,MAAM,CAAC,CAACC,OAAOC,SAAWA,OAAOD,QAAQF;AAC1D"}

package/lib-commonjs/hooks/useTableSelection.js

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