@etsoo/materialui 1.4.4 → 1.4.6

package/lib/AddresSelector.d.ts

@@ -1,6 +1,7 @@
 import { AddressApi, AddressCity, AddressDistrict, AddressRegionDb, AddressState } from "@etsoo/appscript";
+import { GridSize } from "@mui/material";
 import React from "react";
-import { RegularBreakpoints } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 /**
  * Address field
  */
@@ -23,7 +24,7 @@ export type AddressSelectorProps = {
     /**
      * Break points
      */
-    breakPoints?: RegularBreakpoints;
+    breakPoints?: ResponsiveStyleValue<GridSize>;
     /**
      * City
      */

package/lib/AddresSelector.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormLabel, Grid } from "@mui/material";
+import { FormLabel, Grid2 } from "@mui/material";
 import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { ComboBox } from "./ComboBox";
@@ -123,12 +123,12 @@ export function AddressSelector(props) {
         }
     };
     // Layout
-    return (_jsxs(React.Fragment, { children: [label && (_jsx(Grid, { item: true, xs: 12, children: _jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), !hideRegion && (_jsx(Grid, { item: true, ...breakPoints, children: _jsx(Tiplist, { label: regionLabel, name: AddressField.Region, search: search, fullWidth: true, idValue: regionState, loadData: (keyword, id, items) => api.getRegions({
+    return (_jsxs(React.Fragment, { children: [label && (_jsx(Grid2, { size: { xs: 12 }, children: _jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), !hideRegion && (_jsx(Grid2, { size: breakPoints, children: _jsx(Tiplist, { label: regionLabel, name: AddressField.Region, search: search, fullWidth: true, idValue: regionState, loadData: (keyword, id, items) => api.getRegions({
                         keyword,
                         id,
                         items,
                         favoredIds: favoredIds == null
                             ? undefined
                             : favoredIds(AddressField.Region)
-                    }), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (_event, value) => handleChange([AddressField.Region, value]) }) })), _jsx(Grid, { item: true, ...breakPoints, children: _jsx(ComboBox, { name: AddressField.State, label: stateLabel, search: search, fullWidth: true, idValue: stateState, options: states, inputRequired: required, inputError: hideRegion ? error : undefined, inputHelperText: hideRegion ? helperText : undefined, onChange: (_event, value) => handleChange([AddressField.State, value]) }) }), _jsx(Grid, { item: true, ...breakPoints, children: _jsx(ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange([AddressField.City, value]) }) }), _jsx(Grid, { item: true, ...breakPoints, children: _jsx(ComboBox, { name: AddressField.District, label: districtLabel, search: search, fullWidth: true, idValue: districtState, options: districts, onChange: (_event, value) => handleChange([AddressField.District, value]) }) })] }));
+                    }), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (_event, value) => handleChange([AddressField.Region, value]) }) })), _jsx(Grid2, { size: breakPoints, children: _jsx(ComboBox, { name: AddressField.State, label: stateLabel, search: search, fullWidth: true, idValue: stateState, options: states, inputRequired: required, inputError: hideRegion ? error : undefined, inputHelperText: hideRegion ? helperText : undefined, onChange: (_event, value) => handleChange([AddressField.State, value]) }) }), _jsx(Grid2, { size: breakPoints, children: _jsx(ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange([AddressField.City, value]) }) }), _jsx(Grid2, { size: breakPoints, children: _jsx(ComboBox, { name: AddressField.District, label: districtLabel, search: search, fullWidth: true, idValue: districtState, options: districts, onChange: (_event, value) => handleChange([AddressField.District, value]) }) })] }));
 }

package/lib/HiSelector.d.ts

@@ -1,7 +1,7 @@
 import { DataTypes, IdDefaultType, LabelDefaultType } from "@etsoo/shared";
-import { SelectChangeEvent } from "@mui/material";
+import { GridSize, SelectChangeEvent } from "@mui/material";
 import React from "react";
-import { RegularBreakpoints } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 /**
  * Hierarchy selector props
  */
@@ -9,7 +9,7 @@ export type HiSelectorProps<T extends object, D extends DataTypes.Keys<T> = IdDe
     /**
      * Break points
      */
-    breakPoints?: RegularBreakpoints;
+    breakPoints?: ResponsiveStyleValue<GridSize>;
     /**
      * Id field
      */

package/lib/HiSelector.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormLabel, Grid } from "@mui/material";
+import { FormLabel, Grid2 } from "@mui/material";
 import React from "react";
 import { SelectEx } from "./SelectEx";
 /**
@@ -39,5 +39,5 @@ export function HiSelector(props) {
     React.useEffect(() => {
         updateValue(currentValue);
     }, [currentValue]);
-    return (_jsxs(React.Fragment, { children: [label && (_jsx(Grid, { item: true, xs: 12, children: _jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), _jsx("input", { type: "hidden", name: name, value: `${currentValue ?? ""}` }), _jsx(Grid, { item: true, ...breakPoints, children: _jsx(SelectEx, { idField: idField, label: labels[0], labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, required: required, error: error, helperText: helperText, variant: variant }) }), localValues[0] != null && (_jsx(Grid, { item: true, ...breakPoints, children: _jsx(SelectEx, { idField: idField, label: labels[1], labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange, variant: variant }, `${localValues[0]}`) })), localValues[1] != null && (_jsx(Grid, { item: true, ...breakPoints, children: _jsx(SelectEx, { idField: idField, label: labels[2], labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange, variant: variant }, `${localValues[1]}`) })), localValues[2] != null && (_jsx(Grid, { item: true, ...breakPoints, children: _jsx(SelectEx, { idField: idField, label: labels[3], labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange, variant: variant }, `${localValues[2]}`) }))] }));
+    return (_jsxs(React.Fragment, { children: [label && (_jsx(Grid2, { size: { xs: 12 }, children: _jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), _jsx("input", { type: "hidden", name: name, value: `${currentValue ?? ""}` }), _jsx(Grid2, { size: breakPoints, children: _jsx(SelectEx, { idField: idField, label: labels[0], labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, required: required, error: error, helperText: helperText, variant: variant }) }), localValues[0] != null && (_jsx(Grid2, { size: breakPoints, children: _jsx(SelectEx, { idField: idField, label: labels[1], labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange, variant: variant }, `${localValues[0]}`) })), localValues[1] != null && (_jsx(Grid2, { size: breakPoints, children: _jsx(SelectEx, { idField: idField, label: labels[2], labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange, variant: variant }, `${localValues[1]}`) })), localValues[2] != null && (_jsx(Grid2, { size: breakPoints, children: _jsx(SelectEx, { idField: idField, label: labels[3], labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange, variant: variant }, `${localValues[2]}`) }))] }));
 }

package/lib/HiSelectorTL.d.ts

@@ -1,7 +1,7 @@
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
-import { AutocompleteChangeReason } from "@mui/material";
+import { AutocompleteChangeReason, GridSize } from "@mui/material";
 import React from "react";
-import { RegularBreakpoints } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 /**
  * Hierarchy tiplist selector props
  */
