@luscii-healthtech/web-ui 42.5.0 → 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) {
@@ -5257,9 +5267,9 @@ const VerticalMenu = (props) => {
   const shouldShowCollapseButton = localization && Boolean(onCollapseButtonClick);
   const hasHeaderContent = title || shouldShowCollapseButton;
   const contextValue = React.useMemo(() => ({ variant }), [variant]);
-  return jsxRuntime.jsx(context$1.Provider, { value: contextValue, children: jsxRuntime.jsxs(Stack, Object.assign({ as: "div", px: "xxs", py: "m", align: "normal", className: classNames__default.default("ui:max-w-full", {
+  return jsxRuntime.jsx(context$1.Provider, { value: contextValue, children: jsxRuntime.jsxs(Stack, Object.assign({ as: "div", px: "xxs", py: "m", align: "normal", className: classNames__default.default("ui:max-w-full", "ui:max-h-full", {
     [DEFAULT_TEXT_CLASS_NAME]: isCollapsed
-  }, className) }, rest, { children: [header && jsxRuntime.jsx("div", { children: header }), jsxRuntime.jsxs(Stack, { axis: "x", gap: "xxs", p: hasHeaderContent ? "m" : void 0, align: "start", justify: "between", width: "full", children: [title && jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(Text, { variant: "lg-strong", children: title }) }), shouldShowCollapseButton && jsxRuntime.jsx(
+  }, className) }, rest, { children: [jsxRuntime.jsxs(Stack, { width: "full", children: [header && jsxRuntime.jsx(Box, { width: "full", children: header }), jsxRuntime.jsxs(Stack, { axis: "x", gap: "xxs", p: hasHeaderContent ? "m" : void 0, align: "start", justify: "between", width: "full", children: [title && jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(Text, { variant: "lg-strong", children: title }) }), shouldShowCollapseButton && jsxRuntime.jsx(
     Box,
     {
       /**
@@ -5284,7 +5294,7 @@ const VerticalMenu = (props) => {
         children: jsxRuntime.jsx(SidebarIcon, {})
       }) })
     }
-  )] }), isPrimaryVariant && hasHeaderContent && jsxRuntime.jsx(VerticalMenu.Divider, {}), jsxRuntime.jsx(Stack, { width: "full", gap: isCollapsed ? "xxs" : void 0, children: props.children }), jsxRuntime.jsx("div", { className: "ui:mt-auto", children: footer })] })) });
+  )] })] }), isPrimaryVariant && hasHeaderContent && jsxRuntime.jsx(VerticalMenu.Divider, {}), jsxRuntime.jsx(Stack, { width: "full", className: "ui:flex-1 ui:overflow-y-auto", gap: isCollapsed ? "xxs" : void 0, children: props.children }), jsxRuntime.jsx("div", { className: "ui:mt-auto", children: footer })] })) });
 };
 VerticalMenu.Divider = MenuDivider;
 VerticalMenu.Item = MenuItem;