@luscii-healthtech/web-ui 42.5.1 → 42.5.2

package/dist/index.development.js

@@ -1488,9 +1488,9 @@ const SortableBaseListItem = (_a) => {
   });
   const styleTransform = utilities.CSS.Transform.toString(transform);
   if (isDragging) {
-    return jsxRuntime.jsxs("div", { style: { transform: styleTransform, position: "relative" }, children: [jsxRuntime.jsx(DropzonePresentation, { className: "ui:absolute ui:h-full ui:w-full" }), jsxRuntime.jsx("div", { className: "ui:invisible", children: jsxRuntime.jsx(BaseListItem, Object.assign({}, props, { ref: setNodeRef, htmlProps: { style: { transform: styleTransform } }, isDraggable: true, renderDragHandle: () => jsxRuntime.jsx(DragHandle, Object.assign({}, attributes, listeners, { disabled: !props.isDraggable, grabbing: isDragging })) })) })] });
+    return jsxRuntime.jsxs("div", { style: { transform: styleTransform, position: "relative" }, children: [jsxRuntime.jsx(DropzonePresentation, { className: "ui:absolute ui:h-full ui:w-full" }), jsxRuntime.jsx("div", { className: "ui:invisible", children: jsxRuntime.jsx(BaseListItem, Object.assign({}, props, { ref: setNodeRef, htmlProps: { style: { transform: styleTransform } }, isDraggable: props.__isNested ? false : true, renderDragHandle: () => jsxRuntime.jsx(DragHandle, Object.assign({}, attributes, listeners, { disabled: !props.isDraggable, grabbing: isDragging })) })) })] });
   }
-  return jsxRuntime.jsx(BaseListItem, Object.assign({}, props, { ref: setNodeRef, htmlProps: { style: { transform: styleTransform } }, isDraggable: true, renderDragHandle: () => jsxRuntime.jsx(DragHandle, Object.assign({}, attributes, listeners, { disabled: !props.isDraggable, grabbing: isDragging })) }));
+  return jsxRuntime.jsx(BaseListItem, Object.assign({}, props, { ref: setNodeRef, htmlProps: { style: { transform: styleTransform } }, isDraggable: props.__isNested ? false : true, renderDragHandle: () => jsxRuntime.jsx(DragHandle, Object.assign({}, attributes, listeners, { disabled: !props.isDraggable, grabbing: isDragging })) }));
 };
 
 const SortableBaseList = (_a) => {
@@ -1525,28 +1525,28 @@ const DefaultList = (_a) => {
       return next;
     });
   };
