@etsoo/materialui 1.5.56 → 1.5.58

package/lib/cjs/ButtonPopupCheckbox.d.ts

@@ -40,7 +40,7 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps,
     /**
      * Load data
      */
-    loadData: () => Promise<D[]>;
+    loadData: D[] | (() => Promise<D[]>);
     /**
      * On add handler
      * @param ids Ids

package/lib/cjs/ButtonPopupCheckbox.js

@@ -36,13 +36,17 @@ function ButtonPopupList(props) {
         // Set selected ids
         setSelectedIds([...value]);
     }, [value]);
-    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(FormGroup_1.default, { children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: (0, jsx_runtime_1.jsx)(DnDList_1.DnDList, { items: items, labelField: labelField, itemRenderer: (item, index, nodeRef, actionNodeRef) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(FormGroup_1.default, { children: (0, jsx_runtime_1.jsx)(Grid_1.default, { container: true, spacing: 0, children: (0, jsx_runtime_1.jsx)(DnDList_1.DnDList, { items: items, labelField: labelField, onFormChange: (items) => {
+                            const ids = items
+                                .filter((item) => selectedIds.includes(item.id))
+                                .map((item) => item.id);
+                            onValueChange(ids);
+                        }, itemRenderer: (item, index, nodeRef, actionNodeRef) => ((0, jsx_runtime_1.jsxs)(Grid_1.default, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: (0, jsx_runtime_1.jsx)(DragIndicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
                                             const checked = e.target.checked;
                                             const newIds = [
                                                 ...selectedIds.toggleItem(item.id, checked)
                                             ];
                                             setSelectedIds(newIds);
-                                            onValueChange(newIds);
                                         } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }) }) }), onAdd && ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { gap: 1, children: [(0, jsx_runtime_1.jsx)(TextField_1.default, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), (0, jsx_runtime_1.jsx)(Button_1.default, { sx: { width: "120px" }, variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(Add_1.default, {}), size: "small", onClick: async () => {
                             if (inputRef.current == null)
                                 return;
@@ -90,12 +94,17 @@ function ButtonPopupCheckbox(props) {
     const [items, setItems] = react_1.default.useState([]);
     const [selectedIds, setSelectedIds] = react_1.default.useState();
     react_1.default.useEffect(() => {
-        // Load data
-        loadData().then((data) => {
-            if (data != null) {
-                setItems(data);
-            }
-        });
+        if (typeof loadData === "function") {
+            // Load data
+            loadData().then((data) => {
+                if (data != null) {
+                    setItems(data);
+                }
+            });
+        }
+        else {
+            setItems(loadData);
+        }
     }, [loadData]);
     react_1.default.useEffect(() => {
         // Set selected ids

package/lib/cjs/ButtonPopupRadio.d.ts

@@ -40,7 +40,7 @@ export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<ButtonProps, "ch
     /**
      * Load data
      */
