@etsoo/materialui 1.5.57 → 1.5.58

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;

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.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;

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.57",
+  "version": "1.5.58",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ButtonPopupCheckbox.tsx

@@ -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);
                       }}
                     />
                   }

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>
     );