@fluentui/react-table 9.2.12 → 9.4.0

package/lib/hooks/useTableColumnResizeState.js

@@ -1,112 +1,107 @@
 import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { columnDefinitionsToState, adjustColumnWidthsToFitContainer, getColumnById, setColumnProperty, getColumnWidth } from '../utils/columnResizeUtils';
-const createReducer = () => (state, action) => {
-  switch (action.type) {
-    case 'CONTAINER_WIDTH_UPDATED':
-      return {
-        ...state,
-        containerWidth: action.containerWidth,
-        columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth)
-      };
-    case 'COLUMNS_UPDATED':
-      const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);
-      return {
-        ...state,
-        columns: action.columns,
-        columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth)
-      };
-    case 'COLUMN_SIZING_OPTIONS_UPDATED':
-      const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);
-      return {
-        ...state,
-        columnSizingOptions: action.columnSizingOptions,
-        columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth)
-      };
-    case 'SET_COLUMN_WIDTH':
-      const {
-        columnId,
-        width
-      } = action;
-      const {
-        containerWidth
-      } = state;
-      const column = getColumnById(state.columnWidthState, columnId);
-      let newColumnWidthState = [...state.columnWidthState];
-      if (!column) {
-        return state;
-      }
-      // Adjust the column width and measure the new total width
-      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);
-      // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container
-      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);
-      // Adjust the widths to the container size
-      newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);
-      return {
-        ...state,
-        columnWidthState: newColumnWidthState
-      };
-  }
-};
+const createReducer = ()=>(state, action)=>{
+        switch(action.type){
+            case 'CONTAINER_WIDTH_UPDATED':
+                return {
+                    ...state,
+                    containerWidth: action.containerWidth,
+                    columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth)
+                };
+            case 'COLUMNS_UPDATED':
+                const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);
+                return {
+                    ...state,
+                    columns: action.columns,
+                    columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth)
+                };
+            case 'COLUMN_SIZING_OPTIONS_UPDATED':
+                const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);
+                return {
+                    ...state,
+                    columnSizingOptions: action.columnSizingOptions,
+                    columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth)
+                };
+            case 'SET_COLUMN_WIDTH':
+                const { columnId , width  } = action;
+                const { containerWidth  } = state;
+                const column = getColumnById(state.columnWidthState, columnId);
+                let newColumnWidthState = [
+                    ...state.columnWidthState
+                ];
+                if (!column) {
+                    return state;
+                }
+                // Adjust the column width and measure the new total width
+                newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);
+                // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container
+                newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);
+                // Adjust the widths to the container size
+                newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);
+                return {
+                    ...state,
+                    columnWidthState: newColumnWidthState
+                };
+        }
+    };
 export function useTableColumnResizeState(columns, containerWidth, params = {}) {
-  const {
-    onColumnResize,
-    columnSizingOptions
-  } = params;
-  const reducer = React.useMemo(() => createReducer(), []);
-  const [state, dispatch] = React.useReducer(reducer, {
-    columns,
-    containerWidth: 0,
-    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),
-    columnSizingOptions
-  });
-  useIsomorphicLayoutEffect(() => {
-    dispatch({
-      type: 'CONTAINER_WIDTH_UPDATED',
-      containerWidth
-    });
-  }, [containerWidth]);
-  useIsomorphicLayoutEffect(() => {
-    dispatch({
-      type: 'COLUMNS_UPDATED',
-      columns
+    const { onColumnResize , columnSizingOptions  } = params;
+    const reducer = React.useMemo(()=>createReducer(), []);
+    const [state, dispatch] = React.useReducer(reducer, {
+        columns,
+        containerWidth: 0,
+        columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),
+        columnSizingOptions
     });
-  }, [columns]);
-  useIsomorphicLayoutEffect(() => {
-    dispatch({
-      type: 'COLUMN_SIZING_OPTIONS_UPDATED',
-      columnSizingOptions
-    });
-  }, [columnSizingOptions]);
-  const setColumnWidth = useEventCallback((event, data) => {
-    let {
-      width
-    } = data;
-    const {
-      columnId
-    } = data;
-    const col = getColumnById(state.columnWidthState, columnId);
-    if (!col) {
-      return;
-    }
-    width = Math.max(col.minWidth || 0, width);
-    if (onColumnResize) {
-      onColumnResize(event, {
-        columnId,
-        width
-      });
-    }
-    dispatch({
-      type: 'SET_COLUMN_WIDTH',
-      columnId,
-      width
+    useIsomorphicLayoutEffect(()=>{
+        dispatch({
+            type: 'CONTAINER_WIDTH_UPDATED',
+            containerWidth
+        });
+    }, [
+        containerWidth
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        dispatch({
+            type: 'COLUMNS_UPDATED',
+            columns
+        });
+    }, [
+        columns
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        dispatch({
+            type: 'COLUMN_SIZING_OPTIONS_UPDATED',
+            columnSizingOptions
+        });
+    }, [
+        columnSizingOptions
+    ]);
+    const setColumnWidth = useEventCallback((event, data)=>{
+        let { width  } = data;
+        const { columnId  } = data;
+        const col = getColumnById(state.columnWidthState, columnId);
+        if (!col) {
+            return;
+        }
+        width = Math.max(col.minWidth || 0, width);
+        if (onColumnResize) {
+            onColumnResize(event, {
+                columnId,
+                width
+            });
+        }
+        dispatch({
+            type: 'SET_COLUMN_WIDTH',
+            columnId,
+            width
+        });
     });
-  });
-  return {
-    getColumnById: colId => getColumnById(state.columnWidthState, colId),
-    getColumns: () => state.columnWidthState,
-    getColumnWidth: colId => getColumnWidth(state.columnWidthState, colId),
-    setColumnWidth
-  };
+    return {
+        getColumnById: (colId)=>getColumnById(state.columnWidthState, colId),
+        getColumns: ()=>state.columnWidthState,
+        getColumnWidth: (colId)=>getColumnWidth(state.columnWidthState, colId),
+        setColumnWidth
+    };
 }
-//# sourceMappingURL=useTableColumnResizeState.js.map

package/lib/hooks/useTableColumnResizeState.js.map

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

package/lib/hooks/useTableColumnSizing.js

@@ -4,85 +4,85 @@ import { useMeasureElement } from './useMeasureElement';
 import { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';
 import { useTableColumnResizeState } from './useTableColumnResizeState';
 import { useKeyboardResizing } from './useKeyboardResizing';
+export const KeyboardResizingCurrentColumnDataAttribute = 'data-keyboard-resizing';
 export const defaultColumnSizingState = {
-  getColumnWidths: () => [],
-  getOnMouseDown: () => () => null,
-  setColumnWidth: () => null,
-  getTableHeaderCellProps: () => ({
-    style: {},
-    columnId: ''
-  }),
-  getTableCellProps: () => ({
-    style: {},
-    columnId: ''
-  }),
-  enableKeyboardMode: () => () => null
+    getColumnWidths: ()=>[],
+    getOnMouseDown: ()=>()=>null,
+    setColumnWidth: ()=>null,
+    getTableHeaderCellProps: ()=>({
+            style: {},
+            columnId: ''
+        }),
+    getTableCellProps: ()=>({
+            style: {},
+            columnId: ''
+        }),
+    enableKeyboardMode: ()=>()=>null
 };
 export function useTableColumnSizing_unstable(params) {
-  // False positive, these plugin hooks are intended to be run on every render
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return tableState => useTableColumnSizingState(tableState, params);
+    // False positive, these plugin hooks are intended to be run on every render
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return (tableState)=>useTableColumnSizingState(tableState, params);
 }
 function getColumnStyles(column) {
-  const width = column.width;
-  return {
-    // native styles
-    width,
-    // non-native element styles (flex layout)
-    minWidth: width,
-    maxWidth: width
-  };
+    const width = column.width;
+    return {
+        // native styles
+        width,
+        // non-native element styles (flex layout)
+        minWidth: width,
+        maxWidth: width
+    };
 }
 function useTableColumnSizingState(tableState, params) {
-  const {
-    columns
-  } = tableState;
-  // Gets the container width
-  const {
-    width,
-    measureElementRef
-  } = useMeasureElement();
-  // Creates the state based on columns and available containerWidth
-  const columnResizeState = useTableColumnResizeState(columns, width + ((params === null || params === void 0 ? void 0 : params.containerWidthOffset) || 0), params);
-  // Creates the mouse handler and attaches the state to it
-  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);
-  // Creates the keyboard handler for resizing columns
-  const keyboardResizing = useKeyboardResizing(columnResizeState);
-  const enableKeyboardMode = React.useCallback((columnId, onChange) => e => {
-    e.preventDefault();
-    e.nativeEvent.stopPropagation();
-    keyboardResizing.toggleInteractiveMode(columnId, onChange);
-  }, [keyboardResizing]);
-  return {
-    ...tableState,
-    tableRef: measureElementRef,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    columnSizing_unstable: {
-      getOnMouseDown: mouseHandler.getOnMouseDown,
-      setColumnWidth: (columnId, w) => columnResizeState.setColumnWidth(undefined, {
-        columnId,
-        width: w
-      }),
-      getColumnWidths: columnResizeState.getColumns,
-      getTableHeaderCellProps: columnId => {
-        const col = columnResizeState.getColumnById(columnId);
-        const aside = /*#__PURE__*/React.createElement(TableResizeHandle, {
-          onMouseDown: mouseHandler.getOnMouseDown(columnId),
-          onTouchStart: mouseHandler.getOnMouseDown(columnId)
-        });
-        return col ? {
-          style: getColumnStyles(col),
-          aside
-        } : {};
-      },
-      getTableCellProps: columnId => {
-        const col = columnResizeState.getColumnById(columnId);
-        return col ? {
-          style: getColumnStyles(col)
-        } : {};
-      },
-      enableKeyboardMode
-    }
-  };
+    const { columns  } = tableState;
+    // Gets the container width
+    const { width , measureElementRef  } = useMeasureElement();
+    // Creates the state based on columns and available containerWidth
+    const columnResizeState = useTableColumnResizeState(columns, width + ((params === null || params === void 0 ? void 0 : params.containerWidthOffset) || 0), params);
+    // Creates the mouse handler and attaches the state to it
+    const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);
+    // Creates the keyboard handler for resizing columns
+    const { toggleInteractiveMode , columnId: keyboardResizingColumnId  } = useKeyboardResizing(columnResizeState);
+    const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{
+            e.preventDefault();
+            e.nativeEvent.stopPropagation();
+            toggleInteractiveMode(columnId, onChange);
+        }, [
+        toggleInteractiveMode
+    ]);
+    return {
+        ...tableState,
+        tableRef: measureElementRef,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        columnSizing_unstable: {
+            getOnMouseDown: mouseHandler.getOnMouseDown,
+            setColumnWidth: (columnId, w)=>columnResizeState.setColumnWidth(undefined, {
+                    columnId,
+                    width: w
+                }),
+            getColumnWidths: columnResizeState.getColumns,
+            getTableHeaderCellProps: (columnId)=>{
+                const col = columnResizeState.getColumnById(columnId);
+                const aside = /*#__PURE__*/ React.createElement(TableResizeHandle, {
+                    onMouseDown: mouseHandler.getOnMouseDown(columnId),
+                    onTouchStart: mouseHandler.getOnMouseDown(columnId)
+                });
+                return col ? {
+                    style: getColumnStyles(col),
+                    aside,
+                    ...keyboardResizingColumnId === columnId ? {
+                        [KeyboardResizingCurrentColumnDataAttribute]: ''
+                    } : {}
+                } : {};
+            },
+            getTableCellProps: (columnId)=>{
+                const col = columnResizeState.getColumnById(columnId);
+                return col ? {
+                    style: getColumnStyles(col)
+                } : {};
+            },
+            enableKeyboardMode
+        }
+    };
 }
