@etsoo/materialui 1.6.39 → 1.6.42

package/lib/cjs/Tiplist.js

@@ -62,7 +62,7 @@ function Tiplist(props) {
         }
         // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
         // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
-        Object.assign(params.inputProps, {
+        Object.assign(params.slotProps.htmlInput, {
             autoComplete: inputAutoComplete,
             "data-reset": inputReset
         });
@@ -176,7 +176,7 @@ function Tiplist(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange, disabled: disabled }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, disabled: disabled, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : (localIdValue ?? ""))}`, readOnly: true, onChange: inputOnChange, disabled: disabled }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, disabled: disabled, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value);
                     // Custom

package/lib/cjs/TiplistPro.js

@@ -162,7 +162,7 @@ function TiplistPro(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange, disabled: disabled }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, disabled: disabled, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : (localIdValue ?? "")), readOnly: true, onChange: inputOnChange, disabled: disabled }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, disabled: disabled, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
                     if (typeof value === "object") {
                         // Set value
                         setInputValue(value);

package/lib/cjs/TwoFieldInput.d.ts

@@ -3,7 +3,7 @@ type ValueType = string | number | Date | null | undefined;
 /**
  * TwoField Input props
  */
-export type TwoFieldInputProps = Omit<InputFieldProps, "InputProps" | "value"> & {
+export type TwoFieldInputProps = Omit<InputFieldProps, "value"> & {
     /**
      * Values
      */

package/lib/cjs/TwoFieldInput.js

@@ -19,7 +19,8 @@ const Input_1 = __importDefault(require("@mui/material/Input"));
  */
 function TwoFieldInput(props) {
     // Destruct
-    const { name, inputProps, type = inputProps?.inputMode, values, onValuesChange, onChange, onInput, ...rest } = props;
+    const { name, slotProps, type, values, onValuesChange, onChange, onInput, ...rest } = props;
+    const { htmlInput, input, ...restSlotProps } = slotProps ?? {};
     // Local values
     const localValues = values == null
         ? [null, null]
@@ -60,11 +61,15 @@ function TwoFieldInput(props) {
         valueRef.current = localValues;
     }, [localValues]);
     // Layout
-    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { name: `${name}-start`, type: type, value: formatValue(localValues[0], type), ref: dimensions[0][0], inputProps: inputProps, InputProps: {
-            endAdornment: ((0, jsx_runtime_1.jsxs)(InputAdornment_1.default, { position: "end", sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 1
-                }, children: [(0, jsx_runtime_1.jsx)(ArrowRightAlt_1.default, {}), (0, jsx_runtime_1.jsx)(Input_1.default, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, inputProps: inputProps })] }))
+    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { name: `${name}-start`, type: type, value: formatValue(localValues[0], type), ref: dimensions[0][0], slotProps: {
+            input: {
+                ...input,
+                endAdornment: ((0, jsx_runtime_1.jsxs)(InputAdornment_1.default, { position: "end", sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1
+                    }, children: [(0, jsx_runtime_1.jsx)(ArrowRightAlt_1.default, {}), (0, jsx_runtime_1.jsx)(Input_1.default, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, slotProps: { input: htmlInput } })] }))
+            },
+            ...restSlotProps
         }, onInput: onInput, onChange: handleChange, ...rest }));
 }

package/lib/cjs/UserAvatarEditor.js

@@ -15,6 +15,7 @@ const Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 const Labels_1 = require("./app/Labels");
 const FileUploadButton_1 = require("./FileUploadButton");
+const react_avatar_editor_1 = __importDefault(require("react-avatar-editor"));
 const Stack_1 = __importDefault(require("@mui/material/Stack"));
 const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
 const ButtonGroup_1 = __importDefault(require("@mui/material/ButtonGroup"));
@@ -42,7 +43,7 @@ function UserAvatarEditor(props) {
     // Calculated max width
     const maxWidthCalculated = maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
     // Ref
-    const ref = react_1.default.createRef();
+    const ref = react_1.default.useRef(null);
     // Image type
     const type = react_1.default.useRef("image/jpeg");
     // Button ref
@@ -87,6 +88,10 @@ function UserAvatarEditor(props) {
     };
     // Handle image load
     const handleLoad = (imageInfo) => {
+        if (imageInfo.resource == null ||
+            imageInfo.height == null ||
+            imageInfo.width == null)
+            return;
         // Ignore too small images
         if (imageInfo.resource.width < 10 || imageInfo.resource.height < 10)
             return;
@@ -167,8 +172,6 @@ function UserAvatarEditor(props) {
             }
         }
     };
-    // Load the component
-    const AE = react_1.default.lazy(() => import("react-avatar-editor"));
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "column", spacing: 0.5, width: containerWidth, children: [(0, jsx_runtime_1.jsx)(FileUploadButton_1.FileUploadButton, { variant: "outlined", size: "medium", startIcon: (0, jsx_runtime_1.jsx)(Image_1.default, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { accept: "image/png, image/jpeg" }, children: selectFileLabel }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(react_1.default.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: width, height: localHeight }), children: (0, jsx_runtime_1.jsx)(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
-                                "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", scale: editorState.scale, rotate: editorState.rotate }) }), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.default, { size: "small", orientation: "vertical", disabled: !ready, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => handleRotate(90), title: labels.rotateRight, children: (0, jsx_runtime_1.jsx)(RotateRight_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: (0, jsx_runtime_1.jsx)(RotateLeft_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleReset, title: labels.reset, children: (0, jsx_runtime_1.jsx)(ClearAll_1.default, {}) })] })] }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }), (0, jsx_runtime_1.jsx)(Slider_1.default, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { ref: buttonRef, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Done_1.default, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "column", spacing: 0.5, sx: { width: containerWidth }, children: [(0, jsx_runtime_1.jsx)(FileUploadButton_1.FileUploadButton, { variant: "outlined", size: "medium", startIcon: (0, jsx_runtime_1.jsx)(Image_1.default, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { accept: "image/png, image/jpeg" }, children: selectFileLabel }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(react_1.default.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", width: width, height: localHeight }), children: (0, jsx_runtime_1.jsx)(react_avatar_editor_1.default, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
+                                "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", scale: editorState.scale, rotate: editorState.rotate }) }), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.default, { size: "small", orientation: "vertical", disabled: !ready, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => handleRotate(90), title: labels.rotateRight, children: (0, jsx_runtime_1.jsx)(RotateRight_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: (0, jsx_runtime_1.jsx)(RotateLeft_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleReset, title: labels.reset, children: (0, jsx_runtime_1.jsx)(ClearAll_1.default, {}) })] })] }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { spacing: 0.5, direction: "row", sx: { alignItems: "center", paddingBottom: 2 }, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }), (0, jsx_runtime_1.jsx)(Slider_1.default, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { ref: buttonRef, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Done_1.default, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
 }

package/lib/cjs/ViewContainer.js

@@ -164,7 +164,7 @@ function ViewPageGridItem(props) {
         options = getResp(singleRow ?? "small");
     }
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", component: horizontal ? "span" : "div", children: label })), typeof data === "object" ? (data) : horizontal ? ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", component: "span", marginLeft: 0.5, children: data })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", children: data }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", component: horizontal ? "span" : "div", children: label })), typeof data === "object" ? (data) : horizontal ? ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", component: "span", sx: { marginLeft: 0.5 }, children: data })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", children: data }))] }));
 }
 function ViewContainer(props) {
     // Global app
@@ -234,5 +234,5 @@ function ViewContainer(props) {
     }, [app, fields, data, bp]);
     let leftResult;
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, justifyContent: "left", className: "ET-ViewContainer", ref: gridRef, spacing: spacing, children: [leftContainer && (leftResult = leftContainer(data)) != null && ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftResult }), (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, className: "ET-ViewPage-LeftOthers", spacing: spacing, size: ViewPageSize.matchSize(size), children: createFields(data, leftContainerLines * (12 - getItemSize(bp, size))) })] })), createFields(data)] }));
+    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, className: "ET-ViewContainer", ref: gridRef, spacing: spacing, sx: { justifyContent: "left" }, children: [leftContainer && (leftResult = leftContainer(data)) != null && ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftResult }), (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, className: "ET-ViewPage-LeftOthers", spacing: spacing, size: ViewPageSize.matchSize(size), children: createFields(data, leftContainerLines * (12 - getItemSize(bp, size))) })] })), createFields(data)] }));
 }

package/lib/cjs/custom/CustomAttributeArea.js

@@ -41,7 +41,7 @@ function InputItemUIs({ data }) {
     const types = Object.keys(CustomFieldUtils_1.CustomFieldUtils.customFieldCreators);
     const nameRef = react_1.default.useRef(null);
     const optionsRef = react_1.default.useRef(null);
-    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: 2, marginTop: 1, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, sm: 6 }, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: "type", label: labels.type, inputRequired: true, size: "small", loadData: () => Promise.resolve(types.map((t) => ({ id: t, label: t }))), onValueChange: (item) => {
+    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: 2, sx: { marginTop: 1 }, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, sm: 6 }, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: "type", label: labels.type, inputRequired: true, size: "small", loadData: () => Promise.resolve(types.map((t) => ({ id: t, label: t }))), onValueChange: (item) => {
                         const type = item?.id;
                         optionsRef.current.disabled =
                             type !== "combobox" &&
@@ -165,7 +165,7 @@ function InputUIs({ source, onChange }) {
             console.error("Failed to parse source:", error);
         }
     }, [source]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { marginBottom: 0.5, gap: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: labels.sortTip }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "small", color: "primary", variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), onClick: () => editItem(), children: labels.add })] }), (0, jsx_runtime_1.jsx)(Card_1.default, { children: (0, jsx_runtime_1.jsx)(CardContent_1.default, { children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: (0, jsx_runtime_1.jsx)(DnDSortableList_1.DnDSortableList, { items: items, idField: (item) => item.name, labelField: (item) => item.label || item.name, onChange: (items) => doChange(items), itemRenderer: (data, style, { sortable: { index }, ref, handleRef }) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, size: { xs: 12, sm: 12 }, ref: ref, style: style, gap: 1, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { size: smallSize, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels.dragIndicator, ref: handleRef, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, {}) }) }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { size: size, children: [index + 1, " - ", data.type, " / ", data.space] }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { size: size, children: [data.name, " - ", data.label] }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { size: smallSize, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", title: labels.delete, onClick: () => doChange(items.filter((item) => item.name !== data.name)), children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", title: labels.edit, onClick: () => editItem(data), children: (0, jsx_runtime_1.jsx)(Edit_1.default, {}) })] })] })) }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { spacing: 1, sx: { marginTop: 0.5, alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: labels.sortTip }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "small", color: "primary", variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), onClick: () => editItem(), children: labels.add })] }), (0, jsx_runtime_1.jsx)(Card_1.default, { children: (0, jsx_runtime_1.jsx)(CardContent_1.default, { children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: (0, jsx_runtime_1.jsx)(DnDSortableList_1.DnDSortableList, { items: items, idField: (item) => item.name, labelField: (item) => item.label || item.name, onChange: (items) => doChange(items), itemRenderer: (data, style, { sortable: { index }, ref, handleRef }) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, size: { xs: 12, sm: 12 }, ref: ref, style: style, spacing: 1, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { size: smallSize, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels.dragIndicator, ref: handleRef, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, {}) }) }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { size: size, children: [index + 1, " - ", data.type, " / ", data.space] }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { size: size, children: [data.name, " - ", data.label] }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { size: smallSize, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", title: labels.delete, onClick: () => doChange(items.filter((item) => item.name !== data.name)), children: (0, jsx_runtime_1.jsx)(Delete_1.default, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", title: labels.edit, onClick: () => editItem(data), children: (0, jsx_runtime_1.jsx)(Edit_1.default, {}) })] })] })) }) }) }) })] }));
 }
 /**
  * Custom attribute area

package/lib/cjs/custom/CustomFieldViewer.js

@@ -45,7 +45,8 @@ function CustomFieldViewer(props) {
     if (data == null || typeof data !== "object" || Array.isArray(data)) {
         throw new Error("Invalid JSON data");
     }
-    return ((0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, justifyContent: "left", spacing: spacing, sx: {
+    return ((0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: spacing, sx: {
+            justifyContent: "left",
             ".MuiTypography-subtitle2": {
                 fontWeight: "bold"
             }
@@ -56,6 +57,6 @@ function CustomFieldViewer(props) {
                 return;
             // Field value
             const value = shared_1.Utils.getNestedValue(data, name);
-            return ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: CustomFieldUtils_1.CustomFieldUtils.transformSpace(field.space), ...field.gridItemProps, children: (0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: verticalGap, children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { fontWeight: "bold", fontSize: "small", ...titleProps, children: field.label ?? name }), (0, jsx_runtime_1.jsx)(Typography_1.default, { ...valueProps, children: valueLabelFormatter(value, field) })] }) }, name ?? index));
+            return ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: CustomFieldUtils_1.CustomFieldUtils.transformSpace(field.space), ...field.gridItemProps, children: (0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { spacing: verticalGap, children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { component: "div", fontWeight: "bold", fontSize: "small", ...titleProps, children: field.label ?? name }), (0, jsx_runtime_1.jsx)(Typography_1.default, { ...valueProps, children: valueLabelFormatter(value, field) })] }) }, name ?? index));
         }) }));
 }

package/lib/cjs/custom/CustomFieldWindow.js

@@ -77,7 +77,8 @@ function CustomFieldWindow(props) {
                     }
                 }, {
                     fullScreen: app.smDown,
-                    inputs: ((0, jsx_runtime_1.jsx)(Stack_1.default, { marginTop: 1.5, children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, justifyContent: "left", spacing: spacing, sx: {
+                    inputs: ((0, jsx_runtime_1.jsx)(Stack_1.default, { sx: { marginTop: 1.5 }, children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: spacing, sx: {
+                                justifyContent: "left",
                                 ".MuiTypography-subtitle2": {
                                     fontWeight: "bold"
                                 }

package/lib/cjs/custom/FieldJson.js

@@ -52,6 +52,6 @@ const FieldJson = ({ field, mref, onChange, defaultValue }) => {
     if (!name) {
         return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldJson ", JSON.stringify(field)] }));
     }
-    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: field.label ?? "", helperText: field.helperText, name: name, fullWidth: true, multiline: true, rows: 4, inputProps: { maxLength: 1280 }, inputRef: inputRef, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
+    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: field.label ?? "", helperText: field.helperText, name: name, fullWidth: true, multiline: true, rows: 4, slotProps: { htmlInput: { maxLength: 1280 } }, inputRef: inputRef, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
 };
 exports.FieldJson = FieldJson;

package/lib/cjs/custom/FieldTexarea.js

@@ -30,6 +30,6 @@ const FieldTexarea = ({ field, mref, onChange, defaultValue }) => {
     if (!name) {
         return ((0, jsx_runtime_1.jsxs)(Typography_1.default, { children: ["No name for FieldTextarea ", JSON.stringify(field)] }));
     }
-    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: field.label ?? "", helperText: field.helperText, name: name, fullWidth: true, multiline: true, rows: 4, inputProps: { maxLength: 1280 }, inputRef: inputRef, defaultValue: defaultValue, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
+    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: field.label ?? "", helperText: field.helperText, name: name, fullWidth: true, multiline: true, rows: 4, slotProps: { htmlInput: { maxLength: 1280 } }, inputRef: inputRef, defaultValue: defaultValue, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
 };
 exports.FieldTexarea = FieldTexarea;

package/lib/cjs/index.d.ts

@@ -134,3 +134,4 @@ export * from "./TooltipClick";
 export * from "./UserAvatar";
 export * from "./UserAvatarEditor";
 export * from "./ViewContainer";
+export { default as AccountTreeIcon } from "@mui/icons-material/AccountTree";

package/lib/cjs/index.js

@@ -13,7 +13,11 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountTreeIcon = void 0;
 __exportStar(require("./app/CommonApp"), exports);
 __exportStar(require("./app/IServiceApp"), exports);
 __exportStar(require("./app/IServiceAppSettings"), exports);
@@ -150,3 +154,6 @@ __exportStar(require("./TooltipClick"), exports);
 __exportStar(require("./UserAvatar"), exports);
 __exportStar(require("./UserAvatarEditor"), exports);
 __exportStar(require("./ViewContainer"), exports);
+// Icons
+var AccountTree_1 = require("@mui/icons-material/AccountTree");
+Object.defineProperty(exports, "AccountTreeIcon", { enumerable: true, get: function () { return __importDefault(AccountTree_1).default; } });

package/lib/cjs/pages/EditPage.js

@@ -23,7 +23,9 @@ function EditPage(props) {
     const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal_1.MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, gridSpacing = MUGlobal_1.MUGlobal.pagePaddings, ...rest } = props;
     // Labels
     const labels = Labels_1.Labels.CommonPage;
-    return ((0, jsx_runtime_1.jsxs)(CommonPage_1.CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: operationMessageHandler })), topPart, (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, justifyContent: "left", spacing: gridSpacing, paddingTop: 1, children: children }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, position: "sticky", display: "flex", gap: gridSpacing, sx: {
+    return ((0, jsx_runtime_1.jsxs)(CommonPage_1.CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: operationMessageHandler })), topPart, (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: gridSpacing, sx: { justifyContent: "left", paddingTop: 1 }, children: children }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: gridSpacing, sx: {
+                            position: "sticky",
+                            display: "flex",
                             top: "auto",
                             bottom: (theme) => MUGlobal_1.MUGlobal.updateWithTheme(gridSpacing, theme.spacing),
                             paddingTop: gridSpacing

package/lib/cjs/pages/ViewPage.js

@@ -24,8 +24,14 @@ const Stack_1 = __importDefault(require("@mui/material/Stack"));
  * @returns Component
  */
 function ViewPageActionBar(props) {
-    const { actionPaddings = MUGlobal_1.MUGlobal.pagePaddings, ...rest } = props;
-    return ((0, jsx_runtime_1.jsx)(Stack_1.default, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, ...rest }));
+    const { actionPaddings = MUGlobal_1.MUGlobal.pagePaddings, sx, ...rest } = props;
+    return ((0, jsx_runtime_1.jsx)(Stack_1.default, { className: "ET-ViewPage-Actions", direction: "row", spacing: actionPaddings, sx: {
+            flexWrap: "wrap",
+            justifyContent: "center",
+            paddingTop: actionPaddings,
+            paddingBottom: actionPaddings,
+            ...sx
+        }, ...rest }));
 }
 /**
  * View page

package/lib/mjs/ButtonPopupCheckbox.js

@@ -34,19 +34,24 @@ function ButtonPopupList(props) {
         // Set selected ids
         setSelectedIdsHandler([...value]);
     }, [value]);
-    return (_jsxs(VBox, { gap: 2, children: [_jsx(DnDSortableList, { component: Grid, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onChange: (items) => {
+    return (_jsxs(VBox, { spacing: 2, children: [_jsx(DnDSortableList, { component: Grid, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onChange: (items) => {
                     const ids = items
                         .filter((item) => tempSelectedIds.current.includes(item.id))
                         .map((item) => item.id);
                     onValueChange(ids);
-                }, itemRenderer: (item, style, { sortable: { index }, ref, handleRef }) => (_jsxs(Grid, { size: itemSize, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ref: ref, style: style, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ref: handleRef, children: _jsx(DragIndicatorIcon, {}) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
+                }, itemRenderer: (item, style, { sortable: { index }, ref, handleRef }) => (_jsxs(Grid, { size: itemSize, spacing: 1, ref: ref, style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "flex-start",
+                        ...style
+                    }, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ref: handleRef, children: _jsx(DragIndicatorIcon, {}) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
                                     const checked = e.target.checked;
                                     const newIds = [
                                         ...selectedIds.toggleItem(item.id, checked)
                                     ];
                                     setSelectedIdsHandler(newIds);
                                     onValueChange(newIds);
-                                } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), mRef: dndRef }), onAdd && (_jsxs(HBox, { gap: 1, children: [_jsx(TextField, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), _jsx(Button, { sx: { width: "120px" }, variant: "contained", startIcon: _jsx(AddIcon, {}), size: "small", onClick: async () => {
+                                } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), mRef: dndRef }), onAdd && (_jsxs(HBox, { spacing: 1, children: [_jsx(TextField, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), _jsx(Button, { sx: { width: "120px" }, variant: "contained", startIcon: _jsx(AddIcon, {}), size: "small", onClick: async () => {
                             if (inputRef.current == null)
                                 return;
                             const input = inputRef.current.value.trim();

package/lib/mjs/ButtonPopupRadio.js

@@ -23,7 +23,7 @@ function ButtonPopupList(props) {
     React.useEffect(() => {
         setCurrentValue(value);
     }, [value]);
-    return (_jsxs(VBox, { gap: 2, children: [_jsx(RadioGroup, { value: currentValue ?? "", name: "radio-buttons-group", onChange: (e, v) => {
+    return (_jsxs(VBox, { spacing: 2, children: [_jsx(RadioGroup, { value: currentValue ?? "", name: "radio-buttons-group", onChange: (e, v) => {
                     const checked = e.target.checked;
                     const value = checked
                         ? typeof items[0].id === "number"
@@ -32,7 +32,11 @@ function ButtonPopupList(props) {
                         : undefined;
                     setCurrentValue(value);
                     onValueChange(value);
-                }, children: _jsx(Grid, { container: true, spacing: 0, children: items.map((item) => (_jsx(Grid, { size: itemSize, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, children: _jsx(FormControlLabel, { control: _jsx(Radio, { value: item.id }), label: `${labelFormatter(item)}` }) }, item.id))) }) }), onAdd && (_jsxs(HBox, { gap: 1, children: [_jsx(TextField, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), _jsx(Button, { sx: { width: "120px" }, variant: "contained", startIcon: _jsx(AddIcon, {}), size: "small", onClick: async () => {
+                }, children: _jsx(Grid, { container: true, spacing: 0, children: items.map((item) => (_jsx(Grid, { size: itemSize, sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-start"
+                        }, spacing: 1, children: _jsx(FormControlLabel, { control: _jsx(Radio, { value: item.id }), label: `${labelFormatter(item)}` }) }, item.id))) }) }), onAdd && (_jsxs(HBox, { spacing: 1, children: [_jsx(TextField, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), _jsx(Button, { sx: { width: "120px" }, variant: "contained", startIcon: _jsx(AddIcon, {}), size: "small", onClick: async () => {
                             if (inputRef.current == null)
                                 return;
                             const input = inputRef.current.value.trim();

package/lib/mjs/ComboBox.js

@@ -42,7 +42,7 @@ export function ComboBox(props) {
     // Local default value
     const localValue = idValue != null
         ? localOptions.find((o) => o[idField] === idValue)
-        : defaultValue ?? value;
+        : (defaultValue ?? value);
     // State
     // null for controlled
     const [stateValue, setStateValue] = React.useState(null);
@@ -59,9 +59,9 @@ export function ComboBox(props) {
         if (readOnly != null) {
             Object.assign(params, { readOnly });
         }
-        Object.assign(params.inputProps, { "data-reset": inputReset });
+        Object.assign(params.slotProps.htmlInput, { "data-reset": inputReset });
         if (dataReadonly) {
-            params.inputProps.onKeyDown = (event) => {
+            params.slotProps.htmlInput.onKeyDown = (event) => {
                 if (Keyboard.isTypingContent(event.key)) {
                     event.preventDefault();
                 }
@@ -69,7 +69,9 @@ export function ComboBox(props) {
         }
         // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
         // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
-        Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
+        Object.assign(params.slotProps.htmlInput, {
+            autoComplete: inputAutoComplete
+        });
         return params;
     };
     const getValue = (value) => {
@@ -118,7 +120,7 @@ export function ComboBox(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange, disabled: disabled }), _jsxs(Stack, { gap: 0.5, direction: "row", width: "100%", children: [_jsx(Autocomplete, { value: stateValue, disabled: disabled, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange, disabled: disabled }), _jsxs(Stack, { spacing: 0.5, direction: "row", children: [_jsx(Autocomplete, { value: stateValue, disabled: disabled, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                             // Set value
                             setInputValue(value);
                             // Custom

package/lib/mjs/ComboBoxMultiple.js

@@ -57,9 +57,9 @@ export function ComboBoxMultiple(props) {
         if (readOnly != null) {
             Object.assign(params, { readOnly });
         }
-        Object.assign(params.inputProps, { "data-reset": inputReset });
+        Object.assign(params.slotProps.htmlInput, { "data-reset": inputReset });
         if (dataReadonly) {
-            params.inputProps.onKeyDown = (event) => {
+            params.slotProps.htmlInput.onKeyDown = (event) => {
                 if (Keyboard.isTypingContent(event.key)) {
                     event.preventDefault();
                 }
@@ -67,7 +67,9 @@ export function ComboBoxMultiple(props) {
         }
         // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
         // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
-        Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
+        Object.assign(params.slotProps.htmlInput, {
+            autoComplete: inputAutoComplete
+        });
         return params;
     };
     const getValue = (value) => {

package/lib/mjs/DataGridEx.js

@@ -81,7 +81,14 @@ export function DataGridEx(props) {
     const theme = useTheme();
     const defaultHeaderRenderer = (states) => {
         const { orderBy } = states.queryPaging;
-        return (_jsx(Box, { className: "DataGridEx-Header", display: "flex", alignItems: "center", borderBottom: boldBorder, fontWeight: 500, minWidth: widthCalculator.total, height: headerHeight, children: columns.map((column, index) => {
+        return (_jsx(Box, { className: "DataGridEx-Header", sx: {
+                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
@@ -109,11 +116,21 @@ export function DataGridEx(props) {
                 else {
                     sortLabel = headerText;
                 }
-                return (_jsx(Box, { textAlign: GridAlignGet(align, type), width: columnWidth(index), children: _jsx(Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps, children: sortLabel }) }, field ?? index.toString()));
+                return (_jsx(Box, { sx: {
+                        textAlign: GridAlignGet(align, type),
+                        width: columnWidth(index)
+                    }, children: _jsx(Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps, children: sortLabel }) }, field ?? index.toString()));
             }) }));
     };
     function defaultFooterRenderer(rows, states) {
-        return (_jsx(Box, { className: "DataGridEx-Footer", display: "flex", alignItems: "center", borderTop: thinBorder, marginTop: "1px", minWidth: widthCalculator.total, height: bottomHeight - 1, children: columns.map((column, index) => {
+        return (_jsx(Box, { className: "DataGridEx-Footer", sx: {
+                display: "flex",
+                alignItems: "center",
+                borderTop: thinBorder,
+                marginTop: "1px",
+                minHeight: widthCalculator.total,
+                height: bottomHeight - 1
+            }, children: columns.map((column, index) => {
                 // Destruct
                 const { align, field, type } = column;
                 // Cell props
@@ -128,7 +145,10 @@ export function DataGridEx(props) {
                         checkable
                     })
                     : undefined;
-                return (_jsx(Box, { textAlign: GridAlignGet(align, type), width: columnWidth(index), children: _jsx(Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps, children: cell }) }, "bottom-" + (field ?? index.toString())));
+                return (_jsx(Box, { sx: {
+                        textAlign: GridAlignGet(align, type),
+                        width: columnWidth(index)
+                    }, children: _jsx(Box, { className: "DataGridEx-Cell", onMouseEnter: handleMouseEnter, ...cellProps, children: cell }) }, "bottom-" + (field ?? index.toString())));
             }) }));
     }
     // Destruct
@@ -287,8 +307,7 @@ export function DataGridEx(props) {
                         : cellBoxStyle;
                 const cellProps = {
                     className: "DataGridEx-Cell",
-                    textAlign: GridAlignGet(align, type),
-                    sx: { ...boxStyle }
+                    sx: { textAlign: GridAlignGet(align, type), ...boxStyle }
                 };
                 const child = cellRenderer({
                     data,

package/lib/mjs/DataSteps.js

@@ -23,9 +23,8 @@ export function DataSteps(props) {
     // Labels
     const labels = app.getLabels("close", "nextStep", "previousStep", "submit");
     // Destruct
-    const { InputLabelProps = {}, jsonValue, valueFormatter = (_data) => "...", onValueChange, steps, value = "", ...rest } = props;
-    // Shrink
-    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
+    const { jsonValue, valueFormatter = (_data) => "...", onValueChange, steps, value = "", slotProps, ...rest } = props;
+    const { input, htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Current index
     const indexRef = React.useRef(-1);
     // Current Json data
@@ -41,7 +40,12 @@ export function DataSteps(props) {
         const [{ callback, ...rest }, more] = steps(index, jsonRef.current);
         app.showInputDialog({
             ...rest,
-            buttons: (n, callback) => (_jsxs(HBox, { paddingLeft: 2, paddingRight: 2, paddingBottom: 2, gap: 2, justifyContent: "space-between", children: [index === 0 ? (_jsx(Button, { variant: "outlined", startIcon: _jsx(CloseIcon, {}), onClick: () => n.dismiss(), children: labels.close })) : (_jsx(Button, { variant: "outlined", startIcon: _jsx(NavigateBeforeIcon, {}), onClick: () => {
+            buttons: (n, callback) => (_jsxs(HBox, { spacing: 2, sx: {
+                    justifyContent: "space-between",
+                    paddingLeft: 2,
+                    paddingRight: 2,
+                    paddingBottom: 2
+                }, children: [index === 0 ? (_jsx(Button, { variant: "outlined", startIcon: _jsx(CloseIcon, {}), onClick: () => n.dismiss(), children: labels.close })) : (_jsx(Button, { variant: "outlined", startIcon: _jsx(NavigateBeforeIcon, {}), onClick: () => {
                             n.dismiss();
                             showStep(indexRef.current - 1);
                         }, children: labels.previousStep })), more ? (_jsx(Button, { variant: "contained", startIcon: _jsx(NavigateNextIcon, {}), onClick: async (event) => {
@@ -75,13 +79,19 @@ export function DataSteps(props) {
     React.useEffect(() => {
         setLocalValue(valueFormatter(jsonRef.current));
     }, [valueFormatter]);
-    return (_jsx(TextField, { autoComplete: "off", InputLabelProps: InputLabelProps, inputProps: { style: { cursor: "pointer" } }, InputProps: {
-            onKeyDown: (event) => {
-                if (event.key === "Tab")
-                    return;
-                cancelInput(event);
+    return (_jsx(TextField, { autoComplete: "off", slotProps: {
+            input: {
+                onKeyDown: (event) => {
+                    if (event.key === "Tab")
+                        return;
+                    cancelInput(event);
+                },
+                onPaste: cancelInput,
+                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { edge: "end", size: "small", children: _jsx(StartIcon, {}) }) })),
+                ...input
             },
-            onPaste: cancelInput,
-            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { edge: "end", size: "small", children: _jsx(StartIcon, {}) }) }))
+            htmlInput: { style: { cursor: "pointer" }, ...htmlInput },
+            inputLabel: { shrink: MUGlobal.searchFieldShrink, ...inputLabel },
+            ...restSlotProps
         }, onClick: () => showStep(0), value: localValue, ...rest }));
 }

package/lib/mjs/FileUploadButton.js

@@ -45,7 +45,11 @@ export function FileUploadButton(props) {
         onUploadFiles(files);
     };
     // Layout
-    return (_jsxs(HBox, { alignItems: "center", flexWrap: "wrap", border: (theme) => dragOver ? "1px dashed " + theme.palette.warning.main : undefined, spacing: 0.5, ...(dropFilesLabel == null
+    return (_jsxs(HBox, { sx: {
+            alignItems: "center",
+            flexWrap: "wrap",
+            border: (theme) => dragOver ? "1px dashed " + theme.palette.warning.main : undefined
+        }, spacing: 0.5, ...(dropFilesLabel == null
             ? undefined
             : {
                 onDrop: handleDrop,

package/lib/mjs/FlexBox.d.ts

@@ -4,7 +4,7 @@ import { StackProps } from "@mui/material/Stack";
  * @param props Props
  * @returns Component
  */
-export declare function HBox(props: Omit<StackProps, "ref">): import("react/jsx-runtime").JSX.Element;
+export declare function HBox(props: Omit<StackProps, "ref" | "direction">): import("react/jsx-runtime").JSX.Element;
 /**
  * Horizonal box with list items
  * @param props Props
@@ -16,4 +16,4 @@ export declare function HBoxList(props: Omit<StackProps, "direction">): import("
  * @param props Props
  * @returns Component
  */
-export declare function VBox(props: Omit<StackProps, "ref">): import("react/jsx-runtime").JSX.Element;
+export declare function VBox(props: Omit<StackProps, "ref" | "direction">): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/FlexBox.js

@@ -6,7 +6,7 @@ import Stack from "@mui/material/Stack";
  * @returns Component
  */
 export function HBox(props) {
-    return _jsx(Stack, { direction: "row", width: "100%", ...props });
+    return _jsx(Stack, { direction: "row", ...props });
 }
 /**
  * Horizonal box with list items
@@ -14,7 +14,8 @@ export function HBox(props) {
  * @returns Component
  */
 export function HBoxList(props) {
-    return (_jsx(Stack, { spacing: 1, gap: 1, direction: "row", flexWrap: "wrap", width: "100%", ...props }));
+    const { sx, ...rest } = props;
+    return (_jsx(Stack, { spacing: 1, direction: "row", sx: { flexWrap: "wrap", ...sx }, ...rest }));
 }
 /**
  * Vertial box

package/lib/mjs/InputField.js

@@ -10,7 +10,7 @@ import TextField from "@mui/material/TextField";
  */
 export function InputField(props) {
     // Destruct
-    const { InputProps = {}, inputProps = {}, slotProps, onChange, onChangeDelay, changeDelay = onChangeDelay ? [480] : undefined, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
+    const { slotProps, onChange, onChangeDelay, changeDelay = onChangeDelay ? [480] : undefined, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
     // Slot props
     const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
     const isMounted = React.useRef(true);
@@ -44,10 +44,9 @@ export function InputField(props) {
     return (_jsx(TextField, { slotProps: {
             htmlInput: {
                 ["data-min-chars"]: changeDelay?.[1],
-                ...htmlInput,
-                ...inputProps
+                ...htmlInput
             },
-            input: { readOnly, ...input, ...InputProps },
+            input: { readOnly, ...input },
             inputLabel: {
                 shrink: MUGlobal.inputFieldShrink,
                 ...inputLabel

package/lib/mjs/MoreFab.js

@@ -80,7 +80,7 @@ export function MoreFab(props) {
     const hasIcon = actionsLocal.some((action) => action.icon != null);
     // Main
     const main = iconButton ? (_jsx(IconButton, { color: color, size: size, title: title, onClick: handleClick, children: icon })) : (_jsx(Fab, { color: color, size: size, title: title, onClick: handleClick, children: icon }));
-    return (_jsxs(React.Fragment, { children: [main, _jsx(Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps, children: actionsLocal.map(({ label, icon, action }, index) => label === "-" ? (_jsx(Divider, {}, index)) : (_jsxs(MenuItem, { ...(typeof action === "string"
+    return (_jsxs(React.Fragment, { children: [main, _jsx(Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, slotProps: { paper: PaperProps }, children: actionsLocal.map(({ label, icon, action }, index) => label === "-" ? (_jsx(Divider, {}, index)) : (_jsxs(MenuItem, { ...(typeof action === "string"
                         ? action.includes("://")
                             ? {
                                 component: "a",