material-react-table 2.13.1 → 2.13.2

package/dist/index.d.ts

@@ -267,7 +267,7 @@ type MRT_PaginationState = PaginationState;
 type MRT_RowSelectionState = RowSelectionState;
 type MRT_SortingState = SortingState;
 type MRT_Updater<T> = Updater<T>;
-type MRT_VirtualItem<T extends Element = Element> = VirtualItem<T>;
+type MRT_VirtualItem = VirtualItem;
 type MRT_VisibilityState = VisibilityState;
 type MRT_VirtualizerOptions<TScrollElement extends Element | Window = Element | Window, TItemElement extends Element = Element> = VirtualizerOptions<TScrollElement, TItemElement>;
 type MRT_ColumnVirtualizer<TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableCellElement> = Virtualizer<TScrollElement, TItemElement> & {
@@ -1502,7 +1502,7 @@ interface MRT_TableBodyRowProps<TData extends MRT_RowData> extends TableRowProps
     rowVirtualizer?: MRT_RowVirtualizer;
     staticRowIndex: number;
     table: MRT_TableInstance<TData>;
-    virtualRow?: VirtualItem<HTMLTableRowElement>;
+    virtualRow?: VirtualItem;
 }
 declare const MRT_TableBodyRow: <TData extends MRT_RowData>({ columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow, ...rest }: MRT_TableBodyRowProps<TData>) => react_jsx_runtime.JSX.Element;
 declare const Memo_MRT_TableBodyRow: typeof MRT_TableBodyRow;
@@ -1526,7 +1526,7 @@ interface MRT_TableDetailPanelProps<TData extends MRT_RowData> extends TableCell
     rowVirtualizer?: MRT_RowVirtualizer;
     staticRowIndex: number;
     table: MRT_TableInstance<TData>;
-    virtualRow?: MRT_VirtualItem<HTMLTableRowElement>;
+    virtualRow?: MRT_VirtualItem;
 }
 declare const MRT_TableDetailPanel: <TData extends MRT_RowData>({ parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow, ...rest }: MRT_TableDetailPanelProps<TData>) => react_jsx_runtime.JSX.Element;
 

package/dist/index.esm.js

@@ -962,7 +962,7 @@ const getMRT_RowExpandColumnDef = (tableOptions) => {
         header: 'expand',
         id: 'mrt-row-expand',
         size: groupedColumnMode === 'remove'
-            ? (_a = defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.size) !== null && _a !== void 0 ? _a : 180
+            ? ((_a = defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.size) !== null && _a !== void 0 ? _a : 180)
             : renderDetailPanel
                 ? enableExpandAll
                     ? 60
@@ -1480,8 +1480,8 @@ const useMRT_TableInstance = (definedTableOptions) => {
         var _a, _b, _c, _d;
         return ({
             [getColumnId(col)]: col.filterFn instanceof Function
-                ? (_a = col.filterFn.name) !== null && _a !== void 0 ? _a : 'custom'
-                : (_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col),
+                ? ((_a = col.filterFn.name) !== null && _a !== void 0 ? _a : 'custom')
+                : ((_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col)),
         });
     })));
     const [columnOrder, onColumnOrderChange] = useState((_c = initialState.columnOrder) !== null && _c !== void 0 ? _c : []);
