@etsoo/materialui 1.5.60 → 1.5.62

package/lib/cjs/ButtonPopupCheckbox.js

@@ -16,10 +16,10 @@ const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
 const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
 const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
 const TextField_1 = __importDefault(require("@mui/material/TextField"));
-const DnDList_1 = require("./DnDList");
 const FlexBox_1 = require("./FlexBox");
 const ReactApp_1 = require("./app/ReactApp");
 const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
+const DnDList_1 = require("./DnDList");
 function ButtonPopupList(props) {
     // Destruct
     const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
@@ -35,18 +35,18 @@ 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)(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);
-                                    } }), 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 () => {
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { gap: 2, children: [(0, jsx_runtime_1.jsx)(DnDList_1.DnDList, { component: Grid_1.default, componentProps: { container: true, spacing: 0 }, 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);
+                                } }), 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;
                             const input = inputRef.current.value.trim();

package/lib/cjs/DnDList.d.ts

@@ -50,7 +50,16 @@ export interface DnDListRef<D extends object> {
  */
 export interface DnDListPros<D extends {
     id: UniqueIdentifier;
-}> {
+}, E extends React.ElementType = React.ElementType> {
+    /**
+     * Component type to render the list into
+     * Default is React.Fragment
+     */
+    component?: E;
+    /**
+     * Component props
+     */
+    componentProps?: React.ComponentProps<E>;
     /**
      * Get list item style callback
      */
@@ -99,4 +108,4 @@ export interface DnDListPros<D extends {
  */
 export declare function DnDList<D extends {
     id: UniqueIdentifier;
-}>(props: DnDListPros<D>): import("react/jsx-runtime").JSX.Element;
+}, E extends React.ElementType = React.ElementType>(props: DnDListPros<D, E>): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/DnDList.js

@@ -54,7 +54,8 @@ exports.DnDItemStyle = DnDItemStyle;
  */
 function DnDList(props) {
     // Destruct
-    const { height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
+    const { componentProps, height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
+    const Component = props.component || react_1.default.Fragment;
     // Theme
     const theme = (0, styles_1.useTheme)();
     // States
@@ -64,8 +65,10 @@ function DnDList(props) {
         setItems(props.items);
     }, [props.items]);
     const doFormChange = react_1.default.useCallback((newItems) => {
-        if (onFormChange)
-            onFormChange(newItems ?? items);
+        if (onFormChange) {
+            const locals = Array.isArray(newItems) ? newItems : items;
+            onFormChange(locals);
+        }
     }, [items, onFormChange]);
     const changeItems = react_1.default.useCallback((newItems) => {
         // Possible to alter items with the handler
@@ -152,38 +155,27 @@ function DnDList(props) {
             ]);
         });
     }, []);
-    const doChange = react_1.default.useCallback(() => doFormChange(), []);
     const setupDiv = (div, clearup = false) => {
         // Inputs
         div
             .querySelectorAll("input")
             .forEach((input) => clearup
-            ? input.removeEventListener("change", doChange)
-            : input.addEventListener("change", doChange));
+            ? input.removeEventListener("change", doFormChange)
+            : input.addEventListener("change", doFormChange));
         // Textareas
         div
             .querySelectorAll("textarea")
             .forEach((input) => clearup
-            ? input.removeEventListener("change", doChange)
-            : input.addEventListener("change", doChange));
+            ? input.removeEventListener("change", doFormChange)
+            : input.addEventListener("change", doFormChange));
         // Select
         div
             .querySelectorAll("select")
             .forEach((input) => clearup
-            ? input.removeEventListener("change", doChange)
-            : input.addEventListener("change", doChange));
+            ? input.removeEventListener("change", doFormChange)
+            : input.addEventListener("change", doFormChange));
     };
-    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);
-            }
-        };
-    }, []);
+    const divRef = react_1.default.useRef();
     if (dnd == null) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", width: "100%", height: height });
     }
@@ -227,12 +219,20 @@ function DnDList(props) {
         }
         setActiveId(undefined);
     }
-    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));
-            }) }) }));
+    const children = ((0, jsx_runtime_1.jsx)(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(SortableContextType, { items: items, strategy: strategy, children: (0, jsx_runtime_1.jsx)(Component, { ...componentProps, 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: divRef, children: children }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: { width: "100%" }, ref: (div) => {
+                if (div && divRef.current != div) {
+                    if (divRef.current) {
+                        setupDiv(divRef.current, true);
+                    }
+                    divRef.current = div;
+                    setupDiv(div);
+                }
+            }, children: children }));
     }
     return children;
 }

