@geneui/components 3.0.0-next-2fa65ce-08062026 → 3.0.0-next-fa6959e-02072026

package/Accordion.js

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-f211516f.js';
+import { a as __rest } from './tslib.es6-4a42b189.js';
 import React__default, { useContext, useState, useRef, useMemo } from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import { n as nanoid } from './index-15303b91.js';
@@ -7,7 +7,7 @@ import { a as SvgChevronLeft, S as SvgChevronRight } from './ChevronRight-af87e2
 import Button from './Button.js';
 import { S as Scrollbar } from './index-4388be47.js';
 import Text from './Text.js';
-import { B as ButtonGroup } from './index-a46fb8ec.js';
+import { B as ButtonGroup } from './index-0446a4e6.js';
 import Tooltip from './Tooltip.js';
 import { u as useEllipsisDetection } from './useEllipsisDetection-c5f9b175.js';
 import { a as AccordionContext } from './Accordion-3e20a13f.js';
@@ -18,7 +18,7 @@ import './style-inject.es-746bb8ed.js';
 import 'prop-types';
 import 'react-dom';
 import './useDebounceCallback-999deae7.js';
-import './ButtonGroup-f8e59eb9.js';
+import './ButtonGroup-ba146dcb.js';
 import './index-7d785c81.js';
 import './X-20da3b4a.js';
 import './index-5becfc74.js';

package/ActionableList.js

@@ -1,5 +1,5 @@
-import React__default, { useContext, useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { _ as _slicedToArray, d as dist, a as _toConsumableArray, g as getBindingsForBrokenDrags, m as monitorForElements, c as combine, b as dropTargetForElements, e as draggable, f as disableNativeDragPreview } from './ActionableListNodeWrapper-42ea60cf.js';
+import React__default, { useContext, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from 'react';
+import { _ as _slicedToArray, d as dist, a as _toConsumableArray, g as getBindingsForBrokenDrags, m as monitorForElements, c as combine, b as dropTargetForElements, e as draggable, f as disableNativeDragPreview } from './ActionableListNodeWrapper-0a3308ca.js';
 import { c as classNames } from './index-ce02421b.js';
 import { S as SvgMagnifier } from './Magnifier-8df67f2d.js';
 import Divider from './Divider.js';
@@ -7,18 +7,18 @@ import Loader from './Loader.js';
 import { S as Scrollbar } from './index-4388be47.js';
 import Text from './Text.js';
 import Checkbox from './Checkbox.js';
-import { E as Empty } from './index-a46fb8ec.js';
+import { E as Empty } from './index-0446a4e6.js';
 import TextField from './TextField.js';
+import Tooltip from './Tooltip.js';
 import { u as useDebouncedCallback } from './useDebounceCallback-999deae7.js';
+import { u as useEllipsisDetection } from './useEllipsisDetection-c5f9b175.js';
 import { S as SvgChevronDown } from './ChevronDown-ee53f094.js';
-import { S as SvgChevronRight } from './ChevronRight-af87e2a4.js';
+import { a as SvgChevronLeft, S as SvgChevronRight } from './ChevronRight-af87e2a4.js';
 import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
 import Button from './Button.js';
 import Info from './Info.js';
 import { createPortal } from 'react-dom';
 import { a as GeneUIDesignSystemContext } from './index-9a69bcc6.js';
-import Tooltip from './Tooltip.js';
-import { u as useEllipsisDetection } from './useEllipsisDetection-c5f9b175.js';
 import './style-inject.es-746bb8ed.js';
 import 'prop-types';
 import './index-15303b91.js';
@@ -33,8 +33,8 @@ import './index-7d785c81.js';
 import './useWindowSize-6faa0d0f.js';
 import './useDeviceInfo-8340f573.js';
 import './Checkbox-11eae830.js';
-import './ButtonGroup-f8e59eb9.js';
-import './tslib.es6-f211516f.js';
+import './ButtonGroup-ba146dcb.js';
+import './tslib.es6-4a42b189.js';
 import './X-20da3b4a.js';
 import './index-5becfc74.js';
 import './regex-d4e84e78.js';
@@ -125,6 +125,7 @@ const isAnySelectionInSubtree = (item) => {
     return children.some((child) => isAnySelectionInSubtree(child));
 };
 const nextLevel = (level) => Math.min(level + 1, ACTIONABLE_LIST_MAX_NESTED_LEVEL);
+const isGroupItem = (item) => Array.isArray(item.children);
 const mergeItemsFromProps = (incoming, previous) => {
     const prevById = new Map();
     const index = (nodes) => {
@@ -146,15 +147,30 @@ const mergeItemsFromProps = (incoming, previous) => {
         else if (prev !== undefined && typeof prev.checked === "boolean") {
             checked = prev.checked;
         }
-        return Object.assign(Object.assign({}, node), { checked, children: ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) ? merge(node.children) : undefined });
+        return Object.assign(Object.assign({}, node), { checked, children: isGroupItem(node) ? merge((_a = node.children) !== null && _a !== void 0 ? _a : []) : undefined });
     });
     return merge(incoming);
 };
 const countAllItems = (items) => items.reduce((acc, item) => acc + 1 + countAllItems(item.children || []), 0);
+/** Counts leaf nodes only — parent rows with children are grouping headers, not items. */
+const countLeafItems = (items) => items.reduce((acc, item) => {
+    var _a;
+    if (isGroupItem(item))
+        return acc + countLeafItems((_a = item.children) !== null && _a !== void 0 ? _a : []);
+    return acc + 1;
+}, 0);
 const countCheckedItems = (items) => items.reduce((acc, item) => {
     var _a;
-    const childCount = ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) ? countCheckedItems(item.children) : 0;
-    return acc + (item.checked ? 1 : 0) + childCount;
+    if (isGroupItem(item))
+        return acc + countCheckedItems((_a = item.children) !== null && _a !== void 0 ? _a : []);
+    return acc + (item.checked ? 1 : 0);
+}, 0);
+/** Counts checked leaves in `items` whose ids are in `scopeLeafIds`. */
+const countCheckedLeavesInScope = (items, scopeLeafIds) => items.reduce((acc, item) => {
+    var _a;
+    if (isGroupItem(item))
+        return acc + countCheckedLeavesInScope((_a = item.children) !== null && _a !== void 0 ? _a : [], scopeLeafIds);
+    return acc + (item.checked && scopeLeafIds.has(item.id) ? 1 : 0);
 }, 0);
 const findItemById = (nodes, targetId) => {
     const direct = nodes.find((node) => node.id === targetId);
@@ -182,34 +198,46 @@ const applyCheckedToBranch = (item, checked) => {
     var _a;
     return (Object.assign(Object.assign({}, item), { checked, children: (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child) => applyCheckedToBranch(child, checked)) }));
 };
