@etsoo/materialui 1.6.45 → 1.6.47

package/lib/cjs/DataGridEx.js

@@ -319,9 +319,7 @@ function DataGridEx(props) {
                 const child = cellRenderer({
                     data,
                     field,
-                    formattedValue: valueFormatter
-                        ? valueFormatter(formatProps)
-                        : undefined,
+                    formattedValue: valueFormatter ? valueFormatter(formatProps) : null,
                     selected,
                     type,
                     rowIndex,

package/lib/cjs/DataGridRenderers.js

@@ -27,16 +27,19 @@ var DataGridRenderers;
             // First column, show loading indicator
             if (columnIndex === 0)
                 return (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15 });
-            // Others return undefined
-            return undefined;
+            // Others return
+            return;
         }
+        // No formatted value
+        if (formattedValue === undefined)
+            return;
         // No formatted value and data field
         if (formattedValue == null && field == null)
-            return undefined;
+            return;
         // Cell value
         const value = formattedValue ?? data[field];
         if (value == null)
-            return undefined;
+            return;
         // For unknow and string type, keep the simple format
         if (type === react_1.GridDataType.Unkwown)
             return value;
@@ -104,7 +107,6 @@ var DataGridRenderers;
                 return loadedItems.toLocaleString() + (hasNextPage ? "+" : "");
             }
         }
-        return undefined;
     }
     DataGridRenderers.defaultFooterItemRenderer = defaultFooterItemRenderer;
 })(DataGridRenderers || (exports.DataGridRenderers = DataGridRenderers = {}));

package/lib/cjs/NotifierMU.js