+  const composeIconWithChevron = (parentItem, isExpanded) => {
+    return jsxRuntime.jsxs(Stack, { axis: "x", gap: "xs", align: "center", children: [jsxRuntime.jsx("button", { type: "button", "aria-expanded": isExpanded, onClick: (e) => {
+      e.stopPropagation();
+      toggleExpand(parentItem.itemId);
+    }, onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        toggleExpand(parentItem.itemId);
+      }
+    }, children: jsxRuntime.jsx(ChevronRightIcon, { color: "neutral-interactive", "aria-hidden": "true", className: classNames__default.default("ui:shrink-0 ui:transition-transform", {
+      "ui:rotate-90": isExpanded
+    }) }) }), parentItem.icon ? jsxRuntime.jsx(BaseListIcon, { icon: parentItem.icon }) : null] });
+  };
   const flattenedItems = React.useMemo(() => {
     const result = [];
-    innerItems.forEach((parentItem) => {
+    innerItems.forEach((parentItem, parentIndex) => {
       var _a2;
       const hasChildren = Boolean((_a2 = parentItem.children) === null || _a2 === void 0 ? void 0 : _a2.length);
       const isExpanded = expandedIds.has(parentItem.itemId);
-      let composedIcon = parentItem.icon;
-      if (hasChildren) {
-        composedIcon = jsxRuntime.jsxs(Stack, { axis: "x", gap: "xs", align: "center", children: [jsxRuntime.jsx("button", { type: "button", "aria-expanded": isExpanded, onClick: (e) => {
-          e.stopPropagation();
-          toggleExpand(parentItem.itemId);
-        }, onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            e.stopPropagation();
-            toggleExpand(parentItem.itemId);
-          }
-        }, children: jsxRuntime.jsx(ChevronRightIcon, { color: "neutral-interactive", "aria-hidden": "true", className: classNames__default.default("ui:shrink-0 ui:transition-transform", {
-          "ui:rotate-90": isExpanded
-        }) }) }), parentItem.icon ? jsxRuntime.jsx(BaseListIcon, { icon: parentItem.icon }) : null] });
-      }
-      result.push(Object.assign(Object.assign(Object.assign({}, parentItem), { icon: composedIcon, htmlProps: Object.assign(Object.assign({}, parentItem.htmlProps), { id: `list-item-${parentItem.itemId}` }) }), parentItem.handleItemClick ? {
+      const composedIcon = hasChildren ? composeIconWithChevron(parentItem, isExpanded) : parentItem.icon;
+      result.push(Object.assign(Object.assign(Object.assign({}, parentItem), { icon: composedIcon, __parentIndex: parentIndex, htmlProps: Object.assign(Object.assign({}, parentItem.htmlProps), { id: `list-item-${parentItem.itemId}` }) }), parentItem.handleItemClick ? {
         handleItemClick: (e) => {
           var _a3;
           (_a3 = parentItem.handleItemClick) === null || _a3 === void 0 ? void 0 : _a3.call(parentItem, e);
@@ -1565,22 +1565,32 @@ const DefaultList = (_a) => {
   }
   return jsxRuntime.jsxs(core.DndContext, { sensors: [sensor], onDragStart: (event) => {
     setDraggedListItem(getDndListItemProps(event.active));
+    setExpandedIds(/* @__PURE__ */ new Set());
   }, onDragEnd: (event) => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _j;
     if (!draggedListItem) {
       return;
     }
     const currentIndex = (_d = (_c = (_b = (_a2 = event.active) === null || _a2 === void 0 ? void 0 : _a2.data) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.sortable) === null || _d === void 0 ? void 0 : _d.index;
     const newIndex = (_h = (_g = (_f = (_e = event.over) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.current) === null || _g === void 0 ? void 0 : _g.sortable) === null || _h === void 0 ? void 0 : _h.index;
     if (typeof currentIndex === "number" && typeof newIndex === "number") {
-      const newItems = sortable.arrayMove(innerItems, currentIndex, newIndex);
-      setInnerItems(newItems);
-      onDragEnd(draggedListItem.itemId, newIndex, {
-        state: newItems
-      });
+      const currentParentIndex = flattenedItems[currentIndex].__parentIndex;
+      const newParentIndex = (_j = flattenedItems[newIndex]) === null || _j === void 0 ? void 0 : _j.__parentIndex;
+      if (typeof newParentIndex === "number") {
+        const newItems = sortable.arrayMove(innerItems, currentParentIndex, newParentIndex);
+        setInnerItems(newItems);
+        onDragEnd(draggedListItem.itemId, newParentIndex, {
+          state: newItems
+        });
+      }
     }
     setDraggedListItem(null);
-  }, children: [jsxRuntime.jsx(SortableBaseList, Object.assign({ draggableIdentifier: "sortable-list-identifier", items: innerItems.map((item) => Object.assign(Object.assign({}, item), { draggableIdentifier: `${item.itemId}`, isDraggable: true, onAssetLoadError })), subtitle }, props)), jsxRuntime.jsx(core.DragOverlay, { dropAnimation: null, wrapperElement: "ul", className: "ui:shadow-lg", children: draggedListItem && jsxRuntime.jsx(ListItem, Object.assign({}, draggedListItem, { renderDragHandle: () => jsxRuntime.jsx(DragHandle, { grabbing: true }) })) })] });
+  }, children: [jsxRuntime.jsx(SortableBaseList, Object.assign({ draggableIdentifier: "sortable-list-identifier", items: flattenedItems.map((item) => Object.assign(Object.assign({}, item), {
+    draggableIdentifier: `${item.itemId}`,
+    isDraggable: item.__parentIndex !== void 0,
+    // Only top-level items are draggable
+    onAssetLoadError
+  })), subtitle }, props)), jsxRuntime.jsx(core.DragOverlay, { dropAnimation: null, wrapperElement: "ul", className: "ui:shadow-lg", children: draggedListItem && jsxRuntime.jsx(ListItem, Object.assign({}, draggedListItem, { renderDragHandle: () => jsxRuntime.jsx(DragHandle, { grabbing: true }) })) })] });
 };
 const List = (props) => {
   if ("draggableListType" in props) {