@etsoo/materialui 1.5.2 → 1.5.3

package/lib/cjs/AddresSelector.d.ts

@@ -1,8 +1,8 @@
 import { AddressCity, AddressDistrict, AddressRegionDb, AddressState, IApiPayload } from "@etsoo/appscript";
-import { GridSize } from "@mui/material";
 import React from "react";
 import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 import { RegionsRQ } from "./RegionsRQ";
+import { GridSize } from "@mui/material/Grid";
 /**
  * Address field
  */

package/lib/cjs/AddresSelector.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddressField = void 0;
 exports.AddressSelector = AddressSelector;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const ComboBox_1 = require("./ComboBox");
 const Tiplist_1 = require("./Tiplist");
 const ReactApp_1 = require("./app/ReactApp");
+const Grid_1 = __importDefault(require("@mui/material/Grid"));
+const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
 /**
  * Address field
  */
@@ -132,12 +133,12 @@ function AddressSelector(props) {
         }
     };
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: { xs: 12 }, children: (0, jsx_runtime_1.jsx)(material_1.FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), !hideRegion && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { label: regionLabel, name: AddressField.Region, search: search, fullWidth: true, idValue: regionState, loadData: (keyword, id, items) => api.regions({
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12 }, children: (0, jsx_runtime_1.jsx)(FormLabel_1.default, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), !hideRegion && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { label: regionLabel, name: AddressField.Region, search: search, fullWidth: true, idValue: regionState, loadData: (keyword, id, items) => api.regions({
                         keyword,
                         id,
                         items,
                         favoredIds: favoredIds == null
                             ? undefined
                             : favoredIds(AddressField.Region)
-                    }), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (_event, value) => handleChange([AddressField.Region, value]) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(ComboBox_1.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]) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange([AddressField.City, value]) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(ComboBox_1.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]) }) })), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(ComboBox_1.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]) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange([AddressField.City, value]) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: AddressField.District, label: districtLabel, search: search, fullWidth: true, idValue: districtState, options: districts, onChange: (_event, value) => handleChange([AddressField.District, value]) }) })] }));
 }

package/lib/cjs/AuditDisplay.d.ts

@@ -1,7 +1,7 @@
-import { Theme } from "@mui/material";
 import React, { CSSProperties } from "react";
 import { ListMoreDisplayProps } from "./ListMoreDisplay";
 import { AuditLineDto } from "@etsoo/appscript";
+import { Theme } from "@mui/material/styles";
 /**
  * Audit display props
  */

package/lib/cjs/AuditDisplay.js

@@ -6,11 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuditDisplay = AuditDisplay;
 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 ListMoreDisplay_1 = require("./ListMoreDisplay");
 const ShowDataComparison_1 = require("./ShowDataComparison");
 const ReactApp_1 = require("./app/ReactApp");
+const styles_1 = require("@mui/material/styles");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const Divider_1 = __importDefault(require("@mui/material/Divider"));
 /**
  * Audit display
  * @param props Props
@@ -18,7 +21,7 @@ const ReactApp_1 = require("./app/ReactApp");
  */
 function AuditDisplay(props) {
     // Theme
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
     // Get label
@@ -37,16 +40,16 @@ function AuditDisplay(props) {
         background: index % 2 === 0 ? theme.palette.grey[100] : theme.palette.grey[50]
     }), getColumnLabel, equalCheck, itemRenderer = (data) => {
         const { newData, oldData, changes = { newData: newData ?? {}, oldData: oldData ?? {} } } = data;
-        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [changes != null && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => (0, ShowDataComparison_1.ShowDataComparison)(changes, title, getColumnLabel, equalCheck), sx: {
+        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [changes != null && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", size: "small", onClick: () => (0, ShowDataComparison_1.ShowDataComparison)(changes, title, getColumnLabel, equalCheck), sx: {
                         marginLeft: theme.spacing(1),
                         marginTop: theme.spacing(-0.5),
                         float: "right"
-                    }, children: title })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: formatDate(data.creation) +
+                    }, children: title })), (0, jsx_runtime_1.jsx)(Typography_1.default, { children: formatDate(data.creation) +
                         ", [" +
                         getLabel(data.action) +
                         "], " +
                         data.user })] }));
