@etsoo/materialui 1.5.1 → 1.5.3

package/lib/cjs/OptionGroup.js

@@ -6,8 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionGroup = OptionGroup;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
+const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
+const FormGroup_1 = __importDefault(require("@mui/material/FormGroup"));
+const FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
 const OutlinedInput_1 = __importDefault(require("@mui/material/OutlinedInput"));
+const Radio_1 = __importDefault(require("@mui/material/Radio"));
+const RadioGroup_1 = __importDefault(require("@mui/material/RadioGroup"));
 const react_1 = __importDefault(require("react"));
 /**
  * OptionGroup
@@ -60,7 +68,7 @@ function OptionGroup(props) {
         // Value
         const ov = getOptionValue(option);
         // Control
-        const control = multiple ? ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds?.includes(ov), onChange: (event) => {
+        const control = multiple ? ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds?.includes(ov), onChange: (event) => {
                 if (firstOptionValue == null)
                     return;
                 const typeValue = shared_1.Utils.parseString(event.target.value, firstOptionValue);
@@ -76,16 +84,16 @@ function OptionGroup(props) {
                 if (onValueChange)
                     onValueChange(changedValues);
                 setValues(changedValues);
-            } })) : ((0, jsx_runtime_1.jsx)(material_1.Radio, { disabled: disabledIds?.includes(ov), size: itemSize, readOnly: readOnly }));
+            } })) : ((0, jsx_runtime_1.jsx)(Radio_1.default, { disabled: disabledIds?.includes(ov), size: itemSize, readOnly: readOnly }));
         // Label
         const label = getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
         // Value, convert to string
         // Will fail when type is number
         const value = getOptionValue(option);
-        return ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: control, value: value, label: label }, value));
+        return ((0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: control, value: value, label: label }, value));
     });
     // Group
-    const group = multiple ? ((0, jsx_runtime_1.jsx)(material_1.FormGroup, { row: row, children: list })) : ((0, jsx_runtime_1.jsx)(material_1.RadioGroup, { row: row, name: name, value: values[0] ?? "", onChange: (_event, value) => {
+    const group = multiple ? ((0, jsx_runtime_1.jsx)(FormGroup_1.default, { row: row, children: list })) : ((0, jsx_runtime_1.jsx)(RadioGroup_1.default, { row: row, name: name, value: values[0] ?? "", onChange: (_event, value) => {
             if (firstOptionValue == null)
                 return;
             const typeValue = shared_1.Utils.parseString(value, firstOptionValue);
@@ -94,7 +102,7 @@ function OptionGroup(props) {
             setValues([typeValue]);
         }, children: list }));
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: fullWidth, ...rest, children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: required, variant: variant, shrink: true, children: label })), outlined ? ((0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FormControl_1.default, { fullWidth: fullWidth, ...rest, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { required: required, variant: variant, shrink: true, children: label })), outlined ? ((0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
                             cursor: "default",
                             display: "flex",
                             gap: 1,
@@ -104,5 +112,5 @@ function OptionGroup(props) {
                             "& input": {
                                 display: "none"
                             }
-                        } })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && ((0, jsx_runtime_1.jsx)(material_1.FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
+                        } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && ((0, jsx_runtime_1.jsx)(FormHelperText_1.default, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
 }

package/lib/cjs/OptionGroupFlag.d.ts

@@ -1,5 +1,5 @@
 import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
-import { FormControlProps } from "@mui/material";
+import { FormControlProps } from "@mui/material/FormControl";
 import React from "react";
 /**
  * OptionGroupFlag methods ref

package/lib/cjs/OptionGroupFlag.js

@@ -6,7 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionGroupFlag = OptionGroupFlag;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
+const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
+const FormGroup_1 = __importDefault(require("@mui/material/FormGroup"));
+const FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
 const OutlinedInput_1 = __importDefault(require("@mui/material/OutlinedInput"));
 const react_1 = __importDefault(require("react"));
 /**
@@ -56,7 +62,7 @@ function OptionGroupFlag(props) {
         if (ov == null)
             return;
         // Control
-        const control = ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds?.includes(ov), onChange: (event) => {
+        const control = ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds?.includes(ov), onChange: (event) => {
                 if (firstOptionValue == null)
                     return;
                 const typeValue = shared_1.Utils.parseString(event.target.value, firstOptionValue);
@@ -73,12 +79,12 @@ function OptionGroupFlag(props) {
             } }));
         // Label
         const label = getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
-        return ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: control, value: ov, label: label }, ov));
+        return ((0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: control, value: ov, label: label }, ov));
     });
     // Group
-    const group = (0, jsx_runtime_1.jsx)(material_1.FormGroup, { row: row, children: list });
+    const group = (0, jsx_runtime_1.jsx)(FormGroup_1.default, { row: row, children: list });
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: fullWidth, sx: sx, ...rest, children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: required, variant: variant, shrink: true, children: label })), outlined ? ((0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FormControl_1.default, { fullWidth: fullWidth, sx: sx, ...rest, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { required: required, variant: variant, shrink: true, children: label })), outlined ? ((0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
                             cursor: "default",
                             display: "flex",
                             gap: 1,
@@ -88,5 +94,5 @@ function OptionGroupFlag(props) {
                             "& input": {
                                 display: "none"
                             }
-                        } })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && ((0, jsx_runtime_1.jsx)(material_1.FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
+                        } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && ((0, jsx_runtime_1.jsx)(FormHelperText_1.default, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
 }

package/lib/cjs/PercentCircularProgress.d.ts

@@ -1,4 +1,5 @@
-import { CircularProgressProps, TypographyProps } from "@mui/material";
+import { CircularProgressProps } from "@mui/material/CircularProgress";
+import { TypographyProps } from "@mui/material/Typography";
 export type PercentCircularProgressProps = CircularProgressProps & {
     value: number;
     valueUnit?: string;

package/lib/cjs/PercentCircularProgress.js

@@ -1,13 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PercentCircularProgress = PercentCircularProgress;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 function PercentCircularProgress(props) {
     // Destruct
     const { textProps, valueUnit = "%", ...rest } = props;
     // Component
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: "relative", display: "inline-flex" }, children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { variant: "determinate", ...rest }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: { position: "relative", display: "inline-flex" }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.default, { variant: "determinate", ...rest }), (0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
                     top: 0,
                     left: 0,
                     bottom: 0,
@@ -16,5 +21,5 @@ function PercentCircularProgress(props) {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center"
-                }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", component: "div", color: "text.secondary", ...textProps, children: `${Math.round(props.value)}${valueUnit}` }) })] }));
+                }, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", component: "div", color: "text.secondary", ...textProps, children: `${Math.round(props.value)}${valueUnit}` }) })] }));
 }

package/lib/cjs/PercentLinearProgress.d.ts

@@ -1,4 +1,5 @@
-import { LinearProgressProps, TypographyProps } from "@mui/material";
+import { LinearProgressProps } from "@mui/material/LinearProgress";
+import { TypographyProps } from "@mui/material/Typography";
 export type PercentLinearProgressProps = LinearProgressProps & {
     value: number;
     valueUnit?: string;

package/lib/cjs/PercentLinearProgress.js

@@ -1,11 +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.PercentLinearProgress = PercentLinearProgress;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 function PercentLinearProgress(props) {
     // Destruct
     const { textProps, valueUnit = "%", ...rest } = props;
     // Component
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", flexGrow: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", mr: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { variant: "determinate", ...rest }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { minWidth: 35 }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", ...textProps, children: `${Math.round(props.value)}${valueUnit}` }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: { display: "flex", alignItems: "center", flexGrow: 2 }, children: [(0, jsx_runtime_1.jsx)(Box_1.default, { sx: { width: "100%", mr: 1 }, children: (0, jsx_runtime_1.jsx)(LinearProgress_1.default, { variant: "determinate", ...rest }) }), (0, jsx_runtime_1.jsx)(Box_1.default, { sx: { minWidth: 35 }, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", color: "text.secondary", ...textProps, children: `${Math.round(props.value)}${valueUnit}` }) })] }));
 }

package/lib/cjs/ProgressCount.js

@@ -5,7 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProgressCount = ProgressCount;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const react_1 = __importDefault(require("react"));
 /**
  * Progress count
@@ -65,8 +68,8 @@ function ProgressCount(props) {
         };
     }, []);
     if (linear)
-        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", width: "100%" }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "100%", mr: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { variant: variant, value: progressValue }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { minWidth }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: `${value}${valueUnit}` }) })] }));
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { position: "relative", display: "inline-flex" }, children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { variant: variant, value: progressValue }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+        return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: { display: "flex", alignItems: "center", width: "100%" }, children: [(0, jsx_runtime_1.jsx)(Box_1.default, { sx: { width: "100%", mr: 1 }, children: (0, jsx_runtime_1.jsx)(LinearProgress_1.default, { variant: variant, value: progressValue }) }), (0, jsx_runtime_1.jsx)(Box_1.default, { sx: { minWidth }, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", color: "text.secondary", children: `${value}${valueUnit}` }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: { position: "relative", display: "inline-flex" }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.default, { variant: variant, value: progressValue }), (0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
                     top: 0,
                     left: 0,
                     bottom: 0,
@@ -75,5 +78,5 @@ function ProgressCount(props) {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center"
-                }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", component: "div", color: "text.secondary", children: `${value}${valueUnit}` }) })] }));
+                }, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", component: "div", color: "text.secondary", children: `${value}${valueUnit}` }) })] }));
 }

package/lib/cjs/QuickList.d.ts

@@ -1,7 +1,9 @@
 import { ListType2 } from "@etsoo/shared";
-import { ListItemButtonProps, ListItemProps, StackProps } from "@mui/material";
 import React from "react";
 import { InputFieldProps } from "./InputField";
+import { StackProps } from "@mui/material/Stack";
+import { ListItemButtonProps } from "@mui/material/ListItemButton";
+import { ListItemProps } from "@mui/material/ListItem";
 /**
  * Quick list props
  */

