@etsoo/materialui 1.5.2 → 1.5.3

package/lib/cjs/ViewContainer.js

@@ -8,12 +8,13 @@ exports.ViewPageGridItem = ViewPageGridItem;
 exports.ViewContainer = ViewContainer;
 const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_2 = __importDefault(require("react"));
 const MUGlobal_1 = require("./MUGlobal");
 const useCurrentBreakpoint_1 = require("./useCurrentBreakpoint");
 const GridDataFormat_1 = require("./GridDataFormat");
 const ReactApp_1 = require("./app/ReactApp");
+const Grid_1 = __importDefault(require("@mui/material/Grid"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 function formatItemData(app, fieldData) {
     if (fieldData == null)
         return undefined;
@@ -158,7 +159,7 @@ function ViewPageGridItem(props) {
         options = getResp(singleRow ?? "small");
     }
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(material_1.Grid2, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: data }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", children: data }))] }));
 }
 function ViewContainer(props) {
     // Global app
@@ -228,5 +229,5 @@ function ViewContainer(props) {
     }, [app, fields, data, bp]);
     let leftResult;
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(material_1.Grid2, { container: true, justifyContent: "left", className: "ET-ViewContainer", ref: gridRef, spacing: spacing, children: [leftContainer && (leftResult = leftContainer(data)) != null && ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftResult }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, className: "ET-ViewPage-LeftOthers", spacing: spacing, size: ViewPageSize.matchSize(size), children: createFields(data, leftContainerLines * (12 - getItemSize(bp, size))) })] })), createFields(data)] }));
+    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, justifyContent: "left", className: "ET-ViewContainer", ref: gridRef, spacing: spacing, children: [leftContainer && (leftResult = leftContainer(data)) != null && ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftResult }), (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, className: "ET-ViewPage-LeftOthers", spacing: spacing, size: ViewPageSize.matchSize(size), children: createFields(data, leftContainerLines * (12 - getItemSize(bp, size))) })] })), createFields(data)] }));
 }

package/lib/cjs/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 { GridSize } from "@mui/material";
+import { GridSize } from "@mui/material/Grid";
 import { TypographyProps } from "@mui/material/Typography";
 /**
  * Custom field utilities

package/lib/cjs/custom/CustomFieldUtils.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomFieldUtils = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const FieldCheckbox_1 = require("./FieldCheckbox");
 const FieldAmountLabel_1 = require("./FieldAmountLabel");
@@ -20,6 +19,8 @@ const FieldJson_1 = require("./FieldJson");
 const FieldRadio_1 = require("./FieldRadio");
 const FieldSelect_1 = require("./FieldSelect");
 const FieldSwitch_1 = require("./FieldSwitch");
+const Grid_1 = __importDefault(require("@mui/material/Grid"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Custom field utilities
  */
@@ -69,7 +70,7 @@ var CustomFieldUtils;
                 fieldCalback(field);
             const creator = CustomFieldUtils.customFieldCreators[field.type];
             if (creator == null) {
-                return ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: transformSpace(field.space), ...field.gridItemProps, children: `Type ${field.type} is not supported currently` }, index));
+                return ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: transformSpace(field.space), ...field.gridItemProps, children: `Type ${field.type} is not supported currently` }, index));
             }
             const Creator = creator;
             const mref = react_1.default.createRef();
@@ -83,7 +84,7 @@ var CustomFieldUtils;
                     ui = `Duplicate custom field ${name}`;
                 }
             }
-            return ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: transformSpace(field.space), ...field.gridItemProps, children: ui }, name ?? index));
+            return ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: transformSpace(field.space), ...field.gridItemProps, children: ui }, name ?? index));
         });
     }
     CustomFieldUtils.create = create;
