material-react-table 2.13.1 → 3.0.0-alpha.0

package/dist/index.js

@@ -327,7 +327,7 @@ const createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parent
 
 const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
 const getValueAndLabel = (option) => {
-    var _a, _b, _c;
+    var _a, _b;
     let label = '';
     let value = '';
     if (option) {
@@ -336,8 +336,8 @@ const getValueAndLabel = (option) => {
             value = option;
         }
         else {
-            label = (_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.text) !== null && _b !== void 0 ? _b : option.value;
-            value = (_c = option.value) !== null && _c !== void 0 ? _c : label;
+            label = (_a = option.label) !== null && _a !== void 0 ? _a : option.value;
+            value = (_b = option.value) !== null && _b !== void 0 ? _b : label;
         }
     }
     return { label, value };
@@ -1052,7 +1052,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
@@ -1570,8 +1570,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] = react.useState((_c = initialState.columnOrder) !== null && _c !== void 0 ? _c : []);
@@ -1958,6 +1958,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] = react.useState(() => cell.getValue());
+    const [completesComposition, setCompletesComposition] = react.useState(true);
     const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditTextFieldProps, {
         cell,
         column,
@@ -2003,7 +2004,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();
         }
     };
@@ -2030,7 +2031,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 (jsxRuntime.jsx(MenuItem__default["default"], { sx: {
                     alignItems: 'center',
@@ -2195,7 +2196,7 @@ const MRT_TableBodyCell = (_a) => {
             table,
             tableCellProps,
             theme,
-        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.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) ? (jsxRuntime.jsx(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : columnDefType === 'display' &&
+        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.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) ? (jsxRuntime.jsx(Skeleton__default["default"], 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,
@@ -2453,11 +2454,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) => {
@@ -2689,7 +2690,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,
@@ -2699,7 +2700,7 @@ const MRT_FilterOptionMenu = (_a) => {
                 internalFilterOptions,
                 onSelectFilterMode: handleSelectFilterMode,
                 table,
-            })
+            }))
             : renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
                 internalFilterOptions,
                 onSelectFilterMode: handleSelectFilterMode,
@@ -2914,7 +2915,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
@@ -2932,7 +2933,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] = react.useState(isAutocompleteFilter ? filterValue : null);
     const handleChangeDebounced = react.useCallback(utils.debounce((newValue) => {
@@ -3113,7 +3114,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];
@@ -3435,7 +3436,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;
@@ -3471,7 +3476,7 @@ const MRT_TableHeadCell = (_a) => {
             theme,
         })), draggingBorders)), children: [header.isPlaceholder
                 ? null
-                : (_c = tableCellProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content", sx: {
+                : ((_c = tableCellProps.children) !== null && _c !== void 0 ? _c : (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content", sx: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
@@ -3508,7 +3513,7 @@ const MRT_TableHeadCell = (_a) => {
                                 whiteSpace: 'nowrap',
                             }, children: [showDragHandle && (jsxRuntime.jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
                                         current: tableHeadCellRefs.current[column.id],
-                                    } })), showColumnActions && (jsxRuntime.jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsxRuntime.jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] })), columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
+                                    } })), showColumnActions && (jsxRuntime.jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsxRuntime.jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] }))), columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
 };
 
 const MRT_TableHeadRow = (_a) => {
@@ -3743,10 +3748,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);
     });