@etsoo/materialui 1.5.27 → 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/cjs/pages/CommonPage.d.ts

@@ -29,6 +29,10 @@ export interface CommonPageProps extends Omit<ContainerProps, "id"> {
      * Add panel to the Fab
      */
     fabPanel?: boolean;
+    /**
+     * Fab refresh button is supported or not
+     */
+    fabRefresh?: boolean;
     /**
      * Fab lays in the top
      */

package/lib/cjs/pages/CommonPage.js

@@ -25,7 +25,7 @@ function CommonPage(props) {
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
     // Destruct
-    const { children, disableGutters = true, fabTop, fabButtons, fabColumnDirection, fabPanel, fabPaddingAdjust = 1.5, fabSize = "small", maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal_1.MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = {}, ...rest } = props;
+    const { children, disableGutters = true, fabTop, fabButtons, fabColumnDirection, fabPanel, fabPaddingAdjust = 1.5, fabSize = "small", maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal_1.MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, fabRefresh = onRefresh != null, sx = {}, ...rest } = props;
     // Fab padding
     const fabPadding = MUGlobal_1.MUGlobal.increase(MUGlobal_1.MUGlobal.pagePaddings, fabPaddingAdjust);
     if (typeof sx === "object" && sx != null && !Reflect.has(sx, "padding")) {
@@ -74,5 +74,5 @@ function CommonPage(props) {
                                         bottom: distance,
                                         right: distance
                                     })
-                        }, columnDirection: fabColumnDirection, fabPanel: fabPanel, children: [scrollContainer && ((0, jsx_runtime_1.jsx)(ScrollTopFab_1.ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })), fabButtons, onRefresh != null && ((0, jsx_runtime_1.jsx)(Fab_1.default, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } }, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) })), (0, jsx_runtime_1.jsx)(MoreFab_1.MoreFab, { size: fabSize, title: labels.more, actions: moreActions }), supportBack && (0, jsx_runtime_1.jsx)(BackButton_1.BackButton, { title: labels.back, size: fabSize })] }), children] })] }));
+                        }, columnDirection: fabColumnDirection, fabPanel: fabPanel, children: [scrollContainer && ((0, jsx_runtime_1.jsx)(ScrollTopFab_1.ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })), fabButtons, fabRefresh && ((0, jsx_runtime_1.jsx)(Fab_1.default, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } }, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) })), (0, jsx_runtime_1.jsx)(MoreFab_1.MoreFab, { size: fabSize, title: labels.more, actions: moreActions }), supportBack && (0, jsx_runtime_1.jsx)(BackButton_1.BackButton, { title: labels.back, size: fabSize })] }), children] })] }));
 }

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/lib/mjs/pages/CommonPage.d.ts

@@ -29,6 +29,10 @@ export interface CommonPageProps extends Omit<ContainerProps, "id"> {
      * Add panel to the Fab
      */
     fabPanel?: boolean;
+    /**
+     * Fab refresh button is supported or not
+     */
+    fabRefresh?: boolean;
     /**
      * Fab lays in the top
      */

package/lib/mjs/pages/CommonPage.js

@@ -19,7 +19,7 @@ export function CommonPage(props) {
     // Global app
     const app = useAppContext();
     // Destruct
-    const { children, disableGutters = true, fabTop, fabButtons, fabColumnDirection, fabPanel, fabPaddingAdjust = 1.5, fabSize = "small", maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = {}, ...rest } = props;
+    const { children, disableGutters = true, fabTop, fabButtons, fabColumnDirection, fabPanel, fabPaddingAdjust = 1.5, fabSize = "small", maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, fabRefresh = onRefresh != null, sx = {}, ...rest } = props;
     // Fab padding
     const fabPadding = MUGlobal.increase(MUGlobal.pagePaddings, fabPaddingAdjust);
     if (typeof sx === "object" && sx != null && !Reflect.has(sx, "padding")) {
@@ -68,5 +68,5 @@ export function CommonPage(props) {
                                         bottom: distance,
                                         right: distance
                                     })
-                        }, columnDirection: fabColumnDirection, fabPanel: fabPanel, children: [scrollContainer && (_jsx(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })), fabButtons, onRefresh != null && (_jsx(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } }, children: _jsx(RefreshIcon, {}) })), _jsx(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }), supportBack && _jsx(BackButton, { title: labels.back, size: fabSize })] }), children] })] }));
+                        }, columnDirection: fabColumnDirection, fabPanel: fabPanel, children: [scrollContainer && (_jsx(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })), fabButtons, fabRefresh && (_jsx(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } }, children: _jsx(RefreshIcon, {}) })), _jsx(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }), supportBack && _jsx(BackButton, { title: labels.back, size: fabSize })] }), children] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.27",
+  "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();

package/src/pages/CommonPage.tsx

@@ -44,6 +44,11 @@ export interface CommonPageProps extends Omit<ContainerProps, "id"> {
    */
   fabPanel?: boolean;
 
+  /**
+   * Fab refresh button is supported or not
+   */
+  fabRefresh?: boolean;
+
   /**
    * Fab lays in the top
    */
@@ -117,6 +122,7 @@ export function CommonPage(props: CommonPageProps) {
     scrollContainer,
     supportBack = false,
     targetFields,
+    fabRefresh = onRefresh != null,
     sx = {},
     ...rest
   } = props;
@@ -208,7 +214,7 @@ export function CommonPage(props: CommonPageProps) {
             />
           )}
           {fabButtons}
-          {onRefresh != null && (
+          {fabRefresh && (
             <Fab
               title={labels.refresh}
               size={fabSize}