@etsoo/materialui 1.6.46 → 1.6.48

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 +16 -14
  2. package/lib/mjs/NotifierMU.js +16 -14
  3. package/package.json +3 -3
  4. package/src/NotifierMU.tsx +19 -13
package/lib/cjs/NotifierMU.js CHANGED
@@ -59,6 +59,12 @@ const IconDialogTitle = (0, styles_1.styled)(DialogTitle_1.default, {
59
59
  }
60
60
  `}
61
61
  `;
62
+ const setError = (div, error) => {
63
+ if (div == null)
64
+ return;
65
+ div.innerText = error ?? "";
66
+ div.style.paddingTop = error ? "8px" : "0px";
67
+ };
62
68
  function isFunctionComponentElement(node) {
63
69
  return (react_1.default.isValidElement(node) &&
64
70
  typeof node.type === "function" &&
@@ -155,14 +161,11 @@ class NotificationMU extends react_2.NotificationReact {
155
161
  }
156
162
  const mRef = content.props.mRef;
157
163
  const errorRef = react_1.default.createRef();
158
- const setError = (error) => {
159
- if (errorRef.current == null)
160
- return;
161
- errorRef.current.innerText = error ?? "";
162
- };
163
164
  // Setup callback
164
165
  const options = this.renderSetup ? this.renderSetup({}) : undefined;
165
166
  const handleSubmit = async () => {
167
+ // Clear error
168
+ setError(undefined);
166
169
  if (this.onReturn) {
167
170
  // Get the value
168
171
  const value = mRef.current?.getValue();
@@ -176,14 +179,14 @@ class NotificationMU extends react_2.NotificationReact {
176
179
  return false;
177
180
  }
178
181
  if (typeof v === "string") {
179
- setError(v);
182
+ setError(errorRef.current, v);
180
183
  return false;
181
184
  }
182
185
  }
183
186
  this.dismiss();
184
187
  return true;
185
188
  };
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: () => {
189
+ 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", 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
190
  if (this.onReturn)
188
191
  this.onReturn(undefined);
189
192
  this.dismiss();
@@ -196,12 +199,9 @@ class NotificationMU extends react_2.NotificationReact {
196
199
  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
200
  const inputRef = react_1.default.createRef();
198
201
  const errorRef = react_1.default.createRef();
199
- const setError = (error) => {
200
- if (errorRef.current == null)
201
- return;
202
- errorRef.current.innerText = error ?? "";
203
- };
204
202
  const handleSubmit = async (event) => {
203
+ // Error
204
+ setError(undefined);
205
205
  const input = inputRef.current;
206
206
  if (this.onReturn) {
207
207
  // Inputs case, no HTMLForm set to value, set the current form
@@ -234,7 +234,7 @@ class NotificationMU extends react_2.NotificationReact {
234
234
  return false;
235
235
  }
236
236
  if (typeof v === "string") {
237
- setError(v);
237
+ setError(errorRef.current, v);
238
238
  input?.focus();
239
239
  return false;
240
240
  }
@@ -269,7 +269,9 @@ class NotificationMU extends react_2.NotificationReact {
269
269
  return false;
270
270
  }
271
271
  }
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: () => {
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: (div) => {
273
+ console.log("ref", div);
274
+ }, 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
275
  if (this.onReturn)
274
276
  this.onReturn(undefined);
275
277
  this.dismiss();
package/lib/mjs/NotifierMU.js CHANGED
@@ -53,6 +53,12 @@ const IconDialogTitle = styled(DialogTitle, {
53
53
  }
54
54
  `}
55
55
  `;
56
+ const setError = (div, error) => {
57
+ if (div == null)
58
+ return;
59
+ div.innerText = error ?? "";
60
+ div.style.paddingTop = error ? "8px" : "0px";
61
+ };
56
62
  function isFunctionComponentElement(node) {
57
63
  return (React.isValidElement(node) &&
58
64
  typeof node.type === "function" &&
@@ -149,14 +155,11 @@ export class NotificationMU extends NotificationReact {
149
155
  }
150
156
  const mRef = content.props.mRef;
151
157
  const errorRef = React.createRef();
152
- const setError = (error) => {
153
- if (errorRef.current == null)
154
- return;
155
- errorRef.current.innerText = error ?? "";
156
- };
157
158
  // Setup callback
158
159
  const options = this.renderSetup ? this.renderSetup({}) : undefined;
159
160
  const handleSubmit = async () => {
161
+ // Clear error
162
+ setError(undefined);
160
163
  if (this.onReturn) {
161
164
  // Get the value
162
165
  const value = mRef.current?.getValue();
@@ -170,14 +173,14 @@ export class NotificationMU extends NotificationReact {
170
173
  return false;
171
174
  }
172
175
  if (typeof v === "string") {
173
- setError(v);
176
+ setError(errorRef.current, v);
174
177
  return false;
175
178
  }
176
179
  }
177
180
  this.dismiss();
178
181
  return true;
179
182
  };
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: () => {
183
+ 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", align: "center" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
181
184
  if (this.onReturn)
182
185
  this.onReturn(undefined);
183
186
  this.dismiss();
@@ -190,12 +193,9 @@ export class NotificationMU extends NotificationReact {
190
193
  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
194
  const inputRef = React.createRef();
192
195
  const errorRef = React.createRef();
193
- const setError = (error) => {
194
- if (errorRef.current == null)
195
- return;
196
- errorRef.current.innerText = error ?? "";
197
- };
198
196
  const handleSubmit = async (event) => {
197
+ // Error
198
+ setError(undefined);
199
199
  const input = inputRef.current;
200
200
  if (this.onReturn) {
201
201
  // Inputs case, no HTMLForm set to value, set the current form
@@ -228,7 +228,7 @@ export class NotificationMU extends NotificationReact {
228
228
  return false;
229
229
  }
230
230
  if (typeof v === "string") {
231
- setError(v);
231
+ setError(errorRef.current, v);
232
232
  input?.focus();
233
233
  return false;
234
234
  }
@@ -263,7 +263,9 @@ export class NotificationMU extends NotificationReact {
263
263
  return false;
264
264
  }
265
265
  }
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: () => {
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: (div) => {
267
+ console.log("ref", div);
268
+ }, color: "error", align: "center" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
267
269
  if (this.onReturn)
268
270
  this.onReturn(undefined);
269
271
  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.48",
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,12 @@ const IconDialogTitle = styled(DialogTitle, {
70
70
  `}
71
71
  `;
72
72
 
73
+ const setError = (div?: HTMLDivElement | null, error?: string) => {
74
+ if (div == null) return;
75
+ div.innerText = error ?? "";
76
+ div.style.paddingTop = error ? "8px" : "0px";
77
+ };
78
+
73
79
  /**
74
80
  * MU notification data methods
75
81
  */
@@ -382,15 +388,13 @@ export class NotificationMU extends NotificationReact {
382
388
 
383
389
  const errorRef = React.createRef<HTMLDivElement>();
384
390
 
385
- const setError = (error?: string) => {
386
- if (errorRef.current == null) return;
387
- errorRef.current.innerText = error ?? "";
388
- };
389
-
390
391
  // Setup callback
391
392
  const options = this.renderSetup ? this.renderSetup({}) : undefined;
392
393
 
393
394
  const handleSubmit = async () => {
395
+ // Clear error
396
+ setError(undefined);
397
+
394
398
  if (this.onReturn) {
395
399
  // Get the value
396
400
  const value = mRef.current?.getValue();
@@ -407,7 +411,7 @@ export class NotificationMU extends NotificationReact {
407
411
  }
408
412
 
409
413
  if (typeof v === "string") {
410
- setError(v);
414
+ setError(errorRef.current, v);
411
415
  return false;
412
416
  }
413
417
  }
@@ -453,6 +457,7 @@ export class NotificationMU extends NotificationReact {
453
457
  variant="caption"
454
458
  ref={errorRef}
455
459
  color="error"
460
+ align="center"
456
461
  />
457
462
  </DialogContent>
458
463
  <DialogActions>
@@ -514,12 +519,10 @@ export class NotificationMU extends NotificationReact {
514
519
  const inputRef = React.createRef<HTMLInputElement>();
515
520
  const errorRef = React.createRef<HTMLDivElement>();
516
521
 
517
- const setError = (error?: string) => {
518
- if (errorRef.current == null) return;
519
- errorRef.current.innerText = error ?? "";
520
- };
521
-
522
522
  const handleSubmit = async (event: React.MouseEvent<HTMLButtonElement>) => {
523
+ // Error
524
+ setError(undefined);
525
+
523
526
  const input = inputRef.current;
524
527
 
525
528
  if (this.onReturn) {
@@ -558,7 +561,7 @@ export class NotificationMU extends NotificationReact {
558
561
  }
559
562
 
560
563
  if (typeof v === "string") {
561
- setError(v);
564
+ setError(errorRef.current, v);
562
565
  input?.focus();
563
566
  return false;
564
567
  }
@@ -659,8 +662,11 @@ export class NotificationMU extends NotificationReact {
659
662
  <Typography
660
663
  component="div"
661
664
  variant="caption"
662
- ref={errorRef}
665
+ ref={(div) => {
666
+ console.log("ref", div);
667
+ }}
663
668
  color="error"
669
+ align="center"
664
670
  />
665
671
  </DialogContent>
666
672
  <DialogActions>