-//# sourceMappingURL=useTableColumnSizing.js.map

package/lib/hooks/useTableColumnSizing.js.map

@@ -1 +1 @@
-{"version":3,"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","keyboardResizing","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","toggleInteractiveMode","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","createElement","onMouseDown","onTouchStart"],"sources":["../../src/hooks/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';\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 keyboardResizing = 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        keyboardResizing.toggleInteractiveMode(columnId, onChange);\n      },\n    [keyboardResizing],\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          />\n        );\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n      enableKeyboardMode,\n    },\n  };\n}\n"],"mappings":"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"}
+{"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';\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const KeyboardResizingCurrentColumnDataAttribute = 'data-keyboard-resizing';\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, columnId: keyboardResizingColumnId } = 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          />\n        );\n        return col\n          ? {\n              style: getColumnStyles(col),\n              aside,\n              ...(keyboardResizingColumnId === columnId ? { [KeyboardResizingCurrentColumnDataAttribute]: '' } : {}),\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","KeyboardResizingCurrentColumnDataAttribute","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","keyboardResizingColumnId","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;AASzD,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,gCAAgC,QAAQ,qCAAqC;AACtF,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,mBAAmB,QAAQ,wBAAwB;AAE5D,OAAO,MAAMC,6CAA6C,yBAAyB;AAEnF,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,GAAGxB;IACrC,kEAAkE;IAClE,MAAMyB,oBAAoBvB,0BAA0BqB,SAASH,QAASL,CAAAA,CAAAA,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQW,oBAAoB,AAAD,KAAK,CAAA,GAAIX;IAC1G,yDAAyD;IACzD,MAAMY,eAAe1B,iCAAiCwB;IACtD,oDAAoD;IACpD,MAAM,EAAEG,sBAAqB,EAAEjB,UAAUkB,yBAAwB,EAAE,GAAG1B,oBAAoBsB;IAE1F,MAAMZ,qBAAqBf,MAAMgC,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,oBAAC5C;oBACC6C,aAAajB,aAAapB,cAAc,CAACI;oBACzCkC,cAAclB,aAAapB,cAAc,CAACI;;gBAG9C,OAAO8B,MACH;oBACE/B,OAAOQ,gBAAgBuB;oBACvBE;oBACA,GAAId,6BAA6BlB,WAAW;wBAAE,CAACP,2CAA2C,EAAE;oBAAG,IAAI,CAAC,CAAC;gBACvG,IACA,CAAC,CAAC;YACR;YACAQ,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"}