@@ -94,7 +95,7 @@ var CustomFieldUtils;
      * @returns Result
      */
     function createMultilineLabel(label, props) {
-        return label?.split("\n").map((line, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", ...props, children: line }, index)));
+        return label?.split("\n").map((line, index) => ((0, jsx_runtime_1.jsx)(Typography_1.default, { component: "div", ...props, children: line }, index)));
     }
     CustomFieldUtils.createMultilineLabel = createMultilineLabel;
     /**

package/lib/cjs/custom/CustomFieldViewer.d.ts

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

package/lib/cjs/custom/CustomFieldViewer.js

@@ -1,12 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomFieldViewer = CustomFieldViewer;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const CustomFieldUtils_1 = require("./CustomFieldUtils");
 const MUGlobal_1 = require("../MUGlobal");
 const FlexBox_1 = require("../FlexBox");
 const shared_1 = require("@etsoo/shared");
+const Grid_1 = __importDefault(require("@mui/material/Grid"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Custom field viewer
  * 自定义字段查看器
@@ -41,7 +45,7 @@ function CustomFieldViewer(props) {
     if (data == null || typeof data !== "object" || Array.isArray(data)) {
         throw new Error("Invalid JSON data");
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, justifyContent: "left", spacing: spacing, sx: {
+    return ((0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, justifyContent: "left", spacing: spacing, sx: {
             ".MuiTypography-subtitle2": {
                 fontWeight: "bold"
             }
@@ -52,6 +56,6 @@ function CustomFieldViewer(props) {
                 return;
             // Field value
             const value = shared_1.Utils.getNestedValue(data, name);
-            return ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: CustomFieldUtils_1.CustomFieldUtils.transformSpace(field.space), ...field.gridItemProps, children: (0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: verticalGap, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: "bold", fontSize: "small", ...titleProps, children: field.label ?? name }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ...valueProps, children: valueLabelFormatter(value, field) })] }) }, name ?? index));
+            return ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: CustomFieldUtils_1.CustomFieldUtils.transformSpace(field.space), ...field.gridItemProps, children: (0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: verticalGap, children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { fontWeight: "bold", fontSize: "small", ...titleProps, children: field.label ?? name }), (0, jsx_runtime_1.jsx)(Typography_1.default, { ...valueProps, children: valueLabelFormatter(value, field) })] }) }, name ?? index));
         }) }));
 }

package/lib/cjs/custom/CustomFieldWindow.d.ts

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

package/lib/cjs/custom/CustomFieldWindow.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomFieldWindow = CustomFieldWindow;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const MUGlobal_1 = require("../MUGlobal");
 const CustomFieldUtils_1 = require("./CustomFieldUtils");
 const ReactApp_1 = require("../app/ReactApp");
+const Grid_1 = __importDefault(require("@mui/material/Grid"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
 function calculateKeys(data) {
     let count = 0;
     for (const key in data) {
@@ -76,7 +77,7 @@ function CustomFieldWindow(props) {
                     }
                 }, {
                     fullScreen: app.smDown,
-                    inputs: ((0, jsx_runtime_1.jsx)(material_1.Stack, { marginTop: 1.5, children: (0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, justifyContent: "left", spacing: spacing, sx: {
+                    inputs: ((0, jsx_runtime_1.jsx)(Stack_1.default, { marginTop: 1.5, children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, justifyContent: "left", spacing: spacing, sx: {
                                 ".MuiTypography-subtitle2": {
                                     fontWeight: "bold"
                                 }

package/lib/cjs/custom/FieldAmountLabel.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldAmountLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
+const FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const react_1 = __importDefault(require("react"));
 /**
  * Amount label field creator
@@ -42,6 +43,6 @@ const FieldAmountLabel = ({ field, mref, defaultValue }) => {
             return;
         setValue(defaultValue);
     }, [defaultValue]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { ...rest, children: [currencySymbol, " ", amountLabel] }), helperText && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: helperText })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Typography_1.default, { ...rest, children: [currencySymbol, " ", amountLabel] }), helperText && (0, jsx_runtime_1.jsx)(FormHelperText_1.default, { children: helperText })] }));
 };
 exports.FieldAmountLabel = FieldAmountLabel;

package/lib/cjs/custom/FieldCheckbox.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldCheckbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const OptionGroup_1 = require("../OptionGroup");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Checkbox (multiple values) field creator
  * type: checkbox
@@ -41,7 +41,7 @@ const FieldCheckbox = ({ field, mref, onChange, defaultValue }) => {
     // Name
     const name = field.name;
     if (!name) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["No name for FieldCheckbox ", JSON.stringify(field)] }));
+        return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldCheckbox ", JSON.stringify(field)] }));
     }
     return ((0, jsx_runtime_1.jsx)(OptionGroup_1.OptionGroup, { name: name, options: field.options ?? [], multiple: true, row: true, helperText: field.helperText, label: field.label, variant: "outlined", fullWidth: true, defaultValue: value, onValueChange: (value) => {
             const newValue = Array.isArray(value)

package/lib/cjs/custom/FieldCombobox.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldCombobox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const ComboBoxMultiple_1 = require("../ComboBoxMultiple");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Combobox (multiple values) field creator
  * type combobox
@@ -36,7 +36,7 @@ const FieldCombobox = ({ field, mref, onChange, defaultValue }) => {
     // Name
     const name = field.name;
     if (!name) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["No name for FieldCombobox ", JSON.stringify(field)] }));
+        return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldCombobox ", JSON.stringify(field)] }));
     }
     return ((0, jsx_runtime_1.jsx)(ComboBoxMultiple_1.ComboBoxMultiple, { label: field.label ?? "", inputHelperText: field.helperText, name: name, options: field.options, fullWidth: true, idValues: ids, onChange: (_event, value) => {
             const ids = value.map((v) => v.id);

package/lib/cjs/custom/FieldDateInput.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldDateInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const InputField_1 = require("../InputField");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Date input field creator
  * type: date
@@ -43,7 +43,7 @@ const FieldDateInput = ({ field, mref, onChange, defaultValue }) => {
     // Name
     const name = field.name;
     if (!name) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["No name for FieldDateInput ", JSON.stringify(field)] }));
+        return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldDateInput ", JSON.stringify(field)] }));
     }
     return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: field.label ?? "", helperText: field.helperText, inputRef: inputRef, type: "date", name: name, fullWidth: true, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
 };

package/lib/cjs/custom/FieldDivider.js

@@ -5,15 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldDivider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const CustomFieldUtils_1 = require("./CustomFieldUtils");
+const Divider_1 = __importDefault(require("@mui/material/Divider"));
 /**
  * Divider field creator
  * type: divider
  * @returns Component
  */
 const FieldDivider = ({ field }) => {
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [CustomFieldUtils_1.CustomFieldUtils.createMultilineLabel(field.label), (0, jsx_runtime_1.jsx)(material_1.Divider, { ...field.mainSlotProps })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [CustomFieldUtils_1.CustomFieldUtils.createMultilineLabel(field.label), (0, jsx_runtime_1.jsx)(Divider_1.default, { ...field.mainSlotProps })] }));
 };
 exports.FieldDivider = FieldDivider;