package/lib/cjs/QuickList.js

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuickList = QuickList;
 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 FlexBox_1 = require("./FlexBox");
 const ReactApp_1 = require("./app/ReactApp");
+const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
+const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const List_1 = __importDefault(require("@mui/material/List"));
 /**
  * Quick list
  * @param props Props
@@ -41,7 +45,7 @@ function QuickList(props) {
                     event.preventDefault();
                     event.stopPropagation();
                     loadDataLocal(event.target.value);
-                }, fullWidth: true, ...inputProps }), loading ? ((0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})) : items.length === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { textAlign: "center", children: noMatchesLabel })) : ((0, jsx_runtime_1.jsx)(material_1.List, { children: items.map((item) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { disablePadding: true, ...itemProps, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { onClick: (event) => {
+                }, fullWidth: true, ...inputProps }), loading ? ((0, jsx_runtime_1.jsx)(LinearProgress_1.default, {})) : items.length === 0 ? ((0, jsx_runtime_1.jsx)(Typography_1.default, { textAlign: "center", children: noMatchesLabel })) : ((0, jsx_runtime_1.jsx)(List_1.default, { children: items.map((item) => ((0, jsx_runtime_1.jsx)(ListItem_1.default, { disablePadding: true, ...itemProps, children: (0, jsx_runtime_1.jsx)(ListItemButton_1.default, { onClick: (event) => {
                             if (onClick)
                                 onClick(event);
                             if (!event.defaultPrevented && onItemClick)

package/lib/cjs/ResponsibleContainer.d.ts

@@ -1,9 +1,9 @@
-import { SxProps, Theme } from "@mui/material";
 import React from "react";
 import { ListChildComponentProps } from "react-window";
 import { GridColumn, GridJsonData, GridMethodRef, GridTemplateType } from "@etsoo/react";
 import { DataGridExProps } from "./DataGridEx";
 import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "./ScrollerListEx";
+import { SxProps, Theme } from "@mui/material/styles";
 /**
  * ResponsibleContainer props
  */