-    loadData: () => Promise<D[]>;
+    loadData: D[] | (() => Promise<D[]>);
     /**
      * On add handler
      * @param ids Ids

package/lib/cjs/ButtonPopupRadio.js

@@ -86,12 +86,17 @@ function ButtonPopupRadio(props) {
         ? items.find((item) => item.id === currentValue)
         : undefined;
     react_1.default.useEffect(() => {
-        // Load data
-        loadData().then((data) => {
-            if (data != null) {
-                setItems(data);
-            }
-        });
+        if (typeof loadData === "function") {
+            // Load data
+            loadData().then((data) => {
+                if (data != null) {
+                    setItems(data);
+                }
+            });
+        }
+        else {
+            setItems(loadData);
+        }
     }, [loadData]);
     react_1.default.useEffect(() => {
         setCurrentValue(value);

package/lib/cjs/DnDList.js

@@ -152,6 +152,17 @@ function DnDList(props) {
             ]);
         });
     }, []);
+    const divRef = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        if (divRef.current) {
+            setupDiv(divRef.current);
+        }
+        return () => {
+            if (divRef.current) {
+                setupDiv(divRef.current, true);
+            }
+        };
+    }, []);
     if (dnd == null) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", width: "100%", height: height });
     }
@@ -195,29 +206,33 @@ function DnDList(props) {
         }
         setActiveId(undefined);
     }
-    const setupDiv = (div) => {
+    const doChange = react_1.default.useCallback(() => doFormChange(), []);
+    const setupDiv = (div, clearup = false) => {
         // Inputs
         div
             .querySelectorAll("input")
-            .forEach((input) => input.addEventListener("change", () => doFormChange()));
+            .forEach((input) => clearup
+            ? input.removeEventListener("change", doChange)
+            : input.addEventListener("change", doChange));
         // Textareas
         div
             .querySelectorAll("textarea")
-            .forEach((input) => input.addEventListener("change", () => doFormChange()));
+            .forEach((input) => clearup
+            ? input.removeEventListener("change", doChange)
+            : input.addEventListener("change", doChange));
         // Select
         div
             .querySelectorAll("select")
-            .forEach((input) => input.addEventListener("change", () => doFormChange()));
+            .forEach((input) => clearup
+            ? input.removeEventListener("change", doChange)
+            : input.addEventListener("change", doChange));
     };
     const children = ((0, jsx_runtime_1.jsx)(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(SortableContextType, { items: items, strategy: strategy, children: items.map((item, index) => {
                 const id = item.id;
                 return ((0, jsx_runtime_1.jsx)(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
             }) }) }));
     if (onFormChange) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, ref: (div) => {
-                if (div)
-                    setupDiv(div);
-            }, children: children }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, ref: divRef, children: children }));
     }
     return children;
 }

package/lib/mjs/ButtonPopupCheckbox.d.ts

@@ -40,7 +40,7 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<ButtonProps,
     /**
      * Load data
      */
-    loadData: () => Promise<D[]>;
+    loadData: D[] | (() => Promise<D[]>);
     /**
      * On add handler
      * @param ids Ids

package/lib/mjs/ButtonPopupCheckbox.js

@@ -30,13 +30,17 @@ function ButtonPopupList(props) {
         // Set selected ids
         setSelectedIds([...value]);
     }, [value]);
-    return (_jsxs(VBox, { gap: 2, children: [_jsx(FormGroup, { children: _jsx(Grid, { container: true, spacing: 0, children: _jsx(DnDList, { items: items, labelField: labelField, itemRenderer: (item, index, nodeRef, actionNodeRef) => (_jsxs(Grid, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: _jsx(DragIndicatorIcon, {}) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
+    return (_jsxs(VBox, { gap: 2, children: [_jsx(FormGroup, { children: _jsx(Grid, { container: true, spacing: 0, children: _jsx(DnDList, { items: items, labelField: labelField, onFormChange: (items) => {
+                            const ids = items
+                                .filter((item) => selectedIds.includes(item.id))
+                                .map((item) => item.id);
+                            onValueChange(ids);
+                        }, itemRenderer: (item, index, nodeRef, actionNodeRef) => (_jsxs(Grid, { size: { xs: 12, md: 6, lg: 4 }, display: "flex", justifyContent: "flex-start", alignItems: "center", gap: 1, ...nodeRef, children: [_jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels?.dragIndicator, ...actionNodeRef, children: _jsx(DragIndicatorIcon, {}) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "item", value: item.id, checked: selectedIds.includes(item.id), onChange: (e) => {
                                             const checked = e.target.checked;
                                             const newIds = [
                                                 ...selectedIds.toggleItem(item.id, checked)
                                             ];
                                             setSelectedIds(newIds);
-                                            onValueChange(newIds);
                                         } }), label: `${index + 1}. ${labelFormatter(item)}` })] })), height: 200, mRef: dndRef }) }) }), onAdd && (_jsxs(HBox, { gap: 1, children: [_jsx(TextField, { variant: "outlined", label: labels?.more, fullWidth: true, inputRef: inputRef }), _jsx(Button, { sx: { width: "120px" }, variant: "contained", startIcon: _jsx(AddIcon, {}), size: "small", onClick: async () => {
                             if (inputRef.current == null)
                                 return;
@@ -84,12 +88,17 @@ export function ButtonPopupCheckbox(props) {
     const [items, setItems] = React.useState([]);
     const [selectedIds, setSelectedIds] = React.useState();
     React.useEffect(() => {
-        // Load data
-        loadData().then((data) => {
-            if (data != null) {
-                setItems(data);
-            }
-        });
+        if (typeof loadData === "function") {
+            // Load data
+            loadData().then((data) => {
+                if (data != null) {
+                    setItems(data);
+                }
+            });
+        }
+        else {
+            setItems(loadData);
+        }
     }, [loadData]);
     React.useEffect(() => {
         // Set selected ids

package/lib/mjs/ButtonPopupRadio.d.ts

@@ -40,7 +40,7 @@ export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<ButtonProps, "ch
     /**
      * Load data
      */
