material-react-table-narender 2.13.25 → 2.13.29

package/dist/index.js

@@ -527,7 +527,7 @@ const openEditingCell = ({ cell, table, }) => {
 };
 const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement, event, header, parentElement, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    debugger;
+    //debugger;
     const { getState, setEnableKeyboardShortcuts, } = table;
     const { enableKeyboardShortcuts } = getState();
     if (event.altKey && event.key.toLocaleLowerCase() === 'n') {
@@ -623,7 +623,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
             header.column.toggleSorting();
         }
         else if ("Enter" === event.key) {
-            debugger;
+            //debugger;
             event.preventDefault();
             const input = currentCell.querySelector('input');
             const select = currentCell.querySelector('select');
@@ -664,7 +664,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
     ].includes(event.key)) {
         event.preventDefault();
         // if (['ArrowDown'].includes(event.key)) {
-        //     debugger; // This will pause execution for debugging purposes
+        //     //debugger; // This will pause execution for debugging purposes
         //     // Select the input element within the MUI Autocomplete component
         //     const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]');
         //     // Check if the current cell is an MUI Autocomplete
@@ -1784,7 +1784,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 +1836,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 +1858,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 +1913,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 +1929,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 +1939,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;
 };
@@ -2423,7 +2427,7 @@ 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);
-        debugger;
+        //debugger;
         cellKeyboardShortcuts({
             cell,
             cellValue: cell.getValue(),
@@ -2988,7 +2992,7 @@ const MRT_ColumnActionMenu = (_a) => {
     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 { 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 +3100,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(ViewColumnIcon, {}), 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',
@@ -3257,6 +3266,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('');
@@ -3628,6 +3639,24 @@ const MRT_TableHeadCellSortLabel = (_a) => {
                     }, flex: '0 0', opacity: isSorted ? 1 : 0.3, transition: 'all 150ms ease-in-out', width: '3ch' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))) })) }) }));
 };
 
+const MRT_TableHeadCellToolBar = (_a) => {
+    var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
+    const { getState, options: { icons: { ArrowDownwardIcon, SyncAltIcon }, localization, }, } = table;
+    const { isLoading, showSkeletons, showToolBar } = getState();
+    const showToolBarTooltip = isLoading || showSkeletons
+        ? ''
+        : showToolBar
+            ? "Hide ToolBar"
+            : "Show ToolBar";
+    return (jsxRuntime.jsx(Tooltip__default["default"], { placement: "top", title: showToolBarTooltip, children: jsxRuntime.jsx(material.IconButton, { "aria-label": showToolBarTooltip, size: "small", sx: (theme) => (Object.assign({ '&:hover': {
+                    backgroundColor: 'transparent',
+                    opacity: 1,
+                }, cursor: 'pointer', opacity: 1, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), onClick: (e) => {
+                e.stopPropagation();
+                table.setShowToolBar(!showToolBar);
+            }, children: jsxRuntime.jsx(SyncAltIcon, {}) }) }));
+};
+
 const MRT_TableHeadCell = (_a) => {
     var _b, _c, _d, _f, _g, _h;
     var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
@@ -3635,7 +3664,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;
@@ -3795,7 +3824,7 @@ const MRT_TableHeadCell = (_a) => {
                                         whiteSpace: ((_h = (_g = columnDef.header) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) < 20
                                             ? 'nowrap'
                                             : 'normal',
-                                    }, children: HeaderElement }), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsxRuntime.jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Actions", sx: {
+                                    }, children: HeaderElement }), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsxRuntime.jsx(MRT_TableHeadCellSortLabel, { header: header, table: table })), jsxRuntime.jsx(MRT_TableHeadCellToolBar, { header: header, table: table })] }), columnDefType !== 'group' && (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Actions", sx: {
                                 whiteSpace: 'nowrap',
                             }, children: [showDragHandle && (jsxRuntime.jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
                                         current: tableHeadCellRefs.current[column.id],
@@ -4530,7 +4559,7 @@ const MRT_TablePaper = (_a) => {
 const isTableInstanceProp = (props) => props.table !== undefined;
 const MaterialReactTable = (props) => {
     let table;
-    debugger;
+    //debugger;
     if (isTableInstanceProp(props)) {
         table = props.table;
     }