package/lib/cjs/custom/FieldInput.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const InputField_1 = require("../InputField");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Input field creator
  * type: input
@@ -27,7 +27,7 @@ const FieldInput = ({ field, mref, onChange, defaultValue }) => {
     // Name
     const name = field.name;
     if (!name) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["No name for FieldInput ", JSON.stringify(field)] }));
+        return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldInput ", JSON.stringify(field)] }));
     }
     return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: field.label ?? "", helperText: field.helperText, inputRef: inputRef, name: name, fullWidth: true, defaultValue: defaultValue, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
 };

package/lib/cjs/custom/FieldJson.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldJson = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const InputField_1 = require("../InputField");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 function parseJson(value) {
     if (value) {
         try {
@@ -50,7 +50,7 @@ const FieldJson = ({ field, mref, onChange, defaultValue }) => {
     // Name
     const name = field.name;
     if (!name) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["No name for FieldJson ", JSON.stringify(field)] }));
+        return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldJson ", JSON.stringify(field)] }));
     }
     return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: field.label ?? "", helperText: field.helperText, name: name, fullWidth: true, multiline: true, rows: 4, inputProps: { maxLength: 1280 }, inputRef: inputRef, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
 };

package/lib/cjs/custom/FieldNumberInput.js

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldNumberInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const NumberInputField_1 = require("../NumberInputField");
 const shared_1 = require("@etsoo/shared");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Number input field creator
  * type: number
@@ -37,7 +37,7 @@ const FieldNumberInput = ({ field, mref, onChange, defaultValue }) => {
     // Name
     const name = field.name;
     if (!name) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["No name for FieldNumberInput ", JSON.stringify(field)] }));
+        return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldNumberInput ", JSON.stringify(field)] }));
     }
     return ((0, jsx_runtime_1.jsx)(NumberInputField_1.NumberInputField, { label: field.label ?? "", helperText: field.helperText, inputRef: inputRef, name: name, fullWidth: true, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
 };

package/lib/cjs/custom/FieldRadio.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldRadio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const OptionGroup_1 = require("../OptionGroup");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Radio (single value) field creator
  * type: radio
@@ -41,7 +41,7 @@ const FieldRadio = ({ field, mref, onChange, defaultValue }) => {
     // Name
     const name = field.name;
     if (!name) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["No name for FieldRadio ", JSON.stringify(field)] }));
