@etsoo/materialui 1.1.7 → 1.1.8

package/lib/DnDList.js

@@ -57,12 +57,15 @@ export function DnDList(props) {
     // States
     const [items, setItems] = React.useState([]);
     const [activeId, setActiveId] = React.useState();
+    const doFormChange = (newItems) => {
+        if (onFormChange)
+            onFormChange(newItems !== null && newItems !== void 0 ? newItems : items);
+    };
     const changeItems = (newItems) => {
         // Possible to alter items with the handler
         if (onChange)
             onChange(newItems);
-        if (onFormChange)
-            onFormChange(newItems);
+        doFormChange(newItems);
         // Update state
         setItems(newItems);
     };
@@ -147,12 +150,26 @@ export function DnDList(props) {
             }
         };
     }, [items]);
+    const setupDiv = (div) => {
+        // Inputs
+        div
+            .querySelectorAll("input")
+            .forEach((input) => input.addEventListener("change", () => doFormChange()));
+        // Textareas
+        div
+            .querySelectorAll("textarea")
+            .forEach((input) => input.addEventListener("change", () => doFormChange()));
+        // Select
+        div
+            .querySelectorAll("select")
+            .forEach((input) => input.addEventListener("change", () => doFormChange()));
+    };
     React.useEffect(() => {
         setItems(props.items);
     }, [props.items]);
-    return (React.createElement("form", { onChange: () => {
-            if (onFormChange)
-                onFormChange(items);
+    return (React.createElement("div", { ref: (div) => {
+            if (div)
+                setupDiv(div);
         } },
         React.createElement(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd },
             React.createElement(SortableContext, { items: items, strategy: verticalListSortingStrategy }, items.map((item, index) => {

package/lib/NotifierMU.d.ts

@@ -1,6 +1,6 @@
-import { NotificationAlign, NotificationRenderProps } from '@etsoo/notificationbase';
-import React from 'react';
-import { INotificationBaseReact, INotificationReact, NotificationReact, NotifierReact } from '@etsoo/react';
+import { NotificationAlign, NotificationRenderProps } from "@etsoo/notificationbase";
+import React from "react";
+import { INotificationBaseReact, INotificationReact, NotificationReact, NotifierReact } from "@etsoo/react";
 /**
  * MU notification
  */

package/lib/NotifierMU.js

@@ -1,21 +1,27 @@
-import { NotificationAlign, NotificationMessageType, NotificationType } from '@etsoo/notificationbase';
-import { DomUtils } from '@etsoo/shared';
-import { Alert, AlertTitle, Backdrop, Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fade, Slider, Snackbar, styled, Switch, TextField, Typography } from '@mui/material';
-import { Error, Info, Help, Warning, Done } from '@mui/icons-material';
-import React from 'react';
-import { NotificationReact, NotifierReact } from '@etsoo/react';
-import { DraggablePaperComponent } from './DraggablePaperComponent';
-import { LoadingButton } from './LoadingButton';
-import { Labels } from './app/Labels';
+import { NotificationAlign, NotificationMessageType, NotificationType } from "@etsoo/notificationbase";
+import { DomUtils } from "@etsoo/shared";
+import { Alert, AlertTitle, Backdrop, Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fade, IconButton, Slider, Snackbar, styled, Switch, TextField, Typography } from "@mui/material";
+import { Error, Info, Help, Warning, Done } from "@mui/icons-material";
+import CloseIcon from "@mui/icons-material/Close";
+import React from "react";
+import { NotificationReact, NotifierReact } from "@etsoo/react";
+import { DraggablePaperComponent } from "./DraggablePaperComponent";
+import { LoadingButton } from "./LoadingButton";
+import { Labels } from "./app/Labels";
 // Custom icon dialog title bar
 const IconDialogTitle = styled(DialogTitle) `
-    ${({ theme }) => `
+  ${({ theme }) => `
         cursor: move;
         display: flex;
         align-items: center;
         & .dialogTitle {
             font-weight: bold;
             font-size: 1.17em;
+            flex-grow: 3;
+            text-overflow: ellipsis;
+            padding-left: ${theme.spacing(1)};
+        }
+        & .closeButton {
             padding-left: ${theme.spacing(1)};
         }
     `}
@@ -28,7 +34,7 @@ export class NotificationMU extends NotificationReact {
     createAlert(_props, className) {
         var _a;
         const labels = Labels.NotificationMU;
-        const { buttons, inputs, fullScreen, fullWidth = true, maxWidth, okLabel = labels.alertOK, primaryButton } = (_a = this.inputProps) !== null && _a !== void 0 ? _a : {};
+        const { buttons, inputs, fullScreen, fullWidth = true, maxWidth, okLabel = labels.alertOK, primaryButton, closable = false } = (_a = this.inputProps) !== null && _a !== void 0 ? _a : {};
         let title = this.title;
         let icon;
         if (this.type === NotificationMessageType.Success) {
@@ -48,7 +54,7 @@ export class NotificationMU extends NotificationReact {
             title !== null && title !== void 0 ? title : (title = labels.alertTitle);
         }
         const setupProps = {
-            color: 'primary'
+            color: "primary"
         };
         // Setup callback
         if (this.renderSetup)
@@ -61,7 +67,9 @@ export class NotificationMU extends NotificationReact {
         return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
             React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                 icon,
-                React.createElement("span", { className: "dialogTitle" }, title)),
+                React.createElement("span", { className: "dialogTitle" }, title),
+                closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.dismiss() },
+                    React.createElement(CloseIcon, null)))),
             React.createElement(DialogContent, null,
                 React.createElement(DialogContentText, null, this.content),
                 inputs),
@@ -72,7 +80,7 @@ export class NotificationMU extends NotificationReact {
         var _a, _b;
         const labels = Labels.NotificationMU;
         const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.confirmTitle;
-        const { buttons, okLabel = labels.confirmYes, cancelLabel = labels.confirmNo, cancelButton = true, inputs, fullScreen, fullWidth = true, maxWidth, primaryButton } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
+        const { buttons, okLabel = labels.confirmYes, cancelLabel = labels.confirmNo, cancelButton = true, inputs, fullScreen, fullWidth = true, maxWidth, primaryButton, closable = false } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
         const callback = async (_event, value) => {
             await this.returnValue(value);
             return true;
@@ -80,7 +88,9 @@ export class NotificationMU extends NotificationReact {
         return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
             React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                 React.createElement(Help, { color: "action" }),
-                React.createElement("span", { className: "dialogTitle" }, title)),
+                React.createElement("span", { className: "dialogTitle" }, title),
+                closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.dismiss() },
+                    React.createElement(CloseIcon, null)))),
             React.createElement(DialogContent, null,
                 React.createElement(DialogContentText, null, this.content),
                 inputs),
@@ -90,26 +100,28 @@ export class NotificationMU extends NotificationReact {
     }
     createMessageColor() {
         if (this.type === NotificationMessageType.Danger)
-            return 'error';
+            return "error";
         if (this.type === NotificationMessageType.Success)
-            return 'success';
+            return "success";
         if (this.type === NotificationMessageType.Warning)
-            return 'warning';
-        return 'info';
+            return "warning";
+        return "info";
     }
     // Create message
-    createMessage(_props, className) {
+    createMessage(props, className) {
         if (!this.open)
             return React.createElement(React.Fragment, { key: this.id });
+        const { closable = false } = props;
         const setupProps = {
             severity: this.createMessageColor(),
-            variant: 'filled'
+            variant: "filled"
         };
         // Setup callback
         if (this.renderSetup)
             this.renderSetup(setupProps);
         return (React.createElement(Fade, { in: true, key: this.id },
-            React.createElement(Alert, { ...setupProps, onClose: () => this.dismiss(), className: className },
+            React.createElement(Alert, { ...setupProps, action: closable ? (React.createElement(IconButton, { size: "small", onClick: () => this.dismiss() },
+                    React.createElement(CloseIcon, null))) : undefined, onClose: () => this.dismiss(), className: className },
                 this.title && React.createElement(AlertTitle, null, this.title),
                 this.content)));
     }
@@ -118,13 +130,13 @@ export class NotificationMU extends NotificationReact {
         var _a, _b;
         const labels = Labels.NotificationMU;
         const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.promptTitle;
-        const { buttons, cancelLabel = labels.promptCancel, okLabel = labels.promptOK, cancelButton = true, inputs, type, fullScreen, fullWidth = true, maxWidth, primaryButton, inputProps } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
+        const { buttons, cancelLabel = labels.promptCancel, okLabel = labels.promptOK, cancelButton = true, inputs, type, fullScreen, fullWidth = true, maxWidth, primaryButton, inputProps, closable = false } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
         const inputRef = React.createRef();
         const errorRef = React.createRef();
         const setError = (error) => {
             if (errorRef.current == null)
                 return;
-            errorRef.current.innerText = error !== null && error !== void 0 ? error : '';
+            errorRef.current.innerText = error !== null && error !== void 0 ? error : "";
         };
         const handleSubmit = async (event) => {
             // Result
@@ -135,14 +147,13 @@ export class NotificationMU extends NotificationReact {
                 if (inputs && value == null)
                     value = event.currentTarget.form;
                 if (input) {
-                    if (type === 'switch') {
-                        const boolValue = input.value === 'true';
+                    if (type === "switch") {
+                        const boolValue = input.value === "true";
                         result = this.onReturn(boolValue);
                     }
                     else {
                         const inputValue = DomUtils.getInputValue(input);
-                        if ((inputValue == null || inputValue === '') &&
-                            input.required) {
+                        if ((inputValue == null || inputValue === "") && input.required) {
                             input.focus();
                             return false;
                         }
@@ -160,7 +171,7 @@ export class NotificationMU extends NotificationReact {
                 input === null || input === void 0 ? void 0 : input.focus();
                 return false;
             }
-            if (typeof v === 'string') {
+            if (typeof v === "string") {
                 setError(v);
                 input === null || input === void 0 ? void 0 : input.focus();
                 return false;
@@ -171,10 +182,10 @@ export class NotificationMU extends NotificationReact {
         let localInputs;
         let value = undefined;
         if (inputs == null) {
-            if (type === 'switch') {
+            if (type === "switch") {
                 localInputs = (React.createElement(Switch, { inputRef: inputRef, ...inputProps, value: "true", autoFocus: true, required: true }));
             }
-            else if (type === 'slider') {
+            else if (type === "slider") {
                 localInputs = React.createElement(Slider, { onChange: (_e, v) => (value = v) });
             }
             else {
@@ -188,12 +199,14 @@ export class NotificationMU extends NotificationReact {
             React.createElement("form", { onSubmit: (event) => {
                     var _a;
                     event.preventDefault();
-                    (_a = event.currentTarget.elements.namedItem('okButton')) === null || _a === void 0 ? void 0 : _a.click();
+                    (_a = event.currentTarget.elements.namedItem("okButton")) === null || _a === void 0 ? void 0 : _a.click();
                     return false;
                 } },
                 React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                     React.createElement(Info, { color: "primary" }),
-                    React.createElement("span", { className: "dialogTitle" }, title)),
+                    React.createElement("span", { className: "dialogTitle" }, title),
+                    closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.dismiss() },
+                        React.createElement(CloseIcon, null)))),
                 React.createElement(DialogContent, null,
                     React.createElement(DialogContentText, null, this.content),
                     localInputs,
@@ -210,23 +223,23 @@ export class NotificationMU extends NotificationReact {
     createLoading(_props, className) {
         var _a;
         // Properties
-        const setupProps = { color: 'primary' };
+        const setupProps = { color: "primary" };
         const labels = Labels.NotificationMU;
         // Input props
-        const { maxWidth = 'xs' } = (_a = this.inputProps) !== null && _a !== void 0 ? _a : {};
+        const { maxWidth = "xs" } = (_a = this.inputProps) !== null && _a !== void 0 ? _a : {};
         // Content
         let content = this.content;
-        if (content === '@')
+        if (content === "@")
             content = labels.loading.toString();
         // Setup callback
         if (this.renderSetup)
             this.renderSetup(setupProps);
         return (React.createElement(Backdrop, { key: this.id, className: className, sx: {
-                color: '#fff',
+                color: "#fff",
                 zIndex: (theme) => theme.zIndex.modal + 1
             }, open: this.open },
             React.createElement(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", alignItems: "center", sx: {
-                    '& > :not(style) + :not(style)': {
+                    "& > :not(style) + :not(style)": {
                         marginTop: (theme) => theme.spacing(1)
                     }
                 } },
@@ -285,10 +298,10 @@ export class NotifierMU extends NotifierReact {
             }
             // Use SnackBar for layout
             return (React.createElement(Snackbar, { anchorOrigin: NotifierMU.getOrigin(align), className: className, key: `layout-${alignText}`, sx: align === NotificationAlign.Center
-                    ? { position: 'fixed', top: '50%!important' }
+                    ? { position: "fixed", top: "50%!important" }
                     : undefined, open: true },
                 React.createElement(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", key: `box-${alignText}`, sx: {
-                        '& > :not(style) + :not(style)': {
+                        "& > :not(style) + :not(style)": {
                             marginTop: (theme) => theme.spacing(1)
                         }
                     } }, children)));
@@ -299,7 +312,7 @@ export class NotifierMU extends NotifierReact {
      * @param className Style class name
      * @returns Provider
      */
-    static setup(className = 'notifier-mu') {
+    static setup(className = "notifier-mu") {
         // Create an instance
         const instance = new NotifierMU();
         const provider = instance.createProvider(className);
@@ -310,43 +323,43 @@ export class NotifierMU extends NotifierReact {
     static getOrigin(align) {
         if (align === NotificationAlign.TopLeft) {
             return {
-                horizontal: 'left',
-                vertical: 'top'
+                horizontal: "left",
+                vertical: "top"
             };
         }
         if (align === NotificationAlign.TopCenter) {
             return {
-                horizontal: 'center',
-                vertical: 'top'
+                horizontal: "center",
+                vertical: "top"
             };
         }
         if (align === NotificationAlign.TopRight) {
             return {
-                horizontal: 'right',
-                vertical: 'top'
+                horizontal: "right",
+                vertical: "top"
             };
         }
         if (align === NotificationAlign.BottomLeft) {
             return {
-                horizontal: 'left',
-                vertical: 'bottom'
+                horizontal: "left",
+                vertical: "bottom"
             };
         }
         if (align === NotificationAlign.BottomCenter) {
             return {
-                horizontal: 'center',
-                vertical: 'bottom'
+                horizontal: "center",
+                vertical: "bottom"
             };
         }
         if (align === NotificationAlign.BottomRight) {
             return {
-                horizontal: 'right',
-                vertical: 'bottom'
+                horizontal: "right",
+                vertical: "bottom"
             };
         }
         return {
-            horizontal: 'center',
-            vertical: 'top'
+            horizontal: "center",
+            vertical: "top"
         };
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,7 +52,7 @@
     "@emotion/styled": "^11.10.5",
     "@etsoo/appscript": "^1.3.58",
     "@etsoo/notificationbase": "^1.1.23",
-    "@etsoo/react": "^1.6.41",
+    "@etsoo/react": "^1.6.42",
     "@etsoo/shared": "^1.1.88",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.4",

package/src/DnDList.tsx

@@ -201,10 +201,15 @@ export function DnDList<
   const [items, setItems] = React.useState<D[]>([]);
   const [activeId, setActiveId] = React.useState<UniqueIdentifier>();
 
+  const doFormChange = (newItems?: D[]) => {
+    if (onFormChange) onFormChange(newItems ?? items);
+  };
+
   const changeItems = (newItems: D[]) => {
     // Possible to alter items with the handler
     if (onChange) onChange(newItems);
-    if (onFormChange) onFormChange(newItems);
+
+    doFormChange(newItems);
 
     // Update state
     setItems(newItems);
@@ -325,14 +330,37 @@ export function DnDList<
     [items]
   );
 
+  const setupDiv = (div: HTMLDivElement) => {
+    // Inputs
+    div
+      .querySelectorAll("input")
+      .forEach((input) =>
+        input.addEventListener("change", () => doFormChange())
+      );
+
+    // Textareas
+    div
+      .querySelectorAll("textarea")
+      .forEach((input) =>
+        input.addEventListener("change", () => doFormChange())
+      );
+
+    // Select
+    div
+      .querySelectorAll("select")
+      .forEach((input) =>
+        input.addEventListener("change", () => doFormChange())
+      );
+  };
+
   React.useEffect(() => {
     setItems(props.items);
   }, [props.items]);
 
   return (
-    <form
-      onChange={() => {
-        if (onFormChange) onFormChange(items);
+    <div
+      ref={(div) => {
+        if (div) setupDiv(div);
       }}
     >
       <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
@@ -352,6 +380,6 @@ export function DnDList<
           })}
         </SortableContext>
       </DndContext>
-    </form>
+    </div>
   );
 }