package/lib/hooks/useTableFeatures.js

@@ -2,44 +2,39 @@ import * as React from 'react';
 import { defaultTableSelectionState } from './useTableSelection';
 import { defaultTableSortState } from './useTableSort';
 import { defaultColumnSizingState } from './useTableColumnSizing';
-const defaultRowEnhancer = row => row;
+const defaultRowEnhancer = (row)=>row;
 export const defaultTableState = {
-  selection: defaultTableSelectionState,
-  sort: defaultTableSortState,
-  getRows: () => [],
-  getRowId: () => '',
-  items: [],
-  columns: [],
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  columnSizing_unstable: defaultColumnSizingState,
-  tableRef: /*#__PURE__*/React.createRef()
-};
-export function useTableFeatures(options, plugins = []) {
-  const {
-    items,
-    getRowId,
-    columns
-  } = options;
-  var _getRowId;
-  const getRows = (rowEnhancer = defaultRowEnhancer) => {
-    return items.map((item, i) => {
-      return rowEnhancer({
-        item,
-        rowId: (_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _getRowId !== void 0 ? _getRowId : i
-      });
-    });
-  };
-  const initialState = {
-    getRowId,
-    items,
-    columns,
-    getRows,
     selection: defaultTableSelectionState,
     sort: defaultTableSortState,
+    getRows: ()=>[],
+    getRowId: ()=>'',
+    items: [],
+    columns: [],
     // eslint-disable-next-line @typescript-eslint/naming-convention
     columnSizing_unstable: defaultColumnSizingState,
-    tableRef: /*#__PURE__*/React.createRef()
-  };
-  return plugins.reduce((state, plugin) => plugin(state), initialState);
+    tableRef: React.createRef()
+};
+export function useTableFeatures(options, plugins = []) {
+    const { items , getRowId , columns  } = options;
+    var _getRowId;
+    const getRows = (rowEnhancer = defaultRowEnhancer)=>{
+        return items.map((item, i)=>{
+            return rowEnhancer({
+                item,
+                rowId: (_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _getRowId !== void 0 ? _getRowId : i
+            });
+        });
+    };
+    const initialState = {
+        getRowId,
+        items,
+        columns,
+        getRows,
+        selection: defaultTableSelectionState,
+        sort: defaultTableSortState,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        columnSizing_unstable: defaultColumnSizingState,
+        tableRef: React.createRef()
+    };
+    return plugins.reduce((state, plugin)=>plugin(state), initialState);
 }
-//# sourceMappingURL=useTableFeatures.js.map

package/lib/hooks/useTableFeatures.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","_getRowId","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"sources":["../../src/hooks/useTableFeatures.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  UseTableFeaturesOptions,\n  TableFeaturesState,\n  TableRowData,\n  RowEnhancer,\n  TableFeaturePlugin,\n  TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n  selection: defaultTableSelectionState,\n  sort: defaultTableSortState,\n  getRows: () => [],\n  getRowId: () => '',\n  items: [],\n  columns: [],\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: defaultColumnSizingState,\n  tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n  options: UseTableFeaturesOptions<TItem>,\n  plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n  const { items, getRowId, columns } = options;\n\n  const getRows = <TRowState extends TableRowData<TItem>>(\n    rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n  ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n  const initialState: TableFeaturesState<TItem> = {\n    getRowId,\n    items,\n    columns,\n    getRows,\n    selection: defaultTableSelectionState,\n    sort: defaultTableSortState as TableSortState<TItem>,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: defaultColumnSizingState,\n    tableRef: React.createRef(),\n  };\n\n  return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AASvB,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,qBAAqB,QAAQ;AACtC,SAASC,wBAAwB,QAAQ;AAEzC,MAAMC,kBAAA,GAAkEC,GAAA,IAAOA,GAAA;AAE/E,OAAO,MAAMC,iBAAA,GAAiD;EAC5DC,SAAA,EAAWN,0BAAA;EACXO,IAAA,EAAMN,qBAAA;EACNO,OAAA,EAASA,CAAA,KAAM,EAAE;EACjBC,QAAA,EAAUA,CAAA,KAAM;EAChBC,KAAA,EAAO,EAAE;EACTC,OAAA,EAAS,EAAE;EACX;EACAC,qBAAA,EAAuBV,wBAAA;EACvBW,QAAA,eAAUd,KAAA,CAAMe,SAAS;AAC3B;AAEA,OAAO,SAASC,iBACdC,OAAuC,EACvCC,OAAA,GAAgC,EAAE,EACP;EAC3B,MAAM;IAAEP,KAAA;IAAOD,QAAA;IAAUE;EAAO,CAAE,GAAGK,OAAA;MAIkBE,SAAA;EAFvD,MAAMV,OAAA,GAAUA,CACdW,WAAA,GAAchB,kBAAmD;IAC9D,OAAAO,KAAA,CAAMU,GAAG,CAAC,CAACC,IAAA,EAAMC,CAAA;MAAM,OAAAH,WAAA,CAAY;QAAEE,IAAA;QAAME,KAAA,EAAO,CAAAL,SAAA,GAAAT,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAWY,IAAA,eAAXH,SAAA,cAAAA,SAAA,GAAoBI;MAAE;;;EAE7E,MAAME,YAAA,GAA0C;IAC9Cf,QAAA;IACAC,KAAA;IACAC,OAAA;IACAH,OAAA;IACAF,SAAA,EAAWN,0BAAA;IACXO,IAAA,EAAMN,qBAAA;IACN;IACAW,qBAAA,EAAuBV,wBAAA;IACvBW,QAAA,eAAUd,KAAA,CAAMe,SAAS;EAC3B;EAEA,OAAOG,OAAA,CAAQQ,MAAM,CAAC,CAACC,KAAA,EAAOC,MAAA,KAAWA,MAAA,CAAOD,KAAA,GAAQF,YAAA;AAC1D"}
+{"version":3,"sources":["useTableFeatures.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  UseTableFeaturesOptions,\n  TableFeaturesState,\n  TableRowData,\n  RowEnhancer,\n  TableFeaturePlugin,\n  TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n  selection: defaultTableSelectionState,\n  sort: defaultTableSortState,\n  getRows: () => [],\n  getRowId: () => '',\n  items: [],\n  columns: [],\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: defaultColumnSizingState,\n  tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n  options: UseTableFeaturesOptions<TItem>,\n  plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n  const { items, getRowId, columns } = options;\n\n  const getRows = <TRowState extends TableRowData<TItem>>(\n    rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n  ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n  const initialState: TableFeaturesState<TItem> = {\n    getRowId,\n    items,\n    columns,\n    getRows,\n    selection: defaultTableSelectionState,\n    sort: defaultTableSortState as TableSortState<TItem>,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: defaultColumnSizingState,\n    tableRef: React.createRef(),\n  };\n\n  return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,yBAAyB;AAElE,MAAMC,qBAAkEC,CAAAA,MAAOA;AAE/E,OAAO,MAAMC,oBAAiD;IAC5DC,WAAWN;IACXO,MAAMN;IACNO,SAAS,IAAM,EAAE;IACjBC,UAAU,IAAM;IAChBC,OAAO,EAAE;IACTC,SAAS,EAAE;IACX,gEAAgE;IAChEC,uBAAuBV;IACvBW,UAAUd,MAAMe,SAAS;AAC3B,EAAE;AAEF,OAAO,SAASC,iBACdC,OAAuC,EACvCC,UAAgC,EAAE,EACP;IAC3B,MAAM,EAAEP,MAAK,EAAED,SAAQ,EAAEE,QAAO,EAAE,GAAGK;QAIkBP;IAFvD,MAAMD,UAAU,CACdU,cAAcf,kBAAmD;QAC9DO,OAAAA,MAAMS,GAAG,CAAC,CAACC,MAAMC;YAAMH,OAAAA,YAAY;gBAAEE;gBAAME,OAAOb,CAAAA,YAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWW,mBAAXX,uBAAAA,YAAoBY,CAAC;YAAC;;;IAE7E,MAAME,eAA0C;QAC9Cd;QACAC;QACAC;QACAH;QACAF,WAAWN;QACXO,MAAMN;QACN,gEAAgE;QAChEW,uBAAuBV;QACvBW,UAAUd,MAAMe,SAAS;IAC3B;IAEA,OAAOG,QAAQO,MAAM,CAAC,CAACC,OAAOC,SAAWA,OAAOD,QAAQF;AAC1D,CAAC"}