+        return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldRadio ", JSON.stringify(field)] }));
     }
     return ((0, jsx_runtime_1.jsx)(OptionGroup_1.OptionGroup, { name: name, options: field.options ?? [], multiple: false, row: true, helperText: field.helperText, label: field.label, variant: "outlined", fullWidth: true, defaultValue: value, onValueChange: (value) => {
             const newValue = Array.isArray(value)

package/lib/cjs/custom/FieldSelect.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldSelect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const SelectEx_1 = require("../SelectEx");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Select (single value) field creator
  * type select
@@ -41,7 +41,7 @@ const FieldSelect = ({ field, mref, onChange, defaultValue }) => {
     // Name
     const name = field.name;
     if (!name) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["No name for FieldSelect ", JSON.stringify(field)] }));
+        return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldSelect ", JSON.stringify(field)] }));
     }
     return ((0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { label: field.label ?? "", helperText: field.helperText, name: name, options: field.options, fullWidth: true, value: value, onChange: (event) => {
             const value = event.target.value;

package/lib/cjs/custom/FieldSwitch.js

@@ -7,7 +7,7 @@ exports.FieldSwitch = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const SwitchAnt_1 = require("../SwitchAnt");
-const material_1 = require("@mui/material");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Input field creator
  * type: switch
@@ -34,7 +34,7 @@ const FieldSwitch = ({ field, mref, onChange, defaultValue }) => {
     // Name
     const name = field.name;
     if (!name) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["No name for FieldSwitch ", JSON.stringify(field)] }));
+        return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldSwitch ", JSON.stringify(field)] }));
     }
     react_1.default.useEffect(() => {
         if (defaultValue == null)

package/lib/cjs/custom/FieldTexarea.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldTexarea = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const InputField_1 = require("../InputField");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Textarea field creator
  * type: textarea
@@ -28,7 +28,7 @@ const FieldTexarea = ({ field, mref, onChange, defaultValue }) => {
     // Name
     const name = field.name;
     if (!name) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["No name for FieldTextarea ", JSON.stringify(field)] }));
+        return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldTextarea ", JSON.stringify(field)] }));
     }
     return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: field.label ?? "", helperText: field.helperText, name: name, fullWidth: true, multiline: true, rows: 4, inputProps: { maxLength: 1280 }, inputRef: inputRef, defaultValue: defaultValue, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
 };

package/lib/cjs/pages/CommonPage.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-import { ContainerProps, Theme } from "@mui/material";
 import type { CustomFabSize } from "../CustomFabProps";
 import type { IStateUpdate, ListItemReact } from "@etsoo/react";
 import type { UserKey } from "@etsoo/appscript";
+import { ContainerProps } from "@mui/material/Container";
+import { Theme } from "@mui/material/styles";
 /**
  * Common page props
  * Default container id is 'pageContainer'

package/lib/cjs/pages/CommonPage.js

@@ -10,11 +10,13 @@ const FabBox_1 = require("../FabBox");
 const ScrollTopFab_1 = require("../ScrollTopFab");
 const MUGlobal_1 = require("../MUGlobal");
 const MoreFab_1 = require("../MoreFab");
-const material_1 = require("@mui/material");
 const Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
 const BackButton_1 = require("../BackButton");
 const Labels_1 = require("../app/Labels");
 const ReactApp_1 = require("../app/ReactApp");
+const Container_1 = __importDefault(require("@mui/material/Container"));
+const styles_1 = require("@mui/material/styles");
+const Fab_1 = __importDefault(require("@mui/material/Fab"));
 /**
  * Common page
  * @param props Props
@@ -32,7 +34,7 @@ function CommonPage(props) {
     }
     // Labels
     const labels = Labels_1.Labels.CommonPage;
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const distance = react_1.default.useMemo(() => MUGlobal_1.MUGlobal.updateWithTheme(fabPadding, theme.spacing), [fabPadding, theme.spacing]);
     // Update
     const updateRef = react_1.default.useRef(false);
@@ -59,7 +61,7 @@ function CommonPage(props) {
         }
     }, [update]);
     // Return the UI
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [update && app?.stateDetector({ targetFields, update }), (0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [(0, jsx_runtime_1.jsxs)(FabBox_1.FabBox, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [update && app?.stateDetector({ targetFields, update }), (0, jsx_runtime_1.jsxs)(Container_1.default, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [(0, jsx_runtime_1.jsxs)(FabBox_1.FabBox, { sx: {
                             zIndex: 1,
                             ...(typeof fabTop === "function"
                                 ? fabTop(theme, fabPadding)
@@ -72,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)(material_1.Fab, { 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, 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] })] }));
 }

package/lib/cjs/pages/DataGridPage.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridPage = DataGridPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
-const material_1 = require("@mui/material");
 const react_2 = __importDefault(require("react"));
 const DataGridEx_1 = require("../DataGridEx");
 const MUGlobal_1 = require("../MUGlobal");
 const SearchBar_1 = require("../SearchBar");
 const CommonPage_1 = require("./CommonPage");
 const GridUtils_1 = require("../GridUtils");
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
 /**
  * DataGrid page
  * @param props Props
@@ -108,7 +109,7 @@ function DataGridPage(props) {
     }, [ref, data]);
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     // Layout
-    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: states.element, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], sx: {
+    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: states.element, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
                     }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), list] }) }));
 }

package/lib/cjs/pages/DrawerHeader.d.ts

@@ -1,4 +1,4 @@
 /**
  * Common drawer header
  */