+const collectLeafIds = (items) => items.flatMap((item) => { var _a; return (isGroupItem(item) ? collectLeafIds((_a = item.children) !== null && _a !== void 0 ? _a : []) : [item.id]); });
+const applyCheckedToLeavesById = (items, leafIds, checked) => items.map((item) => {
+    var _a;
+    if (isGroupItem(item)) {
+        return Object.assign(Object.assign({}, item), { children: applyCheckedToLeavesById((_a = item.children) !== null && _a !== void 0 ? _a : [], leafIds, checked) });
+    }
+    return leafIds.has(item.id) ? Object.assign(Object.assign({}, item), { checked }) : item;
+});
 const filterTree = (items, query) => {
     const q = query.trim().toLowerCase();
     if (!q)
         return items;
     return items.reduce((acc, item) => {
-        const filteredChildren = filterTree(item.children || [], q);
+        var _a;
+        const filteredChildren = isGroupItem(item) ? filterTree((_a = item.children) !== null && _a !== void 0 ? _a : [], q) : [];
         if (item.title.toLowerCase().includes(q) || filteredChildren.length > 0) {
-            acc.push(Object.assign(Object.assign({}, item), { children: filteredChildren }));
+            acc.push(Object.assign(Object.assign({}, item), { children: isGroupItem(item) ? filteredChildren : undefined }));
         }
         return acc;
     }, []);
 };
-const reorderSiblingsById = (items, sourceId, targetId) => {
+const reorderSiblingsById = (items, sourceId, targetId, edge) => {
     const si = items.findIndex((n) => n.id === sourceId);
     const ti = items.findIndex((n) => n.id === targetId);
     if (si < 0 || ti < 0 || si === ti)
         return items;
-    return reorder({ list: items, startIndex: si, finishIndex: ti });
+    let finishIndex = edge === "top" ? ti : ti + 1;
+    if (si < finishIndex)
+        finishIndex -= 1;
+    return reorder({ list: items, startIndex: si, finishIndex });
 };
-const reorderInTree = (items, sourceId, targetId) => {
-    const siblingResult = reorderSiblingsById(items, sourceId, targetId);
+const reorderInTree = (items, sourceId, targetId, edge = "bottom") => {
+    const siblingResult = reorderSiblingsById(items, sourceId, targetId, edge);
     if (siblingResult !== items)
         return siblingResult;
     return items.map((item) => {
         var _a;
         if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length))
             return item;
-        return Object.assign(Object.assign({}, item), { children: reorderInTree(item.children, sourceId, targetId) });
+        return Object.assign(Object.assign({}, item), { children: reorderInTree(item.children, sourceId, targetId, edge) });
     });
 };
 const getExpandedIdsFromItems = (items, ids = new Set()) => {
@@ -405,7 +433,7 @@ const CustomDragLayer = () => {
         React__default.createElement(ClonedNodeRenderer, { node: dragState.previewNode })), providerCurrent);
 };
 
