npm - @fluentui/react-table - Versions diffs - 9.11.2 → 9.11.3 - Mend

@fluentui/react-table 9.11.2 → 9.11.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,18 +1,37 @@
 # Change Log - @fluentui/react-table
-This log was last generated on Thu, 11 Jan 2024 09:02:16 GMT and should not be manually modified.
+This log was last generated on Tue, 16 Jan 2024 13:07:02 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.11.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.11.3)
+Tue, 16 Jan 2024 13:07:02 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.11.2..@fluentui/react-table_v9.11.3)
+### Patches
+- fix: correct version of @types/react-dom peer dep that matches for 16.x ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by mgodbolt@microsoft.com)
+- fix: DataGrid selection performance improvement ([PR #30288](https://github.com/microsoft/fluentui/pull/30288) by lingfangao@hotmail.com)
+- bugfix: add system colors on hover ([PR #30073](https://github.com/microsoft/fluentui/pull/30073) by bernardo.sunderhus@gmail.com)
+- bugfix: Omit colliding content property from ComponentProps ([PR #29865](https://github.com/microsoft/fluentui/pull/29865) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.7.1 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-avatar to v9.6.7 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-checkbox to v9.2.6 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.47 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-radio to v9.2.1 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-tabster to v9.17.1 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.25 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
 ## [9.11.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.11.2)
-Thu, 11 Jan 2024 09:02:16 GMT
+Thu, 11 Jan 2024 09:04:29 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.11.1..@fluentui/react-table_v9.11.2)
 ### Patches
-- Bump @fluentui/react-aria to v9.7.0 ([PR #30250](https://github.com/microsoft/fluentui/pull/30250) by beachball)
-- Bump @fluentui/react-avatar to v9.6.6 ([PR #30250](https://github.com/microsoft/fluentui/pull/30250) by beachball)
+- Bump @fluentui/react-aria to v9.7.0 ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by beachball)
+- Bump @fluentui/react-avatar to v9.6.6 ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by beachball)
 ## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.11.1)

package/dist/index.d.ts CHANGED Viewed

@@ -471,7 +471,7 @@ declare type TableCellLayoutContextValues = {
 /**
  * TableCellLayout Props
  */
-export declare type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {
+export declare type TableCellLayoutProps = Omit<ComponentProps<Partial<TableCellLayoutSlots>>, 'content'> & Pick<Partial<TableCellLayoutSlots>, 'content'> & {
     /**
      * Renders design variants of the table cell
      * @default undefined

package/lib/components/DataGridCell/useDataGridCell.js CHANGED Viewed

@@ -16,7 +16,9 @@ import { useColumnIdContext } from '../../contexts/columnIdContext';
     const columnId = useColumnIdContext();
     const tabbable = useDataGridContext_unstable((ctx)=>(ctx.focusMode === 'cell' || ctx.focusMode === 'composite') && focusMode !== 'none');
     const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);
-    const columnSizing = useDataGridContext_unstable((ctx)=>ctx.columnSizing_unstable);
+    const getTableCellProps = useDataGridContext_unstable((ctx)=>{
+        return ctx.columnSizing_unstable.getTableCellProps;
+    });
     const focusableGroupAttr = useFocusableGroup({
         tabBehavior: 'limited-trap-focus'
     });
@@ -25,7 +27,7 @@ import { useColumnIdContext } from '../../contexts/columnIdContext';
         role: 'gridcell',
         ...focusMode === 'group' && focusableGroupAttr,
         tabIndex: tabbable ? 0 : undefined,
-        ...resizableColumns ? columnSizing.getTableCellProps(columnId) : {},
+        ...resizableColumns ? getTableCellProps(columnId) : {},
         ...props
     }, ref);
 };

package/lib/components/DataGridCell/useDataGridCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n\n/*\n Create the state required to render DataGridCell.\n \n The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n \n @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n const { focusMode = 'cell' } = props;\n const columnId = useColumnIdContext();\n const tabbable = useDataGridContext_unstable(\n ctx => (ctx.focusMode === 'cell' \|\| ctx.focusMode === 'composite') && focusMode !== 'none',\n );\n const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n const ~~columnSizing~~ = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\n const focusableGroupAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n return useTableCell_unstable(\n {\n as: 'div',\n role: 'gridcell',\n ...(focusMode === 'group' && focusableGroupAttr),\n tabIndex: tabbable ? 0 : undefined,\n ...(resizableColumns ? ~~columnSizing.~~getTableCellProps(columnId) : {}),\n ...props,\n },\n ref,\n );\n};\n"],"names":["React","useFocusableGroup","useTableCell_unstable","useDataGridContext_unstable","useColumnIdContext","useDataGridCell_unstable","props","ref","focusMode","columnId","tabbable","ctx","resizableColumns","~~columnSizing~~","columnSizing_unstable","focusableGroupAttr","tabBehavior","as","role","tabIndex","undefined"~~,"getTableCellProps"~~],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,YAAY,MAAM,EAAE,GAAGF;IAC/B,MAAMG,WAAWL;IACjB,MAAMM,WAAWP,4BACfQ,CAAAA,MAAO,AAACA,CAAAA,IAAIH,SAAS,KAAK,UAAUG,IAAIH,SAAS,KAAK,WAAU,KAAMA,cAAc;IAEtF,MAAMI,mBAAmBT,4BAA4BQ,CAAAA,MAAOA,IAAIC,gBAAgB;IAChF,MAAMC,~~eAAeV~~,4BAA4BQ,CAAAA,~~MAAOA~~,IAAIG,qBAAqB;~~IACjF~~,~~MAAMC~~,qBAAqBd,kBAAkB;QAAEe,aAAa;IAAqB;IACjF,OAAOd,sBACL;QACEe,IAAI;QACJC,MAAM;QACN,GAAIV,cAAc,WAAWO,kBAAkB;QAC/CI,UAAUT,WAAW,IAAIU;QACzB,GAAIR,mBAAmBC,~~aAAaQ~~,~~iBAAiB,CAACZ,~~YAAY,CAAC,CAAC;~~QACpE~~,GAAGH,KAAK;IACV,GACAC;AAEJ,EAAE"}
1	+ {"version":3,"sources":["useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n\n/*\n Create the state required to render DataGridCell.\n \n The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n \n @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n const { focusMode = 'cell' } = props;\n const columnId = useColumnIdContext();\n const tabbable = useDataGridContext_unstable(\n ctx => (ctx.focusMode === 'cell' \|\| ctx.focusMode === 'composite') && focusMode !== 'none',\n );\n const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n const getTableCellProps = useDataGridContext_unstable(ctx => {\n return ctx.columnSizing_unstable.getTableCellProps;\n });\n const focusableGroupAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n return useTableCell_unstable(\n {\n as: 'div',\n role: 'gridcell',\n ...(focusMode === 'group' && focusableGroupAttr),\n tabIndex: tabbable ? 0 : undefined,\n ...(resizableColumns ? getTableCellProps(columnId) : {}),\n ...props,\n },\n ref,\n );\n};\n"],"names":["React","useFocusableGroup","useTableCell_unstable","useDataGridContext_unstable","useColumnIdContext","useDataGridCell_unstable","props","ref","focusMode","columnId","tabbable","ctx","resizableColumns","getTableCellProps","columnSizing_unstable","focusableGroupAttr","tabBehavior","as","role","tabIndex","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,YAAY,MAAM,EAAE,GAAGF;IAC/B,MAAMG,WAAWL;IACjB,MAAMM,WAAWP,4BACfQ,CAAAA,MAAO,AAACA,CAAAA,IAAIH,SAAS,KAAK,UAAUG,IAAIH,SAAS,KAAK,WAAU,KAAMA,cAAc;IAEtF,MAAMI,mBAAmBT,4BAA4BQ,CAAAA,MAAOA,IAAIC,gBAAgB;IAChF,MAAMC,oBAAoBV,4BAA4BQ,CAAAA;QACpD,OAAOA,IAAIG,qBAAqB,CAACD,iBAAiB;IACpD;IACA,MAAME,qBAAqBd,kBAAkB;QAAEe,aAAa;IAAqB;IACjF,OAAOd,sBACL;QACEe,IAAI;QACJC,MAAM;QACN,GAAIV,cAAc,WAAWO,kBAAkB;QAC/CI,UAAUT,WAAW,IAAIU;QACzB,GAAIR,mBAAmBC,kBAAkBJ,YAAY,CAAC,CAAC;QACvD,GAAGH,KAAK;IACV,GACAC;AAEJ,EAAE"}

package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js CHANGED Viewed

@@ -27,7 +27,9 @@ import { isColumnSortable } from '../../utils/isColumnSortable';
     });
     const sortDirection = useDataGridContext_unstable((ctx)=>sortable ? ctx.sort.getSortDirection(columnId) : undefined);
     const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);
-    const columnSizing = useDataGridContext_unstable((ctx)=>ctx.columnSizing_unstable);
+    const getTableHeaderCellProps = useDataGridContext_unstable((ctx)=>{
+        return ctx.columnSizing_unstable.getTableHeaderCellProps;
+    });
     // eslint-disable-next-line deprecation/deprecation -- prefer HTMLTableCellElement
     const onClick = useEventCallback((e)=>{
         var _props_onClick;
@@ -41,7 +43,7 @@ import { isColumnSortable } from '../../utils/isColumnSortable';
         sortDirection,
         as: 'div',
         tabIndex: sortable ? undefined : 0,
-        ...resizableColumns ? columnSizing.getTableHeaderCellProps(columnId) : {},
+        ...resizableColumns ? getTableHeaderCellProps(columnId) : {},
         ...props,
         onClick
     }, ref);

package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDataGridHeaderCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { isColumnSortable } from '../../utils/isColumnSortable';\n\n/*\n Create the state required to render DataGridHeaderCell.\n \n The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n \n @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */\nexport const useDataGridHeaderCell_unstable = (\n props: DataGridHeaderCellProps,\n ref: React.Ref<HTMLElement>,\n): DataGridHeaderCellState => {\n const columnId = useColumnIdContext();\n const { sortable: gridSortable } = useTableContext();\n const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n\n const sortable = useDataGridContext_unstable(ctx => {\n const columnSortable = !!ctx.columns.find(c => c.columnId === columnId && isColumnSortable(c));\n if (!gridSortable) {\n // if the grid is not sortable - disable sorting on all columns\n return false;\n }\n\n return columnSortable;\n });\n\n const sortDirection = useDataGridContext_unstable(ctx =>\n sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n );\n const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n const ~~columnSizing~~ = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\n\n // eslint-disable-next-line deprecation/deprecation -- prefer HTMLTableCellElement\n const onClick = useEventCallback((e: React.MouseEvent<HTMLTableHeaderCellElement>) => {\n if (sortable) {\n toggleColumnSort(e, columnId);\n }\n props.onClick?.(e);\n });\n\n return useTableHeaderCell_unstable(\n {\n sortable,\n sortDirection,\n as: 'div',\n tabIndex: sortable ? undefined : 0,\n ...(resizableColumns ? ~~columnSizing.~~getTableHeaderCellProps(columnId) : {}),\n ...props,\n onClick,\n },\n ref,\n );\n};\n"],"names":["React","useEventCallback","useTableHeaderCell_unstable","useDataGridContext_unstable","useColumnIdContext","useTableContext","isColumnSortable","useDataGridHeaderCell_unstable","props","ref","columnId","sortable","gridSortable","toggleColumnSort","ctx","sort","columnSortable","columns","find","c","sortDirection","getSortDirection","undefined","resizableColumns","~~columnSizing~~","columnSizing_unstable","onClick","e","as","tabIndex"~~,"getTableHeaderCellProps"~~],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,2BAA2B,QAAQ,wCAAwC;AACpF,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,+BAA+B;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,WAAWN;IACjB,MAAM,EAAEO,UAAUC,YAAY,EAAE,GAAGP;IACnC,MAAMQ,mBAAmBV,4BAA4BW,CAAAA,MAAOA,IAAIC,IAAI,CAACF,gBAAgB;IAErF,MAAMF,WAAWR,4BAA4BW,CAAAA;QAC3C,MAAME,iBAAiB,CAAC,CAACF,IAAIG,OAAO,CAACC,IAAI,CAACC,CAAAA,IAAKA,EAAET,QAAQ,KAAKA,YAAYJ,iBAAiBa;QAC3F,IAAI,CAACP,cAAc;YACjB,+DAA+D;YAC/D,OAAO;QACT;QAEA,OAAOI;IACT;IAEA,MAAMI,gBAAgBjB,4BAA4BW,CAAAA,MAChDH,WAAWG,IAAIC,IAAI,CAACM,gBAAgB,CAACX,YAAYY;IAEnD,MAAMC,mBAAmBpB,4BAA4BW,CAAAA,MAAOA,IAAIS,gBAAgB;IAChF,MAAMC,~~eAAerB~~,4BAA4BW,CAAAA,~~MAAOA~~,IAAIW,qBAAqB;~~IAEjF~~,kFAAkF;IAClF,~~MAAMC~~,UAAUzB,iBAAiB,CAAC0B;YAIhCnB;QAHA,IAAIG,UAAU;YACZE,iBAAiBc,GAAGjB;QACtB;SACAF,iBAAAA,MAAMkB,OAAO,cAAblB,qCAAAA,oBAAAA,OAAgBmB;IAClB;IAEA,OAAOzB,4BACL;QACES;QACAS;QACAQ,IAAI;QACJC,UAAUlB,WAAWW,YAAY;QACjC,GAAIC,mBAAmBC,~~aAAaM~~,~~uBAAuB,CAACpB,~~YAAY,CAAC,CAAC;~~QAC1E~~,GAAGF,KAAK;QACRkB;IACF,GACAjB;AAEJ,EAAE"}
1	+ {"version":3,"sources":["useDataGridHeaderCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { isColumnSortable } from '../../utils/isColumnSortable';\n\n/*\n Create the state required to render DataGridHeaderCell.\n \n The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n \n @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */\nexport const useDataGridHeaderCell_unstable = (\n props: DataGridHeaderCellProps,\n ref: React.Ref<HTMLElement>,\n): DataGridHeaderCellState => {\n const columnId = useColumnIdContext();\n const { sortable: gridSortable } = useTableContext();\n const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n\n const sortable = useDataGridContext_unstable(ctx => {\n const columnSortable = !!ctx.columns.find(c => c.columnId === columnId && isColumnSortable(c));\n if (!gridSortable) {\n // if the grid is not sortable - disable sorting on all columns\n return false;\n }\n\n return columnSortable;\n });\n\n const sortDirection = useDataGridContext_unstable(ctx =>\n sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n );\n const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n const getTableHeaderCellProps = useDataGridContext_unstable(ctx => {\n return ctx.columnSizing_unstable.getTableHeaderCellProps;\n });\n\n // eslint-disable-next-line deprecation/deprecation -- prefer HTMLTableCellElement\n const onClick = useEventCallback((e: React.MouseEvent<HTMLTableHeaderCellElement>) => {\n if (sortable) {\n toggleColumnSort(e, columnId);\n }\n props.onClick?.(e);\n });\n\n return useTableHeaderCell_unstable(\n {\n sortable,\n sortDirection,\n as: 'div',\n tabIndex: sortable ? undefined : 0,\n ...(resizableColumns ? getTableHeaderCellProps(columnId) : {}),\n ...props,\n onClick,\n },\n ref,\n );\n};\n"],"names":["React","useEventCallback","useTableHeaderCell_unstable","useDataGridContext_unstable","useColumnIdContext","useTableContext","isColumnSortable","useDataGridHeaderCell_unstable","props","ref","columnId","sortable","gridSortable","toggleColumnSort","ctx","sort","columnSortable","columns","find","c","sortDirection","getSortDirection","undefined","resizableColumns","getTableHeaderCellProps","columnSizing_unstable","onClick","e","as","tabIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,2BAA2B,QAAQ,wCAAwC;AACpF,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,+BAA+B;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,WAAWN;IACjB,MAAM,EAAEO,UAAUC,YAAY,EAAE,GAAGP;IACnC,MAAMQ,mBAAmBV,4BAA4BW,CAAAA,MAAOA,IAAIC,IAAI,CAACF,gBAAgB;IAErF,MAAMF,WAAWR,4BAA4BW,CAAAA;QAC3C,MAAME,iBAAiB,CAAC,CAACF,IAAIG,OAAO,CAACC,IAAI,CAACC,CAAAA,IAAKA,EAAET,QAAQ,KAAKA,YAAYJ,iBAAiBa;QAC3F,IAAI,CAACP,cAAc;YACjB,+DAA+D;YAC/D,OAAO;QACT;QAEA,OAAOI;IACT;IAEA,MAAMI,gBAAgBjB,4BAA4BW,CAAAA,MAChDH,WAAWG,IAAIC,IAAI,CAACM,gBAAgB,CAACX,YAAYY;IAEnD,MAAMC,mBAAmBpB,4BAA4BW,CAAAA,MAAOA,IAAIS,gBAAgB;IAChF,MAAMC,0BAA0BrB,4BAA4BW,CAAAA;QAC1D,OAAOA,IAAIW,qBAAqB,CAACD,uBAAuB;IAC1D;IAEA,kFAAkF;IAClF,MAAME,UAAUzB,iBAAiB,CAAC0B;YAIhCnB;QAHA,IAAIG,UAAU;YACZE,iBAAiBc,GAAGjB;QACtB;SACAF,iBAAAA,MAAMkB,OAAO,cAAblB,qCAAAA,oBAAAA,OAAgBmB;IAClB;IAEA,OAAOzB,4BACL;QACES;QACAS;QACAQ,IAAI;QACJC,UAAUlB,WAAWW,YAAY;QACjC,GAAIC,mBAAmBC,wBAAwBd,YAAY,CAAC,CAAC;QAC7D,GAAGF,KAAK;QACRkB;IACF,GACAjB;AAEJ,EAAE"}

package/lib/components/DataGridRow/useDataGridRow.js CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { isInteractiveHTMLElement, useEventCallback, slot } from '@fluentui/react-utilities';
 import { Space } from '@fluentui/keyboard-keys';
 import { useTableRow_unstable } from '../TableRow/useTableRow';
-import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
+import { dataGridContextDefaultValue, useDataGridContext_unstable } from '../../contexts/dataGridContext';
 import { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';
 import { useTableRowIdContext } from '../../contexts/rowIdContext';
 import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
@@ -30,7 +30,6 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
         return 'none';
     });
     const toggleRow = useDataGridContext_unstable((ctx)=>ctx.selection.toggleRow);
-    const dataGridContextValue = useDataGridContext_unstable((ctx)=>ctx);
     const onClick = useEventCallback((e)=>{
         var _props_onClick;
         if (selectable && !isHeader) {
@@ -70,6 +69,18 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
         }),
         renderCell: props.children,
         columnDefs,
-        dataGridContextValue
+        // This context value should not be used internally
+        // It's intended to help power user render functions
+        dataGridContextValue: useStableDataGridContextValue()
     };
 };
+/**
+ * Do not rely on context changes here to trigger re-renders
+ * @returns - Entire DataGridContext as a stable value
+ */ function useStableDataGridContextValue() {
+    const ref = React.useRef(dataGridContextDefaultValue);
+    useDataGridContext_unstable((ctx)=>{
+        ref.current = ctx;
+    });
+    return ref.current;
+}

package/lib/components/DataGridRow/useDataGridRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/*\n Create the state required to render DataGridRow.\n \n The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n \n @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n const rowId = useTableRowIdContext();\n const isHeader = useIsInTableHeader();\n const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n const focusMode = useDataGridContext_unstable(ctx => ctx.focusMode);\n const compositeRowTabsterAttribute = useDataGridContext_unstable(ctx => ctx.compositeRowTabsterAttribute);\n const tabbable = focusMode === 'row_unstable' \|\| focusMode === 'composite';\n const appearance = useDataGridContext_unstable(ctx => {\n if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n return ctx.selectionAppearance;\n }\n\n return 'none';\n });\n const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n ~~const dataGridContextValue = useDataGridContext_unstable(ctx => ctx);\n~~\n const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n if (selectable && !isHeader) {\n toggleRow(e, rowId);\n }\n\n props.onClick?.(e);\n });\n\n const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target as HTMLElement)) {\n // stop scrolling\n e.preventDefault();\n toggleRow(e, rowId);\n }\n\n props.onKeyDown?.(e);\n });\n\n const baseState = useTableRow_unstable(\n {\n appearance,\n 'aria-selected': selectable ? selected : undefined,\n tabIndex: tabbable && !isHeader ? 0 : undefined,\n ...(focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute),\n ...props,\n onClick,\n onKeyDown,\n children: null,\n as: 'div',\n },\n ref,\n );\n\n return {\n ...baseState,\n components: {\n ...baseState.components,\n selectionCell: DataGridSelectionCell,\n },\n selectionCell: slot.optional(props.selectionCell, {\n renderByDefault: selectable,\n elementType: DataGridSelectionCell,\n }),\n renderCell: props.children,\n columnDefs,\n dataGridContextValue,\n };\n};\n"],"names":["React","isInteractiveHTMLElement","useEventCallback","slot","Space","useTableRow_unstable","useDataGridContext_unstable","DataGridSelectionCell","useTableRowIdContext","useIsInTableHeader","useDataGridRow_unstable","props","ref","rowId","isHeader","columnDefs","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","focusMode","compositeRowTabsterAttribute","tabbable","appearance","selectionAppearance","toggleRow","~~dataGridContextValue","~~onClick","e","onKeyDown","key","target","preventDefault","baseState","undefined","tabIndex","children","as","components","selectionCell","optional","renderByDefault","elementType","renderCell"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC7F,SAASC,KAAK,QAAQ,0BAA0B;AAEhD,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,2BAA2B,QAAQ,iCAAiC;~~AAC7E~~,SAASC,qBAAqB,QAAQ,iDAAiD;AACvF,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,QAAQL;IACd,MAAMM,WAAWL;IACjB,MAAMM,aAAaT,4BAA4BU,CAAAA,MAAOA,IAAIC,OAAO;IACjE,MAAMC,aAAaZ,4BAA4BU,CAAAA,MAAOA,IAAIG,cAAc;IACxE,MAAMC,WAAWd,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACC,aAAa,CAACT;IAChF,MAAMU,YAAYjB,4BAA4BU,CAAAA,MAAOA,IAAIO,SAAS;IAClE,MAAMC,+BAA+BlB,4BAA4BU,CAAAA,MAAOA,IAAIQ,4BAA4B;~~IACxG~~,MAAMC,WAAWF,cAAc,kBAAkBA,cAAc;IAC/D,MAAMG,aAAapB,4BAA4BU,CAAAA;QAC7C,IAAI,CAACF,YAAYI,cAAcF,IAAIK,SAAS,CAACC,aAAa,CAACT,QAAQ;YACjE,OAAOG,IAAIW,mBAAmB;QAChC;QAEA,OAAO;IACT;IACA,MAAMC,YAAYtB,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACO,SAAS;~~IAC5E~~,MAAMC,~~uBAAuBvB,4BAA4BU,CAAAA,MAAOA;IAEhE,MAAMc,~~UAAU5B,iBAAiB,CAAC6B;~~YAKhCpB~~;QAJA,IAAIO,cAAc,CAACJ,UAAU;YAC3Bc,~~UAAUG~~,~~GAAGlB~~;QACf;SAEAF,iBAAAA,~~MAAMmB~~,OAAO,~~cAAbnB~~,qCAAAA,oBAAAA,~~OAAgBoB~~;IAClB;IAEA,MAAMC,YAAY9B,iBAAiB,CAAC6B;~~YAOlCpB~~;QANA,IAAIO,cAAc,CAACJ,~~YAAYiB~~,EAAEE,GAAG,KAAK7B,SAAS,CAACH,yBAAyB8B,EAAEG,MAAM,GAAkB;YACpG,iBAAiB;YACjBH,EAAEI,cAAc;~~YAChBP~~,~~UAAUG~~,~~GAAGlB~~;QACf;SAEAF,mBAAAA,~~MAAMqB~~,SAAS,~~cAAfrB~~,uCAAAA,sBAAAA,~~OAAkBoB~~;IACpB;IAEA,MAAMK,YAAY/B,qBAChB;~~QACEqB~~;QACA,iBAAiBR,aAAaE,~~WAAWiB~~;QACzCC,~~UAAUb~~,YAAY,CAACX,WAAW,~~IAAIuB~~;QACtC,~~GAAId~~,cAAc,eAAe,CAACT,YAAYU,4BAA4B;QAC1E,GAAGb,KAAK;~~QACRmB~~;QACAE;QACAO,UAAU;QACVC,IAAI;IACN,~~GACA5B~~;IAGF,OAAO;QACL,~~GAAGwB~~,SAAS;QACZK,YAAY;YACV,GAAGL,UAAUK,UAAU;YACvBC,~~eAAenC~~;QACjB;~~QACAmC~~,eAAevC,KAAKwC,QAAQ,~~CAAChC,MAAM+~~B,aAAa,EAAE;YAChDE,~~iBAAiB1B~~;~~YACjB2B~~,~~aAAatC~~;QACf;~~QACAuC~~,~~YAAYnC~~,~~MAAM4B~~,QAAQ;~~QAC1BxB~~;~~QACAc~~;~~IACF~~;AACF,EAAE"}
1	+ {"version":3,"sources":["useDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { dataGridContextDefaultValue, useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/*\n Create the state required to render DataGridRow.\n \n The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n \n @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n /\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n const rowId = useTableRowIdContext();\n const isHeader = useIsInTableHeader();\n const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n const focusMode = useDataGridContext_unstable(ctx => ctx.focusMode);\n const compositeRowTabsterAttribute = useDataGridContext_unstable(ctx => ctx.compositeRowTabsterAttribute);\n\n const tabbable = focusMode === 'row_unstable' \|\| focusMode === 'composite';\n const appearance = useDataGridContext_unstable(ctx => {\n if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n return ctx.selectionAppearance;\n }\n\n return 'none';\n });\n const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n\n const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n if (selectable && !isHeader) {\n toggleRow(e, rowId);\n }\n\n props.onClick?.(e);\n });\n\n const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target as HTMLElement)) {\n // stop scrolling\n e.preventDefault();\n toggleRow(e, rowId);\n }\n\n props.onKeyDown?.(e);\n });\n\n const baseState = useTableRow_unstable(\n {\n appearance,\n 'aria-selected': selectable ? selected : undefined,\n tabIndex: tabbable && !isHeader ? 0 : undefined,\n ...(focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute),\n ...props,\n onClick,\n onKeyDown,\n children: null,\n as: 'div',\n },\n ref,\n );\n\n return {\n ...baseState,\n components: {\n ...baseState.components,\n selectionCell: DataGridSelectionCell,\n },\n selectionCell: slot.optional(props.selectionCell, {\n renderByDefault: selectable,\n elementType: DataGridSelectionCell,\n }),\n renderCell: props.children,\n columnDefs,\n // This context value should not be used internally\n // It's intended to help power user render functions\n dataGridContextValue: useStableDataGridContextValue(),\n };\n};\n\n/\n Do not rely on context changes here to trigger re-renders\n * @returns - Entire DataGridContext as a stable value\n */\nfunction useStableDataGridContextValue() {\n const ref = React.useRef(dataGridContextDefaultValue);\n useDataGridContext_unstable(ctx => {\n ref.current = ctx;\n });\n\n return ref.current!;\n}\n"],"names":["React","isInteractiveHTMLElement","useEventCallback","slot","Space","useTableRow_unstable","dataGridContextDefaultValue","useDataGridContext_unstable","DataGridSelectionCell","useTableRowIdContext","useIsInTableHeader","useDataGridRow_unstable","props","ref","rowId","isHeader","columnDefs","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","focusMode","compositeRowTabsterAttribute","tabbable","appearance","selectionAppearance","toggleRow","onClick","e","onKeyDown","key","target","preventDefault","baseState","undefined","tabIndex","children","as","components","selectionCell","optional","renderByDefault","elementType","renderCell","dataGridContextValue","useStableDataGridContextValue","useRef","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC7F,SAASC,KAAK,QAAQ,0BAA0B;AAEhD,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,2BAA2B,EAAEC,2BAA2B,QAAQ,iCAAiC;AAC1G,SAASC,qBAAqB,QAAQ,iDAAiD;AACvF,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,QAAQL;IACd,MAAMM,WAAWL;IACjB,MAAMM,aAAaT,4BAA4BU,CAAAA,MAAOA,IAAIC,OAAO;IACjE,MAAMC,aAAaZ,4BAA4BU,CAAAA,MAAOA,IAAIG,cAAc;IACxE,MAAMC,WAAWd,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACC,aAAa,CAACT;IAChF,MAAMU,YAAYjB,4BAA4BU,CAAAA,MAAOA,IAAIO,SAAS;IAClE,MAAMC,+BAA+BlB,4BAA4BU,CAAAA,MAAOA,IAAIQ,4BAA4B;IAExG,MAAMC,WAAWF,cAAc,kBAAkBA,cAAc;IAC/D,MAAMG,aAAapB,4BAA4BU,CAAAA;QAC7C,IAAI,CAACF,YAAYI,cAAcF,IAAIK,SAAS,CAACC,aAAa,CAACT,QAAQ;YACjE,OAAOG,IAAIW,mBAAmB;QAChC;QAEA,OAAO;IACT;IACA,MAAMC,YAAYtB,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACO,SAAS;IAE5E,MAAMC,UAAU5B,iBAAiB,CAAC6B;YAKhCnB;QAJA,IAAIO,cAAc,CAACJ,UAAU;YAC3Bc,UAAUE,GAAGjB;QACf;SAEAF,iBAAAA,MAAMkB,OAAO,cAAblB,qCAAAA,oBAAAA,OAAgBmB;IAClB;IAEA,MAAMC,YAAY9B,iBAAiB,CAAC6B;YAOlCnB;QANA,IAAIO,cAAc,CAACJ,YAAYgB,EAAEE,GAAG,KAAK7B,SAAS,CAACH,yBAAyB8B,EAAEG,MAAM,GAAkB;YACpG,iBAAiB;YACjBH,EAAEI,cAAc;YAChBN,UAAUE,GAAGjB;QACf;SAEAF,mBAAAA,MAAMoB,SAAS,cAAfpB,uCAAAA,sBAAAA,OAAkBmB;IACpB;IAEA,MAAMK,YAAY/B,qBAChB;QACEsB;QACA,iBAAiBR,aAAaE,WAAWgB;QACzCC,UAAUZ,YAAY,CAACX,WAAW,IAAIsB;QACtC,GAAIb,cAAc,eAAe,CAACT,YAAYU,4BAA4B;QAC1E,GAAGb,KAAK;QACRkB;QACAE;QACAO,UAAU;QACVC,IAAI;IACN,GACA3B;IAGF,OAAO;QACL,GAAGuB,SAAS;QACZK,YAAY;YACV,GAAGL,UAAUK,UAAU;YACvBC,eAAelC;QACjB;QACAkC,eAAevC,KAAKwC,QAAQ,CAAC/B,MAAM8B,aAAa,EAAE;YAChDE,iBAAiBzB;YACjB0B,aAAarC;QACf;QACAsC,YAAYlC,MAAM2B,QAAQ;QAC1BvB;QACA,mDAAmD;QACnD,oDAAoD;QACpD+B,sBAAsBC;IACxB;AACF,EAAE;AAEF;;;CAGC,GACD,SAASA;IACP,MAAMnC,MAAMb,MAAMiD,MAAM,CAAC3C;IACzBC,4BAA4BU,CAAAA;QAC1BJ,IAAIqC,OAAO,GAAGjC;IAChB;IAEA,OAAOJ,IAAIqC,OAAO;AACpB"}

package/lib/components/TableCellLayout/TableCellLayout.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["TableCellLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSize } from '@fluentui/react-avatar';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellLayoutContextValues = {\n avatar: {\n size?: AvatarSize;\n };\n};\n\nexport type TableCellLayoutSlots = {\n root: Slot<'div'>;\n\n /*\n Slot for an icon or other visual element\n /\n media: Slot<'span'>;\n\n /\n Main text for the table cell. Children of the root slot are automatically rendered here\n /\n main: Slot<'span'>;\n\n /\n Secondary text that describes or complements the main text\n /\n description: Slot<'span'>;\n\n /\n A layout wrapper for the main and description slots\n /\n content: Slot<'div'>;\n};\n\n/\n TableCellLayout Props\n /\nexport type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots>> & {\n /\n Renders design variants of the table cell\n * @default undefined\n /\n appearance?: 'primary';\n\n /\n Renders content with overflow: hidden and text-overflow: ellipsis\n /\n truncate?: boolean;\n};\n\n/\n State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &\n Pick<TableCellLayoutProps, 'appearance' \| 'truncate'> & { avatarSize: AvatarSize \| undefined } & Pick<\n TableContextValue,\n 'size'\n >;\n"],"names":[],"mappings":"AAAA,~~WAyDI~~"}
1	+ {"version":3,"sources":["TableCellLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSize } from '@fluentui/react-avatar';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellLayoutContextValues = {\n avatar: {\n size?: AvatarSize;\n };\n};\n\nexport type TableCellLayoutSlots = {\n root: Slot<'div'>;\n\n /*\n Slot for an icon or other visual element\n /\n media: Slot<'span'>;\n\n /\n Main text for the table cell. Children of the root slot are automatically rendered here\n /\n main: Slot<'span'>;\n\n /\n Secondary text that describes or complements the main text\n /\n description: Slot<'span'>;\n\n /\n A layout wrapper for the main and description slots\n /\n content: Slot<'div'>;\n};\n\n/\n TableCellLayout Props\n /\nexport type TableCellLayoutProps = Omit<ComponentProps<Partial<TableCellLayoutSlots>>, 'content'> &\n Pick<Partial<TableCellLayoutSlots>, 'content'> & {\n /\n Renders design variants of the table cell\n * @default undefined\n /\n appearance?: 'primary';\n\n /\n Renders content with overflow: hidden and text-overflow: ellipsis\n /\n truncate?: boolean;\n };\n\n/\n State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &\n Pick<TableCellLayoutProps, 'appearance' \| 'truncate'> & { avatarSize: AvatarSize \| undefined } & Pick<\n TableContextValue,\n 'size'\n >;\n"],"names":[],"mappings":"AAAA,WA0DI"}

package/lib/components/TableRow/useTableRowStyles.styles.js CHANGED Viewed

@@ -47,7 +47,12 @@ const useStyles = /*#__PURE__*/__styles({
     Jwef8y: "f1t94bn6",
     Bi91k9c: "feu1g3u",
     Bpt6rm4: "f1uorfem",
-    ff6mpl: "fw60kww"
+    ff6mpl: "fw60kww",
+    ze5xyy: "f4xjyn1",
+    pgvf35: "ff1wgvm",
+    Bh7lczh: ["fiob0tu", "f1x4h75k"],
+    dpv3f4: "f1j6scgf",
+    Bpnjhaq: ["f1x4h75k", "fiob0tu"]
   },
   medium: {
     Bn0qgzm: "f1vxd6vx",
@@ -122,7 +127,15 @@ const useStyles = /*#__PURE__*/__styles({
   d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1jazu75[data-fui-focus-within]:focus-within .fui-TableSelectionCell{opacity:1;}", ".f1xeqee6[data-fui-focus-within]:focus-within .fui-TableCellActions{opacity:1;}", ".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);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}"],
   a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".f7tkmfy:active{background-color:var(--colorBrandBackground2);}", ".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
   h: [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
-  m: [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
+  m: [["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
     m: "(forced-colors: active)"

package/lib/components/TableRow/useTableRowStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","medium","Bn0qgzm","oivjwe","B9xav0g","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","gwxt9v","v3aym","Bc736ss","Bk6ri7n","Bk5ld8o","c4eypz","felo30","Eshu5l","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Beo2b4z","h6lo6r","Btyw6ap","w1pwid","Brwvgy3","yadkgm","neutral","none","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"sources":["useTableRowStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row'\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n }\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle({\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n }\n }, {\n selector: 'focus-within'\n }),\n ...createCustomFocusIndicatorStyle({\n ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n ...shorthands.borderRadius(tokens.borderRadiusMedium)\n }, {\n selector: 'focus'\n })\n },\n rootInteractive: {\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n }\n },\n medium: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)\n },\n small: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)\n },\n 'extra-small': {\n fontSize: tokens.fontSizeBase200\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n ':active': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1\n },\n '@media(forced-colors: active)': {\n ...shorthands.border('2px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px'\n }\n }\n },\n neutral: {\n '@media(forced-colors: active)': {\n ...shorthands.border('2px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px'\n }\n },\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground1Hover,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundSelected\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundSelected\n },\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)\n },\n none: {}\n});\n/\n Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,0BAA0B,QAAQ,sDAAsD;AACjG,SAASC,4BAA4B,QAAQ,0DAA0D;AACvG,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,iBAAiB,GAAG,cAAc;AAC/C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAEF;AACV,CAAC;AACD,MAAMG,oBAAoB,gBAAGV,QAAA;EAAAS,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAS,IAAA;IAAAE,MAAA;IAAAG,OAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAK3B,CAAC;AACF;AACA;AACA;AAAI,MAAMG,SAAS,gBAAGf,QAAA;EAAAS,IAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAH,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAE,OAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAN,OAAA;IAAAO,MAAA;~~IAAAlB~~,MAAA;IAAAC,MAAA;~~IAAAkB~~,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAlB,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAArB,MAAA;~~IAAA3B~~,MAAA;IAAAgB,MAAA;IAAAJ,MAAA;~~IAAAgB~~,MAAA;IAAAC,MAAA;IAAAN,OAAA;IAAAO,MAAA;EAAA;EAAAoB,IAAA;AAAA;~~EAAAtD~~,CAAA;~~EAAAuD~~,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,~~CAwFrB~~,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,MAAM,~~GAAGzD~~,SAAS,CAAC,CAAC;EAC1B,~~MAAM0D~~,YAAY,GAAG;IACjBC,KAAK,~~EAAEhE~~,oBAAoB,CAAC,CAAC;~~IAC7BiE~~,IAAI,~~EAAE9D~~,mBAAmB,CAAC;EAC9B,CAAC;~~EACD0D~~,KAAK,~~CAAC9D~~,IAAI,~~CAACmE~~,SAAS,~~GAAG3E~~,YAAY,CAACO,kBAAkB,CAACC,IAAI,~~EAAE+D~~,MAAM,~~CAAC/D~~,IAAI,EAAE,~~CAAC8D~~,KAAK,CAACM,WAAW,IAAIL,MAAM,~~CAAC7C~~,eAAe,~~EAAE6C~~,MAAM,CAACD,KAAK,CAACO,IAAI,CAAC,EAAEP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,~~CAAClE~~,IAAI,~~GAAGgE~~,YAAY,CAACC,KAAK,~~CAACjE~~,IAAI,~~EAAE+D~~,MAAM,CAACD,KAAK,CAACS,UAAU,CAAC,EAAET,KAAK,~~CAAC9D~~,IAAI,~~CAACmE~~,SAAS,CAAC;EACtQ,OAAOL,KAAK;AAChB,CAAC"}
1	+ {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","ze5xyy","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","medium","Bn0qgzm","oivjwe","B9xav0g","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","gwxt9v","v3aym","Bc736ss","Bk6ri7n","Bk5ld8o","c4eypz","felo30","Eshu5l","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Beo2b4z","h6lo6r","Btyw6ap","w1pwid","Brwvgy3","yadkgm","neutral","none","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"sources":["useTableRowStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row'\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n }\n});\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle({\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n }\n }, {\n selector: 'focus-within'\n }),\n ...createCustomFocusIndicatorStyle({\n ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n ...shorthands.borderRadius(tokens.borderRadiusMedium)\n }, {\n selector: 'focus'\n })\n },\n rootInteractive: {\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n medium: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)\n },\n small: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)\n },\n 'extra-small': {\n fontSize: tokens.fontSizeBase200\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n ':active': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1\n },\n '@media(forced-colors: active)': {\n ...shorthands.border('2px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px'\n }\n }\n },\n neutral: {\n '@media(forced-colors: active)': {\n ...shorthands.border('2px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px'\n }\n },\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground1Hover,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundSelected\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundSelected\n },\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)\n },\n none: {}\n});\n/\n Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);\n return state;\n};\n"],"mappings":"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"}

package/lib/contexts/dataGridContext.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 import { defaultTableState } from '../hooks';
 const dataGridContext = createContext(undefined);
-const dataGridContextDefaultValue = {
+export const dataGridContextDefaultValue = {
     ...defaultTableState,
     subtleSelection: false,
     selectableRows: false,

package/lib/contexts/dataGridContext.js.map CHANGED Viewed

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

package/lib/hooks/useKeyboardResizing.js CHANGED Viewed

@@ -115,7 +115,7 @@ export function useKeyboardResizing(columnResizeState) {
     return {
         toggleInteractiveMode,
         columnId,
-        getKeyboardResizingProps: (colId, currentWidth)=>({
+        getKeyboardResizingProps: React.useCallback((colId, currentWidth)=>({
                 onKeyDown: keyboardHandler,
                 onBlur: disableInteractiveMode,
                 ref: getKeyboardResizingRef(colId),
@@ -125,6 +125,12 @@ export function useKeyboardResizing(columnResizeState) {
                 'aria-hidden': colId === columnId ? false : true,
                 tabIndex: colId === columnId ? 0 : undefined,
                 ...tabsterAttrs
-            })
+            }), [
+            columnId,
+            disableInteractiveMode,
+            getKeyboardResizingRef,
+            keyboardHandler,
+            tabsterAttrs
+        ])
     };
 }

package/lib/hooks/useKeyboardResizing.js.map CHANGED Viewed

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

package/lib/hooks/useTableColumnResizeMouseHandler.js CHANGED Viewed

@@ -7,18 +7,19 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
     const colId = React.useRef(undefined);
     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);
         const dx = clientX - mouseX.current;
         // Update the local width for the column and set it
         currentWidth.current += dx;
-        colId.current && columnResizeState.setColumnWidth(e, {
+        colId.current && setColumnWidth(e, {
             columnId: colId.current,
             width: currentWidth.current
         });
         mouseX.current = clientX;
     }, [
-        columnResizeState
+        setColumnWidth
     ]);
     const onDrag = React.useCallback((e)=>{
         // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs
@@ -44,10 +45,10 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
         onDrag,
         targetDocument
     ]);
-    const getOnMouseDown = (columnId)=>(event)=>{
+    const getOnMouseDown = React.useCallback((columnId)=>(event)=>{
             // Keep the width locally so that we decouple the calculation of the next with from rendering.
             // This makes the whole experience much faster and more precise
-            currentWidth.current = columnResizeState.getColumnWidth(columnId);
+            currentWidth.current = getColumnWidth(columnId);
             mouseX.current = getEventClientCoords(event).clientX;
             colId.current = columnId;
             if (isMouseEvent(event)) {
@@ -62,8 +63,13 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
                 targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);
                 targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);
             }
-        };
+        }, [
+        getColumnWidth,
+        onDrag,
+        onDragEnd,
+        targetDocument
+    ]);
     return {
-        getOnMouseDown: (columnId)=>getOnMouseDown(columnId)
+        getOnMouseDown
     };
 }

package/lib/hooks/useTableColumnResizeMouseHandler.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n NativeTouchOrMouseEvent,\n ReactTouchOrMouseEvent,\n getEventClientCoords,\n isMouseEvent,\n isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n const mouseX = React.useRef(0);\n const currentWidth = React.useRef(0);\n const colId = React.useRef<TableColumnId \| undefined>(undefined);\n\n const { targetDocument } = useFluent();\n const globalWin = targetDocument?.defaultView;\n\n const recalculatePosition = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n const { clientX } = getEventClientCoords(e);\n const dx = clientX - mouseX.current;\n\n // Update the local width for the column and set it\n currentWidth.current += dx;\n colId.current && ~~columnResizeState.~~setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n mouseX.current = clientX;\n },\n [~~columnResizeState~~],\n );\n\n const onDrag = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n if (typeof globalWin?.requestAnimationFrame === 'function') {\n requestAnimationFrame(() => recalculatePosition(e));\n } else {\n recalculatePosition(e);\n }\n },\n [globalWin?.requestAnimationFrame, recalculatePosition],\n );\n\n const onDragEnd = React.useCallback(\n (event: NativeTouchOrMouseEvent) => {\n if (isMouseEvent(event)) {\n targetDocument?.removeEventListener('mouseup', onDragEnd);\n targetDocument?.removeEventListener('mousemove', onDrag);\n }\n if (isTouchEvent(event)) {\n targetDocument?.removeEventListener('touchend', onDragEnd);\n targetDocument?.removeEventListener('touchmove', onDrag);\n }\n },\n [onDrag, targetDocument],\n );\n\n const getOnMouseDown = (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n // Keep the width locally so that we decouple the calculation of the next with from rendering.\n // This makes the whole experience much faster and more precise\n currentWidth.current = ~~columnResizeState.~~getColumnWidth(columnId);\n mouseX.current = getEventClientCoords(event).clientX;\n colId.current = columnId;\n\n if (isMouseEvent(event)) {\n // ignore other buttons than primary mouse button\n if (event.target !== event.currentTarget \|\| event.button !== 0) {\n return;\n }\n targetDocument?.addEventListener('mouseup', onDragEnd);\n targetDocument?.addEventListener('mousemove', onDrag);\n }\n\n if (isTouchEvent(event)) {\n targetDocument?.addEventListener('touchend', onDragEnd);\n targetDocument?.addEventListener('touchmove', onDrag);\n }\n };\n\n return {\n getOnMouseDown~~: (columnId: TableColumnId) => getOnMouseDown(columnId)~~,\n };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","targetDocument","globalWin","defaultView","recalculatePosition","useCallback","e","clientX","dx","current","~~setColumnWidth","~~columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","~~getColumnWidth","~~target","currentTarget","button","addEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAGEC,oBAAoB,EACpBC,YAAY,EACZC,YAAY,QACP,4BAA4B;AAEnC,OAAO,SAASC,iCAAiCC,iBAAoC;IACnF,MAAMC,SAASR,MAAMS,MAAM,CAAC;IAC5B,MAAMC,eAAeV,MAAMS,MAAM,CAAC;IAClC,MAAME,QAAQX,MAAMS,MAAM,CAA4BG;IAEtD,MAAM,EAAEC,cAAc,EAAE,GAAGX;IAC3B,MAAMY,YAAYD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAE7C,~~MAAMC~~,~~sBAAsBhB~~,~~MAAMiB~~,WAAW,CAC3C,CAACC;QACC,MAAM,EAAEC,OAAO,EAAE,~~GAAGhB~~,~~qBAAqBe~~;QACzC,MAAME,KAAKD,~~UAAUX~~,~~OAAOa~~,OAAO;QAEnC,mDAAmD;~~QACnDX~~,~~aAAaW~~,OAAO,IAAID;~~QACxBT~~,~~MAAMU~~,OAAO,~~IAAId~~,~~kBAAkBe~~,~~cAAc,CAACJ,~~GAAG;~~YAAEK~~,~~UAAUZ~~,~~MAAMU~~,OAAO;~~YAAEG~~,~~OAAOd~~,~~aAAaW~~,OAAO;QAAC;~~QAC5Gb~~,~~OAAOa~~,OAAO,GAAGF;IACnB,GACA;~~QAACZ~~;~~KAAkB~~;~~IAGrB~~,~~MAAMkB~~,~~SAASzB~~,~~MAAMiB~~,WAAW,CAC9B,CAACC;QACC,2FAA2F;QAC3F,IAAI,~~QAAOJ~~,sBAAAA,gCAAAA,~~UAAWY~~,qBAAqB,MAAK,YAAY;YAC1DA,sBAAsB,~~IAAMV~~,oBAAoBE;QAClD,OAAO;YACLF,oBAAoBE;QACtB;IACF,GACA;~~QAACJ~~,sBAAAA,gCAAAA,~~UAAWY~~,qBAAqB;~~QAAEV~~;KAAoB;IAGzD,~~MAAMW~~,~~YAAY3B~~,~~MAAMiB~~,WAAW,CACjC,~~CAACW~~;QACC,~~IAAIxB~~,~~aAAawB~~,QAAQ;~~YACvBf~~,2BAAAA,qCAAAA,~~eAAgBgB~~,mBAAmB,CAAC,WAAWF;YAC/Cd,2BAAAA,qCAAAA,~~eAAgBgB~~,mBAAmB,CAAC,aAAaJ;QACnD;QACA,~~IAAIpB~~,~~aAAauB~~,QAAQ;~~YACvBf~~,2BAAAA,qCAAAA,~~eAAgBgB~~,mBAAmB,CAAC,YAAYF;~~YAChDd~~,2BAAAA,qCAAAA,~~eAAgBgB~~,mBAAmB,CAAC,aAAaJ;QACnD;IACF,GACA;QAACA;~~QAAQZ~~;KAAe;IAG1B,~~MAAMiB~~,iBAAiB,~~CAACP~~,WAA4B,CAACK;~~YACnD~~,8FAA8F;YAC9F,+DAA+D;YAC/~~DlB~~,~~aAAaW~~,OAAO,~~GAAGd~~,~~kBAAkBwB,cAAc,CAACR~~;~~YACxDf~~,~~OAAOa~~,OAAO,~~GAAGlB~~,~~qBAAqByB~~,~~OAAOT~~,OAAO;~~YACpDR~~,~~MAAMU~~,OAAO,~~GAAGE~~;YAEhB,~~IAAInB~~,~~aAAawB~~,QAAQ;gBACvB,iDAAiD;gBACjD,IAAIA,~~MAAMI~~,MAAM,~~KAAKJ~~,~~MAAMK~~,aAAa,~~IAAIL~~,~~MAAMM~~,MAAM,KAAK,GAAG;oBAC9D;gBACF;gBACArB,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,~~WAAWR~~;~~gBAC5Cd~~,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,~~aAAaV~~;YAChD;YAEA,~~IAAIpB~~,~~aAAauB~~,QAAQ;~~gBACvBf~~,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,~~YAAYR~~;~~gBAC7Cd~~,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,~~aAAaV~~;YAChD;QACF;~~IAEA~~,OAAO;~~QACLK,gBAAgB,CAACP,WAA4BO,eAAeP~~;~~IAC9D~~;AACF"}
1	+ {"version":3,"sources":["useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n NativeTouchOrMouseEvent,\n ReactTouchOrMouseEvent,\n getEventClientCoords,\n isMouseEvent,\n isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n const mouseX = React.useRef(0);\n const currentWidth = React.useRef(0);\n const colId = React.useRef<TableColumnId \| undefined>(undefined);\n\n const { targetDocument } = useFluent();\n const globalWin = targetDocument?.defaultView;\n\n const { 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 },\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 }\n\n if (isTouchEvent(event)) {\n targetDocument?.addEventListener('touchend', onDragEnd);\n targetDocument?.addEventListener('touchmove', onDrag);\n }\n },\n [getColumnWidth, onDrag, onDragEnd, targetDocument],\n );\n\n return {\n getOnMouseDown,\n };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","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;IAEtD,MAAM,EAAEC,cAAc,EAAE,GAAGX;IAC3B,MAAMY,YAAYD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAE7C,MAAM,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGV;IAE3C,MAAMW,sBAAsBlB,MAAMmB,WAAW,CAC3C,CAACC;QACC,MAAM,EAAEC,OAAO,EAAE,GAAGlB,qBAAqBiB;QACzC,MAAME,KAAKD,UAAUb,OAAOe,OAAO;QAEnC,mDAAmD;QACnDb,aAAaa,OAAO,IAAID;QACxBX,MAAMY,OAAO,IAAIN,eAAeG,GAAG;YAAEI,UAAUb,MAAMY,OAAO;YAAEE,OAAOf,aAAaa,OAAO;QAAC;QAC1Ff,OAAOe,OAAO,GAAGF;IACnB,GACA;QAACJ;KAAe;IAGlB,MAAMS,SAAS1B,MAAMmB,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,YAAY5B,MAAMmB,WAAW,CACjC,CAACU;QACC,IAAIzB,aAAayB,QAAQ;YACvBhB,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,WAAWF;YAC/Cf,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,aAAaJ;QACnD;QACA,IAAIrB,aAAawB,QAAQ;YACvBhB,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,YAAYF;YAChDf,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,aAAaJ;QACnD;IACF,GACA;QAACA;QAAQb;KAAe;IAG1B,MAAMkB,iBAAiB/B,MAAMmB,WAAW,CACtC,CAACK,WAA4B,CAACK;YAC5B,8FAA8F;YAC9F,+DAA+D;YAC/DnB,aAAaa,OAAO,GAAGP,eAAeQ;YACtChB,OAAOe,OAAO,GAAGpB,qBAAqB0B,OAAOR,OAAO;YACpDV,MAAMY,OAAO,GAAGC;YAEhB,IAAIpB,aAAayB,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;YAChD;YAEA,IAAIrB,aAAawB,QAAQ;gBACvBhB,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,YAAYP;gBAC7Cf,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,aAAaT;YAChD;QACF,GACA;QAACV;QAAgBU;QAAQE;QAAWf;KAAe;IAGrD,OAAO;QACLkB;IACF;AACF"}

package/lib/hooks/useTableColumnResizeState.js CHANGED Viewed

@@ -99,9 +99,15 @@ export function useTableColumnResizeState(columns, containerWidth, params = {})
         });
     });
     return {
-        getColumnById: (colId)=>getColumnById(state.columnWidthState, colId),
-        getColumns: ()=>state.columnWidthState,
-        getColumnWidth: (colId)=>getColumnWidth(state.columnWidthState, colId),
+        getColumnById: React.useCallback((colId)=>getColumnById(state.columnWidthState, colId), [
+            state.columnWidthState
+        ]),
+        getColumns: React.useCallback(()=>state.columnWidthState, [
+            state.columnWidthState
+        ]),
+        getColumnWidth: React.useCallback((colId)=>getColumnWidth(state.columnWidthState, colId), [
+            state.columnWidthState
+        ]),
         setColumnWidth
     };
 }

package/lib/hooks/useTableColumnResizeState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n TableColumnDefinition,\n TableColumnId,\n ColumnResizeState,\n ColumnWidthState,\n UseTableColumnSizingParams,\n TableColumnSizingOptions,\n} from './types';\nimport {\n columnDefinitionsToState,\n adjustColumnWidthsToFitContainer,\n getColumnById,\n setColumnProperty,\n getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n columns: TableColumnDefinition<T>[];\n containerWidth: number;\n columnWidthState: ColumnWidthState[];\n columnSizingOptions: TableColumnSizingOptions \| undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n \| {\n type: 'CONTAINER_WIDTH_UPDATED';\n containerWidth: number;\n }\n \| {\n type: 'COLUMNS_UPDATED';\n columns: TableColumnDefinition<T>[];\n }\n \| {\n type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n columnSizingOptions: TableColumnSizingOptions \| undefined;\n }\n \| {\n type: 'SET_COLUMN_WIDTH';\n columnId: TableColumnId;\n width: number;\n };\n\nconst createReducer =\n <T>() =>\n (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n switch (action.type) {\n case 'CONTAINER_WIDTH_UPDATED':\n return {\n ...state,\n containerWidth: action.containerWidth,\n columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n };\n\n case 'COLUMNS_UPDATED':\n const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n return {\n ...state,\n columns: action.columns,\n columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n };\n\n case 'COLUMN_SIZING_OPTIONS_UPDATED':\n const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n return {\n ...state,\n columnSizingOptions: action.columnSizingOptions,\n columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n };\n\n case 'SET_COLUMN_WIDTH':\n const { columnId, width } = action;\n const { containerWidth } = state;\n\n const column = getColumnById(state.columnWidthState, columnId);\n let newColumnWidthState = [...state.columnWidthState];\n\n if (!column) {\n return state;\n }\n\n // Adjust the column width and measure the new total width\n newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n // Adjust the widths to the container size\n newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n return { ...state, columnWidthState: newColumnWidthState };\n }\n };\n\nexport function useTableColumnResizeState<T>(\n columns: TableColumnDefinition<T>[],\n containerWidth: number,\n params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n const { onColumnResize, columnSizingOptions } = params;\n\n const reducer = React.useMemo(() => createReducer<T>(), []);\n\n const [state, dispatch] = React.useReducer(reducer, {\n columns,\n containerWidth: 0,\n columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n columnSizingOptions,\n });\n\n useIsomorphicLayoutEffect(() => {\n dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n }, [containerWidth]);\n\n useIsomorphicLayoutEffect(() => {\n dispatch({ type: 'COLUMNS_UPDATED', columns });\n }, [columns]);\n\n useIsomorphicLayoutEffect(() => {\n dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n }, [columnSizingOptions]);\n\n const setColumnWidth = useEventCallback(\n (event: KeyboardEvent \| MouseEvent \| TouchEvent \| undefined, data: { columnId: TableColumnId; width: number }) => {\n let { width } = data;\n const { columnId } = data;\n const col = getColumnById(state.columnWidthState, columnId);\n if (!col) {\n return;\n }\n\n width = Math.max(col.minWidth \|\| 0, width);\n\n if (onColumnResize) {\n onColumnResize(event, { columnId, width });\n }\n dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n },\n );\n\n return {\n getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n getColumns: () => state.columnWidthState,\n getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n setColumnWidth,\n };\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","colId","getColumns"],"mappings":"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~~eAAe~~,~~CAACgC~~,~~QAAyBhC~~,cAAcI,MAAMI,gBAAgB,~~EAAEwB~~;~~QAC/EC~~,~~YAAY~~,~~IAAM7B~~,MAAMI,gBAAgB;~~QACxCN~~,gBAAgB,~~CAAC8B~~,~~QAAyB9B~~,eAAeE,MAAMI,gBAAgB,~~EAAEwB~~;~~QACjFP~~;IACF;AACF"}
1	+ {"version":3,"sources":["useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n TableColumnDefinition,\n TableColumnId,\n ColumnResizeState,\n ColumnWidthState,\n UseTableColumnSizingParams,\n TableColumnSizingOptions,\n} from './types';\nimport {\n columnDefinitionsToState,\n adjustColumnWidthsToFitContainer,\n getColumnById,\n setColumnProperty,\n getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n columns: TableColumnDefinition<T>[];\n containerWidth: number;\n columnWidthState: ColumnWidthState[];\n columnSizingOptions: TableColumnSizingOptions \| undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n \| {\n type: 'CONTAINER_WIDTH_UPDATED';\n containerWidth: number;\n }\n \| {\n type: 'COLUMNS_UPDATED';\n columns: TableColumnDefinition<T>[];\n }\n \| {\n type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n columnSizingOptions: TableColumnSizingOptions \| undefined;\n }\n \| {\n type: 'SET_COLUMN_WIDTH';\n columnId: TableColumnId;\n width: number;\n };\n\nconst createReducer =\n <T>() =>\n (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n switch (action.type) {\n case 'CONTAINER_WIDTH_UPDATED':\n return {\n ...state,\n containerWidth: action.containerWidth,\n columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n };\n\n case 'COLUMNS_UPDATED':\n const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n return {\n ...state,\n columns: action.columns,\n columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n };\n\n case 'COLUMN_SIZING_OPTIONS_UPDATED':\n const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n return {\n ...state,\n columnSizingOptions: action.columnSizingOptions,\n columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n };\n\n case 'SET_COLUMN_WIDTH':\n const { columnId, width } = action;\n const { containerWidth } = state;\n\n const column = getColumnById(state.columnWidthState, columnId);\n let newColumnWidthState = [...state.columnWidthState];\n\n if (!column) {\n return state;\n }\n\n // Adjust the column width and measure the new total width\n newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n // Adjust the widths to the container size\n newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n return { ...state, columnWidthState: newColumnWidthState };\n }\n };\n\nexport function useTableColumnResizeState<T>(\n columns: TableColumnDefinition<T>[],\n containerWidth: number,\n params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n const { onColumnResize, columnSizingOptions } = params;\n\n const reducer = React.useMemo(() => createReducer<T>(), []);\n\n const [state, dispatch] = React.useReducer(reducer, {\n columns,\n containerWidth: 0,\n columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n columnSizingOptions,\n });\n\n useIsomorphicLayoutEffect(() => {\n dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n }, [containerWidth]);\n\n useIsomorphicLayoutEffect(() => {\n dispatch({ type: 'COLUMNS_UPDATED', columns });\n }, [columns]);\n\n useIsomorphicLayoutEffect(() => {\n dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n }, [columnSizingOptions]);\n\n const setColumnWidth = useEventCallback(\n (event: KeyboardEvent \| MouseEvent \| TouchEvent \| undefined, data: { columnId: TableColumnId; width: number }) => {\n let { width } = data;\n const { columnId } = data;\n const col = getColumnById(state.columnWidthState, columnId);\n if (!col) {\n return;\n }\n\n width = Math.max(col.minWidth \|\| 0, width);\n\n if (onColumnResize) {\n onColumnResize(event, { columnId, width });\n }\n dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n },\n );\n\n return {\n getColumnById: React.useCallback(\n (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n [state.columnWidthState],\n ),\n getColumns: React.useCallback(() => state.columnWidthState, [state.columnWidthState]),\n getColumnWidth: React.useCallback(\n (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n [state.columnWidthState],\n ),\n setColumnWidth,\n };\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","useCallback","colId","getColumns"],"mappings":"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"}