-    }, headerTitle = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: getLabel("audits") }), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), ...rest } = props;
+    }, headerTitle = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { children: getLabel("audits") }), (0, jsx_runtime_1.jsx)(Divider_1.default, {})] })), ...rest } = props;
     // Layout
     return ((0, jsx_runtime_1.jsx)(ListMoreDisplay_1.ListMoreDisplay, { headerTitle: headerTitle, ...rest, children: (data, index) => ((0, jsx_runtime_1.jsx)("div", { style: getItemStyle(index, theme), children: itemRenderer(data, index) }, data.id)) }));
 }

package/lib/cjs/AutocompleteExtendedProps.d.ts

@@ -1,5 +1,5 @@
 import { DataTypes } from "@etsoo/shared";
-import { AutocompleteProps } from "@mui/material";
+import { AutocompleteProps } from "@mui/material/Autocomplete";
 import { ChangeEventHandler } from "react";
 /**
  * Autocomplete extended props

package/lib/cjs/BackButton.d.ts

@@ -1,4 +1,4 @@
-import { IconButtonProps } from "@mui/material";
+import { IconButtonProps } from "@mui/material/IconButton";
 /**
  * BackButton props
  */

package/lib/cjs/BackButton.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BackButton = BackButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const ArrowBack_1 = __importDefault(require("@mui/icons-material/ArrowBack"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const styles_1 = require("@mui/material/styles");
 const react_router_1 = require("react-router");
 /**
  * BackButton
@@ -17,7 +18,7 @@ function BackButton(props) {
     // Destruct
     const { color = "primary", size = "small", onClick, ...rest } = props;
     // Theme
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     // Navigate
     const navigate = (0, react_router_1.useNavigate)();
     // Color
@@ -31,7 +32,7 @@ function BackButton(props) {
         // Navigate
         navigate(-1);
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "Back", color: color, size: size, onClick: onClickLocal, sx: {
+    return ((0, jsx_runtime_1.jsx)(IconButton_1.default, { "aria-label": "Back", color: color, size: size, onClick: onClickLocal, sx: {
             backgroundColor: pColor.contrastText,
             border: `1px solid ${pColor.light}`
         }, ...rest, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) }));

package/lib/cjs/BridgeCloseButton.d.ts

@@ -1,5 +1,6 @@
 import { IBridgeHost } from "@etsoo/appscript";
-import { BoxProps, IconButtonProps } from "@mui/material";
+import { IconButtonProps } from "@mui/material/IconButton";
+import { BoxProps } from "@mui/material/Box";
 /**
  * Bridge close button props
  */

package/lib/cjs/BridgeCloseButton.js

@@ -7,9 +7,10 @@ exports.BridgeCloseButton = BridgeCloseButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const appscript_1 = require("@etsoo/appscript");
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const ReactApp_1 = require("./app/ReactApp");
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
 /**
  * Bridge close button
  * @param props Props
@@ -33,5 +34,5 @@ function BridgeCloseButton(props) {
             onClick(event);
         host.exit();
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ...boxProps, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "close", onClick: onClickLocal, title: title, ...rest, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.default, { ...boxProps, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { "aria-label": "close", onClick: onClickLocal, title: title, ...rest, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }) }));
 }

package/lib/cjs/ButtonLink.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from "@mui/material";
+import { ButtonProps } from "@mui/material/Button";
 /**
  * ButtonLink props
  */

package/lib/cjs/ButtonLink.js

@@ -1,9 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonLink = ButtonLink;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const react_router_1 = require("react-router");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const react_router_dom_1 = require("react-router-dom");
 /**
  * ButtonLink
  * @param props Props
@@ -13,10 +16,10 @@ function ButtonLink(props) {
     // Destruct
     const { href, state, ...rest } = props;
     // Navigate
-    const navigate = (0, react_router_1.useNavigate)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
     const onClick = href.includes("://")
         ? () => window.open(href, "_blank")
         : () => navigate(href, { state });
     // Layout
-    return (0, jsx_runtime_1.jsx)(material_1.Button, { ...rest, onClick: onClick });
+    return (0, jsx_runtime_1.jsx)(Button_1.default, { ...rest, onClick: onClick });
 }

package/lib/cjs/ButtonPopover.d.ts

@@ -1,4 +1,4 @@
-import { PopoverOrigin } from "@mui/material";
+import { PopoverOrigin } from "@mui/material/Popover";
 import React from "react";
 /**
  * Button popover props

package/lib/cjs/ButtonPopover.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonPopover = ButtonPopover;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Popover_1 = __importDefault(require("@mui/material/Popover"));
 const react_1 = __importDefault(require("react"));
 /**
  * Button popover component
@@ -39,7 +39,7 @@ function ButtonPopover(props) {
     };
     const styles = position === "left" ? { left: 14 } : { right: 14 };
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [button((handler) => setAnchorEl(handler)), (0, jsx_runtime_1.jsx)(material_1.Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: position, vertical: "top" }, anchorOrigin: { horizontal: position, vertical: "bottom" }, slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [button((handler) => setAnchorEl(handler)), (0, jsx_runtime_1.jsx)(Popover_1.default, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: position, vertical: "top" }, anchorOrigin: { horizontal: position, vertical: "bottom" }, slotProps: {
                     paper: {
                         elevation: 0,
                         sx: {

package/lib/cjs/ComboBox.js

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboBox = ComboBox;
 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 shared_2 = require("@etsoo/shared");
 const react_2 = require("@etsoo/react");
-const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 const SearchField_1 = require("./SearchField");
 const InputField_1 = require("./InputField");
 const ReactApp_1 = require("./app/ReactApp");
+const Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 /**
  * ComboBox
  * @param props Props
@@ -122,7 +124,7 @@ function ComboBox(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: 0.5, direction: "row", width: "100%", children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: 0.5, direction: "row", width: "100%", children: [(0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                             // Set value
                             setInputValue(value);
                             // Custom
@@ -130,7 +132,7 @@ function ComboBox(props) {
                                 onChange(event, value, reason, details);
                             if (onValueChange)
                                 onValueChange(value);
-                        }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionKey: getOptionKey, ...rest }), onAdd && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => {
+                        }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionKey: getOptionKey, ...rest }), onAdd && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: () => {
                             onAdd(doLoadData);
                         }, title: addLabel, children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) }))] })] }));
 }

package/lib/cjs/ComboBoxMultiple.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboBoxMultiple = ComboBoxMultiple;
 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 shared_2 = require("@etsoo/shared");
 const react_2 = require("@etsoo/react");
@@ -15,6 +14,8 @@ const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
 const SearchField_1 = require("./SearchField");
 const InputField_1 = require("./InputField");
 const ReactApp_1 = require("./app/ReactApp");
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
 const icon = (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlank_1.default, { fontSize: "small" });
 const checkedIcon = (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" });
 /**
@@ -28,7 +29,7 @@ function ComboBoxMultiple(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
     // Value input ref
     const inputRef = react_1.default.createRef();
     // Options state
@@ -120,7 +121,7 @@ function ComboBoxMultiple(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { value: stateValue == null
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue == null
                     ? []
                     : Array.isArray(stateValue)
                         ? stateValue

package/lib/cjs/ComboBoxPro.d.ts

@@ -1,6 +1,6 @@
-import { AutocompleteProps } from "@mui/material";
 import { InputFieldProps } from "./InputField";
 import { ListType2 } from "@etsoo/shared";
+import { AutocompleteProps } from "@mui/material/Autocomplete";
 export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<AutocompleteProps<D, false, false, true>, "open" | "multiple" | "options" | "renderInput"> & {
     /**
      * Label

package/lib/cjs/ComboBoxPro.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboBoxPro = ComboBoxPro;
 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 shared_1 = require("@etsoo/shared");
 const ReactApp_1 = require("./app/ReactApp");
+const Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
 function ComboBoxPro(props) {
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
@@ -51,7 +51,7 @@ function ComboBoxPro(props) {
             setOptions(options);
         }
     }, [options]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { id: name, value: localValue == null ? "" : localValue, open: open, freeSolo: true, clearOnBlur: false, onOpen: () => {
+    return ((0, jsx_runtime_1.jsx)(Autocomplete_1.default, { id: name, value: localValue == null ? "" : localValue, open: open, freeSolo: true, clearOnBlur: false, onOpen: () => {
             setOpen(true);
         }, onClose: () => {
             setOpen(false);

package/lib/cjs/CountdownButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from "@mui/material";
+import { ButtonProps } from "@mui/material/Button";
 import React from "react";
 /**
  * Countdown button action

package/lib/cjs/CountdownButton.js

@@ -5,7 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CountdownButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
 const react_1 = __importDefault(require("react"));
 /**
  * Countdown button
@@ -58,7 +59,7 @@ exports.CountdownButton = react_1.default.forwardRef((props, ref) => {
         endIcon = undefined;
     }
     else if (state === 1) {
-        endIcon = (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 12 });
+        endIcon = (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 12 });
     }
     else {
         const countdown = (state - ignoreSeconds)
@@ -87,5 +88,5 @@ exports.CountdownButton = react_1.default.forwardRef((props, ref) => {
     react_1.default.useEffect(() => {
         setState(initState);
     }, [initState]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Button, { disabled: disabled, endIcon: endIcon, onClick: localClick, ref: ref, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, { disabled: disabled, endIcon: endIcon, onClick: localClick, ref: ref, ...rest }));
 });

package/lib/cjs/DataGridEx.js

@@ -9,9 +9,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const css_1 = require("@emotion/css");
 const react_1 = require("@etsoo/react");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
 const react_2 = __importDefault(require("react"));
 const DataGridRenderers_1 = require("./DataGridRenderers");
+const styles_1 = require("@mui/material/styles");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const TableSortLabel_1 = __importDefault(require("@mui/material/TableSortLabel"));
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const Paper_1 = __importDefault(require("@mui/material/Paper"));
 // Borders
 const boldBorder = "2px solid rgba(224, 224, 224, 1)";
 const thinBorder = "1px solid rgba(224, 224, 224, 1)";
@@ -77,10 +81,10 @@ function DataGridExCalColumns(columns) {
  */
 function DataGridEx(props) {
     // Theme
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const defaultHeaderRenderer = (states) => {
         const { orderBy } = states.queryPaging;
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "DataGridEx-Header", display: "flex", alignItems: "center", borderBottom: boldBorder, fontWeight: 500, minWidth: widthCalculator.total, height: headerHeight, children: columns.map((column, index) => {
+        return ((0, jsx_runtime_1.jsx)(Box_1.default, { className: "DataGridEx-Header", display: "flex", alignItems: "center", borderBottom: boldBorder, fontWeight: 500, minWidth: widthCalculator.total, height: headerHeight, children: columns.map((column, index) => {
                 // Destruct
                 const { align, field, header, headerCellRenderer, sortable, sortAsc = true, type } = column;
                 // Header text
@@ -99,7 +103,7 @@ function DataGridEx(props) {
                 }
                 else if (sortable && field != null) {
                     const active = orderBy?.some((o) => o.field.toUpperCase() === field.toUpperCase());
-                    sortLabel = ((0, jsx_runtime_1.jsx)(material_1.TableSortLabel, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
+                    sortLabel = ((0, jsx_runtime_1.jsx)(TableSortLabel_1.default, { active: active, direction: sortAsc ? "asc" : "desc", onClick: (_event) => {
                             if (active)
                                 column.sortAsc = !sortAsc;
                             handleSort(field, column.sortAsc);
@@ -108,11 +112,11 @@ function DataGridEx(props) {
                 else {
                     sortLabel = headerText;
                 }
-                return ((0, jsx_runtime_1.jsx)(material_1.Box, { textAlign: (0, react_1.GridAlignGet)(align, type), width: columnWidth(index), children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps, children: sortLabel }) }, field ?? index.toString()));
+                return ((0, jsx_runtime_1.jsx)(Box_1.default, { textAlign: (0, react_1.GridAlignGet)(align, type), width: columnWidth(index), children: (0, jsx_runtime_1.jsx)(Box_1.default, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps, children: sortLabel }) }, field ?? index.toString()));
             }) }));
     };
     function defaultFooterRenderer(rows, states) {
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "DataGridEx-Footer", display: "flex", alignItems: "center", borderTop: thinBorder, marginTop: "1px", minWidth: widthCalculator.total, height: bottomHeight - 1, children: columns.map((column, index) => {
+        return ((0, jsx_runtime_1.jsx)(Box_1.default, { className: "DataGridEx-Footer", display: "flex", alignItems: "center", borderTop: thinBorder, marginTop: "1px", minWidth: widthCalculator.total, height: bottomHeight - 1, children: columns.map((column, index) => {
                 // Destruct
                 const { align, field, type } = column;
                 // Cell props
@@ -127,7 +131,7 @@ function DataGridEx(props) {
                         checkable
                     })
                     : undefined;
-                return ((0, jsx_runtime_1.jsx)(material_1.Box, { textAlign: (0, react_1.GridAlignGet)(align, type), width: columnWidth(index), children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps, children: cell }) }, "bottom-" + (field ?? index.toString())));
+                return ((0, jsx_runtime_1.jsx)(Box_1.default, { textAlign: (0, react_1.GridAlignGet)(align, type), width: columnWidth(index), children: (0, jsx_runtime_1.jsx)(Box_1.default, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps, children: cell }) }, "bottom-" + (field ?? index.toString())));
             }) }));
     }
     // Destruct
@@ -142,7 +146,7 @@ function DataGridEx(props) {
                 cellProps.sx = {
                     padding: "4px!important"
                 };
-                return ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", checked: selected, onChange: (_event, checked) => {
+                return ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { color: "primary", checked: selected, onChange: (_event, checked) => {
                         refs.current.ref?.selectItem(data, checked);
                     } }));
             },
@@ -152,7 +156,7 @@ function DataGridEx(props) {
                 cellProps.sx = {
                     padding: `${hpad}px 4px ${hpad - 1}px 4px!important`
                 };
-                return ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { color: "primary", indeterminate: states.selectedItems.length > 0 &&
+                return ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { color: "primary", indeterminate: states.selectedItems.length > 0 &&
                         states.selectedItems.length < states.loadedItems, checked: states.selectedItems.length > 0, onChange: (_event, checked) => refs.current.ref?.selectAll(checked) }));
             }
         };
@@ -271,7 +275,7 @@ function DataGridEx(props) {
             renderProps: typeof renderProps === "function" ? renderProps(data) : renderProps,
             setItems
         });
-        return ((0, jsx_runtime_1.jsx)("div", { className: rowClass, style: style, "data-row": rowIndex, "data-column": columnIndex, onMouseDown: selectable && !checkable ? handleMouseDown : undefined, onMouseOver: selectable ? handleMouseOver : undefined, onMouseOut: selectable ? handleMouseOut : undefined, onClick: (event) => onClick && data != null && onClick(event, data), onDoubleClick: (event) => onDoubleClick && data != null && onDoubleClick(event, data), children: (0, jsx_runtime_1.jsx)(material_1.Box, { ...cellProps, onMouseEnter: handleMouseEnter, children: child }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: rowClass, style: style, "data-row": rowIndex, "data-column": columnIndex, onMouseDown: selectable && !checkable ? handleMouseDown : undefined, onMouseOver: selectable ? handleMouseOver : undefined, onMouseOut: selectable ? handleMouseOut : undefined, onClick: (event) => onClick && data != null && onClick(event, data), onDoubleClick: (event) => onDoubleClick && data != null && onDoubleClick(event, data), children: (0, jsx_runtime_1.jsx)(Box_1.default, { ...cellProps, onMouseEnter: handleMouseEnter, children: child }) }));
     };
     // Column width calculator
     const widthCalculator = react_2.default.useMemo(() => DataGridExCalColumns(columns), [columns]);
@@ -297,7 +301,7 @@ function DataGridEx(props) {
                 (hideFooter ? 0 : bottomHeight + 1) -
                 scrollbarSize, headerRenderer: headerRenderer, idField: idField, itemRenderer: itemRenderer, footerRenderer: hideFooter ? undefined : footerRenderer, width: Math.max(width ?? 0, widthCalculator.total), mRef: mRefLocal, ...rest }));
     }, [width]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Paper, { sx: {
+    return ((0, jsx_runtime_1.jsx)(Paper_1.default, { sx: {
             fontSize: "0.875rem",
             height,
             "& .DataGridEx-Cell": {

package/lib/cjs/DataGridRenderers.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridRenderers = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const shared_1 = require("@etsoo/shared");
 const Check_1 = __importDefault(require("@mui/icons-material/Check"));
 const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
 const DateText_1 = require("./texts/DateText");
 const react_1 = require("@etsoo/react");
+const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
 /**
  * Data grid renderers
  */
@@ -26,7 +26,7 @@ var DataGridRenderers;
         if (data == null) {
             // First column, show loading indicator
             if (columnIndex === 0)
-                return (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 15 });
+                return (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15 });
             // Others return undefined
             return undefined;
         }

package/lib/cjs/DataSteps.d.ts

@@ -1,5 +1,5 @@
-import { TextFieldProps } from "@mui/material";
 import { InputDialogProps } from "@etsoo/react";
+import { TextFieldProps } from "@mui/material/TextField";
 /**
  * Data step
  */

package/lib/cjs/DataSteps.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataSteps = DataSteps;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const NavigateNext_1 = __importDefault(require("@mui/icons-material/NavigateNext"));
 const NavigateBefore_1 = __importDefault(require("@mui/icons-material/NavigateBefore"));
@@ -15,6 +14,10 @@ const react_1 = __importDefault(require("react"));
 const FlexBox_1 = require("./FlexBox");
 const MUGlobal_1 = require("./MUGlobal");
 const ReactApp_1 = require("./app/ReactApp");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
 /**
  * Data collecting steps component
  * @param props Props
@@ -44,15 +47,15 @@ function DataSteps(props) {
         const [{ callback, ...rest }, more] = steps(index, jsonRef.current);
         app.showInputDialog({
             ...rest,
-            buttons: (n, callback) => ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { paddingLeft: 2, paddingRight: 2, paddingBottom: 2, gap: 2, justifyContent: "space-between", children: [index === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(Close_1.default, {}), onClick: () => n.dismiss(), children: labels.close })) : ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(NavigateBefore_1.default, {}), onClick: () => {
+            buttons: (n, callback) => ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { paddingLeft: 2, paddingRight: 2, paddingBottom: 2, gap: 2, justifyContent: "space-between", children: [index === 0 ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(Close_1.default, {}), onClick: () => n.dismiss(), children: labels.close })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(NavigateBefore_1.default, {}), onClick: () => {
                             n.dismiss();
                             showStep(indexRef.current - 1);
-                        }, children: labels.previousStep })), more ? ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(NavigateNext_1.default, {}), onClick: async (event) => {
+                        }, children: labels.previousStep })), more ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(NavigateNext_1.default, {}), onClick: async (event) => {
                             const result = await callback(event);
                             if (!result)
                                 return;
                             showStep(indexRef.current + 1);
-                        }, children: labels.nextStep })) : ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Check_1.default, {}), onClick: async (event) => {
+                        }, children: labels.nextStep })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Check_1.default, {}), onClick: async (event) => {
                             const result = await callback(event);
                             if (!result)
                                 return;
@@ -78,13 +81,13 @@ function DataSteps(props) {
     react_1.default.useEffect(() => {
         setLocalValue(valueFormatter(jsonRef.current));
     }, [valueFormatter]);
-    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { autoComplete: "off", InputLabelProps: InputLabelProps, inputProps: { style: { cursor: "pointer" } }, InputProps: {
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { autoComplete: "off", InputLabelProps: InputLabelProps, inputProps: { style: { cursor: "pointer" } }, InputProps: {
             onKeyDown: (event) => {
                 if (event.key === "Tab")
                     return;
                 cancelInput(event);
             },
             onPaste: cancelInput,
-            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { edge: "end", size: "small", children: (0, jsx_runtime_1.jsx)(Start_1.default, {}) }) }))
+            endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { edge: "end", size: "small", children: (0, jsx_runtime_1.jsx)(Start_1.default, {}) }) }))
         }, onClick: () => showStep(0), value: localValue, ...rest }));
 }

package/lib/cjs/DataTable.d.ts

@@ -1,4 +1,4 @@
-import { GridRowId, GridValidRowModel } from "@mui/x-data-grid";
+import { GridRowId, GridValidRowModel } from "@mui/x-data-grid/models/gridRows";
 import { DataGridProps } from "@mui/x-data-grid/models/props/DataGridProps";
 /**
  * Data table selected cell params

package/lib/cjs/DataTable.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTable = DataTable;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const x_data_grid_1 = require("@mui/x-data-grid");
 const react_1 = __importDefault(require("react"));
 const ReactApp_1 = require("./app/ReactApp");
+const DataGrid_1 = require("@mui/x-data-grid/DataGrid/DataGrid");
 /**
  * Data table
  * @param props Props
@@ -45,7 +45,7 @@ function DataTable(props) {
                 return;
         }
     }, []);
-    return ((0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { disableColumnMenu: true, hideFooter: true, localeText: localeText, cellModesModel: cellModesModel, onCellModesModelChange: (model) => setCellModesModel(model), onProcessRowUpdateError: onProcessRowUpdateError, slotProps: {
+    return ((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, { disableColumnMenu: true, hideFooter: true, localeText: localeText, cellModesModel: cellModesModel, onCellModesModelChange: (model) => setCellModesModel(model), onProcessRowUpdateError: onProcessRowUpdateError, slotProps: {
             ...slotProps,
             cell: {
                 onFocus: handleCellFocus

package/lib/cjs/DialogButton.d.ts

@@ -1,5 +1,6 @@
-import { Breakpoint, ButtonProps } from "@mui/material";
 import React from "react";
+import { ButtonProps } from "@mui/material/Button";
+import { Breakpoint } from "@mui/material/styles";
 export interface DialogButtonProps extends ButtonProps {
     /**
      * Button label