-    loadData: () => Promise<D[]>;
+    loadData: D[] | (() => Promise<D[]>);
     /**
      * On add handler
      * @param ids Ids

package/lib/mjs/ButtonPopupRadio.js

@@ -80,12 +80,17 @@ export function ButtonPopupRadio(props) {
         ? items.find((item) => item.id === currentValue)
         : undefined;
     React.useEffect(() => {
-        // Load data
-        loadData().then((data) => {
-            if (data != null) {
-                setItems(data);
-            }
-        });
+        if (typeof loadData === "function") {
+            // Load data
+            loadData().then((data) => {
+                if (data != null) {
+                    setItems(data);
+                }
+            });
+        }
+        else {
+            setItems(loadData);
+        }
     }, [loadData]);
     React.useEffect(() => {
         setCurrentValue(value);

package/lib/mjs/DnDList.js

@@ -144,6 +144,17 @@ export function DnDList(props) {
             ]);
         });
     }, []);
+    const divRef = React.useRef(null);
+    React.useEffect(() => {
+        if (divRef.current) {
+            setupDiv(divRef.current);
+        }
+        return () => {
+            if (divRef.current) {
+                setupDiv(divRef.current, true);
+            }
+        };
+    }, []);
     if (dnd == null) {
         return _jsx(Skeleton, { variant: "rectangular", width: "100%", height: height });
     }
@@ -187,29 +198,33 @@ export function DnDList(props) {
         }
         setActiveId(undefined);
     }
-    const setupDiv = (div) => {
+    const doChange = React.useCallback(() => doFormChange(), []);
+    const setupDiv = (div, clearup = false) => {
         // Inputs
         div
             .querySelectorAll("input")
-            .forEach((input) => input.addEventListener("change", () => doFormChange()));
+            .forEach((input) => clearup
+            ? input.removeEventListener("change", doChange)
+            : input.addEventListener("change", doChange));
         // Textareas
         div
             .querySelectorAll("textarea")
-            .forEach((input) => input.addEventListener("change", () => doFormChange()));
+            .forEach((input) => clearup
+            ? input.removeEventListener("change", doChange)
+            : input.addEventListener("change", doChange));
         // Select
         div
             .querySelectorAll("select")
-            .forEach((input) => input.addEventListener("change", () => doFormChange()));
+            .forEach((input) => clearup
+            ? input.removeEventListener("change", doChange)
+            : input.addEventListener("change", doChange));
     };
     const children = (_jsx(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContextType, { items: items, strategy: strategy, children: items.map((item, index) => {
                 const id = item.id;
                 return (_jsx(SortableItem, { id: id, useSortableType: useSortableType, CSSType: CSSType, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }, id));
             }) }) }));
     if (onFormChange) {
-        return (_jsx("div", { style: { width: "100%" }, ref: (div) => {
-                if (div)
-                    setupDiv(div);
-            }, children: children }));
+        return (_jsx("div", { style: { width: "100%" }, ref: divRef, children: children }));
     }
     return children;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.56",
+  "version": "1.5.58",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,7 +40,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.6.36",
+    "@etsoo/appscript": "^1.6.38",
     "@etsoo/notificationbase": "^1.1.62",
     "@etsoo/react": "^1.8.45",
     "@etsoo/shared": "^1.2.74",

package/src/ButtonPopupCheckbox.tsx

@@ -67,7 +67,7 @@ export type ButtonPopupCheckboxProps<D extends DnDItemType> = Omit<
   /**
    * Load data
    */