package/lib/cjs/ResponsibleContainer.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResponsibleContainer = ResponsibleContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@etsoo/react");
 const DataGridEx_1 = require("./DataGridEx");
@@ -15,6 +14,9 @@ const ScrollerListEx_1 = require("./ScrollerListEx");
 const SearchBar_1 = require("./SearchBar");
 const Labels_1 = require("./app/Labels");
 const GridUtils_1 = require("./GridUtils");
+const useMediaQuery_1 = __importDefault(require("@mui/material/useMediaQuery"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
 function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
     const half = typeof paddings == "number" ? paddings / 2 : MUGlobal_1.MUGlobal.half(paddings);
     return {
@@ -42,7 +44,7 @@ function ResponsibleContainer(props) {
         state.ref = ref;
     });
     // Screen size detection
-    const showDataGrid = (0, material_1.useMediaQuery)("(min-width:600px)");
+    const showDataGrid = (0, useMediaQuery_1.default)("(min-width:600px)");
     // Update mounted state
     react_1.default.useEffect(() => {
         return () => {
@@ -150,7 +152,7 @@ function ResponsibleContainer(props) {
         if (showDataGrid) {
             // Delete
             delete rest.itemRenderer;
-            return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "DataGridBox", children: (0, jsx_runtime_1.jsx)(DataGridEx_1.DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
+            return ((0, jsx_runtime_1.jsx)(Box_1.default, { className: "DataGridBox", children: (0, jsx_runtime_1.jsx)(DataGridEx_1.DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
                         if (element != null && elementReady)
                             elementReady(element, true);
                     }, onScroll: onGridScroll, columns: columns, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, ...rest }) }));
@@ -164,7 +166,7 @@ function ResponsibleContainer(props) {
         delete rest.hideFooter;
         delete rest.hoverColor;
         delete rest.selectable;
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "ListBox", sx: { height: heightLocal }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && react_2.ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
+        return ((0, jsx_runtime_1.jsx)(Box_1.default, { className: "ListBox", sx: { height: heightLocal }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && react_2.ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
                     if (element != null && elementReady)
                         elementReady(element, false);
                 }, onScroll: onListScroll, ...rest }) }));
@@ -185,9 +187,9 @@ function ResponsibleContainer(props) {
             ? ".DataGridEx-Body"
             : ".ScrollerListEx-Body";
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: containerBoxSx == null
+    return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: containerBoxSx == null
             ? undefined
-            : containerBoxSx(paddings, hasFields, showDataGrid), children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], className: "SearchBox", sx: {
+            : containerBoxSx(paddings, hasFields, showDataGrid), children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { ref: dimensions[0][0], className: "SearchBox", sx: {
                             height: hasFields ? searchBarHeight : 0
                         }, marginBottom: hasFields ? `${searchBarBottom}px!important` : undefined, children: searchBar }), list] }), pullToRefresh && pullContainer && list != null && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
                     const container = document.querySelector(pullContainer);

package/lib/cjs/ResponsiveStyleValue.d.ts

@@ -1,4 +1,4 @@
-import { Breakpoint } from "@mui/material";
+import { Breakpoint } from "@mui/material/styles";
 /**
  * Responsive style value
  */

package/lib/cjs/ScrollTopFab.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollTopFab = ScrollTopFab;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
 const VerticalAlignTop_1 = __importDefault(require("@mui/icons-material/VerticalAlignTop"));
+const useScrollTrigger_1 = __importDefault(require("@mui/material/useScrollTrigger"));
+const Zoom_1 = __importDefault(require("@mui/material/Zoom"));
+const Fab_1 = __importDefault(require("@mui/material/Fab"));
 /**
  * Scroll to top fab
  * @returns Component
@@ -16,7 +18,7 @@ function ScrollTopFab(props) {
     // Destruct
     const { color, size, target, title } = props;
     // Scroll trigger
-    const trigger = (0, material_1.useScrollTrigger)({
+    const trigger = (0, useScrollTrigger_1.default)({
         target,
         disableHysteresis: true,
         threshold: 120
@@ -26,5 +28,5 @@ function ScrollTopFab(props) {
     const handleClick = () => {
         target.scrollTo({ top: 0 });
     };
-    return trigger ? ((0, jsx_runtime_1.jsx)(material_1.Zoom, { in: trigger, children: (0, jsx_runtime_1.jsx)(material_1.Fab, { color: color, size: size, title: title, onClick: handleClick, children: (0, jsx_runtime_1.jsx)(VerticalAlignTop_1.default, {}) }) })) : ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, {}));
+    return trigger ? ((0, jsx_runtime_1.jsx)(Zoom_1.default, { in: trigger, children: (0, jsx_runtime_1.jsx)(Fab_1.default, { color: color, size: size, title: title, onClick: handleClick, children: (0, jsx_runtime_1.jsx)(VerticalAlignTop_1.default, {}) }) })) : ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, {}));
 }

package/lib/cjs/ScrollerListEx.js

@@ -8,9 +8,9 @@ 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 MUGlobal_1 = require("./MUGlobal");
+const styles_1 = require("@mui/material/styles");
 // Scroll bar size
 const scrollbarSize = 16;
 // Selected class name
@@ -132,7 +132,7 @@ function ScrollerListEx(props) {
         });
     }, onClick, onDoubleClick, onSelectChange, selectedColor = "#edf4fb", ...rest } = props;
     // Theme
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     // Cache calculation
     const itemSizeResult = react_2.default.useMemo(() => {
         if (typeof itemSize === "function")

package/lib/cjs/SearchBar.js

@@ -5,12 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchBar = SearchBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const MoreHoriz_1 = __importDefault(require("@mui/icons-material/MoreHoriz"));
 const shared_1 = require("@etsoo/shared");
 const react_2 = require("@etsoo/react");
 const Labels_1 = require("./app/Labels");
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Drawer_1 = __importDefault(require("@mui/material/Drawer"));
+const Toolbar_1 = __importDefault(require("@mui/material/Toolbar"));
 // Cached width attribute name
 const cachedWidthName = "data-cached-width";
 // Reset form
@@ -243,7 +247,7 @@ function SearchBar(props) {
     return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                     if (form)
                         state.form = form;
-                }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { ref: dimensions[0][0], className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: `${itemGap}px`, width: width, overflow: "hidden", paddingTop: "6px", sx: {
+                }, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { ref: dimensions[0][0], className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: `${itemGap}px`, width: width, overflow: "hidden", paddingTop: "6px", sx: {
                         "& > :not(style)": {
                             flexBasis: "auto",
                             flexGrow: 0,
@@ -258,15 +262,15 @@ function SearchBar(props) {
                             display: "block",
                             visibility: "visible"
                         }
-                    }, children: [fields.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: item }, index))), (0, jsx_runtime_1.jsx)(material_1.IconButton, { title: labels.more, size: "medium", sx: { height: "40px" }, onClick: handleMore, children: (0, jsx_runtime_1.jsx)(MoreHoriz_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "medium", ref: resetButtonRef, onClick: handleReset, children: labels.reset })] }) }), hasMoreItems && ((0, jsx_runtime_1.jsxs)(material_1.Drawer, { anchor: "right", sx: {
+                    }, children: [fields.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: item }, index))), (0, jsx_runtime_1.jsx)(IconButton_1.default, { title: labels.more, size: "medium", sx: { height: "40px" }, onClick: handleMore, children: (0, jsx_runtime_1.jsx)(MoreHoriz_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", size: "medium", ref: resetButtonRef, onClick: handleReset, children: labels.reset })] }) }), hasMoreItems && ((0, jsx_runtime_1.jsxs)(Drawer_1.default, { anchor: "right", sx: {
                     minWidth: "180px",
                     paddingTop: typeof top === "number" ? `${top}px` : undefined
                 }, ModalProps: {
                     keepMounted: true
-                }, open: open, onClose: () => updateOpen(false), children: [top === true && (0, jsx_runtime_1.jsx)(material_1.Toolbar, {}), (0, jsx_runtime_1.jsx)("form", { onChange: moreFormChange, ref: (form) => {
+                }, open: open, onClose: () => updateOpen(false), children: [top === true && (0, jsx_runtime_1.jsx)(Toolbar_1.default, {}), (0, jsx_runtime_1.jsx)("form", { onChange: moreFormChange, ref: (form) => {
                             if (form)
                                 state.moreForm = form;
-                        }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
+                        }, children: (0, jsx_runtime_1.jsx)(Stack_1.default, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
                                 "& > :not(style)": {
                                     minWidth: "100px"
                                 }

package/lib/cjs/SearchField.d.ts

@@ -1,4 +1,4 @@
-import { TextFieldProps } from "@mui/material";
+import { TextFieldProps } from "@mui/material/TextField";
 /**
  * Search field props
  */

package/lib/cjs/SearchField.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchField = SearchField;
 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 TextField_1 = __importDefault(require("@mui/material/TextField"));
 /**
  * Search field
  * @param props Props
@@ -52,5 +52,5 @@ function SearchField(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
 }

package/lib/cjs/SelectEx.d.ts

@@ -1,6 +1,6 @@
-import { SelectProps, SelectVariants } from "@mui/material";
 import React from "react";
 import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
+import { SelectProps, SelectVariants } from "@mui/material/Select";
 /**
  * Extended select component props
  */

package/lib/cjs/SelectEx.js

@@ -5,13 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectEx = SelectEx;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const MUGlobal_1 = require("./MUGlobal");
 const ListItemRightIcon_1 = require("./ListItemRightIcon");
-const Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
 const shared_1 = require("@etsoo/shared");
 const react_2 = require("@etsoo/react");
+const Select_1 = __importDefault(require("@mui/material/Select"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
+const OutlinedInput_1 = __importDefault(require("@mui/material/OutlinedInput"));
+const MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
+const Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
 /**
  * Extended select component
  * @param props Props
@@ -131,11 +140,11 @@ function SelectEx(props) {
         };
     }, [multiple]);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: search ? MUGlobal_1.MUGlobal.searchFieldSize : MUGlobal_1.MUGlobal.inputFieldSize, fullWidth: fullWidth, error: error, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: labelId, variant: variant, shrink: search ? MUGlobal_1.MUGlobal.searchFieldShrink : MUGlobal_1.MUGlobal.inputFieldShrink, required: required, children: label }), (0, jsx_runtime_1.jsx)(material_1.Select, { ref: divRef, value: multiple
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", children: [(0, jsx_runtime_1.jsxs)(FormControl_1.default, { size: search ? MUGlobal_1.MUGlobal.searchFieldSize : MUGlobal_1.MUGlobal.inputFieldSize, fullWidth: fullWidth, error: error, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { id: labelId, variant: variant, shrink: search ? MUGlobal_1.MUGlobal.searchFieldShrink : MUGlobal_1.MUGlobal.inputFieldShrink, required: required, children: label }), (0, jsx_runtime_1.jsx)(Select_1.default, { ref: divRef, value: multiple
                             ? valueState
                             : localOptions.some((o) => o[idField] === valueState)
                                 ? valueState
-                                : "", input: (0, jsx_runtime_1.jsx)(material_1.OutlinedInput, { notched: true, label: label, required: required, inputProps: { "data-reset": inputReset } }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                                : "", input: (0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { notched: true, label: label, required: required, inputProps: { "data-reset": inputReset } }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                             if (onChange) {
                                 onChange(event, child);
                                 // event.preventDefault() will block executing
@@ -167,14 +176,14 @@ function SelectEx(props) {
                             // Option label
                             const label = getLabel(option);
                             // Option
-                            return ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { value: id, onClick: (event) => {
+                            return ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, { value: id, onClick: (event) => {
                                     if (onItemClick) {
                                         onItemClick(event, option);
                                     }
-                                }, style: itemStyle == null ? undefined : itemStyle(option), children: [multiple && ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: Array.isArray(valueState)
+                                }, style: itemStyle == null ? undefined : itemStyle(option), children: [multiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { checked: Array.isArray(valueState)
                                             ? valueState.includes(id)
-                                            : valueState === id })), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: label }), itemIconRenderer && ((0, jsx_runtime_1.jsx)(ListItemRightIcon_1.ListItemRightIcon, { children: itemIconRenderer(option[idField]) }))] }, id));
-                        }) }), helperText != null && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: helperText })] }), refresh != null &&
+                                            : valueState === id })), (0, jsx_runtime_1.jsx)(ListItemText_1.default, { primary: label }), itemIconRenderer && ((0, jsx_runtime_1.jsx)(ListItemRightIcon_1.ListItemRightIcon, { children: itemIconRenderer(option[idField]) }))] }, id));
+                        }) }), helperText != null && (0, jsx_runtime_1.jsx)(FormHelperText_1.default, { children: helperText })] }), refresh != null &&
                 loadData != null &&
-                (typeof refresh === "string" ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", title: refresh, onClick: refreshData, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) })) : (refresh))] }));
+                (typeof refresh === "string" ? ((0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", title: refresh, onClick: refreshData, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) })) : (refresh))] }));
 }

package/lib/cjs/ShowDataComparison.js

@@ -1,12 +1,19 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShowDataComparison = void 0;
 exports.IsAuditLineUpdateData = IsAuditLineUpdateData;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const notificationbase_1 = require("@etsoo/notificationbase");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
 const ReactApp_1 = require("./app/ReactApp");
+const Table_1 = __importDefault(require("@mui/material/Table"));
+const TableHead_1 = __importDefault(require("@mui/material/TableHead"));
+const TableRow_1 = __importDefault(require("@mui/material/TableRow"));
+const TableCell_1 = __importDefault(require("@mui/material/TableCell"));
+const TableBody_1 = __importDefault(require("@mui/material/TableBody"));
 /**
  * Check obj is instance of AuditLineChangesDto
  * @param obj Input
@@ -54,7 +61,7 @@ const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true) => {
     }));
     if (equalCheck)
         rows = rows.filter((item) => !shared_1.Utils.equals(item.oldValue, item.newValue));
-    const inputs = ((0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "18%", children: field }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "41%", align: "right", children: oldValue }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "41%", align: "right", children: newValue })] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: rows.map((row) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: getLabel(row.field) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { align: "right", children: formatValue(row.oldValue, app) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { align: "right", children: formatValue(row.newValue, app) })] }, row.field))) })] }));
+    const inputs = ((0, jsx_runtime_1.jsxs)(Table_1.default, { children: [(0, jsx_runtime_1.jsx)(TableHead_1.default, { children: (0, jsx_runtime_1.jsxs)(TableRow_1.default, { children: [(0, jsx_runtime_1.jsx)(TableCell_1.default, { width: "18%", children: field }), (0, jsx_runtime_1.jsx)(TableCell_1.default, { width: "41%", align: "right", children: oldValue }), (0, jsx_runtime_1.jsx)(TableCell_1.default, { width: "41%", align: "right", children: newValue })] }) }), (0, jsx_runtime_1.jsx)(TableBody_1.default, { children: rows.map((row) => ((0, jsx_runtime_1.jsxs)(TableRow_1.default, { children: [(0, jsx_runtime_1.jsx)(TableCell_1.default, { children: getLabel(row.field) }), (0, jsx_runtime_1.jsx)(TableCell_1.default, { align: "right", children: formatValue(row.oldValue, app) }), (0, jsx_runtime_1.jsx)(TableCell_1.default, { align: "right", children: formatValue(row.newValue, app) })] }, row.field))) })] }));
     app.notifier.alert([undefined, modelTitle], undefined, notificationbase_1.NotificationMessageType.Info, { fullScreen: app.smDown, inputs });
 };
 exports.ShowDataComparison = ShowDataComparison;

package/lib/cjs/Switch.d.ts

@@ -1,4 +1,4 @@
-import { FormControlLabelProps } from "@mui/material";
+import { FormControlLabelProps } from "@mui/material/FormControlLabel";
 /**
  * Switch props
  */

package/lib/cjs/Switch.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = Switch;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
 const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
 const Switch_1 = __importDefault(require("@mui/material/Switch"));
+const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
 /**
  * Switch
  * @param props Props
@@ -36,5 +36,5 @@ function Switch(props) {
         setControlChecked(controlChecked);
     }, [controlChecked]);
     // Layout
-    return (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: control, ...rest });
+    return (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: control, ...rest });
 }