-export declare const DrawerHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DrawerHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/cjs/pages/DrawerHeader.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DrawerHeader = void 0;
-const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
 /**
  * Common drawer header
  */
-exports.DrawerHeader = (0, material_1.styled)("div")(({ theme }) => ({
+exports.DrawerHeader = (0, styles_1.styled)("div")(({ theme }) => ({
     // necessary for content to be below app bar
     ...theme.mixins.toolbar,
     display: "flex",

package/lib/cjs/pages/EditPage.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditPage = EditPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const MUGlobal_1 = require("../MUGlobal");
 const CommonPage_1 = require("./CommonPage");
 const Save_1 = __importDefault(require("@mui/icons-material/Save"));
@@ -13,6 +12,8 @@ const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
 const BackButton_1 = require("../BackButton");
 const Labels_1 = require("../app/Labels");
 const OperationMessageContainer_1 = require("../messages/OperationMessageContainer");
+const Grid_1 = __importDefault(require("@mui/material/Grid"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
 /**
  * Add / Edit page
  * @param props Props
@@ -22,9 +23,9 @@ function EditPage(props) {
     const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal_1.MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, ...rest } = props;
     // Labels
     const labels = Labels_1.Labels.CommonPage;
-    return ((0, jsx_runtime_1.jsxs)(CommonPage_1.CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: operationMessageHandler })), topPart, (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1, children: children }), (0, jsx_runtime_1.jsxs)(material_1.Grid2, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
+    return ((0, jsx_runtime_1.jsxs)(CommonPage_1.CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: operationMessageHandler })), topPart, (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1, children: children }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
                             top: "auto",
                             bottom: (theme) => MUGlobal_1.MUGlobal.updateWithTheme(paddings, theme.spacing),
                             paddingTop: paddings
-                        }, children: [isEditing && onDelete && ((0, jsx_runtime_1.jsx)(material_1.Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: (0, jsx_runtime_1.jsx)(Delete_1.default, { color: "warning" }), children: labels.delete })), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", type: "submit", startIcon: (0, jsx_runtime_1.jsx)(Save_1.default, {}), sx: { flexGrow: 1 }, disabled: submitDisabled, children: labels.save }), supportBack && (0, jsx_runtime_1.jsx)(BackButton_1.BackButton, { title: labels.back })] })] }), bottomPart] }));
+                        }, children: [isEditing && onDelete && ((0, jsx_runtime_1.jsx)(Button_1.default, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: (0, jsx_runtime_1.jsx)(Delete_1.default, { color: "warning" }), children: labels.delete })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", type: "submit", startIcon: (0, jsx_runtime_1.jsx)(Save_1.default, {}), sx: { flexGrow: 1 }, disabled: submitDisabled, children: labels.save }), supportBack && (0, jsx_runtime_1.jsx)(BackButton_1.BackButton, { title: labels.back })] })] }), bottomPart] }));
 }

package/lib/cjs/pages/FixedListPage.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FixedListPage = FixedListPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
-const material_1 = require("@mui/material");
 const react_2 = __importDefault(require("react"));
 const MUGlobal_1 = require("../MUGlobal");
 const ScrollerListEx_1 = require("../ScrollerListEx");
 const SearchBar_1 = require("../SearchBar");
 const CommonPage_1 = require("./CommonPage");
 const GridUtils_1 = require("../GridUtils");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
 /**
  * Fixed height list page
  * @param props Props
@@ -89,7 +90,7 @@ function FixedListPage(props) {
                     typeof adjustHeight === "number"
                         ? adjustHeight
                         : adjustHeight(height, rect);
-            return ((0, jsx_runtime_1.jsx)(material_1.Box, { id: "list-container", sx: {
+            return ((0, jsx_runtime_1.jsx)(Box_1.default, { id: "list-container", sx: {
                     height: height + "px"
                 }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {
                         if (element != null)
@@ -100,5 +101,5 @@ function FixedListPage(props) {
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     const { paddings, ...pageRest } = pageProps;
     // Layout
-    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], sx: { padding: paddings }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), list] }) }));
+    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { ref: dimensions[0][0], sx: { padding: paddings }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), list] }) }));
 }