@fluentui/react-table 9.8.1 → 9.8.2

package/lib/components/TableResizeHandle/renderTableResizeHandle.js

@@ -1,8 +1,8 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of TableResizeHandle
  */ export const renderTableResizeHandle_unstable = (state)=>{
     assertSlots(state);
-    return /*#__PURE__*/ createElement(state.root, null);
+    return /*#__PURE__*/ _jsx(state.root, {});
 };

package/lib/components/TableResizeHandle/renderTableResizeHandle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderTableResizeHandle.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableResizeHandleState, TableResizeHandleSlots } from './TableResizeHandle.types';\n\n/**\n * Render the final JSX of TableResizeHandle\n */\nexport const renderTableResizeHandle_unstable = (state: TableResizeHandleState) => {\n  assertSlots<TableResizeHandleSlots>(state);\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderTableResizeHandle_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC,QAAkC;IACjFF,YAAoCE;IACpC,qBAAO,AAXT,cAWUA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["renderTableResizeHandle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableResizeHandleState, TableResizeHandleSlots } from './TableResizeHandle.types';\n\n/**\n * Render the final JSX of TableResizeHandle\n */\nexport const renderTableResizeHandle_unstable = (state: TableResizeHandleState) => {\n  assertSlots<TableResizeHandleSlots>(state);\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTableResizeHandle_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/CF,YAAoCE;IACpC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/TableResizeHandle/useTableResizeHandle.js

@@ -10,8 +10,8 @@ import { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-u
  * @param ref - reference to root HTMLElement of TableResizeHandle
  */ export const useTableResizeHandle_unstable = (props, ref)=>{
     const onClick = useEventCallback((event)=>{
-        var _props_onClick;
-        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
+        var _props_onClick, _props;
+        (_props_onClick = (_props = props).onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(_props, event);
         event.stopPropagation();
     });
     return {

package/lib/components/TableResizeHandle/useTableResizeHandle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableResizeHandle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle.types';\n\n/**\n * Create the state required to render TableResizeHandle.\n *\n * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,\n * before being passed to renderTableResizeHandle_unstable.\n *\n * @param props - props from this instance of TableResizeHandle\n * @param ref - reference to root HTMLElement of TableResizeHandle\n */\nexport const useTableResizeHandle_unstable = (\n  props: TableResizeHandleProps,\n  ref: React.Ref<HTMLElement>,\n): TableResizeHandleState => {\n  const onClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    props.onClick?.(event);\n    event.stopPropagation();\n  });\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","useEventCallback","slot","useTableResizeHandle_unstable","props","ref","onClick","event","stopPropagation","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAG1F;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC,MAC2B;IAC3B,MAAMC,UAAUL,iBAAiB,CAACM,QAA4C;YAC5EH;QAAAA,CAAAA,iBAAAA,MAAME,OAAO,cAAbF,4BAAAA,KAAAA,IAAAA,eAAAA,KAAAA,OAAgBG;QAChBA,MAAMC,eAAe;IACvB;IACA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfX,sBAAsB,OAAO;YAC3BK;YACA,GAAGD,KAAK;YACRE;QACF,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useTableResizeHandle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle.types';\n\n/**\n * Create the state required to render TableResizeHandle.\n *\n * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,\n * before being passed to renderTableResizeHandle_unstable.\n *\n * @param props - props from this instance of TableResizeHandle\n * @param ref - reference to root HTMLElement of TableResizeHandle\n */\nexport const useTableResizeHandle_unstable = (\n  props: TableResizeHandleProps,\n  ref: React.Ref<HTMLElement>,\n): TableResizeHandleState => {\n  const onClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    props.onClick?.(event);\n    event.stopPropagation();\n  });\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","useEventCallback","slot","useTableResizeHandle_unstable","props","ref","onClick","event","stopPropagation","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAG1F;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAMC,UAAUL,iBAAiB,CAACM;YAChCH,gBAAAA;SAAAA,iBAAAA,CAAAA,SAAAA,OAAME,OAAO,cAAbF,qCAAAA,oBAAAA,QAAgBG;QAChBA,MAAMC,eAAe;IACvB;IACA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfX,sBAAsB,OAAO;YAC3BK;YACA,GAAGD,KAAK;YACRE;QACF,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/TableRow/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TableRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableRow_unstable } from './useTableRow';\nimport { renderTableRow_unstable } from './renderTableRow';\nimport { useTableRowStyles_unstable } from './useTableRowStyles.styles';\nimport type { TableRowProps } from './TableRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableRow component\n */\nexport const TableRow: ForwardRefComponent<TableRowProps> = React.forwardRef((props, ref) => {\n  const state = useTableRow_unstable(props, ref);\n\n  useTableRowStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableRowStyles_unstable')(state);\n\n  return renderTableRow_unstable(state);\n});\n\nTableRow.displayName = 'TableRow';\n"],"names":["React","useTableRow_unstable","renderTableRow_unstable","useTableRowStyles_unstable","useCustomStyleHook_unstable","TableRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOP,wBAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}
+{"version":3,"sources":["TableRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableRow_unstable } from './useTableRow';\nimport { renderTableRow_unstable } from './renderTableRow';\nimport { useTableRowStyles_unstable } from './useTableRowStyles.styles';\nimport type { TableRowProps } from './TableRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableRow component\n */\nexport const TableRow: ForwardRefComponent<TableRowProps> = React.forwardRef((props, ref) => {\n  const state = useTableRow_unstable(props, ref);\n\n  useTableRowStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableRowStyles_unstable')(state);\n\n  return renderTableRow_unstable(state);\n});\n\nTableRow.displayName = 'TableRow';\n"],"names":["React","useTableRow_unstable","renderTableRow_unstable","useTableRowStyles_unstable","useCustomStyleHook_unstable","TableRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOP,wBAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

package/lib/components/TableRow/renderTableRow.js

@@ -1,8 +1,8 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of TableRow
  */ export const renderTableRow_unstable = (state)=>{
     assertSlots(state);
-    return /*#__PURE__*/ createElement(state.root, null);
+    return /*#__PURE__*/ _jsx(state.root, {});
 };

package/lib/components/TableRow/renderTableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderTableRow.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableRowState, TableRowSlots } from './TableRow.types';\n\n/**\n * Render the final JSX of TableRow\n */\nexport const renderTableRow_unstable = (state: TableRowState) => {\n  assertSlots<TableRowSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderTableRow_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,QAAyB;IAC/DF,YAA2BE;IAE3B,qBAAO,AAZT,cAYUA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["renderTableRow.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableRowState, TableRowSlots } from './TableRow.types';\n\n/**\n * Render the final JSX of TableRow\n */\nexport const renderTableRow_unstable = (state: TableRowState) => {\n  assertSlots<TableRowSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTableRow_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/TableRow/useTableRow.js

@@ -12,7 +12,7 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
  * @param props - props from this instance of TableRow
  * @param ref - reference to root HTMLElement of TableRow
  */ export const useTableRow_unstable = (props, ref)=>{
-    const { noNativeElements , size  } = useTableContext();
+    const { noNativeElements, size } = useTableContext();
     var _props_as;
     const rootComponent = ((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : noNativeElements) ? 'div' : 'tr';
     const focusVisibleRef = useFocusVisible();

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n  const focusWithinRef = useFocusWithin();\n  const isHeaderRow = useIsInTableHeader();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getNativeElementProps(rootComponent, {\n        ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef),\n        role: rootComponent === 'div' ? 'row' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n    isHeaderRow,\n  };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","slot","useFocusVisible","useFocusWithin","useTableContext","useIsInTableHeader","useTableRow_unstable","props","ref","noNativeElements","size","rootComponent","as","focusVisibleRef","focusWithinRef","isHeaderRow","components","root","always","role","undefined","elementType","appearance"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACvF,SAASC,eAAe,EAAEC,cAAc,QAAQ,0BAA0B;AAE1E,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC,MAA+C;IACxG,MAAM,EAAEC,iBAAgB,EAAEC,KAAI,EAAE,GAAGN;QACbG;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAYE,gBAAgB,AAAD,IAAI,QAAQ,IAAI;IACjE,MAAMI,kBAAkBX;IACxB,MAAMY,iBAAiBX;IACvB,MAAMY,cAAcV;QAgBNE;IAdd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMhB,KAAKiB,MAAM,CACfnB,sBAAsBY,eAAe;YACnCH,KAAKR,cAAcQ,KAAKK,iBAAiBC;YACzCK,MAAMR,kBAAkB,QAAQ,QAAQS,SAAS;YACjD,GAAGb,KAAK;QACV,IACA;YAAEc,aAAaV;QAAc;QAE/BD;QACAD;QACAa,YAAYf,CAAAA,oBAAAA,MAAMe,UAAU,cAAhBf,+BAAAA,oBAAoB,MAAM;QACtCQ;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTableRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n  const focusWithinRef = useFocusWithin();\n  const isHeaderRow = useIsInTableHeader();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getNativeElementProps(rootComponent, {\n        ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef),\n        role: rootComponent === 'div' ? 'row' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n    isHeaderRow,\n  };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","slot","useFocusVisible","useFocusWithin","useTableContext","useIsInTableHeader","useTableRow_unstable","props","ref","noNativeElements","size","rootComponent","as","focusVisibleRef","focusWithinRef","isHeaderRow","components","root","always","role","undefined","elementType","appearance"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACvF,SAASC,eAAe,EAAEC,cAAc,QAAQ,0BAA0B;AAE1E,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,GAAGN;QACbG;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;IAC7D,MAAMI,kBAAkBX;IACxB,MAAMY,iBAAiBX;IACvB,MAAMY,cAAcV;QAgBNE;IAdd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMhB,KAAKiB,MAAM,CACfnB,sBAAsBY,eAAe;YACnCH,KAAKR,cAAcQ,KAAKK,iBAAiBC;YACzCK,MAAMR,kBAAkB,QAAQ,QAAQS;YACxC,GAAGb,KAAK;QACV,IACA;YAAEc,aAAaV;QAAc;QAE/BD;QACAD;QACAa,YAAYf,CAAAA,oBAAAA,MAAMe,UAAU,cAAhBf,+BAAAA,oBAAoB;QAChCQ;IACF;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,mCAAmEL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/G,MAAMC,QAAQR,+BAA+BM,OAAOC;IAEpDL,qCAAqCM;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO;AAC3C,GAAG;AAEHJ,mBAAmBK,WAAW,GAAG"}
+{"version":3,"sources":["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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,mCAAmEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvG,MAAMC,QAAQR,+BAA+BM,OAAOC;IAEpDL,qCAAqCM;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO;AAC3C,GAAG;AAEHJ,mBAAmBK,WAAW,GAAG"}

package/lib/components/TableSelectionCell/renderTableSelectionCell.js

@@ -1,8 +1,13 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of TableSelectionCell
  */ export const renderTableSelectionCell_unstable = (state)=>{
     assertSlots(state);
-    return /*#__PURE__*/ createElement(state.root, null, state.type === 'checkbox' && state.checkboxIndicator && /*#__PURE__*/ createElement(state.checkboxIndicator, null), state.type === 'radio' && state.radioIndicator && /*#__PURE__*/ createElement(state.radioIndicator, null));
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.type === 'checkbox' && state.checkboxIndicator && /*#__PURE__*/ _jsx(state.checkboxIndicator, {}),
+            state.type === 'radio' && state.radioIndicator && /*#__PURE__*/ _jsx(state.radioIndicator, {})
+        ]
+    });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTableSelectionCell.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell.types';\n\n/**\n * Render the final JSX of TableSelectionCell\n */\nexport const renderTableSelectionCell_unstable = (state: TableSelectionCellState) => {\n  assertSlots<TableSelectionCellSlots>(state);\n\n  return (\n    <state.root>\n      {state.type === 'checkbox' && state.checkboxIndicator && <state.checkboxIndicator />}\n\n      {state.type === 'radio' && state.radioIndicator && <state.radioIndicator />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderTableSelectionCell_unstable","state","root","type","checkboxIndicator","radioIndicator"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC,QAAmC;IACnFF,YAAqCE;IAErC,qBACE,AAbJ,cAaKA,MAAMC,IAAI,QACRD,MAAME,IAAI,KAAK,cAAcF,MAAMG,iBAAiB,kBAAI,AAd/D,cAcgEH,MAAMG,iBAAiB,SAEhFH,MAAME,IAAI,KAAK,WAAWF,MAAMI,cAAc,kBAAI,AAhBzD,cAgB0DJ,MAAMI,cAAc;AAG9E,EAAE"}
+{"version":3,"sources":["renderTableSelectionCell.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell.types';\n\n/**\n * Render the final JSX of TableSelectionCell\n */\nexport const renderTableSelectionCell_unstable = (state: TableSelectionCellState) => {\n  assertSlots<TableSelectionCellSlots>(state);\n\n  return (\n    <state.root>\n      {state.type === 'checkbox' && state.checkboxIndicator && <state.checkboxIndicator />}\n\n      {state.type === 'radio' && state.radioIndicator && <state.radioIndicator />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTableSelectionCell_unstable","state","root","type","checkboxIndicator","radioIndicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChDF,YAAqCE;IAErC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,IAAI,KAAK,cAAcF,MAAMG,iBAAiB,kBAAI,KAACH,MAAMG,iBAAiB;YAEhFH,MAAME,IAAI,KAAK,WAAWF,MAAMI,cAAc,kBAAI,KAACJ,MAAMI,cAAc;;;AAG9E,EAAE"}

package/lib/components/TableSelectionCell/useTableSelectionCell.js

@@ -14,8 +14,8 @@ import { useTableContext } from '../../contexts/tableContext';
  * @param ref - reference to root HTMLElement of TableSelectionCell
  */ export const useTableSelectionCell_unstable = (props, ref)=>{
     const tableCellState = useTableCell_unstable(props, ref);
-    const { noNativeElements  } = useTableContext();
-    const { type ='checkbox' , checked =false , subtle =false , hidden =false  } = props;
+    const { noNativeElements } = useTableContext();
+    const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;
     return {
         ...tableCellState,
         components: {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot } 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';\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, ref);\n  const { noNativeElements } = useTableContext();\n  const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;\n\n  return {\n    ...tableCellState,\n    components: {\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,\n  };\n};\n"],"names":["React","useId","slot","Checkbox","Radio","useTableCell_unstable","useTableContext","useTableSelectionCell_unstable","props","ref","tableCellState","noNativeElements","type","checked","subtle","hidden","components","checkboxIndicator","radioIndicator","optional","renderByDefault","defaultProps","elementType","input","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACxD,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC,MAC4B;IAC5B,MAAMC,iBAAiBL,sBAAsBG,OAAOC;IACpD,MAAM,EAAEE,iBAAgB,EAAE,GAAGL;IAC7B,MAAM,EAAEM,MAAO,WAAU,EAAEC,SAAU,KAAK,CAAA,EAAEC,QAAS,KAAK,CAAA,EAAEC,QAAS,KAAK,CAAA,EAAE,GAAGP;IAE/E,OAAO;QACL,GAAGE,cAAc;QACjBM,YAAY;YACV,GAAGN,eAAeM,UAAU;YAC5BC,mBAAmBd;YACnBe,gBAAgBd;QAClB;QACAa,mBAAmBf,KAAKiB,QAAQ,CAACX,MAAMS,iBAAiB,EAAE;YACxDG,iBAAiBR,SAAS;YAC1BS,cAAc;gBAAER,SAASL,MAAMK,OAAO;YAAC;YACvCS,aAAanB;QACf;QACAe,gBAAgBhB,KAAKiB,QAAQ,CAACX,MAAMU,cAAc,EAAE;YAClDE,iBAAiBR,SAAS;YAC1BS,cAAc;gBAAER,SAAS,CAAC,CAACA;gBAASU,OAAO;oBAAEC,MAAMvB,MAAM;gBAAyB;YAAE;YACpFqB,aAAalB;QACf;QACAQ;QACAC;QACAF;QACAG;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot } 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';\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, ref);\n  const { noNativeElements } = useTableContext();\n  const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;\n\n  return {\n    ...tableCellState,\n    components: {\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,\n  };\n};\n"],"names":["React","useId","slot","Checkbox","Radio","useTableCell_unstable","useTableContext","useTableSelectionCell_unstable","props","ref","tableCellState","noNativeElements","type","checked","subtle","hidden","components","checkboxIndicator","radioIndicator","optional","renderByDefault","defaultProps","elementType","input","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACxD,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,iBAAiBL,sBAAsBG,OAAOC;IACpD,MAAM,EAAEE,gBAAgB,EAAE,GAAGL;IAC7B,MAAM,EAAEM,OAAO,UAAU,EAAEC,UAAU,KAAK,EAAEC,SAAS,KAAK,EAAEC,SAAS,KAAK,EAAE,GAAGP;IAE/E,OAAO;QACL,GAAGE,cAAc;QACjBM,YAAY;YACV,GAAGN,eAAeM,UAAU;YAC5BC,mBAAmBd;YACnBe,gBAAgBd;QAClB;QACAa,mBAAmBf,KAAKiB,QAAQ,CAACX,MAAMS,iBAAiB,EAAE;YACxDG,iBAAiBR,SAAS;YAC1BS,cAAc;gBAAER,SAASL,MAAMK,OAAO;YAAC;YACvCS,aAAanB;QACf;QACAe,gBAAgBhB,KAAKiB,QAAQ,CAACX,MAAMU,cAAc,EAAE;YAClDE,iBAAiBR,SAAS;YAC1BS,cAAc;gBAAER,SAAS,CAAC,CAACA;gBAASU,OAAO;oBAAEC,MAAMvB,MAAM;gBAAyB;YAAE;YACpFqB,aAAalB;QACf;QACAQ;QACAC;QACAF;QACAG;QACAC;IACF;AACF,EAAE"}

package/lib/contexts/columnIdContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["columnIdContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableColumnId } from '../hooks/';\n\nconst columnIdContext = React.createContext<TableColumnId | undefined>(undefined);\n\nexport const columnIdContextDefaultValue = '';\n\nexport const useColumnIdContext = () => React.useContext(columnIdContext) ?? columnIdContextDefaultValue;\n\nexport const ColumnIdContextProvider = columnIdContext.Provider;\n"],"names":["React","columnIdContext","createContext","undefined","columnIdContextDefaultValue","useColumnIdContext","useContext","ColumnIdContextProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,kBAAkBD,MAAME,aAAa,CAA4BC;AAEvE,OAAO,MAAMC,8BAA8B,GAAG;IAENJ;AAAxC,OAAO,MAAMK,qBAAqB,IAAML,CAAAA,oBAAAA,MAAMM,UAAU,CAACL,8BAAjBD,+BAAAA,oBAAqCI,2BAA2B,CAAC;AAEzG,OAAO,MAAMG,0BAA0BN,gBAAgBO,QAAQ,CAAC"}
+{"version":3,"sources":["columnIdContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableColumnId } from '../hooks/';\n\nconst columnIdContext = React.createContext<TableColumnId | undefined>(undefined);\n\nexport const columnIdContextDefaultValue = '';\n\nexport const useColumnIdContext = () => React.useContext(columnIdContext) ?? columnIdContextDefaultValue;\n\nexport const ColumnIdContextProvider = columnIdContext.Provider;\n"],"names":["React","columnIdContext","createContext","undefined","columnIdContextDefaultValue","useColumnIdContext","useContext","ColumnIdContextProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,kBAAkBD,MAAME,aAAa,CAA4BC;AAEvE,OAAO,MAAMC,8BAA8B,GAAG;IAENJ;AAAxC,OAAO,MAAMK,qBAAqB,IAAML,CAAAA,oBAAAA,MAAMM,UAAU,CAACL,8BAAjBD,+BAAAA,oBAAqCI,4BAA4B;AAEzG,OAAO,MAAMG,0BAA0BN,gBAAgBO,QAAQ,CAAC"}

package/lib/contexts/dataGridContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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\nconst dataGridContextDefaultValue: DataGridContextValue = {\n  ...defaultTableState,\n  subtleSelection: false,\n  selectableRows: false,\n  selectionAppearance: 'brand',\n  focusMode: 'none',\n  compositeRowTabsterAttribute: {} as TabsterDOMAttribute,\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>) =>\n  useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","compositeRowTabsterAttribute","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,SAASC,iBAAiB,QAAQ,WAAW;AAE7C,MAAMC,kBAAkBH,cAAgDI;AAExE,MAAMC,8BAAoD;IACxD,GAAGH,iBAAiB;IACpBI,iBAAiB,KAAK;IACtBC,gBAAgB,KAAK;IACrBC,qBAAqB;IACrBC,WAAW;IACXC,8BAA8B,CAAC;AACjC;AAEA,OAAO,MAAMC,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B,CAAIC,WAC7Cb,mBAAmBE,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}
+{"version":3,"sources":["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\nconst dataGridContextDefaultValue: DataGridContextValue = {\n  ...defaultTableState,\n  subtleSelection: false,\n  selectableRows: false,\n  selectionAppearance: 'brand',\n  focusMode: 'none',\n  compositeRowTabsterAttribute: {} as TabsterDOMAttribute,\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>) =>\n  useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","compositeRowTabsterAttribute","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,SAASC,iBAAiB,QAAQ,WAAW;AAE7C,MAAMC,kBAAkBH,cAAgDI;AAExE,MAAMC,8BAAoD;IACxD,GAAGH,iBAAiB;IACpBI,iBAAiB;IACjBC,gBAAgB;IAChBC,qBAAqB;IACrBC,WAAW;IACXC,8BAA8B,CAAC;AACjC;AAEA,OAAO,MAAMC,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B,CAAIC,WAC7Cb,mBAAmBE,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}

package/lib/contexts/rowIdContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["rowIdContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableRowId } from '../hooks/';\n\nconst rowIdContext = React.createContext<TableRowId | undefined>(undefined);\n\nexport const tableRowIdContextDefaultValue = '';\n\nexport const useTableRowIdContext = () => React.useContext(rowIdContext) ?? tableRowIdContextDefaultValue;\n\nexport const TableRowIdContextProvider = rowIdContext.Provider;\n"],"names":["React","rowIdContext","createContext","undefined","tableRowIdContextDefaultValue","useTableRowIdContext","useContext","TableRowIdContextProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,eAAeD,MAAME,aAAa,CAAyBC;AAEjE,OAAO,MAAMC,gCAAgC,GAAG;IAENJ;AAA1C,OAAO,MAAMK,uBAAuB,IAAML,CAAAA,oBAAAA,MAAMM,UAAU,CAACL,2BAAjBD,+BAAAA,oBAAkCI,6BAA6B,CAAC;AAE1G,OAAO,MAAMG,4BAA4BN,aAAaO,QAAQ,CAAC"}
+{"version":3,"sources":["rowIdContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableRowId } from '../hooks/';\n\nconst rowIdContext = React.createContext<TableRowId | undefined>(undefined);\n\nexport const tableRowIdContextDefaultValue = '';\n\nexport const useTableRowIdContext = () => React.useContext(rowIdContext) ?? tableRowIdContextDefaultValue;\n\nexport const TableRowIdContextProvider = rowIdContext.Provider;\n"],"names":["React","rowIdContext","createContext","undefined","tableRowIdContextDefaultValue","useTableRowIdContext","useContext","TableRowIdContextProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,eAAeD,MAAME,aAAa,CAAyBC;AAEjE,OAAO,MAAMC,gCAAgC,GAAG;IAENJ;AAA1C,OAAO,MAAMK,uBAAuB,IAAML,CAAAA,oBAAAA,MAAMM,UAAU,CAACL,2BAAjBD,+BAAAA,oBAAkCI,8BAA8B;AAE1G,OAAO,MAAMG,4BAA4BN,aAAaO,QAAQ,CAAC"}

package/lib/contexts/tableContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["tableContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableContextValue } from '../components/Table/Table.types';\n\nconst tableContext = React.createContext<TableContextValue | undefined>(undefined);\n\nexport const tableContextDefaultValue: TableContextValue = {\n  size: 'medium',\n  noNativeElements: false,\n  sortable: false,\n};\n\nexport const TableContextProvider = tableContext.Provider;\nexport const useTableContext = () => React.useContext(tableContext) ?? tableContextDefaultValue;\n"],"names":["React","tableContext","createContext","undefined","tableContextDefaultValue","size","noNativeElements","sortable","TableContextProvider","Provider","useTableContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,eAAeD,MAAME,aAAa,CAAgCC;AAExE,OAAO,MAAMC,2BAA8C;IACzDC,MAAM;IACNC,kBAAkB,KAAK;IACvBC,UAAU,KAAK;AACjB,EAAE;AAEF,OAAO,MAAMC,uBAAuBP,aAAaQ,QAAQ,CAAC;IACrBT;AAArC,OAAO,MAAMU,kBAAkB,IAAMV,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,2BAAjBD,+BAAAA,oBAAkCI,wBAAwB,CAAC"}
+{"version":3,"sources":["tableContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableContextValue } from '../components/Table/Table.types';\n\nconst tableContext = React.createContext<TableContextValue | undefined>(undefined);\n\nexport const tableContextDefaultValue: TableContextValue = {\n  size: 'medium',\n  noNativeElements: false,\n  sortable: false,\n};\n\nexport const TableContextProvider = tableContext.Provider;\nexport const useTableContext = () => React.useContext(tableContext) ?? tableContextDefaultValue;\n"],"names":["React","tableContext","createContext","undefined","tableContextDefaultValue","size","noNativeElements","sortable","TableContextProvider","Provider","useTableContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,eAAeD,MAAME,aAAa,CAAgCC;AAExE,OAAO,MAAMC,2BAA8C;IACzDC,MAAM;IACNC,kBAAkB;IAClBC,UAAU;AACZ,EAAE;AAEF,OAAO,MAAMC,uBAAuBP,aAAaQ,QAAQ,CAAC;IACrBT;AAArC,OAAO,MAAMU,kBAAkB,IAAMV,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,2BAAjBD,+BAAAA,oBAAkCI,yBAAyB"}

package/lib/hooks/createColumn.js

@@ -18,7 +18,7 @@ const defaultRenderHeaderCell = ()=>{
  * @param options - column definition options
  * @returns - column definition with defaults
  */ export function createTableColumn(options) {
-    const { columnId , renderCell =defaultRenderCell , renderHeaderCell =defaultRenderHeaderCell , compare =defaultCompare  } = options;
+    const { columnId, renderCell = defaultRenderCell, renderHeaderCell = defaultRenderHeaderCell, compare = defaultCompare } = options;
     return {
         columnId,
         renderCell,

package/lib/hooks/createColumn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["createColumn.ts"],"sourcesContent":["import { CreateTableColumnOptions } from './types';\n\nconst defaultCompare = () => 0;\n\nconst defaultRenderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderCell function that renders null');\n  }\n\n  return null;\n};\n\nconst defaultRenderHeaderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderHeaderCell function that renders null');\n  }\n\n  return null;\n};\n\n/**\n * Helper function to create column definition with defaults\n * @param options - column definition options\n * @returns - column definition with defaults\n */\nexport function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>) {\n  const {\n    columnId,\n    renderCell = defaultRenderCell,\n    renderHeaderCell = defaultRenderHeaderCell,\n    compare = defaultCompare,\n  } = options;\n\n  return {\n    columnId,\n    renderCell,\n    renderHeaderCell,\n    compare,\n  };\n}\n"],"names":["defaultCompare","defaultRenderCell","process","env","NODE_ENV","console","warn","defaultRenderHeaderCell","createTableColumn","options","columnId","renderCell","renderHeaderCell","compare"],"mappings":"AAEA,MAAMA,iBAAiB,IAAM;AAE7B,MAAMC,oBAAoB,IAAM;IAC9B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC;IACf,CAAC;IAED,OAAO,IAAI;AACb;AAEA,MAAMC,0BAA0B,IAAM;IACpC,IAAIL,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC;IACf,CAAC;IAED,OAAO,IAAI;AACb;AAEA;;;;CAIC,GACD,OAAO,SAASE,kBAAyBC,OAAwC,EAAE;IACjF,MAAM,EACJC,SAAQ,EACRC,YAAaV,kBAAiB,EAC9BW,kBAAmBL,wBAAuB,EAC1CM,SAAUb,eAAc,EACzB,GAAGS;IAEJ,OAAO;QACLC;QACAC;QACAC;QACAC;IACF;AACF,CAAC"}
+{"version":3,"sources":["createColumn.ts"],"sourcesContent":["import { CreateTableColumnOptions } from './types';\n\nconst defaultCompare = () => 0;\n\nconst defaultRenderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderCell function that renders null');\n  }\n\n  return null;\n};\n\nconst defaultRenderHeaderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderHeaderCell function that renders null');\n  }\n\n  return null;\n};\n\n/**\n * Helper function to create column definition with defaults\n * @param options - column definition options\n * @returns - column definition with defaults\n */\nexport function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>) {\n  const {\n    columnId,\n    renderCell = defaultRenderCell,\n    renderHeaderCell = defaultRenderHeaderCell,\n    compare = defaultCompare,\n  } = options;\n\n  return {\n    columnId,\n    renderCell,\n    renderHeaderCell,\n    compare,\n  };\n}\n"],"names":["defaultCompare","defaultRenderCell","process","env","NODE_ENV","console","warn","defaultRenderHeaderCell","createTableColumn","options","columnId","renderCell","renderHeaderCell","compare"],"mappings":"AAEA,MAAMA,iBAAiB,IAAM;AAE7B,MAAMC,oBAAoB;IACxB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;AACT;AAEA,MAAMC,0BAA0B;IAC9B,IAAIL,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;AACT;AAEA;;;;CAIC,GACD,OAAO,SAASE,kBAAyBC,OAAwC;IAC/E,MAAM,EACJC,QAAQ,EACRC,aAAaV,iBAAiB,EAC9BW,mBAAmBL,uBAAuB,EAC1CM,UAAUb,cAAc,EACzB,GAAGS;IAEJ,OAAO;QACLC;QACAC;QACAC;QACAC;IACF;AACF"}

package/lib/hooks/useKeyboardResizing.js

@@ -8,7 +8,7 @@ const PRECISION_FACTOR = 1 / 4;
 export function useKeyboardResizing(columnResizeState) {
     const [columnId, setColumnId] = React.useState();
     const onChangeRef = React.useRef();
-    const { findPrevFocusable  } = useFocusFinders();
+    const { findPrevFocusable } = useFocusFinders();
     const columnResizeStateRef = React.useRef(columnResizeState);
     React.useEffect(()=>{
         columnResizeStateRef.current = columnResizeState;
@@ -45,16 +45,16 @@ export function useKeyboardResizing(columnResizeState) {
             case Enter:
             case Escape:
                 var // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).
-                _resizeHandleRefs_get, _resizeHandleRefs_get_current;
+                _resizeHandleRefs_get_current, _resizeHandleRefs_get;
                 stopEvent();
                 (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : (_resizeHandleRefs_get_current = _resizeHandleRefs_get.current) === null || _resizeHandleRefs_get_current === void 0 ? void 0 : _resizeHandleRefs_get_current.blur();
                 break;
         }
     });
     const enableInteractiveMode = React.useCallback((colId)=>{
-        var _onChangeRef_current, _resizeHandleRefs_get;
+        var _onChangeRef_current, _onChangeRef, _resizeHandleRefs_get;
         setColumnId(colId);
-        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, colId, true);
+        (_onChangeRef_current = (_onChangeRef = onChangeRef).current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(_onChangeRef, colId, true);
         const handle = (_resizeHandleRefs_get = resizeHandleRefs.get(colId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;
         if (handle) {
             handle.setAttribute('tabindex', '-1');
@@ -66,11 +66,11 @@ export function useKeyboardResizing(columnResizeState) {
     ]);
     const disableInteractiveMode = React.useCallback(()=>{
         var // Notify the onChange listener that we are disabling interactive mode.
-        _onChangeRef_current, _resizeHandleRefs_get;
+        _onChangeRef_current, _onChangeRef, _resizeHandleRefs_get;
         if (!columnId) {
             return;
         }
-        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);
+        (_onChangeRef_current = (_onChangeRef = onChangeRef).current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(_onChangeRef, columnId, false);
         // Find the previous focusable element (table header button) and focus it.
         const el = (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;
         if (el) {

package/lib/hooks/useKeyboardResizing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n  const [columnId, setColumnId] = React.useState<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n  const { findPrevFocusable } = useFocusFinders();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement>>());\n\n  const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n    if (!columnId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(columnId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n        resizeHandleRefs.get(columnId)?.current?.blur();\n        break;\n    }\n  });\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      setColumnId(colId);\n      onChangeRef.current?.(colId, true);\n\n      const handle = resizeHandleRefs.get(colId)?.current;\n      if (handle) {\n        handle.setAttribute('tabindex', '-1');\n        handle.tabIndex = -1;\n        handle.focus();\n      }\n    },\n    [resizeHandleRefs],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (!columnId) {\n      return;\n    }\n    // Notify the onChange listener that we are disabling interactive mode.\n    onChangeRef.current?.(columnId, false);\n    // Find the previous focusable element (table header button) and focus it.\n    const el = resizeHandleRefs.get(columnId)?.current;\n    if (el) {\n      findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n      el.removeAttribute('tabindex');\n    }\n\n    setColumnId(undefined);\n  }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId !== colId) {\n      enableInteractiveMode(colId);\n      setColumnId(colId);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  const getKeyboardResizingRef = React.useCallback(\n    (colId: TableColumnId) => {\n      const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n      resizeHandleRefs.set(colId, ref);\n      return ref;\n    },\n    [resizeHandleRefs],\n  );\n\n  // This makes sure the left and right arrow keys are ignored in tabster,\n  // so that they can be used for resizing.\n  const tabsterAttrs = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: {\n        ArrowLeft: true,\n        ArrowRight: true,\n      },\n    },\n  });\n\n  return {\n    toggleInteractiveMode,\n    columnId,\n    getKeyboardResizingProps: (colId: TableColumnId, currentWidth: number) => ({\n      onKeyDown: keyboardHandler,\n      onBlur: disableInteractiveMode,\n      ref: getKeyboardResizingRef(colId),\n      role: 'separator',\n      'aria-label': 'Resize column',\n      'aria-valuetext': `${currentWidth} pixels`,\n      'aria-hidden': colId === columnId ? false : true,\n      tabIndex: colId === columnId ? 0 : undefined,\n      ...tabsterAttrs,\n    }),\n  };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"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"}
+{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n  const [columnId, setColumnId] = React.useState<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n  const { findPrevFocusable } = useFocusFinders();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement>>());\n\n  const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n    if (!columnId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(columnId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n        resizeHandleRefs.get(columnId)?.current?.blur();\n        break;\n    }\n  });\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      setColumnId(colId);\n      onChangeRef.current?.(colId, true);\n\n      const handle = resizeHandleRefs.get(colId)?.current;\n      if (handle) {\n        handle.setAttribute('tabindex', '-1');\n        handle.tabIndex = -1;\n        handle.focus();\n      }\n    },\n    [resizeHandleRefs],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (!columnId) {\n      return;\n    }\n    // Notify the onChange listener that we are disabling interactive mode.\n    onChangeRef.current?.(columnId, false);\n    // Find the previous focusable element (table header button) and focus it.\n    const el = resizeHandleRefs.get(columnId)?.current;\n    if (el) {\n      findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n      el.removeAttribute('tabindex');\n    }\n\n    setColumnId(undefined);\n  }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId !== colId) {\n      enableInteractiveMode(colId);\n      setColumnId(colId);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  const getKeyboardResizingRef = React.useCallback(\n    (colId: TableColumnId) => {\n      const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n      resizeHandleRefs.set(colId, ref);\n      return ref;\n    },\n    [resizeHandleRefs],\n  );\n\n  // This makes sure the left and right arrow keys are ignored in tabster,\n  // so that they can be used for resizing.\n  const tabsterAttrs = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: {\n        ArrowLeft: true,\n        ArrowRight: true,\n      },\n    },\n  });\n\n  return {\n    toggleInteractiveMode,\n    columnId,\n    getKeyboardResizingProps: (colId: TableColumnId, currentWidth: number) => ({\n      onKeyDown: keyboardHandler,\n      onBlur: disableInteractiveMode,\n      ref: getKeyboardResizingRef(colId),\n      role: 'separator',\n      'aria-label': 'Resize column',\n      'aria-valuetext': `${currentWidth} pixels`,\n      'aria-hidden': colId === columnId ? false : true,\n      tabIndex: colId === columnId ? 0 : undefined,\n      ...tabsterAttrs,\n    }),\n  };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,EAAEC,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AAC7F,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,eAAe,EAAEC,oBAAoB,QAAQ,0BAA0B;AAEhF,MAAMC,OAAO;AACb,MAAMC,qBAAqBN;AAC3B,MAAMO,mBAAmB,IAAI;AAE7B,OAAO,SAASC,oBAAoBC,iBAAoC;IACtE,MAAM,CAACC,UAAUC,YAAY,GAAGhB,MAAMiB,QAAQ;IAC9C,MAAMC,cAAclB,MAAMmB,MAAM;IAChC,MAAM,EAAEC,iBAAiB,EAAE,GAAGZ;IAE9B,MAAMa,uBAAuBrB,MAAMmB,MAAM,CAAoBL;IAC7Dd,MAAMsB,SAAS,CAAC;QACdD,qBAAqBE,OAAO,GAAGT;IACjC,GAAG;QAACA;KAAkB;IAEtB,MAAM,CAACU,iBAAiB,GAAGxB,MAAMiB,QAAQ,CAAC,IAAM,IAAIQ;IAEpD,MAAMC,kBAAkBnB,iBAAiB,CAACoB;QACxC,IAAI,CAACZ,UAAU;YACb;QACF;QAEA,MAAMa,QAAQP,qBAAqBE,OAAO,CAACM,cAAc,CAACd;QAC1D,MAAMe,oBAAoBH,MAAMI,gBAAgB,CAACpB;QAEjD,MAAMqB,YAAY;YAChBL,MAAMM,cAAc;YACpBN,MAAMO,eAAe;QACvB;QAEA,OAAQP,MAAMQ,GAAG;YACf,KAAKlC;gBACH+B;gBACAX,qBAAqBE,OAAO,CAACa,cAAc,CAACT,MAAMU,WAAW,EAAE;oBAC7DtB;oBACAa,OAAOA,QAASE,CAAAA,oBAAoBpB,OAAOE,mBAAmBF,IAAG;gBACnE;gBACA;YAEF,KAAKR;gBACH8B;gBACAX,qBAAqBE,OAAO,CAACa,cAAc,CAACT,MAAMU,WAAW,EAAE;oBAC7DtB;oBACAa,OAAOA,QAASE,CAAAA,oBAAoBpB,OAAOE,mBAAmBF,IAAG;gBACnE;gBACA;YAEF,KAAKJ;YACL,KAAKH;YACL,KAAKC;oBAEH,0FAA0F;gBAC1FoB,+BAAAA;gBAFAQ;iBAEAR,wBAAAA,iBAAiBc,GAAG,CAACvB,uBAArBS,6CAAAA,gCAAAA,sBAAgCD,OAAO,cAAvCC,oDAAAA,8BAAyCe,IAAI;gBAC7C;QACJ;IACF;IAEA,MAAMC,wBAAwBxC,MAAMyC,WAAW,CAC7C,CAACC;YAECxB,sBAAAA,cAEeM;QAHfR,YAAY0B;SACZxB,uBAAAA,CAAAA,eAAAA,aAAYK,OAAO,cAAnBL,2CAAAA,0BAAAA,cAAsBwB,OAAO;QAE7B,MAAMC,UAASnB,wBAAAA,iBAAiBc,GAAG,CAACI,oBAArBlB,4CAAAA,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,yBAAyB/C,MAAMyC,WAAW,CAAC;YAI/C,uEAAuE;QACvEvB,sBAAAA,cAEWM;QANX,IAAI,CAACT,UAAU;YACb;QACF;SAEAG,uBAAAA,CAAAA,eAAAA,aAAYK,OAAO,cAAnBL,2CAAAA,0BAAAA,cAAsBH,UAAU;QAChC,0EAA0E;QAC1E,MAAMiC,MAAKxB,wBAAAA,iBAAiBc,GAAG,CAACvB,uBAArBS,4CAAAA,sBAAgCD,OAAO;QAClD,IAAIyB,IAAI;gBACN5B;aAAAA,qBAAAA,kBAAkB4B,iBAAlB5B,yCAAAA,mBAAuB0B,KAAK,IAAI,wDAAwD;YACxFE,GAAGC,eAAe,CAAC;QACrB;QAEAjC,YAAYkC;IACd,GAAG;QAACnC;QAAUK;QAAmBI;KAAiB;IAElD,MAAM2B,wBAAwB,CAACT,OAAsBU;QACnDlC,YAAYK,OAAO,GAAG6B;QACtB,IAAI,CAACrC,UAAU;YACbyB,sBAAsBE;QACxB,OAAO,IAAIA,SAAS3B,aAAa2B,OAAO;YACtCF,sBAAsBE;YACtB1B,YAAY0B;QACd,OAAO;YACLK;QACF;IACF;IAEA,MAAMM,yBAAyBrD,MAAMyC,WAAW,CAC9C,CAACC;QACC,MAAMY,MAAM9B,iBAAiBc,GAAG,CAACI,UAAU1C,MAAMuD,SAAS;QAC1D/B,iBAAiBgC,GAAG,CAACd,OAAOY;QAC5B,OAAOA;IACT,GACA;QAAC9B;KAAiB;IAGpB,wEAAwE;IACxE,yCAAyC;IACzC,MAAMiC,eAAehD,qBAAqB;QACxCiD,WAAW;YACTC,eAAe;gBACb1D,WAAW;gBACXC,YAAY;YACd;QACF;IACF;IAEA,OAAO;QACLiD;QACApC;QACA6C,0BAA0B,CAAClB,OAAsBmB,eAA0B,CAAA;gBACzEC,WAAWpC;gBACXqC,QAAQhB;gBACRO,KAAKD,uBAAuBX;gBAC5BsB,MAAM;gBACN,cAAc;gBACd,kBAAkB,CAAC,EAAEH,aAAa,OAAO,CAAC;gBAC1C,eAAenB,UAAU3B,WAAW,QAAQ;gBAC5C8B,UAAUH,UAAU3B,WAAW,IAAImC;gBACnC,GAAGO,YAAY;YACjB,CAAA;IACF;AACF"}

package/lib/hooks/useMeasureElement.js

@@ -9,7 +9,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
  */ export function useMeasureElement() {
     const [width, setWidth] = React.useState(0);
     const container = React.useRef(undefined);
-    const { targetDocument  } = useFluent();
+    const { targetDocument } = useFluent();
     // the handler for resize observer
     const handleResize = React.useCallback(()=>{
         var _container_current;
@@ -40,7 +40,8 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
     ]);
     React.useEffect(()=>{
         return ()=>{
-            return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            var _resizeObserver;
+            return (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 ? void 0 : _resizeObserver.disconnect();
         };
     }, [
         resizeObserver

package/lib/hooks/useMeasureElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMeasureElement.ts"],"sourcesContent":["import { canUseDOM } from '@fluentui/react-utilities';\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  const [width, setWidth] = React.useState(0);\n  const container = React.useRef<HTMLElement | undefined>(undefined);\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  // Keep the reference of ResizeObserver in the state, as it should live through renders\n  const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);\n  const measureElementRef = React.useCallback(\n    (el: TElement | null) => {\n      if (!targetDocument || !resizeObserver) {\n        return;\n      }\n\n      // cleanup previous container\n      if (container.current) {\n        resizeObserver.unobserve(container.current);\n        container.current.remove();\n      }\n\n      if (el) {\n        container.current = targetDocument.createElement('div');\n        el.insertAdjacentElement('beforebegin', container.current);\n        resizeObserver.observe(container.current);\n        handleResize();\n      }\n    },\n    [targetDocument, resizeObserver, handleResize],\n  );\n\n  React.useEffect(() => {\n    return () => resizeObserver?.disconnect();\n  }, [resizeObserver]);\n\n  return { width, measureElementRef };\n}\n"],"names":["canUseDOM","React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","targetDocument","handleResize","useCallback","containerWidth","current","getBoundingClientRect","resizeObserver","ResizeObserver","measureElementRef","el","unobserve","remove","createElement","insertAdjacentElement","observe","useEffect","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,4BAA4B;AACtD,YAAYC,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,OAAO,SAASC,oBAAgE;IAC9E,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAAC;IACzC,MAAMC,YAAYP,MAAMQ,MAAM,CAA0BC;IAExD,MAAM,EAAEC,eAAc,EAAE,GAAGR;IAE3B,kCAAkC;IAClC,MAAMS,eAAeX,MAAMY,WAAW,CAAC,IAAM;YACpBL;QAAvB,MAAMM,iBAAiBN,CAAAA,qBAAAA,UAAUO,OAAO,cAAjBP,gCAAAA,KAAAA,IAAAA,mBAAmBQ,wBAAwBX,KAAK;QACvEC,SAASQ,kBAAkB;IAC7B,GAAG,EAAE;IAEL,uFAAuF;IACvF,MAAM,CAACG,eAAe,GAAGhB,MAAMM,QAAQ,CAACP,cAAc,IAAIkB,eAAeN,gBAAgBF,SAAS;IAClG,MAAMS,oBAAoBlB,MAAMY,WAAW,CACzC,CAACO,KAAwB;QACvB,IAAI,CAACT,kBAAkB,CAACM,gBAAgB;YACtC;QACF,CAAC;QAED,6BAA6B;QAC7B,IAAIT,UAAUO,OAAO,EAAE;YACrBE,eAAeI,SAAS,CAACb,UAAUO,OAAO;YAC1CP,UAAUO,OAAO,CAACO,MAAM;QAC1B,CAAC;QAED,IAAIF,IAAI;YACNZ,UAAUO,OAAO,GAAGJ,eAAeY,aAAa,CAAC;YACjDH,GAAGI,qBAAqB,CAAC,eAAehB,UAAUO,OAAO;YACzDE,eAAeQ,OAAO,CAACjB,UAAUO,OAAO;YACxCH;QACF,CAAC;IACH,GACA;QAACD;QAAgBM;QAAgBL;KAAa;IAGhDX,MAAMyB,SAAS,CAAC,IAAM;QACpB,OAAO;YAAMT,OAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBU,UAAU;;IACzC,GAAG;QAACV;KAAe;IAEnB,OAAO;QAAEZ;QAAOc;IAAkB;AACpC,CAAC"}
+{"version":3,"sources":["useMeasureElement.ts"],"sourcesContent":["import { canUseDOM } from '@fluentui/react-utilities';\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  const [width, setWidth] = React.useState(0);\n  const container = React.useRef<HTMLElement | undefined>(undefined);\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  // Keep the reference of ResizeObserver in the state, as it should live through renders\n  const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);\n  const measureElementRef = React.useCallback(\n    (el: TElement | null) => {\n      if (!targetDocument || !resizeObserver) {\n        return;\n      }\n\n      // cleanup previous container\n      if (container.current) {\n        resizeObserver.unobserve(container.current);\n        container.current.remove();\n      }\n\n      if (el) {\n        container.current = targetDocument.createElement('div');\n        el.insertAdjacentElement('beforebegin', container.current);\n        resizeObserver.observe(container.current);\n        handleResize();\n      }\n    },\n    [targetDocument, resizeObserver, handleResize],\n  );\n\n  React.useEffect(() => {\n    return () => resizeObserver?.disconnect();\n  }, [resizeObserver]);\n\n  return { width, measureElementRef };\n}\n"],"names":["canUseDOM","React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","targetDocument","handleResize","useCallback","containerWidth","current","getBoundingClientRect","resizeObserver","ResizeObserver","measureElementRef","el","unobserve","remove","createElement","insertAdjacentElement","observe","useEffect","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,4BAA4B;AACtD,YAAYC,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,OAAO,SAASC;IACd,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAAC;IACzC,MAAMC,YAAYP,MAAMQ,MAAM,CAA0BC;IAExD,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAE3B,kCAAkC;IAClC,MAAMS,eAAeX,MAAMY,WAAW,CAAC;YACdL;QAAvB,MAAMM,kBAAiBN,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBQ,qBAAqB,GAAGX,KAAK;QACvEC,SAASQ,kBAAkB;IAC7B,GAAG,EAAE;IAEL,uFAAuF;IACvF,MAAM,CAACG,eAAe,GAAGhB,MAAMM,QAAQ,CAACP,cAAc,IAAIkB,eAAeN,gBAAgBF;IACzF,MAAMS,oBAAoBlB,MAAMY,WAAW,CACzC,CAACO;QACC,IAAI,CAACT,kBAAkB,CAACM,gBAAgB;YACtC;QACF;QAEA,6BAA6B;QAC7B,IAAIT,UAAUO,OAAO,EAAE;YACrBE,eAAeI,SAAS,CAACb,UAAUO,OAAO;YAC1CP,UAAUO,OAAO,CAACO,MAAM;QAC1B;QAEA,IAAIF,IAAI;YACNZ,UAAUO,OAAO,GAAGJ,eAAeY,aAAa,CAAC;YACjDH,GAAGI,qBAAqB,CAAC,eAAehB,UAAUO,OAAO;YACzDE,eAAeQ,OAAO,CAACjB,UAAUO,OAAO;YACxCH;QACF;IACF,GACA;QAACD;QAAgBM;QAAgBL;KAAa;IAGhDX,MAAMyB,SAAS,CAAC;QACd,OAAO;gBAAMT;oBAAAA,kBAAAA,4BAAAA,sCAAAA,gBAAgBU,UAAU;;IACzC,GAAG;QAACV;KAAe;IAEnB,OAAO;QAAEZ;QAAOc;IAAkB;AACpC"}

package/lib/hooks/useTableColumnResizeMouseHandler.js

@@ -2,13 +2,14 @@ import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { getEventClientCoords, isMouseEvent, isTouchEvent } from '@fluentui/react-utilities';
 export function useTableColumnResizeMouseHandler(columnResizeState) {
+    var _targetDocument, _globalWin;
     const mouseX = React.useRef(0);
     const currentWidth = React.useRef(0);
     const colId = React.useRef(undefined);
-    const { targetDocument  } = useFluent();
-    const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    const { targetDocument } = useFluent();
+    const globalWin = (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.defaultView;
     const recalculatePosition = React.useCallback((e)=>{
-        const { clientX  } = getEventClientCoords(e);
+        const { clientX } = getEventClientCoords(e);
         const dx = clientX - mouseX.current;
         // Update the local width for the column and set it
         currentWidth.current += dx;
@@ -21,50 +22,53 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
         columnResizeState
     ]);
     const onDrag = React.useCallback((e)=>{
+        var _globalWin;
         // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs
-        if (typeof (globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame) === 'function') {
+        if (typeof ((_globalWin = globalWin) === null || _globalWin === void 0 ? void 0 : _globalWin.requestAnimationFrame) === 'function') {
             requestAnimationFrame(()=>recalculatePosition(e));
         } else {
             recalculatePosition(e);
         }
     }, [
-        globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame,
+        (_globalWin = globalWin) === null || _globalWin === void 0 ? void 0 : _globalWin.requestAnimationFrame,
         recalculatePosition
     ]);
     const onDragEnd = React.useCallback((event)=>{
         if (isMouseEvent(event)) {
-            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onDragEnd);
-            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onDrag);
+            var _targetDocument, _targetDocument1;
+            (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.removeEventListener('mouseup', onDragEnd);
+            (_targetDocument1 = targetDocument) === null || _targetDocument1 === void 0 ? void 0 : _targetDocument1.removeEventListener('mousemove', onDrag);
         }
         if (isTouchEvent(event)) {
-            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchend', onDragEnd);
-            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchmove', onDrag);
+            var _targetDocument2, _targetDocument3;
+            (_targetDocument2 = targetDocument) === null || _targetDocument2 === void 0 ? void 0 : _targetDocument2.removeEventListener('touchend', onDragEnd);
+            (_targetDocument3 = targetDocument) === null || _targetDocument3 === void 0 ? void 0 : _targetDocument3.removeEventListener('touchmove', onDrag);
         }
     }, [
         onDrag,
         targetDocument
     ]);
-    const getOnMouseDown = (columnId)=>{
-        return (event)=>{
+    const getOnMouseDown = (columnId)=>(event)=>{
             // Keep the width locally so that we decouple the calculation of the next with from rendering.
             // This makes the whole experience much faster and more precise
             currentWidth.current = columnResizeState.getColumnWidth(columnId);
             mouseX.current = getEventClientCoords(event).clientX;
             colId.current = columnId;
             if (isMouseEvent(event)) {
+                var _targetDocument, _targetDocument1;
                 // ignore other buttons than primary mouse button
                 if (event.target !== event.currentTarget || event.button !== 0) {
                     return;
                 }
-                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onDragEnd);
-                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onDrag);
+                (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.addEventListener('mouseup', onDragEnd);
+                (_targetDocument1 = targetDocument) === null || _targetDocument1 === void 0 ? void 0 : _targetDocument1.addEventListener('mousemove', onDrag);
             }
             if (isTouchEvent(event)) {
-                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);
-                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);
+                var _targetDocument2, _targetDocument3;
+                (_targetDocument2 = targetDocument) === null || _targetDocument2 === void 0 ? void 0 : _targetDocument2.addEventListener('touchend', onDragEnd);
+                (_targetDocument3 = targetDocument) === null || _targetDocument3 === void 0 ? void 0 : _targetDocument3.addEventListener('touchmove', onDrag);
             }
         };
-    };
     return {
         getOnMouseDown: (columnId)=>getOnMouseDown(columnId)
     };

package/lib/hooks/useTableColumnResizeMouseHandler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\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 && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => recalculatePosition(e));\n      } else {\n        recalculatePosition(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, 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    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = (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 = columnResizeState.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    }\n\n    if (isTouchEvent(event)) {\n      targetDocument?.addEventListener('touchend', onDragEnd);\n      targetDocument?.addEventListener('touchmove', onDrag);\n    }\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","targetDocument","globalWin","defaultView","recalculatePosition","useCallback","e","clientX","dx","current","setColumnWidth","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","getColumnWidth","target","currentTarget","button","addEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAGEC,oBAAoB,EACpBC,YAAY,EACZC,YAAY,QACP,4BAA4B;AAEnC,OAAO,SAASC,iCAAiCC,iBAAoC,EAAE;IACrF,MAAMC,SAASR,MAAMS,MAAM,CAAC;IAC5B,MAAMC,eAAeV,MAAMS,MAAM,CAAC;IAClC,MAAME,QAAQX,MAAMS,MAAM,CAA4BG;IAEtD,MAAM,EAAEC,eAAc,EAAE,GAAGX;IAC3B,MAAMY,YAAYD,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBE,WAAW;IAE7C,MAAMC,sBAAsBhB,MAAMiB,WAAW,CAC3C,CAACC,IAA+B;QAC9B,MAAM,EAAEC,QAAO,EAAE,GAAGhB,qBAAqBe;QACzC,MAAME,KAAKD,UAAUX,OAAOa,OAAO;QAEnC,mDAAmD;QACnDX,aAAaW,OAAO,IAAID;QACxBT,MAAMU,OAAO,IAAId,kBAAkBe,cAAc,CAACJ,GAAG;YAAEK,UAAUZ,MAAMU,OAAO;YAAEG,OAAOd,aAAaW,OAAO;QAAC;QAC5Gb,OAAOa,OAAO,GAAGF;IACnB,GACA;QAACZ;KAAkB;IAGrB,MAAMkB,SAASzB,MAAMiB,WAAW,CAC9B,CAACC,IAA+B;QAC9B,2FAA2F;QAC3F,IAAI,OAAOJ,CAAAA,sBAAAA,uBAAAA,KAAAA,IAAAA,UAAWY,qBAAqB,AAAD,MAAM,YAAY;YAC1DA,sBAAsB,IAAMV,oBAAoBE;QAClD,OAAO;YACLF,oBAAoBE;QACtB,CAAC;IACH,GACA;QAACJ,sBAAAA,uBAAAA,KAAAA,IAAAA,UAAWY,qBAAqB;QAAEV;KAAoB;IAGzD,MAAMW,YAAY3B,MAAMiB,WAAW,CACjC,CAACW,QAAmC;QAClC,IAAIxB,aAAawB,QAAQ;YACvBf,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBgB,mBAAmB,CAAC,WAAWF;YAC/Cd,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBgB,mBAAmB,CAAC,aAAaJ;QACnD,CAAC;QACD,IAAIpB,aAAauB,QAAQ;YACvBf,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBgB,mBAAmB,CAAC,YAAYF;YAChDd,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBgB,mBAAmB,CAAC,aAAaJ;QACnD,CAAC;IACH,GACA;QAACA;QAAQZ;KAAe;IAG1B,MAAMiB,iBAAiB,CAACP;QAA4B,OAAA,CAACK,QAAkC;YACrF,8FAA8F;YAC9F,+DAA+D;YAC/DlB,aAAaW,OAAO,GAAGd,kBAAkBwB,cAAc,CAACR;YACxDf,OAAOa,OAAO,GAAGlB,qBAAqByB,OAAOT,OAAO;YACpDR,MAAMU,OAAO,GAAGE;YAEhB,IAAInB,aAAawB,QAAQ;gBACvB,iDAAiD;gBACjD,IAAIA,MAAMI,MAAM,KAAKJ,MAAMK,aAAa,IAAIL,MAAMM,MAAM,KAAK,GAAG;oBAC9D;gBACF,CAAC;gBACDrB,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBsB,gBAAgB,CAAC,WAAWR;gBAC5Cd,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBsB,gBAAgB,CAAC,aAAaV;YAChD,CAAC;YAED,IAAIpB,aAAauB,QAAQ;gBACvBf,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBsB,gBAAgB,CAAC,YAAYR;gBAC7Cd,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBsB,gBAAgB,CAAC,aAAaV;YAChD,CAAC;QACH;;IAEA,OAAO;QACLK,gBAAgB,CAACP,WAA4BO,eAAeP;IAC9D;AACF,CAAC"}
+{"version":3,"sources":["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} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\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 && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => recalculatePosition(e));\n      } else {\n        recalculatePosition(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, 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    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = (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 = columnResizeState.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    }\n\n    if (isTouchEvent(event)) {\n      targetDocument?.addEventListener('touchend', onDragEnd);\n      targetDocument?.addEventListener('touchmove', onDrag);\n    }\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","targetDocument","globalWin","mouseX","useRef","currentWidth","colId","undefined","defaultView","recalculatePosition","useCallback","e","clientX","dx","current","setColumnWidth","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","getColumnWidth","target","currentTarget","button","addEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAGEC,oBAAoB,EACpBC,YAAY,EACZC,YAAY,QACP,4BAA4B;AAEnC,OAAO,SAASC,iCAAiCC,iBAAoC;QAMjEC,iBAwBfC;IA7BH,MAAMC,SAASV,MAAMW,MAAM,CAAC;IAC5B,MAAMC,eAAeZ,MAAMW,MAAM,CAAC;IAClC,MAAME,QAAQb,MAAMW,MAAM,CAA4BG;IAEtD,MAAM,EAAEN,cAAc,EAAE,GAAGN;IAC3B,MAAMO,aAAYD,kBAAAA,4BAAAA,sCAAAA,gBAAgBO,WAAW;IAE7C,MAAMC,sBAAsBhB,MAAMiB,WAAW,CAC3C,CAACC;QACC,MAAM,EAAEC,OAAO,EAAE,GAAGhB,qBAAqBe;QACzC,MAAME,KAAKD,UAAUT,OAAOW,OAAO;QAEnC,mDAAmD;QACnDT,aAAaS,OAAO,IAAID;QACxBP,MAAMQ,OAAO,IAAId,kBAAkBe,cAAc,CAACJ,GAAG;YAAEK,UAAUV,MAAMQ,OAAO;YAAEG,OAAOZ,aAAaS,OAAO;QAAC;QAC5GX,OAAOW,OAAO,GAAGF;IACnB,GACA;QAACZ;KAAkB;IAGrB,MAAMkB,SAASzB,MAAMiB,WAAW,CAC9B,CAACC;YAEYT;QADX,2FAA2F;QAC3F,IAAI,SAAOA,aAAAA,uBAAAA,iCAAAA,WAAWiB,qBAAqB,MAAK,YAAY;YAC1DA,sBAAsB,IAAMV,oBAAoBE;QAClD,OAAO;YACLF,oBAAoBE;QACtB;IACF,GACA;SAACT,aAAAA,uBAAAA,iCAAAA,WAAWiB,qBAAqB;QAAEV;KAAoB;IAGzD,MAAMW,YAAY3B,MAAMiB,WAAW,CACjC,CAACW;QACC,IAAIxB,aAAawB,QAAQ;gBACvBpB,iBACAA;aADAA,kBAAAA,4BAAAA,sCAAAA,gBAAgBqB,mBAAmB,CAAC,WAAWF;aAC/CnB,mBAAAA,4BAAAA,uCAAAA,iBAAgBqB,mBAAmB,CAAC,aAAaJ;QACnD;QACA,IAAIpB,aAAauB,QAAQ;gBACvBpB,kBACAA;aADAA,mBAAAA,4BAAAA,uCAAAA,iBAAgBqB,mBAAmB,CAAC,YAAYF;aAChDnB,mBAAAA,4BAAAA,uCAAAA,iBAAgBqB,mBAAmB,CAAC,aAAaJ;QACnD;IACF,GACA;QAACA;QAAQjB;KAAe;IAG1B,MAAMsB,iBAAiB,CAACP,WAA4B,CAACK;YACnD,8FAA8F;YAC9F,+DAA+D;YAC/DhB,aAAaS,OAAO,GAAGd,kBAAkBwB,cAAc,CAACR;YACxDb,OAAOW,OAAO,GAAGlB,qBAAqByB,OAAOT,OAAO;YACpDN,MAAMQ,OAAO,GAAGE;YAEhB,IAAInB,aAAawB,QAAQ;oBAKvBpB,iBACAA;gBALA,iDAAiD;gBACjD,IAAIoB,MAAMI,MAAM,KAAKJ,MAAMK,aAAa,IAAIL,MAAMM,MAAM,KAAK,GAAG;oBAC9D;gBACF;iBACA1B,kBAAAA,4BAAAA,sCAAAA,gBAAgB2B,gBAAgB,CAAC,WAAWR;iBAC5CnB,mBAAAA,4BAAAA,uCAAAA,iBAAgB2B,gBAAgB,CAAC,aAAaV;YAChD;YAEA,IAAIpB,aAAauB,QAAQ;oBACvBpB,kBACAA;iBADAA,mBAAAA,4BAAAA,uCAAAA,iBAAgB2B,gBAAgB,CAAC,YAAYR;iBAC7CnB,mBAAAA,4BAAAA,uCAAAA,iBAAgB2B,gBAAgB,CAAC,aAAaV;YAChD;QACF;IAEA,OAAO;QACLK,gBAAgB,CAACP,WAA4BO,eAAeP;IAC9D;AACF"}

package/lib/hooks/useTableColumnResizeState.js

@@ -24,8 +24,8 @@ const createReducer = ()=>(state, action)=>{
                     columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth)
                 };
             case 'SET_COLUMN_WIDTH':
-                const { columnId , width  } = action;
-                const { containerWidth  } = state;
+                const { columnId, width } = action;
+                const { containerWidth } = state;
                 const column = getColumnById(state.columnWidthState, columnId);
                 let newColumnWidthState = [
                     ...state.columnWidthState
@@ -46,7 +46,7 @@ const createReducer = ()=>(state, action)=>{
         }
     };
 export function useTableColumnResizeState(columns, containerWidth, params = {}) {
-    const { onColumnResize , columnSizingOptions  } = params;
+    const { onColumnResize, columnSizingOptions } = params;
     const reducer = React.useMemo(()=>createReducer(), []);
     const [state, dispatch] = React.useReducer(reducer, {
         columns,
@@ -79,8 +79,8 @@ export function useTableColumnResizeState(columns, containerWidth, params = {})
         columnSizingOptions
     ]);
     const setColumnWidth = useEventCallback((event, data)=>{
-        let { width  } = data;
-        const { columnId  } = data;
+        let { width } = data;
+        const { columnId } = data;
         const col = getColumnById(state.columnWidthState, columnId);
         if (!col) {
             return;

package/lib/hooks/useTableColumnResizeState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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>() =>\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: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\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: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\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: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\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        newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\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 } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\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: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","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","colId","getColumns"],"mappings":"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"}
+{"version":3,"sources":["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>() =>\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: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\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: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\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: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\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        newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\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 } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\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: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","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","colId","getColumns"],"mappings":"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"}