@@ -1868,6 +1868,7 @@ const MRT_EditCellTextField = (_a) => {
     const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
     const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
     const [value, setValue] = useState(() => cell.getValue());
+    const [completesComposition, setCompletesComposition] = useState(true);
     const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditTextFieldProps, {
         cell,
         column,
@@ -1913,7 +1914,7 @@ const MRT_EditCellTextField = (_a) => {
     const handleEnterKeyDown = (event) => {
         var _a, _b;
         (_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
-        if (event.key === 'Enter' && !event.shiftKey) {
+        if (event.key === 'Enter' && !event.shiftKey && completesComposition) {
             (_b = editInputRefs.current[column.id]) === null || _b === void 0 ? void 0 : _b.blur();
         }
     };
@@ -1940,7 +1941,7 @@ const MRT_EditCellTextField = (_a) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
-        }, onKeyDown: handleEnterKeyDown, children: (_c = textFieldProps.children) !== null && _c !== void 0 ? _c : selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.map((option) => {
+        }, onKeyDown: handleEnterKeyDown, onCompositionStart: () => setCompletesComposition(false), onCompositionEnd: () => setCompletesComposition(true), children: (_c = textFieldProps.children) !== null && _c !== void 0 ? _c : selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.map((option) => {
             const { label, value } = getValueAndLabel(option);
             return (jsx(MenuItem, { sx: {
                     alignItems: 'center',
@@ -2105,7 +2106,7 @@ const MRT_TableBodyCell = (_a) => {
             table,
             tableCellProps,
             theme,
-        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : columnDefType === 'display' &&
+        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [cell.getIsPlaceholder() ? (((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null)) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : columnDefType === 'display' &&
                     (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(column.id) ||
                         !row.getIsGrouped()) ? ((_e = columnDef.Cell) === null || _e === void 0 ? void 0 : _e.call(columnDef, {
                     cell,
@@ -2363,11 +2364,11 @@ const MRT_TableFooterCell = (_a) => {
             theme,
         })), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (footer.isPlaceholder
             ? null
-            : (_d = (_c = parseFromValuesOrFunc(columnDef.Footer, {
+            : ((_d = (_c = parseFromValuesOrFunc(columnDef.Footer, {
                 column,
                 footer,
                 table,
-            })) !== null && _c !== void 0 ? _c : columnDef.footer) !== null && _d !== void 0 ? _d : null) })));
+            })) !== null && _c !== void 0 ? _c : columnDef.footer) !== null && _d !== void 0 ? _d : null)) })));
 };
 
 const MRT_TableFooterRow = (_a) => {
@@ -2599,7 +2600,7 @@ const MRT_FilterOptionMenu = (_a) => {
                 backgroundColor: menuBackgroundColor,
             },
         }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_e = (header && column && columnDef
-            ? (_d = (_c = columnDef.renderColumnFilterModeMenuItems) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
+            ? ((_d = (_c = columnDef.renderColumnFilterModeMenuItems) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
                 column: column,
                 internalFilterOptions,
                 onSelectFilterMode: handleSelectFilterMode,
@@ -2609,7 +2610,7 @@ const MRT_FilterOptionMenu = (_a) => {
                 internalFilterOptions,
                 onSelectFilterMode: handleSelectFilterMode,
                 table,
-            })
+            }))
             : renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
                 internalFilterOptions,
                 onSelectFilterMode: handleSelectFilterMode,
@@ -2824,7 +2825,7 @@ const MRT_FilterTextField = (_a) => {
                 (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
         : '';
     const filterPlaceholder = !isRangeFilter
-        ? (_d = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.placeholder) !== null && _d !== void 0 ? _d : (_f = localization.filterByColumn) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))
+        ? ((_d = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.placeholder) !== null && _d !== void 0 ? _d : (_f = localization.filterByColumn) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header)))
         : rangeFilterIndex === 0
             ? localization.min
             : rangeFilterIndex === 1
@@ -2842,7 +2843,7 @@ const MRT_FilterTextField = (_a) => {
             ? column.getFilterValue() || []
             : isRangeFilter
                 ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || ''
-                : (_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '';
+                : ((_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '');
     });
     const [autocompleteValue, setAutocompleteValue] = useState(isAutocompleteFilter ? filterValue : null);
     const handleChangeDebounced = useCallback(debounce((newValue) => {
@@ -3023,7 +3024,7 @@ const MRT_FilterRangeSlider = (_a) => {
     const sliderProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterSliderProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table })), rest);
     let [min, max] = sliderProps.min !== undefined && sliderProps.max !== undefined
         ? [sliderProps.min, sliderProps.max]
-        : (_b = column.getFacetedMinMaxValues()) !== null && _b !== void 0 ? _b : [0, 1];
+        : ((_b = column.getFacetedMinMaxValues()) !== null && _b !== void 0 ? _b : [0, 1]);
     //fix potential TanStack Table bugs where min or max is an array
     if (Array.isArray(min))
         min = min[0];
@@ -3345,7 +3346,11 @@ const MRT_TableHeadCell = (_a) => {
             ? 'center'
             : theme.direction === 'rtl'
                 ? 'right'
-                : 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
+                : 'left', "aria-sort": column.getIsSorted()
+            ? column.getIsSorted() === 'asc'
+                ? 'ascending'
+                : 'descending'
+            : 'none', colSpan: header.colSpan, "data-can-sort": column.getCanSort() || undefined, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, "data-sort": column.getIsSorted() || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
             var _a;
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
@@ -3381,7 +3386,7 @@ const MRT_TableHeadCell = (_a) => {
             theme,
         })), draggingBorders)), children: [header.isPlaceholder
                 ? null
-                : (_c = tableCellProps.children) !== null && _c !== void 0 ? _c : (jsxs(Box, { className: "Mui-TableHeadCell-Content", sx: {
+                : ((_c = tableCellProps.children) !== null && _c !== void 0 ? _c : (jsxs(Box, { className: "Mui-TableHeadCell-Content", sx: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
@@ -3418,7 +3423,7 @@ const MRT_TableHeadCell = (_a) => {
                                 whiteSpace: 'nowrap',
                             }, children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
                                         current: tableHeadCellRefs.current[column.id],
-                                    } })), showColumnActions && (jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] })), columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
+                                    } })), showColumnActions && (jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] }))), columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
 };
 
 const MRT_TableHeadRow = (_a) => {
@@ -3653,10 +3658,10 @@ const MRT_TableContainer = (_a) => {
     useIsomorphicLayoutEffect(() => {
         var _a, _b, _c, _d;
         const topToolbarHeight = typeof document !== 'undefined'
-            ? (_b = (_a = topToolbarRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0
+            ? ((_b = (_a = topToolbarRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0)
             : 0;
         const bottomToolbarHeight = typeof document !== 'undefined'
-            ? (_d = (_c = bottomToolbarRef === null || bottomToolbarRef === void 0 ? void 0 : bottomToolbarRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0
+            ? ((_d = (_c = bottomToolbarRef === null || bottomToolbarRef === void 0 ? void 0 : bottomToolbarRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0)
             : 0;
         setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
     });