@@ -59,6 +59,13 @@ const IconDialogTitle = (0, styles_1.styled)(DialogTitle_1.default, {
         }
     `}
 `;
+const setError = (div, error) => {
+    console.log("setError", error, div == null);
+    if (div == null)
+        return;
+    div.innerText = error ?? "";
+    div.style.paddingTop = error ? "8px" : "0px";
+};
 function isFunctionComponentElement(node) {
     return (react_1.default.isValidElement(node) &&
         typeof node.type === "function" &&
@@ -154,15 +161,12 @@ class NotificationMU extends react_2.NotificationReact {
             throw new Error("Data collector content must be a function component with mRef prop");
         }
         const mRef = content.props.mRef;
-        const errorRef = react_1.default.createRef();
-        const setError = (error) => {
-            if (errorRef.current == null)
-                return;
-            errorRef.current.innerText = error ?? "";
-        };
+        let errorDiv = null;
         // Setup callback
         const options = this.renderSetup ? this.renderSetup({}) : undefined;
         const handleSubmit = async () => {
+            // Clear error
+            setError(undefined);
             if (this.onReturn) {
                 // Get the value
                 const value = mRef.current?.getValue();
@@ -176,14 +180,16 @@ class NotificationMU extends react_2.NotificationReact {
                     return false;
                 }
                 if (typeof v === "string") {
-                    setError(v);
+                    setError(errorDiv, v);
                     return false;
                 }
             }
             this.dismiss();
             return true;
         };
-        return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { ...inputProps, children: [content, (0, jsx_runtime_1.jsx)(Typography_1.default, { component: "div", variant: "caption", ref: errorRef, color: "error" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? (buttons(this, handleSubmit)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { color: "secondary", onClick: () => {
+        return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { ...inputProps, children: [content, (0, jsx_runtime_1.jsx)(Typography_1.default, { component: "div", variant: "caption", ref: (div) => {
+                                errorDiv = div;
+                            }, color: "error", align: "center" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? (buttons(this, handleSubmit)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { color: "secondary", onClick: () => {
                                     if (this.onReturn)
                                         this.onReturn(undefined);
                                     this.dismiss();
@@ -195,13 +201,10 @@ class NotificationMU extends react_2.NotificationReact {
         const title = this.title ?? labels.promptTitle;
         const { buttons, cancelLabel = labels.promptCancel, okLabel = labels.promptOK, cancelButton = true, inputs, type, fullScreen, fullWidth = true, maxWidth, primaryButton = true, primaryButtonProps, inputProps, closable = false, draggable = fullScreen === true ? false : true } = this.inputProps ?? {};
         const inputRef = react_1.default.createRef();
-        const errorRef = react_1.default.createRef();
-        const setError = (error) => {
-            if (errorRef.current == null)
-                return;
-            errorRef.current.innerText = error ?? "";
-        };
+        let errorDiv = null;
         const handleSubmit = async (event) => {
+            // Error
+            setError(undefined);
             const input = inputRef.current;
             if (this.onReturn) {
                 // Inputs case, no HTMLForm set to value, set the current form
@@ -234,7 +237,7 @@ class NotificationMU extends react_2.NotificationReact {
                     return false;
                 }
                 if (typeof v === "string") {
-                    setError(v);
+                    setError(errorDiv, v);
                     input?.focus();
                     return false;
                 }
@@ -269,7 +272,9 @@ class NotificationMU extends react_2.NotificationReact {
                         return false;
                     }
                 }
-            }, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { dividers: true, children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), localInputs, (0, jsx_runtime_1.jsx)(Typography_1.default, { component: "div", variant: "caption", ref: errorRef, color: "error" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? (buttons(this, handleSubmit)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { color: "secondary", onClick: () => {
+            }, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { dividers: true, children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), localInputs, (0, jsx_runtime_1.jsx)(Typography_1.default, { component: "div", variant: "caption", ref: (div) => {
+                                errorDiv = div;
+                            }, color: "error", align: "center" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? (buttons(this, handleSubmit)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { color: "secondary", onClick: () => {
                                     if (this.onReturn)
                                         this.onReturn(undefined);
                                     this.dismiss();

package/lib/mjs/DataGridEx.js

@@ -312,9 +312,7 @@ export function DataGridEx(props) {
                 const child = cellRenderer({
                     data,
                     field,
-                    formattedValue: valueFormatter
-                        ? valueFormatter(formatProps)
-                        : undefined,
+                    formattedValue: valueFormatter ? valueFormatter(formatProps) : null,
                     selected,
                     type,
                     rowIndex,

package/lib/mjs/DataGridRenderers.js

@@ -21,16 +21,19 @@ export var DataGridRenderers;
             // First column, show loading indicator
             if (columnIndex === 0)
                 return _jsx(CircularProgress, { size: 15 });
-            // Others return undefined
-            return undefined;
+            // Others return
+            return;
         }
+        // No formatted value
+        if (formattedValue === undefined)
+            return;
         // No formatted value and data field
         if (formattedValue == null && field == null)
-            return undefined;
+            return;
         // Cell value
         const value = formattedValue ?? data[field];
         if (value == null)
-            return undefined;
+            return;
         // For unknow and string type, keep the simple format
         if (type === GridDataType.Unkwown)
             return value;
@@ -98,7 +101,6 @@ export var DataGridRenderers;
                 return loadedItems.toLocaleString() + (hasNextPage ? "+" : "");
             }
         }
-        return undefined;
     }
     DataGridRenderers.defaultFooterItemRenderer = defaultFooterItemRenderer;
 })(DataGridRenderers || (DataGridRenderers = {}));

package/lib/mjs/NotifierMU.js

@@ -53,6 +53,13 @@ const IconDialogTitle = styled(DialogTitle, {
         }
     `}
 `;
+const setError = (div, error) => {
+    console.log("setError", error, div == null);
+    if (div == null)
+        return;
+    div.innerText = error ?? "";
+    div.style.paddingTop = error ? "8px" : "0px";
+};
 function isFunctionComponentElement(node) {
     return (React.isValidElement(node) &&
         typeof node.type === "function" &&
@@ -148,15 +155,12 @@ export class NotificationMU extends NotificationReact {
             throw new Error("Data collector content must be a function component with mRef prop");
         }
         const mRef = content.props.mRef;
-        const errorRef = React.createRef();
-        const setError = (error) => {
-            if (errorRef.current == null)
-                return;
-            errorRef.current.innerText = error ?? "";
-        };
+        let errorDiv = null;
         // Setup callback
         const options = this.renderSetup ? this.renderSetup({}) : undefined;
         const handleSubmit = async () => {
+            // Clear error
+            setError(undefined);
             if (this.onReturn) {
                 // Get the value
                 const value = mRef.current?.getValue();
@@ -170,14 +174,16 @@ export class NotificationMU extends NotificationReact {
                     return false;
                 }
                 if (typeof v === "string") {
-                    setError(v);
+                    setError(errorDiv, v);
                     return false;
                 }
             }
             this.dismiss();
             return true;
         };
-        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(InfoIcon, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { ...inputProps, children: [content, _jsx(Typography, { component: "div", variant: "caption", ref: errorRef, color: "error" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
+        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(InfoIcon, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { ...inputProps, children: [content, _jsx(Typography, { component: "div", variant: "caption", ref: (div) => {
+                                errorDiv = div;
+                            }, color: "error", align: "center" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
                                     if (this.onReturn)
                                         this.onReturn(undefined);
                                     this.dismiss();
@@ -189,13 +195,10 @@ export class NotificationMU extends NotificationReact {
         const title = this.title ?? labels.promptTitle;
         const { buttons, cancelLabel = labels.promptCancel, okLabel = labels.promptOK, cancelButton = true, inputs, type, fullScreen, fullWidth = true, maxWidth, primaryButton = true, primaryButtonProps, inputProps, closable = false, draggable = fullScreen === true ? false : true } = this.inputProps ?? {};
         const inputRef = React.createRef();
-        const errorRef = React.createRef();
-        const setError = (error) => {
-            if (errorRef.current == null)
-                return;
-            errorRef.current.innerText = error ?? "";
-        };
+        let errorDiv = null;
         const handleSubmit = async (event) => {
+            // Error
+            setError(undefined);
             const input = inputRef.current;
             if (this.onReturn) {
                 // Inputs case, no HTMLForm set to value, set the current form
@@ -228,7 +231,7 @@ export class NotificationMU extends NotificationReact {
                     return false;
                 }
                 if (typeof v === "string") {
-                    setError(v);
+                    setError(errorDiv, v);
                     input?.focus();
                     return false;
                 }
@@ -263,7 +266,9 @@ export class NotificationMU extends NotificationReact {
                         return false;
                     }
                 }
-            }, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(InfoIcon, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { dividers: true, children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), localInputs, _jsx(Typography, { component: "div", variant: "caption", ref: errorRef, color: "error" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
+            }, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(InfoIcon, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { dividers: true, children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), localInputs, _jsx(Typography, { component: "div", variant: "caption", ref: (div) => {
+                                errorDiv = div;
+                            }, color: "error", align: "center" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
                                     if (this.onReturn)
                                         this.onReturn(undefined);
                                     this.dismiss();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.45",
+  "version": "1.6.47",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,13 +40,13 @@
     "@dnd-kit/react": "^0.4.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.60",
+    "@etsoo/appscript": "^1.6.61",
     "@etsoo/notificationbase": "^1.1.69",
-    "@etsoo/react": "^1.8.84",
+    "@etsoo/react": "^1.8.85",
     "@etsoo/shared": "^1.2.83",
     "@mui/icons-material": "^9.0.0",
     "@mui/material": "^9.0.0",
-    "@mui/x-data-grid": "^9.0.1",
+    "@mui/x-data-grid": "^9.0.2",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.4.0",
@@ -81,7 +81,7 @@
     "@types/react-input-mask": "^3.0.6",
     "@vitejs/plugin-react": "^6.0.1",
     "jsdom": "^29.0.2",
-    "typescript": "^6.0.2",
+    "typescript": "^6.0.3",
     "vitest": "^4.1.4"
   }
 }

package/src/DataGridEx.tsx

@@ -665,9 +665,7 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
           const child = cellRenderer({
             data,
             field,
-            formattedValue: valueFormatter
-              ? valueFormatter(formatProps)
-              : undefined,
+            formattedValue: valueFormatter ? valueFormatter(formatProps) : null,
             selected,
             type,
             rowIndex,

package/src/DataGridRenderers.tsx

@@ -31,16 +31,19 @@ export namespace DataGridRenderers {
       // First column, show loading indicator
       if (columnIndex === 0) return <CircularProgress size={15} />;
 
-      // Others return undefined
-      return undefined;
+      // Others return
+      return;
     }
 
+    // No formatted value
+    if (formattedValue === undefined) return;
+
     // No formatted value and data field
-    if (formattedValue == null && field == null) return undefined;
+    if (formattedValue == null && field == null) return;
 
     // Cell value
     const value = formattedValue ?? data[field!];
-    if (value == null) return undefined;
+    if (value == null) return;
 
     // For unknow and string type, keep the simple format
     if (type === GridDataType.Unkwown) return value;
@@ -139,7 +142,5 @@ export namespace DataGridRenderers {
         return loadedItems.toLocaleString() + (hasNextPage ? "+" : "");
       }
     }
-
-    return undefined;
   }
 }

package/src/NotifierMU.tsx

@@ -70,6 +70,13 @@ const IconDialogTitle = styled(DialogTitle, {
     `}
 `;
 
+const setError = (div?: HTMLDivElement | null, error?: string) => {
+  console.log("setError", error, div == null);
+  if (div == null) return;
+  div.innerText = error ?? "";
+  div.style.paddingTop = error ? "8px" : "0px";
+};
+
 /**
  * MU notification data methods
  */
@@ -380,17 +387,15 @@ export class NotificationMU extends NotificationReact {
 
     const mRef = content.props.mRef;
 
-    const errorRef = React.createRef<HTMLDivElement>();
-
-    const setError = (error?: string) => {
-      if (errorRef.current == null) return;
-      errorRef.current.innerText = error ?? "";
-    };
+    let errorDiv: HTMLDivElement | null = null;
 
     // Setup callback
     const options = this.renderSetup ? this.renderSetup({}) : undefined;
 
     const handleSubmit = async () => {
+      // Clear error
+      setError(undefined);
+
       if (this.onReturn) {
         // Get the value
         const value = mRef.current?.getValue();
@@ -407,7 +412,7 @@ export class NotificationMU extends NotificationReact {
         }
 
         if (typeof v === "string") {
-          setError(v);
+          setError(errorDiv, v);
           return false;
         }
       }
@@ -451,8 +456,11 @@ export class NotificationMU extends NotificationReact {
           <Typography
             component="div"
             variant="caption"
-            ref={errorRef}
+            ref={(div) => {
+              errorDiv = div;
+            }}
             color="error"
+            align="center"
           />
         </DialogContent>
         <DialogActions>
@@ -512,14 +520,13 @@ export class NotificationMU extends NotificationReact {
     } = this.inputProps ?? {};
 
     const inputRef = React.createRef<HTMLInputElement>();
-    const errorRef = React.createRef<HTMLDivElement>();
 
-    const setError = (error?: string) => {
-      if (errorRef.current == null) return;
-      errorRef.current.innerText = error ?? "";
-    };
+    let errorDiv: HTMLDivElement | null = null;
 
     const handleSubmit = async (event: React.MouseEvent<HTMLButtonElement>) => {
+      // Error
+      setError(undefined);
+
       const input = inputRef.current;
 
       if (this.onReturn) {
@@ -558,7 +565,7 @@ export class NotificationMU extends NotificationReact {
         }
 
         if (typeof v === "string") {
-          setError(v);
+          setError(errorDiv, v);
           input?.focus();
           return false;
         }
@@ -659,8 +666,11 @@ export class NotificationMU extends NotificationReact {
           <Typography
             component="div"
             variant="caption"
-            ref={errorRef}
+            ref={(div) => {
+              errorDiv = div;
+            }}
             color="error"
+            align="center"
           />
         </DialogContent>
         <DialogActions>