@fluentui/react-table 9.19.13 → 9.19.15

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableResizeHandle/useTableResizeHandle.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, 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      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","useTableResizeHandle_unstable","props","ref","onClick","event","stopPropagation","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAG7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAMC,UAAUL,iBAAiB,CAACM;YAChCH;SAAAA,iBAAAA,MAAME,OAAO,cAAbF,qCAAAA,oBAAAA,OAAgBG;QAChBA,MAAMC,eAAe;IACvB;IACA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfX,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACL,GAAGD,KAAK;YACRE;QACF,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TableResizeHandle/useTableResizeHandle.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, 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      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","useEventCallback","slot","useTableResizeHandle_unstable","props","ref","onClick","event","stopPropagation","components","root","always","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAG7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAMC,UAAUL,iBAAiB,CAACM;YAChCH;SAAAA,iBAAAA,MAAME,OAAO,cAAbF,qCAAAA,oBAAAA,OAAgBG;QAChBA,MAAMC,eAAe;IACvB;IACA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfX,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACL,GAAGD,KAAK;YACRE;QACF,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableRow/TableRow.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableRowSlots = {\n  root: Slot<'tr', 'div'>;\n};\n\n/**\n * TableRow Props\n */\nexport type TableRowProps = ComponentProps<TableRowSlots> & {\n  /**\n   * A table row can have different variants. These appearances are\n   * intended to be used with selection.\n   * @default none\n   */\n  appearance?: 'brand' | 'neutral' | 'none';\n};\n\n/**\n * State used in rendering TableRow\n */\nexport type TableRowState = ComponentState<TableRowSlots> &\n  Pick<TableContextValue, 'noNativeElements' | 'size'> &\n  Pick<Required<TableRowProps>, 'appearance'> & {\n    isHeaderRow: boolean;\n  };\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAII"}
+{"version":3,"sources":["../src/components/TableRow/TableRow.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { TableContextValue } from '../Table/Table.types';\n\nexport type TableRowSlots = {\n  root: Slot<'tr', 'div'>;\n};\n\n/**\n * TableRow Props\n */\nexport type TableRowProps = ComponentProps<TableRowSlots> & {\n  /**\n   * A table row can have different variants. These appearances are\n   * intended to be used with selection.\n   * @default none\n   */\n  appearance?: 'brand' | 'neutral' | 'none';\n};\n\n/**\n * State used in rendering TableRow\n */\nexport type TableRowState = ComponentState<TableRowSlots> &\n  Pick<TableContextValue, 'noNativeElements' | 'size'> &\n  Pick<Required<TableRowProps>, 'appearance'> & {\n    isHeaderRow: boolean;\n  };\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAII"}

package/lib/components/TableRow/useTableRow.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';
 import { useTableContext } from '../../contexts/tableContext';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableRow/useTableRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n  const focusWithinRef = useFocusWithin();\n  const isHeaderRow = useIsInTableHeader();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef) as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'row' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n    isHeaderRow,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusVisible","useFocusWithin","useTableContext","useIsInTableHeader","useTableRow_unstable","props","ref","noNativeElements","size","rootComponent","as","focusVisibleRef","focusWithinRef","isHeaderRow","components","root","always","role","undefined","elementType","appearance"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,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;QAmBNE;IAjBd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMhB,KAAKiB,MAAM,CACfnB,yBAAyBY,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FH,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"}
+{"version":3,"sources":["../src/components/TableRow/useTableRow.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n  const focusWithinRef = useFocusWithin();\n  const isHeaderRow = useIsInTableHeader();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef) as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'row' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n    isHeaderRow,\n  };\n};\n"],"names":["getIntrinsicElementProps","useMergedRefs","slot","useFocusVisible","useFocusWithin","useTableContext","useIsInTableHeader","useTableRow_unstable","props","ref","noNativeElements","size","rootComponent","as","focusVisibleRef","focusWithinRef","isHeaderRow","components","root","always","role","undefined","elementType","appearance"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,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;QAmBNE;IAjBd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMhB,KAAKiB,MAAM,CACfnB,yBAAyBY,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FH,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.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableSelectionCell/TableSelectionCell.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport type { Radio } from '@fluentui/react-radio';\nimport { TableCellSlots } from '../TableCell/TableCell.types';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableSelectionCellSlots = {\n  /**\n   * Selection indicator if selection type is checkbox\n   */\n  checkboxIndicator: Slot<typeof Checkbox>;\n  /**\n   * Selection indicator if selection type is radio\n   */\n  radioIndicator: Slot<typeof Radio>;\n} & Pick<TableCellSlots, 'root'>;\n\n/**\n * TableSelectionCell Props\n */\nexport type TableSelectionCellProps = ComponentProps<Partial<TableSelectionCellSlots>> & {\n  /**\n   * A table can have two kinds of selection modes.\n   * @default checkbox\n   */\n  type?: 'checkbox' | 'radio';\n\n  /**\n   * @default false\n   */\n  checked?: CheckboxProps['checked'];\n\n  /**\n   * Only visible when checked or the parent row is hovered/focused\n   * @default false\n   */\n  subtle?: boolean;\n\n  /**\n   * Completely hides the selection cell\n   * @deprecated cells should never use hidden, since doing so breaks table structure and screen reader navigation. Use `invisible` instead.\n   */\n  hidden?: boolean;\n\n  /**\n   * Hides the selection cell visually but takes up the same space\n   * @default false\n   */\n  invisible?: boolean;\n};\n\n/**\n * State used in rendering TableSelectionCell\n */\nexport type TableSelectionCellState = ComponentState<TableSelectionCellSlots> &\n  Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle'> &\n  Pick<TableContextValue, 'noNativeElements'> & {\n    /* Visually hides the selection cell; not deprecated on state */\n    hidden: boolean;\n  };\n"],"names":[],"mappings":"AAmDA;;CAEC,GACD,WAKI"}
+{"version":3,"sources":["../src/components/TableSelectionCell/TableSelectionCell.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport type { Radio } from '@fluentui/react-radio';\nimport type { TableCellSlots } from '../TableCell/TableCell.types';\nimport type { TableContextValue } from '../Table/Table.types';\n\nexport type TableSelectionCellSlots = {\n  /**\n   * Selection indicator if selection type is checkbox\n   */\n  checkboxIndicator: Slot<typeof Checkbox>;\n  /**\n   * Selection indicator if selection type is radio\n   */\n  radioIndicator: Slot<typeof Radio>;\n} & Pick<TableCellSlots, 'root'>;\n\n/**\n * TableSelectionCell Props\n */\nexport type TableSelectionCellProps = ComponentProps<Partial<TableSelectionCellSlots>> & {\n  /**\n   * A table can have two kinds of selection modes.\n   * @default checkbox\n   */\n  type?: 'checkbox' | 'radio';\n\n  /**\n   * @default false\n   */\n  checked?: CheckboxProps['checked'];\n\n  /**\n   * Only visible when checked or the parent row is hovered/focused\n   * @default false\n   */\n  subtle?: boolean;\n\n  /**\n   * Completely hides the selection cell\n   * @deprecated cells should never use hidden, since doing so breaks table structure and screen reader navigation. Use `invisible` instead.\n   */\n  hidden?: boolean;\n\n  /**\n   * Hides the selection cell visually but takes up the same space\n   * @default false\n   */\n  invisible?: boolean;\n};\n\n/**\n * State used in rendering TableSelectionCell\n */\nexport type TableSelectionCellState = ComponentState<TableSelectionCellSlots> &\n  Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle'> &\n  Pick<TableContextValue, 'noNativeElements'> & {\n    /* Visually hides the selection cell; not deprecated on state */\n    hidden: boolean;\n  };\n"],"names":[],"mappings":"AAmDA;;CAEC,GACD,WAKI"}

package/lib/components/TableSelectionCell/useTableSelectionCell.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { useId, slot, useMergedRefs } from '@fluentui/react-utilities';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { Radio } from '@fluentui/react-radio';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableSelectionCell/useTableSelectionCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, useMergedRefs(ref, useFocusWithin()));\n  const { noNativeElements } = useTableContext();\n  const {\n    type = 'checkbox',\n    checked = false,\n    subtle = false,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    hidden = false,\n    invisible = false,\n  } = props;\n\n  return {\n    ...tableCellState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: Radio,\n    },\n    checkboxIndicator: slot.optional(props.checkboxIndicator, {\n      renderByDefault: type === 'checkbox',\n      defaultProps: { checked: props.checked },\n      elementType: Checkbox,\n    }),\n    radioIndicator: slot.optional(props.radioIndicator, {\n      renderByDefault: type === 'radio' && !invisible,\n      defaultProps: { checked: !!checked, input: { name: useId('table-selection-radio') } },\n      elementType: Radio,\n    }),\n    type,\n    checked,\n    noNativeElements,\n    subtle,\n    hidden: invisible || hidden,\n  };\n};\n"],"names":["React","useId","slot","useMergedRefs","Checkbox","Radio","useTableCell_unstable","useTableContext","useFocusWithin","useTableSelectionCell_unstable","props","ref","tableCellState","noNativeElements","type","checked","subtle","hidden","invisible","components","checkboxIndicator","radioIndicator","optional","renderByDefault","defaultProps","elementType","input","name"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AACvE,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,cAAc,QAAQ,0BAA0B;AAEzD;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,iBAAiBN,sBAAsBI,OAAOP,cAAcQ,KAAKH;IACvE,MAAM,EAAEK,gBAAgB,EAAE,GAAGN;IAC7B,MAAM,EACJO,OAAO,UAAU,EACjBC,UAAU,KAAK,EACfC,SAAS,KAAK,EACd,4DAA4D;IAC5DC,SAAS,KAAK,EACdC,YAAY,KAAK,EAClB,GAAGR;IAEJ,OAAO;QACL,GAAGE,cAAc;QACjBO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,eAAeO,UAAU;YAC5BC,mBAAmBhB;YACnBiB,gBAAgBhB;QAClB;QACAe,mBAAmBlB,KAAKoB,QAAQ,CAACZ,MAAMU,iBAAiB,EAAE;YACxDG,iBAAiBT,SAAS;YAC1BU,cAAc;gBAAET,SAASL,MAAMK,OAAO;YAAC;YACvCU,aAAarB;QACf;QACAiB,gBAAgBnB,KAAKoB,QAAQ,CAACZ,MAAMW,cAAc,EAAE;YAClDE,iBAAiBT,SAAS,WAAW,CAACI;YACtCM,cAAc;gBAAET,SAAS,CAAC,CAACA;gBAASW,OAAO;oBAAEC,MAAM1B,MAAM;gBAAyB;YAAE;YACpFwB,aAAapB;QACf;QACAS;QACAC;QACAF;QACAG;QACAC,QAAQC,aAAaD;IACvB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TableSelectionCell/useTableSelectionCell.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useId, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, useMergedRefs(ref, useFocusWithin()));\n  const { noNativeElements } = useTableContext();\n  const {\n    type = 'checkbox',\n    checked = false,\n    subtle = false,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    hidden = false,\n    invisible = false,\n  } = props;\n\n  return {\n    ...tableCellState,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: Radio,\n    },\n    checkboxIndicator: slot.optional(props.checkboxIndicator, {\n      renderByDefault: type === 'checkbox',\n      defaultProps: { checked: props.checked },\n      elementType: Checkbox,\n    }),\n    radioIndicator: slot.optional(props.radioIndicator, {\n      renderByDefault: type === 'radio' && !invisible,\n      defaultProps: { checked: !!checked, input: { name: useId('table-selection-radio') } },\n      elementType: Radio,\n    }),\n    type,\n    checked,\n    noNativeElements,\n    subtle,\n    hidden: invisible || hidden,\n  };\n};\n"],"names":["useId","slot","useMergedRefs","Checkbox","Radio","useTableCell_unstable","useTableContext","useFocusWithin","useTableSelectionCell_unstable","props","ref","tableCellState","noNativeElements","type","checked","subtle","hidden","invisible","components","checkboxIndicator","radioIndicator","optional","renderByDefault","defaultProps","elementType","input","name"],"mappings":"AAAA;AAGA,SAASA,KAAK,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AACvE,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,cAAc,QAAQ,0BAA0B;AAEzD;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,iBAAiBN,sBAAsBI,OAAOP,cAAcQ,KAAKH;IACvE,MAAM,EAAEK,gBAAgB,EAAE,GAAGN;IAC7B,MAAM,EACJO,OAAO,UAAU,EACjBC,UAAU,KAAK,EACfC,SAAS,KAAK,EACd,4DAA4D;IAC5DC,SAAS,KAAK,EACdC,YAAY,KAAK,EAClB,GAAGR;IAEJ,OAAO;QACL,GAAGE,cAAc;QACjBO,YAAY;YACV,4DAA4D;YAC5D,GAAGP,eAAeO,UAAU;YAC5BC,mBAAmBhB;YACnBiB,gBAAgBhB;QAClB;QACAe,mBAAmBlB,KAAKoB,QAAQ,CAACZ,MAAMU,iBAAiB,EAAE;YACxDG,iBAAiBT,SAAS;YAC1BU,cAAc;gBAAET,SAASL,MAAMK,OAAO;YAAC;YACvCU,aAAarB;QACf;QACAiB,gBAAgBnB,KAAKoB,QAAQ,CAACZ,MAAMW,cAAc,EAAE;YAClDE,iBAAiBT,SAAS,WAAW,CAACI;YACtCM,cAAc;gBAAET,SAAS,CAAC,CAACA;gBAASW,OAAO;oBAAEC,MAAM1B,MAAM;gBAAyB;YAAE;YACpFwB,aAAapB;QACf;QACAS;QACAC;QACAF;QACAG;QACAC,QAAQC,aAAaD;IACvB;AACF,EAAE"}

