material-react-table 3.0.0 → 3.0.2

package/dist/index.d.ts

@@ -1076,7 +1076,7 @@ interface MRT_TableOptions<TData extends MRT_RowData> extends Omit<Partial<Table
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
         values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
-    }) => void;
+    }) => Promise<void> | void;
     onDensityChange?: OnChangeFn<MRT_DensityState>;
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;

package/dist/index.esm.js

@@ -50,7 +50,6 @@ import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import Paper from '@mui/material/Paper';
-import FocusTrap from '@mui/material/Unstable_TrapFocus/FocusTrap';
 import TableContainer from '@mui/material/TableContainer';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -437,6 +436,8 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
     var _a, _b, _c, _d, _e, _f, _g, _h;
     if (!table.options.enableKeyboardShortcuts)
         return;
+    if (event.isPropagationStopped())
+        return;
     const currentCell = event.currentTarget;
     if (cellValue && isWinCtrlMacMeta(event) && event.key === 'c') {
         navigator.clipboard.writeText(cellValue);
@@ -925,7 +926,7 @@ const MRT_RowActionMenu = (_a) => {
     const menuItems = useMemo(() => {
         const items = [];
         const editItem = parseFromValuesOrFunc(enableEditing, row) &&
-            ['modal', 'row'].includes(editDisplayMode) && (jsx(MRT_ActionMenuItem, { icon: jsx(EditIcon, {}), label: localization.edit, onClick: handleEdit, table: table }));
+            ['modal', 'row'].includes(editDisplayMode) && (jsx(MRT_ActionMenuItem, { icon: jsx(EditIcon, {}), label: localization.edit, onClick: handleEdit, table: table }, 'edit'));
         if (editItem)
             items.push(editItem);
         const rowActionMenuItems = renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
@@ -2102,7 +2103,7 @@ const MRT_EditCellTextField = (_a) => {
             : {})), textFieldProps.InputProps), { sx: (theme) => {
                 var _a;
                 return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
-            } }), SelectProps: Object.assign({ MenuProps: { disableScrollLock: true } }, textFieldProps.SelectProps), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
+            } }), SelectProps: Object.assign({ MenuProps: { disableScrollLock: true } }, textFieldProps.SelectProps), inputProps: Object.assign({ autoComplete: 'off' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
@@ -2245,13 +2246,13 @@ const MRT_TableBodyCell = (_a) => {
     };
     const handleKeyDown = (event) => {
         var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
         cellKeyboardShortcuts({
             cell,
             cellValue: cell.getValue(),
             event,
             table,
         });
-        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
     };
     return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, tabIndex: enableKeyboardShortcuts ? 0 : undefined }, tableCellProps, { onKeyDown: handleKeyDown, onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, onDragOver: handleDragOver, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
                 outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id ||
@@ -2526,12 +2527,12 @@ const MRT_TableFooterCell = (_a) => {
     const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
     const handleKeyDown = (event) => {
         var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
         cellKeyboardShortcuts({
             event,
             cellValue: footer.column.columnDef.footer,
             table,
         });
-        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
     };
     return (jsx(TableCell, Object.assign({ align: columnDefType === 'group'
             ? 'center'
@@ -3138,7 +3139,7 @@ const MRT_FilterTextField = (_a) => {
             localization[`filter${((_k = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _k === void 0 ? void 0 : _k.toUpperCase()) +
                 (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
             'aria-label': filterPlaceholder,
-            autoComplete: 'new-password', // disable autocomplete and autofill
+            autoComplete: 'off',
             disabled: !!filterChipLabel,
             sx: {
                 textOverflow: 'ellipsis',
@@ -3181,15 +3182,21 @@ const MRT_FilterTextField = (_a) => {
                 } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsx(DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
                     field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_q = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.field),
                     textField: Object.assign(Object.assign({}, commonTextFieldProps), (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.textField),
-                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_s = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _s !== void 0 ? _s : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, 
+                // @ts-ignore
+                onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_s = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _s !== void 0 ? _s : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a;
                     return (jsx(TextField, Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation() })));
                 }, value: autocompleteValue }))) : (jsx(TextField, Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
-                        ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
+                        ? (selected) => !Array.isArray(selected) || selected.length === 0 ? (jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected.map((value) => {
                                 const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value === value);
                                 return (jsx(Chip, { label: getValueAndLabel(selectedValue).label }, value));
                             }) }))
-                        : undefined }, commonTextFieldProps.SelectProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
+                        : undefined }, commonTextFieldProps.SelectProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: isMultiSelectFilter
+                    ? Array.isArray(filterValue)
+                        ? filterValue
+                        : []
+                    : '', children: (isSelectFilter || isMultiSelectFilter) && [
                     jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
                     ...[
                         (_t = textFieldProps.children) !== null && _t !== void 0 ? _t : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
@@ -3538,13 +3545,13 @@ const MRT_TableHeadCell = (_a) => {
     };
     const handleKeyDown = (event) => {
         var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
         cellKeyboardShortcuts({
             event,
             cellValue: header.column.columnDef.header,
             table,
             header,
         });
-        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
     };
     const HeaderElement = (_b = parseFromValuesOrFunc(columnDef.Header, {
         column,
@@ -4250,7 +4257,7 @@ const MRT_GlobalFilterTextField = (_a) => {
         }
         isMounted.current = true;
     }, [globalFilter]);
-    return (jsxs(Collapse, { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsx(TextField, Object.assign({ inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onChange: handleChange, placeholder: localization.search, size: "small", value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "outlined" }, textFieldProps, { InputProps: Object.assign(Object.assign({ endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { title: (_b = localization.clearSearch) !== null && _b !== void 0 ? _b : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })), startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })) }, textFieldProps.InputProps), { sx: (theme) => {
+    return (jsxs(Collapse, { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsx(TextField, Object.assign({ inputProps: Object.assign({ autoComplete: 'off' }, textFieldProps.inputProps), onChange: handleChange, placeholder: localization.search, size: "small", value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "outlined" }, textFieldProps, { InputProps: Object.assign(Object.assign({ endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { title: (_b = localization.clearSearch) !== null && _b !== void 0 ? _b : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })), startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })) }, textFieldProps.InputProps), { sx: (theme) => {
                         var _a;
                         return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
                     } }), inputRef: (inputRef) => {
@@ -4314,30 +4321,30 @@ const MRT_TablePaper = (_a) => {
     const { isFullScreen } = getState();
     const paperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
     const theme = useTheme();
-    return (jsx(FocusTrap, { disableEnforceFocus: true, open: isFullScreen, children: jsxs(Paper, Object.assign({ elevation: 2, onKeyDown: (e) => e.key === 'Escape' && table.setIsFullScreen(false) }, paperProps, { ref: (ref) => {
-                tablePaperRef.current = ref;
-                if (paperProps === null || paperProps === void 0 ? void 0 : paperProps.ref) {
-                    //@ts-ignore
-                    paperProps.ref.current = ref;
-                }
-            }, style: Object.assign(Object.assign({}, (isFullScreen
-                ? {
-                    bottom: 0,
-                    height: '100dvh',
-                    left: 0,
-                    margin: 0,
-                    maxHeight: '100dvh',
-                    maxWidth: '100dvw',
-                    padding: 0,
-                    position: 'fixed',
-                    right: 0,
-                    top: 0,
-                    width: '100dvw',
-                    zIndex: theme.zIndex.modal,
-                }
-                : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
-                    ((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
-                    ((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsx(MRT_BottomToolbar, { table: table })))] })) }));
+    return (jsxs(Paper, Object.assign({ elevation: 2, onKeyDown: (e) => e.key === 'Escape' && table.setIsFullScreen(false) }, paperProps, { ref: (ref) => {
+            tablePaperRef.current = ref;
+            if (paperProps === null || paperProps === void 0 ? void 0 : paperProps.ref) {
+                //@ts-ignore
+                paperProps.ref.current = ref;
+            }
+        }, style: Object.assign(Object.assign({}, (isFullScreen
+            ? {
+                bottom: 0,
+                height: '100dvh',
+                left: 0,
+                margin: 0,
+                maxHeight: '100dvh',
+                maxWidth: '100dvw',
+                padding: 0,
+                position: 'fixed',
+                right: 0,
+                top: 0,
+                width: '100dvw',
+                zIndex: theme.zIndex.modal,
+            }
+            : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
+                ((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
+                ((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsx(MRT_BottomToolbar, { table: table })))] })));
 };
 
 const isTableInstanceProp = (props) => props.table !== undefined;