-  loadData: () => Promise<D[]>;
+  loadData: D[] | (() => Promise<D[]>);
 
   /**
    * On add handler
@@ -158,6 +158,12 @@ function ButtonPopupList<D extends DnDItemType>(
           <DnDList<D>
             items={items}
             labelField={labelField}
+            onFormChange={(items) => {
+              const ids = items
+                .filter((item) => selectedIds.includes(item.id))
+                .map((item) => item.id);
+              onValueChange(ids);
+            }}
             itemRenderer={(item, index, nodeRef, actionNodeRef) => (
               <Grid
                 size={{ xs: 12, md: 6, lg: 4 }}
@@ -187,7 +193,6 @@ function ButtonPopupList<D extends DnDItemType>(
                           ...selectedIds.toggleItem(item.id, checked)
                         ];
                         setSelectedIds(newIds);
-                        onValueChange(newIds);
                       }}
                     />
                   }
@@ -296,12 +301,16 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
   const [selectedIds, setSelectedIds] = React.useState<D["id"][]>();
 
   React.useEffect(() => {
-    // Load data
-    loadData().then((data) => {
-      if (data != null) {
-        setItems(data);
-      }
-    });
+    if (typeof loadData === "function") {
+      // Load data
+      loadData().then((data) => {
+        if (data != null) {
+          setItems(data);
+        }
+      });
+    } else {
+      setItems(loadData);
+    }
   }, [loadData]);
 
   React.useEffect(() => {

package/src/ButtonPopupRadio.tsx

@@ -64,7 +64,7 @@ export type ButtonPopupRadioProps<D extends DnDItemType> = Omit<
   /**
    * Load data
    */
-  loadData: () => Promise<D[]>;
+  loadData: D[] | (() => Promise<D[]>);
 
   /**
    * On add handler
@@ -270,12 +270,16 @@ export function ButtonPopupRadio<D extends DnDItemType>(
     : undefined;
 
   React.useEffect(() => {
-    // Load data
-    loadData().then((data) => {
-      if (data != null) {
-        setItems(data);
-      }
-    });
+    if (typeof loadData === "function") {
+      // Load data
+      loadData().then((data) => {
+        if (data != null) {
+          setItems(data);
+        }
+      });
+    } else {
+      setItems(loadData);
+    }
   }, [loadData]);
 
   React.useEffect(() => {

package/src/DnDList.tsx

@@ -362,6 +362,20 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
     );
   }, []);
 
+  const divRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (divRef.current) {
+      setupDiv(divRef.current);
+    }
+
+    return () => {
+      if (divRef.current) {
+        setupDiv(divRef.current, true);
+      }
+    };
+  }, []);
+
   if (dnd == null) {
     return <Skeleton variant="rectangular" width="100%" height={height} />;
   }
@@ -428,26 +442,34 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
     setActiveId(undefined);
   }
 
-  const setupDiv = (div: HTMLDivElement) => {
+  const doChange = React.useCallback(() => doFormChange(), []);
+
+  const setupDiv = (div: HTMLDivElement, clearup: boolean = false) => {
     // Inputs
     div
       .querySelectorAll("input")
       .forEach((input) =>
-        input.addEventListener("change", () => doFormChange())
+        clearup
+          ? input.removeEventListener("change", doChange)
+          : input.addEventListener("change", doChange)
       );
 
     // Textareas
     div
       .querySelectorAll("textarea")
       .forEach((input) =>
-        input.addEventListener("change", () => doFormChange())
+        clearup
+          ? input.removeEventListener("change", doChange)
+          : input.addEventListener("change", doChange)
       );
 
     // Select
     div
       .querySelectorAll("select")
       .forEach((input) =>
-        input.addEventListener("change", () => doFormChange())
+        clearup
+          ? input.removeEventListener("change", doChange)
+          : input.addEventListener("change", doChange)
       );
   };
 
@@ -475,12 +497,7 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
 
   if (onFormChange) {
     return (
-      <div
-        style={{ width: "100%" }}
-        ref={(div) => {
-          if (div) setupDiv(div);
-        }}
-      >
+      <div style={{ width: "100%" }} ref={divRef}>
         {children}
       </div>
     );