@etsoo/materialui 1.5.2 → 1.5.3

package/lib/cjs/DialogButton.js

@@ -5,9 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogButton = DialogButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const Labels_1 = require("./app/Labels");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+const DialogContentText_1 = __importDefault(require("@mui/material/DialogContentText"));
+const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
 /**
  * Dialog button
  * @param props Props
@@ -35,9 +41,9 @@ function DialogButton(props) {
             onClick(event);
     };
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [icon == null ? ((0, jsx_runtime_1.jsx)(material_1.Button, { ...rest, title: title, onClick: onClickLocal, children: children })) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, { ...rest, onClick: onClickLocal, title: title ?? children?.toString(), children: icon })), (0, jsx_runtime_1.jsxs)(material_1.Dialog, { disableScrollLock: disableScrollLock, fullScreen: fullScreen, fullWidth: fullWidth, maxWidth: maxWidth, open: open, onClose: () => setOpen(false), onClick: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [icon == null ? ((0, jsx_runtime_1.jsx)(Button_1.default, { ...rest, title: title, onClick: onClickLocal, children: children })) : ((0, jsx_runtime_1.jsx)(IconButton_1.default, { ...rest, onClick: onClickLocal, title: title ?? children?.toString(), children: icon })), (0, jsx_runtime_1.jsxs)(Dialog_1.default, { disableScrollLock: disableScrollLock, fullScreen: fullScreen, fullWidth: fullWidth, maxWidth: maxWidth, open: open, onClose: () => setOpen(false), onClick: (event) => {
                     // The dialog will be embeded and the click event will bubble up
                     // Stop propatation but will also cancel onClose and onBackdropClick event
                     event.stopPropagation();
-                }, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: dialogTitle ?? title ?? children }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogContentText, { component: contentPre ? "pre" : "span", children: content }), inputs] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => setOpen(false), children: buttonLabel }) })] })] }));
+                }, children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, { children: dialogTitle ?? title ?? children }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { children: [(0, jsx_runtime_1.jsx)(DialogContentText_1.default, { component: contentPre ? "pre" : "span", children: content }), inputs] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => setOpen(false), children: buttonLabel }) })] })] }));
 }

package/lib/cjs/DnDList.d.ts

@@ -1,7 +1,7 @@
 import type { UniqueIdentifier } from "@dnd-kit/core";
-import { SortingStrategy } from "@dnd-kit/sortable";
+import { SortingStrategy } from "@dnd-kit/sortable/dist/types/strategies";
 import { DataTypes } from "@etsoo/shared";
-import { Theme } from "@mui/material";
+import { Theme } from "@mui/material/styles";
 import React, { CSSProperties } from "react";
 /**
  * DnD item default style

package/lib/cjs/DnDList.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DnDItemStyle = void 0;
 exports.DnDList = DnDList;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
+const styles_1 = require("@mui/material/styles");
 const react_1 = __importDefault(require("react"));
 function SortableItem(props) {
     // Destruct
@@ -55,7 +56,7 @@ function DnDList(props) {
     // Destruct
     const { keyField, height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
     // Theme
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     // States
     const [items, setItems] = react_1.default.useState([]);
     const [activeId, setActiveId] = react_1.default.useState();
@@ -152,7 +153,7 @@ function DnDList(props) {
         });
     }, []);
     if (dnd == null) {
-        return (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: height });
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", width: "100%", height: height });
     }
     const [DndContextType, SortableContextType, useSortableType, rectSortingStrategyType, rectSwappingStrategyType, horizontalListSortingStrategyType, verticalListSortingStrategyType, CSSType] = dnd;
     const strategy = typeof sortingStrategy === "function"

package/lib/cjs/DraggablePaperComponent.d.ts

@@ -1,4 +1,4 @@
-import { PaperProps } from "@mui/material";
+import { PaperProps } from "@mui/material/Paper";
 /**
  * Draggable paper component
  * @param props Props

package/lib/cjs/DraggablePaperComponent.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DraggablePaperComponent = DraggablePaperComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Paper_1 = __importDefault(require("@mui/material/Paper"));
 const react_1 = __importDefault(require("react"));
 const react_draggable_1 = __importDefault(require("react-draggable"));
 /**
@@ -15,5 +15,5 @@ const react_draggable_1 = __importDefault(require("react-draggable"));
  */
 function DraggablePaperComponent(props) {
     const nodeRef = react_1.default.useRef(null);
-    return ((0, jsx_runtime_1.jsx)(react_draggable_1.default, { handle: ".draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]', nodeRef: nodeRef, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { ref: nodeRef, ...props }) }));
+    return ((0, jsx_runtime_1.jsx)(react_draggable_1.default, { handle: ".draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]', nodeRef: nodeRef, children: (0, jsx_runtime_1.jsx)(Paper_1.default, { ref: nodeRef, ...props }) }));
 }

package/lib/cjs/EmailInput.d.ts

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

package/lib/cjs/EmailInput.js

@@ -1,17 +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.EmailInput = EmailInput;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
 /**
  * Email input
  * @param props Props
  */
 function EmailInput(props) {
-    // Destruct
-    const { inputProps = {}, ...rest } = props;
-    // Default max length
-    inputProps.maxLength ??= 128;
+    props.slotProps ??= {};
+    props.slotProps.htmlInput ??= { maxLength: 128 };
     // Layout
-    return (0, jsx_runtime_1.jsx)(material_1.TextField, { type: "email", fullWidth: true, inputProps: inputProps, ...rest });
+    return (0, jsx_runtime_1.jsx)(TextField_1.default, { type: "email", fullWidth: true, ...props });
 }

package/lib/cjs/ErrorAlert.d.ts

@@ -1,4 +1,4 @@
-import { AlertProps } from "@mui/material";
+import { AlertProps } from "@mui/material/Alert";
 /**
  * Error alert props
  */

package/lib/cjs/ErrorAlert.js

@@ -1,8 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorAlert = ErrorAlert;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Alert_1 = __importDefault(require("@mui/material/Alert"));
 const ReactApp_1 = require("./app/ReactApp");
 /**
  * Error alert component
@@ -15,5 +18,5 @@ function ErrorAlert(props) {
     // Destruct
     const { message = app?.get("idError"), ...alertProps } = props;
     // Layout
-    return ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", ...alertProps, children: message }));
+    return ((0, jsx_runtime_1.jsx)(Alert_1.default, { severity: "error", ...alertProps, children: message }));
 }

package/lib/cjs/FabBox.d.ts

@@ -1,4 +1,5 @@
-import { BoxProps, PaperProps } from "@mui/material";
+import { BoxProps } from "@mui/material/Box";
+import { PaperProps } from "@mui/material/Paper";
 type SharedProps = keyof BoxProps & keyof PaperProps;
 /**
  * Fabs container box props

package/lib/cjs/FabBox.js

@@ -5,7 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FabBox = FabBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Paper_1 = __importDefault(require("@mui/material/Paper"));
+const styles_1 = require("@mui/material/styles");
 const react_1 = __importDefault(require("react"));
 const initOpactiy = 0.15;
 /**
@@ -17,12 +19,12 @@ function FabBox(props) {
     // Destruct
     const { columnDirection, fabPanel = columnDirection, itemGap = 1, sx, ...rest } = props;
     // Theme
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const spaceGap = theme.spacing(itemGap);
     const [opacity, setOpacity] = react_1.default.useState(initOpactiy);
     if (columnDirection == null)
         return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, {});
-    return fabPanel ? ((0, jsx_runtime_1.jsx)(material_1.Paper, { sx: {
+    return fabPanel ? ((0, jsx_runtime_1.jsx)(Paper_1.default, { sx: {
             position: "fixed",
             display: "flex",
             alignItems: "center",
@@ -31,7 +33,7 @@ function FabBox(props) {
             gap: spaceGap,
             opacity: opacity,
             ...sx
-        }, onMouseEnter: () => setOpacity(1), onMouseLeave: () => setOpacity(initOpactiy), ...rest })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+        }, onMouseEnter: () => setOpacity(1), onMouseLeave: () => setOpacity(initOpactiy), ...rest })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
             position: "fixed",
             display: "flex",
             alignItems: "center",

package/lib/cjs/FieldSetEx.d.ts

@@ -1,4 +1,4 @@
-import { FormControlProps } from "@mui/material";
+import { FormControlProps } from "@mui/material/FormControl";
 import React from "react";
 /**
  * FieldSetEx props

package/lib/cjs/FieldSetEx.js

@@ -5,7 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldSetEx = FieldSetEx;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
+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"));
 /**
@@ -17,7 +19,7 @@ function FieldSetEx(props) {
     // Destruct
     const { label, helperText, required, fullWidth, children, ...rest } = props;
     // 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: "outlined", shrink: true, children: label })), (0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { label: label && required ? label + " *" : label, notched: true, endAdornment: children, 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: "outlined", shrink: true, children: label })), (0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { label: label && required ? label + " *" : label, notched: true, endAdornment: children, sx: {
                             cursor: "default",
                             display: "flex",
                             flexWrap: "wrap",
@@ -28,5 +30,5 @@ function FieldSetEx(props) {
                             "& input": {
                                 display: "none"
                             }
-                        } })] }), helperText && ((0, jsx_runtime_1.jsx)(material_1.FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
+                        } })] }), helperText && ((0, jsx_runtime_1.jsx)(FormHelperText_1.default, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
 }

package/lib/cjs/FileUploadButton.d.ts

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

package/lib/cjs/FileUploadButton.js

@@ -1,8 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileUploadButton = FileUploadButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Button_1 = __importDefault(require("@mui/material/Button"));
 /**
  * File upload button
  * @param props Props
@@ -13,7 +16,7 @@ function FileUploadButton(props) {
     const { maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children, ...rest } = props;
     const { onChange } = inputProps ?? {};
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(material_1.Button, { component: "label", ...rest, children: [children, (0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, onChange: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(Button_1.default, { component: "label", ...rest, children: [children, (0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, onChange: (event) => {
                     if (onChange)
                         onChange(event);
                     if (event.isDefaultPrevented())

package/lib/cjs/FlexBox.d.ts

@@ -1,4 +1,4 @@
-import { StackProps } from "@mui/material";
+import { StackProps } from "@mui/material/Stack";
 /**
  * Horizonal box
  * @param props Props

package/lib/cjs/FlexBox.js

@@ -1,17 +1,20 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HBox = HBox;
 exports.HBoxList = HBoxList;
 exports.VBox = VBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
 /**
  * Horizonal box
  * @param props Props
  * @returns Component
  */
 function HBox(props) {
-    return (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", width: "100%", ...props });
+    return (0, jsx_runtime_1.jsx)(Stack_1.default, { direction: "row", width: "100%", ...props });
 }
 /**
  * Horizonal box with list items
@@ -19,7 +22,7 @@ function HBox(props) {
  * @returns Component
  */
 function HBoxList(props) {
-    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 1, gap: 1, direction: "row", flexWrap: "wrap", width: "100%", ...props }));
+    return ((0, jsx_runtime_1.jsx)(Stack_1.default, { spacing: 1, gap: 1, direction: "row", flexWrap: "wrap", width: "100%", ...props }));
 }
 /**
  * Vertial box
@@ -27,5 +30,5 @@ function HBoxList(props) {
  * @returns Component
  */
 function VBox(props) {
-    return (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", ...props });
+    return (0, jsx_runtime_1.jsx)(Stack_1.default, { direction: "column", ...props });
 }

package/lib/cjs/HiSelector.d.ts

@@ -1,7 +1,8 @@
 import { DataTypes, IdDefaultType, LabelDefaultType } from "@etsoo/shared";
-import { GridSize, SelectChangeEvent } from "@mui/material";
 import React from "react";
 import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
+import { GridSize } from "@mui/material/Grid";
+import { SelectChangeEvent } from "@mui/material/Select";
 /**
  * Hierarchy selector props
  */

package/lib/cjs/HiSelector.js

@@ -5,9 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HiSelector = HiSelector;
 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 Grid_1 = __importDefault(require("@mui/material/Grid"));
+const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
 /**
  * Hierarchy selector
  * @param props Prop
@@ -45,5 +46,5 @@ function HiSelector(props) {
     react_1.default.useEffect(() => {
         updateValue(currentValue);
     }, [currentValue]);
-    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 }) })), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: `${currentValue ?? ""}` }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { idField: idField, label: labels[0], labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, required: required, error: error, helperText: helperText, variant: variant }) }), localValues[0] != null && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { idField: idField, label: labels[1], labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange, variant: variant }, `${localValues[0]}`) })), localValues[1] != null && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { idField: idField, label: labels[2], labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange, variant: variant }, `${localValues[1]}`) })), localValues[2] != null && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { idField: idField, label: labels[3], labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange, variant: variant }, `${localValues[2]}`) }))] }));
+    return ((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 }) })), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: `${currentValue ?? ""}` }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { idField: idField, label: labels[0], labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, required: required, error: error, helperText: helperText, variant: variant }) }), localValues[0] != null && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { idField: idField, label: labels[1], labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange, variant: variant }, `${localValues[0]}`) })), localValues[1] != null && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { idField: idField, label: labels[2], labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange, variant: variant }, `${localValues[1]}`) })), localValues[2] != null && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { idField: idField, label: labels[3], labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange, variant: variant }, `${localValues[2]}`) }))] }));
 }

package/lib/cjs/HiSelectorTL.d.ts

@@ -1,7 +1,8 @@
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
-import { AutocompleteChangeReason, GridSize } from "@mui/material";
 import React from "react";
 import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
+import { GridSize } from "@mui/material/Grid";
+import { AutocompleteChangeReason } from "@mui/material/Autocomplete";
 /**
  * Hierarchy tiplist selector props
  */

package/lib/cjs/HiSelectorTL.js

@@ -5,9 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HiSelectorTL = HiSelectorTL;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const Tiplist_1 = require("./Tiplist");
+const Grid_1 = __importDefault(require("@mui/material/Grid"));
+const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
 /**
  * Hierarchy tiplist selector
  * @param props Prop
@@ -39,5 +40,5 @@ function HiSelectorTL(props) {
     react_1.default.useEffect(() => {
         updateValue(currentValue);
     }, [currentValue]);
-    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 }) })), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: `${currentValue ?? ""}` }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { idField: idField, label: labels[0], name: "tab1", search: search, fullWidth: true, idValue: values[0], loadData: (keyword, id, items) => loadData(keyword, id, items), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (event, value, reason) => doChange(0, event, value, reason) }) }), localValues[0] != null && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { label: labels[1], idField: idField, name: "tab2", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[0]), idValue: values[1], onChange: (event, value, reason) => doChange(1, event, value, reason) }, `${localValues[0]}`) })), localValues[1] != null && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { label: labels[2], idField: idField, name: "tab3", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[1]), idValue: values[2], onChange: (event, value, reason) => doChange(2, event, value, reason) }, `${localValues[1]}`) })), localValues[2] != null && ((0, jsx_runtime_1.jsx)(material_1.Grid2, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { label: labels[3], idField: idField, name: "tab4", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[2]), idValue: values[3], onChange: (event, value, reason) => doChange(3, event, value, reason) }, `${localValues[2]}`) }))] }));
+    return ((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 }) })), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: `${currentValue ?? ""}` }), (0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { idField: idField, label: labels[0], name: "tab1", search: search, fullWidth: true, idValue: values[0], loadData: (keyword, id, items) => loadData(keyword, id, items), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (event, value, reason) => doChange(0, event, value, reason) }) }), localValues[0] != null && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { label: labels[1], idField: idField, name: "tab2", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[0]), idValue: values[1], onChange: (event, value, reason) => doChange(1, event, value, reason) }, `${localValues[0]}`) })), localValues[1] != null && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { label: labels[2], idField: idField, name: "tab3", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[1]), idValue: values[2], onChange: (event, value, reason) => doChange(2, event, value, reason) }, `${localValues[1]}`) })), localValues[2] != null && ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: breakPoints, children: (0, jsx_runtime_1.jsx)(Tiplist_1.Tiplist, { label: labels[3], idField: idField, name: "tab4", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[2]), idValue: values[3], onChange: (event, value, reason) => doChange(3, event, value, reason) }, `${localValues[2]}`) }))] }));
 }

package/lib/cjs/IconButtonLink.d.ts

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

package/lib/cjs/IconButtonLink.js

@@ -1,8 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconButtonLink = IconButtonLink;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
 const react_router_1 = require("react-router");
 /**
  * IconButtonLink
@@ -15,5 +18,5 @@ function IconButtonLink(props) {
     // Navigate
     const navigate = (0, react_router_1.useNavigate)();
     // Layout
-    return (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...rest, onClick: () => navigate(href, { state }) });
+    return (0, jsx_runtime_1.jsx)(IconButton_1.default, { ...rest, onClick: () => navigate(href, { state }) });
 }

package/lib/cjs/InputField.d.ts

@@ -1,5 +1,5 @@
-import { TextFieldProps } from "@mui/material";
 import React from "react";
+import { TextFieldProps } from "@mui/material/TextField";
 /**
  * Input field props
  */
@@ -26,7 +26,7 @@ export type InputFieldProps = TextFieldProps & {
  * @param props Props
  * @returns Component
  */
-export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@mui/material").StandardTextFieldProps & {
+export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@mui/material/TextField").StandardTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
@@ -43,7 +43,7 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Minimum characters to trigger the change event
      */
     minChars?: number;
-}, "ref"> | Omit<import("@mui/material").OutlinedTextFieldProps & {
+}, "ref"> | Omit<import("@mui/material/TextField").OutlinedTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */
@@ -60,7 +60,7 @@ export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@
      * Minimum characters to trigger the change event
      */
     minChars?: number;
-}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
+}, "ref"> | Omit<import("@mui/material/TextField").FilledTextFieldProps & {
     /**
      * Change delay (ms) to avoid repeatly dispatch onChange
      */

package/lib/cjs/InputField.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputField = void 0;
 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"));
 /**
  * Input field
  * @param props Props
@@ -54,5 +54,5 @@ exports.InputField = react_2.default.forwardRef((props, ref) => {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ref: ref, InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { ref: ref, InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
 });

package/lib/cjs/InputTipField.js

@@ -5,11 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputTipField = InputTipField;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const react_1 = __importDefault(require("react"));
 const InputField_1 = require("./InputField");
 const ReactApp_1 = require("./app/ReactApp");
+const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+const Popover_1 = __importDefault(require("@mui/material/Popover"));
+const List_1 = __importDefault(require("@mui/material/List"));
+const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
 /**
  * InputField with tips
  * @param props Props
@@ -26,7 +29,7 @@ function InputTipField(props) {
     const { labelProps = {
         title: app?.get("clickForDetails"),
         sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
-    }, changeDelay = 480, onChangeDelay, loadData, itemLabel = (item) => item.label, renderItem = (item) => (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: itemLabel(item) }, item.id), slotProps = {}, ...rest } = props;
+    }, changeDelay = 480, onChangeDelay, loadData, itemLabel = (item) => item.label, renderItem = (item) => (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: itemLabel(item) }, item.id), slotProps = {}, ...rest } = props;
     const { input, ...slotRests } = slotProps;
     const load = (value) => {
         if (value.length < 2) {
@@ -38,16 +41,16 @@ function InputTipField(props) {
             setTitle(title);
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Popover, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Popover_1.default, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "left"
-                }, children: data && (0, jsx_runtime_1.jsx)(material_1.List, { children: data.map((item) => renderItem(item)) }) }), (0, jsx_runtime_1.jsx)(InputField_1.InputField, { changeDelay: changeDelay, onChangeDelay: (event) => {
+                }, children: data && (0, jsx_runtime_1.jsx)(List_1.default, { children: data.map((item) => renderItem(item)) }) }), (0, jsx_runtime_1.jsx)(InputField_1.InputField, { changeDelay: changeDelay, onChangeDelay: (event) => {
                     load(event.target.value);
                     if (onChangeDelay)
                         onChangeDelay(event);
                 }, slotProps: {
                     input: {
-                        endAdornment: title ? ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(Typography_1.default, { onClick: (event) => {
+                        endAdornment: title ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: (0, jsx_runtime_1.jsx)(Typography_1.default, { onClick: (event) => {
                                     setAnchorEl(event.currentTarget);
                                 }, ...labelProps, children: title }) })) : undefined,
                         ...input

package/lib/cjs/IntInputField.d.ts

@@ -1,6 +1,6 @@
-import { BoxProps } from "@mui/material";
 import React from "react";
 import { InputFieldProps } from "./InputField";
+import { BoxProps } from "@mui/material/Box";
 /**
  * Integer input field props
  */

package/lib/cjs/IntInputField.js

@@ -5,12 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IntInputField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 const Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
 const react_1 = __importDefault(require("react"));
 const shared_1 = require("@etsoo/shared");
 const InputField_1 = require("./InputField");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
 /**
  * Integer input field (controlled)
  */
@@ -48,8 +50,8 @@ exports.IntInputField = react_1.default.forwardRef((props, ref) => {
             style: inputStyle,
             inputMode: "numeric"
         }, InputProps: {
-            startAdornment: symbol ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: symbol }) })) : undefined,
-            endAdornment: endSymbol ? ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: endSymbol })) : undefined
+            startAdornment: symbol ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "start", children: symbol }) })) : undefined,
+            endAdornment: endSymbol ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: endSymbol })) : undefined
         }, sx: buttons
             ? {
                 "& input[type=number]::-webkit-inner-spin-button": {
@@ -82,13 +84,13 @@ exports.IntInputField = react_1.default.forwardRef((props, ref) => {
                 onChangeDelay(event);
         }, onFocus: onFocus, required: required, ...rest }));
     if (buttons)
