@etsoo/materialui 1.4.69 → 1.4.71

package/lib/cjs/MaskInput.d.ts

@@ -1,7 +1,6 @@
 import { TextFieldProps } from "@mui/material";
 type ReactIMask = typeof import("react-imask", { with: { "resolution-mode": "import" } }).useIMask;
-type ReactIMaskProps = Parameters<ReactIMask>;
-type RIOpts = ReactIMaskProps[0];
+type RIOpts = Parameters<ReactIMask>[0];
 type RIReturns = ReturnType<ReactIMask>;
 type RIMaskRef = RIReturns["maskRef"]["current"];
 type RIMValue = RIReturns["value"];

package/lib/cjs/MaskInput.js

@@ -16,15 +16,13 @@ const MUGlobal_1 = require("./MUGlobal");
  */
 function MaskInput(props) {
     // Destruct
-    const { defaultValue, mask, InputLabelProps = {}, InputProps = {}, 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;
+    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));
     }, []);
-    if (useIMask == null)
-        return;
-    const { ref, maskRef } = useIMask(mask, {
+    const { ref, maskRef } = useIMask == null ? {} : useIMask(mask, {
         onAccept: (value, maskRef, event) => {
             if (onAccept)
                 onAccept(value, maskRef, event);
@@ -35,20 +33,15 @@ function MaskInput(props) {
         }
     });
     const localValue = defaultValue ?? value;
-    // Shrink
-    InputLabelProps.shrink ??= search
-        ? MUGlobal_1.MUGlobal.searchFieldShrink
-        : MUGlobal_1.MUGlobal.inputFieldShrink;
-    // Read only
-    if (readOnly != null)
-        InputProps.readOnly = readOnly;
-    InputProps.inputRef = ref;
     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 ((0, jsx_runtime_1.jsx)(material_1.TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, size: size, variant: variant, ...rest }));
+    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 }
+        }, size: size, variant: variant, inputRef: ref, ...rest }));
 }

package/lib/cjs/pages/CommonPage.js

