@etsoo/materialui 1.5.12 → 1.5.14

package/lib/cjs/ResponsibleContainer.js

@@ -59,7 +59,7 @@ function ResponsibleContainer(props) {
         return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
     // Search data
-    const searchData = GridUtils_1.GridUtils.getSearchData(cacheKey);
+    const searchData = (0, react_2.useSearchParamsWithCache)(cacheKey);
     // On submit callback
     const onSubmit = (data, _reset) => {
         if (data == null || state.ref == null)
@@ -177,7 +177,7 @@ function ResponsibleContainer(props) {
             rect?.width == null ||
             rect.width < 20)
             return;
-        const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
+        const f = typeof fields == "function" ? fields(searchData) : fields;
         return ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop }));
     }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
     // Pull container

package/lib/cjs/SearchField.js

@@ -7,8 +7,8 @@ exports.SearchField = SearchField;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
 const react_2 = __importDefault(require("react"));
-const MUGlobal_1 = require("./MUGlobal");
 const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const MUGlobal_1 = require("./MUGlobal");
 /**
  * Search field
  * @param props Props
@@ -16,14 +16,13 @@ const TextField_1 = __importDefault(require("@mui/material/TextField"));
  */
 function SearchField(props) {
     // Destruct
-    const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, readOnly, size = MUGlobal_1.MUGlobal.searchFieldSize, variant = MUGlobal_1.MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
+    const { changeDelay, onChange, readOnly, slotProps = {}, size = MUGlobal_1.MUGlobal.searchFieldSize, variant = MUGlobal_1.MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
     // Shrink
-    InputLabelProps.shrink ??= MUGlobal_1.MUGlobal.searchFieldShrink;
-    // Read only
-    if (readOnly != null)
-        InputProps.readOnly = readOnly;
-    // Min characters
-    inputProps["data-min-chars"] = minChars;
+    const defaultProps = {
+        input: { readOnly: readOnly },
+        inputLabel: { shrink: MUGlobal_1.MUGlobal.searchFieldShrink },
+        htmlInput: { "data-min-chars": minChars }
+    };
     const isMounted = react_2.default.useRef(true);
     const delayed = onChange != null && changeDelay != null && changeDelay >= 1
         ? (0, react_1.useDelayedExecutor)(onChange, changeDelay)
@@ -52,5 +51,5 @@ function SearchField(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { slotProps: Object.assign(slotProps, defaultProps), onChange: onChangeEx, size: size, variant: variant, ...rest }));
 }

package/lib/cjs/TabBox.d.ts

@@ -2,6 +2,8 @@ import { BoxProps } from "@mui/material/Box";
 import { TabProps } from "@mui/material/Tab";
 import { TabsProps } from "@mui/material/Tabs";
 import React from "react";
+type TabBoxPanelActionType = () => void;
+type TabBoxPanelChildrenType = TabBoxPanelActionType | ((visible: boolean) => React.ReactNode) | React.ReactNode;
 /**
  * Tab with box panel props
  */
@@ -9,15 +11,11 @@ export interface TabBoxPanel extends Omit<TabProps, "value" | "children"> {
     /**
      * Children
      */
-    children?: ((visible: boolean) => React.ReactNode) | React.ReactNode;
+    children: TabBoxPanelChildrenType;
     /**
      * Panel box props
      */
     panelProps?: Omit<BoxProps, "hidden">;
-    /**
-     * Tab action
-     */
-    action?: () => void;
 }
 /**
  * Tabs with box props
@@ -58,3 +56,4 @@ export interface TabBoxPros extends BoxProps {
  * @returns Component
  */
 export declare function TabBox(props: TabBoxPros): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/cjs/TabBox.js

@@ -10,6 +10,9 @@ const Box_1 = __importDefault(require("@mui/material/Box"));
 const Tab_1 = __importDefault(require("@mui/material/Tab"));
 const Tabs_1 = __importDefault(require("@mui/material/Tabs"));
 const react_1 = __importDefault(require("react"));
