@etsoo/materialui 1.4.71 → 1.4.72

package/lib/cjs/MaskInput.d.ts

@@ -35,5 +35,5 @@ export type MaskInputProps = TextFieldProps & {
  * @param props Props
  * @returns Component
  */
-export declare function MaskInput(props: MaskInputProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function MaskInput(props: MaskInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/cjs/MaskInput.js

@@ -8,6 +8,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const MUGlobal_1 = require("./MUGlobal");
+// Currently CommonJS modules are not supported by "react-imask" package
+let useIMask;
+import("react-imask").then((module) => useIMask = module.useIMask);
 /**
  * Mask input
  * https://imask.js.org/
@@ -16,13 +19,8 @@ const MUGlobal_1 = require("./MUGlobal");
  */
 function MaskInput(props) {
     // Destruct
-    const { defaultValue, mask, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal_1.MUGlobal.searchFieldSize : MUGlobal_1.MUGlobal.inputFieldSize, value, variant = search ? MUGlobal_1.MUGlobal.searchFieldVariant : MUGlobal_1.MUGlobal.inputFieldVariant, ...rest } = props;
-    // State
-    const [useIMask, setUseIMask] = react_1.default.useState(null);
-    react_1.default.useEffect(() => {
-        import("react-imask").then((module) => setUseIMask(module.useIMask));
-    }, []);
-    const { ref, maskRef } = useIMask == null ? {} : useIMask(mask, {
+    const { defaultValue, mask, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal_1.MUGlobal.searchFieldSize : MUGlobal_1.MUGlobal.inputFieldSize, slotProps, value, variant = search ? MUGlobal_1.MUGlobal.searchFieldVariant : MUGlobal_1.MUGlobal.inputFieldVariant, ...rest } = props;
+    const { ref, maskRef } = useIMask(mask, {
         onAccept: (value, maskRef, event) => {
             if (onAccept)
                 onAccept(value, maskRef, event);
@@ -34,14 +32,14 @@ function MaskInput(props) {
     });
     const localValue = defaultValue ?? value;
     react_1.default.useEffect(() => {
-        if (maskRef?.current == null || localValue == null)
+        if (maskRef.current == null || localValue == null)
             return;
         maskRef.current.value = String(localValue);
         maskRef.current.updateValue();
-    }, [maskRef?.current, localValue]);
+    }, [maskRef.current, localValue]);
     // Layout
-    return ref == null ? undefined : ((0, jsx_runtime_1.jsx)(material_1.TextField, { slotProps: {
-            htmlInput: { readOnly },
-            inputLabel: { shrink: search ? MUGlobal_1.MUGlobal.searchFieldShrink : MUGlobal_1.MUGlobal.inputFieldShrink }
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { slotProps: {
+            htmlInput: { readOnly, ...slotProps?.htmlInput },
+            inputLabel: { shrink: search ? MUGlobal_1.MUGlobal.searchFieldShrink : MUGlobal_1.MUGlobal.inputFieldShrink, ...slotProps?.inputLabel }
         }, size: size, variant: variant, inputRef: ref, ...rest }));
 }

package/lib/mjs/MaskInput.d.ts

@@ -35,5 +35,5 @@ export type MaskInputProps = TextFieldProps & {
  * @param props Props
  * @returns Component
  */
-export declare function MaskInput(props: MaskInputProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function MaskInput(props: MaskInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/mjs/MaskInput.js

@@ -2,6 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TextField } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "./MUGlobal";
+// Currently CommonJS modules are not supported by "react-imask" package
+let useIMask;
+import("react-imask").then((module) => useIMask = module.useIMask);
 /**
  * Mask input
  * https://imask.js.org/
@@ -10,13 +13,8 @@ import { MUGlobal } from "./MUGlobal";
  */
 export function MaskInput(props) {
     // Destruct
-    const { defaultValue, mask, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, value, variant = search ? MUGlobal.searchFieldVariant : MUGlobal.inputFieldVariant, ...rest } = props;
-    // State
-    const [useIMask, setUseIMask] = React.useState(null);
-    React.useEffect(() => {
-        import("react-imask").then((module) => setUseIMask(module.useIMask));
-    }, []);
-    const { ref, maskRef } = useIMask == null ? {} : useIMask(mask, {
+    const { defaultValue, mask, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, slotProps, value, variant = search ? MUGlobal.searchFieldVariant : MUGlobal.inputFieldVariant, ...rest } = props;
+    const { ref, maskRef } = useIMask(mask, {
         onAccept: (value, maskRef, event) => {
             if (onAccept)
                 onAccept(value, maskRef, event);
@@ -28,14 +26,14 @@ export function MaskInput(props) {
     });
     const localValue = defaultValue ?? value;
     React.useEffect(() => {
-        if (maskRef?.current == null || localValue == null)
+        if (maskRef.current == null || localValue == null)
             return;
         maskRef.current.value = String(localValue);
         maskRef.current.updateValue();
-    }, [maskRef?.current, localValue]);
+    }, [maskRef.current, localValue]);
     // Layout
-    return ref == null ? undefined : (_jsx(TextField, { slotProps: {
-            htmlInput: { readOnly },
-            inputLabel: { shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink }
+    return (_jsx(TextField, { slotProps: {
+            htmlInput: { readOnly, ...slotProps?.htmlInput },
+            inputLabel: { shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink, ...slotProps?.inputLabel }
         }, size: size, variant: variant, inputRef: ref, ...rest }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.71",
+  "version": "1.4.72",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/MaskInput.tsx

@@ -8,6 +8,10 @@ type RIReturns = ReturnType<ReactIMask>;
 type RIMaskRef = RIReturns["maskRef"]["current"];
 type RIMValue = RIReturns["value"];
 
+// Currently CommonJS modules are not supported by "react-imask" package
+let useIMask: ReactIMask;
+import("react-imask").then((module) => useIMask = module.useIMask);
+
 /**
  * Mask input props
  */
@@ -56,18 +60,13 @@ export function MaskInput(
     readOnly,
     search = false,
     size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize,
+    slotProps,
     value,
     variant = search ? MUGlobal.searchFieldVariant : MUGlobal.inputFieldVariant,
     ...rest
   } = props;
 
-  // State
-  const [useIMask, setUseIMask] = React.useState<ReactIMask | null>(null);
-  React.useEffect(() => {
-    import("react-imask").then((module) => setUseIMask(module.useIMask));
-  }, []);
-
-  const { ref, maskRef } = useIMask == null ? {} : useIMask(mask, {
+  const { ref, maskRef } = useIMask(mask, {
     onAccept: (value: RIMValue, maskRef: RIMaskRef, event?: InputEvent) => {
       if (onAccept) onAccept(value, maskRef, event);
     },
@@ -79,17 +78,17 @@ export function MaskInput(
   const localValue = defaultValue ?? value;
 
   React.useEffect(() => {
-    if (maskRef?.current == null || localValue == null) return;
+    if (maskRef.current == null || localValue == null) return;
     maskRef.current.value = String(localValue);
     maskRef.current.updateValue();
-  }, [maskRef?.current, localValue]);
+  }, [maskRef.current, localValue]);
 
   // Layout
-  return ref == null ? undefined: (
+  return (
     <TextField
       slotProps={{
-         htmlInput: { readOnly },
-         inputLabel: { shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink }
+         htmlInput: { readOnly, ...slotProps?.htmlInput },
+         inputLabel: { shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink, ...slotProps?.inputLabel }
       }}
       size={size}
       variant={variant}
@@ -97,4 +96,4 @@ export function MaskInput(
       {...rest}
     />
   );
-}
+}