@etsoo/materialui 1.5.82 → 1.5.84

package/lib/cjs/EmailInput.js

@@ -7,6 +7,7 @@ exports.EmailInput = EmailInput;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const ReactApp_1 = require("./app/ReactApp");
+const MUGlobal_1 = require("./MUGlobal");
 /**
  * Email input
  * @param props Props
@@ -15,10 +16,13 @@ function EmailInput(props) {
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
     // Destruct
-    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, label = app?.get("email"), name = "email", ...rest } = props;
+    const { autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, label = app?.get("email"), name = "email", slotProps, ...rest } = props;
+    // Slot props
+    const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Layout
     return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "email", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
-            htmlInput: { inputMode: "email", maxLength: 128 },
-            ...slotProps
+            htmlInput: { inputMode: "email", maxLength: 128, ...htmlInput },
+            inputLabel: { shrink: MUGlobal_1.MUGlobal.inputFieldShrink, ...inputLabel },
+            ...restSlotProps
         }, ...rest }));
 }

package/lib/cjs/InputField.js

@@ -16,14 +16,9 @@ const TextField_1 = __importDefault(require("@mui/material/TextField"));
  */
 exports.InputField = react_2.default.forwardRef((props, ref) => {
     // Destruct
-    const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, onChangeDelay, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, 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 { InputProps = {}, inputProps = {}, changeDelay, slotProps, onChange, onChangeDelay, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
+    // Slot props
+    const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
     const isMounted = react_2.default.useRef(true);
     const createDelayed = () => {
         if (changeDelay != null && changeDelay >= 1) {
@@ -54,5 +49,17 @@ exports.InputField = react_2.default.forwardRef((props, ref) => {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { ref: ref, InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { ref: ref, slotProps: {
+            htmlInput: {
+                ["data-min-chars"]: minChars,
+                ...htmlInput,
+                ...inputProps
+            },
+            input: { readOnly, ...input, ...InputProps },
+            inputLabel: {
+                shrink: MUGlobal_1.MUGlobal.inputFieldShrink,
+                ...inputLabel
+            },
+            ...restSlotProps
+        }, onChange: onChangeEx, size: size, variant: variant, ...rest }));
 });

package/lib/cjs/MobileInput.js

@@ -7,6 +7,7 @@ exports.MobileInput = MobileInput;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const ReactApp_1 = require("./app/ReactApp");
+const MUGlobal_1 = require("./MUGlobal");
 /**
  * Mobile input
  * @param props Props
@@ -16,9 +17,12 @@ function MobileInput(props) {
     const app = (0, ReactApp_1.useAppContext)();
     // Destruct
     const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "mobile", fullWidth = true, label = app?.get("mobile"), name = "mobile", ...rest } = props;
+    // Slot props
+    const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Layout
     return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
-            htmlInput: { inputMode: "tel", maxLength: 18 },
-            ...slotProps
+            htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
+            inputLabel: { shrink: MUGlobal_1.MUGlobal.inputFieldShrink, ...inputLabel },
+            ...restSlotProps
         }, ...rest }));
 }

package/lib/cjs/PhoneInput.d.ts

@@ -7,4 +7,4 @@ export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
  * Phone input
  * @param props Props
  */
-export declare function PhoInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function PhoneInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/PhoneInput.js

@@ -3,22 +3,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PhoInput = PhoInput;
+exports.PhoneInput = PhoneInput;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const ReactApp_1 = require("./app/ReactApp");
+const MUGlobal_1 = require("./MUGlobal");
 /**
  * Phone input
  * @param props Props
  */
-function PhoInput(props) {
+function PhoneInput(props) {
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
     // Destruct
     const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "phone", fullWidth = true, label = app?.get("phone"), name = "phone", ...rest } = props;
+    // Slot props
+    const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Layout
     return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
-            htmlInput: { inputMode: "tel", maxLength: 18 },
-            ...slotProps
+            htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
+            inputLabel: { shrink: MUGlobal_1.MUGlobal.inputFieldShrink, ...inputLabel },
+            ...restSlotProps
         }, ...rest }));
 }