package/lib/mjs/ButtonPopupCheckbox.js

@@ -10,10 +10,10 @@ import IconButton from "@mui/material/IconButton";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import TextField from "@mui/material/TextField";
-import { DnDList } from "./DnDList";
 import { HBox, VBox } from "./FlexBox";
 import { useRequiredAppContext } from "./app/ReactApp";
 import FormLabel from "@mui/material/FormLabel";
+import { DnDList } from "./DnDList";
 function ButtonPopupList(props) {
     // Destruct
     const { addSplitter = /\s*[,;]\s*/, value = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
@@ -29,18 +29,18 @@ function ButtonPopupList(props) {
         // Set selected ids
         setSelectedIds([...value]);
     }, [value]);
-    return (_jsxs(VBox, { gap: 2, 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);
-                                    } }), 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 () => {
+    return (_jsxs(VBox, { gap: 2, children: [_jsx(DnDList, { component: Grid, componentProps: { container: true, spacing: 0 }, 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);
+                                } }), 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;
                             const input = inputRef.current.value.trim();

package/lib/mjs/DnDList.d.ts

@@ -50,7 +50,16 @@ export interface DnDListRef<D extends object> {
  */
 export interface DnDListPros<D extends {
     id: UniqueIdentifier;
-}> {
+}, E extends React.ElementType = React.ElementType> {
+    /**
+     * Component type to render the list into
+     * Default is React.Fragment
+     */
+    component?: E;
+    /**
+     * Component props
+     */
+    componentProps?: React.ComponentProps<E>;
     /**
      * Get list item style callback
      */
@@ -99,4 +108,4 @@ export interface DnDListPros<D extends {
  */
 export declare function DnDList<D extends {
     id: UniqueIdentifier;
-}>(props: DnDListPros<D>): import("react/jsx-runtime").JSX.Element;
+}, E extends React.ElementType = React.ElementType>(props: DnDListPros<D, E>): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/DnDList.js

@@ -46,7 +46,8 @@ export const DnDItemStyle = (index, isDragging, theme) => ({
  */
 export function DnDList(props) {
     // Destruct
-    const { height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
+    const { componentProps, height = 360, itemRenderer, labelField, mRef, sortingStrategy, onChange, onFormChange, onDragEnd } = props;
+    const Component = props.component || React.Fragment;
     // Theme
     const theme = useTheme();
     // States
@@ -56,8 +57,10 @@ export function DnDList(props) {
         setItems(props.items);
     }, [props.items]);
     const doFormChange = React.useCallback((newItems) => {
-        if (onFormChange)
-            onFormChange(newItems ?? items);
+        if (onFormChange) {
+            const locals = Array.isArray(newItems) ? newItems : items;
+            onFormChange(locals);
+        }
     }, [items, onFormChange]);
     const changeItems = React.useCallback((newItems) => {
         // Possible to alter items with the handler
@@ -144,38 +147,27 @@ export function DnDList(props) {
             ]);
         });
     }, []);
-    const doChange = React.useCallback(() => doFormChange(), []);
     const setupDiv = (div, clearup = false) => {
         // Inputs
         div
             .querySelectorAll("input")
             .forEach((input) => clearup
-            ? input.removeEventListener("change", doChange)
-            : input.addEventListener("change", doChange));
+            ? input.removeEventListener("change", doFormChange)
+            : input.addEventListener("change", doFormChange));
         // Textareas
         div
             .querySelectorAll("textarea")
             .forEach((input) => clearup
-            ? input.removeEventListener("change", doChange)
-            : input.addEventListener("change", doChange));
+            ? input.removeEventListener("change", doFormChange)
+            : input.addEventListener("change", doFormChange));
         // Select
         div
             .querySelectorAll("select")
             .forEach((input) => clearup
-            ? input.removeEventListener("change", doChange)
-            : input.addEventListener("change", doChange));
+            ? input.removeEventListener("change", doFormChange)
+            : input.addEventListener("change", doFormChange));
     };
-    const divRef = React.useRef(null);
-    React.useEffect(() => {
-        if (divRef.current) {
-            setupDiv(divRef.current);
-        }
-        return () => {
-            if (divRef.current) {
-                setupDiv(divRef.current, true);
-            }
-        };
-    }, []);
+    const divRef = React.useRef();
     if (dnd == null) {
         return _jsx(Skeleton, { variant: "rectangular", width: "100%", height: height });
     }
@@ -219,12 +211,20 @@ export function DnDList(props) {
         }
         setActiveId(undefined);
     }
-    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));
-            }) }) }));
+    const children = (_jsx(DndContextType, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContextType, { items: items, strategy: strategy, children: _jsx(Component, { ...componentProps, 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: divRef, children: children }));
+        return (_jsx("div", { style: { width: "100%" }, ref: (div) => {
+                if (div && divRef.current != div) {
+                    if (divRef.current) {
+                        setupDiv(divRef.current, true);
+                    }
+                    divRef.current = div;
+                    setupDiv(div);
+                }
+            }, children: children }));
     }
     return children;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.60",
+  "version": "1.5.62",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,10 +40,10 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.6.38",
-    "@etsoo/notificationbase": "^1.1.62",
-    "@etsoo/react": "^1.8.46",
-    "@etsoo/shared": "^1.2.74",
+    "@etsoo/appscript": "^1.6.39",
+    "@etsoo/notificationbase": "^1.1.63",
+    "@etsoo/react": "^1.8.49",
+    "@etsoo/shared": "^1.2.75",
     "@mui/icons-material": "^7.1.1",
     "@mui/material": "^7.1.1",
     "@mui/x-data-grid": "^8.5.1",
@@ -81,9 +81,9 @@
     "@types/react-dom": "^18.3.7",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^4.5.1",
+    "@vitejs/plugin-react": "^4.5.2",
     "jsdom": "^26.1.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.2"
+    "vitest": "^3.2.3"
   }
 }