+function isActionTab(children) {
+    return typeof children === "function" && children.length === 0;
+}
 /**
  * Tabs with box
  * @param props Props
@@ -28,13 +31,14 @@ function TabBox(props) {
     }, [index]);
     // Layout
     return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [inputName && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: inputName, value: value }), (0, jsx_runtime_1.jsx)(Box_1.default, { ...root, children: (0, jsx_runtime_1.jsx)(Tabs_1.default, { value: value, onChange: (event, newValue) => {
-                        if (tabs[newValue].action) {
-                            tabs[newValue].action();
+                        const { children } = tabs[newValue];
+                        if (isActionTab(children)) {
+                            children();
                         }
                         else {
                             setValue(newValue);
                             if (onChange)
                                 onChange(event, newValue);
                         }
-                    }, ...rest, children: tabs.map(({ action, children, panelProps, ...tabRest }, index) => ((0, jsx_runtime_1.jsx)(Tab_1.default, { value: index, ...tabRest }, index))) }) }), tabs.map(({ action, children, panelProps }, index) => ((0, jsx_runtime_1.jsx)(Box_1.default, { hidden: value !== index, ...tabProps, ...panelProps, children: action ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, {})) : (shared_1.Utils.getResult(children, value === index)) }, index)))] }));
+                    }, ...rest, children: tabs.map(({ children, panelProps, ...tabRest }, index) => ((0, jsx_runtime_1.jsx)(Tab_1.default, { value: index, ...tabRest }, index))) }) }), tabs.map(({ children, panelProps }, index) => ((0, jsx_runtime_1.jsx)(Box_1.default, { hidden: value !== index, ...tabProps, ...panelProps, children: isActionTab(children) ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, {})) : (shared_1.Utils.getResult(children, value === index)) }, index)))] }));
 }

package/lib/cjs/pages/DataGridPage.js

@@ -44,7 +44,7 @@ function DataGridPage(props) {
         return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
     // Search data
-    const searchData = GridUtils_1.GridUtils.getSearchData(cacheKey);
+    const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
     const onInitLoad = (ref) => {
         // Avoid repeatedly load from cache
         if (initLoadedRef.current || !cacheKey)

package/lib/cjs/pages/FixedListPage.js

@@ -50,7 +50,7 @@ function FixedListPage(props) {
         return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
     // Search data
-    const searchData = GridUtils_1.GridUtils.getSearchData(cacheKey);
+    const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
     const onInitLoad = (ref) => {
         // Avoid repeatedly load from cache
         if (initLoadedRef.current || !cacheKey)

package/lib/cjs/pages/ListPage.js

@@ -51,7 +51,7 @@ function ListPage(props) {
     const { dimensions } = (0, react_1.useDimensions)(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     // Search data
-    const searchData = GridUtils_1.GridUtils.getSearchData(cacheKey);
+    const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
     const onInitLoad = (ref) => {
         // Avoid repeatedly load from cache
         if (initLoadedRef.current || !cacheKey)

package/lib/cjs/pages/TablePage.js

@@ -47,7 +47,7 @@ function TablePage(props) {
         return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
     // Search data
-    const searchData = GridUtils_1.GridUtils.getSearchData(cacheKey);
+    const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
     // Total width
     const totalWidth = react_2.default.useMemo(() => columns.reduce((previousValue, { width, minWidth }) => {
         return previousValue + (width ?? minWidth ?? TableEx_1.TableExMinWidth);

package/lib/mjs/ResponsibleContainer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { ReactUtils, useCombinedRefs, useDimensions } from "@etsoo/react";
+import { ReactUtils, useCombinedRefs, useDimensions, useSearchParamsWithCache } from "@etsoo/react";
 import { DataGridEx } from "./DataGridEx";
 import { MUGlobal } from "./MUGlobal";
 import { PullToRefreshUI } from "./PullToRefreshUI";
@@ -53,7 +53,7 @@ export function ResponsibleContainer(props) {
         return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
     // Search data
-    const searchData = GridUtils.getSearchData(cacheKey);
+    const searchData = useSearchParamsWithCache(cacheKey);
     // On submit callback
     const onSubmit = (data, _reset) => {
         if (data == null || state.ref == null)
@@ -171,7 +171,7 @@ export function ResponsibleContainer(props) {
             rect?.width == null ||
             rect.width < 20)
             return;
-        const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
+        const f = typeof fields == "function" ? fields(searchData) : fields;
         return (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop }));
     }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
     // Pull container

package/lib/mjs/SearchField.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useDelayedExecutor } from "@etsoo/react";
 import React from "react";
-import { MUGlobal } from "./MUGlobal";
 import TextField from "@mui/material/TextField";
+import { MUGlobal } from "./MUGlobal";
 /**
  * Search field
  * @param props Props
@@ -10,14 +10,13 @@ import TextField from "@mui/material/TextField";
  */
 export function SearchField(props) {
     // Destruct
-    const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, readOnly, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
+    const { changeDelay, onChange, readOnly, slotProps = {}, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
     // Shrink
-    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
-    // Read only
-    if (readOnly != null)
-        InputProps.readOnly = readOnly;
-    // Min characters
-    inputProps["data-min-chars"] = minChars;
+    const defaultProps = {
+        input: { readOnly: readOnly },
+        inputLabel: { shrink: MUGlobal.searchFieldShrink },
+        htmlInput: { "data-min-chars": minChars }
+    };
     const isMounted = React.useRef(true);
     const delayed = onChange != null && changeDelay != null && changeDelay >= 1
         ? useDelayedExecutor(onChange, changeDelay)
@@ -46,5 +45,5 @@ export function SearchField(props) {
         };
     }, []);
     // Layout
