npm - @fluentui/react-table - Versions diffs - 9.8.0 → 9.8.1 - Mend

@fluentui/react-table 9.8.0 → 9.8.1

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 (13) hide show

package/CHANGELOG.json +64 -1
package/CHANGELOG.md +19 -2
package/dist/index.d.ts +3 -0
package/lib/components/DataGrid/useDataGrid.js +2 -1
package/lib/components/DataGrid/useDataGrid.js.map +1 -1
package/lib/hooks/types.js.map +1 -1
package/lib/hooks/useTableColumnSizing.js +13 -1
package/lib/hooks/useTableColumnSizing.js.map +1 -1
package/lib-commonjs/components/DataGrid/useDataGrid.js +2 -1
package/lib-commonjs/components/DataGrid/useDataGrid.js.map +1 -1
package/lib-commonjs/hooks/useTableColumnSizing.js +13 -1
package/lib-commonjs/hooks/useTableColumnSizing.js.map +1 -1
package/package.json +9 -9

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,70 @@
   "name": "@fluentui/react-table",
   "entries": [
     {
-      "date": "Thu, 24 Aug 2023 10:23:07 GMT",
+      "date": "Tue, 29 Aug 2023 12:53:35 GMT",
+      "tag": "@fluentui/react-table_v9.8.1",
+      "version": "9.8.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-table",
+            "commit": "0bd698a9813c095fd77d5be957bd63a4ecc627d1",
+            "comment": "fix: Improve visuals when Table/DataGrid overflows it's parent"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-aria to v9.3.33",
+            "commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-avatar to v9.5.25",
+            "commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.35",
+            "commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.31",
+            "commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-radio to v9.1.35",
+            "commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-tabster to v9.12.5",
+            "commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-utilities to v9.13.0",
+            "commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-table",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.3",
+            "commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 24 Aug 2023 10:26:34 GMT",
       "tag": "@fluentui/react-table_v9.8.0",
       "version": "9.8.0",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,29 @@
 # Change Log - @fluentui/react-table
-This log was last generated on Thu, 24 Aug 2023 10:23:07 GMT and should not be manually modified.
+This log was last generated on Tue, 29 Aug 2023 12:53:35 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.8.1)
+Tue, 29 Aug 2023 12:53:35 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.8.0..@fluentui/react-table_v9.8.1)
+### Patches
+- fix: Improve visuals when Table/DataGrid overflows it's parent ([PR #28940](https://github.com/microsoft/fluentui/pull/28940) by jirivyhnalek@microsoft.com)
+- Bump @fluentui/react-aria to v9.3.33 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
+- Bump @fluentui/react-avatar to v9.5.25 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.35 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.31 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
+- Bump @fluentui/react-radio to v9.1.35 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
+- Bump @fluentui/react-tabster to v9.12.5 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
+- Bump @fluentui/react-utilities to v9.13.0 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.3 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
 ## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.8.0)
-Thu, 24 Aug 2023 10:23:07 GMT
+Thu, 24 Aug 2023 10:26:34 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.7.9..@fluentui/react-table_v9.8.0)
 ### Minor changes

package/dist/index.d.ts CHANGED Viewed

@@ -28,6 +28,8 @@ declare type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;
 declare type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;
