@etsoo/materialui 1.4.70 → 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/cjs/pages/CommonPage.js

@@ -30,9 +30,11 @@ function CommonPage(props) {
     }
     // Labels
     const labels = Labels_1.Labels.CommonPage;
+    const theme = (0, material_1.useTheme)();
+    const distance = react_1.default.useMemo(() => MUGlobal_1.MUGlobal.updateWithTheme(fabPadding, theme.spacing), [fabPadding, theme.spacing]);
     // Update
     const updateRef = react_1.default.useRef(false);
-    const update = onUpdateAll
+    const update = react_1.default.useMemo(() => onUpdateAll
         ? onUpdateAll
         : onUpdate
             ? async (authorized) => {
@@ -48,9 +50,7 @@ function CommonPage(props) {
                         updateRef.current = true;
                     }
                 }
-                : undefined;
-    const theme = (0, material_1.useTheme)();
-    const distance = react_1.default.useMemo(() => MUGlobal_1.MUGlobal.updateWithTheme(fabPadding, theme.spacing), [fabPadding, theme.spacing]);
+                : undefined, [onUpdateAll, onUpdate, onRefresh]);
     react_1.default.useEffect(() => {
         if (updateRef.current && update) {
             update(true, []);

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/lib/mjs/pages/CommonPage.js

@@ -24,9 +24,11 @@ export function CommonPage(props) {
     }
     // Labels
     const labels = Labels.CommonPage;
+    const theme = useTheme();
+    const distance = React.useMemo(() => MUGlobal.updateWithTheme(fabPadding, theme.spacing), [fabPadding, theme.spacing]);
     // Update
     const updateRef = React.useRef(false);
-    const update = onUpdateAll
+    const update = React.useMemo(() => onUpdateAll
         ? onUpdateAll
         : onUpdate
             ? async (authorized) => {
@@ -42,9 +44,7 @@ export function CommonPage(props) {
                         updateRef.current = true;
                     }
                 }
-                : undefined;
-    const theme = useTheme();
-    const distance = React.useMemo(() => MUGlobal.updateWithTheme(fabPadding, theme.spacing), [fabPadding, theme.spacing]);
+                : undefined, [onUpdateAll, onUpdate, onRefresh]);
     React.useEffect(() => {
         if (updateRef.current && update) {
             update(true, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.70",
+  "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}
     />
   );
-}
+}

package/src/pages/CommonPage.tsx

@@ -127,32 +127,36 @@ export function CommonPage(props: CommonPageProps) {
   // Labels
   const labels = Labels.CommonPage;
 
-  // Update
-  const updateRef = React.useRef(false);
-  const update = onUpdateAll
-    ? onUpdateAll
-    : onUpdate
-    ? async (authorized?: boolean) => {
-        if (authorized == null || authorized) {
-          await onUpdate();
-          updateRef.current = true;
-        }
-      }
-    : onRefresh
-    ? async (authorized?: boolean) => {
-        if (authorized) {
-          await onRefresh();
-          updateRef.current = true;
-        }
-      }
-    : undefined;
-
   const theme = useTheme();
   const distance = React.useMemo(
     () => MUGlobal.updateWithTheme(fabPadding, theme.spacing),
     [fabPadding, theme.spacing]
   );
 
+  // Update
+  const updateRef = React.useRef(false);
+  const update = React.useMemo(
+    () =>
+      onUpdateAll
+        ? onUpdateAll
+        : onUpdate
+        ? async (authorized?: boolean) => {
+            if (authorized == null || authorized) {
+              await onUpdate();
+              updateRef.current = true;
+            }
+          }
+        : onRefresh
+        ? async (authorized?: boolean) => {
+            if (authorized) {
+              await onRefresh();
+              updateRef.current = true;
+            }
+          }
+        : undefined,
+    [onUpdateAll, onUpdate, onRefresh]
+  );
+
   React.useEffect(() => {
     if (updateRef.current && update) {
       update(true, []);