package/lib/contexts/dataGridContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/dataGridContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nexport const dataGridContextDefaultValue: DataGridContextValue = {\n  ...defaultTableState,\n  subtleSelection: false,\n  selectableRows: false,\n  selectionAppearance: 'brand',\n  focusMode: 'none',\n  compositeRowTabsterAttribute: {} as TabsterDOMAttribute,\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>): T =>\n  useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","compositeRowTabsterAttribute","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,SAASC,iBAAiB,QAAQ,WAAW;AAE7C,MAAMC,kBAAkBH,cAAgDI;AAExE,OAAO,MAAMC,8BAAoD;IAC/D,GAAGH,iBAAiB;IACpBI,iBAAiB;IACjBC,gBAAgB;IAChBC,qBAAqB;IACrBC,WAAW;IACXC,8BAA8B,CAAC;AACjC,EAAE;AAEF,OAAO,MAAMC,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B,CAAIC,WAC7Cb,mBAAmBE,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}
+{"version":3,"sources":["../src/contexts/dataGridContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport type { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport type { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nexport const dataGridContextDefaultValue: DataGridContextValue = {\n  ...defaultTableState,\n  subtleSelection: false,\n  selectableRows: false,\n  selectionAppearance: 'brand',\n  focusMode: 'none',\n  compositeRowTabsterAttribute: {} as TabsterDOMAttribute,\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>): T =>\n  useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","compositeRowTabsterAttribute","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,SAASC,iBAAiB,QAAQ,WAAW;AAE7C,MAAMC,kBAAkBH,cAAgDI;AAExE,OAAO,MAAMC,8BAAoD;IAC/D,GAAGH,iBAAiB;IACpBI,iBAAiB;IACjBC,gBAAgB;IAChBC,qBAAqB;IACrBC,WAAW;IACXC,8BAA8B,CAAC;AACjC,EAAE;AAEF,OAAO,MAAMC,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B,CAAIC,WAC7Cb,mBAAmBE,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}

package/lib/contexts/tableContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/tableContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TableContextValue } from '../components/Table/Table.types';\n\nconst tableContext = React.createContext<TableContextValue | undefined>(undefined);\n\nexport const tableContextDefaultValue: TableContextValue = {\n  size: 'medium',\n  noNativeElements: false,\n  sortable: false,\n};\n\nexport const TableContextProvider = tableContext.Provider;\nexport const useTableContext = (): TableContextValue => React.useContext(tableContext) ?? tableContextDefaultValue;\n"],"names":["React","tableContext","createContext","undefined","tableContextDefaultValue","size","noNativeElements","sortable","TableContextProvider","Provider","useTableContext","useContext"],"mappings":"AAAA;AAEA,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;AAC1D,OAAO,MAAMC,kBAAkB;QAAyBV;WAAAA,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,2BAAjBD,+BAAAA,oBAAkCI;EAAyB"}
+{"version":3,"sources":["../src/contexts/tableContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TableContextValue } from '../components/Table/Table.types';\n\nconst tableContext = React.createContext<TableContextValue | undefined>(undefined);\n\nexport const tableContextDefaultValue: TableContextValue = {\n  size: 'medium',\n  noNativeElements: false,\n  sortable: false,\n};\n\nexport const TableContextProvider = tableContext.Provider;\nexport const useTableContext = (): TableContextValue => React.useContext(tableContext) ?? tableContextDefaultValue;\n"],"names":["React","tableContext","createContext","undefined","tableContextDefaultValue","size","noNativeElements","sortable","TableContextProvider","Provider","useTableContext","useContext"],"mappings":"AAAA;AAEA,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;AAC1D,OAAO,MAAMC,kBAAkB;QAAyBV;WAAAA,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,2BAAjBD,+BAAAA,oBAAkCI;EAAyB"}

package/lib/hooks/createColumn.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 const defaultCompare = ()=>0;
 const defaultRenderCell = ()=>{
     if (process.env.NODE_ENV !== 'production') {

package/lib/hooks/createColumn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/createColumn.ts"],"sourcesContent":["import * as React from 'react';\nimport { CreateTableColumnOptions, TableColumnId } from './types';\n\nconst defaultCompare = () => 0;\n\nconst defaultRenderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderCell function that renders null');\n  }\n\n  return null;\n};\n\nconst defaultRenderHeaderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderHeaderCell function that renders null');\n  }\n\n  return null;\n};\n\n/**\n * Helper function to create column definition with defaults\n * @param options - column definition options\n * @returns - column definition with defaults\n */\nexport function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>): {\n  columnId: TableColumnId;\n  renderCell: (item: TItem) => React.ReactNode;\n  renderHeaderCell: (data?: unknown) => React.ReactNode;\n  compare: (a: TItem, b: TItem) => number;\n} {\n  const {\n    columnId,\n    renderCell = defaultRenderCell,\n    renderHeaderCell = defaultRenderHeaderCell,\n    compare = defaultCompare,\n  } = options;\n\n  return {\n    columnId,\n    renderCell,\n    renderHeaderCell,\n    compare,\n  };\n}\n"],"names":["React","defaultCompare","defaultRenderCell","process","env","NODE_ENV","console","warn","defaultRenderHeaderCell","createTableColumn","options","columnId","renderCell","renderHeaderCell","compare"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,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;IAM/E,MAAM,EACJC,QAAQ,EACRC,aAAaV,iBAAiB,EAC9BW,mBAAmBL,uBAAuB,EAC1CM,UAAUb,cAAc,EACzB,GAAGS;IAEJ,OAAO;QACLC;QACAC;QACAC;QACAC;IACF;AACF"}
+{"version":3,"sources":["../src/hooks/createColumn.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { CreateTableColumnOptions, TableColumnId } from './types';\n\nconst defaultCompare = () => 0;\n\nconst defaultRenderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderCell function that renders null');\n  }\n\n  return null;\n};\n\nconst defaultRenderHeaderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderHeaderCell function that renders null');\n  }\n\n  return null;\n};\n\n/**\n * Helper function to create column definition with defaults\n * @param options - column definition options\n * @returns - column definition with defaults\n */\nexport function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>): {\n  columnId: TableColumnId;\n  renderCell: (item: TItem) => React.ReactNode;\n  renderHeaderCell: (data?: unknown) => React.ReactNode;\n  compare: (a: TItem, b: TItem) => number;\n} {\n  const {\n    columnId,\n    renderCell = defaultRenderCell,\n    renderHeaderCell = defaultRenderHeaderCell,\n    compare = defaultCompare,\n  } = options;\n\n  return {\n    columnId,\n    renderCell,\n    renderHeaderCell,\n    compare,\n  };\n}\n"],"names":["defaultCompare","defaultRenderCell","process","env","NODE_ENV","console","warn","defaultRenderHeaderCell","createTableColumn","options","columnId","renderCell","renderHeaderCell","compare"],"mappings":"AAGA,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;IAM/E,MAAM,EACJC,QAAQ,EACRC,aAAaV,iBAAiB,EAC9BW,mBAAmBL,uBAAuB,EAC1CM,UAAUb,cAAc,EACzB,GAAGS;IAEJ,OAAO;QACLC;QACAC;QACAC;QACAC;IACF;AACF"}

package/lib/hooks/types.js

@@ -1 +1 @@
-import * as React from 'react';
+export { };