-    return (_jsx(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
+    return (_jsx(TextField, { slotProps: Object.assign(slotProps, defaultProps), onChange: onChangeEx, size: size, variant: variant, ...rest }));
 }

package/lib/mjs/TabBox.d.ts

@@ -2,6 +2,8 @@ import { BoxProps } from "@mui/material/Box";
 import { TabProps } from "@mui/material/Tab";
 import { TabsProps } from "@mui/material/Tabs";
 import React from "react";
+type TabBoxPanelActionType = () => void;
+type TabBoxPanelChildrenType = TabBoxPanelActionType | ((visible: boolean) => React.ReactNode) | React.ReactNode;
 /**
  * Tab with box panel props
  */
@@ -9,15 +11,11 @@ export interface TabBoxPanel extends Omit<TabProps, "value" | "children"> {
     /**
      * Children
      */
-    children?: ((visible: boolean) => React.ReactNode) | React.ReactNode;
+    children: TabBoxPanelChildrenType;
     /**
      * Panel box props
      */
     panelProps?: Omit<BoxProps, "hidden">;
-    /**
-     * Tab action
-     */
-    action?: () => void;
 }
 /**
  * Tabs with box props
@@ -58,3 +56,4 @@ export interface TabBoxPros extends BoxProps {
  * @returns Component
  */
 export declare function TabBox(props: TabBoxPros): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/mjs/TabBox.js

@@ -4,6 +4,9 @@ import Box from "@mui/material/Box";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import React from "react";
+function isActionTab(children) {
+    return typeof children === "function" && children.length === 0;
+}
 /**
  * Tabs with box
  * @param props Props
@@ -22,13 +25,14 @@ export function TabBox(props) {
     }, [index]);
     // Layout
     return (_jsxs(React.Fragment, { children: [inputName && _jsx("input", { type: "hidden", name: inputName, value: value }), _jsx(Box, { ...root, children: _jsx(Tabs, { value: value, onChange: (event, newValue) => {
-                        if (tabs[newValue].action) {
-                            tabs[newValue].action();
+                        const { children } = tabs[newValue];
+                        if (isActionTab(children)) {
+                            children();
                         }
                         else {
                             setValue(newValue);
                             if (onChange)
                                 onChange(event, newValue);
                         }
-                    }, ...rest, children: tabs.map(({ action, children, panelProps, ...tabRest }, index) => (_jsx(Tab, { value: index, ...tabRest }, index))) }) }), tabs.map(({ action, children, panelProps }, index) => (_jsx(Box, { hidden: value !== index, ...tabProps, ...panelProps, children: action ? (_jsx(React.Fragment, {})) : (Utils.getResult(children, value === index)) }, index)))] }));
+                    }, ...rest, children: tabs.map(({ children, panelProps, ...tabRest }, index) => (_jsx(Tab, { value: index, ...tabRest }, index))) }) }), tabs.map(({ children, panelProps }, index) => (_jsx(Box, { hidden: value !== index, ...tabProps, ...panelProps, children: isActionTab(children) ? (_jsx(React.Fragment, {})) : (Utils.getResult(children, value === index)) }, index)))] }));
 }

package/lib/mjs/pages/DataGridPage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCombinedRefs, useDimensions } from "@etsoo/react";
+import { useCombinedRefs, useDimensions, useSearchParamsWithCache } from "@etsoo/react";
 import React from "react";
 import { DataGridEx } from "../DataGridEx";
 import { MUGlobal } from "../MUGlobal";
@@ -38,7 +38,7 @@ export function DataGridPage(props) {
         return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
     // Search data
-    const searchData = GridUtils.getSearchData(cacheKey);
+    const searchData = useSearchParamsWithCache(cacheKey);
     const onInitLoad = (ref) => {
         // Avoid repeatedly load from cache
         if (initLoadedRef.current || !cacheKey)

package/lib/mjs/pages/FixedListPage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCombinedRefs, useDimensions } from "@etsoo/react";
+import { useCombinedRefs, useDimensions, useSearchParamsWithCache } from "@etsoo/react";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { ScrollerListEx } from "../ScrollerListEx";
@@ -44,7 +44,7 @@ export function FixedListPage(props) {
         return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
     // Search data
-    const searchData = GridUtils.getSearchData(cacheKey);
+    const searchData = useSearchParamsWithCache(cacheKey);
     const onInitLoad = (ref) => {
         // Avoid repeatedly load from cache
         if (initLoadedRef.current || !cacheKey)

package/lib/mjs/pages/ListPage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCombinedRefs, useDimensions } from "@etsoo/react";
+import { useCombinedRefs, useDimensions, useSearchParamsWithCache } from "@etsoo/react";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { ScrollerListEx } from "../ScrollerListEx";
@@ -45,7 +45,7 @@ export function ListPage(props) {
     const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     // Search data
-    const searchData = GridUtils.getSearchData(cacheKey);
+    const searchData = useSearchParamsWithCache(cacheKey);
     const onInitLoad = (ref) => {
         // Avoid repeatedly load from cache
         if (initLoadedRef.current || !cacheKey)

package/lib/mjs/pages/TablePage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCombinedRefs, useDimensions } from "@etsoo/react";
+import { useCombinedRefs, useDimensions, useSearchParamsWithCache } from "@etsoo/react";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { SearchBar } from "../SearchBar";
@@ -41,7 +41,7 @@ export function TablePage(props) {
         return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
     // Search data
-    const searchData = GridUtils.getSearchData(cacheKey);
+    const searchData = useSearchParamsWithCache(cacheKey);
     // Total width
     const totalWidth = React.useMemo(() => columns.reduce((previousValue, { width, minWidth }) => {
         return previousValue + (width ?? minWidth ?? TableExMinWidth);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.12",
+  "version": "1.5.14",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -42,7 +42,7 @@
     "@emotion/styled": "^11.14.0",
     "@etsoo/appscript": "^1.6.21",
     "@etsoo/notificationbase": "^1.1.60",
-    "@etsoo/react": "^1.8.35",
+    "@etsoo/react": "^1.8.37",
     "@etsoo/shared": "^1.2.66",
     "@mui/icons-material": "^7.0.1",
     "@mui/material": "^7.0.1",

package/src/ResponsibleContainer.tsx

@@ -15,7 +15,8 @@ import {
   ReactUtils,
   ScrollerListRef,
   useCombinedRefs,
-  useDimensions
+  useDimensions,
+  useSearchParamsWithCache
 } from "@etsoo/react";
 import { DataGridEx, DataGridExProps } from "./DataGridEx";
 import { MUGlobal } from "./MUGlobal";
@@ -252,7 +253,7 @@ export function ResponsibleContainer<T extends object, F>(
   };
 
   // Search data
-  const searchData = GridUtils.getSearchData(cacheKey);
+  const searchData = useSearchParamsWithCache(cacheKey);
 
   // On submit callback
   const onSubmit = (data: FormData, _reset: boolean) => {
@@ -437,7 +438,7 @@ export function ResponsibleContainer<T extends object, F>(
     )
       return;
 
-    const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
+    const f = typeof fields == "function" ? fields(searchData) : fields;
 
     return (
       <SearchBar

package/src/SearchField.tsx

@@ -1,7 +1,7 @@
 import { useDelayedExecutor } from "@etsoo/react";
 import React from "react";
-import { MUGlobal } from "./MUGlobal";
 import TextField, { TextFieldProps } from "@mui/material/TextField";
+import { MUGlobal } from "./MUGlobal";
 
 /**
  * Search field props
@@ -32,11 +32,9 @@ export function SearchField(props: SearchFieldProps) {
   // Destruct
   const {
     changeDelay,
-    InputLabelProps = {},
-    InputProps = {},
-    inputProps = {},
     onChange,
     readOnly,
+    slotProps = {},
     size = MUGlobal.searchFieldSize,
     variant = MUGlobal.searchFieldVariant,
     minChars = 0,
@@ -44,13 +42,11 @@ export function SearchField(props: SearchFieldProps) {
   } = props;
 
   // Shrink
-  InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
-
-  // Read only
-  if (readOnly != null) InputProps.readOnly = readOnly;
-
-  // Min characters
-  inputProps["data-min-chars"] = minChars;
+  const defaultProps: typeof slotProps = {
+    input: { readOnly: readOnly },
+    inputLabel: { shrink: MUGlobal.searchFieldShrink },
+    htmlInput: { "data-min-chars": minChars }
+  };
 
   const isMounted = React.useRef(true);
   const delayed =
@@ -90,9 +86,7 @@ export function SearchField(props: SearchFieldProps) {
   // Layout
   return (
     <TextField
-      InputLabelProps={InputLabelProps}
-      InputProps={InputProps}
-      inputProps={inputProps}
+      slotProps={Object.assign(slotProps, defaultProps)}
       onChange={onChangeEx}
       size={size}
       variant={variant}

package/src/TabBox.tsx

@@ -4,6 +4,19 @@ import Tab, { TabProps } from "@mui/material/Tab";
 import Tabs, { TabsProps } from "@mui/material/Tabs";
 import React from "react";
 
+type TabBoxPanelActionType = () => void;
+
+type TabBoxPanelChildrenType =
+  | TabBoxPanelActionType
+  | ((visible: boolean) => React.ReactNode)
+  | React.ReactNode;
+
+function isActionTab(
+  children?: TabBoxPanelChildrenType
+): children is TabBoxPanelActionType {
+  return typeof children === "function" && children.length === 0;
+}
+
 /**
  * Tab with box panel props
  */
@@ -11,17 +24,12 @@ export interface TabBoxPanel extends Omit<TabProps, "value" | "children"> {
   /**
    * Children
    */
-  children?: ((visible: boolean) => React.ReactNode) | React.ReactNode;
+  children: TabBoxPanelChildrenType;
 
   /**
    * Panel box props
    */
   panelProps?: Omit<BoxProps, "hidden">;
-
-  /**
-   * Tab action
-   */
-  action?: () => void;
 }
 
 /**
@@ -98,8 +106,9 @@ export function TabBox(props: TabBoxPros) {
         <Tabs
           value={value}
           onChange={(event, newValue) => {
-            if (tabs[newValue].action) {
-              tabs[newValue].action();
+            const { children } = tabs[newValue];
+            if (isActionTab(children)) {
+              children();
             } else {
               setValue(newValue);
               if (onChange) onChange(event, newValue);
@@ -107,14 +116,14 @@ export function TabBox(props: TabBoxPros) {
           }}
           {...rest}
         >
-          {tabs.map(({ action, children, panelProps, ...tabRest }, index) => (
+          {tabs.map(({ children, panelProps, ...tabRest }, index) => (
             <Tab key={index} value={index} {...tabRest} />
           ))}
         </Tabs>
       </Box>
-      {tabs.map(({ action, children, panelProps }, index) => (
+      {tabs.map(({ children, panelProps }, index) => (
         <Box key={index} hidden={value !== index} {...tabProps} {...panelProps}>
-          {action ? (
+          {isActionTab(children) ? (
             <React.Fragment />
           ) : (
             Utils.getResult(children, value === index)

package/src/pages/DataGridPage.tsx

@@ -5,7 +5,8 @@ import {
   ScrollerGridForwardRef,
   VariableSizeGrid,
   useCombinedRefs,
-  useDimensions
+  useDimensions,
+  useSearchParamsWithCache
 } from "@etsoo/react";
 import React from "react";
 import { DataGridEx } from "../DataGridEx";
@@ -84,7 +85,7 @@ export function DataGridPage<T extends object, F>(
   };
 
   // Search data
-  const searchData = GridUtils.getSearchData(cacheKey);
+  const searchData = useSearchParamsWithCache(cacheKey);
 
   const onInitLoad = (
     ref: VariableSizeGrid<T>

package/src/pages/FixedListPage.tsx

@@ -5,7 +5,8 @@ import {
   ScrollerListForwardRef,
   ScrollerListRef,
   useCombinedRefs,
-  useDimensions
+  useDimensions,
+  useSearchParamsWithCache
 } from "@etsoo/react";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
@@ -94,7 +95,7 @@ export function FixedListPage<T extends object, F>(
   };
 
   // Search data
-  const searchData = GridUtils.getSearchData(cacheKey);
+  const searchData = useSearchParamsWithCache(cacheKey);
 
   const onInitLoad = (
     ref: ScrollerListRef

package/src/pages/ListPage.tsx

@@ -5,7 +5,8 @@ import {
   ScrollerListForwardRef,
   ScrollerListRef,
   useCombinedRefs,
-  useDimensions
+  useDimensions,
+  useSearchParamsWithCache
 } from "@etsoo/react";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
@@ -86,7 +87,7 @@ export function ListPage<T extends object, F>(props: ListPageProps<T, F>) {
   const rect = dimensions[0][2];
 
   // Search data
-  const searchData = GridUtils.getSearchData(cacheKey);
+  const searchData = useSearchParamsWithCache(cacheKey);
 
   const onInitLoad = (
     ref: ScrollerListRef

package/src/pages/TablePage.tsx

@@ -1,7 +1,8 @@
 import {
   GridLoadDataProps,
   useCombinedRefs,
-  useDimensions
+  useDimensions,
+  useSearchParamsWithCache
 } from "@etsoo/react";
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
 import React from "react";
@@ -93,7 +94,7 @@ export function TablePage<
   };
 
   // Search data
-  const searchData = GridUtils.getSearchData(cacheKey);
+  const searchData = useSearchParamsWithCache(cacheKey);
 
   // Total width
   const totalWidth = React.useMemo(