@@ -9,7 +9,7 @@ export type HiSelectorTLProps<T extends object, D extends DataTypes.Keys<T> = Id
     /**
      * Break points
      */
-    breakPoints?: RegularBreakpoints;
+    breakPoints?: ResponsiveStyleValue<GridSize>;
     /**
      * Id field
      */

package/lib/HiSelectorTL.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormLabel, Grid } from "@mui/material";
+import { FormLabel, Grid2 } from "@mui/material";
 import React from "react";
 import { Tiplist } from "./Tiplist";
 /**
@@ -33,5 +33,5 @@ export function HiSelectorTL(props) {
     React.useEffect(() => {
         updateValue(currentValue);
     }, [currentValue]);
-    return (_jsxs(React.Fragment, { children: [label && (_jsx(Grid, { item: true, xs: 12, children: _jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), _jsx("input", { type: "hidden", name: name, value: `${currentValue ?? ""}` }), _jsx(Grid, { item: true, ...breakPoints, children: _jsx(Tiplist, { idField: idField, label: labels[0], name: "tab1", search: search, fullWidth: true, idValue: values[0], loadData: (keyword, id, items) => loadData(keyword, id, items), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (event, value, reason) => doChange(0, event, value, reason) }) }), localValues[0] != null && (_jsx(Grid, { item: true, ...breakPoints, children: _jsx(Tiplist, { label: labels[1], idField: idField, name: "tab2", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[0]), idValue: values[1], onChange: (event, value, reason) => doChange(1, event, value, reason) }, `${localValues[0]}`) })), localValues[1] != null && (_jsx(Grid, { item: true, ...breakPoints, children: _jsx(Tiplist, { label: labels[2], idField: idField, name: "tab3", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[1]), idValue: values[2], onChange: (event, value, reason) => doChange(2, event, value, reason) }, `${localValues[1]}`) })), localValues[2] != null && (_jsx(Grid, { item: true, ...breakPoints, children: _jsx(Tiplist, { label: labels[3], idField: idField, name: "tab4", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[2]), idValue: values[3], onChange: (event, value, reason) => doChange(3, event, value, reason) }, `${localValues[2]}`) }))] }));
+    return (_jsxs(React.Fragment, { children: [label && (_jsx(Grid2, { size: { xs: 12 }, children: _jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), _jsx("input", { type: "hidden", name: name, value: `${currentValue ?? ""}` }), _jsx(Grid2, { size: breakPoints, children: _jsx(Tiplist, { idField: idField, label: labels[0], name: "tab1", search: search, fullWidth: true, idValue: values[0], loadData: (keyword, id, items) => loadData(keyword, id, items), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (event, value, reason) => doChange(0, event, value, reason) }) }), localValues[0] != null && (_jsx(Grid2, { size: breakPoints, children: _jsx(Tiplist, { label: labels[1], idField: idField, name: "tab2", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[0]), idValue: values[1], onChange: (event, value, reason) => doChange(1, event, value, reason) }, `${localValues[0]}`) })), localValues[1] != null && (_jsx(Grid2, { size: breakPoints, children: _jsx(Tiplist, { label: labels[2], idField: idField, name: "tab3", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[1]), idValue: values[2], onChange: (event, value, reason) => doChange(2, event, value, reason) }, `${localValues[1]}`) })), localValues[2] != null && (_jsx(Grid2, { size: breakPoints, children: _jsx(Tiplist, { label: labels[3], idField: idField, name: "tab4", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[2]), idValue: values[3], onChange: (event, value, reason) => doChange(3, event, value, reason) }, `${localValues[2]}`) }))] }));
 }

package/lib/ResponsiveStyleValue.d.ts

@@ -0,0 +1,7 @@
+import { Breakpoint } from "@mui/material";
+/**
+ * Responsive style value
+ */
+export type ResponsiveStyleValue<T> = T | Array<T | null> | {
+    [key in Breakpoint]?: T | null;
+};

