@inkra/react 0.3.0 → 0.5.0

package/dist/transfer/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { forwardRef, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Button } from '../Button.js';
 import { Input } from '../form/Input.js';
@@ -7,33 +8,34 @@ import { PencilLine } from '../PencilLine.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { Checkbox } from '../selection/Checkbox.js';
-import { moveTransferKeys, normalizeTargetKeys, splitTransferItems, uniqueTransferItems, } from './model.js';
+import { moveTransferKeys, normalizeTargetKeys, resolveTransferFocusIntent, splitTransferItems, transferKeysEqual, uniqueTransferItems, } from './model.js';
 const searchPaths = [
     { d: 'M 11 4 A 7 7 0 1 0 11 18 A 7 7 0 1 0 11 4 M 16 16 L 21 21' },
 ];
 const rightPaths = [{ d: 'M 5 12 L 19 12 M 13 6 L 19 12 L 13 18' }];
-const leftPaths = [{ d: 'M 19 12 L 5 12 M 11 6 L 5 12 L 11 18' }];
-const defaultLabels = {
-    sourceTitle: 'Available',
-    targetTitle: 'Selected',
-    sourceSearchLabel: 'Search available items',
-    targetSearchLabel: 'Search selected items',
-    sourceClearSearch: 'Clear available item search',
-    targetClearSearch: 'Clear selected item search',
-    sourceSearchPlaceholder: 'Search available',
-    targetSearchPlaceholder: 'Search selected',
-    selectAllSource: 'Select all visible available items',
-    selectAllTarget: 'Select all visible selected items',
-    sourceEmpty: 'No available items',
-    targetEmpty: 'No selected items',
-    sourceNoResults: 'No available items match this search',
-    targetNoResults: 'No selected items match this search',
-    moveToTarget: 'Move to selected',
-    moveToSource: 'Move to available',
-    moveSelectedToTarget: 'Move selected visible items to selected',
-    moveSelectedToSource: 'Move selected visible items to available',
-    batchActions: 'Transfer selected visible items',
-};
+const defaultLabels = (t) => ({
+    sourceTitle: t('transfer.available'),
+    targetTitle: t('common.selected'),
+    sourceSearchLabel: t('transfer.sourceSearch'),
+    targetSearchLabel: t('transfer.targetSearch'),
+    sourceClearSearch: t('transfer.sourceClear'),
+    targetClearSearch: t('transfer.targetClear'),
+    sourceSearchPlaceholder: t('transfer.sourcePlaceholder'),
+    targetSearchPlaceholder: t('transfer.targetPlaceholder'),
+    selectAllSource: t('transfer.allSource'),
+    selectAllTarget: t('transfer.allTarget'),
+    sourceEmpty: t('transfer.sourceEmpty'),
+    targetEmpty: t('transfer.targetEmpty'),
+    sourceNoResults: t('transfer.sourceNoResults'),
+    targetNoResults: t('transfer.targetNoResults'),
+    moveToTarget: t('transfer.toTarget'),
+    moveToSource: t('transfer.toSource'),
+    moveSelectedToTarget: t('transfer.selectedToTarget'),
+    moveSelectedToSource: t('transfer.selectedToSource'),
+    batchActions: t('transfer.batch'),
+    previousPage: t('common.previousPage'),
+    nextPage: t('common.nextPage'),
+});
 function searchableText(item) {
     const parts = [
         item.searchText,
@@ -43,57 +45,113 @@ function searchableText(item) {
     ];
     return parts.filter(Boolean).join(' ').toLocaleLowerCase();
 }
-function defaultFilter(item, query) {
-    return searchableText(item).includes(query.trim().toLocaleLowerCase());
+function filterPanelItems(items, query, side, filterItem) {
+    if (query.length === 0)
+        return items;
+    if (filterItem)
+        return items.filter(item => filterItem(item, query, side));
+    const needle = query.trim().toLocaleLowerCase();
+    return items.filter(item => searchableText(item).includes(needle));
 }
-function defaultCount({ visible, total, selected }) {
-    return selected > 0 ? `${selected} selected · ${visible}/${total}` : `${visible}/${total}`;
+function defaultCount({ visible, total, selected }, t) {
+    return selected > 0 ? t('transfer.count', { selected, visible, total }) : `${visible}/${total}`;
 }
 function itemCopy(item) {
     return _jsxs("span", { className: "inkra-transfer__item-copy", children: [_jsx("span", { className: "inkra-transfer__item-label", children: typeof item.label === 'string' || typeof item.label === 'number'
                     ? _jsx(PencilText, { children: String(item.label) })
                     : item.label }), item.description == null ? null : _jsx("span", { className: "inkra-transfer__item-description", children: item.description })] });
 }
-export const Transfer = forwardRef(function Transfer({ className, defaultTargetKeys = [], disabled = false, filterItem, formatCount = defaultCount, items, labels: labelOverrides, onTargetKeysChange, renderItem, searchable = true, targetKeys, ...props }, ref) {
+export const Transfer = forwardRef(function Transfer({ className, defaultTargetKeys = [], disabled = false, filterItem, formatCount: formatCountProp, items, labels: labelOverrides, onTargetKeysChange, pageSize, pageLabel = (page, count) => `${page} / ${count}`, renderItem, searchable = true, targetKeys, ...props }, ref) {
+    const { t } = useInkraLocale();
+    const formatCount = formatCountProp ?? ((details) => defaultCount(details, t));
     const generatedId = useId();
     const controlled = targetKeys !== undefined;
     const uniqueItems = useMemo(() => uniqueTransferItems(items), [items]);
     const [uncontrolledTargetKeys, setUncontrolledTargetKeys] = useState(() => normalizeTargetKeys(items, defaultTargetKeys));
-    const currentTargetKeys = normalizeTargetKeys(uniqueItems, controlled ? targetKeys : uncontrolledTargetKeys);
-    const panels = splitTransferItems(uniqueItems, currentTargetKeys);
-    const labels = { ...defaultLabels, ...labelOverrides };
+    const requestedTargetKeys = controlled ? targetKeys : uncontrolledTargetKeys;
+    const currentTargetKeys = useMemo(() => normalizeTargetKeys(uniqueItems, requestedTargetKeys), [uniqueItems, requestedTargetKeys]);
+    const currentTargetSet = useMemo(() => new Set(currentTargetKeys), [currentTargetKeys]);
+    const itemsById = useMemo(() => new Map(uniqueItems.map(item => [item.id, item])), [uniqueItems]);
+    const panels = useMemo(() => splitTransferItems(uniqueItems, currentTargetKeys), [uniqueItems, currentTargetKeys]);
+    const labels = { ...defaultLabels(t), ...labelOverrides };
     const [queries, setQueries] = useState({ source: '', target: '' });
+    const [pages, setPages] = useState({ source: 0, target: 0 });
+    const pageLength = pageSize !== undefined && Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : undefined;
     const [selected, setSelected] = useState(() => ({ source: new Set(), target: new Set() }));
     const [pendingFocus, setPendingFocus] = useState(null);
     const itemRefs = useRef(new Map());
     const panelRefs = useRef({ source: null, target: null });
-    const visible = (side) => panels[side].filter(item => {
-        const query = queries[side];
-        return query.length === 0 || (filterItem ? filterItem(item, query, side) : defaultFilter(item, query));
-    });
-    const visibleItems = { source: visible('source'), target: visible('target') };
+    const visibleSource = useMemo(() => filterPanelItems(panels.source, queries.source, 'source', filterItem), [panels.source, queries.source, filterItem]);
+    const visibleTarget = useMemo(() => filterPanelItems(panels.target, queries.target, 'target', filterItem), [panels.target, queries.target, filterItem]);
+    const pageIndex = (side, count) => pageLength === undefined ? 0 : Math.min(pages[side], Math.max(0, Math.ceil(count / pageLength) - 1));
+    const sourcePage = pageIndex('source', visibleSource.length);
+    const targetPage = pageIndex('target', visibleTarget.length);
+    const shownSource = useMemo(() => pageLength === undefined ? visibleSource : visibleSource.slice(sourcePage * pageLength, (sourcePage + 1) * pageLength), [visibleSource, sourcePage, pageLength]);
+    const shownTarget = useMemo(() => pageLength === undefined ? visibleTarget : visibleTarget.slice(targetPage * pageLength, (targetPage + 1) * pageLength), [visibleTarget, targetPage, pageLength]);
+    const visibleItems = { source: shownSource, target: shownTarget };
     useEffect(() => {
-        const valid = new Set(uniqueItems.map(item => item.id));
         setSelected(current => {
-            const source = new Set([...current.source].filter(key => valid.has(key) && !currentTargetKeys.includes(key)));
-            const target = new Set([...current.target].filter(key => valid.has(key) && currentTargetKeys.includes(key)));
+            const source = new Set([...current.source].filter(key => itemsById.has(key) && !currentTargetSet.has(key)));
+            const target = new Set([...current.target].filter(key => itemsById.has(key) && currentTargetSet.has(key)));
             if (source.size === current.source.size && target.size === current.target.size)
                 return current;
             return { source, target };
         });
-    }, [items, currentTargetKeys.join('\u0000')]);
+    }, [itemsById, currentTargetSet]);
     useEffect(() => {
         if (!pendingFocus)
             return;
-        const targetContainsItem = pendingFocus.side === 'target'
-            ? currentTargetKeys.includes(pendingFocus.id)
-            : !currentTargetKeys.includes(pendingFocus.id);
-        const control = targetContainsItem ? itemRefs.current.get(`${pendingFocus.side}:${pendingFocus.id}`) : null;
+        if (disabled || !itemsById.has(pendingFocus.id)) {
+            setPendingFocus(null);
+            return;
+        }
+        const valueResolution = transferKeysEqual(currentTargetKeys, pendingFocus.expectedTargetKeys)
+            ? 'accepted'
+            : transferKeysEqual(currentTargetKeys, pendingFocus.previousTargetKeys) ? 'unchanged' : 'mismatch';
+        const ownerDocument = pendingFocus.origin?.ownerDocument ?? document;
+        const activeElement = ownerDocument.activeElement;
+        const originStillOwnsFocus = activeElement === pendingFocus.origin;
+        const focusFellBackToDocument = activeElement === ownerDocument.body || activeElement === ownerDocument.documentElement;
+        const originUnavailable = pendingFocus.origin != null
+            && (!pendingFocus.origin.isConnected || pendingFocus.origin.matches(':disabled'))
+            && focusFellBackToDocument;
+        if (valueResolution !== 'accepted') {
+            if (resolveTransferFocusIntent(valueResolution, originStillOwnsFocus, originUnavailable) !== 'wait') {
+                setPendingFocus(null);
+                return;
+            }
+            const cancel = (event) => {
+                const target = event.target;
+                const documentFallback = target === ownerDocument.body || target === ownerDocument.documentElement;
+                const unavailable = pendingFocus.origin != null
+                    && (!pendingFocus.origin.isConnected || pendingFocus.origin.matches(':disabled'));
+                if (target !== pendingFocus.origin && !(documentFallback && unavailable))
+                    setPendingFocus(null);
+            };
+            ownerDocument.addEventListener('focusin', cancel);
+            return () => ownerDocument.removeEventListener('focusin', cancel);
+        }
+        if (resolveTransferFocusIntent('accepted', originStillOwnsFocus, originUnavailable) !== 'focus') {
+            setPendingFocus(null);
+            return;
+        }
+        if (pageLength !== undefined) {
+            const matching = pendingFocus.side === 'source' ? visibleSource : visibleTarget;
+            const index = matching.findIndex(item => item.id === pendingFocus.id);
+            const nextPage = index < 0 ? undefined : Math.floor(index / pageLength);
+            if (nextPage !== undefined && nextPage !== pages[pendingFocus.side]) {
+                setPages(current => ({ ...current, [pendingFocus.side]: nextPage }));
+                return;
+            }
+        }
+        const control = itemRefs.current.get(`${pendingFocus.side}:${pendingFocus.id}`);
         (control ?? panelRefs.current[pendingFocus.side])?.focus({ preventScroll: true });
         setPendingFocus(null);
-    }, [pendingFocus, currentTargetKeys.join('\u0000')]);
+    }, [disabled, pendingFocus, currentTargetKeys, itemsById, pageLength, pages, visibleSource, visibleTarget]);
     const setItemSelected = (side, id, checked) => {
         setSelected(current => {
+            if (current[side].has(id) === checked)
+                return current;
             const next = new Set(current[side]);
             if (checked)
                 next.add(id);
@@ -111,11 +169,11 @@ export const Transfer = forwardRef(function Transfer({ className, defaultTargetK
             return { ...current, [side]: next };
         });
     };
-    const move = (keys, direction, action) => {
+    const move = (keys, direction, action, origin) => {
         const sourceSide = direction === 'to-target' ? 'source' : 'target';
         const destinationSide = direction === 'to-target' ? 'target' : 'source';
         const allowed = new Set(panels[sourceSide].filter(item => !item.disabled && !disabled).map(item => item.id));
-        const movedKeys = keys.filter((key, index) => allowed.has(key) && keys.indexOf(key) === index);
+        const movedKeys = [...new Set(keys)].filter(key => allowed.has(key));
         if (movedKeys.length === 0)
             return;
         const next = moveTransferKeys(uniqueItems, currentTargetKeys, movedKeys, direction);
@@ -126,12 +184,18 @@ export const Transfer = forwardRef(function Transfer({ className, defaultTargetK
             movedKeys.forEach(key => source.delete(key));
             return { ...current, [sourceSide]: source };
         });
-        setPendingFocus({ id: movedKeys[0], side: destinationSide });
+        setPendingFocus({
+            id: movedKeys[0],
+            side: destinationSide,
+            origin,
+            previousTargetKeys: [...currentTargetKeys],
+            expectedTargetKeys: next,
+        });
         onTargetKeysChange?.(next, {
             action,
             direction,
             movedKeys,
-            movedItems: movedKeys.map(key => uniqueItems.find(item => item.id === key)).filter((item) => item !== undefined),
+            movedItems: movedKeys.map(key => itemsById.get(key)).filter((item) => item !== undefined),
         });
     };
     const renderPanel = (side) => {
@@ -154,7 +218,10 @@ export const Transfer = forwardRef(function Transfer({ className, defaultTargetK
         const selectAllLabel = source ? labels.selectAllSource : labels.selectAllTarget;
         const direction = source ? 'to-target' : 'to-source';
         const moveLabel = source ? labels.moveToTarget : labels.moveToSource;
-        return _jsxs(PencilSurface, { "aria-labelledby": titleId, as: "section", className: "inkra-transfer__panel", "data-searchable": searchable || undefined, "data-side": side, ref: element => { panelRefs.current[side] = element; }, seed: `inkra-transfer-${generatedId}-${side}`, tabIndex: -1, variant: "paper", children: [_jsxs("header", { className: "inkra-transfer__header", children: [_jsx("span", { className: "inkra-transfer__title", id: titleId, children: typeof panelTitle === 'string' ? _jsx(PencilText, { children: panelTitle }) : panelTitle }), _jsx("span", { "aria-live": "polite", className: "inkra-transfer__count", children: count })] }), _jsx(PencilLine, { "aria-hidden": "true", className: "inkra-transfer__divider", seed: `inkra-transfer-${generatedId}-${side}-header` }), searchable && _jsx(Input, { "aria-label": searchLabel, clearable: true, clearButtonLabel: clearSearchLabel, disabled: disabled, onValueChange: value => setQueries(current => ({ ...current, [side]: value })), placeholder: searchPlaceholder, startIcon: _jsx(PencilIcon, { decorative: true, paths: searchPaths, size: 18, sourceSize: 24 }), type: "search", value: queries[side], variant: "outline" }), _jsx("div", { className: "inkra-transfer__selection-bar", children: _jsx(Checkbox, { checked: allVisibleSelected, disabled: disabled || selectable.length === 0, indeterminate: someVisibleSelected, label: selectAllLabel, onCheckedChange: checked => toggleAll(side, checked), seed: `inkra-transfer-${generatedId}-${side}-all` }) }), _jsx("ul", { className: "inkra-transfer__list", "aria-labelledby": titleId, children: shown.length === 0 ? _jsx("li", { className: "inkra-transfer__empty", children: empty }) : shown.map(item => {
+        return _jsxs(PencilSurface, { "aria-labelledby": titleId, as: "section", className: "inkra-transfer__panel", "data-searchable": searchable || undefined, "data-side": side, ref: element => { panelRefs.current[side] = element; }, seed: `inkra-transfer-${generatedId}-${side}`, tabIndex: -1, variant: "paper", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-transfer__panel-focus", variant: "outline", seed: `inkra-transfer-${generatedId}-${side}-focus` }), _jsxs("header", { className: "inkra-transfer__header", children: [_jsx("span", { className: "inkra-transfer__title", id: titleId, children: typeof panelTitle === 'string' ? _jsx(PencilText, { children: panelTitle }) : panelTitle }), _jsx("span", { "aria-live": "polite", className: "inkra-transfer__count", children: count })] }), _jsx(PencilLine, { "aria-hidden": "true", className: "inkra-transfer__divider", seed: `inkra-transfer-${generatedId}-${side}-header` }), searchable && _jsx(Input, { "aria-label": searchLabel, clearable: true, clearButtonLabel: clearSearchLabel, disabled: disabled, onValueChange: value => {
+                        setQueries(current => ({ ...current, [side]: value }));
+                        setPages(current => ({ ...current, [side]: 0 }));
+                    }, placeholder: searchPlaceholder, startIcon: _jsx(PencilIcon, { decorative: true, paths: searchPaths, size: 18, sourceSize: 24 }), type: "search", value: queries[side], variant: "outline" }), _jsx("div", { className: "inkra-transfer__selection-bar", children: _jsx(Checkbox, { checked: allVisibleSelected, disabled: disabled || selectable.length === 0, indeterminate: someVisibleSelected, label: selectAllLabel, onCheckedChange: checked => toggleAll(side, checked), seed: `inkra-transfer-${generatedId}-${side}-all` }) }), _jsx("ul", { className: "inkra-transfer__list", "aria-labelledby": titleId, children: shown.length === 0 ? _jsx("li", { className: "inkra-transfer__empty", children: empty }) : shown.map(item => {
                         const itemDisabled = disabled || item.disabled === true;
                         const itemSelected = selected[side].has(item.id);
                         const copy = renderItem?.(item, { side, selected: itemSelected, disabled: itemDisabled, query: queries[side] }) ?? itemCopy(item);
@@ -164,11 +231,11 @@ export const Transfer = forwardRef(function Transfer({ className, defaultTargetK
                                             itemRefs.current.set(key, element);
                                         else
                                             itemRefs.current.delete(key);
-                                    }, seed: `inkra-transfer-${generatedId}-${side}-${item.id}` }), _jsx(Button, { "aria-label": `${moveLabel}: ${typeof item.label === 'string' || typeof item.label === 'number' ? String(item.label) : item.searchText ?? item.id}`, disabled: itemDisabled, onClick: () => move([item.id], direction, 'single'), seed: `inkra-transfer-${generatedId}-${side}-${item.id}-move`, size: "icon-sm", title: moveLabel, variant: "ghost", children: _jsx(PencilIcon, { className: "inkra-transfer__direction-icon", decorative: true, paths: source ? rightPaths : leftPaths, size: 18, sourceSize: 24 }) })] }, item.id);
-                    }) })] });
+                                    }, seed: `inkra-transfer-${generatedId}-${side}-${item.id}` }), _jsx(Button, { "aria-label": `${moveLabel}: ${typeof item.label === 'string' || typeof item.label === 'number' ? String(item.label) : item.searchText ?? item.id}`, disabled: itemDisabled, onClick: event => move([item.id], direction, 'single', event.currentTarget), seed: `inkra-transfer-${generatedId}-${side}-${item.id}-move`, size: "icon-sm", title: moveLabel, variant: "ghost", children: _jsx(PencilIcon, { className: "inkra-transfer__direction-icon", "data-direction": direction, decorative: true, paths: rightPaths, size: 18, sourceSize: 24 }) })] }, item.id);
+                    }) }), pageLength !== undefined && _jsxs("nav", { "aria-label": typeof panelTitle === 'string' ? panelTitle : undefined, children: [_jsx(Button, { size: "sm", variant: "ghost", "aria-label": labels.previousPage, disabled: disabled || pageIndex(side, (source ? visibleSource : visibleTarget).length) === 0, onClick: () => setPages(current => ({ ...current, [side]: pageIndex(side, (source ? visibleSource : visibleTarget).length) - 1 })), children: labels.previousPage }), _jsx("span", { "aria-live": "polite", children: pageLabel((source ? visibleSource : visibleTarget).length === 0 ? 0 : pageIndex(side, (source ? visibleSource : visibleTarget).length) + 1, Math.ceil((source ? visibleSource : visibleTarget).length / pageLength)) }), _jsx(Button, { size: "sm", variant: "ghost", "aria-label": labels.nextPage, disabled: disabled || (pageIndex(side, (source ? visibleSource : visibleTarget).length) + 1) * pageLength >= (source ? visibleSource : visibleTarget).length, onClick: () => setPages(current => ({ ...current, [side]: pageIndex(side, (source ? visibleSource : visibleTarget).length) + 1 })), children: labels.nextPage })] })] });
     };
     const sourceBatchKeys = selectableVisible('source').filter(item => selected.source.has(item.id)).map(item => item.id);
     const targetBatchKeys = selectableVisible('target').filter(item => selected.target.has(item.id)).map(item => item.id);
