material-react-table 2.0.0-beta.13 → 2.0.0-beta.15

package/dist/index.js

@@ -404,6 +404,22 @@ function createMRTColumnHelper() {
         group: (column) => column,
     };
 }
+const getValueAndLabel = (option) => {
+    var _a, _b, _c;
+    let label = '';
+    let value = '';
+    if (option) {
+        if (typeof option !== 'object') {
+            label = 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;
+        }
+    }
+    return { label, value };
+};
 
 const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
 const getMRTTheme = (table, theme) => (Object.assign({ baseBackgroundColor: theme.palette.mode === 'dark'
@@ -627,10 +643,10 @@ const MRT_EditCellTextField = (_a) => {
         //@ts-ignore
         row._valuesCache[column.id] = newValue;
         if (isCreating) {
-            setCreatingRow(Object.assign({}, row));
+            setCreatingRow(row);
         }
         else if (isEditing) {
-            setEditingRow(Object.assign({}, row));
+            setEditingRow(row);
         }
     };
     const handleChange = (event) => {
@@ -676,22 +692,13 @@ const MRT_EditCellTextField = (_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 : (_d = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _d === void 0 ? void 0 : _d.map((option) => {
-            let value;
-            let text;
-            if (typeof option !== 'object') {
-                value = option;
-                text = option;
-            }
-            else {
-                value = option.value;
-                text = option.text;
-            }
+            const { label, value } = getValueAndLabel(option);
             return (jsxRuntime.jsx(MenuItem__default["default"], { sx: {
                     alignItems: 'center',
                     display: 'flex',
                     gap: '0.5rem',
                     m: 0,
-                }, value: value, children: text }, value));
+                }, value: value, children: label }, value));
         }) })));
 };
 
