@etsoo/materialui 1.6.40 → 1.6.43

package/__tests__/SwitchAnt.tsx

@@ -1,21 +1,20 @@
-import { screen, render } from "@testing-library/react";
-import React, { act } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { act } from "react";
 import { SwitchAnt } from "../src/SwitchAnt";
+import { NumberFieldInput } from "@base-ui/react/number-field";
 
 it("SwitchAnt Tests", () => {
-  const onChange = vi.fn((event: React.ChangeEvent<HTMLInputElement>) =>
-    expect(event.target.checked).toBeTruthy()
-  );
+  const onChange = vi.fn();
 
   // Render component
   act(() => {
     render(<SwitchAnt startLabel="No" endLabel="Yes" onChange={onChange} />);
   });
 
-  const yes = screen.getByText("Yes");
+  const control = screen.getByRole("switch");
 
   act(() => {
-    yes.click();
+    fireEvent.click(control);
   });
 
   expect(onChange).toHaveBeenCalled();

package/lib/cjs/ButtonPopupCheckbox.js

@@ -40,19 +40,24 @@ function ButtonPopupList(props) {
         // Set selected ids
         setSelectedIdsHandler([...value]);
     }, [value]);
-    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(DnDSortableList_1.DnDSortableList, { component: Grid_1.default, componentProps: { container: true, spacing: 0 }, items: items, labelField: labelField, onChange: (items) => {
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(DnDSortableList_1.DnDSortableList, { component: Grid_1.default, 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 }) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: itemSize, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ref: ref, style: style, 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.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
+                }, itemRenderer: (item, style, { sortable: { index }, ref, handleRef }) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: itemSize, spacing: 1, ref: ref, style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "flex-start",
+                        ...style
+                    }, 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.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { 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 && ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { gap: 1, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { width: "120px" }, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), size: "small", onClick: async () => {
+                                } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), mRef: dndRef }), onAdd && ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { width: "120px" }, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), size: "small", onClick: async () => {
                             if (inputRef.current == null)
                                 return;
                             const input = inputRef.current.value.trim();

package/lib/cjs/ButtonPopupRadio.js

@@ -29,7 +29,7 @@ function ButtonPopupList(props) {
     react_1.default.useEffect(() => {
         setCurrentValue(value);
     }, [value]);
-    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(RadioGroup_1.default, { value: currentValue ?? "", name: "radio-buttons-group", onChange: (e, v) => {
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(RadioGroup_1.default, { value: currentValue ?? "", name: "radio-buttons-group", onChange: (e, v) => {
                     const checked = e.target.checked;
                     const value = checked
                         ? typeof items[0].id === "number"
@@ -38,7 +38,11 @@ function ButtonPopupList(props) {
                         : undefined;
                     setCurrentValue(value);
                     onValueChange(value);
-                }, children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: items.map((item) => ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: itemSize, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, children: (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Radio_1.default, { value: item.id }), label: `${labelFormatter(item)}` }) }, item.id))) }) }), onAdd && ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { gap: 1, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { width: "120px" }, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), size: "small", onClick: async () => {
+                }, children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: items.map((item) => ((0, jsx_runtime_1.jsx)(Grid_1.default, { size: itemSize, sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-start"
+                        }, spacing: 1, children: (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Radio_1.default, { value: item.id }), label: `${labelFormatter(item)}` }) }, item.id))) }) }), onAdd && ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { width: "120px" }, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), size: "small", onClick: async () => {
                             if (inputRef.current == null)
                                 return;
                             const input = inputRef.current.value.trim();

package/lib/cjs/ComboBox.js

@@ -48,7 +48,7 @@ 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_1.default.useState(null);
@@ -65,9 +65,9 @@ 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 (shared_1.Keyboard.isTypingContent(event.key)) {
                     event.preventDefault();
                 }
@@ -75,7 +75,9 @@ 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) => {
@@ -124,7 +126,7 @@ function ComboBox(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: getValue(stateValue), readOnly: true, onChange: inputOnChange, disabled: disabled }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: 0.5, direction: "row", width: "100%", children: [(0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue, disabled: disabled, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], 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: getValue(stateValue), readOnly: true, onChange: inputOnChange, disabled: disabled }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { spacing: 0.5, direction: "row", children: [(0, jsx_runtime_1.jsx)(Autocomplete_1.default, { 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/cjs/ComboBoxMultiple.js

@@ -63,9 +63,9 @@ 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 (shared_1.Keyboard.isTypingContent(event.key)) {
                     event.preventDefault();
                 }
@@ -73,7 +73,9 @@ 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/cjs/DataGridEx.js

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

package/lib/cjs/DataSteps.js

@@ -29,9 +29,8 @@ 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_1.MUGlobal.searchFieldShrink;
+    const { jsonValue, valueFormatter = (_data) => "...", onValueChange, steps, value = "", slotProps, ...rest } = props;
+    const { input, htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Current index
     const indexRef = react_1.default.useRef(-1);
     // Current Json data
@@ -47,7 +46,12 @@ function DataSteps(props) {
         const [{ callback, ...rest }, more] = steps(index, jsonRef.current);
         app.showInputDialog({
             ...rest,
-            buttons: (n, callback) => ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { paddingLeft: 2, paddingRight: 2, paddingBottom: 2, gap: 2, justifyContent: "space-between", children: [index === 0 ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(Close_1.default, {}), onClick: () => n.dismiss(), children: labels.close })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(NavigateBefore_1.default, {}), onClick: () => {
+            buttons: (n, callback) => ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { spacing: 2, sx: {
+                    justifyContent: "space-between",
+                    paddingLeft: 2,
+                    paddingRight: 2,
+                    paddingBottom: 2
+                }, children: [index === 0 ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(Close_1.default, {}), onClick: () => n.dismiss(), children: labels.close })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(NavigateBefore_1.default, {}), onClick: () => {
                             n.dismiss();
                             showStep(indexRef.current - 1);
                         }, children: labels.previousStep })), more ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(NavigateNext_1.default, {}), onClick: async (event) => {
@@ -81,13 +85,19 @@ function DataSteps(props) {
     react_1.default.useEffect(() => {
         setLocalValue(valueFormatter(jsonRef.current));
     }, [valueFormatter]);
-    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { autoComplete: "off", InputLabelProps: InputLabelProps, inputProps: { style: { cursor: "pointer" } }, InputProps: {
-            onKeyDown: (event) => {
-                if (event.key === "Tab")
-                    return;
-                cancelInput(event);
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { autoComplete: "off", slotProps: {
+            input: {
+                onKeyDown: (event) => {
+                    if (event.key === "Tab")
+                        return;
+                    cancelInput(event);
+                },
+                onPaste: cancelInput,
+                endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { edge: "end", size: "small", children: (0, jsx_runtime_1.jsx)(Start_1.default, {}) }) })),
+                ...input
             },
-            onPaste: cancelInput,
-            endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { edge: "end", size: "small", children: (0, jsx_runtime_1.jsx)(Start_1.default, {}) }) }))
+            htmlInput: { style: { cursor: "pointer" }, ...htmlInput },
+            inputLabel: { shrink: MUGlobal_1.MUGlobal.searchFieldShrink, ...inputLabel },
+            ...restSlotProps
         }, onClick: () => showStep(0), value: localValue, ...rest }));
 }

package/lib/cjs/FileUploadButton.js

@@ -51,7 +51,11 @@ function FileUploadButton(props) {
         onUploadFiles(files);
     };
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { alignItems: "center", flexWrap: "wrap", border: (theme) => dragOver ? "1px dashed " + theme.palette.warning.main : undefined, spacing: 0.5, ...(dropFilesLabel == null
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.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/cjs/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/cjs/FlexBox.js

@@ -14,7 +14,7 @@ const Stack_1 = __importDefault(require("@mui/material/Stack"));
  * @returns Component
  */
 function HBox(props) {
-    return (0, jsx_runtime_1.jsx)(Stack_1.default, { direction: "row", width: "100%", ...props });
+    return (0, jsx_runtime_1.jsx)(Stack_1.default, { direction: "row", ...props });
 }
 /**
  * Horizonal box with list items
@@ -22,7 +22,8 @@ function HBox(props) {
  * @returns Component
  */
 function HBoxList(props) {
-    return ((0, jsx_runtime_1.jsx)(Stack_1.default, { spacing: 1, gap: 1, direction: "row", flexWrap: "wrap", width: "100%", ...props }));
+    const { sx, ...rest } = props;
+    return ((0, jsx_runtime_1.jsx)(Stack_1.default, { spacing: 1, direction: "row", sx: { flexWrap: "wrap", ...sx }, ...rest }));
 }
 /**
  * Vertial box

package/lib/cjs/InputField.js

@@ -16,7 +16,7 @@ const TextField_1 = __importDefault(require("@mui/material/TextField"));
  */
 function InputField(props) {
     // Destruct
-    const { InputProps = {}, inputProps = {}, slotProps, onChange, onChangeDelay, changeDelay = onChangeDelay ? [480] : undefined, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, ...rest } = props;
+    const { slotProps, onChange, onChangeDelay, changeDelay = onChangeDelay ? [480] : undefined, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, ...rest } = props;
     // Slot props
     const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
     const isMounted = react_2.default.useRef(true);
@@ -50,10 +50,9 @@ function InputField(props) {
     return ((0, jsx_runtime_1.jsx)(TextField_1.default, { slotProps: {
             htmlInput: {
                 ["data-min-chars"]: changeDelay?.[1],
-                ...htmlInput,
-                ...inputProps
+                ...htmlInput
             },
-            input: { readOnly, ...input, ...InputProps },
+            input: { readOnly, ...input },
             inputLabel: {
                 shrink: MUGlobal_1.MUGlobal.inputFieldShrink,
                 ...inputLabel

package/lib/cjs/MoreFab.js

@@ -86,7 +86,7 @@ function MoreFab(props) {
     const hasIcon = actionsLocal.some((action) => action.icon != null);
     // Main
     const main = iconButton ? ((0, jsx_runtime_1.jsx)(IconButton_1.default, { color: color, size: size, title: title, onClick: handleClick, children: icon })) : ((0, jsx_runtime_1.jsx)(Fab_1.default, { color: color, size: size, title: title, onClick: handleClick, children: icon }));
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [main, (0, jsx_runtime_1.jsx)(Menu_1.default, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps, children: actionsLocal.map(({ label, icon, action }, index) => label === "-" ? ((0, jsx_runtime_1.jsx)(Divider_1.default, {}, index)) : ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, { ...(typeof action === "string"
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [main, (0, jsx_runtime_1.jsx)(Menu_1.default, { 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 === "-" ? ((0, jsx_runtime_1.jsx)(Divider_1.default, {}, index)) : ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, { ...(typeof action === "string"
                         ? action.includes("://")
                             ? {
                                 component: "a",

package/lib/cjs/NotifierMU.js

@@ -183,7 +183,7 @@ class NotificationMU extends react_2.NotificationReact {
             this.dismiss();
             return true;
         };
-        return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { ...inputProps, children: [content, (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", display: "block", ref: errorRef, color: "error" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? (buttons(this, handleSubmit)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { color: "secondary", onClick: () => {
+        return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { ...inputProps, children: [content, (0, jsx_runtime_1.jsx)(Typography_1.default, { component: "div", variant: "caption", ref: errorRef, color: "error" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? (buttons(this, handleSubmit)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { color: "secondary", onClick: () => {
                                     if (this.onReturn)
                                         this.onReturn(undefined);
                                     this.dismiss();
@@ -269,7 +269,7 @@ class NotificationMU extends react_2.NotificationReact {
                         return false;
                     }
                 }
-            }, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { dividers: true, children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), localInputs, (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", display: "block", ref: errorRef, color: "error" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? (buttons(this, handleSubmit)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { color: "secondary", onClick: () => {
+            }, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { dividers: true, children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), localInputs, (0, jsx_runtime_1.jsx)(Typography_1.default, { component: "div", variant: "caption", ref: errorRef, color: "error" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? (buttons(this, handleSubmit)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { color: "secondary", onClick: () => {
                                     if (this.onReturn)
                                         this.onReturn(undefined);
                                     this.dismiss();
@@ -299,11 +299,15 @@ class NotificationMU extends react_2.NotificationReact {
         return ((0, jsx_runtime_1.jsx)(Backdrop_1.default, { className: className, sx: {
                 color: "#fff",
                 zIndex: (theme) => theme.zIndex.modal + 1
-            }, open: this.open, ...options, children: (0, jsx_runtime_1.jsxs)(Box_1.default, { display: "flex", flexDirection: "column", flexWrap: "nowrap", alignItems: "center", sx: {
+            }, open: this.open, ...options, children: (0, jsx_runtime_1.jsxs)(Box_1.default, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flexWrap: "nowrap",
+                    alignItems: "center",
                     "& > :not(style) + :not(style)": {
                         marginTop: (theme) => theme.spacing(1)
                     }
-                }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.default, { ...setupProps }), content && ((0, jsx_runtime_1.jsx)(Box_1.default, { maxWidth: maxWidth === false ? undefined : maxWidth, children: content }))] }) }, this.id));
+                }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.default, { ...setupProps }), content && ((0, jsx_runtime_1.jsx)(Box_1.default, { sx: { maxWidth: maxWidth === false ? undefined : maxWidth }, children: content }))] }) }, this.id));
     }
     /**
      * Render method
@@ -421,7 +425,10 @@ class NotifierMU extends react_2.NotifierReact {
         // Use SnackBar for layout
         return ((0, jsx_runtime_1.jsx)(Snackbar_1.default, { anchorOrigin: NotifierMU.getOrigin(align), className: className, sx: align === notificationbase_1.NotificationAlign.Center
                 ? { position: "fixed", top: "50%!important" }
-                : undefined, open: true, children: (0, jsx_runtime_1.jsx)(Box_1.default, { display: "flex", flexDirection: "column", flexWrap: "nowrap", sx: {
+                : undefined, open: true, children: (0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flexWrap: "nowrap",
                     "& > :not(style) + :not(style)": {
                         marginTop: (theme) => theme.spacing(1)
                     }

package/lib/cjs/OptionGroup.js

@@ -112,5 +112,5 @@ function OptionGroup(props) {
                             "& input": {
                                 display: "none"
                             }
-                        } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && ((0, jsx_runtime_1.jsx)(FormHelperText_1.default, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
+                        } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { sx: { paddingLeft: 2, paddingY: "7px" }, children: group }))] }), helperText && ((0, jsx_runtime_1.jsx)(FormHelperText_1.default, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
 }

package/lib/cjs/OptionGroupFlag.js

@@ -94,5 +94,5 @@ function OptionGroupFlag(props) {
                             "& input": {
                                 display: "none"
                             }
-                        } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && ((0, jsx_runtime_1.jsx)(FormHelperText_1.default, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
+                        } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { sx: { paddingLeft: 2, paddingY: "7px" }, children: group }))] }), helperText && ((0, jsx_runtime_1.jsx)(FormHelperText_1.default, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
 }

package/lib/cjs/QuickList.js

@@ -24,7 +24,7 @@ function QuickList(props) {
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
     // Destruct
-    const { buttonProps = {}, label, inputProps, itemLabel = shared_1.DataTypes.getListItemLabel, itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = app?.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
+    const { buttonProps = {}, label, inputProps, itemLabel = shared_1.DataTypes.getListItemLabel, itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = app?.get("noMatches"), spacing = 1, onItemClick, sx, ...rest } = props;
     const { onClick, ...buttonRest } = buttonProps;
     // States
     const [loading, setLoading] = react_1.default.useState(false);
@@ -40,12 +40,12 @@ function QuickList(props) {
         loadDataLocal();
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: gap, height: height, ...rest, children: [(0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, onChangeDelay: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { spacing: spacing, sx: { height: "480px", ...sx }, ...rest, children: [(0, jsx_runtime_1.jsx)(InputField_1.InputField, { label: label, onChangeDelay: (event) => {
                     // Stop bubble
                     event.preventDefault();
                     event.stopPropagation();
                     loadDataLocal(event.target.value);
-                }, fullWidth: true, ...inputProps }), loading ? ((0, jsx_runtime_1.jsx)(LinearProgress_1.default, {})) : items.length === 0 ? ((0, jsx_runtime_1.jsx)(Typography_1.default, { textAlign: "center", children: noMatchesLabel })) : ((0, jsx_runtime_1.jsx)(List_1.default, { children: items.map((item) => ((0, jsx_runtime_1.jsx)(ListItem_1.default, { disablePadding: true, ...itemProps, children: (0, jsx_runtime_1.jsx)(ListItemButton_1.default, { onClick: (event) => {
+                }, fullWidth: true, ...inputProps }), loading ? ((0, jsx_runtime_1.jsx)(LinearProgress_1.default, {})) : items.length === 0 ? ((0, jsx_runtime_1.jsx)(Typography_1.default, { align: "center", children: noMatchesLabel })) : ((0, jsx_runtime_1.jsx)(List_1.default, { children: items.map((item) => ((0, jsx_runtime_1.jsx)(ListItem_1.default, { disablePadding: true, ...itemProps, children: (0, jsx_runtime_1.jsx)(ListItemButton_1.default, { onClick: (event) => {
                             if (onClick)
                                 onClick(event);
                             if (!event.defaultPrevented && onItemClick)

package/lib/cjs/ResponsibleContainer.js

@@ -73,8 +73,9 @@ function ResponsibleContainer(props) {
     // Search data
     const searchData = (0, react_2.useSearchParamsWithCache)(cacheKey);
     // On submit callback
-    const onSubmit = (data, _reset) => {
-        if (data == null || state.ref == null)
+    // Current UI may be rendered but the search bar rerendered with new data, check init to avoid reset and load new data
+    const onSubmit = (data, _reset, init) => {
+        if (data == null || state.ref == null || (state.mounted && init))
             return;
         state.ref.reset({ data });
     };
@@ -137,8 +138,8 @@ function ResponsibleContainer(props) {
         if (!hasFields || rect?.width == null || rect.width < 20)
             return;
         const f = typeof fields == "function" ? fields(searchData) : fields;
-        return ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop }));
-    }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
+        return ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop, autoSubmitDelay: rest.autoLoad === false ? 0 : undefined }));
+    }, [showDataGrid, hasFields, searchBarHeight, rect?.width, rest.autoLoad]);
     // Pull container
     const pullContainer = showDataGrid
         ? ".DataGridEx-Body"
@@ -147,8 +148,11 @@ function ResponsibleContainer(props) {
     return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: containerBoxSx == null
             ? undefined
             : containerBoxSx(paddings, hasFields, showDataGrid), children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { ref: dimensions[0][0], className: "SearchBox", sx: {
+                            marginBottom: hasFields
+                                ? `${searchBarBottom}px!important`
+                                : undefined,
                             height: hasFields ? searchBarHeight : 0
-                        }, marginBottom: hasFields ? `${searchBarBottom}px!important` : undefined, children: searchBar }), list] }), pullToRefresh && pullContainer && list != null && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
+                        }, children: searchBar }), list] }), pullToRefresh && pullContainer && list != null && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
                     const container = document.querySelector(pullContainer);
                     return !container?.scrollTop;
                 } }))] }));

package/lib/cjs/SearchBar.d.ts

@@ -26,7 +26,7 @@ export interface SearchBarProps {
     /**
      * On submit callback
      */
-    onSubmit: (data: FormData, reset: boolean) => void | PromiseLike<void>;
+    onSubmit: (data: FormData, reset: boolean, init: boolean) => void | PromiseLike<void>;
     /**
      * Top position, true means Toolbar's height
      */

package/lib/cjs/SearchBar.js

@@ -216,13 +216,13 @@ function SearchBar(props) {
         delayed.call();
     };
     // Submit at once
-    const handleSubmitInstant = (reset = false) => {
+    const handleSubmitInstant = (reset = false, init = false) => {
         // Prepare data
         const data = new FormData(state.form);
         if (state.moreForm != null) {
             shared_1.DomUtils.mergeFormData(data, new FormData(state.moreForm));
         }
-        onSubmit(data, reset);
+        onSubmit(data, reset, init);
     };
     const delayed = (0, react_2.useDelayedExecutor)(handleSubmitInstant, 480);
     // Reset
@@ -237,8 +237,8 @@ function SearchBar(props) {
     };
     react_1.default.useEffect(() => {
         // Delayed way
-        if (autoSubmitDelay > 0) {
-            delayed.call(autoSubmitDelay);
+        if (autoSubmitDelay > 10) {
+            delayed.call(autoSubmitDelay, false, true);
         }
         return () => {
             delayed.clear();
@@ -248,7 +248,12 @@ function SearchBar(props) {
     return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                     if (form)
                         state.form = form;
-                }, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { ref: dimensions[0][0], className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: `${itemGap}px`, width: width, overflow: "hidden", paddingTop: "6px", sx: {
+                }, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { ref: dimensions[0][0], className: "SearchBarContainer", direction: "row", spacing: `${itemGap}px`, sx: {
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width,
+                        overflow: "hidden",
+                        paddingTop: "6px",
                         "& > :not(style)": {
                             flexBasis: "auto",
                             flexGrow: 0,
@@ -271,7 +276,9 @@ function SearchBar(props) {
                 }, open: open, onClose: () => updateOpen(false), children: [top === true && (0, jsx_runtime_1.jsx)(Toolbar_1.default, {}), (0, jsx_runtime_1.jsx)("form", { onChange: moreFormChange, ref: (form) => {
                             if (form)
                                 state.moreForm = form;
-                        }, children: (0, jsx_runtime_1.jsx)(Stack_1.default, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
+                        }, children: (0, jsx_runtime_1.jsx)(Stack_1.default, { direction: "column", spacing: 2, sx: {
+                                padding: 2,
+                                alignItems: "stretch",
                                 "& > :not(style)": {
                                     minWidth: "100px"
                                 }

package/lib/cjs/SearchField.js

@@ -16,14 +16,8 @@ const TextField_1 = __importDefault(require("@mui/material/TextField"));
  */
 function SearchField(props) {
     // Destruct
-    const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, readOnly, size = MUGlobal_1.MUGlobal.searchFieldSize, variant = MUGlobal_1.MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
-    // Shrink
-    InputLabelProps.shrink ??= MUGlobal_1.MUGlobal.searchFieldShrink;
-    // Read only
-    if (readOnly != null)
-        InputProps.readOnly = readOnly;
-    // Min characters
-    inputProps["data-min-chars"] = minChars;
+    const { changeDelay, onChange, readOnly, size = MUGlobal_1.MUGlobal.searchFieldSize, variant = MUGlobal_1.MUGlobal.searchFieldVariant, minChars = 0, slotProps, ...rest } = props;
+    const { input, inputLabel, htmlInput, ...restSlotProps } = slotProps ?? {};
     const isMounted = react_2.default.useRef(true);
     const delayed = onChange != null && changeDelay != null && changeDelay >= 1
         ? (0, react_1.useDelayedExecutor)(onChange, changeDelay)
@@ -52,5 +46,10 @@ function SearchField(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { onChange: onChangeEx, size: size, variant: variant, slotProps: {
+            input: { readOnly, ...input },
+            inputLabel: { shrink: MUGlobal_1.MUGlobal.searchFieldShrink, ...inputLabel },
+            htmlInput: { ["data-min-chars"]: minChars, ...htmlInput },
+            ...restSlotProps
+        }, ...rest }));
 }

package/lib/cjs/SwitchAnt.js

@@ -37,12 +37,12 @@ function SwitchAnt(props) {
         setControlChecked(checked);
     };
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { onClick: () => controlChecked && ref.current?.click(), sx: {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { onClick: () => controlChecked && ref.current?.click(), sx: {
                     cursor: "pointer",
                     color: controlChecked
                         ? undefined
                         : (theme) => activeColor ?? theme.palette.warning.main
-                }, children: startLabel }), (0, jsx_runtime_1.jsx)(Switch_1.default, { checked: controlChecked, inputRef: ref, value: value, onChange: onChangeLocal, ...rest }), (0, jsx_runtime_1.jsx)(Typography_1.default, { onClick: () => !controlChecked && ref.current?.click(), sx: {
+                }, children: startLabel }), (0, jsx_runtime_1.jsx)(Switch_1.default, { checked: controlChecked, ref: ref, value: value, onChange: onChangeLocal, ...rest }), (0, jsx_runtime_1.jsx)(Typography_1.default, { onClick: () => !controlChecked && ref.current?.click(), sx: {
                     cursor: "pointer",
                     color: controlChecked
                         ? (theme) => activeColor ?? theme.palette.warning.main

package/lib/cjs/SwitchField.js

@@ -35,5 +35,5 @@ function SwitchField(props) {
                             "& input": {
                                 display: "none"
                             }
-                        } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && (0, jsx_runtime_1.jsx)(FormHelperText_1.default, { children: helperText })] }));
+                        } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { sx: { paddingLeft: 2, paddingY: "7px" }, children: group }))] }), helperText && (0, jsx_runtime_1.jsx)(FormHelperText_1.default, { children: helperText })] }));
 }