package/lib/hooks/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SortDirection, TableProps } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\nimport { SelectionMode } from '@fluentui/react-utilities';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\n\nexport interface SortState {\n  sortColumn: TableColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n  columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n  columnId: TableColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: (data?: unknown) => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n  row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: TableColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<TableRowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: TableRowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: TableColumnDefinition<TItem>[];\n  /**\n   * State and actions to manage column resizing\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: TableColumnSizingState;\n  /**\n   * A React.Ref object to be set as a ref for the table.\n   * Used with column resizing.\n   */\n  tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n  columns: TableColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n  columnId: TableColumnId;\n  width: number;\n  minWidth: number;\n  idealWidth: number;\n  padding: number;\n}\n\nexport type ColumnSizingTableProps = TableProps;\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;\n\nexport interface TableColumnSizingState {\n  getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;\n  setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n  getColumnWidths: () => ColumnWidthState[];\n  getTableProps: (props?: TableProps) => ColumnSizingTableProps;\n  getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n  getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n  enableKeyboardMode: (\n    columnId: TableColumnId,\n    onChange?: EnableKeyboardModeOnChangeCallback,\n  ) => (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => void;\n  getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n  getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n  TableColumnId,\n  Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & {\n    defaultWidth?: number;\n    autoFitColumns?: boolean;\n  }\n>;\n\nexport type UseTableColumnSizingParams = {\n  columnSizingOptions?: TableColumnSizingOptions;\n  onColumnResize?: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => void;\n  containerWidthOffset?: number;\n  autoFitColumns?: boolean;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/hooks/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { SortDirection, TableProps } from '../components/Table/Table.types';\nimport type { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\nimport type { SelectionMode } from '@fluentui/react-utilities';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\n\nexport interface SortState {\n  sortColumn: TableColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n  columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n  columnId: TableColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: (data?: unknown) => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n  row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: TableColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<TableRowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: TableRowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: TableColumnDefinition<TItem>[];\n  /**\n   * State and actions to manage column resizing\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: TableColumnSizingState;\n  /**\n   * A React.Ref object to be set as a ref for the table.\n   * Used with column resizing.\n   */\n  tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n  columns: TableColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n  columnId: TableColumnId;\n  width: number;\n  minWidth: number;\n  idealWidth: number;\n  padding: number;\n}\n\nexport type ColumnSizingTableProps = TableProps;\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;\n\nexport interface TableColumnSizingState {\n  getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;\n  setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n  getColumnWidths: () => ColumnWidthState[];\n  getTableProps: (props?: TableProps) => ColumnSizingTableProps;\n  getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n  getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n  enableKeyboardMode: (\n    columnId: TableColumnId,\n    onChange?: EnableKeyboardModeOnChangeCallback,\n  ) => (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => void;\n  getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n  getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n  TableColumnId,\n  Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & {\n    defaultWidth?: number;\n    autoFitColumns?: boolean;\n  }\n>;\n\nexport type UseTableColumnSizingParams = {\n  columnSizingOptions?: TableColumnSizingOptions;\n  onColumnResize?: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => void;\n  containerWidthOffset?: number;\n  autoFitColumns?: boolean;\n};\n"],"names":[],"mappings":"AAuNA,WAQE"}

package/lib/hooks/useKeyboardResizing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useKeyboardResizing.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState): {\n  toggleInteractiveMode: (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => void;\n  columnId: TableColumnId | undefined;\n  getKeyboardResizingProps: (\n    colId: TableColumnId,\n    currentWidth: number,\n  ) => {\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    onBlur: () => void;\n    ref: React.RefObject<HTMLDivElement>;\n    role: string;\n    'aria-label': string;\n    'aria-valuetext': string;\n    'aria-hidden': boolean;\n    tabIndex?: number;\n  };\n} {\n  const [columnId, setColumnId] = React.useState<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>(undefined);\n  const { findPrevFocusable } = useFocusFinders();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement | null>>());\n\n  const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n    if (!columnId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(columnId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n        resizeHandleRefs.get(columnId)?.current?.blur();\n        break;\n    }\n  });\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      setColumnId(colId);\n      onChangeRef.current?.(colId, true);\n\n      const handle = resizeHandleRefs.get(colId)?.current;\n      if (handle) {\n        handle.setAttribute('tabindex', '-1');\n        handle.tabIndex = -1;\n        handle.focus();\n      }\n    },\n    [resizeHandleRefs],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (!columnId) {\n      return;\n    }\n    // Notify the onChange listener that we are disabling interactive mode.\n    onChangeRef.current?.(columnId, false);\n    // Find the previous focusable element (table header button) and focus it.\n    const el = resizeHandleRefs.get(columnId)?.current;\n    if (el) {\n      findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n      el.removeAttribute('tabindex');\n    }\n\n    setColumnId(undefined);\n  }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId !== colId) {\n      enableInteractiveMode(colId);\n      setColumnId(colId);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  const getKeyboardResizingRef = React.useCallback(\n    (colId: TableColumnId) => {\n      const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n      resizeHandleRefs.set(colId, ref);\n      return ref;\n    },\n    [resizeHandleRefs],\n  );\n\n  // This makes sure the left and right arrow keys are ignored in tabster,\n  // so that they can be used for resizing.\n  const tabsterAttrs = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: {\n        ArrowLeft: true,\n        ArrowRight: true,\n      },\n    },\n  });\n\n  return {\n    toggleInteractiveMode,\n    columnId,\n    getKeyboardResizingProps: React.useCallback(\n      (colId: TableColumnId, currentWidth: number) => ({\n        onKeyDown: keyboardHandler,\n        onBlur: disableInteractiveMode,\n        ref: getKeyboardResizingRef(colId) as React.RefObject<HTMLDivElement>,\n        role: 'separator',\n        'aria-label': 'Resize column',\n        'aria-valuetext': `${currentWidth} pixels`,\n        'aria-hidden': colId === columnId ? false : true,\n        tabIndex: colId === columnId ? 0 : undefined,\n        ...tabsterAttrs,\n      }),\n      [columnId, disableInteractiveMode, getKeyboardResizingRef, keyboardHandler, tabsterAttrs],\n    ),\n  };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","undefined","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useKeyboardResizing.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport type { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState): {\n  toggleInteractiveMode: (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => void;\n  columnId: TableColumnId | undefined;\n  getKeyboardResizingProps: (\n    colId: TableColumnId,\n    currentWidth: number,\n  ) => {\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    onBlur: () => void;\n    ref: React.RefObject<HTMLDivElement>;\n    role: string;\n    'aria-label': string;\n    'aria-valuetext': string;\n    'aria-hidden': boolean;\n    tabIndex?: number;\n  };\n} {\n  const [columnId, setColumnId] = React.useState<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>(undefined);\n  const { findPrevFocusable } = useFocusFinders();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement | null>>());\n\n  const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n    if (!columnId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(columnId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n        resizeHandleRefs.get(columnId)?.current?.blur();\n        break;\n    }\n  });\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      setColumnId(colId);\n      onChangeRef.current?.(colId, true);\n\n      const handle = resizeHandleRefs.get(colId)?.current;\n      if (handle) {\n        handle.setAttribute('tabindex', '-1');\n        handle.tabIndex = -1;\n        handle.focus();\n      }\n    },\n    [resizeHandleRefs],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (!columnId) {\n      return;\n    }\n    // Notify the onChange listener that we are disabling interactive mode.\n    onChangeRef.current?.(columnId, false);\n    // Find the previous focusable element (table header button) and focus it.\n    const el = resizeHandleRefs.get(columnId)?.current;\n    if (el) {\n      findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n      el.removeAttribute('tabindex');\n    }\n\n    setColumnId(undefined);\n  }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId !== colId) {\n      enableInteractiveMode(colId);\n      setColumnId(colId);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  const getKeyboardResizingRef = React.useCallback(\n    (colId: TableColumnId) => {\n      const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n      resizeHandleRefs.set(colId, ref);\n      return ref;\n    },\n    [resizeHandleRefs],\n  );\n\n  // This makes sure the left and right arrow keys are ignored in tabster,\n  // so that they can be used for resizing.\n  const tabsterAttrs = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: {\n        ArrowLeft: true,\n        ArrowRight: true,\n      },\n    },\n  });\n\n  return {\n    toggleInteractiveMode,\n    columnId,\n    getKeyboardResizingProps: React.useCallback(\n      (colId: TableColumnId, currentWidth: number) => ({\n        onKeyDown: keyboardHandler,\n        onBlur: disableInteractiveMode,\n        ref: getKeyboardResizingRef(colId) as React.RefObject<HTMLDivElement>,\n        role: 'separator',\n        'aria-label': 'Resize column',\n        'aria-valuetext': `${currentWidth} pixels`,\n        'aria-hidden': colId === columnId ? false : true,\n        tabIndex: colId === columnId ? 0 : undefined,\n        ...tabsterAttrs,\n      }),\n      [columnId, disableInteractiveMode, getKeyboardResizingRef, keyboardHandler, tabsterAttrs],\n    ),\n  };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","undefined","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"AAAA;AAEA,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;IAiBtE,MAAM,CAACC,UAAUC,YAAY,GAAGhB,MAAMiB,QAAQ;IAC9C,MAAMC,cAAclB,MAAMmB,MAAM,CAAqCC;IACrE,MAAM,EAAEC,iBAAiB,EAAE,GAAGb;IAE9B,MAAMc,uBAAuBtB,MAAMmB,MAAM,CAAoBL;IAC7Dd,MAAMuB,SAAS,CAAC;QACdD,qBAAqBE,OAAO,GAAGV;IACjC,GAAG;QAACA;KAAkB;IAEtB,MAAM,CAACW,iBAAiB,GAAGzB,MAAMiB,QAAQ,CAAC,IAAM,IAAIS;IAEpD,MAAMC,kBAAkBpB,iBAAiB,CAACqB;QACxC,IAAI,CAACb,UAAU;YACb;QACF;QAEA,MAAMc,QAAQP,qBAAqBE,OAAO,CAACM,cAAc,CAACf;QAC1D,MAAMgB,oBAAoBH,MAAMI,gBAAgB,CAACrB;QAEjD,MAAMsB,YAAY;YAChBL,MAAMM,cAAc;YACpBN,MAAMO,eAAe;QACvB;QAEA,OAAQP,MAAMQ,GAAG;YACf,KAAKnC;gBACHgC;gBACAX,qBAAqBE,OAAO,CAACa,cAAc,CAACT,MAAMU,WAAW,EAAE;oBAC7DvB;oBACAc,OAAOA,QAASE,CAAAA,oBAAoBrB,OAAOE,mBAAmBF,IAAG;gBACnE;gBACA;YAEF,KAAKR;gBACH+B;gBACAX,qBAAqBE,OAAO,CAACa,cAAc,CAACT,MAAMU,WAAW,EAAE;oBAC7DvB;oBACAc,OAAOA,QAASE,CAAAA,oBAAoBrB,OAAOE,mBAAmBF,IAAG;gBACnE;gBACA;YAEF,KAAKJ;YACL,KAAKH;YACL,KAAKC;oBAEH,0FAA0F;gBAC1FqB,+BAAAA;gBAFAQ;iBAEAR,wBAAAA,iBAAiBc,GAAG,CAACxB,uBAArBU,6CAAAA,gCAAAA,sBAAgCD,OAAO,cAAvCC,oDAAAA,8BAAyCe,IAAI;gBAC7C;QACJ;IACF;IAEA,MAAMC,wBAAwBzC,MAAM0C,WAAW,CAC7C,CAACC;YAECzB,sBAEeO;QAHfT,YAAY2B;SACZzB,uBAAAA,YAAYM,OAAO,cAAnBN,2CAAAA,0BAAAA,aAAsByB,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,yBAAyBhD,MAAM0C,WAAW,CAAC;YAI/C,uEAAuE;QACvExB,sBAEWO;QANX,IAAI,CAACV,UAAU;YACb;QACF;SAEAG,uBAAAA,YAAYM,OAAO,cAAnBN,2CAAAA,0BAAAA,aAAsBH,UAAU;QAChC,0EAA0E;QAC1E,MAAMkC,MAAKxB,wBAAAA,iBAAiBc,GAAG,CAACxB,uBAArBU,4CAAAA,sBAAgCD,OAAO;QAClD,IAAIyB,IAAI;gBACN5B;aAAAA,qBAAAA,kBAAkB4B,iBAAlB5B,yCAAAA,mBAAuB0B,KAAK,IAAI,wDAAwD;YACxFE,GAAGC,eAAe,CAAC;QACrB;QAEAlC,YAAYI;IACd,GAAG;QAACL;QAAUM;QAAmBI;KAAiB;IAElD,MAAM0B,wBAAwB,CAACR,OAAsBS;QACnDlC,YAAYM,OAAO,GAAG4B;QACtB,IAAI,CAACrC,UAAU;YACb0B,sBAAsBE;QACxB,OAAO,IAAIA,SAAS5B,aAAa4B,OAAO;YACtCF,sBAAsBE;YACtB3B,YAAY2B;QACd,OAAO;YACLK;QACF;IACF;IAEA,MAAMK,yBAAyBrD,MAAM0C,WAAW,CAC9C,CAACC;QACC,MAAMW,MAAM7B,iBAAiBc,GAAG,CAACI,UAAU3C,MAAMuD,SAAS;QAC1D9B,iBAAiB+B,GAAG,CAACb,OAAOW;QAC5B,OAAOA;IACT,GACA;QAAC7B;KAAiB;IAGpB,wEAAwE;IACxE,yCAAyC;IACzC,MAAMgC,eAAehD,qBAAqB;QACxCiD,WAAW;YACTC,eAAe;gBACb1D,WAAW;gBACXC,YAAY;YACd;QACF;IACF;IAEA,OAAO;QACLiD;QACApC;QACA6C,0BAA0B5D,MAAM0C,WAAW,CACzC,CAACC,OAAsBkB,eAA0B,CAAA;gBAC/CC,WAAWnC;gBACXoC,QAAQf;gBACRM,KAAKD,uBAAuBV;gBAC5BqB,MAAM;gBACN,cAAc;gBACd,kBAAkB,GAAGH,aAAa,OAAO,CAAC;gBAC1C,eAAelB,UAAU5B,WAAW,QAAQ;gBAC5C+B,UAAUH,UAAU5B,WAAW,IAAIK;gBACnC,GAAGqC,YAAY;YACjB,CAAA,GACA;YAAC1C;YAAUiC;YAAwBK;YAAwB1B;YAAiB8B;SAAa;IAE7F;AACF"}

package/lib/hooks/useTableColumnResizeMouseHandler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  NativeTouchOrMouseEvent,\n  ReactTouchOrMouseEvent,\n  getEventClientCoords,\n  isMouseEvent,\n  isTouchEvent,\n  useAnimationFrame,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState): {\n  getOnMouseDown: (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => void;\n  dragging: boolean;\n} {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const { targetDocument } = useFluent();\n\n  const { getColumnWidth, setColumnWidth } = columnResizeState;\n\n  const recalculatePosition = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      const { clientX } = getEventClientCoords(e);\n      const dx = clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [setColumnWidth],\n  );\n\n  const [requestRecalcFrame] = useAnimationFrame();\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      requestRecalcFrame(() => recalculatePosition(e));\n    },\n    [requestRecalcFrame, recalculatePosition],\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: NativeTouchOrMouseEvent) => {\n      if (isMouseEvent(event)) {\n        targetDocument?.removeEventListener('mouseup', onDragEnd);\n        targetDocument?.removeEventListener('mousemove', onDrag);\n      }\n      if (isTouchEvent(event)) {\n        targetDocument?.removeEventListener('touchend', onDragEnd);\n        targetDocument?.removeEventListener('touchmove', onDrag);\n      }\n      setDragging(false);\n    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = React.useCallback(\n    (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n      // Keep the width locally so that we decouple the calculation of the next with from rendering.\n      // This makes the whole experience much faster and more precise\n      currentWidth.current = getColumnWidth(columnId);\n      mouseX.current = getEventClientCoords(event).clientX;\n      colId.current = columnId;\n\n      if (isMouseEvent(event)) {\n        // ignore other buttons than primary mouse button\n        if (event.target !== event.currentTarget || event.button !== 0) {\n          return;\n        }\n        targetDocument?.addEventListener('mouseup', onDragEnd);\n        targetDocument?.addEventListener('mousemove', onDrag);\n        setDragging(true);\n      }\n\n      if (isTouchEvent(event)) {\n        targetDocument?.addEventListener('touchend', onDragEnd);\n        targetDocument?.addEventListener('touchmove', onDrag);\n        setDragging(true);\n      }\n    },\n    [getColumnWidth, onDrag, onDragEnd, targetDocument],\n  );\n\n  return {\n    getOnMouseDown,\n    dragging,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useAnimationFrame","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","dragging","setDragging","useState","targetDocument","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","dx","current","columnId","width","requestRecalcFrame","onDrag","onDragEnd","event","removeEventListener","getOnMouseDown","target","currentTarget","button","addEventListener"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAGEC,oBAAoB,EACpBC,YAAY,EACZC,YAAY,EACZC,iBAAiB,QACZ,4BAA4B;AAEnC,OAAO,SAASC,iCAAiCC,iBAAoC;IAInF,MAAMC,SAAST,MAAMU,MAAM,CAAC;IAC5B,MAAMC,eAAeX,MAAMU,MAAM,CAAC;IAClC,MAAME,QAAQZ,MAAMU,MAAM,CAA4BG;IACtD,MAAM,CAACC,UAAUC,YAAY,GAAGf,MAAMgB,QAAQ,CAAU;IAExD,MAAM,EAAEC,cAAc,EAAE,GAAGf;IAE3B,MAAM,EAAEgB,cAAc,EAAEC,cAAc,EAAE,GAAGX;IAE3C,MAAMY,sBAAsBpB,MAAMqB,WAAW,CAC3C,CAACC;QACC,MAAM,EAAEC,OAAO,EAAE,GAAGpB,qBAAqBmB;QACzC,MAAME,KAAKD,UAAUd,OAAOgB,OAAO;QAEnC,mDAAmD;QACnDd,aAAac,OAAO,IAAID;QACxBZ,MAAMa,OAAO,IAAIN,eAAeG,GAAG;YAAEI,UAAUd,MAAMa,OAAO;YAAEE,OAAOhB,aAAac,OAAO;QAAC;QAC1FhB,OAAOgB,OAAO,GAAGF;IACnB,GACA;QAACJ;KAAe;IAGlB,MAAM,CAACS,mBAAmB,GAAGtB;IAE7B,MAAMuB,SAAS7B,MAAMqB,WAAW,CAC9B,CAACC;QACC,2FAA2F;QAC3FM,mBAAmB,IAAMR,oBAAoBE;IAC/C,GACA;QAACM;QAAoBR;KAAoB;IAG3C,MAAMU,YAAY9B,MAAMqB,WAAW,CACjC,CAACU;QACC,IAAI3B,aAAa2B,QAAQ;YACvBd,2BAAAA,qCAAAA,eAAgBe,mBAAmB,CAAC,WAAWF;YAC/Cb,2BAAAA,qCAAAA,eAAgBe,mBAAmB,CAAC,aAAaH;QACnD;QACA,IAAIxB,aAAa0B,QAAQ;YACvBd,2BAAAA,qCAAAA,eAAgBe,mBAAmB,CAAC,YAAYF;YAChDb,2BAAAA,qCAAAA,eAAgBe,mBAAmB,CAAC,aAAaH;QACnD;QACAd,YAAY;IACd,GACA;QAACc;QAAQZ;KAAe;IAG1B,MAAMgB,iBAAiBjC,MAAMqB,WAAW,CACtC,CAACK,WAA4B,CAACK;YAC5B,8FAA8F;YAC9F,+DAA+D;YAC/DpB,aAAac,OAAO,GAAGP,eAAeQ;YACtCjB,OAAOgB,OAAO,GAAGtB,qBAAqB4B,OAAOR,OAAO;YACpDX,MAAMa,OAAO,GAAGC;YAEhB,IAAItB,aAAa2B,QAAQ;gBACvB,iDAAiD;gBACjD,IAAIA,MAAMG,MAAM,KAAKH,MAAMI,aAAa,IAAIJ,MAAMK,MAAM,KAAK,GAAG;oBAC9D;gBACF;gBACAnB,2BAAAA,qCAAAA,eAAgBoB,gBAAgB,CAAC,WAAWP;gBAC5Cb,2BAAAA,qCAAAA,eAAgBoB,gBAAgB,CAAC,aAAaR;gBAC9Cd,YAAY;YACd;YAEA,IAAIV,aAAa0B,QAAQ;gBACvBd,2BAAAA,qCAAAA,eAAgBoB,gBAAgB,CAAC,YAAYP;gBAC7Cb,2BAAAA,qCAAAA,eAAgBoB,gBAAgB,CAAC,aAAaR;gBAC9Cd,YAAY;YACd;QACF,GACA;QAACG;QAAgBW;QAAQC;QAAWb;KAAe;IAGrD,OAAO;QACLgB;QACAnB;IACF;AACF"}
+{"version":3,"sources":["../src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { NativeTouchOrMouseEvent, ReactTouchOrMouseEvent } from '@fluentui/react-utilities';\nimport { getEventClientCoords, isMouseEvent, isTouchEvent, useAnimationFrame } from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState): {\n  getOnMouseDown: (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => void;\n  dragging: boolean;\n} {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const { targetDocument } = useFluent();\n\n  const { getColumnWidth, setColumnWidth } = columnResizeState;\n\n  const recalculatePosition = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      const { clientX } = getEventClientCoords(e);\n      const dx = clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [setColumnWidth],\n  );\n\n  const [requestRecalcFrame] = useAnimationFrame();\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      requestRecalcFrame(() => recalculatePosition(e));\n    },\n    [requestRecalcFrame, recalculatePosition],\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: NativeTouchOrMouseEvent) => {\n      if (isMouseEvent(event)) {\n        targetDocument?.removeEventListener('mouseup', onDragEnd);\n        targetDocument?.removeEventListener('mousemove', onDrag);\n      }\n      if (isTouchEvent(event)) {\n        targetDocument?.removeEventListener('touchend', onDragEnd);\n        targetDocument?.removeEventListener('touchmove', onDrag);\n      }\n      setDragging(false);\n    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = React.useCallback(\n    (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n      // Keep the width locally so that we decouple the calculation of the next with from rendering.\n      // This makes the whole experience much faster and more precise\n      currentWidth.current = getColumnWidth(columnId);\n      mouseX.current = getEventClientCoords(event).clientX;\n      colId.current = columnId;\n\n      if (isMouseEvent(event)) {\n        // ignore other buttons than primary mouse button\n        if (event.target !== event.currentTarget || event.button !== 0) {\n          return;\n        }\n        targetDocument?.addEventListener('mouseup', onDragEnd);\n        targetDocument?.addEventListener('mousemove', onDrag);\n        setDragging(true);\n      }\n\n      if (isTouchEvent(event)) {\n        targetDocument?.addEventListener('touchend', onDragEnd);\n        targetDocument?.addEventListener('touchmove', onDrag);\n        setDragging(true);\n      }\n    },\n    [getColumnWidth, onDrag, onDragEnd, targetDocument],\n  );\n\n  return {\n    getOnMouseDown,\n    dragging,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useAnimationFrame","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","dragging","setDragging","useState","targetDocument","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","dx","current","columnId","width","requestRecalcFrame","onDrag","onDragEnd","event","removeEventListener","getOnMouseDown","target","currentTarget","button","addEventListener"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,SAASC,oBAAoB,EAAEC,YAAY,EAAEC,YAAY,EAAEC,iBAAiB,QAAQ,4BAA4B;AAEhH,OAAO,SAASC,iCAAiCC,iBAAoC;IAInF,MAAMC,SAAST,MAAMU,MAAM,CAAC;IAC5B,MAAMC,eAAeX,MAAMU,MAAM,CAAC;IAClC,MAAME,QAAQZ,MAAMU,MAAM,CAA4BG;IACtD,MAAM,CAACC,UAAUC,YAAY,GAAGf,MAAMgB,QAAQ,CAAU;IAExD,MAAM,EAAEC,cAAc,EAAE,GAAGf;IAE3B,MAAM,EAAEgB,cAAc,EAAEC,cAAc,EAAE,GAAGX;IAE3C,MAAMY,sBAAsBpB,MAAMqB,WAAW,CAC3C,CAACC;QACC,MAAM,EAAEC,OAAO,EAAE,GAAGpB,qBAAqBmB;QACzC,MAAME,KAAKD,UAAUd,OAAOgB,OAAO;QAEnC,mDAAmD;QACnDd,aAAac,OAAO,IAAID;QACxBZ,MAAMa,OAAO,IAAIN,eAAeG,GAAG;YAAEI,UAAUd,MAAMa,OAAO;YAAEE,OAAOhB,aAAac,OAAO;QAAC;QAC1FhB,OAAOgB,OAAO,GAAGF;IACnB,GACA;QAACJ;KAAe;IAGlB,MAAM,CAACS,mBAAmB,GAAGtB;IAE7B,MAAMuB,SAAS7B,MAAMqB,WAAW,CAC9B,CAACC;QACC,2FAA2F;QAC3FM,mBAAmB,IAAMR,oBAAoBE;IAC/C,GACA;QAACM;QAAoBR;KAAoB;IAG3C,MAAMU,YAAY9B,MAAMqB,WAAW,CACjC,CAACU;QACC,IAAI3B,aAAa2B,QAAQ;YACvBd,2BAAAA,qCAAAA,eAAgBe,mBAAmB,CAAC,WAAWF;YAC/Cb,2BAAAA,qCAAAA,eAAgBe,mBAAmB,CAAC,aAAaH;QACnD;QACA,IAAIxB,aAAa0B,QAAQ;YACvBd,2BAAAA,qCAAAA,eAAgBe,mBAAmB,CAAC,YAAYF;YAChDb,2BAAAA,qCAAAA,eAAgBe,mBAAmB,CAAC,aAAaH;QACnD;QACAd,YAAY;IACd,GACA;QAACc;QAAQZ;KAAe;IAG1B,MAAMgB,iBAAiBjC,MAAMqB,WAAW,CACtC,CAACK,WAA4B,CAACK;YAC5B,8FAA8F;YAC9F,+DAA+D;YAC/DpB,aAAac,OAAO,GAAGP,eAAeQ;YACtCjB,OAAOgB,OAAO,GAAGtB,qBAAqB4B,OAAOR,OAAO;YACpDX,MAAMa,OAAO,GAAGC;YAEhB,IAAItB,aAAa2B,QAAQ;gBACvB,iDAAiD;gBACjD,IAAIA,MAAMG,MAAM,KAAKH,MAAMI,aAAa,IAAIJ,MAAMK,MAAM,KAAK,GAAG;oBAC9D;gBACF;gBACAnB,2BAAAA,qCAAAA,eAAgBoB,gBAAgB,CAAC,WAAWP;gBAC5Cb,2BAAAA,qCAAAA,eAAgBoB,gBAAgB,CAAC,aAAaR;gBAC9Cd,YAAY;YACd;YAEA,IAAIV,aAAa0B,QAAQ;gBACvBd,2BAAAA,qCAAAA,eAAgBoB,gBAAgB,CAAC,YAAYP;gBAC7Cb,2BAAAA,qCAAAA,eAAgBoB,gBAAgB,CAAC,aAAaR;gBAC9Cd,YAAY;YACd;QACF,GACA;QAACG;QAAgBW;QAAQC;QAAWb;KAAe;IAGrD,OAAO;QACLgB;QACAnB;IACF;AACF"}

package/lib/hooks/useTableColumnResizeState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer =\n  <T>(autoFitColumns?: boolean) =>\n  (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n    switch (action.type) {\n      case 'CONTAINER_WIDTH_UPDATED':\n        return {\n          ...state,\n          containerWidth: action.containerWidth,\n          columnWidthState: autoFitColumns\n            ? adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth)\n            : state.columnWidthState,\n        };\n\n      case 'COLUMNS_UPDATED':\n        const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n        return {\n          ...state,\n          columns: action.columns,\n          columnWidthState: autoFitColumns ? adjustColumnWidthsToFitContainer(newS, state.containerWidth) : newS,\n        };\n\n      case 'COLUMN_SIZING_OPTIONS_UPDATED':\n        const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n        return {\n          ...state,\n          columnSizingOptions: action.columnSizingOptions,\n          columnWidthState: autoFitColumns\n            ? adjustColumnWidthsToFitContainer(newState, state.containerWidth)\n            : newState,\n        };\n\n      case 'SET_COLUMN_WIDTH':\n        const { columnId, width } = action;\n        const { containerWidth } = state;\n\n        const column = getColumnById(state.columnWidthState, columnId);\n        let newColumnWidthState = [...state.columnWidthState];\n\n        if (!column) {\n          return state;\n        }\n\n        // Adjust the column width and measure the new total width\n        newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n        // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n        newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n        // Adjust the widths to the container size\n        if (autoFitColumns) {\n          newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n        }\n\n        return { ...state, columnWidthState: newColumnWidthState };\n    }\n  };\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions, autoFitColumns = true } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(autoFitColumns), [autoFitColumns]);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: KeyboardEvent | MouseEvent | TouchEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: React.useCallback(\n      (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n      [state.columnWidthState],\n    ),\n    getColumns: React.useCallback(() => state.columnWidthState, [state.columnWidthState]),\n    getColumnWidth: React.useCallback(\n      (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n      [state.columnWidthState],\n    ),\n    setColumnWidth,\n  };\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","autoFitColumns","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","useCallback","colId","getColumns"],"mappings":"AAAA;AAEA,SAASA,gBAAgB,EAAEC,yBAAyB,QAAQ,4BAA4B;AACxF,YAAYC,WAAW,QAAQ;AAS/B,SACEC,wBAAwB,EACxBC,gCAAgC,EAChCC,aAAa,EACbC,iBAAiB,EACjBC,cAAc,QACT,6BAA6B;AA4BpC,MAAMC,gBACJ,CAAIC,iBACJ,CAACC,OAA0BC;QACzB,OAAQA,OAAOC,IAAI;YACjB,KAAK;gBACH,OAAO;oBACL,GAAGF,KAAK;oBACRG,gBAAgBF,OAAOE,cAAc;oBACrCC,kBAAkBL,iBACdL,iCAAiCM,MAAMI,gBAAgB,EAAEH,OAAOE,cAAc,IAC9EH,MAAMI,gBAAgB;gBAC5B;YAEF,KAAK;gBACH,MAAMC,OAAOZ,yBAAyBQ,OAAOK,OAAO,EAAEN,MAAMI,gBAAgB,EAAEJ,MAAMO,mBAAmB;gBACvG,OAAO;oBACL,GAAGP,KAAK;oBACRM,SAASL,OAAOK,OAAO;oBACvBF,kBAAkBL,iBAAiBL,iCAAiCW,MAAML,MAAMG,cAAc,IAAIE;gBACpG;YAEF,KAAK;gBACH,MAAMG,WAAWf,yBAAyBO,MAAMM,OAAO,EAAEN,MAAMI,gBAAgB,EAAEH,OAAOM,mBAAmB;gBAC3G,OAAO;oBACL,GAAGP,KAAK;oBACRO,qBAAqBN,OAAOM,mBAAmB;oBAC/CH,kBAAkBL,iBACdL,iCAAiCc,UAAUR,MAAMG,cAAc,IAC/DK;gBACN;YAEF,KAAK;gBACH,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGT;gBAC5B,MAAM,EAAEE,cAAc,EAAE,GAAGH;gBAE3B,MAAMW,SAAShB,cAAcK,MAAMI,gBAAgB,EAAEK;gBACrD,IAAIG,sBAAsB;uBAAIZ,MAAMI,gBAAgB;iBAAC;gBAErD,IAAI,CAACO,QAAQ;oBACX,OAAOX;gBACT;gBAEA,0DAA0D;gBAC1DY,sBAAsBhB,kBAAkBgB,qBAAqBH,UAAU,SAASC;gBAChF,0GAA0G;gBAC1GE,sBAAsBhB,kBAAkBgB,qBAAqBH,UAAU,cAAcC;gBACrF,0CAA0C;gBAC1C,IAAIX,gBAAgB;oBAClBa,sBAAsBlB,iCAAiCkB,qBAAqBT;gBAC9E;gBAEA,OAAO;oBAAE,GAAGH,KAAK;oBAAEI,kBAAkBQ;gBAAoB;QAC7D;IACF;AAEF,OAAO,SAASC,0BACdP,OAAmC,EACnCH,cAAsB,EACtBW,SAAqC,CAAC,CAAC;IAEvC,MAAM,EAAEC,cAAc,EAAER,mBAAmB,EAAER,iBAAiB,IAAI,EAAE,GAAGe;IAEvE,MAAME,UAAUxB,MAAMyB,OAAO,CAAC,IAAMnB,cAAiBC,iBAAiB;QAACA;KAAe;IAEtF,MAAM,CAACC,OAAOkB,SAAS,GAAG1B,MAAM2B,UAAU,CAACH,SAAS;QAClDV;QACAH,gBAAgB;QAChBC,kBAAkBX,yBAAyBa,SAASc,WAAWb;QAC/DA;IACF;IAEAhB,0BAA0B;QACxB2B,SAAS;YAAEhB,MAAM;YAA2BC;QAAe;IAC7D,GAAG;QAACA;KAAe;IAEnBZ,0BAA0B;QACxB2B,SAAS;YAAEhB,MAAM;YAAmBI;QAAQ;IAC9C,GAAG;QAACA;KAAQ;IAEZf,0BAA0B;QACxB2B,SAAS;YAAEhB,MAAM;YAAiCK;QAAoB;IACxE,GAAG;QAACA;KAAoB;IAExB,MAAMc,iBAAiB/B,iBACrB,CAACgC,OAA4DC;QAC3D,IAAI,EAAEb,KAAK,EAAE,GAAGa;QAChB,MAAM,EAAEd,QAAQ,EAAE,GAAGc;QACrB,MAAMC,MAAM7B,cAAcK,MAAMI,gBAAgB,EAAEK;QAClD,IAAI,CAACe,KAAK;YACR;QACF;QAEAd,QAAQe,KAAKC,GAAG,CAACF,IAAIG,QAAQ,IAAI,GAAGjB;QAEpC,IAAIK,gBAAgB;YAClBA,eAAeO,OAAO;gBAAEb;gBAAUC;YAAM;QAC1C;QACAQ,SAAS;YAAEhB,MAAM;YAAoBO;YAAUC;QAAM;IACvD;IAGF,OAAO;QACLf,eAAeH,MAAMoC,WAAW,CAC9B,CAACC,QAAyBlC,cAAcK,MAAMI,gBAAgB,EAAEyB,QAChE;YAAC7B,MAAMI,gBAAgB;SAAC;QAE1B0B,YAAYtC,MAAMoC,WAAW,CAAC,IAAM5B,MAAMI,gBAAgB,EAAE;YAACJ,MAAMI,gBAAgB;SAAC;QACpFP,gBAAgBL,MAAMoC,WAAW,CAC/B,CAACC,QAAyBhC,eAAeG,MAAMI,gBAAgB,EAAEyB,QACjE;YAAC7B,MAAMI,gBAAgB;SAAC;QAE1BiB;IACF;AACF"}
+{"version":3,"sources":["../src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer =\n  <T>(autoFitColumns?: boolean) =>\n  (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n    switch (action.type) {\n      case 'CONTAINER_WIDTH_UPDATED':\n        return {\n          ...state,\n          containerWidth: action.containerWidth,\n          columnWidthState: autoFitColumns\n            ? adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth)\n            : state.columnWidthState,\n        };\n\n      case 'COLUMNS_UPDATED':\n        const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n        return {\n          ...state,\n          columns: action.columns,\n          columnWidthState: autoFitColumns ? adjustColumnWidthsToFitContainer(newS, state.containerWidth) : newS,\n        };\n\n      case 'COLUMN_SIZING_OPTIONS_UPDATED':\n        const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n        return {\n          ...state,\n          columnSizingOptions: action.columnSizingOptions,\n          columnWidthState: autoFitColumns\n            ? adjustColumnWidthsToFitContainer(newState, state.containerWidth)\n            : newState,\n        };\n\n      case 'SET_COLUMN_WIDTH':\n        const { columnId, width } = action;\n        const { containerWidth } = state;\n\n        const column = getColumnById(state.columnWidthState, columnId);\n        let newColumnWidthState = [...state.columnWidthState];\n\n        if (!column) {\n          return state;\n        }\n\n        // Adjust the column width and measure the new total width\n        newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n        // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n        newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n        // Adjust the widths to the container size\n        if (autoFitColumns) {\n          newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n        }\n\n        return { ...state, columnWidthState: newColumnWidthState };\n    }\n  };\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions, autoFitColumns = true } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(autoFitColumns), [autoFitColumns]);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: KeyboardEvent | MouseEvent | TouchEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: React.useCallback(\n      (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n      [state.columnWidthState],\n    ),\n    getColumns: React.useCallback(() => state.columnWidthState, [state.columnWidthState]),\n    getColumnWidth: React.useCallback(\n      (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n      [state.columnWidthState],\n    ),\n    setColumnWidth,\n  };\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","autoFitColumns","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","useCallback","colId","getColumns"],"mappings":"AAAA;AAEA,SAASA,gBAAgB,EAAEC,yBAAyB,QAAQ,4BAA4B;AACxF,YAAYC,WAAW,QAAQ;AAS/B,SACEC,wBAAwB,EACxBC,gCAAgC,EAChCC,aAAa,EACbC,iBAAiB,EACjBC,cAAc,QACT,6BAA6B;AA4BpC,MAAMC,gBACJ,CAAIC,iBACJ,CAACC,OAA0BC;QACzB,OAAQA,OAAOC,IAAI;YACjB,KAAK;gBACH,OAAO;oBACL,GAAGF,KAAK;oBACRG,gBAAgBF,OAAOE,cAAc;oBACrCC,kBAAkBL,iBACdL,iCAAiCM,MAAMI,gBAAgB,EAAEH,OAAOE,cAAc,IAC9EH,MAAMI,gBAAgB;gBAC5B;YAEF,KAAK;gBACH,MAAMC,OAAOZ,yBAAyBQ,OAAOK,OAAO,EAAEN,MAAMI,gBAAgB,EAAEJ,MAAMO,mBAAmB;gBACvG,OAAO;oBACL,GAAGP,KAAK;oBACRM,SAASL,OAAOK,OAAO;oBACvBF,kBAAkBL,iBAAiBL,iCAAiCW,MAAML,MAAMG,cAAc,IAAIE;gBACpG;YAEF,KAAK;gBACH,MAAMG,WAAWf,yBAAyBO,MAAMM,OAAO,EAAEN,MAAMI,gBAAgB,EAAEH,OAAOM,mBAAmB;gBAC3G,OAAO;oBACL,GAAGP,KAAK;oBACRO,qBAAqBN,OAAOM,mBAAmB;oBAC/CH,kBAAkBL,iBACdL,iCAAiCc,UAAUR,MAAMG,cAAc,IAC/DK;gBACN;YAEF,KAAK;gBACH,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGT;gBAC5B,MAAM,EAAEE,cAAc,EAAE,GAAGH;gBAE3B,MAAMW,SAAShB,cAAcK,MAAMI,gBAAgB,EAAEK;gBACrD,IAAIG,sBAAsB;uBAAIZ,MAAMI,gBAAgB;iBAAC;gBAErD,IAAI,CAACO,QAAQ;oBACX,OAAOX;gBACT;gBAEA,0DAA0D;gBAC1DY,sBAAsBhB,kBAAkBgB,qBAAqBH,UAAU,SAASC;gBAChF,0GAA0G;gBAC1GE,sBAAsBhB,kBAAkBgB,qBAAqBH,UAAU,cAAcC;gBACrF,0CAA0C;gBAC1C,IAAIX,gBAAgB;oBAClBa,sBAAsBlB,iCAAiCkB,qBAAqBT;gBAC9E;gBAEA,OAAO;oBAAE,GAAGH,KAAK;oBAAEI,kBAAkBQ;gBAAoB;QAC7D;IACF;AAEF,OAAO,SAASC,0BACdP,OAAmC,EACnCH,cAAsB,EACtBW,SAAqC,CAAC,CAAC;IAEvC,MAAM,EAAEC,cAAc,EAAER,mBAAmB,EAAER,iBAAiB,IAAI,EAAE,GAAGe;IAEvE,MAAME,UAAUxB,MAAMyB,OAAO,CAAC,IAAMnB,cAAiBC,iBAAiB;QAACA;KAAe;IAEtF,MAAM,CAACC,OAAOkB,SAAS,GAAG1B,MAAM2B,UAAU,CAACH,SAAS;QAClDV;QACAH,gBAAgB;QAChBC,kBAAkBX,yBAAyBa,SAASc,WAAWb;QAC/DA;IACF;IAEAhB,0BAA0B;QACxB2B,SAAS;YAAEhB,MAAM;YAA2BC;QAAe;IAC7D,GAAG;QAACA;KAAe;IAEnBZ,0BAA0B;QACxB2B,SAAS;YAAEhB,MAAM;YAAmBI;QAAQ;IAC9C,GAAG;QAACA;KAAQ;IAEZf,0BAA0B;QACxB2B,SAAS;YAAEhB,MAAM;YAAiCK;QAAoB;IACxE,GAAG;QAACA;KAAoB;IAExB,MAAMc,iBAAiB/B,iBACrB,CAACgC,OAA4DC;QAC3D,IAAI,EAAEb,KAAK,EAAE,GAAGa;QAChB,MAAM,EAAEd,QAAQ,EAAE,GAAGc;QACrB,MAAMC,MAAM7B,cAAcK,MAAMI,gBAAgB,EAAEK;QAClD,IAAI,CAACe,KAAK;YACR;QACF;QAEAd,QAAQe,KAAKC,GAAG,CAACF,IAAIG,QAAQ,IAAI,GAAGjB;QAEpC,IAAIK,gBAAgB;YAClBA,eAAeO,OAAO;gBAAEb;gBAAUC;YAAM;QAC1C;QACAQ,SAAS;YAAEhB,MAAM;YAAoBO;YAAUC;QAAM;IACvD;IAGF,OAAO;QACLf,eAAeH,MAAMoC,WAAW,CAC9B,CAACC,QAAyBlC,cAAcK,MAAMI,gBAAgB,EAAEyB,QAChE;YAAC7B,MAAMI,gBAAgB;SAAC;QAE1B0B,YAAYtC,MAAMoC,WAAW,CAAC,IAAM5B,MAAMI,gBAAgB,EAAE;YAACJ,MAAMI,gBAAgB;SAAC;QACpFP,gBAAgBL,MAAMoC,WAAW,CAC/B,CAACC,QAAyBhC,eAAeG,MAAMI,gBAAgB,EAAEyB,QACjE;YAAC7B,MAAMI,gBAAgB;SAAC;QAE1BiB;IACF;AACF"}

package/lib/hooks/useTableColumnSizing.js.map

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

package/lib/hooks/useTableCompositeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTableCompositeNavigation.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, ArrowUp, ArrowLeft } from '@fluentui/keyboard-keys';\nimport {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useMergedTabsterAttributes_unstable,\n  TabsterDOMAttribute,\n  useFocusFinders,\n  GroupperMoveFocusEvent,\n  MoverMoveFocusEvent,\n  GroupperMoveFocusActions,\n  MoverKeys,\n} from '@fluentui/react-tabster';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useTableCompositeNavigation(): {\n  onTableKeyDown: React.KeyboardEventHandler;\n  tableTabsterAttribute: TabsterDOMAttribute;\n  tableRowTabsterAttribute: TabsterDOMAttribute;\n} {\n  const horizontalAttr = useArrowNavigationGroup({ axis: 'horizontal' });\n  const gridAttr = useArrowNavigationGroup({ axis: 'grid' });\n  const groupperAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent();\n\n  const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);\n\n  const onKeyDown: React.KeyboardEventHandler = React.useCallback(\n    e => {\n      if (!targetDocument) {\n        return;\n      }\n\n      let activeElement = targetDocument.activeElement;\n      if (!activeElement || !e.currentTarget.contains(activeElement)) {\n        return;\n      }\n      const activeElementRole = activeElement.getAttribute('role');\n\n      // Enter groupper when in row focus mode to navigate cells\n      if (e.key === ArrowRight && activeElementRole === 'row' && isHTMLElement(activeElement)) {\n        findFirstFocusable(activeElement)?.focus();\n      }\n\n      if (activeElementRole === 'row') {\n        return;\n      }\n\n      const isInCell = (() => {\n        let cur = isHTMLElement(activeElement) ? activeElement : null;\n        while (cur) {\n          const curRole = cur.getAttribute('role');\n          if (curRole === 'cell' || curRole === 'gridcell') {\n            return true;\n          }\n\n          cur = cur.parentElement;\n        }\n\n        return false;\n      })();\n\n      // Escape groupper focus trap before arrow left, arrow down or arrow up\n      if (e.key === ArrowLeft && isInCell) {\n        activeElement.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n        return;\n      }\n      if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {\n        activeElement.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n\n        activeElement = targetDocument.activeElement;\n\n        if (activeElement) {\n          activeElement.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys[e.key] }));\n        }\n      }\n    },\n    [targetDocument, findFirstFocusable],\n  );\n\n  return {\n    onTableKeyDown: onKeyDown,\n    tableTabsterAttribute: gridAttr,\n    tableRowTabsterAttribute: rowAttr,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","ArrowDown","ArrowRight","ArrowUp","ArrowLeft","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","useFocusFinders","GroupperMoveFocusEvent","MoverMoveFocusEvent","GroupperMoveFocusActions","MoverKeys","isHTMLElement","useTableCompositeNavigation","horizontalAttr","axis","gridAttr","groupperAttr","tabBehavior","findFirstFocusable","targetDocument","rowAttr","onKeyDown","useCallback","e","activeElement","currentTarget","contains","activeElementRole","getAttribute","key","focus","isInCell","cur","curRole","parentElement","dispatchEvent","action","Escape","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,UAAU,EAAEC,OAAO,EAAEC,SAAS,QAAQ,0BAA0B;AACpF,SACEC,uBAAuB,EACvBC,iBAAiB,EACjBC,mCAAmC,EAEnCC,eAAe,EACfC,sBAAsB,EACtBC,mBAAmB,EACnBC,wBAAwB,EACxBC,SAAS,QACJ,0BAA0B;AACjC,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC;IAKd,MAAMC,iBAAiBV,wBAAwB;QAAEW,MAAM;IAAa;IACpE,MAAMC,WAAWZ,wBAAwB;QAAEW,MAAM;IAAO;IACxD,MAAME,eAAeZ,kBAAkB;QAAEa,aAAa;IAAqB;IAC3E,MAAM,EAAEC,kBAAkB,EAAE,GAAGZ;IAC/B,MAAM,EAAEa,cAAc,EAAE,GAAGrB;IAE3B,MAAMsB,UAAUf,oCAAoCQ,gBAAgBG;IAEpE,MAAMK,YAAwCzB,MAAM0B,WAAW,CAC7DC,CAAAA;QACE,IAAI,CAACJ,gBAAgB;YACnB;QACF;QAEA,IAAIK,gBAAgBL,eAAeK,aAAa;QAChD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC9D;QACF;QACA,MAAMG,oBAAoBH,cAAcI,YAAY,CAAC;QAErD,0DAA0D;QAC1D,IAAIL,EAAEM,GAAG,KAAK7B,cAAc2B,sBAAsB,SAAShB,cAAca,gBAAgB;gBACvFN;aAAAA,sBAAAA,mBAAmBM,4BAAnBN,0CAAAA,oBAAmCY,KAAK;QAC1C;QAEA,IAAIH,sBAAsB,OAAO;YAC/B;QACF;QAEA,MAAMI,WAAW,AAAC,CAAA;YAChB,IAAIC,MAAMrB,cAAca,iBAAiBA,gBAAgB;YACzD,MAAOQ,IAAK;gBACV,MAAMC,UAAUD,IAAIJ,YAAY,CAAC;gBACjC,IAAIK,YAAY,UAAUA,YAAY,YAAY;oBAChD,OAAO;gBACT;gBAEAD,MAAMA,IAAIE,aAAa;YACzB;YAEA,OAAO;QACT,CAAA;QAEA,uEAAuE;QACvE,IAAIX,EAAEM,GAAG,KAAK3B,aAAa6B,UAAU;YACnCP,cAAcW,aAAa,CAAC,IAAI5B,uBAAuB;gBAAE6B,QAAQ3B,yBAAyB4B,MAAM;YAAC;YACjG;QACF;QACA,IAAI,AAACd,CAAAA,EAAEM,GAAG,KAAK9B,aAAawB,EAAEM,GAAG,KAAK5B,OAAM,KAAM8B,UAAU;YAC1DP,cAAcW,aAAa,CAAC,IAAI5B,uBAAuB;gBAAE6B,QAAQ3B,yBAAyB4B,MAAM;YAAC;YAEjGb,gBAAgBL,eAAeK,aAAa;YAE5C,IAAIA,eAAe;gBACjBA,cAAcW,aAAa,CAAC,IAAI3B,oBAAoB;oBAAEqB,KAAKnB,SAAS,CAACa,EAAEM,GAAG,CAAC;gBAAC;YAC9E;QACF;IACF,GACA;QAACV;QAAgBD;KAAmB;IAGtC,OAAO;QACLoB,gBAAgBjB;QAChBkB,uBAAuBxB;QACvByB,0BAA0BpB;IAC5B;AACF"}
+{"version":3,"sources":["../src/hooks/useTableCompositeNavigation.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, ArrowUp, ArrowLeft } from '@fluentui/keyboard-keys';\nimport type { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport {\n  useArrowNavigationGroup,\n  useFocusableGroup,\n  useMergedTabsterAttributes_unstable,\n  useFocusFinders,\n  GroupperMoveFocusEvent,\n  MoverMoveFocusEvent,\n  GroupperMoveFocusActions,\n  MoverKeys,\n} from '@fluentui/react-tabster';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useTableCompositeNavigation(): {\n  onTableKeyDown: React.KeyboardEventHandler;\n  tableTabsterAttribute: TabsterDOMAttribute;\n  tableRowTabsterAttribute: TabsterDOMAttribute;\n} {\n  const horizontalAttr = useArrowNavigationGroup({ axis: 'horizontal' });\n  const gridAttr = useArrowNavigationGroup({ axis: 'grid' });\n  const groupperAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent();\n\n  const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);\n\n  const onKeyDown: React.KeyboardEventHandler = React.useCallback(\n    e => {\n      if (!targetDocument) {\n        return;\n      }\n\n      let activeElement = targetDocument.activeElement;\n      if (!activeElement || !e.currentTarget.contains(activeElement)) {\n        return;\n      }\n      const activeElementRole = activeElement.getAttribute('role');\n\n      // Enter groupper when in row focus mode to navigate cells\n      if (e.key === ArrowRight && activeElementRole === 'row' && isHTMLElement(activeElement)) {\n        findFirstFocusable(activeElement)?.focus();\n      }\n\n      if (activeElementRole === 'row') {\n        return;\n      }\n\n      const isInCell = (() => {\n        let cur = isHTMLElement(activeElement) ? activeElement : null;\n        while (cur) {\n          const curRole = cur.getAttribute('role');\n          if (curRole === 'cell' || curRole === 'gridcell') {\n            return true;\n          }\n\n          cur = cur.parentElement;\n        }\n\n        return false;\n      })();\n\n      // Escape groupper focus trap before arrow left, arrow down or arrow up\n      if (e.key === ArrowLeft && isInCell) {\n        activeElement.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n        return;\n      }\n      if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {\n        activeElement.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n\n        activeElement = targetDocument.activeElement;\n\n        if (activeElement) {\n          activeElement.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys[e.key] }));\n        }\n      }\n    },\n    [targetDocument, findFirstFocusable],\n  );\n\n  return {\n    onTableKeyDown: onKeyDown,\n    tableTabsterAttribute: gridAttr,\n    tableRowTabsterAttribute: rowAttr,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","ArrowDown","ArrowRight","ArrowUp","ArrowLeft","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","useFocusFinders","GroupperMoveFocusEvent","MoverMoveFocusEvent","GroupperMoveFocusActions","MoverKeys","isHTMLElement","useTableCompositeNavigation","horizontalAttr","axis","gridAttr","groupperAttr","tabBehavior","findFirstFocusable","targetDocument","rowAttr","onKeyDown","useCallback","e","activeElement","currentTarget","contains","activeElementRole","getAttribute","key","focus","isInCell","cur","curRole","parentElement","dispatchEvent","action","Escape","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,UAAU,EAAEC,OAAO,EAAEC,SAAS,QAAQ,0BAA0B;AAEpF,SACEC,uBAAuB,EACvBC,iBAAiB,EACjBC,mCAAmC,EACnCC,eAAe,EACfC,sBAAsB,EACtBC,mBAAmB,EACnBC,wBAAwB,EACxBC,SAAS,QACJ,0BAA0B;AACjC,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC;IAKd,MAAMC,iBAAiBV,wBAAwB;QAAEW,MAAM;IAAa;IACpE,MAAMC,WAAWZ,wBAAwB;QAAEW,MAAM;IAAO;IACxD,MAAME,eAAeZ,kBAAkB;QAAEa,aAAa;IAAqB;IAC3E,MAAM,EAAEC,kBAAkB,EAAE,GAAGZ;IAC/B,MAAM,EAAEa,cAAc,EAAE,GAAGrB;IAE3B,MAAMsB,UAAUf,oCAAoCQ,gBAAgBG;IAEpE,MAAMK,YAAwCzB,MAAM0B,WAAW,CAC7DC,CAAAA;QACE,IAAI,CAACJ,gBAAgB;YACnB;QACF;QAEA,IAAIK,gBAAgBL,eAAeK,aAAa;QAChD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC9D;QACF;QACA,MAAMG,oBAAoBH,cAAcI,YAAY,CAAC;QAErD,0DAA0D;QAC1D,IAAIL,EAAEM,GAAG,KAAK7B,cAAc2B,sBAAsB,SAAShB,cAAca,gBAAgB;gBACvFN;aAAAA,sBAAAA,mBAAmBM,4BAAnBN,0CAAAA,oBAAmCY,KAAK;QAC1C;QAEA,IAAIH,sBAAsB,OAAO;YAC/B;QACF;QAEA,MAAMI,WAAW,AAAC,CAAA;YAChB,IAAIC,MAAMrB,cAAca,iBAAiBA,gBAAgB;YACzD,MAAOQ,IAAK;gBACV,MAAMC,UAAUD,IAAIJ,YAAY,CAAC;gBACjC,IAAIK,YAAY,UAAUA,YAAY,YAAY;oBAChD,OAAO;gBACT;gBAEAD,MAAMA,IAAIE,aAAa;YACzB;YAEA,OAAO;QACT,CAAA;QAEA,uEAAuE;QACvE,IAAIX,EAAEM,GAAG,KAAK3B,aAAa6B,UAAU;YACnCP,cAAcW,aAAa,CAAC,IAAI5B,uBAAuB;gBAAE6B,QAAQ3B,yBAAyB4B,MAAM;YAAC;YACjG;QACF;QACA,IAAI,AAACd,CAAAA,EAAEM,GAAG,KAAK9B,aAAawB,EAAEM,GAAG,KAAK5B,OAAM,KAAM8B,UAAU;YAC1DP,cAAcW,aAAa,CAAC,IAAI5B,uBAAuB;gBAAE6B,QAAQ3B,yBAAyB4B,MAAM;YAAC;YAEjGb,gBAAgBL,eAAeK,aAAa;YAE5C,IAAIA,eAAe;gBACjBA,cAAcW,aAAa,CAAC,IAAI3B,oBAAoB;oBAAEqB,KAAKnB,SAAS,CAACa,EAAEM,GAAG,CAAC;gBAAC;YAC9E;QACF;IACF,GACA;QAACV;QAAgBD;KAAmB;IAGtC,OAAO;QACLoB,gBAAgBjB;QAChBkB,uBAAuBxB;QACvByB,0BAA0BpB;IAC5B;AACF"}

package/lib/hooks/useTableSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTableSelection.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { SelectionHookParams, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport type { TableRowId, TableSelectionState, TableFeaturesState } from './types';\n\nconst noop = (): void => undefined;\n\nexport const defaultTableSelectionState: TableSelectionState = {\n  allRowsSelected: false,\n  clearRows: noop,\n  deselectRow: noop,\n  isRowSelected: () => false,\n  selectRow: noop,\n  selectedRows: new Set(),\n  someRowsSelected: false,\n  toggleAllRows: noop,\n  toggleRow: noop,\n  selectionMode: 'multiselect',\n};\n\nexport function useTableSelection<TItem>(\n  options: SelectionHookParams,\n): (tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem> {\n  'use no memo';\n\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableFeaturesState<TItem>) => useTableSelectionState(tableState, options);\n}\n\nexport function useTableSelectionState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  options: SelectionHookParams,\n): TableFeaturesState<TItem> {\n  const { items, getRowId } = tableState;\n  const { selectionMode: selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n  const [selected, selectionMethods] = useSelection({\n    selectionMode,\n    defaultSelectedItems,\n    selectedItems,\n    onSelectionChange,\n  });\n\n  // Selection state can contain obselete items (i.e. rows that are removed)\n  const selectableRowIds = React.useMemo(() => {\n    const rowIds = new Set<TableRowId>();\n    for (let i = 0; i < items.length; i++) {\n      rowIds.add(getRowId?.(items[i]) ?? i);\n    }\n\n    return rowIds;\n  }, [items, getRowId]);\n\n  const allRowsSelected = React.useMemo(() => {\n    if (selectionMode === 'single') {\n      const selectedRow = Array.from(selected)[0];\n      return selectableRowIds.has(selectedRow);\n    }\n\n    // multiselect case\n    if (selected.size < selectableRowIds.size) {\n      return false;\n    }\n\n    if (selectableRowIds.size === 0) {\n      return false;\n    }\n\n    let res = true;\n    selectableRowIds.forEach(selectableRowId => {\n      if (!selected.has(selectableRowId)) {\n        res = false;\n      }\n    });\n\n    return res;\n  }, [selectableRowIds, selected, selectionMode]);\n\n  const someRowsSelected = React.useMemo(() => {\n    if (selected.size <= 0) {\n      return false;\n    }\n\n    let res = false;\n    selectableRowIds.forEach(selectableRowId => {\n      if (selected.has(selectableRowId)) {\n        res = true;\n      }\n    });\n\n    return res;\n  }, [selectableRowIds, selected]);\n\n  const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(e => {\n    selectionMethods.toggleAllItems(\n      e,\n      items.map((item, i) => getRowId?.(item) ?? i),\n    );\n  });\n\n  const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.toggleItem(e, rowId),\n  );\n\n  const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.deselectItem(e, rowId),\n  );\n\n  const selectRow: TableSelectionState['selectRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.selectItem(e, rowId),\n  );\n\n  const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: TableRowId) => selectionMethods.isSelected(rowId);\n\n  const clearRows: TableSelectionState['clearRows'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n  return {\n    ...tableState,\n    selection: {\n      selectionMode,\n      someRowsSelected,\n      allRowsSelected,\n      selectedRows: selected,\n      toggleRow,\n      toggleAllRows,\n      clearRows,\n      deselectRow,\n      selectRow,\n      isRowSelected,\n    },\n  };\n}\n"],"names":["React","useEventCallback","useSelection","noop","undefined","defaultTableSelectionState","allRowsSelected","clearRows","deselectRow","isRowSelected","selectRow","selectedRows","Set","someRowsSelected","toggleAllRows","toggleRow","selectionMode","useTableSelection","options","tableState","useTableSelectionState","items","getRowId","defaultSelectedItems","selectedItems","onSelectionChange","selected","selectionMethods","selectableRowIds","useMemo","rowIds","i","length","add","selectedRow","Array","from","has","size","res","forEach","selectableRowId","e","toggleAllItems","map","item","rowId","toggleItem","deselectItem","selectItem","isSelected","clearItems","selection"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useTableSelection.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SelectionHookParams } from '@fluentui/react-utilities';\nimport { useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport type { TableRowId, TableSelectionState, TableFeaturesState } from './types';\n\nconst noop = (): void => undefined;\n\nexport const defaultTableSelectionState: TableSelectionState = {\n  allRowsSelected: false,\n  clearRows: noop,\n  deselectRow: noop,\n  isRowSelected: () => false,\n  selectRow: noop,\n  selectedRows: new Set(),\n  someRowsSelected: false,\n  toggleAllRows: noop,\n  toggleRow: noop,\n  selectionMode: 'multiselect',\n};\n\nexport function useTableSelection<TItem>(\n  options: SelectionHookParams,\n): (tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem> {\n  'use no memo';\n\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableFeaturesState<TItem>) => useTableSelectionState(tableState, options);\n}\n\nexport function useTableSelectionState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  options: SelectionHookParams,\n): TableFeaturesState<TItem> {\n  const { items, getRowId } = tableState;\n  const { selectionMode: selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n  const [selected, selectionMethods] = useSelection({\n    selectionMode,\n    defaultSelectedItems,\n    selectedItems,\n    onSelectionChange,\n  });\n\n  // Selection state can contain obselete items (i.e. rows that are removed)\n  const selectableRowIds = React.useMemo(() => {\n    const rowIds = new Set<TableRowId>();\n    for (let i = 0; i < items.length; i++) {\n      rowIds.add(getRowId?.(items[i]) ?? i);\n    }\n\n    return rowIds;\n  }, [items, getRowId]);\n\n  const allRowsSelected = React.useMemo(() => {\n    if (selectionMode === 'single') {\n      const selectedRow = Array.from(selected)[0];\n      return selectableRowIds.has(selectedRow);\n    }\n\n    // multiselect case\n    if (selected.size < selectableRowIds.size) {\n      return false;\n    }\n\n    if (selectableRowIds.size === 0) {\n      return false;\n    }\n\n    let res = true;\n    selectableRowIds.forEach(selectableRowId => {\n      if (!selected.has(selectableRowId)) {\n        res = false;\n      }\n    });\n\n    return res;\n  }, [selectableRowIds, selected, selectionMode]);\n\n  const someRowsSelected = React.useMemo(() => {\n    if (selected.size <= 0) {\n      return false;\n    }\n\n    let res = false;\n    selectableRowIds.forEach(selectableRowId => {\n      if (selected.has(selectableRowId)) {\n        res = true;\n      }\n    });\n\n    return res;\n  }, [selectableRowIds, selected]);\n\n  const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(e => {\n    selectionMethods.toggleAllItems(\n      e,\n      items.map((item, i) => getRowId?.(item) ?? i),\n    );\n  });\n\n  const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.toggleItem(e, rowId),\n  );\n\n  const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.deselectItem(e, rowId),\n  );\n\n  const selectRow: TableSelectionState['selectRow'] = useEventCallback((e, rowId: TableRowId) =>\n    selectionMethods.selectItem(e, rowId),\n  );\n\n  const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: TableRowId) => selectionMethods.isSelected(rowId);\n\n  const clearRows: TableSelectionState['clearRows'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n  return {\n    ...tableState,\n    selection: {\n      selectionMode,\n      someRowsSelected,\n      allRowsSelected,\n      selectedRows: selected,\n      toggleRow,\n      toggleAllRows,\n      clearRows,\n      deselectRow,\n      selectRow,\n      isRowSelected,\n    },\n  };\n}\n"],"names":["React","useEventCallback","useSelection","noop","undefined","defaultTableSelectionState","allRowsSelected","clearRows","deselectRow","isRowSelected","selectRow","selectedRows","Set","someRowsSelected","toggleAllRows","toggleRow","selectionMode","useTableSelection","options","tableState","useTableSelectionState","items","getRowId","defaultSelectedItems","selectedItems","onSelectionChange","selected","selectionMethods","selectableRowIds","useMemo","rowIds","i","length","add","selectedRow","Array","from","has","size","res","forEach","selectableRowId","e","toggleAllItems","map","item","rowId","toggleItem","deselectItem","selectItem","isSelected","clearItems","selection"],"mappings":"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"}

package/lib/utils/columnResizeUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/columnResizeUtils.ts"],"sourcesContent":["import { TableColumnDefinition, ColumnWidthState, TableColumnId, TableColumnSizingOptions } from '../hooks';\n\nconst DEFAULT_WIDTH = 150;\nconst DEFAULT_MIN_WIDTH = 100;\n\n/**\n * This function takes the column definitions and the curent ColumnWidthState and returns new state.\n *  - It uses existing state for existing columns.\n *  - It removes any state for columns no longer present.\n *  - It checks if any column has been replaced and returns updated state if so\n *  - It returns old state if no changes in the state have been made (so that react doesn't call effects)\n * @param columns\n * @param state\n * @returns\n */\n\nexport function columnDefinitionsToState<T>(\n  columns: TableColumnDefinition<T>[],\n  state: ColumnWidthState[] = [],\n  columnSizingOptions: TableColumnSizingOptions = {},\n): ColumnWidthState[] {\n  let updated = false;\n  const stateMap = new Map(state.map(s => [s.columnId, s]));\n\n  const updatedState = columns.map(column => {\n    const existingColumnState = stateMap.get(column.columnId);\n\n    if (existingColumnState) {\n      const {\n        idealWidth = existingColumnState.idealWidth,\n        minWidth = existingColumnState.minWidth,\n        padding = existingColumnState.padding,\n      } = columnSizingOptions[column.columnId] ?? {};\n\n      if (\n        idealWidth !== existingColumnState.idealWidth ||\n        minWidth !== existingColumnState.minWidth ||\n        padding !== existingColumnState.padding\n      ) {\n        updated = true;\n        return {\n          ...existingColumnState,\n          idealWidth,\n          width: idealWidth,\n          minWidth,\n          padding,\n        };\n      }\n      return existingColumnState;\n    }\n\n    const {\n      defaultWidth,\n      idealWidth = DEFAULT_WIDTH,\n      minWidth = DEFAULT_MIN_WIDTH,\n      padding,\n    } = columnSizingOptions[column.columnId] ?? {};\n\n    updated = true;\n    return {\n      columnId: column.columnId,\n      width: Math.max(defaultWidth ?? idealWidth, minWidth),\n      minWidth,\n      idealWidth: Math.max(defaultWidth ?? idealWidth, minWidth),\n      padding: padding ?? 16,\n    };\n  });\n\n  // If the length of the new state changed (column was added or removed) or any of\n  // the individual states has a new reference (column was replaced),\n  // we have to reset the column widths to their ideal width (because the column which was last may not be last now).\n  // Then the adjustColumnWidthsToFitContainer can do its job and properly stretch the last column.\n  if (updatedState.length !== state.length || updated) {\n    const column = updatedState.find(col => col.width > col.idealWidth);\n    if (column) {\n      column.width = column.idealWidth;\n    }\n\n    updated = true;\n  }\n\n  return updated ? updatedState : state;\n}\n\nexport function getColumnById(state: ColumnWidthState[], columnId: TableColumnId): ColumnWidthState | undefined {\n  return state.find(c => c.columnId === columnId);\n}\n\nexport function getColumnByIndex(state: ColumnWidthState[], index: number): ColumnWidthState | undefined {\n  return state[index];\n}\n\nexport function getTotalWidth(state: ColumnWidthState[]): number {\n  return state.reduce((sum, column) => sum + column.width + column.padding, 0);\n}\n\nexport function getLength(state: ColumnWidthState[]): number {\n  return state.length;\n}\n\nexport function getColumnWidth(state: ColumnWidthState[], columnId: TableColumnId): number {\n  const column = getColumnById(state, columnId);\n  return column?.width ?? 0;\n}\n\n/**\n * This function takes the current state and returns an updated state, so that it can be set.\n * The reason for this is that we can update the state multiple times before commiting to render.\n * This is an optimization and also prevents flickering.\n * It also returns new copy of the state only if the value is different than the one currently in\n * the state, further preventing unnecessary updates.\n * @param localState\n * @param columnId\n * @param property\n * @param value\n * @returns\n */\nexport function setColumnProperty(\n  localState: ColumnWidthState[],\n  columnId: TableColumnId,\n  property: keyof ColumnWidthState,\n  value: number,\n): ColumnWidthState[] {\n  const currentColumn = getColumnById(localState, columnId);\n\n  if (!currentColumn || currentColumn?.[property] === value) {\n    return localState;\n  }\n\n  const updatedColumn = { ...currentColumn, [property]: value };\n\n  const newState = localState.reduce((acc, current) => {\n    if (current.columnId === updatedColumn.columnId) {\n      return [...acc, updatedColumn];\n    }\n    return [...acc, current];\n  }, [] as ColumnWidthState[]);\n\n  return newState;\n}\n\n/**\n * This function takes the state and container width and makes sure the each column in the state\n * is its optimal width, and that the columns\n * a) fit to the container\n * b) always fill the whole container\n * @param state\n * @param containerWidth\n * @returns\n */\nexport function adjustColumnWidthsToFitContainer(\n  state: ColumnWidthState[],\n  containerWidth: number,\n): ColumnWidthState[] {\n  let newState = state;\n  const totalWidth = getTotalWidth(newState);\n\n  // The total width is smaller, we are expanding columns\n  if (totalWidth < containerWidth) {\n    let difference = containerWidth - totalWidth;\n    let i = 0;\n    // We start at the beginning and assign the columns their ideal width\n    while (i < newState.length && difference > 0) {\n      const currentCol = getColumnByIndex(newState, i);\n      if (!currentCol) {\n        break;\n      }\n      const colAdjustment = Math.min(currentCol.idealWidth - currentCol.width, difference);\n      newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width + colAdjustment);\n      difference -= colAdjustment;\n\n      // if there is still empty space, after all columns are their ideal sizes, assign it to the last column\n      if (i === newState.length - 1 && difference !== 0) {\n        const lastCol = getColumnByIndex(newState, i);\n        if (lastCol) {\n          newState = setColumnProperty(newState, lastCol.columnId, 'width', lastCol.width + difference);\n        }\n      }\n\n      i++;\n    }\n  }\n\n  // The total width is larger than container, we need to squash the columns\n  else if (totalWidth >= containerWidth) {\n    let difference = totalWidth - containerWidth;\n    // We start with the last column\n    let j = newState.length - 1;\n    while (j >= 0 && difference > 0) {\n      const currentCol = getColumnByIndex(newState, j);\n      if (!currentCol) {\n        j--;\n        continue;\n      }\n      if (currentCol.width > currentCol.minWidth) {\n        const colAdjustment = Math.min(currentCol.width - currentCol.minWidth, difference);\n        difference -= colAdjustment;\n        newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width - colAdjustment);\n      }\n      j--;\n    }\n  }\n\n  return newState;\n}\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","columnDefinitionsToState","columns","state","columnSizingOptions","updated","stateMap","Map","map","s","columnId","updatedState","column","existingColumnState","get","idealWidth","minWidth","padding","width","defaultWidth","Math","max","length","find","col","getColumnById","c","getColumnByIndex","index","getTotalWidth","reduce","sum","getLength","getColumnWidth","setColumnProperty","localState","property","value","currentColumn","updatedColumn","newState","acc","current","adjustColumnWidthsToFitContainer","containerWidth","totalWidth","difference","i","currentCol","colAdjustment","min","lastCol","j"],"mappings":"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"}
+{"version":3,"sources":["../src/utils/columnResizeUtils.ts"],"sourcesContent":["import type { TableColumnDefinition, ColumnWidthState, TableColumnId, TableColumnSizingOptions } from '../hooks';\n\nconst DEFAULT_WIDTH = 150;\nconst DEFAULT_MIN_WIDTH = 100;\n\n/**\n * This function takes the column definitions and the curent ColumnWidthState and returns new state.\n *  - It uses existing state for existing columns.\n *  - It removes any state for columns no longer present.\n *  - It checks if any column has been replaced and returns updated state if so\n *  - It returns old state if no changes in the state have been made (so that react doesn't call effects)\n * @param columns\n * @param state\n * @returns\n */\n\nexport function columnDefinitionsToState<T>(\n  columns: TableColumnDefinition<T>[],\n  state: ColumnWidthState[] = [],\n  columnSizingOptions: TableColumnSizingOptions = {},\n): ColumnWidthState[] {\n  let updated = false;\n  const stateMap = new Map(state.map(s => [s.columnId, s]));\n\n  const updatedState = columns.map(column => {\n    const existingColumnState = stateMap.get(column.columnId);\n\n    if (existingColumnState) {\n      const {\n        idealWidth = existingColumnState.idealWidth,\n        minWidth = existingColumnState.minWidth,\n        padding = existingColumnState.padding,\n      } = columnSizingOptions[column.columnId] ?? {};\n\n      if (\n        idealWidth !== existingColumnState.idealWidth ||\n        minWidth !== existingColumnState.minWidth ||\n        padding !== existingColumnState.padding\n      ) {\n        updated = true;\n        return {\n          ...existingColumnState,\n          idealWidth,\n          width: idealWidth,\n          minWidth,\n          padding,\n        };\n      }\n      return existingColumnState;\n    }\n\n    const {\n      defaultWidth,\n      idealWidth = DEFAULT_WIDTH,\n      minWidth = DEFAULT_MIN_WIDTH,\n      padding,\n    } = columnSizingOptions[column.columnId] ?? {};\n\n    updated = true;\n    return {\n      columnId: column.columnId,\n      width: Math.max(defaultWidth ?? idealWidth, minWidth),\n      minWidth,\n      idealWidth: Math.max(defaultWidth ?? idealWidth, minWidth),\n      padding: padding ?? 16,\n    };\n  });\n\n  // If the length of the new state changed (column was added or removed) or any of\n  // the individual states has a new reference (column was replaced),\n  // we have to reset the column widths to their ideal width (because the column which was last may not be last now).\n  // Then the adjustColumnWidthsToFitContainer can do its job and properly stretch the last column.\n  if (updatedState.length !== state.length || updated) {\n    const column = updatedState.find(col => col.width > col.idealWidth);\n    if (column) {\n      column.width = column.idealWidth;\n    }\n\n    updated = true;\n  }\n\n  return updated ? updatedState : state;\n}\n\nexport function getColumnById(state: ColumnWidthState[], columnId: TableColumnId): ColumnWidthState | undefined {\n  return state.find(c => c.columnId === columnId);\n}\n\nexport function getColumnByIndex(state: ColumnWidthState[], index: number): ColumnWidthState | undefined {\n  return state[index];\n}\n\nexport function getTotalWidth(state: ColumnWidthState[]): number {\n  return state.reduce((sum, column) => sum + column.width + column.padding, 0);\n}\n\nexport function getLength(state: ColumnWidthState[]): number {\n  return state.length;\n}\n\nexport function getColumnWidth(state: ColumnWidthState[], columnId: TableColumnId): number {\n  const column = getColumnById(state, columnId);\n  return column?.width ?? 0;\n}\n\n/**\n * This function takes the current state and returns an updated state, so that it can be set.\n * The reason for this is that we can update the state multiple times before commiting to render.\n * This is an optimization and also prevents flickering.\n * It also returns new copy of the state only if the value is different than the one currently in\n * the state, further preventing unnecessary updates.\n * @param localState\n * @param columnId\n * @param property\n * @param value\n * @returns\n */\nexport function setColumnProperty(\n  localState: ColumnWidthState[],\n  columnId: TableColumnId,\n  property: keyof ColumnWidthState,\n  value: number,\n): ColumnWidthState[] {\n  const currentColumn = getColumnById(localState, columnId);\n\n  if (!currentColumn || currentColumn?.[property] === value) {\n    return localState;\n  }\n\n  const updatedColumn = { ...currentColumn, [property]: value };\n\n  const newState = localState.reduce((acc, current) => {\n    if (current.columnId === updatedColumn.columnId) {\n      return [...acc, updatedColumn];\n    }\n    return [...acc, current];\n  }, [] as ColumnWidthState[]);\n\n  return newState;\n}\n\n/**\n * This function takes the state and container width and makes sure the each column in the state\n * is its optimal width, and that the columns\n * a) fit to the container\n * b) always fill the whole container\n * @param state\n * @param containerWidth\n * @returns\n */\nexport function adjustColumnWidthsToFitContainer(\n  state: ColumnWidthState[],\n  containerWidth: number,\n): ColumnWidthState[] {\n  let newState = state;\n  const totalWidth = getTotalWidth(newState);\n\n  // The total width is smaller, we are expanding columns\n  if (totalWidth < containerWidth) {\n    let difference = containerWidth - totalWidth;\n    let i = 0;\n    // We start at the beginning and assign the columns their ideal width\n    while (i < newState.length && difference > 0) {\n      const currentCol = getColumnByIndex(newState, i);\n      if (!currentCol) {\n        break;\n      }\n      const colAdjustment = Math.min(currentCol.idealWidth - currentCol.width, difference);\n      newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width + colAdjustment);\n      difference -= colAdjustment;\n\n      // if there is still empty space, after all columns are their ideal sizes, assign it to the last column\n      if (i === newState.length - 1 && difference !== 0) {\n        const lastCol = getColumnByIndex(newState, i);\n        if (lastCol) {\n          newState = setColumnProperty(newState, lastCol.columnId, 'width', lastCol.width + difference);\n        }\n      }\n\n      i++;\n    }\n  }\n\n  // The total width is larger than container, we need to squash the columns\n  else if (totalWidth >= containerWidth) {\n    let difference = totalWidth - containerWidth;\n    // We start with the last column\n    let j = newState.length - 1;\n    while (j >= 0 && difference > 0) {\n      const currentCol = getColumnByIndex(newState, j);\n      if (!currentCol) {\n        j--;\n        continue;\n      }\n      if (currentCol.width > currentCol.minWidth) {\n        const colAdjustment = Math.min(currentCol.width - currentCol.minWidth, difference);\n        difference -= colAdjustment;\n        newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width - colAdjustment);\n      }\n      j--;\n    }\n  }\n\n  return newState;\n}\n"],"names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","columnDefinitionsToState","columns","state","columnSizingOptions","updated","stateMap","Map","map","s","columnId","updatedState","column","existingColumnState","get","idealWidth","minWidth","padding","width","defaultWidth","Math","max","length","find","col","getColumnById","c","getColumnByIndex","index","getTotalWidth","reduce","sum","getLength","getColumnWidth","setColumnProperty","localState","property","value","currentColumn","updatedColumn","newState","acc","current","adjustColumnWidthsToFitContainer","containerWidth","totalWidth","difference","i","currentCol","colAdjustment","min","lastCol","j"],"mappings":"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"}

package/lib/utils/isColumnSortable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/isColumnSortable.ts"],"sourcesContent":["import { TableColumnDefinition } from '../hooks/types';\n\nexport function isColumnSortable(column: TableColumnDefinition<unknown>): boolean {\n  return column.compare.length > 0;\n}\n"],"names":["isColumnSortable","column","compare","length"],"mappings":"AAEA,OAAO,SAASA,iBAAiBC,MAAsC;IACrE,OAAOA,OAAOC,OAAO,CAACC,MAAM,GAAG;AACjC"}
+{"version":3,"sources":["../src/utils/isColumnSortable.ts"],"sourcesContent":["import type { TableColumnDefinition } from '../hooks/types';\n\nexport function isColumnSortable(column: TableColumnDefinition<unknown>): boolean {\n  return column.compare.length > 0;\n}\n"],"names":["isColumnSortable","column","compare","length"],"mappings":"AAEA,OAAO,SAASA,iBAAiBC,MAAsC;IACrE,OAAOA,OAAOC,OAAO,CAACC,MAAM,GAAG;AACjC"}

package/lib-commonjs/components/DataGrid/DataGrid.types.js

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * State used in rendering DataGrid
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/components/DataGrid/DataGrid.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGrid/DataGrid.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SelectionHookParams, SelectionMode } from '@fluentui/react-utilities';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable' | 'composite';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: DataGridFocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n\n  /**\n   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n\n  compositeRowTabsterAttribute: TabsterDOMAttribute;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<SelectionHookParams, 'defaultSelectedItems' | 'selectedItems'> & {\n    /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /* eslint-enable @nx/workspace-consistent-callback-type */\n\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing, specific for each column\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n    onColumnResize?: (\n      e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n      data: { columnId: TableColumnId; width: number },\n    ) => void;\n    /**\n     * For column resizing. Allows for a container size to be adjusted by a number of pixels, to make\n     * sure the columns don't overflow the table.\n     * By default, this value is calculated internally based on other props, but can be overriden.\n     */\n    containerWidthOffset?: number;\n\n    /**\n     * Custom options for column resizing.\n     */\n    resizableColumnsOptions?: {\n      /**\n       * If true, columns will be auto-fitted to the container width.\n       * @default true\n       * */\n      autoFitColumns?: boolean;\n    };\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    | 'focusMode'\n    | 'selectableRows'\n    | 'subtleSelection'\n    | 'selectionAppearance'\n    | 'getRowId'\n    | 'resizableColumns'\n    | 'compositeRowTabsterAttribute'\n  >;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/DataGrid/DataGrid.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { SelectionHookParams, SelectionMode } from '@fluentui/react-utilities';\nimport type { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport type { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable' | 'composite';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: DataGridFocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n\n  /**\n   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n\n  compositeRowTabsterAttribute: TabsterDOMAttribute;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<SelectionHookParams, 'defaultSelectedItems' | 'selectedItems'> & {\n    /* eslint-disable @nx/workspace-consistent-callback-type -- can't change type of existing callback */\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /* eslint-enable @nx/workspace-consistent-callback-type */\n\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing, specific for each column\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n    onColumnResize?: (\n      e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n      data: { columnId: TableColumnId; width: number },\n    ) => void;\n    /**\n     * For column resizing. Allows for a container size to be adjusted by a number of pixels, to make\n     * sure the columns don't overflow the table.\n     * By default, this value is calculated internally based on other props, but can be overriden.\n     */\n    containerWidthOffset?: number;\n\n    /**\n     * Custom options for column resizing.\n     */\n    resizableColumnsOptions?: {\n      /**\n       * If true, columns will be auto-fitted to the container width.\n       * @default true\n       * */\n      autoFitColumns?: boolean;\n    };\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    | 'focusMode'\n    | 'selectableRows'\n    | 'subtleSelection'\n    | 'selectionAppearance'\n    | 'getRowId'\n    | 'resizableColumns'\n    | 'compositeRowTabsterAttribute'\n  >;\n"],"names":[],"mappings":"AA2GA;;CAEC,GACD,WASI"}

package/lib-commonjs/components/DataGrid/useDataGridContextValues.js

@@ -9,13 +9,13 @@ Object.defineProperty(exports, "useDataGridContextValues_unstable", {
         return useDataGridContextValues_unstable;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useTableContextValues = require("../Table/useTableContextValues");
 function useDataGridContextValues_unstable(state) {
     const tableContextValues = (0, _useTableContextValues.useTableContextValues_unstable)(state);
     const { tableState, focusMode, selectableRows, subtleSelection, selectionAppearance, resizableColumns, compositeRowTabsterAttribute } = state;
-    return {
-        ...tableContextValues,
-        dataGrid: {
+    const dataGrid = _react.useMemo(()=>({
             ...tableState,
             focusMode,
             selectableRows,
@@ -23,6 +23,17 @@ function useDataGridContextValues_unstable(state) {
             selectionAppearance,
             resizableColumns,
             compositeRowTabsterAttribute
-        }
+        }), [
+        tableState,
+        focusMode,
+        selectableRows,
+        subtleSelection,
+        selectionAppearance,
+        resizableColumns,
+        compositeRowTabsterAttribute
+    ]);
+    return {
+        ...tableContextValues,
+        dataGrid
     };
 }

package/lib-commonjs/components/DataGrid/useDataGridContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DataGrid/useDataGridContextValues.ts"],"sourcesContent":["'use client';\n\nimport { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  const {\n    tableState,\n    focusMode,\n    selectableRows,\n    subtleSelection,\n    selectionAppearance,\n    resizableColumns,\n    compositeRowTabsterAttribute,\n  } = state;\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...tableState,\n      focusMode,\n      selectableRows,\n      subtleSelection,\n      selectionAppearance,\n      resizableColumns,\n      compositeRowTabsterAttribute,\n    },\n  };\n}\n"],"names":["useTableContextValues_unstable","useDataGridContextValues_unstable","state","tableContextValues","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","resizableColumns","compositeRowTabsterAttribute","dataGrid"],"mappings":"AAAA;;;;;;;;;;;uCAE+C,iCAAiC;AAGzE,SAASC,kCAAkCC,KAAoB;IACpE,MAAMC,yBAAqBH,qDAAAA,EAA+BE;IAC1D,MAAM,EACJE,UAAU,EACVC,SAAS,EACTC,cAAc,EACdC,eAAe,EACfC,mBAAmB,EACnBC,gBAAgB,EAChBC,4BAA4B,EAC7B,GAAGR;IACJ,OAAO;QACL,GAAGC,kBAAkB;QACrBQ,UAAU;YACR,GAAGP,UAAU;YACbC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;IACF;AACF"}
+{"version":3,"sources":["../src/components/DataGrid/useDataGridContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport type { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  const {\n    tableState,\n    focusMode,\n    selectableRows,\n    subtleSelection,\n    selectionAppearance,\n    resizableColumns,\n    compositeRowTabsterAttribute,\n  } = state;\n\n  const dataGrid = React.useMemo(\n    () => ({\n      ...tableState,\n      focusMode,\n      selectableRows,\n      subtleSelection,\n      selectionAppearance,\n      resizableColumns,\n      compositeRowTabsterAttribute,\n    }),\n    [\n      tableState,\n      focusMode,\n      selectableRows,\n      subtleSelection,\n      selectionAppearance,\n      resizableColumns,\n      compositeRowTabsterAttribute,\n    ],\n  );\n\n  return {\n    ...tableContextValues,\n    dataGrid,\n  };\n}\n"],"names":["React","useTableContextValues_unstable","useDataGridContextValues_unstable","state","tableContextValues","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","resizableColumns","compositeRowTabsterAttribute","dataGrid","useMemo"],"mappings":"AAAA;;;;;+BAMgBE;;;;;;;iEAJO,QAAQ;uCACgB,iCAAiC;AAGzE,2CAA2CC,KAAoB;IACpE,MAAMC,yBAAqBH,qDAAAA,EAA+BE;IAC1D,MAAM,EACJE,UAAU,EACVC,SAAS,EACTC,cAAc,EACdC,eAAe,EACfC,mBAAmB,EACnBC,gBAAgB,EAChBC,4BAA4B,EAC7B,GAAGR;IAEJ,MAAMS,WAAWZ,OAAMa,OAAO,CAC5B,IAAO,CAAA;YACL,GAAGR,UAAU;YACbC;YACAC;YACAC;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QACEN;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QACL,GAAGP,kBAAkB;QACrBQ;IACF;AACF"}