package/src/ButtonPopupCheckbox.tsx

@@ -10,10 +10,10 @@ import IconButton from "@mui/material/IconButton";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import TextField from "@mui/material/TextField";
-import { DnDList, DnDListRef } from "./DnDList";
 import { HBox, VBox } from "./FlexBox";
 import { useRequiredAppContext } from "./app/ReactApp";
 import FormLabel from "@mui/material/FormLabel";
+import { DnDList, DnDListRef } from "./DnDList";
 
 type DnDItemType = {
   id: IdType;
@@ -152,56 +152,56 @@ function ButtonPopupList<D extends DnDItemType>(
 
   return (
     <VBox gap={2}>
-      <Grid container spacing={0}>
-        <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 }}
-              display="flex"
-              justifyContent="flex-start"
-              alignItems="center"
-              gap={1}
-              {...nodeRef}
+      <DnDList<D>
+        component={Grid}
+        componentProps={{ container: true, spacing: 0 }}
+        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 }}
+            display="flex"
+            justifyContent="flex-start"
+            alignItems="center"
+            gap={1}
+            {...nodeRef}
+          >
+            <IconButton
+              style={{ cursor: "move" }}
+              size="small"
+              title={labels?.dragIndicator}
+              {...actionNodeRef}
             >
-              <IconButton
-                style={{ cursor: "move" }}
-                size="small"
-                title={labels?.dragIndicator}
-                {...actionNodeRef}
-              >
-                <DragIndicatorIcon />
-              </IconButton>
-              <FormControlLabel
-                control={
-                  <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);
-                    }}
-                  />
-                }
-                label={`${index + 1}. ${labelFormatter(item)}`}
-              />
-            </Grid>
-          )}
-          height={200}
-          mRef={dndRef}
-        ></DnDList>
-      </Grid>
+              <DragIndicatorIcon />
+            </IconButton>
+            <FormControlLabel
+              control={
+                <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);
+                  }}
+                />
+              }
+              label={`${index + 1}. ${labelFormatter(item)}`}
+            />
+          </Grid>
+        )}
+        height={200}
+        mRef={dndRef}
+      ></DnDList>
       {onAdd && (
         <HBox gap={1}>
           <TextField

package/src/DnDList.tsx

@@ -119,7 +119,21 @@ export interface DnDListRef<D extends object> {
 /**
  * DnD sortable list properties
  */
-export interface DnDListPros<D extends { id: UniqueIdentifier }> {
+export interface DnDListPros<
+  D extends { id: UniqueIdentifier },
+  E extends React.ElementType = React.ElementType
+> {
+  /**
+   * Component type to render the list into
+   * Default is React.Fragment
+   */
+  component?: E;
+
+  /**
+   * Component props
+   */
+  componentProps?: React.ComponentProps<E>;
+
   /**
    * Get list item style callback
    */
@@ -186,11 +200,13 @@ export interface DnDListPros<D extends { id: UniqueIdentifier }> {
  * @param props Props
  * @returns Component
  */
-export function DnDList<D extends { id: UniqueIdentifier }>(
-  props: DnDListPros<D>
-) {
+export function DnDList<
+  D extends { id: UniqueIdentifier },
+  E extends React.ElementType = React.ElementType
+>(props: DnDListPros<D, E>) {
   // Destruct
   const {
+    componentProps,
     height = 360,
     itemRenderer,
     labelField,
@@ -201,6 +217,8 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
     onDragEnd
   } = props;
 
+  const Component = props.component || React.Fragment;
+
   // Theme
   const theme = useTheme();
 
@@ -213,8 +231,11 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
   }, [props.items]);
 
   const doFormChange = React.useCallback(
-    (newItems?: D[]) => {
-      if (onFormChange) onFormChange(newItems ?? items);
+    (newItems?: D[] | Event) => {
+      if (onFormChange) {
+        const locals = Array.isArray(newItems) ? newItems : items;
+        onFormChange(locals);
+      }
     },
     [items, onFormChange]
   );
@@ -362,16 +383,14 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
     );
   }, []);
 
-  const doChange = React.useCallback(() => doFormChange(), []);
-
   const setupDiv = (div: HTMLDivElement, clearup: boolean = false) => {
     // Inputs
     div
       .querySelectorAll("input")
       .forEach((input) =>
         clearup
-          ? input.removeEventListener("change", doChange)
-          : input.addEventListener("change", doChange)
+          ? input.removeEventListener("change", doFormChange)
+          : input.addEventListener("change", doFormChange)
       );
 
     // Textareas
@@ -379,8 +398,8 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
       .querySelectorAll("textarea")
       .forEach((input) =>
         clearup
-          ? input.removeEventListener("change", doChange)
-          : input.addEventListener("change", doChange)
+          ? input.removeEventListener("change", doFormChange)
+          : input.addEventListener("change", doFormChange)
       );
 
     // Select
@@ -388,24 +407,12 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
       .querySelectorAll("select")
       .forEach((input) =>
         clearup
-          ? input.removeEventListener("change", doChange)
-          : input.addEventListener("change", doChange)
+          ? input.removeEventListener("change", doFormChange)
+          : input.addEventListener("change", doFormChange)
       );
   };
 
-  const divRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    if (divRef.current) {
-      setupDiv(divRef.current);
-    }
-
-    return () => {
-      if (divRef.current) {
-        setupDiv(divRef.current, true);
-      }
-    };
-  }, []);
+  const divRef = React.useRef<HTMLDivElement>();
 
   if (dnd == null) {
     return <Skeleton variant="rectangular" width="100%" height={height} />;
@@ -476,28 +483,42 @@ export function DnDList<D extends { id: UniqueIdentifier }>(
   const children = (
     <DndContextType onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
       <SortableContextType items={items} strategy={strategy}>
-        {items.map((item, index) => {
-          const id = item.id;
-          return (
-            <SortableItem
-              id={id}
-              useSortableType={useSortableType}
-              CSSType={CSSType}
-              key={id}
-              style={getItemStyle!(index, id === activeId)}
-              itemRenderer={(nodeRef, actionNodeRef) =>
-                itemRenderer(item, index, nodeRef, actionNodeRef)
-              }
-            />
-          );
-        })}
+        <Component {...componentProps}>
+          {items.map((item, index) => {
+            const id = item.id;
+            return (
+              <SortableItem
+                id={id}
+                useSortableType={useSortableType}
+                CSSType={CSSType}
+                key={id}
+                style={getItemStyle!(index, id === activeId)}
+                itemRenderer={(nodeRef, actionNodeRef) =>
+                  itemRenderer(item, index, nodeRef, actionNodeRef)
+                }
+              />
+            );
+          })}
+        </Component>
       </SortableContextType>
     </DndContextType>
   );
 
   if (onFormChange) {
     return (
-      <div style={{ width: "100%" }} ref={divRef}>
+      <div
+        style={{ width: "100%" }}
+        ref={(div) => {
+          if (div && divRef.current != div) {
+            if (divRef.current) {
+              setupDiv(divRef.current, true);
+            }
+
+            divRef.current = div;
+            setupDiv(div);
+          }
+        }}
+      >
         {children}
       </div>
     );