@@ -30,22 +30,32 @@ 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 update = onUpdateAll
+    const updateRef = react_1.default.useRef(false);
+    const update = react_1.default.useMemo(() => onUpdateAll
         ? onUpdateAll
         : onUpdate
-            ? (authorized) => {
-                if (authorized == null || authorized)
-                    onUpdate();
+            ? async (authorized) => {
+                if (authorized == null || authorized) {
+                    await onUpdate();
+                    updateRef.current = true;
+                }
             }
             : onRefresh
-                ? (authorized) => {
-                    if (authorized)
-                        onRefresh();
+                ? async (authorized) => {
+                    if (authorized) {
+                        await onRefresh();
+                        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, []);
+        }
+    }, [update]);
     // Return the UI
     return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [update && ((0, jsx_runtime_1.jsx)(ReactApp_1.ReactAppStateDetector, { targetFields: targetFields, update: update })), (0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [(0, jsx_runtime_1.jsxs)(FabBox_1.FabBox, { sx: {
                             zIndex: 1,

package/lib/mjs/MaskInput.d.ts

@@ -1,7 +1,6 @@
 import { TextFieldProps } from "@mui/material";
 type ReactIMask = typeof import("react-imask", { with: { "resolution-mode": "import" } }).useIMask;
-type ReactIMaskProps = Parameters<ReactIMask>;
-type RIOpts = ReactIMaskProps[0];
+type RIOpts = Parameters<ReactIMask>[0];
 type RIReturns = ReturnType<ReactIMask>;
 type RIMaskRef = RIReturns["maskRef"]["current"];
 type RIMValue = RIReturns["value"];

package/lib/mjs/MaskInput.js

@@ -10,15 +10,13 @@ import { MUGlobal } from "./MUGlobal";
  */
 export function MaskInput(props) {
     // Destruct
-    const { defaultValue, mask, InputLabelProps = {}, InputProps = {}, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, value, variant = search ? MUGlobal.searchFieldVariant : MUGlobal.inputFieldVariant, ...rest } = props;
+    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));
     }, []);
-    if (useIMask == null)
-        return;
-    const { ref, maskRef } = useIMask(mask, {
+    const { ref, maskRef } = useIMask == null ? {} : useIMask(mask, {
         onAccept: (value, maskRef, event) => {
             if (onAccept)
                 onAccept(value, maskRef, event);
@@ -29,20 +27,15 @@ export function MaskInput(props) {
         }
     });
     const localValue = defaultValue ?? value;
-    // Shrink
-    InputLabelProps.shrink ??= search
-        ? MUGlobal.searchFieldShrink
-        : MUGlobal.inputFieldShrink;
-    // Read only
-    if (readOnly != null)
-        InputProps.readOnly = readOnly;
-    InputProps.inputRef = ref;
     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 (_jsx(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, size: size, variant: variant, ...rest }));
+    return ref == null ? undefined : (_jsx(TextField, { slotProps: {
+            htmlInput: { readOnly },
+            inputLabel: { shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink }
+        }, size: size, variant: variant, inputRef: ref, ...rest }));
 }

package/lib/mjs/pages/CommonPage.js

@@ -24,22 +24,32 @@ 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 update = onUpdateAll
+    const updateRef = React.useRef(false);
+    const update = React.useMemo(() => onUpdateAll
         ? onUpdateAll
         : onUpdate
-            ? (authorized) => {
-                if (authorized == null || authorized)
-                    onUpdate();
+            ? async (authorized) => {
+                if (authorized == null || authorized) {
+                    await onUpdate();
+                    updateRef.current = true;
+                }
             }
             : onRefresh
-                ? (authorized) => {
-                    if (authorized)
-                        onRefresh();
+                ? async (authorized) => {
+                    if (authorized) {
+                        await onRefresh();
+                        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, []);
+        }
+    }, [update]);
     // Return the UI
     return (_jsxs(React.Fragment, { children: [update && (_jsx(ReactAppStateDetector, { targetFields: targetFields, update: update })), _jsxs(Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [_jsxs(FabBox, { sx: {
                             zIndex: 1,

package/package.json

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

package/src/MaskInput.tsx

@@ -3,8 +3,7 @@ import React from "react";
 import { MUGlobal } from "./MUGlobal";
 
 type ReactIMask = typeof import("react-imask", { with: { "resolution-mode": "import" }}).useIMask;
-type ReactIMaskProps = Parameters<ReactIMask>;
-type RIOpts = ReactIMaskProps[0];
+type RIOpts = Parameters<ReactIMask>[0];
 type RIReturns = ReturnType<ReactIMask>;
 type RIMaskRef = RIReturns["maskRef"]["current"];
 type RIMValue = RIReturns["value"];
@@ -52,8 +51,6 @@ export function MaskInput(
   const {
     defaultValue,
     mask,
-    InputLabelProps = {},
-    InputProps = {},
     onAccept,
     onComplete,
     readOnly,
@@ -70,9 +67,7 @@ export function MaskInput(
     import("react-imask").then((module) => setUseIMask(module.useIMask));
   }, []);
 
-  if(useIMask == null) return;
-
-  const { ref, maskRef } = useIMask(mask, {
+  const { ref, maskRef } = useIMask == null ? {} : useIMask(mask, {
     onAccept: (value: RIMValue, maskRef: RIMaskRef, event?: InputEvent) => {
       if (onAccept) onAccept(value, maskRef, event);
     },
@@ -80,30 +75,25 @@ export function MaskInput(
       if (onComplete) onComplete(value, maskRef, event);
     }
   });
-  const localValue = defaultValue ?? value;
 
-  // Shrink
-  InputLabelProps.shrink ??= search
-    ? MUGlobal.searchFieldShrink
-    : MUGlobal.inputFieldShrink;
-
-  // Read only
-  if (readOnly != null) InputProps.readOnly = readOnly;
-  InputProps.inputRef = ref;
+  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 (
+  return ref == null ? undefined: (
     <TextField
-      InputLabelProps={InputLabelProps}
-      InputProps={InputProps}
+      slotProps={{
+         htmlInput: { readOnly },
+         inputLabel: { shrink: search ? MUGlobal.searchFieldShrink : MUGlobal.inputFieldShrink }
+      }}
       size={size}
       variant={variant}
+      inputRef={ref}
       {...rest}
     />
   );

package/src/pages/CommonPage.tsx

@@ -127,25 +127,42 @@ export function CommonPage(props: CommonPageProps) {
   // Labels
   const labels = Labels.CommonPage;
 
-  // Update
-  const update = onUpdateAll
-    ? onUpdateAll
-    : onUpdate
-    ? (authorized?: boolean) => {
-        if (authorized == null || authorized) onUpdate();
-      }
-    : onRefresh
-    ? (authorized?: boolean) => {
-        if (authorized) onRefresh();
-      }
-    : 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, []);
+    }
+  }, [update]);
+
   // Return the UI
   return (
     <React.Fragment>