@etsoo/materialui 1.6.46 → 1.6.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/cjs/NotifierMU.js +21 -16
  2. package/lib/mjs/NotifierMU.js +21 -16
  3. package/package.json +3 -3
  4. package/src/NotifierMU.tsx +25 -15
package/lib/cjs/NotifierMU.js CHANGED
@@ -59,6 +59,13 @@ const IconDialogTitle = (0, styles_1.styled)(DialogTitle_1.default, {
59
59
  }
60
60
  `}
61
61
  `;
62
+ const setError = (div, error) => {
63
+ console.log("setError", error, div == null);
64
+ if (div == null)
65
+ return;
66
+ div.innerText = error ?? "";
67
+ div.style.paddingTop = error ? "8px" : "0px";
68
+ };
62
69
  function isFunctionComponentElement(node) {
63
70
  return (react_1.default.isValidElement(node) &&
64
71
  typeof node.type === "function" &&
@@ -154,15 +161,12 @@ class NotificationMU extends react_2.NotificationReact {
154
161
  throw new Error("Data collector content must be a function component with mRef prop");
155
162
  }
156
163
  const mRef = content.props.mRef;
157
- const errorRef = react_1.default.createRef();
158
- const setError = (error) => {
159
- if (errorRef.current == null)
160
- return;
161
- errorRef.current.innerText = error ?? "";
162
- };
164
+ let errorDiv = null;
163
165
  // Setup callback
164
166
  const options = this.renderSetup ? this.renderSetup({}) : undefined;
165
167
  const handleSubmit = async () => {
168
+ // Clear error
169
+ setError(undefined);
166
170
  if (this.onReturn) {
167
171
  // Get the value
168
172
  const value = mRef.current?.getValue();
@@ -176,14 +180,16 @@ class NotificationMU extends react_2.NotificationReact {
176
180
  return false;
177
181
  }
178
182
  if (typeof v === "string") {
179
- setError(v);
183
+ setError(errorDiv, v);
180
184
  return false;
181
185
  }
182
186
  }
183
187
  this.dismiss();
184
188
  return true;
185
189
  };
186
- 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: () => {
190
+ 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) => {
191
+ errorDiv = div;
192
+ }, 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: () => {
187
193
  if (this.onReturn)
188
194
  this.onReturn(undefined);
189
195
  this.dismiss();
@@ -195,13 +201,10 @@ class NotificationMU extends react_2.NotificationReact {
195
201
  const title = this.title ?? labels.promptTitle;
196
202
  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 ?? {};
197
203
  const inputRef = react_1.default.createRef();
198
- const errorRef = react_1.default.createRef();
199
- const setError = (error) => {
200
- if (errorRef.current == null)
201
- return;
202
- errorRef.current.innerText = error ?? "";
203
- };
204
+ let errorDiv = null;
204
205
  const handleSubmit = async (event) => {
206
+ // Error
207
+ setError(undefined);
205
208
  const input = inputRef.current;
206
209
  if (this.onReturn) {
207
210
  // Inputs case, no HTMLForm set to value, set the current form
@@ -234,7 +237,7 @@ class NotificationMU extends react_2.NotificationReact {
234
237
  return false;
235
238
  }
236
239
  if (typeof v === "string") {
237
- setError(v);
240
+ setError(errorDiv, v);
238
241
  input?.focus();
239
242
  return false;
240
243
  }
@@ -269,7 +272,9 @@ class NotificationMU extends react_2.NotificationReact {
269
272
  return false;
270
273
  }
271
274
  }
272
- }, 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: () => {
275
+ }, 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) => {
276
+ errorDiv = div;
277
+ }, 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: () => {
273
278
  if (this.onReturn)
274
279
  this.onReturn(undefined);
275
280
  this.dismiss();
package/lib/mjs/NotifierMU.js CHANGED
@@ -53,6 +53,13 @@ const IconDialogTitle = styled(DialogTitle, {
53
53
  }
54
54
  `}
55
55
  `;
56
+ const setError = (div, error) => {
57
+ console.log("setError", error, div == null);
58
+ if (div == null)
59
+ return;
60
+ div.innerText = error ?? "";
61
+ div.style.paddingTop = error ? "8px" : "0px";
62
+ };
56
63
  function isFunctionComponentElement(node) {
57
64
  return (React.isValidElement(node) &&
58
65
  typeof node.type === "function" &&
@@ -148,15 +155,12 @@ export class NotificationMU extends NotificationReact {
148
155
  throw new Error("Data collector content must be a function component with mRef prop");
149
156
  }
150
157
  const mRef = content.props.mRef;
151
- const errorRef = React.createRef();
152
- const setError = (error) => {
153
- if (errorRef.current == null)
154
- return;
155
- errorRef.current.innerText = error ?? "";
156
- };
158
+ let errorDiv = null;
157
159
  // Setup callback
158
160
  const options = this.renderSetup ? this.renderSetup({}) : undefined;
159
161
  const handleSubmit = async () => {
162
+ // Clear error
163
+ setError(undefined);
160
164
  if (this.onReturn) {
161
165
  // Get the value
162
166
  const value = mRef.current?.getValue();
@@ -170,14 +174,16 @@ export class NotificationMU extends NotificationReact {
170
174
  return false;
171
175
  }
172
176
  if (typeof v === "string") {
173
- setError(v);
177
+ setError(errorDiv, v);
174
178
  return false;
175
179
  }
176
180
  }
177
181
  this.dismiss();
178
182
  return true;
179
183
  };
180
- 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: () => {
184
+ 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) => {
185
+ errorDiv = div;
186
+ }, color: "error", align: "center" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
181
187
  if (this.onReturn)
182
188
  this.onReturn(undefined);
183
189
  this.dismiss();
@@ -189,13 +195,10 @@ export class NotificationMU extends NotificationReact {
189
195
  const title = this.title ?? labels.promptTitle;
190
196
  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 ?? {};
191
197
  const inputRef = React.createRef();
192
- const errorRef = React.createRef();
193
- const setError = (error) => {
194
- if (errorRef.current == null)
195
- return;
196
- errorRef.current.innerText = error ?? "";
197
- };
198
+ let errorDiv = null;
198
199
  const handleSubmit = async (event) => {
200
+ // Error
201
+ setError(undefined);
199
202
  const input = inputRef.current;
200
203
  if (this.onReturn) {
201
204
  // Inputs case, no HTMLForm set to value, set the current form
@@ -228,7 +231,7 @@ export class NotificationMU extends NotificationReact {
228
231
  return false;
229
232
  }
230
233
  if (typeof v === "string") {
231
- setError(v);
234
+ setError(errorDiv, v);
232
235
  input?.focus();
233
236
  return false;
234
237
  }
@@ -263,7 +266,9 @@ export class NotificationMU extends NotificationReact {
263
266
  return false;
264
267
  }
265
268
  }
266
- }, 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: () => {
269
+ }, 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) => {
270
+ errorDiv = div;
271
+ }, color: "error", align: "center" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
267
272
  if (this.onReturn)
268
273
  this.onReturn(undefined);
269
274
  this.dismiss();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.6.46",
3
+ "version": "1.6.47",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -46,7 +46,7 @@
46
46
  "@etsoo/shared": "^1.2.83",
47
47
  "@mui/icons-material": "^9.0.0",
48
48
  "@mui/material": "^9.0.0",
49
- "@mui/x-data-grid": "^9.0.1",
49
+ "@mui/x-data-grid": "^9.0.2",
50
50
  "chart.js": "^4.5.1",
51
51
  "chartjs-plugin-datalabels": "^2.2.0",
52
52
  "dompurify": "^3.4.0",
@@ -81,7 +81,7 @@
81
81
  "@types/react-input-mask": "^3.0.6",
82
82
  "@vitejs/plugin-react": "^6.0.1",
83
83
  "jsdom": "^29.0.2",
84
- "typescript": "^6.0.2",
84
+ "typescript": "^6.0.3",
85
85
  "vitest": "^4.1.4"
86
86
  }
87
87
  }
package/src/NotifierMU.tsx CHANGED
@@ -70,6 +70,13 @@ const IconDialogTitle = styled(DialogTitle, {
70
70
  `}
71
71
  `;
72
72
 
73
+ const setError = (div?: HTMLDivElement | null, error?: string) => {
74
+ console.log("setError", error, div == null);
75
+ if (div == null) return;
76
+ div.innerText = error ?? "";
77
+ div.style.paddingTop = error ? "8px" : "0px";
78
+ };
79
+
73
80
  /**
74
81
  * MU notification data methods
75
82
  */
@@ -380,17 +387,15 @@ export class NotificationMU extends NotificationReact {
380
387
 
381
388
  const mRef = content.props.mRef;
382
389
 
383
- const errorRef = React.createRef<HTMLDivElement>();
384
-
385
- const setError = (error?: string) => {
386
- if (errorRef.current == null) return;
387
- errorRef.current.innerText = error ?? "";
388
- };
390
+ let errorDiv: HTMLDivElement | null = null;
389
391
 
390
392
  // Setup callback
391
393
  const options = this.renderSetup ? this.renderSetup({}) : undefined;
392
394
 
393
395
  const handleSubmit = async () => {
396
+ // Clear error
397
+ setError(undefined);
398
+
394
399
  if (this.onReturn) {
395
400
  // Get the value
396
401
  const value = mRef.current?.getValue();
@@ -407,7 +412,7 @@ export class NotificationMU extends NotificationReact {
407
412
  }
408
413
 
409
414
  if (typeof v === "string") {
410
- setError(v);
415
+ setError(errorDiv, v);
411
416
  return false;
412
417
  }
413
418
  }
@@ -451,8 +456,11 @@ export class NotificationMU extends NotificationReact {
451
456
  <Typography
452
457
  component="div"
453
458
  variant="caption"
454
- ref={errorRef}
459
+ ref={(div) => {
460
+ errorDiv = div;
461
+ }}
455
462
  color="error"
463
+ align="center"
456
464
  />
457
465
  </DialogContent>
458
466
  <DialogActions>
@@ -512,14 +520,13 @@ export class NotificationMU extends NotificationReact {
512
520
  } = this.inputProps ?? {};
513
521
 
514
522
  const inputRef = React.createRef<HTMLInputElement>();
515
- const errorRef = React.createRef<HTMLDivElement>();
516
523
 
517
- const setError = (error?: string) => {
518
- if (errorRef.current == null) return;
519
- errorRef.current.innerText = error ?? "";
520
- };
524
+ let errorDiv: HTMLDivElement | null = null;
521
525
 
522
526
  const handleSubmit = async (event: React.MouseEvent<HTMLButtonElement>) => {
527
+ // Error
528
+ setError(undefined);
529
+
523
530
  const input = inputRef.current;
524
531
 
525
532
  if (this.onReturn) {
@@ -558,7 +565,7 @@ export class NotificationMU extends NotificationReact {
558
565
  }
559
566
 
560
567
  if (typeof v === "string") {
561
- setError(v);
568
+ setError(errorDiv, v);
562
569
  input?.focus();
563
570
  return false;
564
571
  }
@@ -659,8 +666,11 @@ export class NotificationMU extends NotificationReact {
659
666
  <Typography
660
667
  component="div"
661
668
  variant="caption"
662
- ref={errorRef}
669
+ ref={(div) => {
670
+ errorDiv = div;
671
+ }}
663
672
  color="error"
673
+ align="center"
664
674
  />
665
675
  </DialogContent>
666
676
  <DialogActions>