@geneui/components 3.0.0-next-2fa65ce-08062026 → 3.0.0-next-bc8245e-24062026

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';
@@ -9,16 +9,16 @@ import Text from './Text.js';
 import Checkbox from './Checkbox.js';
 import { E as Empty } from './index-a46fb8ec.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';
@@ -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/SegmentedControl.js

@@ -61,11 +61,12 @@ import './OTPField-af15abb1.js';
 import './index-3dc2323a.js';
 import './PageHeader-cfa2c255.js';
 import './PopoverConfirm-d6880a4f.js';
-import './ActionableListNodeWrapper-42ea60cf.js';
+import './ActionableListNodeWrapper-0a3308ca.js';
 import './List-586cdebf.js';
 import './DataTable-c7132016.js';
 import './GlobalHeader-e3be2af9.js';
 import './DataCardList-eb674418.js';
+import './TransferList-55c2e836.js';
 import './useEllipsisDetection-c5f9b175.js';
 import './useWindowSize-6faa0d0f.js';
 import './useDebounceCallback-999deae7.js';

package/TransferList-55c2e836.js

@@ -0,0 +1,4 @@
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+
+var css_248z = ".transferList{border:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);border-radius:var(--guit-ref-radius-xsmall);display:grid;height:39.8rem;overflow:hidden;width:100%}.transferList_panels2{grid-template-columns:repeat(1,1fr auto) 1fr}.transferList_panels3{grid-template-columns:repeat(2,1fr auto) 1fr}.transferList_panels4{grid-template-columns:repeat(3,1fr auto) 1fr}.transferList__panel{display:flex;flex-direction:column;min-height:0;min-width:0;padding:var(--guit-ref-spacing-large)}.transferList__actionableList{flex:1;min-height:0}.transferList__controls{border-inline:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);display:flex;flex-direction:column;gap:var(--guit-ref-spacing-2xsmall);justify-content:center;padding:var(--guit-ref-spacing-large)}";
+styleInject(css_248z);

package/TransferList.js