-    return _jsxs("div", { ...props, "aria-disabled": disabled || undefined, className: ['inkra-transfer', className].filter(Boolean).join(' '), "data-disabled": disabled || undefined, ref: ref, children: [renderPanel('source'), _jsxs("div", { className: "inkra-transfer__actions", role: "group", "aria-label": labels.batchActions, children: [_jsx(Button, { "aria-label": labels.moveSelectedToTarget, disabled: disabled || sourceBatchKeys.length === 0, onClick: () => move(sourceBatchKeys, 'to-target', 'batch'), seed: `inkra-transfer-${generatedId}-batch-target`, size: "icon", title: labels.moveSelectedToTarget, variant: "outline", children: _jsx(PencilIcon, { className: "inkra-transfer__direction-icon", decorative: true, paths: rightPaths, size: 20, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels.moveSelectedToSource, disabled: disabled || targetBatchKeys.length === 0, onClick: () => move(targetBatchKeys, 'to-source', 'batch'), seed: `inkra-transfer-${generatedId}-batch-source`, size: "icon", title: labels.moveSelectedToSource, variant: "outline", children: _jsx(PencilIcon, { className: "inkra-transfer__direction-icon", decorative: true, paths: leftPaths, size: 20, sourceSize: 24 }) })] }), renderPanel('target')] });
+    return _jsx("div", { ...props, "aria-disabled": disabled || undefined, className: ['inkra-transfer', className].filter(Boolean).join(' '), "data-disabled": disabled || undefined, ref: ref, children: _jsxs("div", { className: "inkra-transfer__layout", children: [renderPanel('source'), _jsxs("div", { className: "inkra-transfer__actions", role: "group", "aria-label": labels.batchActions, children: [_jsx(Button, { "aria-label": labels.moveSelectedToTarget, disabled: disabled || sourceBatchKeys.length === 0, onClick: event => move(sourceBatchKeys, 'to-target', 'batch', event.currentTarget), seed: `inkra-transfer-${generatedId}-batch-target`, size: "icon", title: labels.moveSelectedToTarget, variant: "outline", children: _jsx(PencilIcon, { className: "inkra-transfer__direction-icon", "data-direction": "to-target", decorative: true, paths: rightPaths, size: 20, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels.moveSelectedToSource, disabled: disabled || targetBatchKeys.length === 0, onClick: event => move(targetBatchKeys, 'to-source', 'batch', event.currentTarget), seed: `inkra-transfer-${generatedId}-batch-source`, size: "icon", title: labels.moveSelectedToSource, variant: "outline", children: _jsx(PencilIcon, { className: "inkra-transfer__direction-icon", "data-direction": "to-source", decorative: true, paths: rightPaths, size: 20, sourceSize: 24 }) })] }), renderPanel('target')] }) });
 });
 export { moveTransferKeys, normalizeTargetKeys, splitTransferItems, uniqueTransferItems } from './model.js';

package/dist/transfer/model.d.ts

@@ -1,8 +1,12 @@
 export type TransferDirection = 'to-target' | 'to-source';
 export type TransferSide = 'source' | 'target';
+export type TransferFocusIntent = 'wait' | 'cancel' | 'focus';
+export type TransferValueResolution = 'unchanged' | 'accepted' | 'mismatch';
 export interface TransferIdentity {
     id: string;
 }
+export declare function resolveTransferFocusIntent(valueResolution: TransferValueResolution, originOwnsFocus: boolean, originUnavailable: boolean): TransferFocusIntent;
+export declare function transferKeysEqual(left: readonly string[], right: readonly string[]): boolean;
 export declare function uniqueTransferItems<Item extends TransferIdentity>(items: readonly Item[]): Item[];
 export declare function normalizeTargetKeys<Item extends TransferIdentity>(items: readonly Item[], targetKeys: readonly string[]): string[];
 export declare function splitTransferItems<Item extends TransferIdentity>(items: readonly Item[], targetKeys: readonly string[]): {

package/dist/transfer/model.js

@@ -1,3 +1,13 @@
+export function resolveTransferFocusIntent(valueResolution, originOwnsFocus, originUnavailable) {
+    if (valueResolution === 'mismatch')
+        return 'cancel';
+    if (valueResolution === 'unchanged')
+        return originOwnsFocus || originUnavailable ? 'wait' : 'cancel';
+    return originOwnsFocus || originUnavailable ? 'focus' : 'cancel';
+}
+export function transferKeysEqual(left, right) {
+    return left.length === right.length && left.every((key, index) => key === right[index]);
+}
 export function uniqueTransferItems(items) {
     const seen = new Set();
     return items.filter(item => {
@@ -8,20 +18,36 @@ export function uniqueTransferItems(items) {
     });
 }
 export function normalizeTargetKeys(items, targetKeys) {
-    const uniqueItems = uniqueTransferItems(items);
     const requested = new Set(targetKeys);
-    const knownIds = new Set(uniqueItems.map(item => item.id));
-    const orderedKnown = uniqueItems.filter(item => requested.has(item.id)).map(item => item.id);
-    const unknown = targetKeys.filter((key, index) => !knownIds.has(key) && targetKeys.indexOf(key) === index);
-    return [...orderedKnown, ...unknown];
+    const knownIds = new Set();
+    const orderedKnown = [];
+    for (const item of items) {
+        if (knownIds.has(item.id))
+            continue;
+        knownIds.add(item.id);
+        if (requested.has(item.id))
+            orderedKnown.push(item.id);
+    }
+    // Set iteration preserves the first occurrence of unknown controlled keys,
+    // without scanning the entire key array for each unknown key.
+    for (const key of requested) {
+        if (!knownIds.has(key))
+            orderedKnown.push(key);
+    }
+    return orderedKnown;
 }
 export function splitTransferItems(items, targetKeys) {
-    const target = new Set(targetKeys);
-    const uniqueItems = uniqueTransferItems(items);
-    return {
-        source: uniqueItems.filter(item => !target.has(item.id)),
-        target: uniqueItems.filter(item => target.has(item.id)),
-    };
+    const targetKeysSet = new Set(targetKeys);
+    const seen = new Set();
+    const source = [];
+    const target = [];
+    for (const item of items) {
+        if (seen.has(item.id))
+            continue;
+        seen.add(item.id);
+        (targetKeysSet.has(item.id) ? target : source).push(item);
+    }
+    return { source, target };
 }
 export function moveTransferKeys(items, targetKeys, movedKeys, direction) {
     const next = new Set(targetKeys);

package/dist/tree/index.d.ts

@@ -6,18 +6,22 @@ export type TreeRootProps<T extends object = object> = Omit<AriaTreeProps<T>, 'c
     className?: string;
     style?: CSSProperties;
     emptyState?: ReactNode;
+    /** Indentation per level in CSS pixels. Nonfinite values use 24. */
+    indent?: number;
+    size?: 'sm' | 'md' | 'lg';
 };
 export type TreeItemProps<T = object> = Omit<AriaTreeItemProps<T>, 'className'> & {
     className?: string;
 };
 export interface TreeItemContentState {
+    level: number;
     isExpanded: boolean;
     hasChildItems: boolean;
     isSelected: boolean;
     isDisabled: boolean;
 }
 export interface TreeItemContentProps {
-    children: ReactNode;
+    children: ReactNode | ((state: TreeItemContentState) => ReactNode);
     className?: string;
     icon?: ReactNode | ((state: TreeItemContentState) => ReactNode);
     disclosureIcon?: ReactNode | ((state: TreeItemContentState) => ReactNode);

package/dist/tree/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { Tree as AriaTree, TreeItem as AriaTreeItem, TreeItemContent as AriaTreeItemContent, } from 'react-aria-components/Tree';
 import { Button as AriaButton } from 'react-aria-components/Button';
 import { forwardRef } from 'react';
@@ -6,26 +7,30 @@ import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 const chevronIcon = [{ d: 'M 7 10 L 12 15 L 17 10' }];
-function TreeRootInner({ className, emptyState = 'No items', selectionMode = 'single', selectionBehavior = 'toggle', ...props }, ref) {
-    return _jsx(AriaTree, { ...props, ref: ref, className: ['inkra-tree', className].filter(Boolean).join(' '), selectionMode: selectionMode, selectionBehavior: selectionBehavior, renderEmptyState: () => _jsx("div", { className: "inkra-tree__empty", children: emptyState }) });
+function TreeRootInner(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { className, style, indent = 24, size = 'md', emptyState = t('common.noItems'), selectionMode = 'single', selectionBehavior = 'toggle', ...props } = inkraProps;
+    return _jsx(AriaTree, { ...props, ref: ref, className: ['inkra-tree', className].filter(Boolean).join(' '), "data-size": size, style: { '--inkra-tree-indent': `${Number.isFinite(indent) ? Math.max(0, indent) : 24}px`, ...style }, selectionMode: selectionMode, selectionBehavior: selectionBehavior, renderEmptyState: () => _jsx("div", { className: "inkra-tree__empty", children: emptyState }) });
 }
 const TreeRoot = forwardRef(TreeRootInner);
 const TreeItem = forwardRef(function TreeItem({ className, ...props }, ref) {
     return _jsx(AriaTreeItem, { ...props, ref: ref, className: ['inkra-tree__item', className].filter(Boolean).join(' ') });
 });
-const TreeItemContent = forwardRef(function TreeItemContent({ children, className, icon, disclosureIcon, expandLabel = 'Expand item', collapseLabel = 'Collapse item', }, ref) {
+const TreeItemContent = forwardRef(function TreeItemContent(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { children, className, icon, disclosureIcon, expandLabel = t('tree.expand'), collapseLabel = t('tree.collapse'), } = inkraProps;
     return _jsx(AriaTreeItemContent, { ref: ref, children: ({ hasChildItems, isExpanded, isSelected, isFocusVisible, isDisabled, level, id, }) => {
-            const state = { isExpanded, hasChildItems, isSelected, isDisabled };
+            const state = { isExpanded, hasChildItems, isSelected, isDisabled, level };
             const resolvedIcon = typeof icon === 'function' ? icon(state) : icon;
             const resolvedDisclosure = typeof disclosureIcon === 'function' ? disclosureIcon(state) : disclosureIcon;
-            return _jsxs("div", { className: ['inkra-tree__item-content', className].filter(Boolean).join(' '), "data-expanded": isExpanded || undefined, "data-selected": isSelected || undefined, "data-disabled": isDisabled || undefined, "data-has-icon": resolvedIcon != null || undefined, style: { '--inkra-tree-level': level }, children: [isSelected && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-tree__selection", variant: "selection", seed: `tree-${String(id)}-selection` }), isFocusVisible && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-tree__focus", variant: "outline", seed: `tree-${String(id)}-focus` }), hasChildItems ? _jsx(AriaButton, { slot: "chevron", className: "inkra-tree__disclosure", "aria-label": isExpanded ? collapseLabel : expandLabel, children: ({ isFocusVisible: disclosureFocused }) => _jsxs(_Fragment, { children: [disclosureFocused && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-tree__disclosure-focus", variant: "outline" }), _jsx("span", { className: "inkra-tree__disclosure-icon", "aria-hidden": "true", children: disclosureIcon === undefined ? _jsx(PencilIcon, { className: "inkra-tree__chevron", paths: chevronIcon, size: 18, sourceSize: 24 }) : resolvedDisclosure })] }) }) : _jsx("span", { className: "inkra-tree__disclosure-spacer", "aria-hidden": "true" }), resolvedIcon != null && _jsx("span", { className: "inkra-tree__icon", "aria-hidden": "true", children: resolvedIcon }), _jsx("span", { className: "inkra-tree__copy", children: children })] });
+            return _jsxs("div", { className: ['inkra-tree__item-content', className].filter(Boolean).join(' '), "data-expanded": isExpanded || undefined, "data-selected": isSelected || undefined, "data-disabled": isDisabled || undefined, "data-has-icon": resolvedIcon != null || undefined, style: { '--inkra-tree-level': level }, children: [isSelected && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-tree__selection", variant: "selection", seed: `tree-${String(id)}-selection` }), isFocusVisible && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-tree__focus", variant: "outline", seed: `tree-${String(id)}-focus` }), hasChildItems ? _jsx(AriaButton, { slot: "chevron", className: "inkra-tree__disclosure", "aria-label": isExpanded ? collapseLabel : expandLabel, children: ({ isFocusVisible: disclosureFocused }) => _jsxs(_Fragment, { children: [disclosureFocused && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-tree__disclosure-focus", variant: "outline" }), _jsx("span", { className: "inkra-tree__disclosure-icon", "aria-hidden": "true", children: disclosureIcon === undefined ? _jsx(PencilIcon, { className: "inkra-tree__chevron", paths: chevronIcon, size: 18, sourceSize: 24 }) : resolvedDisclosure })] }) }) : _jsx("span", { className: "inkra-tree__disclosure-spacer", "aria-hidden": "true" }), resolvedIcon != null && _jsx("span", { className: "inkra-tree__icon", "aria-hidden": "true", children: resolvedIcon }), _jsx("span", { className: "inkra-tree__copy", children: typeof children === 'function' ? children(state) : children })] });
         } });
 });
 const TreeItemTitle = forwardRef(function TreeItemTitle({ className, children, ...props }, ref) {
     return _jsx("span", { ...props, ref: ref, className: ['inkra-tree__title', className].filter(Boolean).join(' '), children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children });
 });
 const TreeItemDescription = forwardRef(function TreeItemDescription({ className, children, ...props }, ref) {
-    return _jsx("span", { ...props, ref: ref, className: ['inkra-tree__description', className].filter(Boolean).join(' '), children: children });
+    return _jsx("span", { ...props, ref: ref, className: ['inkra-tree__description', className].filter(Boolean).join(' '), children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children });
 });
 export const Tree = {
     Root: TreeRoot,

package/dist/tree-select/index.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { forwardRef, useEffect, useId, useMemo, useRef, useState, } from 'react';
-import { Button } from '../Button.js';
+import { Button, ButtonGroup } from '../Button.js';
 import { Input } from '../form/Input.js';
 import { mergeAriaIds, useFieldContext } from '../form/context.js';
 import { PencilIcon } from '../PencilIcon.js';
 import { PencilText } from '../PencilText.js';
 import { Popover } from '../overlay/index.js';
 import { Tree } from '../tree/index.js';
-import { filterTreeSelectNodes, indexTreeSelectNodes, updateTreeSelectSelection, } from './model.js';
+import { filterTreeSelectNodesFromIndex, indexTreeSelectNodes, updateTreeSelectSelectionFromIndex, } from './model.js';
 const chevronPaths = [{ d: 'M6 9l6 6 6-6' }];
 const clearPaths = [{ d: 'M6 6l12 12M18 6L6 18' }];
 const searchPaths = [{ d: 'M21 21l-4.5-4.5' }, { d: 'M18 10a8 8 0 1 1-16 0a8 8 0 1 1 16 0' }];
@@ -20,8 +21,44 @@ function selectionFromProps(props, fallback = []) {
 function keys(selection) {
     return selection === 'all' ? [] : [...selection].map(String);
 }
+// The portal owns mounting (including its exit animation). Keep collection
+// construction here rather than doing work for content the portal never mounts.
+const TreeSelectTree = forwardRef(function TreeSelectTree({ nodes, renderLabel, selectedSet, query, collapseLabel, expandLabel, treeLabel, emptyContent, effectiveExpanded, onExpandedChange, onSelectionChange, multiple, }, ref) {
+    // Default labels are selection-independent; only custom label renderers need
+    // a new collection when the selected keys change.
+    const labelSelection = renderLabel ? selectedSet : undefined;
+    const treeItems = useMemo(() => {
+        // Construct the same nested tree without growing the JavaScript call stack.
+        // Enter jobs keep renderLabel callbacks in the original depth-first order.
+        const result = [];
+        const stack = [];
+        for (let index = nodes.length - 1; index >= 0; index--)
+            stack.push({ node: nodes[index], output: result });
+        while (stack.length) {
+            const { node, output, finish } = stack.pop();
+            if (finish) {
+                output.push(_jsxs(Tree.Item, { className: "inkra-tree-select__item", id: node.id, isDisabled: node.disabled, textValue: node.label, children: [_jsxs(Tree.ItemContent, { collapseLabel: collapseLabel, expandLabel: expandLabel, children: [_jsx(Tree.ItemTitle, { children: finish.label }), node.description ? _jsx(Tree.ItemDescription, { children: node.description }) : null] }), node.children?.length ? finish.children : null] }, node.id));
+                continue;
+            }
+            const label = renderLabel?.(node, {
+                branch: Boolean(node.children?.length),
+                disabled: Boolean(node.disabled),
+                selected: labelSelection?.has(node.id) ?? false,
+                query,
+            }) ?? node.label;
+            const children = [];
+            stack.push({ node, output, finish: { label, children } });
+            for (let index = (node.children?.length ?? 0) - 1; index >= 0; index--) {
+                stack.push({ node: node.children[index], output: children });
+            }
+        }
+        return result;
+    }, [nodes, renderLabel, labelSelection, query, collapseLabel, expandLabel]);
+    return _jsx(Tree.Root, { "aria-label": treeLabel, className: "inkra-tree-select__tree", emptyState: emptyContent, expandedKeys: effectiveExpanded, onExpandedChange: onExpandedChange, onSelectionChange: onSelectionChange, ref: ref, selectedKeys: selectedSet, selectionMode: multiple ? 'multiple' : 'single', children: treeItems });
+});
 export const TreeSelect = forwardRef(function TreeSelect(props, ref) {
-    const { items, branchSelection = 'leaf', selectionPropagation = 'none', renderLabel, renderValue, placeholder = 'Select an item', searchPlaceholder = 'Search tree', emptyContent = 'No matching items', clearable = true, clearLabel = 'Clear selection', treeLabel = 'Tree options', expandLabel = 'Expand item', collapseLabel = 'Collapse item', size = 'md', name, form, disabled, readOnly, required, invalid, open: controlledOpen, defaultOpen = false, onOpenChange, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, id, className, multiple: _multiple, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest } = props;
+    const { t } = useInkraLocale();
+    const { items, branchSelection = 'leaf', selectionPropagation = 'none', renderLabel, renderValue, placeholder = t('treeSelect.placeholder'), searchPlaceholder = t('treeSelect.search'), emptyContent = t('treeSelect.empty'), clearable = true, clearLabel = t('select.clear'), treeLabel = t('treeSelect.options'), expandLabel = t('tree.expand'), collapseLabel = t('tree.collapse'), size = 'md', name, form, disabled, readOnly, required, invalid, open: controlledOpen, defaultOpen = false, onOpenChange, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, id, className, multiple: _multiple, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest } = props;
     const field = useFieldContext();
     const generatedId = useId();
     const controlId = field?.controlId ?? id ?? `inkra-tree-select-${generatedId}`;
@@ -31,25 +68,25 @@ export const TreeSelect = forwardRef(function TreeSelect(props, ref) {
     const resolvedInvalid = Boolean(invalid || field?.invalid);
     const describedBy = mergeAriaIds(ariaDescribedBy, field?.descriptionId, field?.errorId);
     const normalized = useMemo(() => indexTreeSelectNodes(items), [items]);
-    const defaultSelection = useRef(selectionFromProps(props));
     const controlledSelection = props.value !== undefined;
-    const [uncontrolledSelection, setUncontrolledSelection] = useState(defaultSelection.current);
-    const selectedIds = controlledSelection ? selectionFromProps(props) : uncontrolledSelection;
+    const [uncontrolledSelection, setUncontrolledSelection] = useState(() => selectionFromProps(props));
+    const defaultSelection = useRef(uncontrolledSelection);
+    const selectedIds = useMemo(() => controlledSelection ? selectionFromProps(props) : uncontrolledSelection, [controlledSelection, props.value, props.multiple, uncontrolledSelection]);
     const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
     const isOpen = controlledOpen ?? uncontrolledOpen;
     const [uncontrolledExpanded, setUncontrolledExpanded] = useState(() => [...new Set(defaultExpandedIds)]);
     const baseExpanded = expandedIds ?? uncontrolledExpanded;
     const [query, setQuery] = useState('');
-    const filtered = useMemo(() => filterTreeSelectNodes(normalized.nodes, query), [normalized.nodes, query]);
+    const filtered = useMemo(() => filterTreeSelectNodesFromIndex(normalized, query), [normalized, query]);
     const effectiveExpanded = useMemo(() => new Set([...baseExpanded, ...filtered.expandedIds]), [baseExpanded, filtered.expandedIds]);
     const triggerRef = useRef(null);
     const searchRef = useRef(null);
     const treeRef = useRef(null);
     const formAnchorRef = useRef(null);
-    const selectedNodes = selectedIds
+    const selectedNodes = useMemo(() => selectedIds
         .map(selectedId => normalized.byId.get(selectedId))
-        .filter((node) => node !== undefined);
+        .filter((node) => node !== undefined), [selectedIds, normalized]);
     const setOpen = (next) => {
         if (resolvedDisabled || resolvedReadOnly)
             return;
@@ -68,20 +105,28 @@ export const TreeSelect = forwardRef(function TreeSelect(props, ref) {
             props.onValueChange?.(next[0] ?? null, details);
     };
     useEffect(() => {
-        if (controlledSelection)
-            return;
         const currentForm = formAnchorRef.current?.form;
         if (!currentForm)
             return;
-        const reset = () => {
-            setUncontrolledSelection(defaultSelection.current);
-            setQuery('');
-            if (controlledOpen === undefined)
-                setUncontrolledOpen(false);
+        let resetTimer;
+        const reset = (event) => {
+            clearTimeout(resetTimer);
+            resetTimer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                if (!controlledSelection)
+                    setUncontrolledSelection(defaultSelection.current);
+                setQuery('');
+                if (controlledOpen === undefined)
+                    setUncontrolledOpen(false);
+            }, 0);
         };
         currentForm.addEventListener('reset', reset);
-        return () => currentForm.removeEventListener('reset', reset);
-    }, [controlledOpen, controlledSelection]);
+        return () => {
+            clearTimeout(resetTimer);
+            currentForm.removeEventListener('reset', reset);
+        };
+    }, [controlledOpen, controlledSelection, form]);
     const handleSelectionChange = (nextSelection) => {
         if (resolvedDisabled || resolvedReadOnly)
             return;
@@ -92,7 +137,7 @@ export const TreeSelect = forwardRef(function TreeSelect(props, ref) {
         if (!toggledId)
             return;
         const selected = added === toggledId;
-        const next = updateTreeSelectSelection(normalized.nodes, selectedIds, toggledId, selected, {
+        const next = updateTreeSelectSelectionFromIndex(normalized, selectedIds, toggledId, selected, {
             multiple: Boolean(props.multiple),
             branchSelection,
             selectionPropagation,
@@ -120,23 +165,17 @@ export const TreeSelect = forwardRef(function TreeSelect(props, ref) {
         event.preventDefault();
         treeRef.current?.focus();
     };
-    const renderNodes = (nodes) => nodes.map(node => {
-        const branch = Boolean(node.children?.length);
-        const label = renderLabel?.(node, {
-            branch,
-            disabled: Boolean(node.disabled),
-            selected: selectedSet.has(node.id),
-            query,
-        }) ?? node.label;
-        return _jsxs(Tree.Item, { className: "inkra-tree-select__item", id: node.id, isDisabled: node.disabled, textValue: node.label, children: [_jsxs(Tree.ItemContent, { collapseLabel: collapseLabel, expandLabel: expandLabel, children: [_jsx(Tree.ItemTitle, { children: label }), node.description ? _jsx(Tree.ItemDescription, { children: node.description }) : null] }), node.children?.length ? renderNodes(node.children) : null] }, node.id);
-    });
     const fallbackValue = selectedIds.map(selectedId => normalized.byId.get(selectedId)?.label ?? selectedId).join(', ');
     const valueContent = renderValue?.(selectedNodes, selectedIds)
         ?? (fallbackValue ? _jsx(PencilText, { ellipsis: true, children: fallbackValue }) : _jsx(PencilText, { ellipsis: true, children: placeholder }));
     const indicatorSize = size === 'sm' ? 24 : size === 'lg' ? 32 : 28;
     const exposedOpen = resolvedDisabled || resolvedReadOnly ? false : isOpen;
-    return _jsxs("div", { ...rest, className: ['inkra-tree-select', className].filter(Boolean).join(' '), "data-disabled": resolvedDisabled || undefined, "data-invalid": resolvedInvalid || undefined, "data-readonly": resolvedReadOnly || undefined, "data-size": size, ref: ref, children: [_jsxs(Popover.Root, { open: exposedOpen, onOpenChange: setOpen, children: [_jsxs("div", { className: "inkra-tree-select__control", children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { "aria-describedby": describedBy, "aria-invalid": resolvedInvalid || undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-readonly": resolvedReadOnly || undefined, "aria-required": resolvedRequired || undefined, className: "inkra-tree-select__trigger", disabled: resolvedDisabled, endIcon: _jsx(PencilIcon, { paths: chevronPaths, size: indicatorSize, sourceSize: 24 }), fullWidth: true, id: controlId, ref: triggerRef, size: size, variant: "outline", children: _jsx("span", { className: "inkra-tree-select__value", "data-placeholder": !selectedIds.length || undefined, children: valueContent }) }) }), clearable ? _jsx(Button, { "aria-label": clearLabel, className: "inkra-tree-select__clear", "data-visible": selectedIds.length > 0 || undefined, disabled: resolvedDisabled || resolvedReadOnly || selectedIds.length === 0, onClick: () => emitSelection([], { reason: 'clear' }), size: size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon', tabIndex: selectedIds.length ? undefined : -1, variant: "ghost", children: _jsx(PencilIcon, { paths: clearPaths, size: 24, sourceSize: 24 }) }) : null] }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: align, "aria-label": treeLabel, className: "inkra-tree-select__popover", collisionPadding: collisionPadding, onOpenAutoFocus: (event) => {
+    return _jsxs("div", { ...rest, className: ['inkra-tree-select', className].filter(Boolean).join(' '), "data-disabled": resolvedDisabled || undefined, "data-invalid": resolvedInvalid || undefined, "data-readonly": resolvedReadOnly || undefined, "data-size": size, ref: ref, children: [_jsxs(Popover.Root, { open: exposedOpen, onOpenChange: setOpen, children: [_jsxs(ButtonGroup, { "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : treeLabel), "aria-labelledby": ariaLabelledBy, className: "inkra-tree-select__control", "data-size": size, disabled: resolvedDisabled, fullWidth: true, size: size, variant: "outline", children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { "aria-describedby": describedBy, "aria-invalid": resolvedInvalid || undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-readonly": resolvedReadOnly || undefined, "aria-required": resolvedRequired || undefined, className: "inkra-tree-select__trigger", disabled: resolvedDisabled, endIcon: _jsx(PencilIcon, { paths: chevronPaths, size: indicatorSize, sourceSize: 24 }), fullWidth: true, id: controlId, ref: triggerRef, size: size, children: _jsx("span", { className: "inkra-tree-select__value", "data-placeholder": !selectedIds.length || undefined, children: valueContent }) }) }), clearable ? _jsx(Button, { "aria-hidden": !selectedIds.length || undefined, "aria-label": clearLabel, className: "inkra-tree-select__clear", disabled: resolvedDisabled || resolvedReadOnly || selectedIds.length === 0, onPointerDown: event => event.preventDefault(), onClick: () => {
+                                    emitSelection([], { reason: 'clear' });
+                                    setOpen(false);
+                                    triggerRef.current?.focus({ preventScroll: true });
+                                }, size: size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon', tabIndex: selectedIds.length ? undefined : -1, variant: "ghost", children: _jsx(PencilIcon, { paths: clearPaths, size: 24, sourceSize: 24 }) }) : null] }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: align, "aria-label": treeLabel, className: "inkra-tree-select__popover", collisionPadding: collisionPadding, onOpenAutoFocus: (event) => {
                                 event.preventDefault();
                                 searchRef.current?.focus();
-                            }, side: side, sideOffset: sideOffset, children: [_jsx("div", { className: "inkra-tree-select__search", children: _jsx(Input, { "aria-label": searchPlaceholder, clearable: true, clearButtonLabel: clearLabel, onKeyDown: handleSearchKeyDown, onValueChange: setQuery, placeholder: searchPlaceholder, ref: searchRef, size: size, startIcon: _jsx(PencilIcon, { paths: searchPaths, size: 22, sourceSize: 24 }), type: "search", value: query, variant: "underline" }) }), _jsx(Tree.Root, { "aria-label": treeLabel, className: "inkra-tree-select__tree", emptyState: emptyContent, expandedKeys: effectiveExpanded, onExpandedChange: handleExpandedChange, onSelectionChange: handleSelectionChange, ref: treeRef, selectedKeys: new Set(selectedIds), selectionMode: props.multiple ? 'multiple' : 'single', children: renderNodes(filtered.nodes) })] }) })] }), _jsx("input", { "aria-hidden": "true", className: "inkra-tree-select__form-anchor", form: form, ref: formAnchorRef, tabIndex: -1, type: "hidden" }), name && !resolvedDisabled ? selectedIds.map(selectedId => _jsx("input", { form: form, name: name, type: "hidden", value: selectedId }, selectedId)) : null] });
+                            }, side: side, sideOffset: sideOffset, children: [_jsx("div", { className: "inkra-tree-select__search", children: _jsx(Input, { "aria-label": searchPlaceholder, clearable: true, clearButtonLabel: clearLabel, onKeyDown: handleSearchKeyDown, onValueChange: setQuery, placeholder: searchPlaceholder, ref: searchRef, size: size, startIcon: _jsx(PencilIcon, { paths: searchPaths, size: 22, sourceSize: 24 }), type: "search", value: query, variant: "underline" }) }), _jsx(TreeSelectTree, { collapseLabel: collapseLabel, effectiveExpanded: effectiveExpanded, emptyContent: emptyContent, expandLabel: expandLabel, multiple: Boolean(props.multiple), nodes: filtered.nodes, onExpandedChange: handleExpandedChange, onSelectionChange: handleSelectionChange, query: query, ref: treeRef, renderLabel: renderLabel, selectedSet: selectedSet, treeLabel: treeLabel })] }) })] }), _jsx("input", { "aria-hidden": "true", className: "inkra-tree-select__form-anchor", form: form, ref: formAnchorRef, tabIndex: -1, type: "hidden" }), name && !resolvedDisabled ? selectedIds.map(selectedId => _jsx("input", { form: form, name: name, type: "hidden", value: selectedId }, selectedId)) : null] });
 });