@etsoo/materialui 1.1.8 → 1.1.10

package/lib/DnDList.js

@@ -167,13 +167,16 @@ export function DnDList(props) {
     React.useEffect(() => {
         setItems(props.items);
     }, [props.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) => {
-                const id = item[keyField];
-                return (React.createElement(SortableItem, { id: id, key: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }));
-            })))));
+    const children = (React.createElement(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd },
+        React.createElement(SortableContext, { items: items, strategy: verticalListSortingStrategy }, items.map((item, index) => {
+            const id = item[keyField];
+            return (React.createElement(SortableItem, { id: id, key: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }));
+        }))));
+    if (onFormChange) {
+        return (React.createElement("div", { style: { width: "100%" }, ref: (div) => {
+                if (div)
+                    setupDiv(div);
+            } }, children));
+    }
+    return children;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -55,7 +55,7 @@
     "@etsoo/react": "^1.6.42",
     "@etsoo/shared": "^1.1.88",
     "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.4",
+    "@mui/material": "^5.11.5",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.26",
@@ -84,8 +84,8 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^29.2.5",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "typescript": "^4.9.4"

package/src/DnDList.tsx

@@ -357,29 +357,38 @@ export function DnDList<
     setItems(props.items);
   }, [props.items]);
 
-  return (
-    <div
-      ref={(div) => {
-        if (div) setupDiv(div);
-      }}
-    >
-      <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-        <SortableContext items={items} strategy={verticalListSortingStrategy}>
-          {items.map((item, index) => {
-            const id = item[keyField] as unknown as UniqueIdentifier;
-            return (
-              <SortableItem
-                id={id}
-                key={id}
-                style={getItemStyle!(index, id === activeId)}
-                itemRenderer={(nodeRef, actionNodeRef) =>
-                  itemRenderer(item, index, nodeRef, actionNodeRef)
-                }
-              />
-            );
-          })}
-        </SortableContext>
-      </DndContext>
-    </div>
+  const children = (
+    <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+        {items.map((item, index) => {
+          const id = item[keyField] as unknown as UniqueIdentifier;
+          return (
+            <SortableItem
+              id={id}
+              key={id}
+              style={getItemStyle!(index, id === activeId)}
+              itemRenderer={(nodeRef, actionNodeRef) =>
+                itemRenderer(item, index, nodeRef, actionNodeRef)
+              }
+            />
+          );
+        })}
+      </SortableContext>
+    </DndContext>
   );
+
+  if (onFormChange) {
+    return (
+      <div
+        style={{ width: "100%" }}
+        ref={(div) => {
+          if (div) setupDiv(div);
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  return children;
 }