@@ -0,0 +1,396 @@
+import React__default, { useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect, Fragment } from 'react';
+import { m as monitorForElements, b as dropTargetForElements } from './ActionableListNodeWrapper-0a3308ca.js';
+import { c as classNames } from './index-ce02421b.js';
+import { a as SvgChevronLeft, S as SvgChevronRight } from './ChevronRight-af87e2a4.js';
+import Button from './Button.js';
+import ActionableList from './ActionableList.js';
+import './TransferList-55c2e836.js';
+import './index-4388be47.js';
+import 'prop-types';
+import 'react-dom';
+import './useDebounceCallback-999deae7.js';
+import './style-inject.es-746bb8ed.js';
+import './ActivityRecent-b88e2ba8.js';
+import './Loader.js';
+import './Magnifier-8df67f2d.js';
+import './Divider.js';
+import './Text.js';
+import './Checkbox.js';
+import './index-15303b91.js';
+import './CheckMark-34798545.js';
+import './Minus-c3ff7a21.js';
+import './HelperText.js';
+import './ErrorFilled-f4226310.js';
+import './TriangleAlert-ba250f4c.js';
+import './Label.js';
+import './Info.js';
+import './Info-0f0741e0.js';
+import './Tooltip.js';
+import './index-7d785c81.js';
+import './index-9a69bcc6.js';
+import './useWindowSize-6faa0d0f.js';
+import './useDeviceInfo-8340f573.js';
+import './useEllipsisDetection-c5f9b175.js';
+import './Checkbox-11eae830.js';
+import './index-a46fb8ec.js';
+import './ButtonGroup-f8e59eb9.js';
+import './tslib.es6-f211516f.js';
+import './X-20da3b4a.js';
+import './index-5becfc74.js';
+import './TextField.js';
+import './regex-d4e84e78.js';
+import './ChevronDown-ee53f094.js';
+
+const TRANSFER_LIST_MIN_PANELS = 2;
+const TRANSFER_LIST_MAX_PANELS = 4;
+const assertPanelCount = (panels) => {
+    if (panels.length < TRANSFER_LIST_MIN_PANELS || panels.length > TRANSFER_LIST_MAX_PANELS) {
+        throw new Error(`TransferList requires between ${TRANSFER_LIST_MIN_PANELS} and ${TRANSFER_LIST_MAX_PANELS} panels, received ${panels.length}.`);
+    }
+};
+const collectNodeIds = (item) => {
+    var _a, _b;
+    return [
+        item.id,
+        ...((_b = (_a = item.children) === null || _a === void 0 ? void 0 : _a.flatMap((child) => collectNodeIds(child))) !== null && _b !== void 0 ? _b : [])
+    ];
+};
+const collectTreeIds = (items) => items.flatMap((item) => collectNodeIds(item));
+const mergeSelectionWithScope = (current, scopeLeafIds, checked) => {
+    const scopeSet = new Set(scopeLeafIds);
+    if (!checked) {
+        const next = new Set(current);
+        scopeSet.forEach((id) => next.delete(id));
+        return next;
+    }
+    const preservedOutsideScope = [...current].filter((id) => !scopeSet.has(id));
+    return new Set([...preservedOutsideScope, ...scopeSet]);
+};
+const applySelectionToTree = (items, selectedIds) => items.map((item) => (Object.assign(Object.assign({}, item), { checked: selectedIds.has(item.id), children: Array.isArray(item.children) ? applySelectionToTree(item.children, selectedIds) : undefined })));
+const partitionTreeByIds = (items, selectedIds) => {
+    const remaining = [];
+    const moved = [];
+    const movedIds = new Set();
+    const walk = (node) => {
+        var _a;
+        if (selectedIds.has(node.id)) {
+            collectNodeIds(node).forEach((id) => movedIds.add(id));
+            moved.push(node);
+            return null;
+        }
+        if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            return node;
+        }
+        const keptChildren = [];
+        node.children.forEach((child) => {
+            const keptChild = walk(child);
+            if (keptChild)
+                keptChildren.push(keptChild);
+        });
+        return Object.assign(Object.assign({}, node), { children: Array.isArray(node.children) ? keptChildren : undefined });
+    };
+    items.forEach((item) => {
+        const keptItem = walk(item);
+        if (keptItem)
+            remaining.push(keptItem);
+    });
+    return { remaining, moved, movedIds: Array.from(movedIds) };
+};
+const clearChecked = (item) => {
+    var _a;
+    return (Object.assign(Object.assign({}, item), { checked: false, children: (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child) => clearChecked(child)) }));
+};
+const mergeMovedItems = (target, moved) => {
+    if (!moved.length)
+        return target;
+    const existingIds = new Set(collectTreeIds(target));
+    const dedupedMoved = moved
+        .filter((item) => !existingIds.has(item.id))
+        .map((item) => {
+        const cleared = clearChecked(item);
+        collectNodeIds(cleared).forEach((id) => existingIds.add(id));
+        return cleared;
+    });
+    return [...target, ...dedupedMoved];
+};
+const insertAtRoot = (items, item, targetId, edge = "bottom") => {
+    const targetIndex = items.findIndex((node) => node.id === targetId);
+    if (targetIndex === -1)
+        return [...items, item];
+    const insertIndex = edge === "top" ? targetIndex : targetIndex + 1;
+    const next = [...items];
+    next.splice(insertIndex, 0, item);
+    return next;
+};
+const moveBetweenPanels = (sourceItems, targetItems, selectedIds) => {
+    const { remaining, moved, movedIds } = partitionTreeByIds(sourceItems, selectedIds);
+    if (!moved.length) {
+        return { sourceItems, targetItems, movedIds: [] };
+    }
+    return {
+        sourceItems: remaining,
+        targetItems: mergeMovedItems(targetItems, moved),
+        movedIds
+    };
+};
+const moveItemByDrag = (sourceItems, targetItems, sourceId, targetId, edge = "bottom", isEmptyTarget = false) => {
+    const { remaining, moved, movedIds } = partitionTreeByIds(sourceItems, new Set([sourceId]));
+    if (!moved.length) {
+        return { sourceItems, targetItems, movedIds: [] };
+    }
+    const cleared = moved.map((item) => clearChecked(item));
+    const existingIds = new Set(collectTreeIds(targetItems));
+    const deduped = cleared.filter((item) => !existingIds.has(item.id));
+    if (!deduped.length) {
+        return { sourceItems: remaining, targetItems, movedIds: [] };
+    }
+    if (isEmptyTarget || !targetItems.length || !targetId) {
+        return {
+            sourceItems: remaining,
+            targetItems: mergeMovedItems(targetItems, deduped),
+            movedIds
+        };
+    }
+    let nextTarget = targetItems;
+    deduped.forEach((item) => {
+        nextTarget = insertAtRoot(nextTarget, item, targetId, edge);
+    });
+    return { sourceItems: remaining, targetItems: nextTarget, movedIds };
+};
+
+const applyDropGap = (targetListId, payload, panelDropGapRefs) => {
+    var _a;
+    const gap = (_a = panelDropGapRefs[targetListId]) === null || _a === void 0 ? void 0 : _a.current;
+    if (!gap)
+        return payload;
+    return Object.assign(Object.assign({}, payload), { targetId: gap.targetId, edge: gap.edge });
+};
+const resolveCrossListDrop = (sourceData, dropTargets, panelDropGapRefs) => {
+    const { sourceId } = sourceData;
+    const sourceListId = sourceData.dragListId;
+    if (typeof sourceId !== "string" || typeof sourceListId !== "string")
+        return null;
+    const crossListTargets = dropTargets.filter(({ data }) => {
+        const { targetListId } = data;
+        return typeof targetListId === "string" && targetListId !== sourceListId;
+    });
+    if (!crossListTargets.length)
+        return null;
+    const emptyTarget = crossListTargets.find(({ data }) => data.isEmptyListTarget);
+    if (emptyTarget) {
+        return {
+            sourceListId,
+            sourceId,
+            targetListId: emptyTarget.data.targetListId,
+            isEmptyTarget: true
+        };
+    }
+    const rowTargets = crossListTargets.filter(({ data }) => !data.isPanelDropTarget);
+    if (rowTargets.length) {
+        const { data } = rowTargets[rowTargets.length - 1];
+        const targetListId = data.targetListId;
+        return applyDropGap(targetListId, {
+            sourceListId,
+            sourceId,
+            targetListId,
+            targetId: typeof data.targetId === "string" ? data.targetId : undefined,
+            edge: data.edge === "top" || data.edge === "bottom" ? data.edge : "bottom"
+        }, panelDropGapRefs);
+    }
+    const panelTargets = crossListTargets.filter(({ data }) => data.isPanelDropTarget);
+    if (panelTargets.length) {
+        const { data } = panelTargets[panelTargets.length - 1];
+        const targetListId = data.targetListId;
+        return applyDropGap(targetListId, {
+            sourceListId,
+            sourceId,
+            targetListId,
+            targetId: typeof data.targetId === "string" ? data.targetId : undefined,
+            edge: data.edge === "top" || data.edge === "bottom" ? data.edge : "bottom"
+        }, panelDropGapRefs);
+    }
+    return null;
+};
+/**
+ * Transfer List component enables users to move items between two to four actionable lists.
+ */
+const TransferList = ({ className, panels, draggable = false, onChange }) => {
+    assertPanelCount(panels);
+    const isRTLMode = typeof document !== "undefined" && document.dir === "rtl";
+    const ForwardIcon = isRTLMode ? SvgChevronLeft : SvgChevronRight;
+    const BackwardIcon = isRTLMode ? SvgChevronRight : SvgChevronLeft;
+    const isControlled = panels.every((panel) => panel.items !== undefined);
+    const [uncontrolledPanelItems, setUncontrolledPanelItems] = useState(() => panels.map((panel) => { var _a; return (_a = panel.defaultItems) !== null && _a !== void 0 ? _a : []; }));
+    const [selectedIdsByPanel, setSelectedIdsByPanel] = useState(() => panels.map(() => new Set()));
+    const panelRefs = useRef({});
+    const panelDropGapRefs = useRef({});
+    const getDropGapOutletRef = (panelId) => {
+        if (!panelDropGapRefs.current[panelId]) {
+            panelDropGapRefs.current[panelId] = { current: null };
+        }
+        return panelDropGapRefs.current[panelId];
+    };
+    const panelTreeIdSignature = useMemo(() => (isControlled ? panels.map((panel) => { var _a; return (_a = panel.items) !== null && _a !== void 0 ? _a : []; }) : uncontrolledPanelItems)
+        .map((items) => collectTreeIds(items).sort().join(","))
+        .join("|"), [isControlled, panels, uncontrolledPanelItems]);
+    const resolvedPanelItems = useMemo(() => (isControlled ? panels.map((panel) => { var _a; return (_a = panel.items) !== null && _a !== void 0 ? _a : []; }) : uncontrolledPanelItems), [isControlled, panels, uncontrolledPanelItems, panelTreeIdSignature]);
+    const panelViewItems = useMemo(() => resolvedPanelItems.map((items, index) => { var _a; return applySelectionToTree(items, (_a = selectedIdsByPanel[index]) !== null && _a !== void 0 ? _a : new Set()); }), [resolvedPanelItems, selectedIdsByPanel]);
+    const emitChange = useCallback((payload) => {
+        if (!isControlled) {
+            setUncontrolledPanelItems(payload.panels);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(payload);
+    }, [isControlled, onChange]);
+    const updateSelection = (item, checked, panelIndex) => {
+        const branchIds = collectNodeIds(item);
+        setSelectedIdsByPanel((prev) => prev.map((set, index) => {
+            if (index !== panelIndex)
+                return set;
+            const next = new Set(set);
+            branchIds.forEach((id) => {
+                if (checked)
+                    next.add(id);
+                else
+                    next.delete(id);
+            });
+            return next;
+        }));
+    };
+    const handleSelectAll = (checked, panelIndex, scopeLeafIds = []) => {
+        if (checked && scopeLeafIds.length === 0)
+            return;
+        setSelectedIdsByPanel((prev) => prev.map((set, index) => (index === panelIndex ? mergeSelectionWithScope(set, scopeLeafIds, checked) : set)));
+    };
+    useEffect(() => {
+        setSelectedIdsByPanel((prev) => {
+            const next = resolvedPanelItems.map((items, index) => {
+                var _a;
+                const panelIds = new Set(collectTreeIds(items));
+                const current = (_a = prev[index]) !== null && _a !== void 0 ? _a : new Set();
+                return new Set(Array.from(current).filter((id) => panelIds.has(id)));
+            });
+            const isUnchanged = next.every((set, index) => {
+                var _a;
+                const previous = (_a = prev[index]) !== null && _a !== void 0 ? _a : new Set();
+                if (set.size !== previous.size)
+                    return false;
+                return Array.from(set).every((id) => previous.has(id));
+            });
+            return isUnchanged ? prev : next;
+        });
+    }, [panelTreeIdSignature, resolvedPanelItems]);
+    const handleMove = (fromPanelIndex, toPanelIndex) => {
+        const selectedIds = selectedIdsByPanel[fromPanelIndex];
+        if (!(selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.size))
+            return;
+        const sourceItems = resolvedPanelItems[fromPanelIndex];
+        const targetItems = resolvedPanelItems[toPanelIndex];
+        const { sourceItems: nextSource, targetItems: nextTarget, movedIds } = moveBetweenPanels(sourceItems, targetItems, selectedIds);
+        if (!movedIds.length)
+            return;
+        const nextPanels = resolvedPanelItems.map((items, index) => {
+            if (index === fromPanelIndex)
+                return nextSource;
+            if (index === toPanelIndex)
+                return nextTarget;
+            return items;
+        });
+        setSelectedIdsByPanel((prev) => prev.map((set, index) => (index === fromPanelIndex ? new Set() : set)));
+        emitChange({
+            fromPanelIndex,
+            toPanelIndex,
+            direction: toPanelIndex > fromPanelIndex ? "forward" : "backward",
+            movedIds,
+            panels: nextPanels
+        });
+    };
+    const handlePanelItemsChange = (panelIndex, items) => {
+        const nextPanels = resolvedPanelItems.map((panelItems, index) => (index === panelIndex ? items : panelItems));
+        emitChange({
+            fromPanelIndex: panelIndex,
+            toPanelIndex: panelIndex,
+            direction: "forward",
+            movedIds: [],
+            panels: nextPanels
+        });
+    };
+    const handleCrossListDrop = useCallback(({ sourceListId, targetListId, sourceId, targetId, edge, isEmptyTarget }) => {
+        const fromPanelIndex = panels.findIndex(({ id }) => id === sourceListId);
+        const toPanelIndex = panels.findIndex(({ id }) => id === targetListId);
+        if (fromPanelIndex < 0 || toPanelIndex < 0 || fromPanelIndex === toPanelIndex)
+            return;
+        const { sourceItems, targetItems, movedIds } = moveItemByDrag(resolvedPanelItems[fromPanelIndex], resolvedPanelItems[toPanelIndex], sourceId, targetId, edge, isEmptyTarget);
+        if (!movedIds.length)
+            return;
+        const nextPanels = resolvedPanelItems.map((items, index) => {
+            if (index === fromPanelIndex)
+                return sourceItems;
+            if (index === toPanelIndex)
+                return targetItems;
+            return items;
+        });
+        emitChange({
+            fromPanelIndex,
+            toPanelIndex,
+            direction: toPanelIndex > fromPanelIndex ? "forward" : "backward",
+            movedIds,
+            panels: nextPanels
+        });
+    }, [emitChange, panels, resolvedPanelItems]);
+    useEffect(() => {
+        if (!draggable)
+            return () => undefined;
+        return monitorForElements({
+            onDrop: ({ source, location }) => {
+                const payload = resolveCrossListDrop(source.data, location.current.dropTargets, panelDropGapRefs.current);
+                if (!payload)
+                    return;
+                handleCrossListDrop(payload);
+            }
+        });
+    }, [draggable, handleCrossListDrop]);
+    useLayoutEffect(() => {
+        if (!draggable)
+            return () => undefined;
+        const cleanups = [];
+        panels.forEach((panel, panelIndex) => {
+            const element = panelRefs.current[panel.id];
+            if (!element)
+                return;
+            const panelItems = resolvedPanelItems[panelIndex];
+            cleanups.push(dropTargetForElements({
+                element,
+                getData: () => {
+                    if (!panelItems.length) {
+                        return { targetListId: panel.id, isEmptyListTarget: true };
+                    }
+                    return {
+                        targetListId: panel.id,
+                        targetId: panelItems[panelItems.length - 1].id,
+                        edge: "bottom",
+                        isPanelDropTarget: true
+                    };
+                },
+                canDrop: ({ source }) => {
+                    const sourceListId = source.data.dragListId;
+                    return typeof sourceListId === "string" && sourceListId !== panel.id;
+                }
+            }));
+        });
+        return () => cleanups.forEach((cleanup) => cleanup());
+    }, [draggable, panels, resolvedPanelItems, panelTreeIdSignature]);
+    const panelCount = panels.length;
+    return (React__default.createElement("div", { className: classNames("transferList", `transferList_panels${panelCount}`, className) }, panels.map((panel, panelIndex) => {
+        var _a, _b, _c, _d;
+        return (React__default.createElement(Fragment, { key: panel.id },
+            React__default.createElement("div", { ref: (element) => {
+                    panelRefs.current[panel.id] = element;
+                }, className: "transferList__panel" },
+                React__default.createElement(ActionableList, { className: "transferList__actionableList", withCheckbox: true, managedSelection: true, draggable: draggable, dragListId: draggable ? panel.id : undefined, delegateCrossListDrop: draggable, dropGapOutletRef: draggable ? getDropGapOutletRef(panel.id) : undefined, items: panelViewItems[panelIndex], texts: panel.texts, onItemCheck: (item, checked) => updateSelection(item, checked, panelIndex), onSelectAllChange: (checked, _items, scopeLeafIds) => handleSelectAll(checked, panelIndex, scopeLeafIds), onItemsChange: draggable ? (items) => handlePanelItemsChange(panelIndex, items) : undefined })),
+            panelIndex < panelCount - 1 && (React__default.createElement("div", { className: "transferList__controls" },
+                React__default.createElement(Button, { size: "medium", appearance: "secondary", layout: "text", Icon: ForwardIcon, disabled: ((_b = (_a = selectedIdsByPanel[panelIndex]) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0) === 0, onClick: () => handleMove(panelIndex, panelIndex + 1), "aria-label": "Move selected to next panel" }),
+                React__default.createElement(Button, { size: "medium", appearance: "secondary", layout: "text", Icon: BackwardIcon, disabled: ((_d = (_c = selectedIdsByPanel[panelIndex + 1]) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : 0) === 0, onClick: () => handleMove(panelIndex + 1, panelIndex), "aria-label": "Move selected to previous panel" })))));
+    })));
+};
+
+export { TransferList as default };

package/components/molecules/ActionableList/ActionableList.d.ts

@@ -5,5 +5,5 @@ import type { IActionableListProps } from "./ActionableList.types";
  * 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.
  */
 declare const ActionableList: FC<IActionableListProps>;
-export type { IActionableListItem, IActionableListProps, IActionableListTexts } from "./ActionableList.types";
+export type { IActionableListDropGap, IActionableListItem, IActionableListProps, IActionableListTexts, ICrossListDropPayload } from "./ActionableList.types";
 export { ActionableList as default };

package/components/molecules/ActionableList/ActionableList.helpers.d.ts

@@ -6,12 +6,19 @@ export declare const ACTIONABLE_LIST_DEFAULT_TEXTS: IActionableListTexts;
 export declare const isSubtreeFullySelected: (item: IActionableListItem) => boolean;
 export declare const isAnySelectionInSubtree: (item: IActionableListItem) => boolean;
 export declare const nextLevel: (level: TActionableListLevel) => TActionableListLevel;
+export declare const isGroupItem: (item: IActionableListItem) => boolean;
 export declare const mergeItemsFromProps: (incoming: IActionableListItem[], previous: IActionableListItem[]) => IActionableListItem[];
 export declare const countAllItems: (items: IActionableListItem[]) => number;
+/** Counts leaf nodes only — parent rows with children are grouping headers, not items. */
+export declare const countLeafItems: (items: IActionableListItem[]) => number;
 export declare const countCheckedItems: (items: IActionableListItem[]) => number;
+/** Counts checked leaves in `items` whose ids are in `scopeLeafIds`. */
+export declare const countCheckedLeavesInScope: (items: IActionableListItem[], scopeLeafIds: ReadonlySet<string>) => number;
 export declare const findItemById: (nodes: IActionableListItem[], targetId: string) => IActionableListItem | undefined;
 export declare const updateItemById: (items: IActionableListItem[], targetId: string, updater: (item: IActionableListItem) => IActionableListItem) => IActionableListItem[];
 export declare const applyCheckedToBranch: (item: IActionableListItem, checked: boolean) => IActionableListItem;
+export declare const collectLeafIds: (items: IActionableListItem[]) => string[];
+export declare const applyCheckedToLeavesById: (items: IActionableListItem[], leafIds: ReadonlySet<string>, checked: boolean) => IActionableListItem[];
 export declare const filterTree: (items: IActionableListItem[], query: string) => IActionableListItem[];
-export declare const reorderInTree: (items: IActionableListItem[], sourceId: string, targetId: string) => IActionableListItem[];
+export declare const reorderInTree: (items: IActionableListItem[], sourceId: string, targetId: string, edge?: "top" | "bottom") => IActionableListItem[];
 export declare const getExpandedIdsFromItems: (items: IActionableListItem[], ids?: Set<string>) => Set<string>;

package/components/molecules/ActionableList/ActionableList.types.d.ts

@@ -1,3 +1,4 @@
+import type { MutableRefObject } from "react";
 export interface IActionableListItem {
     /**
      * Unique item identifier.
@@ -21,6 +22,36 @@ export interface IActionableListItem {
      */
     checked?: boolean;
 }
+export interface ICrossListDropPayload {
+    /**
+     * Drag scope id of the list the item was dragged from.
+     */
+    sourceListId: string;
+    /**
+     * Drag scope id of the list the item was dropped onto.
+     */
+    targetListId: string;
+    /**
+     * Id of the dragged item.
+     */
+    sourceId: string;
+    /**
+     * Id of the root-level row used as the drop target. Omitted when dropping onto an empty list.
+     */
+    targetId?: string;
+    /**
+     * Whether the item is inserted above or below the target row.
+     */
+    edge?: "top" | "bottom";
+    /**
+     * True when the item was dropped onto the empty-list drop zone.
+     */
+    isEmptyTarget?: boolean;
+}
+export interface IActionableListDropGap {
+    targetId: string;
+    edge: "top" | "bottom";
+}
 export interface IActionableListTexts {
     /**
      * Search field label.
@@ -89,6 +120,22 @@ export interface IActionableListProps {
      * Enables drag and drop variant.
      */
     draggable?: boolean;
+    /**
+     * Scope id included in drag data for cross-list transfer (e.g. TransferList panel id).
+     */
+    dragListId?: string;
+    /**
+     * Called when an item is dropped onto a root row from another list (requires `dragListId`).
+     */
+    onCrossListDrop?: (payload: ICrossListDropPayload) => void;
+    /**
+     * When true, cross-list drops are coordinated by a parent (e.g. TransferList).
+     */
+    delegateCrossListDrop?: boolean;
+    /**
+     * Mirrors the active drop gap for parent-coordinated cross-list drops.
+     */
+    dropGapOutletRef?: MutableRefObject<IActionableListDropGap | null>;
     /**
      * Optional controlled loading state.
      */
@@ -112,9 +159,15 @@ export interface IActionableListProps {
      */
     onItemCheck?: (item: IActionableListItem, checked: boolean, items: IActionableListItem[]) => void;
     /**
-     * Emits when the toolbar **Select all** checkbox is toggled: target `checked` state and full updated `items` tree.
+     * Emits when the toolbar **Select all** checkbox is toggled: target `checked` state, full updated `items` tree,
+     * and leaf ids in the current select-all scope (filtered leaves while searching, otherwise all leaves).
+     */
+    onSelectAllChange?: (checked: boolean, items: IActionableListItem[], scopeLeafIds: string[]) => void;
+    /**
+     * When `true`, selection is read from the `items` prop and checkbox toggles only emit callbacks.
+     * Used by TransferList; not intended for standalone ActionableList usage.
      */
-    onSelectAllChange?: (checked: boolean, items: IActionableListItem[]) => void;
+    managedSelection?: boolean;
     /**
      * Emits debounced search value.
      */

package/components/molecules/ActionableList/ActionableListItem/ActionableListItem.d.ts

@@ -23,6 +23,10 @@ interface IActionableListItemProps {
      * Whether the row has children and can be expanded.
      */
     isExpandable?: boolean;
+    /**
+     * Disables expand/collapse when a group has no children.
+     */
+    isExpandDisabled?: boolean;
     /**
      * Whether the row is currently expanded.
      */
@@ -63,6 +67,10 @@ interface IActionableListItemProps {
      * Identifier of the parent group for same-sibling-group drop restriction.
      */
     parentId?: string;
+    /**
+     * Drag scope id for cross-list transfer.
+     */
+    dragListId?: string;
     /**
      * Whether drag-and-drop handle is shown.
      */

package/components/molecules/ActionableList/index.d.ts

@@ -1,2 +1,2 @@
-export type { IActionableListItem, IActionableListProps, IActionableListTexts } from "./ActionableList.types";
+export type { IActionableListDropGap, IActionableListItem, IActionableListProps, IActionableListTexts, ICrossListDropPayload } from "./ActionableList.types";
 export { default } from "./ActionableList";

package/components/organisms/TransferList/TransferList.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import "./TransferList.scss";
+import type { ITransferListProps } from "./TransferList.types";
+/**
+ * Transfer List component enables users to move items between two to four actionable lists.
+ */
+declare const TransferList: FC<ITransferListProps>;
+export { TransferList as default };

package/components/organisms/TransferList/TransferList.helpers.d.ts

@@ -0,0 +1,25 @@
+import type { IActionableListItem } from "@components/molecules/ActionableList";
+import type { ITransferListPanel } from "./TransferList.types";
+export declare const TRANSFER_LIST_MIN_PANELS = 2;
+export declare const TRANSFER_LIST_MAX_PANELS = 4;
+export declare const assertPanelCount: (panels: ITransferListPanel[]) => void;
+export declare const collectNodeIds: (item: IActionableListItem) => string[];
+export declare const collectTreeIds: (items: IActionableListItem[]) => string[];
+export declare const mergeSelectionWithScope: (current: ReadonlySet<string>, scopeLeafIds: readonly string[], checked: boolean) => Set<string>;
+export declare const applySelectionToTree: (items: IActionableListItem[], selectedIds: Set<string>) => IActionableListItem[];
+interface IPartitionResult {
+    remaining: IActionableListItem[];
+    moved: IActionableListItem[];
+    movedIds: string[];
+}
+export declare const partitionTreeByIds: (items: IActionableListItem[], selectedIds: Set<string>) => IPartitionResult;
+export declare const mergeMovedItems: (target: IActionableListItem[], moved: IActionableListItem[]) => IActionableListItem[];
+export declare const insertAtRoot: (items: IActionableListItem[], item: IActionableListItem, targetId: string, edge?: "top" | "bottom") => IActionableListItem[];
+interface IMoveBetweenPanelsResult {
+    sourceItems: IActionableListItem[];
+    targetItems: IActionableListItem[];
+    movedIds: string[];
+}
+export declare const moveBetweenPanels: (sourceItems: IActionableListItem[], targetItems: IActionableListItem[], selectedIds: Set<string>) => IMoveBetweenPanelsResult;
+export declare const moveItemByDrag: (sourceItems: IActionableListItem[], targetItems: IActionableListItem[], sourceId: string, targetId?: string, edge?: "top" | "bottom", isEmptyTarget?: boolean) => IMoveBetweenPanelsResult;
+export {};

package/components/organisms/TransferList/TransferList.types.d.ts

@@ -0,0 +1,62 @@
+import type { IActionableListItem, IActionableListTexts } from "@components/molecules/ActionableList";
+type TTransferListDirection = "forward" | "backward";
+interface ITransferListPanel {
+    /**
+     * Stable panel key and drag scope identifier.
+     */
+    id: string;
+    /**
+     * Controlled tree for this panel.
+     */
+    items?: IActionableListItem[];
+    /**
+     * Uncontrolled initial tree for this panel.
+     */
+    defaultItems?: IActionableListItem[];
+    /**
+     * Per-panel ActionableList texts; `searchLabel` is the panel label.
+     */
+    texts?: Partial<IActionableListTexts>;
+}
+interface ITransferListChangePayload {
+    /**
+     * Index of the panel items were moved from.
+     */
+    fromPanelIndex: number;
+    /**
+     * Index of the panel items were moved to.
+     */
+    toPanelIndex: number;
+    /**
+     * Move direction relative to panel order.
+     */
+    direction: TTransferListDirection;
+    /**
+     * IDs moved by the action (empty for in-panel reorder).
+     */
+    movedIds: string[];
+    /**
+     * Next state for all panels.
+     */
+    panels: IActionableListItem[][];
+}
+interface ITransferListProps {
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
+    /**
+     * Two to four actionable list panels.
+     */
+    panels: ITransferListPanel[];
+    /**
+     * Enables drag-and-drop reorder within a panel and transfer to root rows of adjacent panels.
+     */
+    draggable?: boolean;
+    /**
+     * Called after move, cross-panel drag, or in-panel reorder.
+     */
+    onChange?: (payload: ITransferListChangePayload) => void;
+}
+export type { ITransferListChangePayload, ITransferListPanel, ITransferListProps, TTransferListDirection };

package/components/organisms/TransferList/index.d.ts

@@ -0,0 +1,2 @@
+export type { ITransferListChangePayload, ITransferListPanel, ITransferListProps, TTransferListDirection } from "./TransferList.types";
+export { default } from "./TransferList";

package/index.d.ts

@@ -64,6 +64,7 @@ export { default as List, IListProps, IListItemData } from "./components/molecul
 export { default as DataTable, DataTableGetRowStatus, DataTableRenderExpandedRow, DataTableRowExpandChangeHandler, DataTableRowExpandChangePayload, DataTableRowStatus, IDataTableProps, IDataTableRowAction } from "@components/organisms/DataTable";
 export { default as GlobalHeader, IGlobalHeaderProps, IAction, IProducts, IPartnersProps } from "./components/organisms/GlobalHeader";
 export { default as DataCardList, IDataCardListProps } from "@components/organisms/DataCardList";
+export { default as TransferList } from "./components/organisms/TransferList";
 export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";
 export { default as useDebounce } from "./hooks/useDebounceCallback";
 export { default as useEllipsisDetection } from "./hooks/useEllipsisDetection";

package/index.js

@@ -70,6 +70,7 @@ export { default as List } from './List.js';
 export { default as DataTable } from './DataTable.js';
 export { default as GlobalHeader } from './GlobalHeader.js';
 export { default as DataCardList } from './DataCardList.js';
+export { default as TransferList } from './TransferList.js';
 export { a as GeneUIDesignSystemContext, G as GeneUIProvider, u as useBreakpoint } from './index-9a69bcc6.js';
 export { u as useDebounce } from './useDebounceCallback-999deae7.js';
 export { u as useEllipsisDetection } from './useEllipsisDetection-c5f9b175.js';
@@ -135,10 +136,11 @@ import './ColorPicker-c6af3618.js';
 import './OTPField-af15abb1.js';
 import './PageHeader-cfa2c255.js';
 import './PopoverConfirm-d6880a4f.js';
-import './ActionableListNodeWrapper-42ea60cf.js';
+import './ActionableListNodeWrapper-0a3308ca.js';
 import './List-586cdebf.js';
 import './DataTable-c7132016.js';
 import './GlobalHeader-e3be2af9.js';
 import './DataCardList-eb674418.js';
+import './TransferList-55c2e836.js';
 import './Magnifier-8df67f2d.js';
 import './index-8156dbce.js';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-2fa65ce-08062026",
+    "version": "3.0.0-next-bc8245e-24062026",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {