@etsoo/materialui 1.5.81 → 1.5.83

package/lib/cjs/EmailInput.js

@@ -6,16 +6,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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
  */
 function EmailInput(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Destruct
-    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, 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, name: name, slotProps: {
-            htmlInput: { inputMode: "email", maxLength: 128 },
-            ...slotProps
+    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, ...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

@@ -6,16 +6,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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
  */
 function MobileInput(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Destruct
-    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "mobile", fullWidth = true, name = "mobile", ...rest } = props;
+    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, name: name, slotProps: {
-            htmlInput: { inputMode: "tel", maxLength: 18 },
-            ...slotProps
+    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, ...htmlInput },
+            inputLabel: { shrink: MUGlobal_1.MUGlobal.inputFieldShrink, ...inputLabel },
+            ...restSlotProps
         }, ...rest }));
 }

package/lib/cjs/PhoneInput.js

@@ -6,16 +6,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PhoInput = PhoInput;
 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) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Destruct
-    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "phone", fullWidth = true, name = "phone", ...rest } = props;
+    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, name: name, slotProps: {
-            htmlInput: { inputMode: "tel", maxLength: 18 },
-            ...slotProps
+    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, ...htmlInput },
+            inputLabel: { shrink: MUGlobal_1.MUGlobal.inputFieldShrink, ...inputLabel },
+            ...restSlotProps
         }, ...rest }));
 }

package/lib/mjs/EmailInput.js

@@ -1,15 +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";
 /**
  * Email input
  * @param props Props
  */
 export function EmailInput(props) {
+    // Global app
+    const app = useAppContext();
     // Destruct
-    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "email", fullWidth = true, 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, name: name, slotProps: {
-            htmlInput: { inputMode: "email", maxLength: 128 },
-            ...slotProps
+    return (_jsx(TextField, { type: "email", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, 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,15 +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";
 /**
  * Mobile input
  * @param props Props
  */
 export function MobileInput(props) {
+    // Global app
+    const app = useAppContext();
     // Destruct
-    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "mobile", fullWidth = true, name = "mobile", ...rest } = props;
+    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, name: name, slotProps: {
-            htmlInput: { inputMode: "tel", maxLength: 18 },
-            ...slotProps
+    return (_jsx(TextField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
+            htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
+            inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
+            ...restSlotProps
         }, ...rest }));
 }

package/lib/mjs/PhoneInput.js

@@ -1,15 +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) {
+    // Global app
+    const app = useAppContext();
     // Destruct
-    const { slotProps, autoCapitalize = "none", autoCorrect = "off", autoComplete = "phone", fullWidth = true, name = "phone", ...rest } = props;
+    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, name: name, slotProps: {
-            htmlInput: { inputMode: "tel", maxLength: 18 },
-            ...slotProps
+    return (_jsx(TextField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, 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.81",
+  "version": "1.5.83",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -46,7 +46,7 @@
     "@etsoo/shared": "^1.2.79",
     "@mui/icons-material": "^7.3.5",
     "@mui/material": "^7.3.5",
-    "@mui/x-data-grid": "^8.16.0",
+    "@mui/x-data-grid": "^8.17.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.3.0",

package/src/EmailInput.tsx

@@ -1,4 +1,6 @@
 import TextField, { TextFieldProps } from "@mui/material/TextField";
+import { useAppContext } from "./app/ReactApp";
+import { MUGlobal } from "./MUGlobal";
 
 /**
  * Email input props
@@ -10,17 +12,24 @@ export type EmailInputProps = Omit<TextFieldProps, "type"> & {};
  * @param props Props
  */
 export function EmailInput(props: EmailInputProps) {
+  // Global app
+  const app = useAppContext();
+
   // 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
@@ -29,10 +38,12 @@ export function EmailInput(props: EmailInputProps) {
       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/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,4 +1,6 @@
 import TextField, { TextFieldProps } from "@mui/material/TextField";
+import { useAppContext } from "./app/ReactApp";
+import { MUGlobal } from "./MUGlobal";
 
 /**
  * Mobile input props
@@ -10,6 +12,9 @@ export type MobileInputProps = Omit<TextFieldProps, "type"> & {};
  * @param props Props
  */
 export function MobileInput(props: MobileInputProps) {
+  // Global app
+  const app = useAppContext();
+
   // Destruct
   const {
     slotProps,
@@ -17,10 +22,14 @@ export function MobileInput(props: MobileInputProps) {
     autoCorrect = "off",
     autoComplete = "mobile",
     fullWidth = true,
+    label = app?.get("mobile"),
     name = "mobile",
     ...rest
   } = props;
 
+  // Slot props
+  const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
+
   // Layout
   return (
     <TextField
@@ -29,10 +38,12 @@ export function MobileInput(props: MobileInputProps) {
       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/src/PhoneInput.tsx

@@ -1,4 +1,6 @@
 import TextField, { TextFieldProps } from "@mui/material/TextField";
+import { useAppContext } from "./app/ReactApp";
+import { MUGlobal } from "./MUGlobal";
 
 /**
  * Phone input props
@@ -10,6 +12,9 @@ export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
  * @param props Props
  */
 export function PhoInput(props: PhoneInputProps) {
+  // Global app
+  const app = useAppContext();
+
   // Destruct
   const {
     slotProps,
@@ -17,10 +22,14 @@ export function PhoInput(props: PhoneInputProps) {
     autoCorrect = "off",
     autoComplete = "phone",
     fullWidth = true,
+    label = app?.get("phone"),
     name = "phone",
     ...rest
   } = props;
 
+  // Slot props
+  const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
+
   // Layout
   return (
     <TextField
@@ -29,10 +38,12 @@ export function PhoInput(props: PhoneInputProps) {
       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}
     />