-const ActionableListItem = ({ id, title, level, infoText, isExpandable = false, isExpanded = false, withCheckbox = false, checkboxChecked, checkboxIndeterminate, selectedCount = 0, totalCount = 0, descendantsSelectedCount = 0, descendantsTotalCount = 0, selectedLabel = "Selected", parentId = "root", isDraggable = false, dropGapEdge = null, expandAriaLabel = "Toggle nested items", onToggleExpand, onToggleCheck, onDragTargetChange, className }) => {
+const ActionableListItem = ({ id, title, level, infoText, isExpandable = false, isExpandDisabled = false, isExpanded = false, withCheckbox = false, checkboxChecked, checkboxIndeterminate, selectedCount = 0, totalCount = 0, descendantsSelectedCount = 0, descendantsTotalCount = 0, selectedLabel = "Selected", parentId = "root", dragListId, isDraggable = false, dropGapEdge = null, expandAriaLabel = "Toggle nested items", onToggleExpand, onToggleCheck, onDragTargetChange, className }) => {
     const rowRef = useRef(null);
     const dragHandleRef = useRef(null);
     const titleTextRef = useRef(null);
@@ -414,6 +442,8 @@ const ActionableListItem = ({ id, title, level, infoText, isExpandable = false,
     const isTruncated = useEllipsisDetection(titleTextRef);
     const isSelectedLabelTruncated = useEllipsisDetection(selectedLabelRef);
     const [isDragging, setIsDragging] = useState(false);
+    const isRTLMode = typeof document !== "undefined" && document.dir === "rtl";
+    const collapsedExpandIcon = isRTLMode ? SvgChevronLeft : SvgChevronRight;
     onDragTargetChangeRef.current = onDragTargetChange;
     const computeEdge = (clientY) => {
         const rowEl = rowRef.current;
@@ -446,12 +476,7 @@ const ActionableListItem = ({ id, title, level, infoText, isExpandable = false,
                     width: `${rect.width}px`,
                     height: `${rect.height}px`
                 });
-                return {
-                    sourceId: id,
-                    parentId,
-                    previewNode: clone,
-                    initialRect: rect
-                };
+                return Object.assign(Object.assign({ sourceId: id, parentId }, (dragListId ? { dragListId } : {})), { previewNode: clone, initialRect: rect });
             },
             onGenerateDragPreview: ({ nativeSetDragImage }) => {
                 disableNativeDragPreview({ nativeSetDragImage });
@@ -466,8 +491,15 @@ const ActionableListItem = ({ id, title, level, infoText, isExpandable = false,
             }
         }), dropTargetForElements({
             element: rowEl,
-            getData: () => ({ targetId: id, parentId }),
-            canDrop: ({ source }) => source.data.parentId === parentId,
+            getData: () => (Object.assign({ targetId: id, parentId }, (dragListId ? { targetListId: dragListId } : {}))),
+            canDrop: ({ source }) => {
+                const sourceListId = source.data.dragListId;
+                const sourceParentId = source.data.parentId;
+                if (dragListId && sourceListId && sourceListId !== dragListId) {
+                    return parentId === "root";
+                }
+                return sourceParentId === parentId;
+            },
             onDragEnter: ({ location }) => {
                 var _a;
                 (_a = onDragTargetChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onDragTargetChangeRef, computeEdge(location.current.input.clientY));
@@ -477,7 +509,7 @@ const ActionableListItem = ({ id, title, level, infoText, isExpandable = false,
                 (_a = onDragTargetChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onDragTargetChangeRef, computeEdge(location.current.input.clientY));
             }
         }));
-    }, [isDraggable, id, parentId]);
+    }, [isDraggable, id, parentId, dragListId]);
     return (React__default.createElement("div", { ref: rowRef, className: classNames("actionableListItem", className, {
             actionableListItem_nested: level > 1,
             actionableListItem_draggable: isDraggable,
@@ -486,7 +518,7 @@ const ActionableListItem = ({ id, title, level, infoText, isExpandable = false,
             actionableListItem_dropGapBottom: dropGapEdge === "bottom"
         }) },
         React__default.createElement(CustomDragLayer, null),
-        isExpandable && (React__default.createElement(Button, { size: "smallNudge", appearance: "secondary", layout: "text", Icon: isExpanded ? SvgChevronDown : SvgChevronRight, onClick: onToggleExpand, "aria-label": expandAriaLabel, className: "actionableListItem__toggle" })),
+        isExpandable && (React__default.createElement(Button, { size: "smallNudge", appearance: "secondary", layout: "text", Icon: isExpanded ? SvgChevronDown : collapsedExpandIcon, onClick: onToggleExpand, disabled: isExpandDisabled, "aria-label": expandAriaLabel, className: "actionableListItem__toggle" })),
         withCheckbox && (React__default.createElement(Checkbox, { checked: resolvedCheckboxChecked, indeterminate: resolvedCheckboxIndeterminate, onChange: (event) => onToggleCheck === null || onToggleCheck === void 0 ? void 0 : onToggleCheck(event.target.checked), className: "actionableListItem__checkbox" })),
         React__default.createElement(Tooltip, { text: title, isVisible: isTruncated },
             React__default.createElement(Text, { ref: titleTextRef, as: "span", variant: "bodyMediumMedium", className: "actionableListItem__title ellipsis-text" }, title)),
@@ -505,45 +537,72 @@ const ActionableListNodeWrapper = ({ level, children }) => {
     return React__default.createElement("div", { className: `actionableList__wrapper actionableList__wrapper_level_${level}` }, children);
 };
 
-const RenderNode = ({ item, level, parentId, withCheckbox, isDraggable, expandedIds, texts, dropGap, isSearchActive, onToggleExpand, onToggleCheck, onDragTargetChange }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const childCount = ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) || 0;
-    const canExpand = childCount > 0 && level < ACTIONABLE_LIST_MAX_NESTED_LEVEL;
+const isDroppedOnOtherList = (location, listId) => location.current.dropTargets.some(({ data: { targetListId, isPanelDropTarget } }) => {
+    return typeof targetListId === "string" && targetListId !== listId && !isPanelDropTarget;
+});
+const RenderNode = ({ item, level, parentId, withCheckbox, isDraggable, dragListId, expandedIds, texts, dropGap, isSearchActive, onToggleExpand, onToggleCheck, onDragTargetChange }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const isGroup = isGroupItem(item);
+    const childCount = (_b = (_a = item.children) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    const canExpand = isGroup && childCount > 0 && level < ACTIONABLE_LIST_MAX_NESTED_LEVEL;
     const isExpanded = canExpand ? isSearchActive || expandedIds.has(item.id) : false;
     const branchFullySelected = isSubtreeFullySelected(item);
     const branchIndeterminate = !branchFullySelected && isAnySelectionInSubtree(item);
-    const directChildTotal = (_c = (_b = item.children) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
-    const directChildFullySelected = (_e = (_d = item.children) === null || _d === void 0 ? void 0 : _d.filter((child) => isSubtreeFullySelected(child)).length) !== null && _e !== void 0 ? _e : 0;
+    const directChildTotal = (_d = (_c = item.children) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
+    const directChildFullySelected = (_f = (_e = item.children) === null || _e === void 0 ? void 0 : _e.filter((child) => isSubtreeFullySelected(child)).length) !== null && _f !== void 0 ? _f : 0;
     const childLevel = nextLevel(level);
     const dropGapEdge = (dropGap === null || dropGap === void 0 ? void 0 : dropGap.targetId) === item.id ? dropGap.edge : null;
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(ActionableListItem, Object.assign({ id: item.id, title: item.title, level: level, parentId: parentId, infoText: item.infoText, isExpandable: canExpand, isExpanded: isExpanded, withCheckbox: withCheckbox }, (withCheckbox
+        React__default.createElement(ActionableListItem, Object.assign({ id: item.id, title: item.title, level: level, parentId: parentId, infoText: item.infoText, isExpandable: isGroup && level < ACTIONABLE_LIST_MAX_NESTED_LEVEL, isExpandDisabled: isGroup && childCount === 0, isExpanded: isExpanded, withCheckbox: withCheckbox }, (withCheckbox
             ? {
                 checkboxChecked: branchFullySelected,
                 checkboxIndeterminate: branchIndeterminate,
                 descendantsSelectedCount: directChildFullySelected,
                 descendantsTotalCount: directChildTotal
             }
-            : {}), { selectedLabel: texts.selectedItemsLabel, isDraggable: isDraggable, dropGapEdge: dropGapEdge, expandAriaLabel: texts.expandButtonAriaLabel, onToggleExpand: () => onToggleExpand(item.id), onToggleCheck: (checked) => onToggleCheck(item.id, checked), onDragTargetChange: (edge) => onDragTargetChange(item.id, edge) })),
+            : {}), { selectedLabel: texts.selectedItemsLabel, isDraggable: isDraggable, dragListId: dragListId, dropGapEdge: dropGapEdge, expandAriaLabel: texts.expandButtonAriaLabel, onToggleExpand: () => onToggleExpand(item.id), onToggleCheck: (checked) => onToggleCheck(item.id, checked), onDragTargetChange: (edge) => onDragTargetChange(item.id, edge) })),
         canExpand && isExpanded && (React__default.createElement("div", { className: "actionableList__children" },
-            React__default.createElement(ActionableListNodeWrapper, { level: childLevel }, (_f = item.children) === null || _f === void 0 ? void 0 : _f.map((child) => (React__default.createElement(RenderNode, { key: child.id, item: child, level: childLevel, parentId: item.id, withCheckbox: withCheckbox, isDraggable: isDraggable, expandedIds: expandedIds, texts: texts, dropGap: dropGap, isSearchActive: isSearchActive, onToggleExpand: onToggleExpand, onToggleCheck: onToggleCheck, onDragTargetChange: onDragTargetChange }))))))));
+            React__default.createElement(ActionableListNodeWrapper, { level: childLevel }, (_g = item.children) === null || _g === void 0 ? void 0 : _g.map((child) => (React__default.createElement(RenderNode, { key: child.id, item: child, level: childLevel, parentId: item.id, withCheckbox: withCheckbox, isDraggable: isDraggable, dragListId: dragListId, expandedIds: expandedIds, texts: texts, dropGap: dropGap, isSearchActive: isSearchActive, onToggleExpand: onToggleExpand, onToggleCheck: onToggleCheck, onDragTargetChange: onDragTargetChange }))))))));
 };
 /**
  * Actionable List component provides users with a highly interactive, multi-functional list of items, organized in a hierarchical structure that supports up to five levels of nested items.
  */
-const ActionableList = ({ className, items = [], withCheckbox = false, draggable: isDraggable = false, loading = false, defaultExpandAll = false, texts, onItemsChange, onItemCheck, onSelectAllChange, onSearch }) => {
+const ActionableList = ({ className, items = [], withCheckbox = false, draggable: isDraggable = false, dragListId, loading = false, defaultExpandAll = false, texts, onItemsChange, onItemCheck, onSelectAllChange, managedSelection = false, onCrossListDrop, delegateCrossListDrop = false, dropGapOutletRef, onSearch }) => {
+    var _a;
     const mergedTexts = Object.assign(Object.assign({}, ACTIONABLE_LIST_DEFAULT_TEXTS), texts);
     const wasExpansionToggledRef = useRef(false);
+    const bulkSelectedLabelRef = useRef(null);
+    const filteredItemsLabelRef = useRef(null);
+    const totalItemsLabelRef = useRef(null);
+    const isBulkSelectedLabelTruncated = useEllipsisDetection(bulkSelectedLabelRef, [
+        mergedTexts.bulkSelectedItemsLabel
+    ]);
+    const isFilteredItemsLabelTruncated = useEllipsisDetection(filteredItemsLabelRef, [mergedTexts.filteredItemsLabel]);
+    const isTotalItemsLabelTruncated = useEllipsisDetection(totalItemsLabelRef, [mergedTexts.totalItemsLabel]);
     const [localItems, setLocalItems] = useState(() => mergeItemsFromProps(items, []));
+    const workingItems = managedSelection ? items : localItems;
     const [searchValue, setSearchValue] = useState("");
     const [expandedIds, setExpandedIds] = useState(() => defaultExpandAll ? getExpandedIdsFromItems(items) : new Set());
     const [dropGap, setDropGap] = useState(null);
+    const [isEmptyDropActive, setIsEmptyDropActive] = useState(false);
+    const emptyDropRef = useRef(null);
+    const listEndDropRef = useRef(null);
     const handleDropReorderRef = useRef(() => { });
+    const onCrossListDropRef = useRef(onCrossListDrop);
     const dropGapRef = useRef(dropGap);
     dropGapRef.current = dropGap;
+    onCrossListDropRef.current = onCrossListDrop;
     useEffect(() => {
+        if (!dropGapOutletRef)
+            return;
+        // eslint-disable-next-line no-param-reassign -- mirror drop gap for parent-coordinated cross-list DnD
+        dropGapOutletRef.current = dropGap;
+    }, [dropGap, dropGapOutletRef]);
+    useLayoutEffect(() => {
+        if (managedSelection)
+            return;
         setLocalItems((prev) => mergeItemsFromProps(items, prev));
-    }, [items]);
+    }, [items, managedSelection]);
     useEffect(() => {
         if (wasExpansionToggledRef.current)
             return;
@@ -553,16 +612,41 @@ const ActionableList = ({ className, items = [], withCheckbox = false, draggable
         if (!isDraggable)
             return () => undefined;
         return monitorForElements({
-            onDrop: ({ source }) => {
+            onDrop: ({ source, location }) => {
                 const gap = dropGapRef.current;
-                setDropGap(null);
                 const { sourceId } = source.data;
-                if (typeof sourceId === "string" && gap && sourceId !== gap.targetId) {
-                    handleDropReorderRef.current(sourceId, gap.targetId);
+                const sourceListId = source.data.dragListId;
+                const isCrossList = Boolean(dragListId && typeof sourceListId === "string" && sourceListId !== dragListId);
+                if (isCrossList && delegateCrossListDrop) {
+                    requestAnimationFrame(() => setDropGap(null));
+                    return;
                 }
+                setDropGap(null);
+                if (typeof sourceId !== "string" || !gap || sourceId === gap.targetId)
+                    return;
+                if (isCrossList) {
+                    if (!dragListId ||
+                        !location.current.dropTargets.some(({ data }) => data.targetListId === dragListId) ||
+                        !onCrossListDropRef.current) {
+                        return;
+                    }
+                    onCrossListDropRef.current({
+                        sourceListId: sourceListId,
+                        targetListId: dragListId,
+                        sourceId,
+                        targetId: gap.targetId,
+                        edge: gap.edge
+                    });
+                    return;
+                }
+                if (dragListId && typeof sourceListId === "string" && sourceListId === dragListId) {
+                    if (isDroppedOnOtherList(location, dragListId))
+                        return;
+                }
+                handleDropReorderRef.current(sourceId, gap.targetId, gap.edge);
             }
         });
-    }, [isDraggable]);
+    }, [isDraggable, dragListId, delegateCrossListDrop]);
     const { debouncedCallback, clearDebounce } = useDebouncedCallback((value) => {
         if (typeof value !== "string")
             return;
@@ -573,12 +657,17 @@ const ActionableList = ({ className, items = [], withCheckbox = false, draggable
         setSearchValue(value);
         debouncedCallback(value);
     };
-    const filteredItems = useMemo(() => filterTree(localItems, searchValue), [localItems, searchValue]);
-    const totalItemsCount = useMemo(() => countAllItems(localItems), [localItems]);
-    const filteredItemsCount = useMemo(() => countAllItems(filteredItems), [filteredItems]);
-    const selectedItemsCount = useMemo(() => countCheckedItems(localItems), [localItems]);
-    const selectAllChecked = totalItemsCount > 0 && localItems.every((item) => isSubtreeFullySelected(item));
-    const selectAllIndeterminate = !selectAllChecked && localItems.some((item) => isAnySelectionInSubtree(item));
+    const filteredItems = useMemo(() => filterTree(workingItems, searchValue), [workingItems, searchValue]);
+    const isSearchActive = searchValue.trim().length > 0;
+    const filteredLeafIds = useMemo(() => new Set(collectLeafIds(filteredItems)), [filteredItems]);
+    const totalItemsCount = useMemo(() => countLeafItems(workingItems), [workingItems]);
+    const filteredItemsCount = useMemo(() => countLeafItems(filteredItems), [filteredItems]);
+    const selectedItemsCount = useMemo(() => countCheckedItems(workingItems), [workingItems]);
+    const selectedFilteredLeafCount = useMemo(() => countCheckedLeavesInScope(workingItems, filteredLeafIds), [workingItems, filteredLeafIds]);
+    const selectAllScopeLeafCount = isSearchActive ? filteredItemsCount : totalItemsCount;
+    const selectedScopeLeafCount = isSearchActive ? selectedFilteredLeafCount : selectedItemsCount;
+    const selectAllChecked = selectAllScopeLeafCount > 0 && selectedScopeLeafCount === selectAllScopeLeafCount;
+    const selectAllIndeterminate = selectedScopeLeafCount > 0 && selectedScopeLeafCount < selectAllScopeLeafCount;
     const handleToggleExpand = (id) => {
         wasExpansionToggledRef.current = true;
         setExpandedIds((prev) => {
@@ -595,24 +684,30 @@ const ActionableList = ({ className, items = [], withCheckbox = false, draggable
         onItemsChange === null || onItemsChange === void 0 ? void 0 : onItemsChange(nextItems);
     };
     const handleToggleCheck = (id, checked) => {
-        const nextItems = updateItemById(localItems, id, (item) => applyCheckedToBranch(item, checked));
-        syncItems(nextItems);
+        const nextItems = updateItemById(workingItems, id, (item) => applyCheckedToBranch(item, checked));
+        if (!managedSelection) {
+            syncItems(nextItems);
+        }
         const toggled = findItemById(nextItems, id);
         if (toggled !== undefined) {
             onItemCheck === null || onItemCheck === void 0 ? void 0 : onItemCheck(toggled, checked, nextItems);
         }
     };
     const handleSelectAll = (checked) => {
-        if (totalItemsCount === 0)
+        if (selectAllScopeLeafCount === 0)
             return;
-        const nextItems = localItems.map((item) => applyCheckedToBranch(item, checked));
-        syncItems(nextItems);
-        onSelectAllChange === null || onSelectAllChange === void 0 ? void 0 : onSelectAllChange(checked, nextItems);
+        const scopeLeafIds = collectLeafIds(isSearchActive ? filteredItems : workingItems);
+        const targetLeafIds = new Set(scopeLeafIds);
+        const nextItems = applyCheckedToLeavesById(workingItems, targetLeafIds, checked);
+        onSelectAllChange === null || onSelectAllChange === void 0 ? void 0 : onSelectAllChange(checked, nextItems, scopeLeafIds);
+        if (!managedSelection) {
+            syncItems(nextItems);
+        }
     };
-    const handleDropReorder = (sourceId, targetId) => {
+    const handleDropReorder = (sourceId, targetId, edge) => {
         if (sourceId === targetId)
             return;
-        syncItems(reorderInTree(localItems, sourceId, targetId));
+        syncItems(reorderInTree(workingItems, sourceId, targetId, edge));
     };
     handleDropReorderRef.current = handleDropReorder;
     const handleDragTargetChange = useCallback((targetId, edge) => {
@@ -622,31 +717,94 @@ const ActionableList = ({ className, items = [], withCheckbox = false, draggable
             return { targetId, edge };
         });
     }, []);
-    const hasData = totalItemsCount > 0;
-    const hasSearchResults = filteredItemsCount > 0;
+    const hasData = useMemo(() => countAllItems(workingItems) > 0, [workingItems]);
+    const hasSearchResults = useMemo(() => countAllItems(filteredItems) > 0, [filteredItems]);
+    const showEmptyDropZone = isDraggable && Boolean(dragListId) && Boolean(onCrossListDrop || delegateCrossListDrop) && !loading && !hasData;
+    useEffect(() => {
+        const element = emptyDropRef.current;
+        if (!element || !showEmptyDropZone)
+            return () => undefined;
+        return dropTargetForElements({
+            element,
+            getData: () => (Object.assign({ isEmptyListTarget: true }, (dragListId ? { targetListId: dragListId } : {}))),
+            canDrop: ({ source }) => {
+                const sourceListId = source.data.dragListId;
+                return typeof sourceListId === "string" && sourceListId !== dragListId;
+            },
+            onDragEnter: () => setIsEmptyDropActive(true),
+            onDragLeave: () => setIsEmptyDropActive(false),
+            onDrop: ({ source }) => {
+                setIsEmptyDropActive(false);
+                if (delegateCrossListDrop)
+                    return;
+                const { sourceId } = source.data;
+                const sourceListId = source.data.dragListId;
+                if (typeof sourceId !== "string" ||
+                    typeof sourceListId !== "string" ||
+                    !dragListId ||
+                    !onCrossListDropRef.current) {
+                    return;
+                }
+                onCrossListDropRef.current({
+                    sourceListId,
+                    targetListId: dragListId,
+                    sourceId,
+                    isEmptyTarget: true
+                });
+            }
+        });
+    }, [showEmptyDropZone, dragListId, delegateCrossListDrop]);
+    const lastRootItemId = (_a = filteredItems[filteredItems.length - 1]) === null || _a === void 0 ? void 0 : _a.id;
+    useEffect(() => {
+        const element = listEndDropRef.current;
+        if (!element || !isDraggable || !hasSearchResults || !lastRootItemId)
+            return () => undefined;
+        const targetId = lastRootItemId;
+        return dropTargetForElements({
+            element,
+            getData: () => (Object.assign({ targetId, edge: "bottom" }, (dragListId ? { targetListId: dragListId } : {}))),
+            canDrop: ({ source }) => {
+                const sourceListId = source.data.dragListId;
+                const sourceParentId = source.data.parentId;
+                if (dragListId && typeof sourceListId === "string" && sourceListId !== dragListId) {
+                    return sourceParentId === "root";
+                }
+                return sourceParentId === "root";
+            },
+            onDragEnter: () => handleDragTargetChange(targetId, "bottom"),
+            onDrag: () => handleDragTargetChange(targetId, "bottom")
+        });
+    }, [isDraggable, hasSearchResults, lastRootItemId, dragListId, handleDragTargetChange]);
     return (React__default.createElement("div", { className: classNames("actionableList", className, { actionableList_hasDropGap: dropGap !== null }) },
         React__default.createElement("div", { className: "actionableList__headerWrapper" },
             React__default.createElement(TextField, { label: mergedTexts.searchLabel, placeholder: mergedTexts.searchPlaceholder, value: searchValue, onChange: (event) => handleSearchChange(event.target.value), IconBefore: SvgMagnifier, disabled: loading, className: "actionableList__search", clearable: true, onClear: () => handleSearchChange("") }),
             !loading && (React__default.createElement("div", { className: "actionableList__statsRow" },
                 withCheckbox && (React__default.createElement("div", { className: "actionableList__bulkSelection" },
-                    React__default.createElement(Checkbox, { checked: selectAllChecked, indeterminate: selectAllIndeterminate, disabled: totalItemsCount === 0, onChange: (event) => handleSelectAll(event.target.checked), className: "actionableList__selectAll" }),
-                    React__default.createElement(Text, { as: "span", variant: "bodyMediumMedium", className: "actionableList__bulkSelectedLabel" }, mergedTexts.bulkSelectedItemsLabel),
+                    React__default.createElement(Checkbox, { checked: selectAllChecked, indeterminate: selectAllIndeterminate, disabled: selectAllScopeLeafCount === 0, onChange: (event) => handleSelectAll(event.target.checked), className: "actionableList__selectAll" }),
+                    React__default.createElement("div", { className: "actionableList__bulkSelectedLabelWrapper" },
+                        React__default.createElement(Tooltip, { text: mergedTexts.bulkSelectedItemsLabel, isVisible: isBulkSelectedLabelTruncated },
+                            React__default.createElement(Text, { ref: bulkSelectedLabelRef, as: "span", variant: "bodyMediumMedium", className: "actionableList__bulkSelectedLabel ellipsis-text" }, mergedTexts.bulkSelectedItemsLabel))),
                     React__default.createElement(Text, { as: "span", variant: "bodyMediumMedium", className: "actionableList__bulkSelectedCount" }, selectedItemsCount))),
                 React__default.createElement("div", { className: "actionableList__stats" },
-                    React__default.createElement(Text, { as: "span", variant: "bodyMediumMedium", className: "actionableList__statsLabel" }, mergedTexts.filteredItemsLabel),
+                    React__default.createElement(Tooltip, { text: mergedTexts.filteredItemsLabel, isVisible: isFilteredItemsLabelTruncated },
+                        React__default.createElement(Text, { ref: filteredItemsLabelRef, as: "span", variant: "bodyMediumMedium", className: "actionableList__statsLabel ellipsis-text" }, mergedTexts.filteredItemsLabel)),
                     React__default.createElement(Text, { as: "span", variant: "bodyMediumMedium", className: "actionableList__statsCount" }, filteredItemsCount),
                     React__default.createElement(Divider, { direction: "vertical", className: "actionableList__statsDivider" }),
-                    React__default.createElement(Text, { as: "span", variant: "bodyMediumMedium", className: "actionableList__statsLabel" }, mergedTexts.totalItemsLabel),
+                    React__default.createElement(Tooltip, { text: mergedTexts.totalItemsLabel, isVisible: isTotalItemsLabelTruncated },
+                        React__default.createElement(Text, { ref: totalItemsLabelRef, as: "span", variant: "bodyMediumMedium", className: "actionableList__statsLabel ellipsis-text" }, mergedTexts.totalItemsLabel)),
                     React__default.createElement(Text, { as: "span", variant: "bodyMediumMedium", className: "actionableList__statsCount" }, totalItemsCount))))),
         loading && (React__default.createElement("div", { className: "actionableList__state actionableList__state_loading" },
             React__default.createElement(Loader, { text: mergedTexts.loadingTitle, size: "xLarge", textPosition: "below" }))),
         React__default.createElement(Scrollbar, null, !loading && (React__default.createElement(React__default.Fragment, null,
-            !hasData && (React__default.createElement("div", { className: "actionableList__state" },
+            !hasData && (React__default.createElement("div", { ref: showEmptyDropZone ? emptyDropRef : undefined, className: classNames("actionableList__state", {
+                    actionableList__state_dropTarget: isEmptyDropActive
+                }) },
                 React__default.createElement(Empty, { size: "small", appearance: "noData", title: mergedTexts.noDataTitle, description: mergedTexts.noDataDescription, className: "actionableList__empty" }))),
             hasData && !hasSearchResults && (React__default.createElement("div", { className: "actionableList__state" },
                 React__default.createElement(Empty, { size: "small", appearance: "noResult", title: mergedTexts.noResultsTitle, description: mergedTexts.noResultsDescription, className: "actionableList__empty" }))),
             hasData && hasSearchResults && (React__default.createElement("div", { className: "actionableList__list" },
-                React__default.createElement(ActionableListNodeWrapper, { level: 1 }, filteredItems.map((item) => (React__default.createElement(RenderNode, { key: item.id, item: item, level: 1, parentId: "root", withCheckbox: withCheckbox, isDraggable: isDraggable, expandedIds: expandedIds, texts: mergedTexts, dropGap: dropGap, isSearchActive: searchValue.trim().length > 0, onToggleExpand: handleToggleExpand, onToggleCheck: handleToggleCheck, onDragTargetChange: handleDragTargetChange })))))))))));
+                React__default.createElement(ActionableListNodeWrapper, { level: 1 }, filteredItems.map((item) => (React__default.createElement(RenderNode, { key: item.id, item: item, level: 1, parentId: "root", withCheckbox: withCheckbox, isDraggable: isDraggable, dragListId: dragListId, expandedIds: expandedIds, texts: mergedTexts, dropGap: dropGap, isSearchActive: searchValue.trim().length > 0, onToggleExpand: handleToggleExpand, onToggleCheck: handleToggleCheck, onDragTargetChange: handleDragTargetChange })))),
+                isDraggable && (React__default.createElement("div", { ref: listEndDropRef, className: "actionableList__listEndDrop", "aria-hidden": true })))))))));
 };
 
 export { ActionableList as default };

package/{ActionableListNodeWrapper-42ea60cf.js → ActionableListNodeWrapper-0a3308ca.js}

@@ -2105,7 +2105,7 @@ function draggable(args) {
 
 /** Arguments given to all monitor feedback functions (eg `canMonitor()`) for a `monitorForElements` */
 
-var css_248z$2 = ".actionableList{display:flex;flex-direction:column;height:100%;width:100%}.actionableList__headerWrapper{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-medium)}.actionableList__search{width:100%}.actionableList__statsRow{align-items:center;display:flex;flex-wrap:wrap;gap:var(--guit-ref-spacing-medium);justify-content:space-between;width:100%}.actionableList__bulkSelection{align-items:center;display:flex;gap:var(--guit-ref-spacing-2xsmall);min-width:0}.actionableList__checkbox{align-items:center;display:flex;flex-shrink:0;height:var(--guit-sem-dimension-height-small);justify-content:center;width:var(--guit-sem-dimension-width-small)}.actionableList__bulkSelectedLabel{color:var(--guit-sem-color-foreground-neutral-1)}.actionableList__bulkSelectedCount{color:var(--guit-sem-color-foreground-neutral-2)}.actionableList__stats{-webkit-margin-start:auto;align-items:center;display:flex;flex-shrink:0;gap:var(--guit-ref-spacing-2xsmall);justify-content:flex-end;margin-inline-start:auto}.actionableList__statsLabel{color:var(--guit-sem-color-foreground-neutral-1)}.actionableList__statsCount{color:var(--guit-sem-color-foreground-neutral-2)}.actionableList__statsDivider{min-height:1.6rem}.actionableList__list{width:100%}.actionableList__children{overflow:hidden;position:relative;width:100%}.actionableList__state{align-items:center;display:flex;justify-content:center;min-height:22.6rem;width:100%}.actionableList__empty{width:100%}";
+var css_248z$2 = ".actionableList{display:flex;flex-direction:column;height:100%;width:100%}.actionableList__headerWrapper{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-medium)}.actionableList__search{width:100%}.actionableList__statsRow{align-items:center;display:flex;flex-wrap:nowrap;gap:var(--guit-ref-spacing-medium);justify-content:space-between;width:100%}.actionableList__bulkSelection{align-items:center;display:flex;flex-shrink:1;gap:var(--guit-ref-spacing-2xsmall);min-width:0}.actionableList__selectAll{flex-shrink:0}.actionableList__bulkSelectedLabelWrapper{flex:1 1 auto;min-width:0;overflow:hidden}.actionableList__checkbox{align-items:center;display:flex;flex-shrink:0;height:var(--guit-sem-dimension-height-small);justify-content:center;width:var(--guit-sem-dimension-width-small)}.actionableList__bulkSelectedLabel{color:var(--guit-sem-color-foreground-neutral-1);display:block;min-width:0}.actionableList__bulkSelectedCount{color:var(--guit-sem-color-foreground-neutral-2);flex-shrink:0}.actionableList__stats{-webkit-margin-start:auto;align-items:center;display:flex;flex-shrink:1;gap:var(--guit-ref-spacing-2xsmall);justify-content:flex-end;margin-inline-start:auto;min-width:0}.actionableList__statsLabel{color:var(--guit-sem-color-foreground-neutral-1);display:block;min-width:0}.actionableList__statsCount{color:var(--guit-sem-color-foreground-neutral-2);flex-shrink:0}.actionableList__statsDivider{flex-shrink:0;min-height:1.6rem}.actionableList__list{display:flex;flex-direction:column;min-height:100%;width:100%}.actionableList__listEndDrop{flex:1 1 auto;height:100%;width:100%}.actionableList__children{overflow:hidden;position:relative;width:100%}.actionableList__state{align-items:center;display:flex;justify-content:center;min-height:22.6rem;width:100%}.actionableList__state_dropTarget{background-color:var(--guit-sem-color-background-brand-1-subtle);border-radius:var(--guit-ref-radius-xsmall);outline:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-brand-1);outline-offset:calc(var(--guit-ref-border-width-thin)*-1)}.actionableList__empty{width:100%}";
 styleInject(css_248z$2);
 
 // In order to disable the native drag preview you can

package/Banner.js

@@ -5,13 +5,13 @@ import { S as SvgInfo } from './Info-0f0741e0.js';
 import { S as SvgX } from './X-20da3b4a.js';
 import Button from './Button.js';
 import Text from './Text.js';
-import { B as ButtonGroup } from './index-a46fb8ec.js';
+import { B as ButtonGroup } from './index-0446a4e6.js';
 import { a as GeneUIDesignSystemContext } from './index-9a69bcc6.js';
 import './Banner-09cf6dea.js';
 import './Loader.js';
 import './style-inject.es-746bb8ed.js';
-import './ButtonGroup-f8e59eb9.js';
-import './tslib.es6-f211516f.js';
+import './ButtonGroup-ba146dcb.js';
+import './tslib.es6-4a42b189.js';
 import './index-7d785c81.js';
 import 'react-dom';
 import './index-5becfc74.js';

package/Breadcrumb.js

@@ -1,10 +1,10 @@
-export { B as default } from './index-3dc2323a.js';
+export { B as default } from './index-7aa2d261.js';
 import 'react';
 import './index-ce02421b.js';
 import './ActivityRecent-b88e2ba8.js';
-import './index-a46fb8ec.js';
-import './ButtonGroup-f8e59eb9.js';
-import './tslib.es6-f211516f.js';
+import './index-0446a4e6.js';
+import './ButtonGroup-ba146dcb.js';
+import './tslib.es6-4a42b189.js';
 import './Loader.js';
 import './style-inject.es-746bb8ed.js';
 import './index-7d785c81.js';

package/{ButtonGroup-f8e59eb9.js → ButtonGroup-ba146dcb.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-f211516f.js';
+import { a as __rest } from './tslib.es6-4a42b189.js';
 import React__default, { forwardRef, useState, useContext, useRef, useImperativeHandle, useEffect, useLayoutEffect, createContext, useCallback, useMemo, Children, cloneElement } from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import Loader from './Loader.js';

package/ButtonGroup.js

@@ -1,6 +1,6 @@
-export { B as default } from './index-a46fb8ec.js';
-import './ButtonGroup-f8e59eb9.js';
-import './tslib.es6-f211516f.js';
+export { B as default } from './index-0446a4e6.js';
+import './ButtonGroup-ba146dcb.js';
+import './tslib.es6-4a42b189.js';
 import 'react';
 import './index-ce02421b.js';
 import './Loader.js';

package/ColorPicker.js

@@ -2,8 +2,8 @@ import React__default, { useState, useEffect, useRef, useCallback, useContext, u
 import { c as classNames } from './index-ce02421b.js';
 import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
 import Label from './Label.js';
-import { P as Popover, a as PopoverBody } from './ButtonGroup-f8e59eb9.js';
-import './tslib.es6-f211516f.js';
+import { P as Popover, a as PopoverBody } from './ButtonGroup-ba146dcb.js';
+import './tslib.es6-4a42b189.js';
 import './Button.js';
 import './index-7d785c81.js';
 import './Loader.js';
@@ -31,7 +31,7 @@ import './index-5becfc74.js';
 import 'prop-types';
 import './CaretDownFilled-924e7189.js';
 import './Magnifier-8df67f2d.js';
-import './index-a46fb8ec.js';
+import './index-0446a4e6.js';
 import './index-15303b91.js';
 import './CheckMark-34798545.js';
 import './ChevronRight-af87e2a4.js';