@etsoo/materialui 1.5.28 → 1.5.29

package/lib/cjs/TabBox.d.ts

@@ -29,6 +29,11 @@ export interface TabBoxProps extends Omit<TabsProps, "value"> {
      * Current index
      */
     index?: number;
+    /**
+     * Index field of the search params
+     * @default 'index'
+     */
+    indexField?: string;
     /**
      * Add a hidden input and its name
      */

package/lib/cjs/TabBox.js

@@ -5,11 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBox = TabBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
 const shared_1 = require("@etsoo/shared");
 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"));
+const react_2 = __importDefault(require("react"));
 function isActionTab(children) {
     return typeof children === "function" && children.length === 0;
 }
@@ -20,16 +21,26 @@ function isActionTab(children) {
  */
 function TabBox(props) {
     // Destruct
-    const { index, inputName, root, defaultIndex = 0, onChange, tabProps, tabs, ...rest } = props;
+    const { index, indexField = "index", inputName, root, defaultIndex = 0, onChange, tabProps, tabs, ...rest } = props;
     // State
-    const [value, setValue] = react_1.default.useState(defaultIndex);
-    react_1.default.useEffect(() => {
+    const [params, setSearchParams] = (0, react_1.useSearchParamsEx1)({
+        [indexField]: "number"
+    });
+    const [value, setValue] = react_2.default.useState(params[indexField] ?? defaultIndex);
+    react_2.default.useEffect(() => {
         if (index == null)
             return;
         setValue(index);
     }, [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) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.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) => {
+                        setSearchParams((prev) => {
+                            if (newValue == defaultIndex)
+                                prev.delete(indexField);
+                            else
+                                prev.set(indexField, newValue);
+                            return prev;
+                        });
                         const { children } = tabs[newValue];
                         if (isActionTab(children)) {
                             children();
@@ -39,5 +50,5 @@ function TabBox(props) {
                             if (onChange)
                                 onChange(event, newValue);
                         }
-                    }, ...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)))] }));
+                    }, ...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_2.default.Fragment, {})) : (shared_1.Utils.getResult(children, value === index)) }, index)))] }));
 }

package/lib/mjs/TabBox.d.ts

@@ -29,6 +29,11 @@ export interface TabBoxProps extends Omit<TabsProps, "value"> {
      * Current index
      */
     index?: number;
+    /**
+     * Index field of the search params
+     * @default 'index'
+     */
+    indexField?: string;
     /**
      * Add a hidden input and its name
      */

package/lib/mjs/TabBox.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSearchParamsEx1 } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
 import Box from "@mui/material/Box";
 import Tab from "@mui/material/Tab";
@@ -14,9 +15,12 @@ function isActionTab(children) {
  */
 export function TabBox(props) {
     // Destruct
-    const { index, inputName, root, defaultIndex = 0, onChange, tabProps, tabs, ...rest } = props;
+    const { index, indexField = "index", inputName, root, defaultIndex = 0, onChange, tabProps, tabs, ...rest } = props;
     // State
-    const [value, setValue] = React.useState(defaultIndex);
+    const [params, setSearchParams] = useSearchParamsEx1({
+        [indexField]: "number"
+    });
+    const [value, setValue] = React.useState(params[indexField] ?? defaultIndex);
     React.useEffect(() => {
         if (index == null)
             return;
@@ -24,6 +28,13 @@ 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) => {
+                        setSearchParams((prev) => {
+                            if (newValue == defaultIndex)
+                                prev.delete(indexField);
+                            else
+                                prev.set(indexField, newValue);
+                            return prev;
+                        });
                         const { children } = tabs[newValue];
                         if (isActionTab(children)) {
                             children();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.28",
+  "version": "1.5.29",
   "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.22",
     "@etsoo/notificationbase": "^1.1.60",
-    "@etsoo/react": "^1.8.38",
+    "@etsoo/react": "^1.8.39",
     "@etsoo/shared": "^1.2.68",
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",

package/src/TabBox.tsx

@@ -1,3 +1,4 @@
+import { useSearchParamsEx1 } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
 import Box, { BoxProps } from "@mui/material/Box";
 import Tab, { TabProps } from "@mui/material/Tab";
@@ -46,6 +47,12 @@ export interface TabBoxProps extends Omit<TabsProps, "value"> {
    */
   index?: number;
 
+  /**
+   * Index field of the search params
+   * @default 'index'
+   */
+  indexField?: string;
+
   /**
    * Add a hidden input and its name
    */
@@ -76,6 +83,7 @@ export function TabBox(props: TabBoxProps) {
   // Destruct
   const {
     index,
+    indexField = "index",
     inputName,
     root,
     defaultIndex = 0,
@@ -86,7 +94,10 @@ export function TabBox(props: TabBoxProps) {
   } = props;
 
   // State
-  const [value, setValue] = React.useState(defaultIndex);
+  const [params, setSearchParams] = useSearchParamsEx1({
+    [indexField]: "number"
+  });
+  const [value, setValue] = React.useState(params[indexField] ?? defaultIndex);
 
   React.useEffect(() => {
     if (index == null) return;
@@ -101,6 +112,11 @@ export function TabBox(props: TabBoxProps) {
         <Tabs
           value={value}
           onChange={(event, newValue) => {
+            setSearchParams((prev) => {
+              if (newValue == defaultIndex) prev.delete(indexField);
+              else prev.set(indexField, newValue);
+              return prev;
+            });
             const { children } = tabs[newValue];
             if (isActionTab(children)) {
               children();