package/lib/mjs/EmailInput.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import TextField from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
+import { MUGlobal } from "./MUGlobal";
 /**
  * Email input
  * @param props Props
@@ -9,10 +10,13 @@ export function EmailInput(props) {
     // Global app
     const app = useAppContext();
     // Destruct
-    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, label = app?.get("email"), name = "email", ...rest } = props;
+    const { autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, label = app?.get("email"), name = "email", slotProps, ...rest } = props;
+    // Slot props
+    const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Layout
     return (_jsx(TextField, { type: "email", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
-            htmlInput: { inputMode: "email", maxLength: 128 },
-            ...slotProps
+            htmlInput: { inputMode: "email", maxLength: 128, ...htmlInput },
+            inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
+            ...restSlotProps
         }, ...rest }));
 }

package/lib/mjs/InputField.js

@@ -10,14 +10,9 @@ import TextField from "@mui/material/TextField";
  */
 export const InputField = React.forwardRef((props, ref) => {
     // Destruct
-    const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
-    // Shrink
-    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
-    // Read only
-    if (readOnly != null)
-        InputProps.readOnly = readOnly;
-    // Min characters
-    inputProps["data-min-chars"] = minChars;
+    const { InputProps = {}, inputProps = {}, changeDelay, slotProps, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
+    // Slot props
+    const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
     const isMounted = React.useRef(true);
     const createDelayed = () => {
         if (changeDelay != null && changeDelay >= 1) {
@@ -48,5 +43,17 @@ export const InputField = React.forwardRef((props, ref) => {
         };
     }, []);
     // Layout
-    return (_jsx(TextField, { ref: ref, InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
+    return (_jsx(TextField, { ref: ref, slotProps: {
+            htmlInput: {
+                ["data-min-chars"]: minChars,
+                ...htmlInput,
+                ...inputProps
+            },
+            input: { readOnly, ...input, ...InputProps },
+            inputLabel: {
+                shrink: MUGlobal.inputFieldShrink,
+                ...inputLabel
+            },
+            ...restSlotProps
+        }, onChange: onChangeEx, size: size, variant: variant, ...rest }));
 });

package/lib/mjs/MobileInput.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import TextField from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
+import { MUGlobal } from "./MUGlobal";
 /**
  * Mobile input
  * @param props Props
@@ -10,9 +11,12 @@ export function MobileInput(props) {
     const app = useAppContext();
     // Destruct
     const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "mobile", fullWidth = true, label = app?.get("mobile"), name = "mobile", ...rest } = props;
+    // Slot props
+    const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Layout
     return (_jsx(TextField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
-            htmlInput: { inputMode: "tel", maxLength: 18 },
-            ...slotProps
+            htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
+            inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
+            ...restSlotProps
         }, ...rest }));
 }

package/lib/mjs/PhoneInput.d.ts

@@ -7,4 +7,4 @@ export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
  * Phone input
  * @param props Props
  */
-export declare function PhoInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function PhoneInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/PhoneInput.js

@@ -1,18 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import TextField from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
+import { MUGlobal } from "./MUGlobal";
 /**
  * Phone input
  * @param props Props
  */
-export function PhoInput(props) {
+export function PhoneInput(props) {
     // Global app
     const app = useAppContext();
     // Destruct
     const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "phone", fullWidth = true, label = app?.get("phone"), name = "phone", ...rest } = props;
+    // Slot props
+    const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Layout
     return (_jsx(TextField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
-            htmlInput: { inputMode: "tel", maxLength: 18 },
-            ...slotProps
+            htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
+            inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
+            ...restSlotProps
         }, ...rest }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.82",
+  "version": "1.5.84",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -83,6 +83,6 @@
     "@vitejs/plugin-react": "^5.1.0",
     "jsdom": "^27.1.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.7"
+    "vitest": "^4.0.8"
   }
 }

package/src/EmailInput.tsx

@@ -1,5 +1,6 @@
 import TextField, { TextFieldProps } from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
+import { MUGlobal } from "./MUGlobal";
 
 /**
  * Email input props
@@ -16,16 +17,19 @@ export function EmailInput(props: EmailInputProps) {
 
   // Destruct
   const {
-    slotProps,
     autoCapitalize = "none",
     autoCorrect = "off",
     autoComplete = "email",
     fullWidth = true,
     label = app?.get("email"),
     name = "email",
+    slotProps,
     ...rest
   } = props;
 
+  // Slot props
+  const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
+
   // Layout
   return (
     <TextField
@@ -37,8 +41,9 @@ export function EmailInput(props: EmailInputProps) {
       label={label}
       name={name}
       slotProps={{
-        htmlInput: { inputMode: "email", maxLength: 128 },
-        ...slotProps
+        htmlInput: { inputMode: "email", maxLength: 128, ...htmlInput },
+        inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
+        ...restSlotProps
       }}
       {...rest}
     />

package/src/InputField.tsx

@@ -39,10 +39,10 @@ export const InputField = React.forwardRef<HTMLDivElement, InputFieldProps>(
   (props, ref) => {
     // Destruct
     const {
-      changeDelay,
-      InputLabelProps = {},
       InputProps = {},
       inputProps = {},
+      changeDelay,
+      slotProps,
       onChange,
       onChangeDelay,
       readOnly,
@@ -52,14 +52,8 @@ export const InputField = React.forwardRef<HTMLDivElement, InputFieldProps>(
       ...rest
     } = props;
 
-    // Shrink
-    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
-
-    // Read only
-    if (readOnly != null) InputProps.readOnly = readOnly;
-
-    // Min characters
-    inputProps["data-min-chars"] = minChars;
+    // Slot props
+    const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
 
     const isMounted = React.useRef(true);
     const createDelayed = () => {
@@ -100,9 +94,19 @@ export const InputField = React.forwardRef<HTMLDivElement, InputFieldProps>(
     return (
       <TextField
         ref={ref}
-        InputLabelProps={InputLabelProps}
-        InputProps={InputProps}
-        inputProps={inputProps}
+        slotProps={{
+          htmlInput: {
+            ["data-min-chars"]: minChars,
+            ...htmlInput,
+            ...inputProps
+          },
+          input: { readOnly, ...input, ...InputProps },
+          inputLabel: {
+            shrink: MUGlobal.inputFieldShrink,
+            ...inputLabel
+          },
+          ...restSlotProps
+        }}
         onChange={onChangeEx}
         size={size}
         variant={variant}

package/src/MobileInput.tsx

@@ -1,5 +1,6 @@
 import TextField, { TextFieldProps } from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
+import { MUGlobal } from "./MUGlobal";
 
 /**
  * Mobile input props
@@ -26,6 +27,9 @@ export function MobileInput(props: MobileInputProps) {
     ...rest
   } = props;
 
+  // Slot props
+  const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
+
   // Layout
   return (
     <TextField
@@ -37,8 +41,9 @@ export function MobileInput(props: MobileInputProps) {
       label={label}
       name={name}
       slotProps={{
-        htmlInput: { inputMode: "tel", maxLength: 18 },
-        ...slotProps
+        htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
+        inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
+        ...restSlotProps
       }}
       {...rest}
     />

package/src/PhoneInput.tsx

@@ -1,5 +1,6 @@
 import TextField, { TextFieldProps } from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
+import { MUGlobal } from "./MUGlobal";
 
 /**
  * Phone input props
@@ -10,7 +11,7 @@ export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
  * Phone input
  * @param props Props
  */
-export function PhoInput(props: PhoneInputProps) {
+export function PhoneInput(props: PhoneInputProps) {
   // Global app
   const app = useAppContext();
 
@@ -26,6 +27,9 @@ export function PhoInput(props: PhoneInputProps) {
     ...rest
   } = props;
 
+  // Slot props
+  const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
+
   // Layout
   return (
     <TextField
@@ -37,8 +41,9 @@ export function PhoInput(props: PhoneInputProps) {
       label={label}
       name={name}
       slotProps={{
-        htmlInput: { inputMode: "tel", maxLength: 18 },
-        ...slotProps
+        htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
+        inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
+        ...restSlotProps
       }}
       {...rest}
     />