material-react-table-narender 2.13.27 → 2.13.30

package/dist/index.js

@@ -53,6 +53,7 @@ var SyncAltIcon = require('@mui/icons-material/SyncAlt');
 var ViewColumnIcon = require('@mui/icons-material/ViewColumn');
 var VisibilityOffIcon = require('@mui/icons-material/VisibilityOff');
 var SettingsBackupRestoreIcon = require('@mui/icons-material/SettingsBackupRestore');
+var SettingsOutlinedIcon = require('@mui/icons-material/SettingsOutlined');
 var reactVirtual = require('@tanstack/react-virtual');
 var Paper = require('@mui/material/Paper');
 var material = require('@mui/material');
@@ -146,6 +147,7 @@ var SyncAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SyncAltIcon);
 var ViewColumnIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewColumnIcon);
 var VisibilityOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffIcon);
 var SettingsBackupRestoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(SettingsBackupRestoreIcon);
+var SettingsOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SettingsOutlinedIcon);
 var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
 var TableContainer__default = /*#__PURE__*/_interopDefaultLegacy(TableContainer);
 var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
@@ -1462,7 +1464,8 @@ const MRT_Default_Icons = {
     SyncAltIcon: SyncAltIcon__default["default"],
     ViewColumnIcon: ViewColumnIcon__default["default"],
     VisibilityOffIcon: VisibilityOffIcon__default["default"],
-    SettingsBackupRestoreIcon: SettingsBackupRestoreIcon__default["default"]
+    SettingsBackupRestoreIcon: SettingsBackupRestoreIcon__default["default"],
+    SettingsOutlinedIcon: SettingsOutlinedIcon__default["default"]
 };
 
 const MRT_Localization_EN = {
@@ -1784,7 +1787,7 @@ const useMRT_Effects = (table) => {
  * @returns the MRT table instance
  */
 const useMRT_TableInstance = (definedTableOptions) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
     const lastSelectedRowId = react.useRef(null);
     const actionCellRef = react.useRef(null);
     const bottomToolbarRef = react.useRef(null);
@@ -1836,8 +1839,9 @@ const useMRT_TableInstance = (definedTableOptions) => {
     const [pagination, onPaginationChange] = react.useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) !== null && _r !== void 0 ? _r : { pageIndex: 0, pageSize: 10 });
     const [showAlertBanner, setShowAlertBanner] = react.useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showAlertBanner) !== null && _s !== void 0 ? _s : false);
     const [showColumnFilters, setShowColumnFilters] = react.useState((_t = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _t !== void 0 ? _t : false);
-    const [showGlobalFilter, setShowGlobalFilter] = react.useState((_u = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _u !== void 0 ? _u : false);
-    const [showToolbarDropZone, setShowToolbarDropZone] = react.useState((_v = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _v !== void 0 ? _v : false);
+    const [showToolBar, setShowToolBar] = react.useState((_u = initialState === null || initialState === void 0 ? void 0 : initialState.showToolBar) !== null && _u !== void 0 ? _u : false);
+    const [showGlobalFilter, setShowGlobalFilter] = react.useState((_v = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _v !== void 0 ? _v : false);
+    const [showToolbarDropZone, setShowToolbarDropZone] = react.useState((_w = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _w !== void 0 ? _w : false);
     definedTableOptions.state = Object.assign({ actionCell,
         columnFilterFns,
         columnOrder,
@@ -1857,6 +1861,7 @@ const useMRT_TableInstance = (definedTableOptions) => {
         pagination,
         showAlertBanner,
         showColumnFilters,
+        showToolBar,
         showGlobalFilter,
         showToolbarDropZone }, definedTableOptions.state);
     //The table options now include all state needed to help determine column visibility and order logic
@@ -1911,7 +1916,7 @@ const useMRT_TableInstance = (definedTableOptions) => {
     const table = reactTable.useReactTable(Object.assign(Object.assign({ onColumnOrderChange,
         onColumnSizingInfoChange,
         onGroupingChange,
-        onPaginationChange }, statefulTableOptions), { globalFilterFn: (_w = statefulTableOptions.filterFns) === null || _w === void 0 ? void 0 : _w[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'] }));
+        onPaginationChange }, statefulTableOptions), { globalFilterFn: (_x = statefulTableOptions.filterFns) === null || _x === void 0 ? void 0 : _x[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'] }));
     table.refs = {
         actionCellRef,
         bottomToolbarRef,
@@ -1927,7 +1932,7 @@ const useMRT_TableInstance = (definedTableOptions) => {
         topToolbarRef,
     };
     table.setActionCell =
-        (_x = statefulTableOptions.onActionCellChange) !== null && _x !== void 0 ? _x : setActionCell;
+        (_y = statefulTableOptions.onActionCellChange) !== null && _y !== void 0 ? _y : setActionCell;
     table.setCreatingRow = (row) => {
         var _a, _b;
         let _row = row;
@@ -1937,34 +1942,36 @@ const useMRT_TableInstance = (definedTableOptions) => {
         (_b = (_a = statefulTableOptions === null || statefulTableOptions === void 0 ? void 0 : statefulTableOptions.onCreatingRowChange) === null || _a === void 0 ? void 0 : _a.call(statefulTableOptions, _row)) !== null && _b !== void 0 ? _b : _setCreatingRow(_row);
     };
     table.setColumnFilterFns =
-        (_y = statefulTableOptions.onColumnFilterFnsChange) !== null && _y !== void 0 ? _y : setColumnFilterFns;
-    table.setDensity = (_z = statefulTableOptions.onDensityChange) !== null && _z !== void 0 ? _z : setDensity;
+        (_z = statefulTableOptions.onColumnFilterFnsChange) !== null && _z !== void 0 ? _z : setColumnFilterFns;
+    table.setDensity = (_0 = statefulTableOptions.onDensityChange) !== null && _0 !== void 0 ? _0 : setDensity;
     table.setDraggingColumn =
-        (_0 = statefulTableOptions.onDraggingColumnChange) !== null && _0 !== void 0 ? _0 : setDraggingColumn;
+        (_1 = statefulTableOptions.onDraggingColumnChange) !== null && _1 !== void 0 ? _1 : setDraggingColumn;
     table.setDraggingRow =
-        (_1 = statefulTableOptions.onDraggingRowChange) !== null && _1 !== void 0 ? _1 : setDraggingRow;
+        (_2 = statefulTableOptions.onDraggingRowChange) !== null && _2 !== void 0 ? _2 : setDraggingRow;
     table.setEditingCell =
-        (_2 = statefulTableOptions.onEditingCellChange) !== null && _2 !== void 0 ? _2 : setEditingCell;
+        (_3 = statefulTableOptions.onEditingCellChange) !== null && _3 !== void 0 ? _3 : setEditingCell;
     table.setEditingRow =
-        (_3 = statefulTableOptions.onEditingRowChange) !== null && _3 !== void 0 ? _3 : setEditingRow;
+        (_4 = statefulTableOptions.onEditingRowChange) !== null && _4 !== void 0 ? _4 : setEditingRow;
     table.setGlobalFilterFn =
-        (_4 = statefulTableOptions.onGlobalFilterFnChange) !== null && _4 !== void 0 ? _4 : setGlobalFilterFn;
+        (_5 = statefulTableOptions.onGlobalFilterFnChange) !== null && _5 !== void 0 ? _5 : setGlobalFilterFn;
     table.setHoveredColumn =
-        (_5 = statefulTableOptions.onHoveredColumnChange) !== null && _5 !== void 0 ? _5 : setHoveredColumn;
+        (_6 = statefulTableOptions.onHoveredColumnChange) !== null && _6 !== void 0 ? _6 : setHoveredColumn;
     table.setHoveredRow =
-        (_6 = statefulTableOptions.onHoveredRowChange) !== null && _6 !== void 0 ? _6 : setHoveredRow;
+        (_7 = statefulTableOptions.onHoveredRowChange) !== null && _7 !== void 0 ? _7 : setHoveredRow;
     table.setIsFullScreen =
-        (_7 = statefulTableOptions.onIsFullScreenChange) !== null && _7 !== void 0 ? _7 : setIsFullScreen;
+        (_8 = statefulTableOptions.onIsFullScreenChange) !== null && _8 !== void 0 ? _8 : setIsFullScreen;
     table.setEnableKeyboardShortcuts =
-        (_8 = statefulTableOptions.onEnableKeyboardShortcutsChange) !== null && _8 !== void 0 ? _8 : setEnableKeyboardShortcuts;
+        (_9 = statefulTableOptions.onEnableKeyboardShortcutsChange) !== null && _9 !== void 0 ? _9 : setEnableKeyboardShortcuts;
     table.setShowAlertBanner =
-        (_9 = statefulTableOptions.onShowAlertBannerChange) !== null && _9 !== void 0 ? _9 : setShowAlertBanner;
+        (_10 = statefulTableOptions.onShowAlertBannerChange) !== null && _10 !== void 0 ? _10 : setShowAlertBanner;
     table.setShowColumnFilters =
-        (_10 = statefulTableOptions.onShowColumnFiltersChange) !== null && _10 !== void 0 ? _10 : setShowColumnFilters;
+        (_11 = statefulTableOptions.onShowColumnFiltersChange) !== null && _11 !== void 0 ? _11 : setShowColumnFilters;
+    table.setShowToolBar =
+        (_12 = statefulTableOptions.onShowToolBarChange) !== null && _12 !== void 0 ? _12 : setShowToolBar;
     table.setShowGlobalFilter =
-        (_11 = statefulTableOptions.onShowGlobalFilterChange) !== null && _11 !== void 0 ? _11 : setShowGlobalFilter;
+        (_13 = statefulTableOptions.onShowGlobalFilterChange) !== null && _13 !== void 0 ? _13 : setShowGlobalFilter;
     table.setShowToolbarDropZone =
-        (_12 = statefulTableOptions.onShowToolbarDropZoneChange) !== null && _12 !== void 0 ? _12 : setShowToolbarDropZone;
+        (_14 = statefulTableOptions.onShowToolbarDropZoneChange) !== null && _14 !== void 0 ? _14 : setShowToolbarDropZone;
     useMRT_Effects(table);
     return table;
 };
@@ -2985,10 +2992,10 @@ const MRT_FilterOptionMenu = (_a) => {
 const MRT_ColumnActionMenu = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
-    const { getAllLeafColumns, getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, mrtTheme: { menuBackgroundColor }, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
+    const { getAllLeafColumns, getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, SettingsOutlinedIcon }, localization, mrtTheme: { menuBackgroundColor }, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
-    const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
+    const { columnSizing, columnVisibility, density, showColumnFilters, showToolBar } = getState();
     const columnFilterValue = column.getFilterValue();
     const [filterMenuAnchorEl, setFilterMenuAnchorEl] = react.useState(null);
     const handleClearSort = () => {
@@ -3096,6 +3103,11 @@ const MRT_ColumnActionMenu = (_a) => {
                         .length, icon: jsxRuntime.jsx(ViewColumnIcon, {}), label: (_h = localization.showAllColumns) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header)), onClick: handleShowAllColumns, table: table }, 12),
             ]
             : []),
+        // **Newly Added Menu Item for Toolbar Visibility**
+        jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(SettingsOutlinedIcon, {}), label: showToolBar ? "Hide ToolBar" : "Show ToolBar", onClick: (e) => {
+                e.stopPropagation();
+                table.setShowToolBar(!showToolBar);
+            }, table: table }, 13),
     ].filter(Boolean);
     return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
             dense: density === 'compact',
@@ -3219,19 +3231,7 @@ const MRT_FilterTextField = (_a) => {
             });
         }
         else {
-            if (textFieldProps.type === "number") {
-                // column.setFilterValue(newValue === '' ? undefined : newValue);
-                debugger;
-                if (newValue === 0) {
-                    column.setFilterValue("0");
-                }
-                else {
-                    column.setFilterValue(newValue);
-                }
-            }
-            else {
-                column.setFilterValue(newValue !== null && newValue !== void 0 ? newValue : undefined);
-            }
+            column.setFilterValue(newValue !== null && newValue !== void 0 ? newValue : undefined);
         }
     }, isTextboxFilter ? (manualFiltering ? 400 : 200) : 1), []);
     const handleChange = (newValue) => {
@@ -3269,6 +3269,8 @@ const MRT_FilterTextField = (_a) => {
             setFilterValue('');
             column.setFilterValue(undefined);
         }
+        // focus on the input after clearing the filter
+        // filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`]?.focus();
     };
     const handleClearEmptyFilterChip = () => {
         setFilterValue('');
@@ -3647,7 +3649,7 @@ const MRT_TableHeadCell = (_a) => {
     const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, 
     //  enableKeyboardShortcuts,
     enableGrouping, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
-    const { enableKeyboardShortcuts, columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
+    const { enableKeyboardShortcuts, columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, showToolBar, } = getState();
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;