@@ -1589,7 +1596,7 @@ const MRT_FilterCheckbox = (_a) => {
 };
 
 const MRT_FilterTextField = (_a) => {
-    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
     const { options: { columnFilterModeOptions, enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
@@ -1749,6 +1756,7 @@ const MRT_FilterTextField = (_a) => {
             // @ts-ignore
             localization[`filter${((_l = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _l === void 0 ? void 0 : _l.toUpperCase()) +
                 (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
+            'aria-label': filterPlaceholder,
             autoComplete: 'new-password',
             disabled: !!filterChipLabel,
             sx: {
@@ -1778,7 +1786,7 @@ const MRT_FilterTextField = (_a) => {
                 }, value: filterValue || null }, datePickerProps, { slotProps: {
                     field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_m = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.field),
                     textField: Object.assign(Object.assign({}, commonTextFieldProps), (_o = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.textField),
-                } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => option, onChange: (_e, newValue) => handleChange(newValue), options: dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+                } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleChange(getValueAndLabel(newValue).value), options: (_p = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _p !== void 0 ? _p : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a;
                     return (jsxRuntime.jsx(TextField__default["default"], 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 })));
                 }, value: filterValue }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ SelectProps: {
@@ -1786,37 +1794,22 @@ const MRT_FilterTextField = (_a) => {
                     multiple: isMultiSelectFilter,
                     renderValue: isMultiSelectFilter
                         ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsxRuntime.jsx(Box__default["default"], { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
-                                const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => option instanceof Object
-                                    ? option.value === value
-                                    : option === value);
-                                return (jsxRuntime.jsx(Chip__default["default"], { label: selectedValue instanceof Object
-                                        ? selectedValue.text
-                                        : selectedValue }, value));
+                                const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value === value);
+                                return (jsxRuntime.jsx(Chip__default["default"], { label: getValueAndLabel(selectedValue).label }, value));
                             }) }))
                         : undefined,
                 }, onChange: handleTextFieldChange, select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
                     jsxRuntime.jsx(MenuItem__default["default"], { disabled: true, divider: true, hidden: true, value: "", children: jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
                     ...[
-                        (_p = textFieldProps.children) !== null && _p !== void 0 ? _p : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
+                        (_q = textFieldProps.children) !== null && _q !== void 0 ? _q : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
                             var _a;
-                            if (!option)
-                                return '';
-                            let value;
-                            let text;
-                            if (typeof option !== 'object') {
-                                value = option;
-                                text = option;
-                            }
-                            else {
-                                value = option.value;
-                                text = option.text;
-                            }
+                            const { label, value } = getValueAndLabel(option);
                             return (jsxRuntime.jsxs(MenuItem__default["default"], { sx: {
                                     alignItems: 'center',
                                     display: 'flex',
                                     gap: '0.5rem',
                                     m: 0,
-                                }, value: value, children: [isMultiSelectFilter && (jsxRuntime.jsx(Checkbox__default["default"], { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text, ' ', !columnDef.filterSelectOptions &&
+                                }, value: value, children: [isMultiSelectFilter && (jsxRuntime.jsx(Checkbox__default["default"], { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), label, ' ', !columnDef.filterSelectOptions &&
                                         `(${facetedUniqueValues.get(value)})`] }, `${index}-${value}`));
                         }),
                     ],
@@ -2932,12 +2925,12 @@ const MRT_TablePaper = (_a) => {
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
-    const tablePaperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
-    return (jsxRuntime.jsxs(Paper__default["default"], Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
+    const paperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
+    return (jsxRuntime.jsxs(Paper__default["default"], Object.assign({ elevation: 2 }, paperProps, { ref: (ref) => {
             tablePaperRef.current = ref;
-            if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
+            if (paperProps === null || paperProps === void 0 ? void 0 : paperProps.ref) {
                 //@ts-ignore
-                tablePaperProps.ref.current = ref;
+                paperProps.ref.current = ref;
             }
         }, style: Object.assign(Object.assign({}, (isFullScreen
             ? {
@@ -2954,7 +2947,7 @@ const MRT_TablePaper = (_a) => {
                 width: '100vw',
                 zIndex: 999,
             }
-            : {})), tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx, theme))), children: [enableTopToolbar &&
+            : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).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 : (jsxRuntime.jsx(MRT_TopToolbar, { table: table }))), jsxRuntime.jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
                 ((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(MRT_BottomToolbar, { table: table })))] })));
 };
@@ -3711,6 +3704,8 @@ exports.MRT_BottomToolbar = MRT_BottomToolbar;
 exports.MRT_ColumnActionMenu = MRT_ColumnActionMenu;
 exports.MRT_ColumnPinningButtons = MRT_ColumnPinningButtons;
 exports.MRT_CopyButton = MRT_CopyButton;
+exports.MRT_DefaultColumn = MRT_DefaultColumn;
+exports.MRT_DefaultDisplayColumn = MRT_DefaultDisplayColumn;
 exports.MRT_EditActionButtons = MRT_EditActionButtons;
 exports.MRT_EditCellTextField = MRT_EditCellTextField;
 exports.MRT_EditRowModal = MRT_EditRowModal;
@@ -3790,6 +3785,7 @@ exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
 exports.getMRTTheme = getMRTTheme;
 exports.getTotalRight = getTotalRight;
 exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
+exports.getValueAndLabel = getValueAndLabel;
 exports.mrtFilterOptions = mrtFilterOptions;
 exports.parseCSSVarId = parseCSSVarId;
 exports.parseFromValuesOrFunc = parseFromValuesOrFunc;
@@ -3797,5 +3793,9 @@ exports.prepareColumns = prepareColumns;
 exports.rankGlobalFuzzy = rankGlobalFuzzy;
 exports.reorderColumn = reorderColumn;
 exports.showExpandColumn = showExpandColumn;
+exports.useMRT_DisplayColumns = useMRT_DisplayColumns;
+exports.useMRT_Effects = useMRT_Effects;
+exports.useMRT_TableInstance = useMRT_TableInstance;
+exports.useMRT_TableOptions = useMRT_TableOptions;
 exports.useMaterialReactTable = useMaterialReactTable;
 //# sourceMappingURL=index.js.map