+declare type ColumnSizingTableProps = Partial<TableProps>;
 declare interface ColumnWidthState {
     columnId: TableColumnId;
     width: number;
@@ -543,6 +545,7 @@ declare interface TableColumnSizingState {
     getOnMouseDown: (columnId: TableColumnId) => (e: React_2.MouseEvent | React_2.TouchEvent) => void;
     setColumnWidth: (columnId: TableColumnId, newSize: number) => void;
     getColumnWidths: () => ColumnWidthState[];
+    getTableProps: (props?: Partial<TableProps>) => ColumnSizingTableProps;
     getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;
     getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;
     enableKeyboardMode: (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => (e: React_2.MouseEvent | React_2.TouchEvent) => void;

package/lib/components/DataGrid/useDataGrid.js CHANGED Viewed

@@ -77,7 +77,8 @@ import { CELL_WIDTH } from '../TableSelectionCell';
         ...focusMode === 'cell' && gridTabsterAttribute,
         ...focusMode === 'composite' && compositeTabsterAttribute,
         ...props,
-        onKeyDown
+        onKeyDown,
+        ...resizableColumns ? tableState.columnSizing_unstable.getTableProps(props) : {}
     }, useMergedRefs(ref, tableState.tableRef, innerRef));
     return {
         ...baseTableState,

package/lib/components/DataGrid/useDataGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\nimport {\n useTableFeatures,\n useTableSort,\n useTableSelection,\n useTableColumnSizing_unstable,\n useTableCompositeNavigation,\n} from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\n\n/*\n Create the state required to render DataGrid.\n \n The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n \n @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n const {\n items,\n columns,\n focusMode = 'cell',\n selectionMode,\n onSortChange,\n onSelectionChange,\n defaultSortState,\n sortState,\n selectedItems,\n defaultSelectedItems,\n subtleSelection = false,\n selectionAppearance = 'brand',\n getRowId,\n resizableColumns,\n columnSizingOptions,\n onColumnResize,\n containerWidthOffset,\n } = props;\n\n const widthOffset = containerWidthOffset ?? (selectionMode ? -CELL_WIDTH : 0);\n\n const gridTabsterAttribute = useArrowNavigationGroup({\n axis: 'grid',\n });\n\n const {\n onTableKeyDown: onCompositeKeyDown,\n tableTabsterAttribute: compositeTabsterAttribute,\n tableRowTabsterAttribute: compositeRowTabsterAttribute,\n } = useTableCompositeNavigation();\n\n const tableState = useTableFeatures({ items, columns, getRowId }, [\n useTableSort({\n defaultSortState,\n sortState,\n onSortChange,\n }),\n useTableSelection({\n defaultSelectedItems,\n selectedItems,\n onSelectionChange,\n selectionMode: selectionMode ?? 'multiselect',\n }),\n useTableColumnSizing_unstable({\n onColumnResize,\n columnSizingOptions,\n // The selection cell is not part of the columns, therefore its width needs to be subtracted\n // from the container to make sure the columns don't overflow the table.\n containerWidthOffset: widthOffset,\n }),\n ]);\n\n const innerRef = React.useRef<HTMLDivElement>(null);\n const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableElement>) => {\n props.onKeyDown?.(e);\n focusMode === 'composite' && onCompositeKeyDown(e);\n\n // handle ctrl+home and ctrl+end\n if (!innerRef.current \|\| !e.ctrlKey \|\| e.defaultPrevented) {\n return;\n }\n\n if (e.key === Home) {\n const firstRow = innerRef.current.querySelector('[role=\"row\"]') as HTMLElement \| null;\n if (firstRow) {\n findFirstFocusable(firstRow)?.focus();\n }\n }\n\n if (e.key === End) {\n const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n if (rows.length) {\n const lastRow = rows.item(rows.length - 1);\n findLastFocusable(lastRow as HTMLElement)?.focus();\n }\n }\n });\n\n const baseTableState = useTable_unstable(\n {\n role: 'grid',\n as: 'div',\n noNativeElements: true,\n ...(focusMode === 'cell' && gridTabsterAttribute),\n ...(focusMode === 'composite' && compositeTabsterAttribute),\n ...props,\n onKeyDown,\n },\n useMergedRefs(ref, tableState.tableRef, innerRef),\n );\n\n return {\n ...baseTableState,\n focusMode,\n tableState,\n selectableRows: !!selectionMode,\n subtleSelection,\n selectionAppearance,\n resizableColumns,\n compositeRowTabsterAttribute,\n };\n};\n"],"names":["React","useArrowNavigationGroup","useFocusFinders","useTable_unstable","useEventCallback","useMergedRefs","End","Home","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","useTableCompositeNavigation","CELL_WIDTH","useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","containerWidthOffset","widthOffset","gridTabsterAttribute","axis","onTableKeyDown","onCompositeKeyDown","tableTabsterAttribute","compositeTabsterAttribute","tableRowTabsterAttribute","compositeRowTabsterAttribute","tableState","innerRef","useRef","findFirstFocusable","findLastFocusable","onKeyDown","e","current","ctrlKey","defaultPrevented","key","firstRow","querySelector","focus","rows","querySelectorAll","length","lastRow","item","baseTableState","role","as","noNativeElements","tableRef","selectableRows"],"mappings":"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~~IACF~~,~~GACA3C~~,cAAcW,KAAK2B,~~WAAWuB~~,QAAQ,~~EAAEtB~~;IAG1C,OAAO;QACL,GAAGkB,cAAc;QACjB3C;QACAwB;~~QACAwB~~,gBAAgB,CAAC,~~CAAC/C~~;QAClBO;QACAC;QACAE;QACAY;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\nimport {\n useTableFeatures,\n useTableSort,\n useTableSelection,\n useTableColumnSizing_unstable,\n useTableCompositeNavigation,\n} from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\n\n/*\n Create the state required to render DataGrid.\n \n The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n \n @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n const {\n items,\n columns,\n focusMode = 'cell',\n selectionMode,\n onSortChange,\n onSelectionChange,\n defaultSortState,\n sortState,\n selectedItems,\n defaultSelectedItems,\n subtleSelection = false,\n selectionAppearance = 'brand',\n getRowId,\n resizableColumns,\n columnSizingOptions,\n onColumnResize,\n containerWidthOffset,\n } = props;\n\n const widthOffset = containerWidthOffset ?? (selectionMode ? -CELL_WIDTH : 0);\n\n const gridTabsterAttribute = useArrowNavigationGroup({\n axis: 'grid',\n });\n\n const {\n onTableKeyDown: onCompositeKeyDown,\n tableTabsterAttribute: compositeTabsterAttribute,\n tableRowTabsterAttribute: compositeRowTabsterAttribute,\n } = useTableCompositeNavigation();\n\n const tableState = useTableFeatures({ items, columns, getRowId }, [\n useTableSort({\n defaultSortState,\n sortState,\n onSortChange,\n }),\n useTableSelection({\n defaultSelectedItems,\n selectedItems,\n onSelectionChange,\n selectionMode: selectionMode ?? 'multiselect',\n }),\n useTableColumnSizing_unstable({\n onColumnResize,\n columnSizingOptions,\n // The selection cell is not part of the columns, therefore its width needs to be subtracted\n // from the container to make sure the columns don't overflow the table.\n containerWidthOffset: widthOffset,\n }),\n ]);\n\n const innerRef = React.useRef<HTMLDivElement>(null);\n const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableElement>) => {\n props.onKeyDown?.(e);\n focusMode === 'composite' && onCompositeKeyDown(e);\n\n // handle ctrl+home and ctrl+end\n if (!innerRef.current \|\| !e.ctrlKey \|\| e.defaultPrevented) {\n return;\n }\n\n if (e.key === Home) {\n const firstRow = innerRef.current.querySelector('[role=\"row\"]') as HTMLElement \| null;\n if (firstRow) {\n findFirstFocusable(firstRow)?.focus();\n }\n }\n\n if (e.key === End) {\n const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n if (rows.length) {\n const lastRow = rows.item(rows.length - 1);\n findLastFocusable(lastRow as HTMLElement)?.focus();\n }\n }\n });\n\n const baseTableState = useTable_unstable(\n {\n role: 'grid',\n as: 'div',\n noNativeElements: true,\n ...(focusMode === 'cell' && gridTabsterAttribute),\n ...(focusMode === 'composite' && compositeTabsterAttribute),\n ...props,\n onKeyDown,\n ...(resizableColumns ? tableState.columnSizing_unstable.getTableProps(props) : {}),\n },\n useMergedRefs(ref, tableState.tableRef, innerRef),\n );\n\n return {\n ...baseTableState,\n focusMode,\n tableState,\n selectableRows: !!selectionMode,\n subtleSelection,\n selectionAppearance,\n resizableColumns,\n compositeRowTabsterAttribute,\n };\n};\n"],"names":["React","useArrowNavigationGroup","useFocusFinders","useTable_unstable","useEventCallback","useMergedRefs","End","Home","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","useTableCompositeNavigation","CELL_WIDTH","useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","containerWidthOffset","widthOffset","gridTabsterAttribute","axis","onTableKeyDown","onCompositeKeyDown","tableTabsterAttribute","compositeTabsterAttribute","tableRowTabsterAttribute","compositeRowTabsterAttribute","tableState","innerRef","useRef","findFirstFocusable","findLastFocusable","onKeyDown","e","current","ctrlKey","defaultPrevented","key","firstRow","querySelector","focus","rows","querySelectorAll","length","lastRow","item","baseTableState","role","as","noNativeElements","columnSizing_unstable","getTableProps","tableRef","selectableRows"],"mappings":"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"}

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

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

package/lib/hooks/useTableColumnSizing.js CHANGED Viewed

@@ -8,6 +8,7 @@ export const defaultColumnSizingState = {
     getColumnWidths: ()=>[],
     getOnMouseDown: ()=>()=>null,
     setColumnWidth: ()=>null,
+    getTableProps: ()=>({}),
     getTableHeaderCellProps: ()=>({
             style: {},
             columnId: ''
@@ -61,9 +62,20 @@ function useTableColumnSizingState(tableState, params) {
                     width: w
                 }),
             getColumnWidths: columnResizeState.getColumns,
+            getTableProps: (props = {})=>{
+                return {
+                    ...props,
+                    style: {
+                        minWidth: 'fit-content',
+                        ...props.style || {}
+                    }
+                };
+            },
             getTableHeaderCellProps: (columnId)=>{
+                var _columns_;
                 const col = columnResizeState.getColumnById(columnId);
-                const aside = /*#__PURE__*/ React.createElement(TableResizeHandle, {
+                const isLastColumn = ((_columns_ = columns[columns.length - 1]) === null || _columns_ === void 0 ? void 0 : _columns_.columnId) === columnId;
+                const aside = isLastColumn ? null : /*#__PURE__*/ React.createElement(TableResizeHandle, {
                     onMouseDown: mouseHandler.getOnMouseDown(columnId),
                     onTouchStart: mouseHandler.getOnMouseDown(columnId),
                     ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n ColumnWidthState,\n EnableKeyboardModeOnChangeCallback,\n TableColumnId,\n TableColumnSizingState,\n TableFeaturesState,\n UseTableColumnSizingParams,\n} from './types';\n\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n getColumnWidths: () => [],\n getOnMouseDown: () => () => null,\n setColumnWidth: () => null,\n getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n getTableCellProps: () => ({ style: {}, columnId: '' }),\n enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n const width = column.width;\n\n return {\n // native styles\n width,\n // non-native element styles (flex layout)\n minWidth: width,\n maxWidth: width,\n };\n}\n\nfunction useTableColumnSizingState<TItem>(\n tableState: TableFeaturesState<TItem>,\n params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n const { columns } = tableState;\n\n // Gets the container width\n const { width, measureElementRef } = useMeasureElement();\n // Creates the state based on columns and available containerWidth\n const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset \|\| 0), params);\n // Creates the mouse handler and attaches the state to it\n const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n // Creates the keyboard handler for resizing columns\n const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n\n const enableKeyboardMode = React.useCallback(\n (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n (e: React.MouseEvent \| React.TouchEvent) => {\n e.preventDefault();\n e.nativeEvent.stopPropagation();\n toggleInteractiveMode(columnId, onChange);\n },\n [toggleInteractiveMode],\n );\n\n return {\n ...tableState,\n tableRef: measureElementRef,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: {\n getOnMouseDown: mouseHandler.getOnMouseDown,\n setColumnWidth: (columnId: TableColumnId, w: number) =>\n columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n getColumnWidths: columnResizeState.getColumns,\n getTableHeaderCellProps: (columnId: TableColumnId) => {\n const col = columnResizeState.getColumnById(columnId);\n\n const aside = (\n <TableResizeHandle\n onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n {...getKeyboardResizingProps(columnId, col?.width \|\| 0)}\n />\n );\n return col\n ? {\n style: getColumnStyles(col),\n aside,\n }\n : {};\n },\n getTableCellProps: (columnId: TableColumnId) => {\n const col = columnResizeState.getColumnById(columnId);\n return col ? { style: getColumnStyles(col) } : {};\n },\n enableKeyboardMode,\n },\n };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","onMouseDown","onTouchStart"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,uBAAuB;AAUzD,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,gCAAgC,QAAQ,qCAAqC;AACtF,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,mBAAmB,QAAQ,wBAAwB;AAE5D,OAAO,MAAMC,2BAAmD;IAC9DC,iBAAiB,IAAM,EAAE;IACzBC,gBAAgB,IAAM,IAAM,IAAI;IAChCC,gBAAgB,IAAM,IAAI;IAC1BC,yBAAyB,IAAO,CAAA;YAAEC,OAAO,CAAC;YAAGC,UAAU;QAAG,CAAA;IAC1DC,mBAAmB,IAAO,CAAA;YAAEF,OAAO,CAAC;YAAGC,UAAU;QAAG,CAAA;IACpDE,oBAAoB,IAAM,IAAM,IAAI;AACtC,EAAE;AAEF,OAAO,SAASC,8BAAqCC,MAAmC,EAAE;IACxF,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,0BAA0BD,YAAYD;AAC1F,CAAC;AAED,SAASG,gBAAgBC,MAAwB,EAAuB;IACtE,MAAMC,QAAQD,OAAOC,KAAK;IAE1B,OAAO;QACL,gBAAgB;QAChBA;QACA,0CAA0C;QAC1CC,UAAUD;QACVE,UAAUF;IACZ;AACF;AAEA,SAASH,0BACPD,UAAqC,EACrCD,MAAmC,EACR;IAC3B,MAAM,EAAEQ,QAAO,EAAE,GAAGP;IAEpB,2BAA2B;IAC3B,MAAM,EAAEI,MAAK,EAAEI,kBAAiB,EAAE,~~GAAGvB~~;IACrC,kEAAkE;IAClE,~~MAAMwB~~,~~oBAAoBtB~~,~~0BAA0BoB~~,SAASH,QAASL,CAAAA,CAAAA,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQW,oBAAoB,AAAD,KAAK,CAAA,GAAIX;IAC1G,yDAAyD;IACzD,MAAMY,~~eAAezB~~,~~iCAAiCuB~~;IACtD,oDAAoD;IACpD,MAAM,EAAEG,sBAAqB,EAAEC,yBAAwB,EAAE,~~GAAGzB~~,~~oBAAoBqB~~;IAEhF,MAAMZ,~~qBAAqBd~~,~~MAAM+B~~,WAAW,CAC1C,CAACnB,UAAyBoB,WACxB,CAACC,IAA2C;YAC1CA,EAAEC,cAAc;YAChBD,EAAEE,WAAW,CAACC,eAAe;YAC7BP,sBAAsBjB,UAAUoB;QAClC,GACF;QAACH;KAAsB;IAGzB,OAAO;QACL,GAAGZ,UAAU;QACboB,UAAUZ;QACV,gEAAgE;QAChEa,uBAAuB;~~YACrB9B~~,~~gBAAgBoB~~,~~aAAapB~~,cAAc;YAC3CC,gBAAgB,~~CAACG~~,UAAyB2B,IACxCb,~~kBAAkBjB~~,cAAc,~~CAAC+B~~,WAAW;oBAAE5B;oBAAUS,OAAOkB;gBAAE;~~YACnEhC~~,~~iBAAiBmB~~,kBAAkBe,UAAU;~~YAC7C~~/B,yBAAyB,CAACE,WAA4B;~~gBACpD~~,~~MAAM8B~~,~~MAAMhB~~,~~kBAAkBiB~~,aAAa,~~CAAC/B~~;~~gBAE5C~~,~~MAAMgC~~,~~sBACJ~~,~~oBAAC3C~~;~~oBACC4C~~,~~aAAajB~~,aAAapB,cAAc,~~CAACI~~;~~oBACzCkC~~,~~cAAclB~~,~~aAAapB~~,cAAc,~~CAACI~~;oBACzC,GAAGkB,yBAAyBlB,~~UAAU8B~~,CAAAA,gBAAAA,iBAAAA,KAAAA,IAAAA,~~IAAKrB~~,KAAK,AAAD,KAAK,EAAE~~;;gBAG3D~~,~~OAAOqB~~,MACH;~~oBACE/B~~,OAAOQ,~~gBAAgBuB~~;~~oBACvBE~~;gBACF,IACA,CAAC,CAAC;YACR;~~YACA/B~~,mBAAmB,CAACD,WAA4B;gBAC9C,~~MAAM8B~~,~~MAAMhB~~,~~kBAAkBiB~~,aAAa,~~CAAC/B~~;gBAC5C,~~OAAO8B~~,MAAM;~~oBAAE/B~~,OAAOQ,~~gBAAgBuB~~;gBAAK,IAAI,CAAC,CAAC;YACnD;~~YACA5B~~;QACF;IACF;AACF"}
1	+ {"version":3,"sources":["useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n ColumnWidthState,\n EnableKeyboardModeOnChangeCallback,\n TableColumnId,\n TableColumnSizingState,\n TableFeaturesState,\n UseTableColumnSizingParams,\n} from './types';\n\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n getColumnWidths: () => [],\n getOnMouseDown: () => () => null,\n setColumnWidth: () => null,\n getTableProps: () => ({}),\n getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n getTableCellProps: () => ({ style: {}, columnId: '' }),\n enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n const width = column.width;\n\n return {\n // native styles\n width,\n // non-native element styles (flex layout)\n minWidth: width,\n maxWidth: width,\n };\n}\n\nfunction useTableColumnSizingState<TItem>(\n tableState: TableFeaturesState<TItem>,\n params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n const { columns } = tableState;\n\n // Gets the container width\n const { width, measureElementRef } = useMeasureElement();\n // Creates the state based on columns and available containerWidth\n const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset \|\| 0), params);\n // Creates the mouse handler and attaches the state to it\n const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n // Creates the keyboard handler for resizing columns\n const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n\n const enableKeyboardMode = React.useCallback(\n (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n (e: React.MouseEvent \| React.TouchEvent) => {\n e.preventDefault();\n e.nativeEvent.stopPropagation();\n toggleInteractiveMode(columnId, onChange);\n },\n [toggleInteractiveMode],\n );\n\n return {\n ...tableState,\n tableRef: measureElementRef,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: {\n getOnMouseDown: mouseHandler.getOnMouseDown,\n setColumnWidth: (columnId: TableColumnId, w: number) =>\n columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n getColumnWidths: columnResizeState.getColumns,\n getTableProps: (props = {}) => {\n return {\n ...props,\n style: {\n minWidth: 'fit-content',\n ...(props.style \|\| {}),\n },\n };\n },\n getTableHeaderCellProps: (columnId: TableColumnId) => {\n const col = columnResizeState.getColumnById(columnId);\n const isLastColumn = columns[columns.length - 1]?.columnId === columnId;\n\n const aside = isLastColumn ? null : (\n <TableResizeHandle\n onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n {...getKeyboardResizingProps(columnId, col?.width \|\| 0)}\n />\n );\n\n return col\n ? {\n style: getColumnStyles(col),\n aside,\n }\n : {};\n },\n getTableCellProps: (columnId: TableColumnId) => {\n const col = columnResizeState.getColumnById(columnId);\n return col ? { style: getColumnStyles(col) } : {};\n },\n enableKeyboardMode,\n },\n };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","props","col","getColumnById","isLastColumn","length","aside","onMouseDown","onTouchStart"],"mappings":"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"}

package/lib-commonjs/components/DataGrid/useDataGrid.js CHANGED Viewed

@@ -78,7 +78,8 @@ const useDataGrid_unstable = (props, ref)=>{
         ...focusMode === 'cell' && gridTabsterAttribute,
         ...focusMode === 'composite' && compositeTabsterAttribute,
         ...props,
-        onKeyDown
+        onKeyDown,
+        ...resizableColumns ? tableState.columnSizing_unstable.getTableProps(props) : {}
     }, (0, _reactUtilities.useMergedRefs)(ref, tableState.tableRef, innerRef));
     return {
         ...baseTableState,

package/lib-commonjs/components/DataGrid/useDataGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useDataGrid.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\nimport { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable, useTableCompositeNavigation } from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\n/*\n Create the state required to render DataGrid.\n \n The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n \n @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */ export const useDataGrid_unstable = (props, ref)=>{\n const { items , columns , focusMode ='cell' , selectionMode , onSortChange , onSelectionChange , defaultSortState , sortState , selectedItems , defaultSelectedItems , subtleSelection =false , selectionAppearance ='brand' , getRowId , resizableColumns , columnSizingOptions , onColumnResize , containerWidthOffset } = props;\n const widthOffset = containerWidthOffset !== null && containerWidthOffset !== void 0 ? containerWidthOffset : selectionMode ? -CELL_WIDTH : 0;\n const gridTabsterAttribute = useArrowNavigationGroup({\n axis: 'grid'\n });\n const { onTableKeyDown: onCompositeKeyDown , tableTabsterAttribute: compositeTabsterAttribute , tableRowTabsterAttribute: compositeRowTabsterAttribute } = useTableCompositeNavigation();\n const tableState = useTableFeatures({\n items,\n columns,\n getRowId\n }, [\n useTableSort({\n defaultSortState,\n sortState,\n onSortChange\n }),\n useTableSelection({\n defaultSelectedItems,\n selectedItems,\n onSelectionChange,\n selectionMode: selectionMode !== null && selectionMode !== void 0 ? selectionMode : 'multiselect'\n }),\n useTableColumnSizing_unstable({\n onColumnResize,\n columnSizingOptions,\n // The selection cell is not part of the columns, therefore its width needs to be subtracted\n // from the container to make sure the columns don't overflow the table.\n containerWidthOffset: widthOffset\n })\n ]);\n const innerRef = React.useRef(null);\n const { findFirstFocusable , findLastFocusable } = useFocusFinders();\n const onKeyDown = useEventCallback((e)=>{\n var _props_onKeyDown;\n (_props_onKeyDown = props.onKeyDown) === null \|\| _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);\n focusMode === 'composite' && onCompositeKeyDown(e);\n // handle ctrl+home and ctrl+end\n if (!innerRef.current \|\| !e.ctrlKey \|\| e.defaultPrevented) {\n return;\n }\n if (e.key === Home) {\n const firstRow = innerRef.current.querySelector('[role=\"row\"]');\n if (firstRow) {\n var _findFirstFocusable;\n (_findFirstFocusable = findFirstFocusable(firstRow)) === null \|\| _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();\n }\n }\n if (e.key === End) {\n const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n if (rows.length) {\n var _findLastFocusable;\n const lastRow = rows.item(rows.length - 1);\n (_findLastFocusable = findLastFocusable(lastRow)) === null \|\| _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();\n }\n }\n });\n const baseTableState = useTable_unstable({\n role: 'grid',\n as: 'div',\n noNativeElements: true,\n ...focusMode === 'cell' && gridTabsterAttribute,\n ...focusMode === 'composite' && compositeTabsterAttribute,\n ...props,\n onKeyDown\n }, useMergedRefs(ref, tableState.tableRef, innerRef));\n return {\n ...baseTableState,\n focusMode,\n tableState,\n selectableRows: !!selectionMode,\n subtleSelection,\n selectionAppearance,\n resizableColumns,\n compositeRowTabsterAttribute\n };\n};\n"],"names":["useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","containerWidthOffset","widthOffset","CELL_WIDTH","gridTabsterAttribute","useArrowNavigationGroup","axis","onTableKeyDown","onCompositeKeyDown","tableTabsterAttribute","compositeTabsterAttribute","tableRowTabsterAttribute","compositeRowTabsterAttribute","useTableCompositeNavigation","tableState","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","innerRef","React","useRef","findFirstFocusable","findLastFocusable","useFocusFinders","onKeyDown","useEventCallback","e","_props_onKeyDown","call","current","ctrlKey","defaultPrevented","key","Home","firstRow","querySelector","_findFirstFocusable","focus","End","rows","querySelectorAll","length","_findLastFocusable","lastRow","item","baseTableState","useTable_unstable","role","as","noNativeElements","useMergedRefs","tableRef","selectableRows"],"mappings":";;;;+BAeiBA;;aAAAA;;;6DAfM;8BACkC;0BACvB;gCACc;8BACtB;uBACoG;oCACnG;AAShB,MAAMA,uBAAuB,CAACC,OAAOC,MAAM;IAClD,MAAM,EAAEC,MAAK,EAAGC,QAAO,EAAGC,WAAW,OAAM,EAAGC,cAAa,EAAGC,aAAY,EAAGC,kBAAiB,EAAGC,iBAAgB,EAAGC,UAAS,EAAGC,cAAa,EAAGC,qBAAoB,EAAGC,iBAAiB,KAAK,CAAA,EAAGC,qBAAqB,QAAO,EAAGC,SAAQ,EAAGC,iBAAgB,EAAGC,oBAAmB,EAAGC,eAAc,EAAGC,qBAAoB,EAAG,GAAGlB;IAC9T,MAAMmB,cAAcD,yBAAyB,IAAI,IAAIA,yBAAyB,KAAK,IAAIA,uBAAuBb,gBAAgB,CAACe,8BAAU,GAAG,CAAC;IAC7I,MAAMC,uBAAuBC,IAAAA,qCAAuB,EAAC;QACjDC,MAAM;IACV;IACA,MAAM,EAAEC,gBAAgBC,mBAAkB,EAAGC,uBAAuBC,0BAAyB,EAAGC,0BAA0BC,6BAA4B,EAAG,GAAGC,IAAAA,kCAA2B;IACvL,MAAMC,aAAaC,IAAAA,uBAAgB,EAAC;QAChC9B;QACAC;QACAW;IACJ,GAAG;QACCmB,IAAAA,mBAAY,EAAC;YACTzB;YACAC;YACAH;QACJ;QACA4B,IAAAA,wBAAiB,EAAC;YACdvB;YACAD;YACAH;YACAF,eAAeA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAIA,gBAAgB,aAAa;QACrG;QACA8B,IAAAA,oCAA6B,EAAC;YAC1BlB;YACAD;YACA,4FAA4F;YAC5F,wEAAwE;YACxEE,sBAAsBC;QAC1B;KACH;IACD,MAAMiB,WAAWC,OAAMC,MAAM,CAAC,IAAI;IAClC,MAAM,EAAEC,mBAAkB,EAAGC,kBAAiB,EAAG,GAAGC,IAAAA,6BAAe;IACnE,MAAMC,YAAYC,IAAAA,gCAAgB,EAAC,CAACC,IAAI;QACpC,IAAIC;QACHA,CAAAA,mBAAmB7C,MAAM0C,SAAS,AAAD,MAAO,IAAI,IAAIG,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBC,IAAI,CAAC9C,OAAO4C,EAAE;QACvHxC,cAAc,eAAeqB,mBAAmBmB;QAChD,gCAAgC;QAChC,IAAI,CAACR,SAASW,OAAO,IAAI,CAACH,EAAEI,OAAO,IAAIJ,EAAEK,gBAAgB,EAAE;YACvD;QACJ,CAAC;QACD,IAAIL,EAAEM,GAAG,KAAKC,kBAAI,EAAE;YAChB,MAAMC,WAAWhB,SAASW,OAAO,CAACM,aAAa,CAAC;YAChD,IAAID,UAAU;gBACV,IAAIE;gBACHA,CAAAA,sBAAsBf,mBAAmBa,SAAQ,MAAO,IAAI,IAAIE,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,KAAK,EAAE;YAC1I,CAAC;QACL,CAAC;QACD,IAAIX,EAAEM,GAAG,KAAKM,iBAAG,EAAE;YACf,MAAMC,OAAOrB,SAASW,OAAO,CAACW,gBAAgB,CAAC;YAC/C,IAAID,KAAKE,MAAM,EAAE;gBACb,IAAIC;gBACJ,MAAMC,UAAUJ,KAAKK,IAAI,CAACL,KAAKE,MAAM,GAAG;gBACvCC,CAAAA,qBAAqBpB,kBAAkBqB,QAAO,MAAO,IAAI,IAAID,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmBL,KAAK,EAAE;YACrI,CAAC;QACL,CAAC;IACL;IACA,MAAMQ,iBAAiBC,IAAAA,2BAAiB,EAAC;QACrCC,MAAM;QACNC,IAAI;QACJC,kBAAkB,IAAI;QACtB,GAAG/D,cAAc,UAAUiB,oBAAoB;QAC/C,GAAGjB,cAAc,eAAeuB,yBAAyB;QACzD,GAAG3B,KAAK;QACR0C;~~IACJ~~,~~GAAG0B~~,IAAAA,6BAAa,~~EAACnE~~,KAAK8B,~~WAAWsC~~,QAAQ,~~EAAEjC~~;IAC3C,OAAO;QACH,GAAG2B,cAAc;QACjB3D;QACA2B;~~QACAuC~~,gBAAgB,CAAC,~~CAACjE~~;QAClBO;QACAC;QACAE;QACAc;IACJ;AACJ"}
1	+ {"version":3,"sources":["useDataGrid.js"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\nimport { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable, useTableCompositeNavigation } from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\n/*\n Create the state required to render DataGrid.\n \n The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n \n @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */ export const useDataGrid_unstable = (props, ref)=>{\n const { items , columns , focusMode ='cell' , selectionMode , onSortChange , onSelectionChange , defaultSortState , sortState , selectedItems , defaultSelectedItems , subtleSelection =false , selectionAppearance ='brand' , getRowId , resizableColumns , columnSizingOptions , onColumnResize , containerWidthOffset } = props;\n const widthOffset = containerWidthOffset !== null && containerWidthOffset !== void 0 ? containerWidthOffset : selectionMode ? -CELL_WIDTH : 0;\n const gridTabsterAttribute = useArrowNavigationGroup({\n axis: 'grid'\n });\n const { onTableKeyDown: onCompositeKeyDown , tableTabsterAttribute: compositeTabsterAttribute , tableRowTabsterAttribute: compositeRowTabsterAttribute } = useTableCompositeNavigation();\n const tableState = useTableFeatures({\n items,\n columns,\n getRowId\n }, [\n useTableSort({\n defaultSortState,\n sortState,\n onSortChange\n }),\n useTableSelection({\n defaultSelectedItems,\n selectedItems,\n onSelectionChange,\n selectionMode: selectionMode !== null && selectionMode !== void 0 ? selectionMode : 'multiselect'\n }),\n useTableColumnSizing_unstable({\n onColumnResize,\n columnSizingOptions,\n // The selection cell is not part of the columns, therefore its width needs to be subtracted\n // from the container to make sure the columns don't overflow the table.\n containerWidthOffset: widthOffset\n })\n ]);\n const innerRef = React.useRef(null);\n const { findFirstFocusable , findLastFocusable } = useFocusFinders();\n const onKeyDown = useEventCallback((e)=>{\n var _props_onKeyDown;\n (_props_onKeyDown = props.onKeyDown) === null \|\| _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);\n focusMode === 'composite' && onCompositeKeyDown(e);\n // handle ctrl+home and ctrl+end\n if (!innerRef.current \|\| !e.ctrlKey \|\| e.defaultPrevented) {\n return;\n }\n if (e.key === Home) {\n const firstRow = innerRef.current.querySelector('[role=\"row\"]');\n if (firstRow) {\n var _findFirstFocusable;\n (_findFirstFocusable = findFirstFocusable(firstRow)) === null \|\| _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();\n }\n }\n if (e.key === End) {\n const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n if (rows.length) {\n var _findLastFocusable;\n const lastRow = rows.item(rows.length - 1);\n (_findLastFocusable = findLastFocusable(lastRow)) === null \|\| _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();\n }\n }\n });\n const baseTableState = useTable_unstable({\n role: 'grid',\n as: 'div',\n noNativeElements: true,\n ...focusMode === 'cell' && gridTabsterAttribute,\n ...focusMode === 'composite' && compositeTabsterAttribute,\n ...props,\n onKeyDown,\n ...resizableColumns ? tableState.columnSizing_unstable.getTableProps(props) : {}\n }, useMergedRefs(ref, tableState.tableRef, innerRef));\n return {\n ...baseTableState,\n focusMode,\n tableState,\n selectableRows: !!selectionMode,\n subtleSelection,\n selectionAppearance,\n resizableColumns,\n compositeRowTabsterAttribute\n };\n};\n"],"names":["useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","containerWidthOffset","widthOffset","CELL_WIDTH","gridTabsterAttribute","useArrowNavigationGroup","axis","onTableKeyDown","onCompositeKeyDown","tableTabsterAttribute","compositeTabsterAttribute","tableRowTabsterAttribute","compositeRowTabsterAttribute","useTableCompositeNavigation","tableState","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","innerRef","React","useRef","findFirstFocusable","findLastFocusable","useFocusFinders","onKeyDown","useEventCallback","e","_props_onKeyDown","call","current","ctrlKey","defaultPrevented","key","Home","firstRow","querySelector","_findFirstFocusable","focus","End","rows","querySelectorAll","length","_findLastFocusable","lastRow","item","baseTableState","useTable_unstable","role","as","noNativeElements","columnSizing_unstable","getTableProps","useMergedRefs","tableRef","selectableRows"],"mappings":"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"}

package/lib-commonjs/hooks/useTableColumnSizing.js CHANGED Viewed

@@ -23,6 +23,7 @@ const defaultColumnSizingState = {
     getColumnWidths: ()=>[],
     getOnMouseDown: ()=>()=>null,
     setColumnWidth: ()=>null,
+    getTableProps: ()=>({}),
     getTableHeaderCellProps: ()=>({
             style: {},
             columnId: ''
@@ -76,9 +77,20 @@ function useTableColumnSizingState(tableState, params) {
                     width: w
                 }),
             getColumnWidths: columnResizeState.getColumns,
+            getTableProps: (props = {})=>{
+                return {
+                    ...props,
+                    style: {
+                        minWidth: 'fit-content',
+                        ...props.style || {}
+                    }
+                };
+            },
             getTableHeaderCellProps: (columnId)=>{
+                var _columns_;
                 const col = columnResizeState.getColumnById(columnId);
-                const aside = /*#__PURE__*/ _react.createElement(_tableResizeHandle.TableResizeHandle, {
+                const isLastColumn = ((_columns_ = columns[columns.length - 1]) === null || _columns_ === void 0 ? void 0 : _columns_.columnId) === columnId;
+                const aside = isLastColumn ? null : /*#__PURE__*/ _react.createElement(_tableResizeHandle.TableResizeHandle, {
                     onMouseDown: mouseHandler.getOnMouseDown(columnId),
                     onTouchStart: mouseHandler.getOnMouseDown(columnId),
                     ...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTableColumnSizing.js"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\nexport const defaultColumnSizingState = {\n getColumnWidths: ()=>[],\n getOnMouseDown: ()=>()=>null,\n setColumnWidth: ()=>null,\n getTableHeaderCellProps: ()=>({\n style: {},\n columnId: ''\n }),\n getTableCellProps: ()=>({\n style: {},\n columnId: ''\n }),\n enableKeyboardMode: ()=>()=>null\n};\nexport function useTableColumnSizing_unstable(params) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState)=>useTableColumnSizingState(tableState, params);\n}\nfunction getColumnStyles(column) {\n const width = column.width;\n return {\n // native styles\n width,\n // non-native element styles (flex layout)\n minWidth: width,\n maxWidth: width\n };\n}\nfunction useTableColumnSizingState(tableState, params) {\n const { columns } = tableState;\n // Gets the container width\n const { width , measureElementRef } = useMeasureElement();\n // Creates the state based on columns and available containerWidth\n const columnResizeState = useTableColumnResizeState(columns, width + ((params === null \|\| params === void 0 ? void 0 : params.containerWidthOffset) \|\| 0), params);\n // Creates the mouse handler and attaches the state to it\n const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n // Creates the keyboard handler for resizing columns\n const { toggleInteractiveMode , getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{\n e.preventDefault();\n e.nativeEvent.stopPropagation();\n toggleInteractiveMode(columnId, onChange);\n }, [\n toggleInteractiveMode\n ]);\n return {\n ...tableState,\n tableRef: measureElementRef,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: {\n getOnMouseDown: mouseHandler.getOnMouseDown,\n setColumnWidth: (columnId, w)=>columnResizeState.setColumnWidth(undefined, {\n columnId,\n width: w\n }),\n getColumnWidths: columnResizeState.getColumns,\n getTableHeaderCellProps: (columnId)=>{\n const col = columnResizeState.getColumnById(columnId);\n const aside = /#__PURE__/ React.createElement(TableResizeHandle, {\n onMouseDown: mouseHandler.getOnMouseDown(columnId),\n onTouchStart: mouseHandler.getOnMouseDown(columnId),\n ...getKeyboardResizingProps(columnId, (col === null \|\| col === void 0 ? void 0 : col.width) \|\| 0)\n });\n return col ? {\n style: getColumnStyles(col),\n aside\n } : {};\n },\n getTableCellProps: (columnId)=>{\n const col = columnResizeState.getColumnById(columnId);\n return col ? {\n style: getColumnStyles(col)\n } : {};\n },\n enableKeyboardMode\n }\n };\n}\n"],"names":["defaultColumnSizingState","useTableColumnSizing_unstable","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","useMeasureElement","columnResizeState","useTableColumnResizeState","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useKeyboardResizing","React","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","createElement","TableResizeHandle","onMouseDown","onTouchStart"],"mappings":";;;;;;;;;;;IAMaA,wBAAwB,MAAxBA;~~IAcGC~~,6BAA6B,MAA7BA;;;~~6DApBO~~;mCACW;mCACA;kDACe;2CACP;qCACN;AAC7B,MAAMD,2BAA2B;IACpCE,iBAAiB,IAAI,EAAE;IACvBC,gBAAgB,IAAI,IAAI,IAAI;IAC5BC,gBAAgB,IAAI,IAAI;IACxBC,yBAAyB,IAAK,CAAA;YACtBC,OAAO,CAAC;YACRC,UAAU;QACd,CAAA;IACJC,mBAAmB,IAAK,CAAA;YAChBF,OAAO,CAAC;YACRC,UAAU;QACd,CAAA;IACJE,oBAAoB,IAAI,IAAI,IAAI;AACpC;AACO,~~SAASR~~,~~8BAA8BS~~,MAAM,EAAE;IAClD,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAAaC,0BAA0BD,YAAYD;AAC/D;AACA,SAASG,gBAAgBC,MAAM,EAAE;IAC7B,MAAMC,QAAQD,OAAOC,KAAK;IAC1B,OAAO;QACH,gBAAgB;QAChBA;QACA,0CAA0C;QAC1CC,UAAUD;QACVE,UAAUF;IACd;AACJ;AACA,SAASH,0BAA0BD,UAAU,EAAED,MAAM,EAAE;IACnD,MAAM,EAAEQ,QAAO,EAAG,GAAGP;IACrB,2BAA2B;IAC3B,MAAM,EAAEI,MAAK,EAAGI,kBAAiB,EAAG,GAAGC,IAAAA,oCAAiB;IACxD,kEAAkE;IAClE,MAAMC,oBAAoBC,IAAAA,oDAAyB,EAACJ,SAASH,QAAS,CAAA,AAACL,CAAAA,WAAW,IAAI,IAAIA,WAAW,KAAK,IAAI,KAAK,IAAIA,OAAOa,oBAAoB,AAAD,KAAM,CAAA,GAAIb;IAC3J,yDAAyD;IACzD,MAAMc,eAAeC,IAAAA,kEAAgC,EAACJ;IACtD,oDAAoD;IACpD,MAAM,EAAEK,sBAAqB,EAAGC,yBAAwB,EAAG,GAAGC,IAAAA,wCAAmB,EAACP;IAClF,MAAMZ,qBAAqBoB,OAAMC,WAAW,CAAC,CAACvB,UAAUwB,WAAW,CAACC,IAAI;YAChEA,EAAEC,cAAc;YAChBD,EAAEE,WAAW,CAACC,eAAe;YAC7BT,sBAAsBnB,UAAUwB;QACpC,GAAG;QACHL;KACH;IACD,OAAO;QACH,GAAGf,UAAU;QACbyB,UAAUjB;QACV,gEAAgE;QAChEkB,uBAAuB;~~YACnBlC~~,~~gBAAgBqB~~,~~aAAarB~~,cAAc;YAC3CC,gBAAgB,~~CAACG~~,UAAU+B,IAAIjB,~~kBAAkBjB~~,cAAc,~~CAACmC~~,WAAW;oBACnEhC;oBACAQ,OAAOuB;gBACX;~~YACJpC~~,~~iBAAiBmB~~,kBAAkBmB,UAAU;~~YAC7CnC~~,yBAAyB,CAACE,WAAW;gBACjC,~~MAAMkC~~,~~MAAMpB~~,~~kBAAkBqB~~,aAAa,~~CAACnC~~;gBAC5C,~~MAAMoC~~,QAAQ,WAAW,~~GAAGd~~,~~OAAMe~~,aAAa,CAACC,oCAAiB,EAAE;~~oBAC/DC~~,aAAatB,~~aAAarB,~~cAAc,~~CAACI~~;~~oBACzCwC~~,~~cAAcvB~~,~~aAAarB~~,cAAc,~~CAACI~~;oBAC1C,GAAGoB,yBAAyBpB,UAAU,~~AAACkC~~,CAAAA,QAAQ,IAAI,IAAIA,QAAQ,KAAK,IAAI,KAAK,IAAIA,~~IAAI1B~~,KAAK,AAAD,KAAM,EAAE;gBACrG;~~gBACA~~,~~OAAO0B~~,MAAM;~~oBACTnC~~,OAAOO,~~gBAAgB4B~~;~~oBACvBE~~;gBACJ,IAAI,CAAC,CAAC;YACV;~~YACAnC~~,mBAAmB,CAACD,WAAW;gBAC3B,~~MAAMkC~~,~~MAAMpB~~,~~kBAAkBqB~~,aAAa,~~CAACnC~~;gBAC5C,~~OAAOkC~~,MAAM;~~oBACTnC~~,OAAOO,~~gBAAgB4B~~;gBAC3B,IAAI,CAAC,CAAC;YACV;~~YACAhC~~;QACJ;IACJ;AACJ"}
1	+ {"version":3,"sources":["useTableColumnSizing.js"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\nexport const defaultColumnSizingState = {\n getColumnWidths: ()=>[],\n getOnMouseDown: ()=>()=>null,\n setColumnWidth: ()=>null,\n getTableProps: ()=>({}),\n getTableHeaderCellProps: ()=>({\n style: {},\n columnId: ''\n }),\n getTableCellProps: ()=>({\n style: {},\n columnId: ''\n }),\n enableKeyboardMode: ()=>()=>null\n};\nexport function useTableColumnSizing_unstable(params) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState)=>useTableColumnSizingState(tableState, params);\n}\nfunction getColumnStyles(column) {\n const width = column.width;\n return {\n // native styles\n width,\n // non-native element styles (flex layout)\n minWidth: width,\n maxWidth: width\n };\n}\nfunction useTableColumnSizingState(tableState, params) {\n const { columns } = tableState;\n // Gets the container width\n const { width , measureElementRef } = useMeasureElement();\n // Creates the state based on columns and available containerWidth\n const columnResizeState = useTableColumnResizeState(columns, width + ((params === null \|\| params === void 0 ? void 0 : params.containerWidthOffset) \|\| 0), params);\n // Creates the mouse handler and attaches the state to it\n const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n // Creates the keyboard handler for resizing columns\n const { toggleInteractiveMode , getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{\n e.preventDefault();\n e.nativeEvent.stopPropagation();\n toggleInteractiveMode(columnId, onChange);\n }, [\n toggleInteractiveMode\n ]);\n return {\n ...tableState,\n tableRef: measureElementRef,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: {\n getOnMouseDown: mouseHandler.getOnMouseDown,\n setColumnWidth: (columnId, w)=>columnResizeState.setColumnWidth(undefined, {\n columnId,\n width: w\n }),\n getColumnWidths: columnResizeState.getColumns,\n getTableProps: (props = {})=>{\n return {\n ...props,\n style: {\n minWidth: 'fit-content',\n ...props.style \|\| {}\n }\n };\n },\n getTableHeaderCellProps: (columnId)=>{\n var _columns_;\n const col = columnResizeState.getColumnById(columnId);\n const isLastColumn = ((_columns_ = columns[columns.length - 1]) === null \|\| _columns_ === void 0 ? void 0 : _columns_.columnId) === columnId;\n const aside = isLastColumn ? null : /#__PURE__/ React.createElement(TableResizeHandle, {\n onMouseDown: mouseHandler.getOnMouseDown(columnId),\n onTouchStart: mouseHandler.getOnMouseDown(columnId),\n ...getKeyboardResizingProps(columnId, (col === null \|\| col === void 0 ? void 0 : col.width) \|\| 0)\n });\n return col ? {\n style: getColumnStyles(col),\n aside\n } : {};\n },\n getTableCellProps: (columnId)=>{\n const col = columnResizeState.getColumnById(columnId);\n return col ? {\n style: getColumnStyles(col)\n } : {};\n },\n enableKeyboardMode\n }\n };\n}\n"],"names":["defaultColumnSizingState","useTableColumnSizing_unstable","getColumnWidths","getOnMouseDown","setColumnWidth","getTableProps","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","useMeasureElement","columnResizeState","useTableColumnResizeState","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useKeyboardResizing","React","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","props","_columns_","col","getColumnById","isLastColumn","length","aside","createElement","TableResizeHandle","onMouseDown","onTouchStart"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.8.0",
+  "version": "9.8.1",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,17 +36,17 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.3",
-    "@fluentui/react-aria": "^9.3.32",
-    "@fluentui/react-avatar": "^9.5.24",
-    "@fluentui/react-checkbox": "^9.1.34",
-    "@fluentui/react-context-selector": "^9.1.30",
+    "@fluentui/react-aria": "^9.3.33",
+    "@fluentui/react-avatar": "^9.5.25",
+    "@fluentui/react-checkbox": "^9.1.35",
+    "@fluentui/react-context-selector": "^9.1.31",
     "@fluentui/react-icons": "^2.0.207",
-    "@fluentui/react-radio": "^9.1.34",
+    "@fluentui/react-radio": "^9.1.35",
     "@fluentui/react-shared-contexts": "^9.7.2",
-    "@fluentui/react-tabster": "^9.12.4",
+    "@fluentui/react-tabster": "^9.12.5",
     "@fluentui/react-theme": "^9.1.11",
-    "@fluentui/react-utilities": "^9.12.0",
-    "@fluentui/react-jsx-runtime": "^9.0.2",
+    "@fluentui/react-utilities": "^9.13.0",
+    "@fluentui/react-jsx-runtime": "^9.0.3",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.4.14"
   },