-        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+        return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: {
                 display: "flex",
                 alignItems: "center",
                 width: "100%",
                 gap: 0.5,
                 ...boxProps
-            }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => {
+            }, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: () => {
                         if (localValue == null)
                             return;
                         const value = shared_1.NumberUtils.parse(localValue);
@@ -98,7 +100,7 @@ exports.IntInputField = react_1.default.forwardRef((props, ref) => {
                             setValue(undefined, "SUB");
                         else
                             setValue(value - step, "SUB");
-                    }, children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }), layout, (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => {
+                    }, children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }), layout, (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: () => {
                         if (localValue == null) {
                             setValue(min, "ADD");
                             return;

package/lib/cjs/ItemList.js

@@ -6,8 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ItemList = ItemList;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
 const shared_1 = require("@etsoo/shared");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+const List_1 = __importDefault(require("@mui/material/List"));
+const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
+const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
 /**
  * Item list component
  * @param props Properties
@@ -63,9 +69,9 @@ function ItemList(props) {
             onClose(item, true);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { className: className, variant: variant, startIcon: icon, color: color, size: size, onClick: clickHandler, children: buttonLabel ?? (currentItem ? getLabel(currentItem) : undefined) }), (0, jsx_runtime_1.jsxs)(material_1.Dialog, { "aria-labelledby": "dialog-title", open: open, onClose: closeHandler, children: [title && (0, jsx_runtime_1.jsx)(material_1.DialogTitle, { id: "dialog-title", children: title }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { sx: { minWidth }, children: (0, jsx_runtime_1.jsx)(material_1.List, { children: items.map((item) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { className: className, variant: variant, startIcon: icon, color: color, size: size, onClick: clickHandler, children: buttonLabel ?? (currentItem ? getLabel(currentItem) : undefined) }), (0, jsx_runtime_1.jsxs)(Dialog_1.default, { "aria-labelledby": "dialog-title", open: open, onClose: closeHandler, children: [title && (0, jsx_runtime_1.jsx)(DialogTitle_1.default, { id: "dialog-title", children: title }), (0, jsx_runtime_1.jsx)(DialogContent_1.default, { sx: { minWidth }, children: (0, jsx_runtime_1.jsx)(List_1.default, { children: items.map((item) => {
                                 const id = item[idField];
-                                return ((0, jsx_runtime_1.jsx)(material_1.ListItemButton, { disabled: id === (currentItem ? currentItem[idField] : undefined) &&
-                                        !keepClick, onClick: () => closeItemHandler(item), children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { children: getLabel(item) }) }, id));
+                                return ((0, jsx_runtime_1.jsx)(ListItemButton_1.default, { disabled: id === (currentItem ? currentItem[idField] : undefined) &&
+                                        !keepClick, onClick: () => closeItemHandler(item), children: (0, jsx_runtime_1.jsx)(ListItemText_1.default, { children: getLabel(item) }) }, id));
                             }) }) })] })] }));
 }