package/lib/ResponsiveStyleValue.js

@@ -0,0 +1 @@
+export {};

package/lib/app/CommonApp.d.ts

@@ -1,4 +1,4 @@
-import { IAppSettings, IUser, RefreshTokenProps } from "@etsoo/appscript";
+import { AppLoginParams, IAppSettings, IUser } from "@etsoo/appscript";
 import { IPageData } from "@etsoo/react";
 import { ReactApp } from "./ReactApp";
 /**
@@ -15,15 +15,10 @@ export declare abstract class CommonApp<U extends IUser = IUser, P extends IPage
      * @returns Fields
      */
     protected initCallEncryptedUpdateFields(): string[];
-    /**
-     * Refresh token
-     * @param props Props
-     */
-    refreshToken(props?: RefreshTokenProps): Promise<boolean>;
     /**
      * Try login
      * @param showLoading Show loading bar or not
      * @returns Result
      */
-    tryLogin(showLoading?: boolean): Promise<boolean>;
+    tryLogin(params?: AppLoginParams): Promise<void>;
 }

package/lib/app/CommonApp.js

@@ -20,82 +20,25 @@ export class CommonApp extends ReactApp {
         fields.push(CoreConstants.FieldUserIdSaved);
         return fields;
     }
-    /**
-     * Refresh token
-     * @param props Props
-     */
-    async refreshToken(props) {
-        // Destruct
-        const { callback, showLoading = false } = props ?? {};
-        // Token
-        const token = this.getCacheToken();
-        if (token == null || token === "") {
-            if (callback)
-                callback(false);
-            return false;
-        }
-        // Reqest data
-        const rq = {
-            deviceId: this.deviceId
-        };
-        // Payload
-        const payload = {
-            // No loading bar needed to avoid screen flicks
-            showLoading,
-            config: { headers: { [CoreConstants.TokenHeaderRefresh]: token } },
-            onError: (error) => {
-                if (callback)
-                    callback(error);
-                // Prevent further processing
-                return false;
-            }
-        };
-        // Success callback
-        const success = (result, failCallback) => {
-            // Token
-            const refreshToken = this.getResponseToken(payload.response);
-            if (refreshToken == null || result.data == null) {
-                if (failCallback)
-                    failCallback(this.get("noData"));
-                return false;
-            }
-            // Keep
-            const keep = this.storage.getData(CoreConstants.FieldLoginKeep, false);
-            // User login
-            this.userLogin(result.data, refreshToken, keep);
-            // Callback
-            if (failCallback)
-                failCallback(true);
-            return true;
-        };
-        // Call API
-        const result = await this.api.put("Auth/RefreshToken", rq, payload);
-        if (result == null)
-            return false;
-        if (!result.ok) {
-            // Remove the wrong token
-            this.clearCacheToken();
-            // Callback
-            if (callback)
-                callback(result);
-            return false;
-        }
-        return success(result, callback);
-    }
     /**
      * Try login
      * @param showLoading Show loading bar or not
      * @returns Result
      */
-    async tryLogin(showLoading) {
-        // Reset user state
-        const result = await super.tryLogin(showLoading);
-        if (!result)
-            return false;
+    async tryLogin(params) {
+        // Check status
+        if (this.isTryingLogin)
+            return;
+        this.isTryingLogin = true;
         // Refresh token
-        return await this.refreshToken({
-            callback: (result) => this.doRefreshTokenResult(result),
-            showLoading
+        await this.refreshToken({
+            showLoading: params?.showLoading
+        }, (result) => {
+            if (result) {
+            }
+            else {
+                this.toLoginPage(params);
+            }
         });
     }
 }

package/lib/app/ReactApp.d.ts

@@ -211,10 +211,9 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * User login extended
      * @param user New user
      * @param refreshToken Refresh token
-     * @param keep Keep in local storage or not
      * @param dispatch User state dispatch
      */
-    userLogin(user: D, refreshToken: string, keep?: boolean, dispatch?: boolean): void;
+    userLogin(user: D, refreshToken: string, dispatch?: boolean): void;
     /**
      * User logout
      * @param clearToken Clear refresh token or not

package/lib/app/ReactApp.js

@@ -257,12 +257,11 @@ export class ReactApp extends CoreApp {
      * User login extended
      * @param user New user
      * @param refreshToken Refresh token
-     * @param keep Keep in local storage or not
      * @param dispatch User state dispatch
      */
-    userLogin(user, refreshToken, keep, dispatch) {
+    userLogin(user, refreshToken, dispatch) {
         // Super call, set token
-        super.userLogin(user, refreshToken, keep);
+        super.userLogin(user, refreshToken);
         // Dispatch action
         if (this.userStateDispatch != null && dispatch !== false)
             this.userStateDispatch({

package/lib/app/ServiceApp.d.ts

@@ -1,4 +1,4 @@
-import { ApiRefreshTokenDto, ExternalEndpoint, IApi } from "@etsoo/appscript";
+import { ApiRefreshTokenDto, AppLoginParams, ExternalEndpoint, IApi } from "@etsoo/appscript";
 import { IServiceApp } from "./IServiceApp";
 import { IServiceAppSettings } from "./IServiceAppSettings";
 import { IServicePageData } from "./IServicePage";
@@ -36,18 +36,16 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends
     loadCore(): void;
     /**
      * Go to the login page
-     * @param tryLogin Try to login again
-     * @param removeUrl Remove current URL for reuse
+     * @params Login parameters
      */
-    toLoginPage(tryLogin?: boolean, removeUrl?: boolean): void;
+    toLoginPage(params?: AppLoginParams): void;
     /**
      * User login extended
      * @param user New user
      * @param refreshToken Refresh token
-     * @param keep Keep in local storage or not
      * @param dispatch User state dispatch
      */
-    userLogin(user: U, refreshToken: string, keep?: boolean, dispatch?: boolean): void;
+    userLogin(user: U, refreshToken: string, dispatch?: boolean): void;
     /**
      *
      * @param user Current user
@@ -55,5 +53,5 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends
      * @param keep Keep in local storage or not
      * @param dispatch User state dispatch
      */
-    userLoginEx(user: U & ServiceUserToken, core?: ApiRefreshTokenDto, keep?: boolean, dispatch?: boolean): void;
+    userLoginEx(user: U & ServiceUserToken, core?: ApiRefreshTokenDto, dispatch?: boolean): void;
 }

package/lib/app/ServiceApp.js

@@ -1,6 +1,7 @@
 import { AuthApi, BridgeUtils } from "@etsoo/appscript";
 import { ReactApp } from "./ReactApp";
 const coreName = "core";
+const coreTokenKey = "core-refresh-token";
 /**
  * Core Service App
  * Service login to core system, get the refesh token and access token
@@ -37,10 +38,11 @@ export class ServiceApp extends ReactApp {
     }
     /**
      * Go to the login page
-     * @param tryLogin Try to login again
-     * @param removeUrl Remove current URL for reuse
+     * @params Login parameters
      */
-    toLoginPage(tryLogin, removeUrl) {
+    toLoginPage(params) {
+        // Destruct
+        const { removeUrl, showLoading, ...rest } = params ?? {};
         // Cache current URL
         this.cachedUrl = removeUrl ? undefined : globalThis.location.href;
         //  Get the redirect URL
@@ -53,7 +55,7 @@ export class ServiceApp extends ReactApp {
             if (!url)
                 return;
             // Add try login flag
-            url = url.addUrlParam("tryLogin", tryLogin ?? false);
+            url = url.addUrlParams(rest);
             // Is it embeded?
             if (this.embedded) {
                 globalThis.parent.postMessage(["login", url], this.coreOrigin);
@@ -74,10 +76,9 @@ export class ServiceApp extends ReactApp {
      * User login extended
      * @param user New user
      * @param refreshToken Refresh token
-     * @param keep Keep in local storage or not
      * @param dispatch User state dispatch
      */
-    userLogin(user, refreshToken, keep, dispatch) {
+    userLogin(user, refreshToken, dispatch) {
         if (user.clientDeviceId && user.passphrase) {
             // Save the passphrase
             // Interpolated string expressions are different between TypeScript and C# for the null value
@@ -88,7 +89,7 @@ export class ServiceApp extends ReactApp {
             }
         }
         // Super call, set token
-        super.userLogin(user, refreshToken, keep, dispatch);
+        super.userLogin(user, refreshToken, dispatch);
     }
     /**
      *
@@ -97,10 +98,10 @@ export class ServiceApp extends ReactApp {
      * @param keep Keep in local storage or not
      * @param dispatch User state dispatch
      */
-    userLoginEx(user, core, keep, dispatch) {
+    userLoginEx(user, core, dispatch) {
         // User login
         const { refreshToken } = user;
-        this.userLogin(user, refreshToken, keep, dispatch);
+        this.userLogin(user, refreshToken, dispatch);
         // Core system login
         core ?? (core = {
             refreshToken,
@@ -108,6 +109,8 @@ export class ServiceApp extends ReactApp {
             tokenType: user.tokenScheme ?? "Bearer",
             expiresIn: user.seconds
         });
+        // Cache the core system refresh token
+        this.storage.setData(coreTokenKey, core.refreshToken);
         this.exchangeTokenAll(core, coreName);
     }
 }

package/lib/custom/CustomFieldUtils.d.ts

@@ -1,7 +1,7 @@
 import { CustomFieldData, CustomFieldSpace } from "@etsoo/appscript";
 import { CustomFieldReactCollection, ICustomFieldReact } from "@etsoo/react";
 import { IdType, ListType2 } from "@etsoo/shared";
-import { GridProps } from "@mui/material";
+import { GridSize } from "@mui/material";
 import { TypographyProps } from "@mui/material/Typography";
 /**
  * Custom field utilities
@@ -34,7 +34,13 @@ export declare namespace CustomFieldUtils {
      * @param space Space
      * @returns Result
      */
-    function transformSpace(space?: CustomFieldSpace): GridProps;
+    function transformSpace(space?: CustomFieldSpace): {
+        xs?: GridSize | null | undefined;
+        sm?: GridSize | null | undefined;
+        md?: GridSize | null | undefined;
+        lg?: GridSize | null | undefined;
+        xl?: GridSize | null | undefined;
+    };
     /**
      * Update ref options
      * @param fields Fields

package/lib/custom/CustomFieldUtils.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Grid, Typography } from "@mui/material";
+import { Grid2, Typography } from "@mui/material";
 import React from "react";
 import { FieldCheckbox } from "./FieldCheckbox";
 import { FieldAmountLabel } from "./FieldAmountLabel";
@@ -63,7 +63,7 @@ export var CustomFieldUtils;
                 fieldCalback(field);
             const creator = CustomFieldUtils.customFieldCreators[field.type];
             if (creator == null) {
-                return (_jsx(Grid, { item: true, ...field.gridItemProps, ...transformSpace(field.space), children: `Type ${field.type} is not supported currently` }, index));
+                return (_jsx(Grid2, { size: transformSpace(field.space), ...field.gridItemProps, children: `Type ${field.type} is not supported currently` }, index));
             }
             const Creator = creator;
             const mref = React.createRef();
@@ -77,7 +77,7 @@ export var CustomFieldUtils;
                     ui = `Duplicate custom field ${name}`;
                 }
             }
-            return (_jsx(Grid, { item: true, ...field.gridItemProps, ...transformSpace(field.space), children: ui }, name ?? index));
+            return (_jsx(Grid2, { size: transformSpace(field.space), ...field.gridItemProps, children: ui }, name ?? index));
         });
     }
     CustomFieldUtils.create = create;
@@ -97,7 +97,7 @@ export var CustomFieldUtils;
      * @returns Result
      */
     function transformSpace(space) {
-        const props = space === "full"
+        const size = space === "full"
             ? { xs: 12 }
             : space === "quater"
                 ? { sm: 12, md: 6, lg: 3 }
@@ -108,7 +108,7 @@ export var CustomFieldUtils;
                         : space === "half1"
                             ? { xs: 12, sm: 6 }
                             : { sm: 12, md: 6 };
-        return props;
+        return size;
     }
     CustomFieldUtils.transformSpace = transformSpace;
     /**

package/lib/custom/CustomFieldViewer.d.ts

@@ -1,5 +1,5 @@
 import { CustomFieldData } from "@etsoo/appscript";
-import { GridProps, TypographyProps } from "@mui/material";
+import { Grid2Props, TypographyProps } from "@mui/material";
 /**
  * Custom field viewer props
  * 自定义字段查看器属性
@@ -14,7 +14,7 @@ export type CustomFieldViewerProps = {
      * Grid props
      * 网格属性
      */
-    gridProps?: GridProps;
+    gridProps?: Grid2Props;
     /**
      * JSON data
      * JSON 数据

package/lib/custom/CustomFieldViewer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Grid, Typography } from "@mui/material";
+import { Grid2, Typography } from "@mui/material";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 import { MUGlobal } from "../MUGlobal";
 import { VBox } from "../FlexBox";
@@ -38,7 +38,7 @@ export function CustomFieldViewer(props) {
     if (data == null || typeof data !== "object" || Array.isArray(data)) {
         throw new Error("Invalid JSON data");
     }
-    return (_jsx(Grid, { container: true, justifyContent: "left", spacing: spacing, sx: {
+    return (_jsx(Grid2, { container: true, justifyContent: "left", spacing: spacing, sx: {
             ".MuiTypography-subtitle2": {
                 fontWeight: "bold"
             }
@@ -49,6 +49,6 @@ export function CustomFieldViewer(props) {
                 return;
             // Field value
             const value = Utils.getNestedValue(data, name);
-            return (_jsx(Grid, { item: true, ...field.gridItemProps, ...CustomFieldUtils.transformSpace(field.space), children: _jsxs(VBox, { gap: verticalGap, children: [_jsx(Typography, { fontWeight: "bold", fontSize: "small", ...titleProps, children: field.label ?? name }), _jsx(Typography, { ...valueProps, children: valueLabelFormatter(value, field) })] }) }, name ?? index));
+            return (_jsx(Grid2, { size: CustomFieldUtils.transformSpace(field.space), ...field.gridItemProps, children: _jsxs(VBox, { gap: verticalGap, children: [_jsx(Typography, { fontWeight: "bold", fontSize: "small", ...titleProps, children: field.label ?? name }), _jsx(Typography, { ...valueProps, children: valueLabelFormatter(value, field) })] }) }, name ?? index));
         }) }));
 }

package/lib/custom/CustomFieldWindow.d.ts

@@ -1,5 +1,5 @@
 import { CustomFieldData } from "@etsoo/appscript";
-import { GridProps } from "@mui/material";
+import { Grid2Props } from "@mui/material";
 import React from "react";
 /**
  * Custom field window props
@@ -24,7 +24,7 @@ export type CustomFieldWindowProps<D extends CustomFieldData> = {
      * Grid props
      * 网格属性
      */
-    gridProps?: GridProps;
+    gridProps?: Grid2Props;
     /**
      * JSON data
      * JSON 数据

package/lib/custom/CustomFieldWindow.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Utils } from "@etsoo/shared";
-import { Grid, Stack } from "@mui/material";
+import { Grid2, Stack } from "@mui/material";
 import React from "react";
 import { globalApp } from "../app/ReactApp";
 import { MUGlobal } from "../MUGlobal";
@@ -73,7 +73,7 @@ export function CustomFieldWindow(props) {
                     }
                 }, {
                     fullScreen: app.smDown,
-                    inputs: (_jsx(Stack, { marginTop: 1.5, children: _jsx(Grid, { container: true, justifyContent: "left", spacing: spacing, sx: {
+                    inputs: (_jsx(Stack, { marginTop: 1.5, children: _jsx(Grid2, { container: true, justifyContent: "left", spacing: spacing, sx: {
                                 ".MuiTypography-subtitle2": {
                                     fontWeight: "bold"
                                 }

package/lib/index.d.ts

@@ -90,6 +90,7 @@ export * from "./ProgressCount";
 export * from "./PullToRefreshUI";
 export * from "./QuickList";
 export * from "./ResponsibleContainer";
+export * from "./ResponsiveStyleValue";
 export * from "./ScrollerListEx";
 export * from "./ScrollTopFab";
 export * from "./SearchBar";

package/lib/index.js

@@ -90,6 +90,7 @@ export * from "./ProgressCount";
 export * from "./PullToRefreshUI";
 export * from "./QuickList";
 export * from "./ResponsibleContainer";
+export * from "./ResponsiveStyleValue";
 export * from "./ScrollerListEx";
 export * from "./ScrollTopFab";
 export * from "./SearchBar";

package/lib/pages/EditPage.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Grid } from "@mui/material";
+import { Button, Grid2 } from "@mui/material";
 import { MUGlobal } from "../MUGlobal";
 import { CommonPage } from "./CommonPage";
 import SaveIcon from "@mui/icons-material/Save";
@@ -16,7 +16,7 @@ export function EditPage(props) {
     const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
-    return (_jsxs(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), topPart, _jsxs("form", { onSubmit: onSubmit, children: [_jsx(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1, children: children }), _jsxs(Grid, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
+    return (_jsxs(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), topPart, _jsxs("form", { onSubmit: onSubmit, children: [_jsx(Grid2, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1, children: children }), _jsxs(Grid2, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
                             top: "auto",
                             bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
                             paddingTop: paddings

package/lib/pages/ViewPage.d.ts

@@ -1,13 +1,13 @@
 import { GridColumnRenderProps, GridDataType } from "@etsoo/react";
 import { DataTypes } from "@etsoo/shared";
-import { GridProps } from "@mui/material";
+import { Grid2Props } from "@mui/material";
 import React from "react";
 import { CommonPageProps } from "./CommonPage";
 import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 /**
  * View page grid item properties
  */
-export type ViewPageGridItemProps = GridProps & {
+export type ViewPageGridItemProps = Grid2Props & {
     data: React.ReactNode;
     label?: React.ReactNode;
     singleRow?: ViewPageRowType;
@@ -25,7 +25,7 @@ export type ViewPageRowType = boolean | "default" | "small" | "medium" | object;
 /**
  * View page display field
  */
-export interface ViewPageField<T extends object> extends GridProps {
+export interface ViewPageField<T extends object> extends Grid2Props {
     /**
      * Data field
      */