@fluentui/react-table 9.14.0 → 9.15.1

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @fluentui/react-table
 
-This log was last generated on Wed, 17 Apr 2024 21:47:28 GMT and should not be manually modified.
+This log was last generated on Thu, 02 May 2024 11:31:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.15.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.15.1)
+
+Thu, 02 May 2024 11:31:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.15.0..@fluentui/react-table_v9.15.1)
+
+### Patches
+
+-  chore: upgrade @fluentui/react-icons to 2.0.237. ([PR #31139](https://github.com/microsoft/fluentui/pull/31139) by ololubek@microsoft.com)
+- refactor: use timeout and animation frame utilities ([PR #31168](https://github.com/microsoft/fluentui/pull/31168) by lingfangao@hotmail.com)
+- Bump @fluentui/react-aria to v9.11.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-avatar to v9.6.23 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-checkbox to v9.2.22 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-radio to v9.2.17 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+- Bump @fluentui/react-tabster to v9.21.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
+
+## [9.15.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.15.0)
+
+Tue, 23 Apr 2024 08:17:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.14.0..@fluentui/react-table_v9.15.0)
+
+### Minor changes
+
+- fix: Table and DataGrid should not remove cells from the accessibility tree ([PR #31068](https://github.com/microsoft/fluentui/pull/31068) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-aria to v9.10.5 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-avatar to v9.6.22 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-checkbox to v9.2.21 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.58 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-radio to v9.2.16 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.17.0 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-tabster to v9.20.1 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-utilities to v9.18.7 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.36 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+
 ## [9.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.14.0)
 
-Wed, 17 Apr 2024 21:47:28 GMT 
+Wed, 17 Apr 2024 21:53:59 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.13.0..@fluentui/react-table_v9.14.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -784,10 +784,15 @@ export declare type TableSelectionCellProps = ComponentProps<Partial<TableSelect
      */
     subtle?: boolean;
     /**
-     * Completely hides the selection cell visually but takes up the same space
-     * @default false
+     * Completely hides the selection cell
+     * @deprecated cells should never use hidden, since doing so breaks table structure and screen reader navigation. Use `invisible` instead.
      */
     hidden?: boolean;
+    /**
+     * Hides the selection cell visually but takes up the same space
+     * @default false
+     */
+    invisible?: boolean;
 };
 
 export declare type TableSelectionCellSlots = {
@@ -804,7 +809,9 @@ export declare type TableSelectionCellSlots = {
 /**
  * State used in rendering TableSelectionCell
  */
-export declare type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle' | 'hidden'> & Pick<TableContextValue, 'noNativeElements'>;
+export declare type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle'> & Pick<TableContextValue, 'noNativeElements'> & {
+    hidden: boolean;
+};
 
 export declare interface TableSelectionState {
     /**

package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js

@@ -36,8 +36,8 @@ import { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSe
         role: 'gridcell',
         checked,
         type,
-        hidden: isHeader && type === 'radio',
-        'aria-checked': isHeader ? checked : undefined,
+        invisible: isHeader && type === 'radio',
+        'aria-checked': isHeader && type !== 'radio' ? checked : undefined,
         'aria-selected': isHeader || checked === 'mixed' ? undefined : checked,
         subtle,
         ...props,

package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDataGridSelectionCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\nimport { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';\nimport type { DataGridSelectionCellProps, DataGridSelectionCellState } from './DataGridSelectionCell.types';\n\n/**\n * Create the state required to render DataGridSelectionCell.\n *\n * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,\n * before being passed to renderDataGridSelectionCell_unstable.\n *\n * @param props - props from this instance of DataGridSelectionCell\n * @param ref - reference to root HTMLElement of DataGridSelectionCell\n */\nexport const useDataGridSelectionCell_unstable = (\n  props: DataGridSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridSelectionCellState => {\n  const isHeader = useIsInTableHeader();\n  const rowId = useTableRowIdContext();\n  const subtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);\n  const checked = useDataGridContext_unstable(ctx => {\n    if (isHeader && ctx.selection.selectionMode === 'multiselect') {\n      return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;\n    }\n\n    return ctx.selection.isRowSelected(rowId);\n  });\n\n  const toggleAllRows = useDataGridContext_unstable(ctx => ctx.selection.toggleAllRows);\n  const type = useDataGridContext_unstable(ctx =>\n    ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio',\n  );\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableCellElement>) => {\n    if (isHeader) {\n      toggleAllRows(e);\n    }\n\n    props.onClick?.(e);\n  });\n\n  return useTableSelectionCell_unstable(\n    {\n      as: 'div',\n      role: 'gridcell',\n      checked,\n      type,\n      hidden: isHeader && type === 'radio',\n      'aria-checked': isHeader ? checked : undefined,\n      'aria-selected': isHeader || checked === 'mixed' ? undefined : checked,\n      subtle,\n      ...props,\n      onClick,\n    },\n    ref,\n  );\n};\n"],"names":["React","useEventCallback","useDataGridContext_unstable","useTableRowIdContext","useIsInTableHeader","useTableSelectionCell_unstable","useDataGridSelectionCell_unstable","props","ref","isHeader","rowId","subtle","ctx","subtleSelection","checked","selection","selectionMode","allRowsSelected","someRowsSelected","isRowSelected","toggleAllRows","type","onClick","e","as","role","hidden","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE,SAASC,kBAAkB,QAAQ,oCAAoC;AACvE,SAASC,8BAA8B,QAAQ,8CAA8C;AAG7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAMC,WAAWL;IACjB,MAAMM,QAAQP;IACd,MAAMQ,SAAST,4BAA4BU,CAAAA,MAAOA,IAAIC,eAAe;IACrE,MAAMC,UAAUZ,4BAA4BU,CAAAA;QAC1C,IAAIH,YAAYG,IAAIG,SAAS,CAACC,aAAa,KAAK,eAAe;YAC7D,OAAOJ,IAAIG,SAAS,CAACE,eAAe,GAAG,OAAOL,IAAIG,SAAS,CAACG,gBAAgB,GAAG,UAAU;QAC3F;QAEA,OAAON,IAAIG,SAAS,CAACI,aAAa,CAACT;IACrC;IAEA,MAAMU,gBAAgBlB,4BAA4BU,CAAAA,MAAOA,IAAIG,SAAS,CAACK,aAAa;IACpF,MAAMC,OAAOnB,4BAA4BU,CAAAA,MACvCA,IAAIG,SAAS,CAACC,aAAa,KAAK,gBAAgB,aAAa;IAG/D,MAAMM,UAAUrB,iBAAiB,CAACsB;YAKhChB;QAJA,IAAIE,UAAU;YACZW,cAAcG;QAChB;SAEAhB,iBAAAA,MAAMe,OAAO,cAAbf,qCAAAA,oBAAAA,OAAgBgB;IAClB;IAEA,OAAOlB,+BACL;QACEmB,IAAI;QACJC,MAAM;QACNX;QACAO;QACAK,QAAQjB,YAAYY,SAAS;QAC7B,gBAAgBZ,WAAWK,UAAUa;QACrC,iBAAiBlB,YAAYK,YAAY,UAAUa,YAAYb;QAC/DH;QACA,GAAGJ,KAAK;QACRe;IACF,GACAd;AAEJ,EAAE"}
+{"version":3,"sources":["useDataGridSelectionCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\nimport { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';\nimport type { DataGridSelectionCellProps, DataGridSelectionCellState } from './DataGridSelectionCell.types';\n\n/**\n * Create the state required to render DataGridSelectionCell.\n *\n * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,\n * before being passed to renderDataGridSelectionCell_unstable.\n *\n * @param props - props from this instance of DataGridSelectionCell\n * @param ref - reference to root HTMLElement of DataGridSelectionCell\n */\nexport const useDataGridSelectionCell_unstable = (\n  props: DataGridSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): DataGridSelectionCellState => {\n  const isHeader = useIsInTableHeader();\n  const rowId = useTableRowIdContext();\n  const subtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);\n  const checked = useDataGridContext_unstable(ctx => {\n    if (isHeader && ctx.selection.selectionMode === 'multiselect') {\n      return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;\n    }\n\n    return ctx.selection.isRowSelected(rowId);\n  });\n\n  const toggleAllRows = useDataGridContext_unstable(ctx => ctx.selection.toggleAllRows);\n  const type = useDataGridContext_unstable(ctx =>\n    ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio',\n  );\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLTableCellElement>) => {\n    if (isHeader) {\n      toggleAllRows(e);\n    }\n\n    props.onClick?.(e);\n  });\n\n  return useTableSelectionCell_unstable(\n    {\n      as: 'div',\n      role: 'gridcell',\n      checked,\n      type,\n      invisible: isHeader && type === 'radio',\n      'aria-checked': isHeader && type !== 'radio' ? checked : undefined,\n      'aria-selected': isHeader || checked === 'mixed' ? undefined : checked,\n      subtle,\n      ...props,\n      onClick,\n    },\n    ref,\n  );\n};\n"],"names":["React","useEventCallback","useDataGridContext_unstable","useTableRowIdContext","useIsInTableHeader","useTableSelectionCell_unstable","useDataGridSelectionCell_unstable","props","ref","isHeader","rowId","subtle","ctx","subtleSelection","checked","selection","selectionMode","allRowsSelected","someRowsSelected","isRowSelected","toggleAllRows","type","onClick","e","as","role","invisible","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE,SAASC,kBAAkB,QAAQ,oCAAoC;AACvE,SAASC,8BAA8B,QAAQ,8CAA8C;AAG7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAMC,WAAWL;IACjB,MAAMM,QAAQP;IACd,MAAMQ,SAAST,4BAA4BU,CAAAA,MAAOA,IAAIC,eAAe;IACrE,MAAMC,UAAUZ,4BAA4BU,CAAAA;QAC1C,IAAIH,YAAYG,IAAIG,SAAS,CAACC,aAAa,KAAK,eAAe;YAC7D,OAAOJ,IAAIG,SAAS,CAACE,eAAe,GAAG,OAAOL,IAAIG,SAAS,CAACG,gBAAgB,GAAG,UAAU;QAC3F;QAEA,OAAON,IAAIG,SAAS,CAACI,aAAa,CAACT;IACrC;IAEA,MAAMU,gBAAgBlB,4BAA4BU,CAAAA,MAAOA,IAAIG,SAAS,CAACK,aAAa;IACpF,MAAMC,OAAOnB,4BAA4BU,CAAAA,MACvCA,IAAIG,SAAS,CAACC,aAAa,KAAK,gBAAgB,aAAa;IAG/D,MAAMM,UAAUrB,iBAAiB,CAACsB;YAKhChB;QAJA,IAAIE,UAAU;YACZW,cAAcG;QAChB;SAEAhB,iBAAAA,MAAMe,OAAO,cAAbf,qCAAAA,oBAAAA,OAAgBgB;IAClB;IAEA,OAAOlB,+BACL;QACEmB,IAAI;QACJC,MAAM;QACNX;QACAO;QACAK,WAAWjB,YAAYY,SAAS;QAChC,gBAAgBZ,YAAYY,SAAS,UAAUP,UAAUa;QACzD,iBAAiBlB,YAAYK,YAAY,UAAUa,YAAYb;QAC/DH;QACA,GAAGJ,KAAK;QACRe;IACF,GACAd;AAEJ,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["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 visually but takes up the same space\n   * @default false\n   */\n  hidden?: boolean;\n};\n\n/**\n * State used in rendering TableSelectionCell\n */\nexport type TableSelectionCellState = ComponentState<TableSelectionCellSlots> &\n  Pick<Required<TableSelectionCellProps>, 'type' | 'checked' | 'subtle' | 'hidden'> &\n  Pick<TableContextValue, 'noNativeElements'>;\n"],"names":[],"mappings":"AAAA,WAkD8C"}
+{"version":3,"sources":["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":"AAAA,WA2DI"}

package/lib/components/TableSelectionCell/useTableSelectionCell.js

@@ -15,7 +15,8 @@ import { useTableContext } from '../../contexts/tableContext';
  */ export const useTableSelectionCell_unstable = (props, ref)=>{
     const tableCellState = useTableCell_unstable(props, ref);
     const { noNativeElements } = useTableContext();
-    const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;
+    const { type = 'checkbox', checked = false, subtle = false, // eslint-disable-next-line deprecation/deprecation
+    hidden = false, invisible = false } = props;
     return {
         ...tableCellState,
         components: {
@@ -24,14 +25,14 @@ import { useTableContext } from '../../contexts/tableContext';
             radioIndicator: Radio
         },
         checkboxIndicator: slot.optional(props.checkboxIndicator, {
-            renderByDefault: type === 'checkbox',
+            renderByDefault: type === 'checkbox' && !invisible,
             defaultProps: {
                 checked: props.checked
             },
             elementType: Checkbox
         }),
         radioIndicator: slot.optional(props.radioIndicator, {
-            renderByDefault: type === 'radio',
+            renderByDefault: type === 'radio' && !invisible,
             defaultProps: {
                 checked: !!checked,
                 input: {
@@ -44,6 +45,6 @@ import { useTableContext } from '../../contexts/tableContext';
         checked,
         noNativeElements,
         subtle,
-        hidden
+        hidden: invisible || hidden
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, ref);\n  const { noNativeElements } = useTableContext();\n  const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;\n\n  return {\n    ...tableCellState,\n    components: {\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: Radio,\n    },\n    checkboxIndicator: slot.optional(props.checkboxIndicator, {\n      renderByDefault: type === 'checkbox',\n      defaultProps: { checked: props.checked },\n      elementType: Checkbox,\n    }),\n    radioIndicator: slot.optional(props.radioIndicator, {\n      renderByDefault: type === 'radio',\n      defaultProps: { checked: !!checked, input: { name: useId('table-selection-radio') } },\n      elementType: Radio,\n    }),\n    type,\n    checked,\n    noNativeElements,\n    subtle,\n    hidden,\n  };\n};\n"],"names":["React","useId","slot","Checkbox","Radio","useTableCell_unstable","useTableContext","useTableSelectionCell_unstable","props","ref","tableCellState","noNativeElements","type","checked","subtle","hidden","components","checkboxIndicator","radioIndicator","optional","renderByDefault","defaultProps","elementType","input","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACxD,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,iBAAiBL,sBAAsBG,OAAOC;IACpD,MAAM,EAAEE,gBAAgB,EAAE,GAAGL;IAC7B,MAAM,EAAEM,OAAO,UAAU,EAAEC,UAAU,KAAK,EAAEC,SAAS,KAAK,EAAEC,SAAS,KAAK,EAAE,GAAGP;IAE/E,OAAO;QACL,GAAGE,cAAc;QACjBM,YAAY;YACV,GAAGN,eAAeM,UAAU;YAC5BC,mBAAmBd;YACnBe,gBAAgBd;QAClB;QACAa,mBAAmBf,KAAKiB,QAAQ,CAACX,MAAMS,iBAAiB,EAAE;YACxDG,iBAAiBR,SAAS;YAC1BS,cAAc;gBAAER,SAASL,MAAMK,OAAO;YAAC;YACvCS,aAAanB;QACf;QACAe,gBAAgBhB,KAAKiB,QAAQ,CAACX,MAAMU,cAAc,EAAE;YAClDE,iBAAiBR,SAAS;YAC1BS,cAAc;gBAAER,SAAS,CAAC,CAACA;gBAASU,OAAO;oBAAEC,MAAMvB,MAAM;gBAAyB;YAAE;YACpFqB,aAAalB;QACf;QACAQ;QACAC;QACAF;QACAG;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, ref);\n  const { noNativeElements } = useTableContext();\n  const {\n    type = 'checkbox',\n    checked = false,\n    subtle = false,\n    // eslint-disable-next-line deprecation/deprecation\n    hidden = false,\n    invisible = false,\n  } = props;\n\n  return {\n    ...tableCellState,\n    components: {\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: Radio,\n    },\n    checkboxIndicator: slot.optional(props.checkboxIndicator, {\n      renderByDefault: type === 'checkbox' && !invisible,\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","Checkbox","Radio","useTableCell_unstable","useTableContext","useTableSelectionCell_unstable","props","ref","tableCellState","noNativeElements","type","checked","subtle","hidden","invisible","components","checkboxIndicator","radioIndicator","optional","renderByDefault","defaultProps","elementType","input","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACxD,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,iBAAiBL,sBAAsBG,OAAOC;IACpD,MAAM,EAAEE,gBAAgB,EAAE,GAAGL;IAC7B,MAAM,EACJM,OAAO,UAAU,EACjBC,UAAU,KAAK,EACfC,SAAS,KAAK,EACd,mDAAmD;IACnDC,SAAS,KAAK,EACdC,YAAY,KAAK,EAClB,GAAGR;IAEJ,OAAO;QACL,GAAGE,cAAc;QACjBO,YAAY;YACV,GAAGP,eAAeO,UAAU;YAC5BC,mBAAmBf;YACnBgB,gBAAgBf;QAClB;QACAc,mBAAmBhB,KAAKkB,QAAQ,CAACZ,MAAMU,iBAAiB,EAAE;YACxDG,iBAAiBT,SAAS,cAAc,CAACI;YACzCM,cAAc;gBAAET,SAASL,MAAMK,OAAO;YAAC;YACvCU,aAAapB;QACf;QACAgB,gBAAgBjB,KAAKkB,QAAQ,CAACZ,MAAMW,cAAc,EAAE;YAClDE,iBAAiBT,SAAS,WAAW,CAACI;YACtCM,cAAc;gBAAET,SAAS,CAAC,CAACA;gBAASW,OAAO;oBAAEC,MAAMxB,MAAM;gBAAyB;YAAE;YACpFsB,aAAanB;QACf;QACAQ;QACAC;QACAF;QACAG;QACAC,QAAQC,aAAaD;IACvB;AACF,EAAE"}

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

@@ -58,10 +58,10 @@ const useStyles = /*#__PURE__*/__styles({
     B8a84jv: "f1y7ij6c"
   },
   hidden: {
-    Bcdw1i0: "fd7fpy0"
+    abs64n: "fk73vx1"
   }
 }, {
-  d: [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f22iagw{display:flex;}", ".fqerorx{flex-grow:1;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".fk73vx1{opacity:0;}", ".f1y7ij6c[data-fui-focus-within]:focus-within{opacity:1;}", ".fd7fpy0{visibility:hidden;}"]
+  d: [".f17mccla{text-align:center;}", ".fz5stix{white-space:nowrap;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f22iagw{display:flex;}", ".fqerorx{flex-grow:1;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".fk73vx1{opacity:0;}", ".f1y7ij6c[data-fui-focus-within]:focus-within{opacity:1;}"]
 });
 /**
  * Apply styling to the TableSelectionCell slots based on the state

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","mc9l5x","a9b677","d","useFlexLayoutStyles","Bh6795r","Bnnss6s","xawz","Bf4jedk","B2u0y6b","Brf1p80","useStyles","fsow6f","Huce71","z8tnut","z189sj","Byoj8tv","uwmqm3","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","Bt984gj","subtle","abs64n","B8a84jv","hidden","Bcdw1i0","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","checked"],"sources":["useTableSelectionCellStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const CELL_WIDTH = 44;\nexport const tableSelectionCellClassNames = {\n    root: 'fui-TableSelectionCell',\n    checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n    radioIndicator: 'fui-TableSelectionCell__radioIndicator'\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-cell',\n        width: `${CELL_WIDTH}px`\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        ...shorthands.flex(1, 1, '0px'),\n        minWidth: `${CELL_WIDTH}px`,\n        maxWidth: `${CELL_WIDTH}px`,\n        justifyContent: 'center'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        textAlign: 'center',\n        whiteSpace: 'nowrap',\n        ...shorthands.padding(0),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium)\n        }, {\n            selector: 'focus'\n        })\n    },\n    radioIndicator: {\n        display: 'flex',\n        flexGrow: 1,\n        alignItems: 'center',\n        justifyContent: 'center'\n    },\n    subtle: {\n        opacity: 0,\n        ...createCustomFocusIndicatorStyle({\n            opacity: 1\n        }, {\n            selector: 'focus-within'\n        })\n    },\n    hidden: {\n        visibility: 'hidden'\n    }\n});\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */ export const useTableSelectionCellStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);\n    if (state.checkboxIndicator) {\n        state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n    }\n    if (state.radioIndicator) {\n        state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,4BAA4B,GAAG;EACxCC,IAAI,EAAE,wBAAwB;EAC9BC,iBAAiB,EAAE,2CAA2C;EAC9DC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,oBAAoB,gBAAGV,QAAA;EAAAO,IAAA;IAAAI,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAK5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGd,QAAA;EAAAO,IAAA;IAAAI,MAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAP,CAAA;AAAA,CAQ3B,CAAC;AACF;AACA;AACA;AAAI,MAAMQ,SAAS,gBAAGrB,QAAA;EAAAO,IAAA;IAAAe,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAzB,cAAA;IAAAE,MAAA;IAAAI,OAAA;IAAAoB,OAAA;IAAAf,OAAA;EAAA;EAAAgB,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAA3B,CAAA;AAAA,CA6BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAM4B,oCAAoC,GAAIC,KAAK,IAAG;EAC7D,MAAMC,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1B,MAAMuB,YAAY,GAAG;IACjBC,KAAK,EAAEnC,oBAAoB,CAAC,CAAC;IAC7BoC,IAAI,EAAEhC,mBAAmB,CAAC;EAC9B,CAAC;EACD4B,KAAK,CAACnC,IAAI,CAACwC,SAAS,GAAG9C,YAAY,CAACK,4BAA4B,CAACC,IAAI,EAAEoC,MAAM,CAACpC,IAAI,EAAEmC,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACvC,IAAI,GAAGqC,YAAY,CAACC,KAAK,CAACtC,IAAI,EAAEmC,KAAK,CAACN,MAAM,IAAIM,KAAK,CAACO,OAAO,KAAK,KAAK,IAAIN,MAAM,CAACP,MAAM,EAAEM,KAAK,CAACH,MAAM,IAAII,MAAM,CAACJ,MAAM,EAAEG,KAAK,CAACnC,IAAI,CAACwC,SAAS,CAAC;EAC7Q,IAAIL,KAAK,CAAClC,iBAAiB,EAAE;IACzBkC,KAAK,CAAClC,iBAAiB,CAACuC,SAAS,GAAG9C,YAAY,CAACK,4BAA4B,CAACE,iBAAiB,EAAEkC,KAAK,CAAClC,iBAAiB,CAACuC,SAAS,CAAC;EACvI;EACA,IAAIL,KAAK,CAACjC,cAAc,EAAE;IACtBiC,KAAK,CAACjC,cAAc,CAACsC,SAAS,GAAG9C,YAAY,CAACK,4BAA4B,CAACG,cAAc,EAAEkC,MAAM,CAAClC,cAAc,EAAEiC,KAAK,CAACjC,cAAc,CAACsC,SAAS,CAAC;EACrJ;EACA,OAAOL,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","CELL_WIDTH","tableSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","mc9l5x","a9b677","d","useFlexLayoutStyles","Bh6795r","Bnnss6s","xawz","Bf4jedk","B2u0y6b","Brf1p80","useStyles","fsow6f","Huce71","z8tnut","z189sj","Byoj8tv","uwmqm3","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","Bt984gj","subtle","abs64n","B8a84jv","hidden","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","checked"],"sources":["useTableSelectionCellStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const CELL_WIDTH = 44;\nexport const tableSelectionCellClassNames = {\n    root: 'fui-TableSelectionCell',\n    checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n    radioIndicator: 'fui-TableSelectionCell__radioIndicator'\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-cell',\n        width: `${CELL_WIDTH}px`\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        ...shorthands.flex(1, 1, '0px'),\n        minWidth: `${CELL_WIDTH}px`,\n        maxWidth: `${CELL_WIDTH}px`,\n        justifyContent: 'center'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        textAlign: 'center',\n        whiteSpace: 'nowrap',\n        ...shorthands.padding(0),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium)\n        }, {\n            selector: 'focus'\n        })\n    },\n    radioIndicator: {\n        display: 'flex',\n        flexGrow: 1,\n        alignItems: 'center',\n        justifyContent: 'center'\n    },\n    subtle: {\n        opacity: 0,\n        ...createCustomFocusIndicatorStyle({\n            opacity: 1\n        }, {\n            selector: 'focus-within'\n        })\n    },\n    hidden: {\n        opacity: 0\n    }\n});\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */ export const useTableSelectionCellStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);\n    if (state.checkboxIndicator) {\n        state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n    }\n    if (state.radioIndicator) {\n        state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,4BAA4B,GAAG;EACxCC,IAAI,EAAE,wBAAwB;EAC9BC,iBAAiB,EAAE,2CAA2C;EAC9DC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,oBAAoB,gBAAGV,QAAA;EAAAO,IAAA;IAAAI,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAK5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGd,QAAA;EAAAO,IAAA;IAAAI,MAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAP,CAAA;AAAA,CAQ3B,CAAC;AACF;AACA;AACA;AAAI,MAAMQ,SAAS,gBAAGrB,QAAA;EAAAO,IAAA;IAAAe,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAzB,cAAA;IAAAE,MAAA;IAAAI,OAAA;IAAAoB,OAAA;IAAAf,OAAA;EAAA;EAAAgB,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAF,MAAA;EAAA;AAAA;EAAAxB,CAAA;AAAA,CA6BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAM2B,oCAAoC,GAAIC,KAAK,IAAG;EAC7D,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1B,MAAMsB,YAAY,GAAG;IACjBC,KAAK,EAAElC,oBAAoB,CAAC,CAAC;IAC7BmC,IAAI,EAAE/B,mBAAmB,CAAC;EAC9B,CAAC;EACD2B,KAAK,CAAClC,IAAI,CAACuC,SAAS,GAAG7C,YAAY,CAACK,4BAA4B,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACtC,IAAI,GAAGoC,YAAY,CAACC,KAAK,CAACrC,IAAI,EAAEkC,KAAK,CAACL,MAAM,IAAIK,KAAK,CAACO,OAAO,KAAK,KAAK,IAAIN,MAAM,CAACN,MAAM,EAAEK,KAAK,CAACF,MAAM,IAAIG,MAAM,CAACH,MAAM,EAAEE,KAAK,CAAClC,IAAI,CAACuC,SAAS,CAAC;EAC7Q,IAAIL,KAAK,CAACjC,iBAAiB,EAAE;IACzBiC,KAAK,CAACjC,iBAAiB,CAACsC,SAAS,GAAG7C,YAAY,CAACK,4BAA4B,CAACE,iBAAiB,EAAEiC,KAAK,CAACjC,iBAAiB,CAACsC,SAAS,CAAC;EACvI;EACA,IAAIL,KAAK,CAAChC,cAAc,EAAE;IACtBgC,KAAK,CAAChC,cAAc,CAACqC,SAAS,GAAG7C,YAAY,CAACK,4BAA4B,CAACG,cAAc,EAAEiC,MAAM,CAACjC,cAAc,EAAEgC,KAAK,CAAChC,cAAc,CAACqC,SAAS,CAAC;EACrJ;EACA,OAAOL,KAAK;AAChB,CAAC"}

package/lib/hooks/useTableColumnResizeMouseHandler.js

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { getEventClientCoords, isMouseEvent, isTouchEvent } from '@fluentui/react-utilities';
+import { getEventClientCoords, isMouseEvent, isTouchEvent, useAnimationFrame } from '@fluentui/react-utilities';
 export function useTableColumnResizeMouseHandler(columnResizeState) {
     const mouseX = React.useRef(0);
     const currentWidth = React.useRef(0);
     const colId = React.useRef(undefined);
     const [dragging, setDragging] = React.useState(false);
     const { targetDocument } = useFluent();
-    const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
     const { getColumnWidth, setColumnWidth } = columnResizeState;
     const recalculatePosition = React.useCallback((e)=>{
         const { clientX } = getEventClientCoords(e);
@@ -22,15 +21,12 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
     }, [
         setColumnWidth
     ]);
+    const [requestRecalcFrame] = useAnimationFrame();
     const onDrag = React.useCallback((e)=>{
         // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs
-        if (typeof (globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame) === 'function') {
-            requestAnimationFrame(()=>recalculatePosition(e));
-        } else {
-            recalculatePosition(e);
-        }
+        requestRecalcFrame(()=>recalculatePosition(e));
     }, [
-        globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame,
+        requestRecalcFrame,
         recalculatePosition
     ]);
     const onDragEnd = React.useCallback((event)=>{

package/lib/hooks/useTableColumnResizeMouseHandler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  NativeTouchOrMouseEvent,\n  ReactTouchOrMouseEvent,\n  getEventClientCoords,\n  isMouseEvent,\n  isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\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 onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => recalculatePosition(e));\n      } else {\n        recalculatePosition(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, recalculatePosition],\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: NativeTouchOrMouseEvent) => {\n      if (isMouseEvent(event)) {\n        targetDocument?.removeEventListener('mouseup', onDragEnd);\n        targetDocument?.removeEventListener('mousemove', onDrag);\n      }\n      if (isTouchEvent(event)) {\n        targetDocument?.removeEventListener('touchend', onDragEnd);\n        targetDocument?.removeEventListener('touchmove', onDrag);\n      }\n      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","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","dragging","setDragging","useState","targetDocument","globalWin","defaultView","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","dx","current","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","target","currentTarget","button","addEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAGEC,oBAAoB,EACpBC,YAAY,EACZC,YAAY,QACP,4BAA4B;AAEnC,OAAO,SAASC,iCAAiCC,iBAAoC;IACnF,MAAMC,SAASR,MAAMS,MAAM,CAAC;IAC5B,MAAMC,eAAeV,MAAMS,MAAM,CAAC;IAClC,MAAME,QAAQX,MAAMS,MAAM,CAA4BG;IACtD,MAAM,CAACC,UAAUC,YAAY,GAAGd,MAAMe,QAAQ,CAAU;IAExD,MAAM,EAAEC,cAAc,EAAE,GAAGd;IAC3B,MAAMe,YAAYD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAE7C,MAAM,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGb;IAE3C,MAAMc,sBAAsBrB,MAAMsB,WAAW,CAC3C,CAACC;QACC,MAAM,EAAEC,OAAO,EAAE,GAAGrB,qBAAqBoB;QACzC,MAAME,KAAKD,UAAUhB,OAAOkB,OAAO;QAEnC,mDAAmD;QACnDhB,aAAagB,OAAO,IAAID;QACxBd,MAAMe,OAAO,IAAIN,eAAeG,GAAG;YAAEI,UAAUhB,MAAMe,OAAO;YAAEE,OAAOlB,aAAagB,OAAO;QAAC;QAC1FlB,OAAOkB,OAAO,GAAGF;IACnB,GACA;QAACJ;KAAe;IAGlB,MAAMS,SAAS7B,MAAMsB,WAAW,CAC9B,CAACC;QACC,2FAA2F;QAC3F,IAAI,QAAON,sBAAAA,gCAAAA,UAAWa,qBAAqB,MAAK,YAAY;YAC1DA,sBAAsB,IAAMT,oBAAoBE;QAClD,OAAO;YACLF,oBAAoBE;QACtB;IACF,GACA;QAACN,sBAAAA,gCAAAA,UAAWa,qBAAqB;QAAET;KAAoB;IAGzD,MAAMU,YAAY/B,MAAMsB,WAAW,CACjC,CAACU;QACC,IAAI5B,aAAa4B,QAAQ;YACvBhB,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,WAAWF;YAC/Cf,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,aAAaJ;QACnD;QACA,IAAIxB,aAAa2B,QAAQ;YACvBhB,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,YAAYF;YAChDf,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,aAAaJ;QACnD;QACAf,YAAY;IACd,GACA;QAACe;QAAQb;KAAe;IAG1B,MAAMkB,iBAAiBlC,MAAMsB,WAAW,CACtC,CAACK,WAA4B,CAACK;YAC5B,8FAA8F;YAC9F,+DAA+D;YAC/DtB,aAAagB,OAAO,GAAGP,eAAeQ;YACtCnB,OAAOkB,OAAO,GAAGvB,qBAAqB6B,OAAOR,OAAO;YACpDb,MAAMe,OAAO,GAAGC;YAEhB,IAAIvB,aAAa4B,QAAQ;gBACvB,iDAAiD;gBACjD,IAAIA,MAAMG,MAAM,KAAKH,MAAMI,aAAa,IAAIJ,MAAMK,MAAM,KAAK,GAAG;oBAC9D;gBACF;gBACArB,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,WAAWP;gBAC5Cf,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,aAAaT;gBAC9Cf,YAAY;YACd;YAEA,IAAIT,aAAa2B,QAAQ;gBACvBhB,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,YAAYP;gBAC7Cf,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,aAAaT;gBAC9Cf,YAAY;YACd;QACF,GACA;QAACK;QAAgBU;QAAQE;QAAWf;KAAe;IAGrD,OAAO;QACLkB;QACArB;IACF;AACF"}
+{"version":3,"sources":["useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  NativeTouchOrMouseEvent,\n  ReactTouchOrMouseEvent,\n  getEventClientCoords,\n  isMouseEvent,\n  isTouchEvent,\n  useAnimationFrame,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const { targetDocument } = useFluent();\n\n  const { getColumnWidth, setColumnWidth } = columnResizeState;\n\n  const recalculatePosition = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      const { clientX } = getEventClientCoords(e);\n      const dx = clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = clientX;\n    },\n    [setColumnWidth],\n  );\n\n  const [requestRecalcFrame] = useAnimationFrame();\n\n  const onDrag = React.useCallback(\n    (e: NativeTouchOrMouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      requestRecalcFrame(() => recalculatePosition(e));\n    },\n    [requestRecalcFrame, recalculatePosition],\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: NativeTouchOrMouseEvent) => {\n      if (isMouseEvent(event)) {\n        targetDocument?.removeEventListener('mouseup', onDragEnd);\n        targetDocument?.removeEventListener('mousemove', onDrag);\n      }\n      if (isTouchEvent(event)) {\n        targetDocument?.removeEventListener('touchend', onDragEnd);\n        targetDocument?.removeEventListener('touchmove', onDrag);\n      }\n      setDragging(false);\n    },\n    [onDrag, targetDocument],\n  );\n\n  const getOnMouseDown = React.useCallback(\n    (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n      // Keep the width locally so that we decouple the calculation of the next with from rendering.\n      // This makes the whole experience much faster and more precise\n      currentWidth.current = getColumnWidth(columnId);\n      mouseX.current = getEventClientCoords(event).clientX;\n      colId.current = columnId;\n\n      if (isMouseEvent(event)) {\n        // ignore other buttons than primary mouse button\n        if (event.target !== event.currentTarget || event.button !== 0) {\n          return;\n        }\n        targetDocument?.addEventListener('mouseup', onDragEnd);\n        targetDocument?.addEventListener('mousemove', onDrag);\n        setDragging(true);\n      }\n\n      if (isTouchEvent(event)) {\n        targetDocument?.addEventListener('touchend', onDragEnd);\n        targetDocument?.addEventListener('touchmove', onDrag);\n        setDragging(true);\n      }\n    },\n    [getColumnWidth, onDrag, onDragEnd, targetDocument],\n  );\n\n  return {\n    getOnMouseDown,\n    dragging,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useAnimationFrame","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","dragging","setDragging","useState","targetDocument","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","dx","current","columnId","width","requestRecalcFrame","onDrag","onDragEnd","event","removeEventListener","getOnMouseDown","target","currentTarget","button","addEventListener"],"mappings":"AAAA,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;IACnF,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-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js

@@ -39,8 +39,8 @@ const useDataGridSelectionCell_unstable = (props, ref)=>{
         role: 'gridcell',
         checked,
         type,
-        hidden: isHeader && type === 'radio',
-        'aria-checked': isHeader ? checked : undefined,
+        invisible: isHeader && type === 'radio',
+        'aria-checked': isHeader && type !== 'radio' ? checked : undefined,
         'aria-selected': isHeader || checked === 'mixed' ? undefined : checked,
         subtle,
         ...props,

package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDataGridSelectionCell.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\nimport { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';\n/**\n * Create the state required to render DataGridSelectionCell.\n *\n * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,\n * before being passed to renderDataGridSelectionCell_unstable.\n *\n * @param props - props from this instance of DataGridSelectionCell\n * @param ref - reference to root HTMLElement of DataGridSelectionCell\n */ export const useDataGridSelectionCell_unstable = (props, ref)=>{\n    const isHeader = useIsInTableHeader();\n    const rowId = useTableRowIdContext();\n    const subtle = useDataGridContext_unstable((ctx)=>ctx.subtleSelection);\n    const checked = useDataGridContext_unstable((ctx)=>{\n        if (isHeader && ctx.selection.selectionMode === 'multiselect') {\n            return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;\n        }\n        return ctx.selection.isRowSelected(rowId);\n    });\n    const toggleAllRows = useDataGridContext_unstable((ctx)=>ctx.selection.toggleAllRows);\n    const type = useDataGridContext_unstable((ctx)=>ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio');\n    const onClick = useEventCallback((e)=>{\n        var _props_onClick;\n        if (isHeader) {\n            toggleAllRows(e);\n        }\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);\n    });\n    return useTableSelectionCell_unstable({\n        as: 'div',\n        role: 'gridcell',\n        checked,\n        type,\n        hidden: isHeader && type === 'radio',\n        'aria-checked': isHeader ? checked : undefined,\n        'aria-selected': isHeader || checked === 'mixed' ? undefined : checked,\n        subtle,\n        ...props,\n        onClick\n    }, ref);\n};\n"],"names":["useDataGridSelectionCell_unstable","props","ref","isHeader","useIsInTableHeader","rowId","useTableRowIdContext","subtle","useDataGridContext_unstable","ctx","subtleSelection","checked","selection","selectionMode","allRowsSelected","someRowsSelected","isRowSelected","toggleAllRows","type","onClick","useEventCallback","e","_props_onClick","call","useTableSelectionCell_unstable","as","role","hidden","undefined"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACU;iCACW;8BACP;oCACF;uCACY;AASpC,MAAMA,oCAAoC,CAACC,OAAOC;IACzD,MAAMC,WAAWC,IAAAA,sCAAkB;IACnC,MAAMC,QAAQC,IAAAA,kCAAoB;IAClC,MAAMC,SAASC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,eAAe;IACrE,MAAMC,UAAUH,IAAAA,4CAA2B,EAAC,CAACC;QACzC,IAAIN,YAAYM,IAAIG,SAAS,CAACC,aAAa,KAAK,eAAe;YAC3D,OAAOJ,IAAIG,SAAS,CAACE,eAAe,GAAG,OAAOL,IAAIG,SAAS,CAACG,gBAAgB,GAAG,UAAU;QAC7F;QACA,OAAON,IAAIG,SAAS,CAACI,aAAa,CAACX;IACvC;IACA,MAAMY,gBAAgBT,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,SAAS,CAACK,aAAa;IACpF,MAAMC,OAAOV,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,SAAS,CAACC,aAAa,KAAK,gBAAgB,aAAa;IAC7G,MAAMM,UAAUC,IAAAA,gCAAgB,EAAC,CAACC;QAC9B,IAAIC;QACJ,IAAInB,UAAU;YACVc,cAAcI;QAClB;QACCC,CAAAA,iBAAiBrB,MAAMkB,OAAO,AAAD,MAAO,QAAQG,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeC,IAAI,CAACtB,OAAOoB;IACjH;IACA,OAAOG,IAAAA,qDAA8B,EAAC;QAClCC,IAAI;QACJC,MAAM;QACNf;QACAO;QACAS,QAAQxB,YAAYe,SAAS;QAC7B,gBAAgBf,WAAWQ,UAAUiB;QACrC,iBAAiBzB,YAAYQ,YAAY,UAAUiB,YAAYjB;QAC/DJ;QACA,GAAGN,KAAK;QACRkB;IACJ,GAAGjB;AACP"}
+{"version":3,"sources":["useDataGridSelectionCell.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\nimport { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';\n/**\n * Create the state required to render DataGridSelectionCell.\n *\n * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,\n * before being passed to renderDataGridSelectionCell_unstable.\n *\n * @param props - props from this instance of DataGridSelectionCell\n * @param ref - reference to root HTMLElement of DataGridSelectionCell\n */ export const useDataGridSelectionCell_unstable = (props, ref)=>{\n    const isHeader = useIsInTableHeader();\n    const rowId = useTableRowIdContext();\n    const subtle = useDataGridContext_unstable((ctx)=>ctx.subtleSelection);\n    const checked = useDataGridContext_unstable((ctx)=>{\n        if (isHeader && ctx.selection.selectionMode === 'multiselect') {\n            return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;\n        }\n        return ctx.selection.isRowSelected(rowId);\n    });\n    const toggleAllRows = useDataGridContext_unstable((ctx)=>ctx.selection.toggleAllRows);\n    const type = useDataGridContext_unstable((ctx)=>ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio');\n    const onClick = useEventCallback((e)=>{\n        var _props_onClick;\n        if (isHeader) {\n            toggleAllRows(e);\n        }\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, e);\n    });\n    return useTableSelectionCell_unstable({\n        as: 'div',\n        role: 'gridcell',\n        checked,\n        type,\n        invisible: isHeader && type === 'radio',\n        'aria-checked': isHeader && type !== 'radio' ? checked : undefined,\n        'aria-selected': isHeader || checked === 'mixed' ? undefined : checked,\n        subtle,\n        ...props,\n        onClick\n    }, ref);\n};\n"],"names":["useDataGridSelectionCell_unstable","props","ref","isHeader","useIsInTableHeader","rowId","useTableRowIdContext","subtle","useDataGridContext_unstable","ctx","subtleSelection","checked","selection","selectionMode","allRowsSelected","someRowsSelected","isRowSelected","toggleAllRows","type","onClick","useEventCallback","e","_props_onClick","call","useTableSelectionCell_unstable","as","role","invisible","undefined"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACU;iCACW;8BACP;oCACF;uCACY;AASpC,MAAMA,oCAAoC,CAACC,OAAOC;IACzD,MAAMC,WAAWC,IAAAA,sCAAkB;IACnC,MAAMC,QAAQC,IAAAA,kCAAoB;IAClC,MAAMC,SAASC,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIC,eAAe;IACrE,MAAMC,UAAUH,IAAAA,4CAA2B,EAAC,CAACC;QACzC,IAAIN,YAAYM,IAAIG,SAAS,CAACC,aAAa,KAAK,eAAe;YAC3D,OAAOJ,IAAIG,SAAS,CAACE,eAAe,GAAG,OAAOL,IAAIG,SAAS,CAACG,gBAAgB,GAAG,UAAU;QAC7F;QACA,OAAON,IAAIG,SAAS,CAACI,aAAa,CAACX;IACvC;IACA,MAAMY,gBAAgBT,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,SAAS,CAACK,aAAa;IACpF,MAAMC,OAAOV,IAAAA,4CAA2B,EAAC,CAACC,MAAMA,IAAIG,SAAS,CAACC,aAAa,KAAK,gBAAgB,aAAa;IAC7G,MAAMM,UAAUC,IAAAA,gCAAgB,EAAC,CAACC;QAC9B,IAAIC;QACJ,IAAInB,UAAU;YACVc,cAAcI;QAClB;QACCC,CAAAA,iBAAiBrB,MAAMkB,OAAO,AAAD,MAAO,QAAQG,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAeC,IAAI,CAACtB,OAAOoB;IACjH;IACA,OAAOG,IAAAA,qDAA8B,EAAC;QAClCC,IAAI;QACJC,MAAM;QACNf;QACAO;QACAS,WAAWxB,YAAYe,SAAS;QAChC,gBAAgBf,YAAYe,SAAS,UAAUP,UAAUiB;QACzD,iBAAiBzB,YAAYQ,YAAY,UAAUiB,YAAYjB;QAC/DJ;QACA,GAAGN,KAAK;QACRkB;IACJ,GAAGjB;AACP"}

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

@@ -18,7 +18,7 @@ const _tableContext = require("../../contexts/tableContext");
 const useTableSelectionCell_unstable = (props, ref)=>{
     const tableCellState = (0, _useTableCell.useTableCell_unstable)(props, ref);
     const { noNativeElements } = (0, _tableContext.useTableContext)();
-    const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;
+    const { type = 'checkbox', checked = false, subtle = false, hidden = false, invisible = false } = props;
     return {
         ...tableCellState,
         components: {
@@ -27,14 +27,14 @@ const useTableSelectionCell_unstable = (props, ref)=>{
             radioIndicator: _reactradio.Radio
         },
         checkboxIndicator: _reactutilities.slot.optional(props.checkboxIndicator, {
-            renderByDefault: type === 'checkbox',
+            renderByDefault: type === 'checkbox' && !invisible,
             defaultProps: {
                 checked: props.checked
             },
             elementType: _reactcheckbox.Checkbox
         }),
         radioIndicator: _reactutilities.slot.optional(props.radioIndicator, {
-            renderByDefault: type === 'radio',
+            renderByDefault: type === 'radio' && !invisible,
             defaultProps: {
                 checked: !!checked,
                 input: {
@@ -47,6 +47,6 @@ const useTableSelectionCell_unstable = (props, ref)=>{
         checked,
         noNativeElements,
         subtle,
-        hidden
+        hidden: invisible || hidden
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableSelectionCell.js"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\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 */ export const useTableSelectionCell_unstable = (props, ref)=>{\n    const tableCellState = useTableCell_unstable(props, ref);\n    const { noNativeElements } = useTableContext();\n    const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;\n    return {\n        ...tableCellState,\n        components: {\n            ...tableCellState.components,\n            checkboxIndicator: Checkbox,\n            radioIndicator: Radio\n        },\n        checkboxIndicator: slot.optional(props.checkboxIndicator, {\n            renderByDefault: type === 'checkbox',\n            defaultProps: {\n                checked: props.checked\n            },\n            elementType: Checkbox\n        }),\n        radioIndicator: slot.optional(props.radioIndicator, {\n            renderByDefault: type === 'radio',\n            defaultProps: {\n                checked: !!checked,\n                input: {\n                    name: useId('table-selection-radio')\n                }\n            },\n            elementType: Radio\n        }),\n        type,\n        checked,\n        noNativeElements,\n        subtle,\n        hidden\n    };\n};\n"],"names":["useTableSelectionCell_unstable","props","ref","tableCellState","useTableCell_unstable","noNativeElements","useTableContext","type","checked","subtle","hidden","components","checkboxIndicator","Checkbox","radioIndicator","Radio","slot","optional","renderByDefault","defaultProps","elementType","input","name","useId"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACK;+BACH;4BACH;8BACgB;8BACN;AASrB,MAAMA,iCAAiC,CAACC,OAAOC;IACtD,MAAMC,iBAAiBC,IAAAA,mCAAqB,EAACH,OAAOC;IACpD,MAAM,EAAEG,gBAAgB,EAAE,GAAGC,IAAAA,6BAAe;IAC5C,MAAM,EAAEC,OAAO,UAAU,EAAEC,UAAU,KAAK,EAAEC,SAAS,KAAK,EAAEC,SAAS,KAAK,EAAE,GAAGT;IAC/E,OAAO;QACH,GAAGE,cAAc;QACjBQ,YAAY;YACR,GAAGR,eAAeQ,UAAU;YAC5BC,mBAAmBC,uBAAQ;YAC3BC,gBAAgBC,iBAAK;QACzB;QACAH,mBAAmBI,oBAAI,CAACC,QAAQ,CAAChB,MAAMW,iBAAiB,EAAE;YACtDM,iBAAiBX,SAAS;YAC1BY,cAAc;gBACVX,SAASP,MAAMO,OAAO;YAC1B;YACAY,aAAaP,uBAAQ;QACzB;QACAC,gBAAgBE,oBAAI,CAACC,QAAQ,CAAChB,MAAMa,cAAc,EAAE;YAChDI,iBAAiBX,SAAS;YAC1BY,cAAc;gBACVX,SAAS,CAAC,CAACA;gBACXa,OAAO;oBACHC,MAAMC,IAAAA,qBAAK,EAAC;gBAChB;YACJ;YACAH,aAAaL,iBAAK;QACtB;QACAR;QACAC;QACAH;QACAI;QACAC;IACJ;AACJ"}
+{"version":3,"sources":["useTableSelectionCell.js"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\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 */ export const useTableSelectionCell_unstable = (props, ref)=>{\n    const tableCellState = useTableCell_unstable(props, ref);\n    const { noNativeElements } = useTableContext();\n    const { type = 'checkbox', checked = false, subtle = false, // eslint-disable-next-line deprecation/deprecation\n    hidden = false, invisible = false } = props;\n    return {\n        ...tableCellState,\n        components: {\n            ...tableCellState.components,\n            checkboxIndicator: Checkbox,\n            radioIndicator: Radio\n        },\n        checkboxIndicator: slot.optional(props.checkboxIndicator, {\n            renderByDefault: type === 'checkbox' && !invisible,\n            defaultProps: {\n                checked: props.checked\n            },\n            elementType: Checkbox\n        }),\n        radioIndicator: slot.optional(props.radioIndicator, {\n            renderByDefault: type === 'radio' && !invisible,\n            defaultProps: {\n                checked: !!checked,\n                input: {\n                    name: useId('table-selection-radio')\n                }\n            },\n            elementType: Radio\n        }),\n        type,\n        checked,\n        noNativeElements,\n        subtle,\n        hidden: invisible || hidden\n    };\n};\n"],"names":["useTableSelectionCell_unstable","props","ref","tableCellState","useTableCell_unstable","noNativeElements","useTableContext","type","checked","subtle","hidden","invisible","components","checkboxIndicator","Checkbox","radioIndicator","Radio","slot","optional","renderByDefault","defaultProps","elementType","input","name","useId"],"mappings":";;;;+BAciBA;;;eAAAA;;;;iEAdM;gCACK;+BACH;4BACH;8BACgB;8BACN;AASrB,MAAMA,iCAAiC,CAACC,OAAOC;IACtD,MAAMC,iBAAiBC,IAAAA,mCAAqB,EAACH,OAAOC;IACpD,MAAM,EAAEG,gBAAgB,EAAE,GAAGC,IAAAA,6BAAe;IAC5C,MAAM,EAAEC,OAAO,UAAU,EAAEC,UAAU,KAAK,EAAEC,SAAS,KAAK,EAC1DC,SAAS,KAAK,EAAEC,YAAY,KAAK,EAAE,GAAGV;IACtC,OAAO;QACH,GAAGE,cAAc;QACjBS,YAAY;YACR,GAAGT,eAAeS,UAAU;YAC5BC,mBAAmBC,uBAAQ;YAC3BC,gBAAgBC,iBAAK;QACzB;QACAH,mBAAmBI,oBAAI,CAACC,QAAQ,CAACjB,MAAMY,iBAAiB,EAAE;YACtDM,iBAAiBZ,SAAS,cAAc,CAACI;YACzCS,cAAc;gBACVZ,SAASP,MAAMO,OAAO;YAC1B;YACAa,aAAaP,uBAAQ;QACzB;QACAC,gBAAgBE,oBAAI,CAACC,QAAQ,CAACjB,MAAMc,cAAc,EAAE;YAChDI,iBAAiBZ,SAAS,WAAW,CAACI;YACtCS,cAAc;gBACVZ,SAAS,CAAC,CAACA;gBACXc,OAAO;oBACHC,MAAMC,IAAAA,qBAAK,EAAC;gBAChB;YACJ;YACAH,aAAaL,iBAAK;QACtB;QACAT;QACAC;QACAH;QACAI;QACAC,QAAQC,aAAaD;IACzB;AACJ"}

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

@@ -105,7 +105,7 @@ const useFlexLayoutStyles = /*#__PURE__*/ (0, _react.__styles)({
         B8a84jv: "f1y7ij6c"
     },
     hidden: {
-        Bcdw1i0: "fd7fpy0"
+        abs64n: "fk73vx1"
     }
 }, {
     d: [
@@ -127,8 +127,7 @@ const useFlexLayoutStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f122n59{align-items:center;}",
         ".f4d9j23{justify-content:center;}",
         ".fk73vx1{opacity:0;}",
-        ".f1y7ij6c[data-fui-focus-within]:focus-within{opacity:1;}",
-        ".fd7fpy0{visibility:hidden;}"
+        ".f1y7ij6c[data-fui-focus-within]:focus-within{opacity:1;}"
     ]
 });
 const useTableSelectionCellStyles_unstable = (state)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableSelectionCellStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const CELL_WIDTH = 44;\nexport const tableSelectionCellClassNames = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator'\n};\nconst useTableLayoutStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f15pt5es\",\n    a9b677: \"fksc0bp\"\n  }\n}, {\n  d: [\".f15pt5es{display:table-cell;}\", \".fksc0bp{width:44px;}\"]\n});\nconst useFlexLayoutStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Bh6795r: \"fqerorx\",\n    Bnnss6s: \"f1neuvcm\",\n    xawz: \"fkjuxzh\",\n    Bf4jedk: \"fvrlu0f\",\n    B2u0y6b: \"f1c71y05\",\n    Brf1p80: \"f4d9j23\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".fqerorx{flex-grow:1;}\", \".f1neuvcm{flex-shrink:1;}\", \".fkjuxzh{flex-basis:0px;}\", \".fvrlu0f{min-width:44px;}\", \".f1c71y05{max-width:44px;}\", \".f4d9j23{justify-content:center;}\"]\n});\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    fsow6f: \"f17mccla\",\n    Huce71: \"fz5stix\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    Bn4voq9: \"fz36nt7\",\n    g9k6zt: \"f9znhxp\",\n    Bfpq7zp: \"fqrak0z\",\n    kdpuga: [\"f1o2ludy\", \"f1kjnpwc\"],\n    Bw81rd7: [\"f1kjnpwc\", \"f1o2ludy\"],\n    B6xbmo0: [\"fxmnebo\", \"f1witrsb\"],\n    dm238s: [\"f1witrsb\", \"fxmnebo\"]\n  },\n  radioIndicator: {\n    mc9l5x: \"f22iagw\",\n    Bh6795r: \"fqerorx\",\n    Bt984gj: \"f122n59\",\n    Brf1p80: \"f4d9j23\"\n  },\n  subtle: {\n    abs64n: \"fk73vx1\",\n    B8a84jv: \"f1y7ij6c\"\n  },\n  hidden: {\n    Bcdw1i0: \"fd7fpy0\"\n  }\n}, {\n  d: [\".f17mccla{text-align:center;}\", \".fz5stix{white-space:nowrap;}\", \".f1g0x7ka{padding-top:0;}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f1qch9an{padding-bottom:0;}\", \".fz36nt7[data-fui-focus-visible]{outline-width:2px;}\", \".f9znhxp[data-fui-focus-visible]{outline-style:solid;}\", \".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}\", \".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}\", \".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}\", \".f22iagw{display:flex;}\", \".fqerorx{flex-grow:1;}\", \".f122n59{align-items:center;}\", \".f4d9j23{justify-content:center;}\", \".fk73vx1{opacity:0;}\", \".f1y7ij6c[data-fui-focus-within]:focus-within{opacity:1;}\", \".fd7fpy0{visibility:hidden;}\"]\n});\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = state => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles()\n  };\n  state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n  }\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTableSelectionCellStyles.styles.js.map"],"names":["CELL_WIDTH","tableSelectionCellClassNames","useTableSelectionCellStyles_unstable","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","__styles","mc9l5x","a9b677","d","useFlexLayoutStyles","Bh6795r","Bnnss6s","xawz","Bf4jedk","B2u0y6b","Brf1p80","useStyles","fsow6f","Huce71","z8tnut","z189sj","Byoj8tv","uwmqm3","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","Bt984gj","subtle","abs64n","B8a84jv","hidden","Bcdw1i0","state","styles","layoutStyles","table","flex","className","mergeClasses","noNativeElements","checked"],"mappings":";;;;;;;;;;;IAGaA,UAAU;eAAVA;;IACAC,4BAA4B;eAA5BA;;IAgEAC,oCAAoC;eAApCA;;;uBApEsC;AAG5C,MAAMF,aAAa;AACnB,MAAMC,+BAA+B;IAC1CE,MAAM;IACNC,mBAAmB;IACnBC,gBAAgB;AAClB;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACjDJ,MAAM;QACJK,QAAQ;QACRC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAAkC;KAAwB;AAChE;AACA,MAAMC,sBAAsB,WAAW,GAAEJ,IAAAA,eAAQ,EAAC;IAChDJ,MAAM;QACJK,QAAQ;QACRI,SAAS;QACTC,SAAS;QACTC,MAAM;QACNC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDP,GAAG;QAAC;QAA2B;QAA0B;QAA6B;QAA6B;QAA6B;QAA8B;KAAoC;AACpN;AACA;;CAEC,GACD,MAAMQ,YAAY,WAAW,GAAEX,IAAAA,eAAQ,EAAC;IACtCJ,MAAM;QACJgB,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAW;SAAW;QAChCC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACA1B,gBAAgB;QACdG,QAAQ;QACRI,SAAS;QACToB,SAAS;QACTf,SAAS;IACX;IACAgB,QAAQ;QACNC,QAAQ;QACRC,SAAS;IACX;IACAC,QAAQ;QACNC,SAAS;IACX;AACF,GAAG;IACD3B,GAAG;QAAC;QAAiC;QAAiC;QAA6B;QAA8B;QAA8B;QAAgC;QAAwD;QAA0D;QAA6E;QAA4F;QAA2F;QAAwF;QAAwF;QAA2B;QAA0B;QAAiC;QAAqC;QAAwB;QAA6D;KAA+B;AACt9B;AAIO,MAAMR,uCAAuCoC,CAAAA;IAClD,MAAMC,SAASrB;IACf,MAAMsB,eAAe;QACnBC,OAAOnC;QACPoC,MAAM/B;IACR;IACA2B,MAAMnC,IAAI,CAACwC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,6BAA6BE,IAAI,EAAEoC,OAAOpC,IAAI,EAAEmC,MAAMO,gBAAgB,GAAGL,aAAaE,IAAI,CAACvC,IAAI,GAAGqC,aAAaC,KAAK,CAACtC,IAAI,EAAEmC,MAAML,MAAM,IAAIK,MAAMQ,OAAO,KAAK,SAASP,OAAON,MAAM,EAAEK,MAAMF,MAAM,IAAIG,OAAOH,MAAM,EAAEE,MAAMnC,IAAI,CAACwC,SAAS;IAC5Q,IAAIL,MAAMlC,iBAAiB,EAAE;QAC3BkC,MAAMlC,iBAAiB,CAACuC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,6BAA6BG,iBAAiB,EAAEkC,MAAMlC,iBAAiB,CAACuC,SAAS;IACpI;IACA,IAAIL,MAAMjC,cAAc,EAAE;QACxBiC,MAAMjC,cAAc,CAACsC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,6BAA6BI,cAAc,EAAEkC,OAAOlC,cAAc,EAAEiC,MAAMjC,cAAc,CAACsC,SAAS;IAClJ;IACA,OAAOL;AACT,GACA,8DAA8D"}
+{"version":3,"sources":["useTableSelectionCellStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const CELL_WIDTH = 44;\nexport const tableSelectionCellClassNames = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator'\n};\nconst useTableLayoutStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f15pt5es\",\n    a9b677: \"fksc0bp\"\n  }\n}, {\n  d: [\".f15pt5es{display:table-cell;}\", \".fksc0bp{width:44px;}\"]\n});\nconst useFlexLayoutStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Bh6795r: \"fqerorx\",\n    Bnnss6s: \"f1neuvcm\",\n    xawz: \"fkjuxzh\",\n    Bf4jedk: \"fvrlu0f\",\n    B2u0y6b: \"f1c71y05\",\n    Brf1p80: \"f4d9j23\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".fqerorx{flex-grow:1;}\", \".f1neuvcm{flex-shrink:1;}\", \".fkjuxzh{flex-basis:0px;}\", \".fvrlu0f{min-width:44px;}\", \".f1c71y05{max-width:44px;}\", \".f4d9j23{justify-content:center;}\"]\n});\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    fsow6f: \"f17mccla\",\n    Huce71: \"fz5stix\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    Bn4voq9: \"fz36nt7\",\n    g9k6zt: \"f9znhxp\",\n    Bfpq7zp: \"fqrak0z\",\n    kdpuga: [\"f1o2ludy\", \"f1kjnpwc\"],\n    Bw81rd7: [\"f1kjnpwc\", \"f1o2ludy\"],\n    B6xbmo0: [\"fxmnebo\", \"f1witrsb\"],\n    dm238s: [\"f1witrsb\", \"fxmnebo\"]\n  },\n  radioIndicator: {\n    mc9l5x: \"f22iagw\",\n    Bh6795r: \"fqerorx\",\n    Bt984gj: \"f122n59\",\n    Brf1p80: \"f4d9j23\"\n  },\n  subtle: {\n    abs64n: \"fk73vx1\",\n    B8a84jv: \"f1y7ij6c\"\n  },\n  hidden: {\n    abs64n: \"fk73vx1\"\n  }\n}, {\n  d: [\".f17mccla{text-align:center;}\", \".fz5stix{white-space:nowrap;}\", \".f1g0x7ka{padding-top:0;}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f1qch9an{padding-bottom:0;}\", \".fz36nt7[data-fui-focus-visible]{outline-width:2px;}\", \".f9znhxp[data-fui-focus-visible]{outline-style:solid;}\", \".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}\", \".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}\", \".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}\", \".f22iagw{display:flex;}\", \".fqerorx{flex-grow:1;}\", \".f122n59{align-items:center;}\", \".f4d9j23{justify-content:center;}\", \".fk73vx1{opacity:0;}\", \".f1y7ij6c[data-fui-focus-within]:focus-within{opacity:1;}\"]\n});\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = state => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles()\n  };\n  state.root.className = mergeClasses(tableSelectionCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.subtle && state.checked === false && styles.subtle, state.hidden && styles.hidden, state.root.className);\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(tableSelectionCellClassNames.checkboxIndicator, state.checkboxIndicator.className);\n  }\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(tableSelectionCellClassNames.radioIndicator, styles.radioIndicator, state.radioIndicator.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTableSelectionCellStyles.styles.js.map"],"names":["CELL_WIDTH","tableSelectionCellClassNames","useTableSelectionCellStyles_unstable","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","__styles","mc9l5x","a9b677","d","useFlexLayoutStyles","Bh6795r","Bnnss6s","xawz","Bf4jedk","B2u0y6b","Brf1p80","useStyles","fsow6f","Huce71","z8tnut","z189sj","Byoj8tv","uwmqm3","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","Bt984gj","subtle","abs64n","B8a84jv","hidden","state","styles","layoutStyles","table","flex","className","mergeClasses","noNativeElements","checked"],"mappings":";;;;;;;;;;;IAGaA,UAAU;eAAVA;;IACAC,4BAA4B;eAA5BA;;IAgEAC,oCAAoC;eAApCA;;;uBApEsC;AAG5C,MAAMF,aAAa;AACnB,MAAMC,+BAA+B;IAC1CE,MAAM;IACNC,mBAAmB;IACnBC,gBAAgB;AAClB;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACjDJ,MAAM;QACJK,QAAQ;QACRC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAAkC;KAAwB;AAChE;AACA,MAAMC,sBAAsB,WAAW,GAAEJ,IAAAA,eAAQ,EAAC;IAChDJ,MAAM;QACJK,QAAQ;QACRI,SAAS;QACTC,SAAS;QACTC,MAAM;QACNC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDP,GAAG;QAAC;QAA2B;QAA0B;QAA6B;QAA6B;QAA6B;QAA8B;KAAoC;AACpN;AACA;;CAEC,GACD,MAAMQ,YAAY,WAAW,GAAEX,IAAAA,eAAQ,EAAC;IACtCJ,MAAM;QACJgB,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAW;SAAW;QAChCC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACA1B,gBAAgB;QACdG,QAAQ;QACRI,SAAS;QACToB,SAAS;QACTf,SAAS;IACX;IACAgB,QAAQ;QACNC,QAAQ;QACRC,SAAS;IACX;IACAC,QAAQ;QACNF,QAAQ;IACV;AACF,GAAG;IACDxB,GAAG;QAAC;QAAiC;QAAiC;QAA6B;QAA8B;QAA8B;QAAgC;QAAwD;QAA0D;QAA6E;QAA4F;QAA2F;QAAwF;QAAwF;QAA2B;QAA0B;QAAiC;QAAqC;QAAwB;KAA4D;AACt7B;AAIO,MAAMR,uCAAuCmC,CAAAA;IAClD,MAAMC,SAASpB;IACf,MAAMqB,eAAe;QACnBC,OAAOlC;QACPmC,MAAM9B;IACR;IACA0B,MAAMlC,IAAI,CAACuC,SAAS,GAAGC,IAAAA,mBAAY,EAAC1C,6BAA6BE,IAAI,EAAEmC,OAAOnC,IAAI,EAAEkC,MAAMO,gBAAgB,GAAGL,aAAaE,IAAI,CAACtC,IAAI,GAAGoC,aAAaC,KAAK,CAACrC,IAAI,EAAEkC,MAAMJ,MAAM,IAAII,MAAMQ,OAAO,KAAK,SAASP,OAAOL,MAAM,EAAEI,MAAMD,MAAM,IAAIE,OAAOF,MAAM,EAAEC,MAAMlC,IAAI,CAACuC,SAAS;IAC5Q,IAAIL,MAAMjC,iBAAiB,EAAE;QAC3BiC,MAAMjC,iBAAiB,CAACsC,SAAS,GAAGC,IAAAA,mBAAY,EAAC1C,6BAA6BG,iBAAiB,EAAEiC,MAAMjC,iBAAiB,CAACsC,SAAS;IACpI;IACA,IAAIL,MAAMhC,cAAc,EAAE;QACxBgC,MAAMhC,cAAc,CAACqC,SAAS,GAAGC,IAAAA,mBAAY,EAAC1C,6BAA6BI,cAAc,EAAEiC,OAAOjC,cAAc,EAAEgC,MAAMhC,cAAc,CAACqC,SAAS;IAClJ;IACA,OAAOL;AACT,GACA,8DAA8D"}

package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js

@@ -18,7 +18,6 @@ function useTableColumnResizeMouseHandler(columnResizeState) {
     const colId = _react.useRef(undefined);
     const [dragging, setDragging] = _react.useState(false);
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
     const { getColumnWidth, setColumnWidth } = columnResizeState;
     const recalculatePosition = _react.useCallback((e)=>{
         const { clientX } = (0, _reactutilities.getEventClientCoords)(e);
@@ -33,15 +32,12 @@ function useTableColumnResizeMouseHandler(columnResizeState) {
     }, [
         setColumnWidth
     ]);
+    const [requestRecalcFrame] = (0, _reactutilities.useAnimationFrame)();
     const onDrag = _react.useCallback((e)=>{
         // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs
-        if (typeof (globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame) === 'function') {
-            requestAnimationFrame(()=>recalculatePosition(e));
-        } else {
-            recalculatePosition(e);
-        }
+        requestRecalcFrame(()=>recalculatePosition(e));
     }, [
-        globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame,
+        requestRecalcFrame,
         recalculatePosition
     ]);
     const onDragEnd = _react.useCallback((event)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["useTableColumnResizeMouseHandler.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getEventClientCoords, isMouseEvent, isTouchEvent } from '@fluentui/react-utilities';\nexport function useTableColumnResizeMouseHandler(columnResizeState) {\n    const mouseX = React.useRef(0);\n    const currentWidth = React.useRef(0);\n    const colId = React.useRef(undefined);\n    const [dragging, setDragging] = React.useState(false);\n    const { targetDocument } = useFluent();\n    const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;\n    const { getColumnWidth, setColumnWidth } = columnResizeState;\n    const recalculatePosition = React.useCallback((e)=>{\n        const { clientX } = getEventClientCoords(e);\n        const dx = clientX - mouseX.current;\n        // Update the local width for the column and set it\n        currentWidth.current += dx;\n        colId.current && setColumnWidth(e, {\n            columnId: colId.current,\n            width: currentWidth.current\n        });\n        mouseX.current = clientX;\n    }, [\n        setColumnWidth\n    ]);\n    const onDrag = React.useCallback((e)=>{\n        // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n        if (typeof (globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame) === 'function') {\n            requestAnimationFrame(()=>recalculatePosition(e));\n        } else {\n            recalculatePosition(e);\n        }\n    }, [\n        globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame,\n        recalculatePosition\n    ]);\n    const onDragEnd = React.useCallback((event)=>{\n        if (isMouseEvent(event)) {\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onDragEnd);\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onDrag);\n        }\n        if (isTouchEvent(event)) {\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchend', onDragEnd);\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchmove', onDrag);\n        }\n        setDragging(false);\n    }, [\n        onDrag,\n        targetDocument\n    ]);\n    const getOnMouseDown = React.useCallback((columnId)=>(event)=>{\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            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 === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onDragEnd);\n                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onDrag);\n                setDragging(true);\n            }\n            if (isTouchEvent(event)) {\n                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);\n                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);\n                setDragging(true);\n            }\n        }, [\n        getColumnWidth,\n        onDrag,\n        onDragEnd,\n        targetDocument\n    ]);\n    return {\n        getOnMouseDown,\n        dragging\n    };\n}\n"],"names":["useTableColumnResizeMouseHandler","columnResizeState","mouseX","React","useRef","currentWidth","colId","undefined","dragging","setDragging","useState","targetDocument","useFluent","globalWin","defaultView","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","getEventClientCoords","dx","current","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","isMouseEvent","removeEventListener","isTouchEvent","getOnMouseDown","target","currentTarget","button","addEventListener"],"mappings":"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"}
+{"version":3,"sources":["useTableColumnResizeMouseHandler.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { getEventClientCoords, isMouseEvent, isTouchEvent, useAnimationFrame } from '@fluentui/react-utilities';\nexport function useTableColumnResizeMouseHandler(columnResizeState) {\n    const mouseX = React.useRef(0);\n    const currentWidth = React.useRef(0);\n    const colId = React.useRef(undefined);\n    const [dragging, setDragging] = React.useState(false);\n    const { targetDocument } = useFluent();\n    const { getColumnWidth, setColumnWidth } = columnResizeState;\n    const recalculatePosition = React.useCallback((e)=>{\n        const { clientX } = getEventClientCoords(e);\n        const dx = clientX - mouseX.current;\n        // Update the local width for the column and set it\n        currentWidth.current += dx;\n        colId.current && setColumnWidth(e, {\n            columnId: colId.current,\n            width: currentWidth.current\n        });\n        mouseX.current = clientX;\n    }, [\n        setColumnWidth\n    ]);\n    const [requestRecalcFrame] = useAnimationFrame();\n    const onDrag = React.useCallback((e)=>{\n        // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n        requestRecalcFrame(()=>recalculatePosition(e));\n    }, [\n        requestRecalcFrame,\n        recalculatePosition\n    ]);\n    const onDragEnd = React.useCallback((event)=>{\n        if (isMouseEvent(event)) {\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onDragEnd);\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onDrag);\n        }\n        if (isTouchEvent(event)) {\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchend', onDragEnd);\n            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('touchmove', onDrag);\n        }\n        setDragging(false);\n    }, [\n        onDrag,\n        targetDocument\n    ]);\n    const getOnMouseDown = React.useCallback((columnId)=>(event)=>{\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            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 === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onDragEnd);\n                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onDrag);\n                setDragging(true);\n            }\n            if (isTouchEvent(event)) {\n                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);\n                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);\n                setDragging(true);\n            }\n        }, [\n        getColumnWidth,\n        onDrag,\n        onDragEnd,\n        targetDocument\n    ]);\n    return {\n        getOnMouseDown,\n        dragging\n    };\n}\n"],"names":["useTableColumnResizeMouseHandler","columnResizeState","mouseX","React","useRef","currentWidth","colId","undefined","dragging","setDragging","useState","targetDocument","useFluent","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","getEventClientCoords","dx","current","columnId","width","requestRecalcFrame","useAnimationFrame","onDrag","onDragEnd","event","isMouseEvent","removeEventListener","isTouchEvent","getOnMouseDown","target","currentTarget","button","addEventListener"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.14.0",
+  "version": "9.15.1",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,17 +36,17 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-aria": "^9.10.4",
-    "@fluentui/react-avatar": "^9.6.21",
-    "@fluentui/react-checkbox": "^9.2.20",
-    "@fluentui/react-context-selector": "^9.1.57",
-    "@fluentui/react-icons": "^2.0.235",
-    "@fluentui/react-radio": "^9.2.15",
-    "@fluentui/react-shared-contexts": "^9.16.0",
-    "@fluentui/react-tabster": "^9.20.0",
+    "@fluentui/react-aria": "^9.11.0",
+    "@fluentui/react-avatar": "^9.6.23",
+    "@fluentui/react-checkbox": "^9.2.22",
+    "@fluentui/react-context-selector": "^9.1.58",
+    "@fluentui/react-icons": "^2.0.237",
+    "@fluentui/react-radio": "^9.2.17",
+    "@fluentui/react-shared-contexts": "^9.17.0",
+    "@fluentui/react-tabster": "^9.21.0",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.6",
-    "@fluentui/react-jsx-runtime": "^9.0.35",
+    "@fluentui/react-utilities": "^9.18.7",
+    "@fluentui/react-jsx-runtime": "^9.0.36",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },