@etsoo/materialui 1.4.4 → 1.4.5

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/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
      */

package/lib/pages/ViewPage.js

@@ -2,7 +2,7 @@ import { createElement as _createElement } from "react";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { ScrollRestoration } from "@etsoo/react";
 import { DateUtils, Utils } from "@etsoo/shared";
-import { Grid, LinearProgress, Stack, Typography } from "@mui/material";
+import { Grid2, LinearProgress, Stack, Typography } from "@mui/material";
 import React from "react";
 import { Labels } from "../app/Labels";
 import { globalApp } from "../app/ReactApp";
@@ -22,14 +22,14 @@ export function ViewPageGridItem(props) {
     const { data, label, singleRow, ...gridProps } = props;
     // Default options
     let options = {};
-    if (gridProps.xs == null && gridProps.md == null) {
+    if (gridProps.size == null) {
         options = getResp(singleRow ?? "small");
     }
     else if (singleRow != null) {
         options = getResp(singleRow ?? "small");
     }
     // Layout
-    return (_jsxs(Grid, { item: true, ...gridProps, ...options, children: [label != null && (_jsxs(Typography, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
+    return (_jsxs(Grid2, { ...gridProps, ...options, children: [label != null && (_jsxs(Typography, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
 }
 function formatItemData(fieldData) {
     if (fieldData == null)
@@ -43,7 +43,7 @@ function formatItemData(fieldData) {
     return `${fieldData}`;
 }
 function getResp(singleRow) {
-    return typeof singleRow === "object"
+    const size = typeof singleRow === "object"
         ? singleRow
         : singleRow === "medium"
             ? { xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }
@@ -56,6 +56,7 @@ function getResp(singleRow) {
                     lg: 3,
                     xl: 2
                 };
+    return { size };
 }
 function getItemField(field, data) {
     // Item data and label
@@ -129,7 +130,7 @@ export function ViewPage(props) {
                             refresh,
                             operationMessageHandler.id
                         ]
-                        : operationMessageHandler })), _jsx(Grid, { container: true, justifyContent: "left", spacing: spacing, className: "ET-ViewPage", ref: gridRef, sx: {
+                        : operationMessageHandler })), _jsx(Grid2, { container: true, justifyContent: "left", spacing: spacing, className: "ET-ViewPage", ref: gridRef, sx: {
                         ".MuiTypography-subtitle2": {
                             fontWeight: "bold"
                         }
@@ -144,7 +145,7 @@ export function ViewPage(props) {
                         if (itemData == null || itemData === "")
                             return undefined;
                         // Layout
-                        return (_createElement(ViewPageGridItem, { item: true, ...gridProps, key: index, data: itemData, label: itemLabel }));
+                        return (_createElement(ViewPageGridItem, { ...gridProps, key: index, data: itemData, label: itemLabel }));
                     }) }), actions !== null && (_jsx(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: actions == null ? undefined : paddings, paddingBottom: paddings, gap: paddings, children: actions != null && Utils.getResult(actions, data, refresh) })), Utils.getResult(children, data, refresh), pullToRefresh && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
                         const container = document.querySelector(pullContainer);
                         return !container?.scrollTop;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/AddresSelector.tsx

@@ -5,12 +5,12 @@ import {
   AddressRegionDb,
   AddressState
 } from "@etsoo/appscript";
-import { FormLabel, Grid } from "@mui/material";
+import { FormLabel, Grid2, GridSize } from "@mui/material";
 import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { ComboBox } from "./ComboBox";
 import { Tiplist } from "./Tiplist";
-import { RegularBreakpoints } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 
 /**
  * Address field
@@ -48,7 +48,7 @@ export type AddressSelectorProps = {
   /**
    * Break points
    */
-  breakPoints?: RegularBreakpoints;
+  breakPoints?: ResponsiveStyleValue<GridSize>;
 
   /**
    * City
@@ -287,17 +287,17 @@ export function AddressSelector(props: AddressSelectorProps) {
   return (
     <React.Fragment>
       {label && (
-        <Grid item xs={12}>
+        <Grid2 size={{ xs: 12 }}>
           <FormLabel
             required={required}
             sx={{ fontSize: (theme) => theme.typography.caption }}
           >
             {label}
           </FormLabel>
-        </Grid>
+        </Grid2>
       )}
       {!hideRegion && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <Tiplist<AddressRegionDb>
             label={regionLabel}
             name={AddressField.Region}
@@ -322,9 +322,9 @@ export function AddressSelector(props: AddressSelectorProps) {
               handleChange([AddressField.Region, value])
             }
           />
-        </Grid>
+        </Grid2>
       )}
-      <Grid item {...breakPoints}>
+      <Grid2 size={breakPoints}>
         <ComboBox<AddressState>
           name={AddressField.State}
           label={stateLabel}
@@ -339,8 +339,8 @@ export function AddressSelector(props: AddressSelectorProps) {
             handleChange([AddressField.State, value])
           }
         />
-      </Grid>
-      <Grid item {...breakPoints}>
+      </Grid2>
+      <Grid2 size={breakPoints}>
         <ComboBox<AddressCity>
           name={AddressField.City}
           label={cityLabel}
@@ -350,8 +350,8 @@ export function AddressSelector(props: AddressSelectorProps) {
           options={cities}
           onChange={(_event, value) => handleChange([AddressField.City, value])}
         />
-      </Grid>
-      <Grid item {...breakPoints}>
+      </Grid2>
+      <Grid2 size={breakPoints}>
         <ComboBox<AddressDistrict>
           name={AddressField.District}
           label={districtLabel}
@@ -363,7 +363,7 @@ export function AddressSelector(props: AddressSelectorProps) {
             handleChange([AddressField.District, value])
           }
         />
-      </Grid>
+      </Grid2>
     </React.Fragment>
   );
 }

package/src/HiSelector.tsx

@@ -1,8 +1,8 @@
 import { DataTypes, IdDefaultType, LabelDefaultType } from "@etsoo/shared";
-import { FormLabel, Grid, SelectChangeEvent } from "@mui/material";
+import { FormLabel, Grid2, GridSize, SelectChangeEvent } from "@mui/material";
 import React from "react";
 import { SelectEx } from "./SelectEx";
-import { RegularBreakpoints } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 
 /**
  * Hierarchy selector props
@@ -15,7 +15,7 @@ export type HiSelectorProps<
   /**
    * Break points
    */
-  breakPoints?: RegularBreakpoints;
+  breakPoints?: ResponsiveStyleValue<GridSize>;
 
   /**
    * Id field
@@ -161,17 +161,17 @@ export function HiSelector<
   return (
     <React.Fragment>
       {label && (
-        <Grid item xs={12}>
+        <Grid2 size={{ xs: 12 }}>
           <FormLabel
             required={required}
             sx={{ fontSize: (theme) => theme.typography.caption }}
           >
             {label}
           </FormLabel>
-        </Grid>
+        </Grid2>
       )}
       <input type="hidden" name={name} value={`${currentValue ?? ""}`} />
-      <Grid item {...breakPoints}>
+      <Grid2 size={breakPoints}>
         <SelectEx<T, D, L>
           idField={idField}
           label={labels[0]}
@@ -188,9 +188,9 @@ export function HiSelector<
           helperText={helperText}
           variant={variant}
         />
-      </Grid>
+      </Grid2>
       {localValues[0] != null && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <SelectEx<T, D, L>
             key={`${localValues[0]}`}
             idField={idField}
@@ -205,10 +205,10 @@ export function HiSelector<
             onItemChange={doItemChange}
             variant={variant}
           />
-        </Grid>
+        </Grid2>
       )}
       {localValues[1] != null && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <SelectEx<T, D, L>
             key={`${localValues[1]}`}
             idField={idField}
@@ -223,10 +223,10 @@ export function HiSelector<
             onItemChange={doItemChange}
             variant={variant}
           />
-        </Grid>
+        </Grid2>
       )}
       {localValues[2] != null && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <SelectEx<T, D, L>
             key={`${localValues[2]}`}
             idField={idField}
@@ -241,7 +241,7 @@ export function HiSelector<
             onItemChange={doItemChange}
             variant={variant}
           />
-        </Grid>
+        </Grid2>
       )}
     </React.Fragment>
   );

package/src/HiSelectorTL.tsx

@@ -3,11 +3,12 @@ import {
   AutocompleteChangeReason,
   AutocompleteValue,
   FormLabel,
-  Grid
+  Grid2,
+  GridSize
 } from "@mui/material";
 import React from "react";
 import { Tiplist } from "./Tiplist";
-import { RegularBreakpoints } from "@mui/material/Grid";
+import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 
 /**
  * Hierarchy tiplist selector props
@@ -19,7 +20,7 @@ export type HiSelectorTLProps<
   /**
    * Break points
    */
-  breakPoints?: RegularBreakpoints;
+  breakPoints?: ResponsiveStyleValue<GridSize>;
 
   /**
    * Id field
@@ -154,17 +155,17 @@ export function HiSelectorTL<
   return (
     <React.Fragment>
       {label && (
-        <Grid item xs={12}>
+        <Grid2 size={{ xs: 12 }}>
           <FormLabel
             required={required}
             sx={{ fontSize: (theme) => theme.typography.caption }}
           >
             {label}
           </FormLabel>
-        </Grid>
+        </Grid2>
       )}
       <input type="hidden" name={name} value={`${currentValue ?? ""}`} />
-      <Grid item {...breakPoints}>
+      <Grid2 size={breakPoints}>
         <Tiplist<T, D>
           idField={idField}
           label={labels[0]}
@@ -178,9 +179,9 @@ export function HiSelectorTL<
           inputHelperText={helperText}
           onChange={(event, value, reason) => doChange(0, event, value, reason)}
         />
-      </Grid>
+      </Grid2>
       {localValues[0] != null && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[0]}`}
             label={labels[1]}
@@ -196,10 +197,10 @@ export function HiSelectorTL<
               doChange(1, event, value, reason)
             }
           />
-        </Grid>
+        </Grid2>
       )}
       {localValues[1] != null && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[1]}`}
             label={labels[2]}
@@ -215,10 +216,10 @@ export function HiSelectorTL<
               doChange(2, event, value, reason)
             }
           />
-        </Grid>
+        </Grid2>
       )}
       {localValues[2] != null && (
-        <Grid item {...breakPoints}>
+        <Grid2 size={breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[2]}`}
             label={labels[3]}
@@ -234,7 +235,7 @@ export function HiSelectorTL<
               doChange(3, event, value, reason)
             }
           />
-        </Grid>
+        </Grid2>
       )}
     </React.Fragment>
   );

package/src/ResponsiveStyleValue.ts

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

package/src/custom/CustomFieldUtils.tsx

@@ -5,7 +5,7 @@ import {
 } from "@etsoo/appscript";
 import { CustomFieldReactCollection, ICustomFieldReact } from "@etsoo/react";
 import { IdType, ListType2 } from "@etsoo/shared";
-import { Grid, GridProps, Typography } from "@mui/material";
+import { Grid2, GridSize, Typography } from "@mui/material";
 import { TypographyProps } from "@mui/material/Typography";
 import React from "react";
 import { FieldCheckbox } from "./FieldCheckbox";
@@ -21,6 +21,7 @@ import { FieldJson } from "./FieldJson";
 import { FieldRadio } from "./FieldRadio";
 import { FieldSelect } from "./FieldSelect";
 import { FieldSwitch } from "./FieldSwitch";
+import { ResponsiveStyleValue } from "../ResponsiveStyleValue";
 
 /**
  * Custom field utilities
@@ -82,14 +83,13 @@ export namespace CustomFieldUtils {
       const creator = customFieldCreators[field.type];
       if (creator == null) {
         return (
-          <Grid
-            item
+          <Grid2
             key={index}
+            size={transformSpace(field.space)}
             {...field.gridItemProps}
-            {...transformSpace(field.space)}
           >
             {`Type ${field.type} is not supported currently`}
-          </Grid>
+          </Grid2>
         );
       }
 
@@ -115,14 +115,13 @@ export namespace CustomFieldUtils {
       }
 
       return (
-        <Grid
-          item
+        <Grid2
           key={name ?? index}
+          size={transformSpace(field.space)}
           {...field.gridItemProps}
-          {...transformSpace(field.space)}
         >
           {ui}
-        </Grid>
+        </Grid2>
       );
     });
   }
@@ -150,7 +149,7 @@ export namespace CustomFieldUtils {
    * @returns Result
    */
   export function transformSpace(space?: CustomFieldSpace) {
-    const props: GridProps =
+    const size: ResponsiveStyleValue<GridSize> =
       space === "full"
         ? { xs: 12 }
         : space === "quater"
@@ -162,7 +161,7 @@ export namespace CustomFieldUtils {
         : space === "half1"
         ? { xs: 12, sm: 6 }
         : { sm: 12, md: 6 };
-    return props;
+    return size;
   }
 
   /**

package/src/custom/CustomFieldViewer.tsx

@@ -1,5 +1,5 @@
 import { CustomFieldData } from "@etsoo/appscript";
-import { Grid, GridProps, Typography, TypographyProps } from "@mui/material";
+import { Grid2, Grid2Props, Typography, TypographyProps } from "@mui/material";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 import { MUGlobal } from "../MUGlobal";
 import { VBox } from "../FlexBox";
@@ -20,7 +20,7 @@ export type CustomFieldViewerProps = {
    * Grid props
    * 网格属性
    */
-  gridProps?: GridProps;
+  gridProps?: Grid2Props;
 
   /**
    * JSON data
@@ -96,7 +96,7 @@ export function CustomFieldViewer(props: CustomFieldViewerProps) {
   }
 
   return (
-    <Grid
+    <Grid2
       container
       justifyContent="left"
       spacing={spacing}
@@ -116,11 +116,10 @@ export function CustomFieldViewer(props: CustomFieldViewerProps) {
         const value = Utils.getNestedValue(data, name);
 
         return (
-          <Grid
-            item
+          <Grid2
             key={name ?? index}
+            size={CustomFieldUtils.transformSpace(field.space)}
             {...field.gridItemProps}
-            {...CustomFieldUtils.transformSpace(field.space)}
           >
             <VBox gap={verticalGap}>
               <Typography fontWeight="bold" fontSize="small" {...titleProps}>
@@ -130,9 +129,9 @@ export function CustomFieldViewer(props: CustomFieldViewerProps) {
                 {valueLabelFormatter(value, field)}
               </Typography>
             </VBox>
-          </Grid>
+          </Grid2>
         );
       })}
-    </Grid>
+    </Grid2>
   );
 }

package/src/custom/CustomFieldWindow.tsx

@@ -1,7 +1,7 @@
 import { CustomFieldData } from "@etsoo/appscript";
 import { CustomFieldReactCollection } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
-import { Grid, GridProps, Stack } from "@mui/material";
+import { Grid2, Grid2Props, Stack } from "@mui/material";
 import React from "react";
 import { globalApp } from "../app/ReactApp";
 import { MUGlobal } from "../MUGlobal";
@@ -64,7 +64,7 @@ export type CustomFieldWindowProps<D extends CustomFieldData> = {
    * Grid props
    * 网格属性
    */
-  gridProps?: GridProps;
+  gridProps?: Grid2Props;
 
   /**
    * JSON data
@@ -156,7 +156,7 @@ export function CustomFieldWindow<D extends CustomFieldData = CustomFieldData>(
               fullScreen: app.smDown,
               inputs: (
                 <Stack marginTop={1.5}>
-                  <Grid
+                  <Grid2
                     container
                     justifyContent="left"
                     spacing={spacing}
@@ -178,7 +178,7 @@ export function CustomFieldWindow<D extends CustomFieldData = CustomFieldData>(
                         Utils.setNestedValue(data, name, value);
                       }
                     )}
-                  </Grid>
+                  </Grid2>
                 </Stack>
               )
             }

package/src/index.ts

@@ -95,6 +95,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/src/pages/EditPage.tsx

@@ -1,4 +1,4 @@
-import { Button, Grid } from "@mui/material";
+import { Button, Grid2 } from "@mui/material";
 import React, { FormEventHandler } from "react";
 import { MUGlobal } from "../MUGlobal";
 import { CommonPage, CommonPageProps } from "./CommonPage";
@@ -86,10 +86,15 @@ export function EditPage(props: EditPageProps) {
       )}
       {topPart}
       <form onSubmit={onSubmit}>
-        <Grid container justifyContent="left" spacing={paddings} paddingTop={1}>
+        <Grid2
+          container
+          justifyContent="left"
+          spacing={paddings}
+          paddingTop={1}
+        >
           {children}
-        </Grid>
-        <Grid
+        </Grid2>
+        <Grid2
           container
           position="sticky"
           display="flex"
@@ -121,7 +126,7 @@ export function EditPage(props: EditPageProps) {
             {labels.save}
           </Button>
           {supportBack && <BackButton title={labels.back} />}
-        </Grid>
+        </Grid2>
       </form>
       {bottomPart}
     </CommonPage>

package/src/pages/ViewPage.tsx

@@ -5,8 +5,8 @@ import {
 } from "@etsoo/react";
 import { DataTypes, DateUtils, Utils } from "@etsoo/shared";
 import {
-  Grid,
-  GridProps,
+  Grid2,
+  Grid2Props,
   LinearProgress,
   Stack,
   Typography
@@ -26,7 +26,7 @@ import { OperationMessageContainer } from "../messages/OperationMessageContainer
 /**
  * View page grid item properties
  */
-export type ViewPageGridItemProps = GridProps & {
+export type ViewPageGridItemProps = Grid2Props & {
   data: React.ReactNode;
   label?: React.ReactNode;
   singleRow?: ViewPageRowType;
@@ -43,7 +43,7 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
 
   // Default options
   let options = {};
-  if (gridProps.xs == null && gridProps.md == null) {
+  if (gridProps.size == null) {
     options = getResp(singleRow ?? "small");
   } else if (singleRow != null) {
     options = getResp(singleRow ?? "small");
@@ -51,7 +51,7 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
 
   // Layout
   return (
-    <Grid item {...gridProps} {...options}>
+    <Grid2 {...gridProps} {...options}>
       {label != null && (
         <Typography variant="caption" component="div">
           {label}:
@@ -62,7 +62,7 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
       ) : (
         <Typography variant="subtitle2">{data}</Typography>
       )}
-    </Grid>
+    </Grid2>
   );
 }
 
@@ -74,7 +74,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
    */
@@ -181,29 +181,31 @@ function formatItemData(fieldData: unknown): string | undefined {
 }
 
 function getResp(singleRow: ViewPageRowType) {
-  return typeof singleRow === "object"
-    ? singleRow
-    : singleRow === "medium"
-    ? { xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }
-    : singleRow === true
-    ? { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }
-    : {
-        xs: singleRow === false ? 12 : 6,
-        sm: 6,
-        md: 4,
-        lg: 3,
-        xl: 2
-      };
+  const size =
+    typeof singleRow === "object"
+      ? singleRow
+      : singleRow === "medium"
+      ? { xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }
+      : singleRow === true
+      ? { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }
+      : {
+          xs: singleRow === false ? 12 : 6,
+          sm: 6,
+          md: 4,
+          lg: 3,
+          xl: 2
+        };
+  return { size };
 }
 
 function getItemField<T extends object>(
   field: ViewPageFieldTypeNarrow<T>,
   data: T
-): [React.ReactNode, React.ReactNode, GridProps] {
+): [React.ReactNode, React.ReactNode, Grid2Props] {
   // Item data and label
   let itemData: React.ReactNode,
     itemLabel: React.ReactNode,
-    gridProps: GridProps = {};
+    gridProps: Grid2Props = {};
 
   if (Array.isArray(field)) {
     const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
@@ -326,7 +328,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
               }
             />
           )}
-          <Grid
+          <Grid2
             container
             justifyContent="left"
             spacing={spacing}
@@ -356,7 +358,6 @@ export function ViewPage<T extends DataTypes.StringRecord>(
               // Layout
               return (
                 <ViewPageGridItem
-                  item
                   {...gridProps}
                   key={index}
                   data={itemData}
@@ -364,7 +365,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
                 />
               );
             })}
-          </Grid>
+          </Grid2>
           {actions !== null && (
             <Stack
               className="ET-ViewPage-Actions"