@zvk/ui 0.1.9 → 0.1.12

package/dist/components/tags-input/tags-input.js

@@ -0,0 +1,132 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Field } from "../field/field.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { cn } from "../../utils/cn.js";
+const defaultDelimiterKeys = [",", "\n", "Enter"];
+function hasRenderableNode(value) {
+    return value !== undefined && value !== null && value !== false;
+}
+function joinIds(...ids) {
+    const value = ids.filter(Boolean).join(" ");
+    return value.length > 0 ? value : undefined;
+}
+function defaultNormalizeTag(value) {
+    return value.trim();
+}
+function splitByTextDelimiters(value, delimiterKeys) {
+    const delimiters = new Set(delimiterKeys.filter((delimiter) => delimiter.length === 1));
+    const parts = [];
+    let current = "";
+    for (const character of value) {
+        if (delimiters.has(character)) {
+            parts.push(current);
+            current = "";
+        }
+        else {
+            current += character;
+        }
+    }
+    parts.push(current);
+    return parts;
+}
+function tagKey(value) {
+    return value.toLocaleLowerCase();
+}
+export function TagsInput({ "aria-describedby": ariaDescribedBy, allowDuplicates = false, className, defaultValue = [], delimiterKeys = defaultDelimiterKeys, description, disabled, error, id, invalid, label, maxItems, name, normalizeTag = defaultNormalizeTag, onBlur, onFocus, onKeyDown, onValueChange, placeholder, ref, required, size = "md", validateTag, value, ...props }) {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const validationId = `${inputId}-validation`;
+    const hasLabel = hasRenderableNode(label);
+    const hasDescription = hasRenderableNode(description);
+    const hasError = hasRenderableNode(error);
+    const [validationMessage, setValidationMessage] = React.useState();
+    const invalidState = invalid || hasError || validationMessage !== undefined;
+    const descriptionId = hasDescription ? `${inputId}-description` : undefined;
+    const errorId = hasError ? `${inputId}-error` : undefined;
+    const describedBy = joinIds(ariaDescribedBy, descriptionId, errorId, validationMessage ? validationId : undefined);
+    const inputRef = React.useRef(null);
+    const [values, setValues] = useControllableState({
+        ...(value !== undefined ? { value: [...value] } : {}),
+        defaultValue: [...defaultValue],
+        ...(onValueChange ? { onChange: onValueChange } : {})
+    });
+    const [inputValue, setInputValue] = React.useState("");
+    React.useEffect(() => {
+        inputRef.current?.setCustomValidity(required && values.length === 0 ? "Add at least one tag" : "");
+    }, [required, values.length]);
+    function removeValue(index) {
+        setValues((currentValues) => currentValues.filter((_, valueIndex) => valueIndex !== index));
+        setValidationMessage(undefined);
+        inputRef.current?.focus();
+    }
+    function addCandidate(rawValue, currentValues) {
+        const nextValue = normalizeTag(rawValue);
+        if (nextValue.length === 0) {
+            return { nextValues: [...currentValues], added: false };
+        }
+        if (!allowDuplicates && currentValues.some((value) => tagKey(value) === tagKey(nextValue))) {
+            return { nextValues: [...currentValues], added: false, message: "Tag already exists" };
+        }
+        if (maxItems !== undefined && currentValues.length >= maxItems) {
+            return { nextValues: [...currentValues], added: false, message: `Maximum ${maxItems} tags` };
+        }
+        const customMessage = validateTag?.(nextValue, currentValues);
+        if (typeof customMessage === "string" && customMessage.length > 0) {
+            return { nextValues: [...currentValues], added: false, message: customMessage };
+        }
+        return { nextValues: [...currentValues, nextValue], added: true };
+    }
+    function commitRawValue(rawValue) {
+        const candidates = splitByTextDelimiters(rawValue, delimiterKeys);
+        let added = false;
+        let message;
+        setValues((currentValues) => {
+            let nextValues = [...currentValues];
+            for (const candidate of candidates) {
+                const result = addCandidate(candidate, nextValues);
+                nextValues = result.nextValues;
+                added = result.added || added;
+                message = result.message ?? message;
+            }
+            return nextValues;
+        });
+        setValidationMessage(message);
+        if (added) {
+            setInputValue("");
+        }
+        return added;
+    }
+    const input = (_jsxs("div", { className: "zvk-ui-tags-input__control", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-size": size, onClick: () => inputRef.current?.focus(), children: [values.map((tag, index) => (_jsxs("span", { className: "zvk-ui-tags-input__tag", children: [_jsx("span", { className: "zvk-ui-tags-input__tag-label", children: tag }), _jsx("button", { "aria-label": `Remove ${tag}`, className: "zvk-ui-tags-input__remove", disabled: disabled, onClick: () => removeValue(index), onMouseDown: (event) => event.preventDefault(), type: "button", children: "x" })] }, `${tag}-${index}`))), _jsx("input", { ...props, ref: (node) => {
+                    inputRef.current = node;
+                    if (typeof ref === "function") {
+                        ref(node);
+                    }
+                    else if (ref && "current" in ref) {
+                        ref.current = node;
+                    }
+                }, "aria-describedby": describedBy, "aria-invalid": invalidState ? "true" : undefined, className: cn("zvk-ui-tags-input__input", className), disabled: disabled, id: inputId, onBlur: onBlur, onChange: (event) => {
+                    const nextValue = event.currentTarget.value;
+                    setInputValue(nextValue);
+                    setValidationMessage(undefined);
+                }, onFocus: onFocus, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+                    if (delimiterKeys.includes(event.key)) {
+                        event.preventDefault();
+                        commitRawValue(inputValue);
+                        return;
+                    }
+                    if (event.key === "Backspace" && inputValue.length === 0 && values.length > 0) {
+                        event.preventDefault();
+                        removeValue(values.length - 1);
+                    }
+                }), onPaste: (event) => {
+                    const pastedValue = event.clipboardData.getData("text");
+                    if (splitByTextDelimiters(pastedValue, delimiterKeys).length > 1) {
+                        event.preventDefault();
+                        commitRawValue(pastedValue);
+                    }
+                }, placeholder: values.length === 0 ? placeholder : undefined, required: required && values.length === 0, value: inputValue }), name ? values.map((tag, index) => (_jsx("input", { name: name, type: "hidden", value: tag }, `${tag}-${index}`))) : null] }));
+    return (_jsxs(Field, { disabled: Boolean(disabled), invalid: invalidState, required: Boolean(required), children: [hasLabel ? _jsx(Field.Label, { htmlFor: inputId, children: label }) : null, input, hasDescription ? _jsx(Field.Description, { id: descriptionId, children: description }) : null, hasError ? _jsx(Field.Error, { id: errorId, children: error }) : null, validationMessage ? (_jsx(Field.Error, { id: validationId, children: validationMessage })) : null] }));
+}

package/dist/components/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export { Toolbar } from "./toolbar.js";
+export type { ToolbarButtonProps, ToolbarGroupProps, ToolbarOrientation, ToolbarProps, ToolbarSeparatorProps, ToolbarToggleProps } from "./toolbar.js";

package/dist/components/toolbar/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Toolbar } from "./toolbar.js";

package/dist/components/toolbar/toolbar.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+export type ToolbarOrientation = "horizontal" | "vertical";
+export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: ToolbarOrientation;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ToolbarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface ToolbarToggleProps extends Omit<ToolbarButtonProps, "aria-pressed"> {
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    pressed?: boolean;
+}
+export interface ToolbarSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: ToolbarOrientation;
+    ref?: React.Ref<HTMLDivElement>;
+}
+declare function ToolbarRoot({ className, onKeyDown, orientation, ref, role, ...props }: ToolbarProps): React.JSX.Element;
+declare function ToolbarGroup({ className, ref, role, ...props }: ToolbarGroupProps): React.JSX.Element;
+declare function ToolbarButton({ className, disabled, ref, tabIndex, type, ...props }: ToolbarButtonProps): React.JSX.Element;
+declare function ToolbarToggle({ className, defaultPressed, disabled, onClick, onPressedChange, pressed, ref, tabIndex, type, ...props }: ToolbarToggleProps): React.JSX.Element;
+declare function ToolbarSeparator({ className, orientation, ref, role, ...props }: ToolbarSeparatorProps): React.JSX.Element;
+export declare const Toolbar: typeof ToolbarRoot & {
+    Button: typeof ToolbarButton;
+    Group: typeof ToolbarGroup;
+    Separator: typeof ToolbarSeparator;
+    Toggle: typeof ToolbarToggle;
+};
+export {};

package/dist/components/toolbar/toolbar.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { cn } from "../../utils/cn.js";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+const toolbarControlSelector = '[data-zvk-ui-toolbar-control="true"]';
+function assignRef(ref, value) {
+    if (typeof ref === "function") {
+        ref(value);
+        return;
+    }
+    if (ref) {
+        ref.current = value;
+    }
+}
+function isEnabledToolbarControl(element) {
+    return element instanceof HTMLElement && !element.hasAttribute("disabled") && element.getAttribute("aria-disabled") !== "true";
+}
+function getToolbarControls(root) {
+    return Array.from(root.querySelectorAll(toolbarControlSelector)).filter(isEnabledToolbarControl);
+}
+function updateToolbarTabStops(root, activeControl) {
+    const allControls = Array.from(root.querySelectorAll(toolbarControlSelector)).filter((element) => element instanceof HTMLElement);
+    const enabledControls = allControls.filter(isEnabledToolbarControl);
+    const fallback = enabledControls[0] ?? null;
+    const active = activeControl && enabledControls.includes(activeControl) ? activeControl : fallback;
+    for (const control of allControls) {
+        control.tabIndex = control === active ? 0 : -1;
+    }
+}
+function moveToolbarFocus(root, target) {
+    updateToolbarTabStops(root, target);
+    target.focus();
+}
+function ToolbarRoot({ className, onKeyDown, orientation = "horizontal", ref, role = "toolbar", ...props }) {
+    const rootRef = React.useRef(null);
+    const handleRef = React.useCallback((node) => {
+        rootRef.current = node;
+        assignRef(ref, node);
+    }, [ref]);
+    React.useLayoutEffect(() => {
+        if (rootRef.current) {
+            updateToolbarTabStops(rootRef.current, document.activeElement instanceof HTMLElement ? document.activeElement : null);
+        }
+    });
+    return (_jsx("div", { ...props, ref: handleRef, "aria-orientation": orientation, className: cn("zvk-ui-toolbar", className), "data-orientation": orientation, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            const root = rootRef.current;
+            const currentControl = event.target instanceof HTMLElement ? event.target.closest(toolbarControlSelector) : null;
+            if (!root || !currentControl) {
+                return;
+            }
+            const controls = getToolbarControls(root);
+            const currentIndex = controls.indexOf(currentControl);
+            if (currentIndex === -1) {
+                return;
+            }
+            let nextIndex = currentIndex;
+            if (event.key === "Home") {
+                nextIndex = 0;
+            }
+            else if (event.key === "End") {
+                nextIndex = controls.length - 1;
+            }
+            else if (event.key === "ArrowRight" ||
+                event.key === "ArrowDown") {
+                nextIndex = Math.min(currentIndex + 1, controls.length - 1);
+            }
+            else if (event.key === "ArrowLeft" ||
+                event.key === "ArrowUp") {
+                nextIndex = Math.max(currentIndex - 1, 0);
+            }
+            else {
+                return;
+            }
+            event.preventDefault();
+            moveToolbarFocus(root, controls[nextIndex] ?? currentControl);
+        }), role: role }));
+}
+function ToolbarGroup({ className, ref, role = "group", ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-toolbar__group", className), role: role });
+}
+function ToolbarButton({ className, disabled, ref, tabIndex, type = "button", ...props }) {
+    return (_jsx("button", { ...props, ref: ref, className: cn("zvk-ui-toolbar__button", className), "data-disabled": disabled ? "true" : undefined, "data-zvk-ui-toolbar-control": "true", disabled: disabled, tabIndex: disabled ? -1 : tabIndex ?? -1, type: type }));
+}
+function ToolbarToggle({ className, defaultPressed = false, disabled, onClick, onPressedChange, pressed, ref, tabIndex, type = "button", ...props }) {
+    const [currentPressed, setPressed] = useControllableState({
+        ...(pressed !== undefined ? { value: pressed } : {}),
+        defaultValue: defaultPressed,
+        ...(onPressedChange ? { onChange: onPressedChange } : {})
+    });
+    return (_jsx("button", { ...props, ref: ref, "aria-pressed": currentPressed, className: cn("zvk-ui-toolbar__button", "zvk-ui-toolbar__toggle", className), "data-disabled": disabled ? "true" : undefined, "data-state": currentPressed ? "on" : "off", "data-zvk-ui-toolbar-control": "true", disabled: disabled, onClick: composeEventHandlers(onClick, () => {
+            if (!disabled) {
+                setPressed((value) => !value);
+            }
+        }), tabIndex: disabled ? -1 : tabIndex ?? -1, type: type }));
+}
+function ToolbarSeparator({ className, orientation = "vertical", ref, role = "separator", ...props }) {
+    return (_jsx("div", { ...props, ref: ref, "aria-orientation": orientation, className: cn("zvk-ui-toolbar__separator", className), "data-orientation": orientation, role: role }));
+}
+export const Toolbar = Object.assign(ToolbarRoot, {
+    Button: ToolbarButton,
+    Group: ToolbarGroup,
+    Separator: ToolbarSeparator,
+    Toggle: ToolbarToggle
+});

package/dist/components/tree-view/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeView } from "./tree-view.js";
+export type { TreeViewItemState, TreeViewProps, TreeViewSelectionMode } from "./tree-view.js";

package/dist/components/tree-view/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { TreeView } from "./tree-view.js";

package/dist/components/tree-view/tree-view.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { type CollectionSelectionMode } from "../../internal/collection/index.js";
+export type TreeViewSelectionMode = CollectionSelectionMode;
+export interface TreeViewItemState {
+    active: boolean;
+    branch: boolean;
+    disabled: boolean;
+    expanded: boolean;
+    id: string;
+    level: number;
+    selected: boolean;
+}
+export interface TreeViewProps<Item> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> {
+    activeKey?: string;
+    defaultActiveKey?: string;
+    defaultExpandedKeys?: readonly string[];
+    defaultSelectedKeys?: readonly string[];
+    expandedKeys?: readonly string[];
+    getItemChildren?: (item: Item) => readonly Item[] | undefined;
+    getItemId: (item: Item) => string;
+    getItemLabel: (item: Item) => string;
+    isItemDisabled?: (item: Item) => boolean;
+    items: readonly Item[];
+    onActiveKeyChange?: (key: string | undefined) => void;
+    onExpandedKeysChange?: (keys: string[]) => void;
+    onItemAction?: (key: string, item: Item) => void;
+    onSelectedKeysChange?: (keys: string[]) => void;
+    ref?: React.Ref<HTMLDivElement>;
+    renderItem?: (item: Item, state: TreeViewItemState) => React.ReactNode;
+    selectedKeys?: readonly string[];
+    selectionMode?: TreeViewSelectionMode;
+}
+export declare function TreeView<Item>({ activeKey, className, defaultActiveKey, defaultExpandedKeys, defaultSelectedKeys, expandedKeys, getItemChildren, getItemId, getItemLabel, isItemDisabled, items, onActiveKeyChange, onExpandedKeysChange, onItemAction, onKeyDown, onSelectedKeysChange, ref, renderItem, role, selectedKeys, selectionMode, ...props }: TreeViewProps<Item>): React.JSX.Element;

package/dist/components/tree-view/tree-view.js

@@ -0,0 +1,190 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { findTypeaheadKey, moveCollectionKey, normalizeSelectionKeys, toggleSelectionKey } from "../../internal/collection/index.js";
+import { cn } from "../../utils/cn.js";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+function flattenTreeItems({ expandedKeys, getItemChildren, getItemId, getItemLabel, isItemDisabled, items }) {
+    const expandedSet = new Set(expandedKeys);
+    function flattenSiblings(siblings, level, parentId) {
+        return siblings.flatMap((item, index) => {
+            const id = getItemId(item);
+            const children = getItemChildren?.(item) ?? [];
+            const branch = children.length > 0;
+            const expanded = branch && expandedSet.has(id);
+            const record = {
+                branch,
+                disabled: isItemDisabled?.(item) ?? false,
+                expanded,
+                id,
+                item,
+                label: getItemLabel(item),
+                level,
+                parentId,
+                posInSet: index + 1,
+                setSize: siblings.length
+            };
+            return expanded ? [record, ...flattenSiblings(children, level + 1, id)] : [record];
+        });
+    }
+    return flattenSiblings(items, 1, undefined);
+}
+export function TreeView({ activeKey, className, defaultActiveKey, defaultExpandedKeys = [], defaultSelectedKeys = [], expandedKeys, getItemChildren, getItemId, getItemLabel, isItemDisabled, items, onActiveKeyChange, onExpandedKeysChange, onItemAction, onKeyDown, onSelectedKeysChange, ref, renderItem, role = "tree", selectedKeys, selectionMode = "none", ...props }) {
+    const [currentExpandedKeys, setCurrentExpandedKeys] = useControllableState({
+        ...(expandedKeys !== undefined ? { value: normalizeSelectionKeys(expandedKeys) } : {}),
+        defaultValue: normalizeSelectionKeys(defaultExpandedKeys),
+        ...(onExpandedKeysChange ? { onChange: onExpandedKeysChange } : {})
+    });
+    const records = React.useMemo(() => flattenTreeItems({ expandedKeys: currentExpandedKeys, getItemChildren, getItemId, getItemLabel, isItemDisabled, items }), [currentExpandedKeys, getItemChildren, getItemId, getItemLabel, isItemDisabled, items]);
+    const navigationItems = records.map((record) => ({
+        disabled: record.disabled,
+        id: record.id,
+        textValue: record.label
+    }));
+    const firstEnabledKey = moveCollectionKey(navigationItems, undefined, "first");
+    const rowRefs = React.useRef(new Map());
+    const [currentActiveKey, setCurrentActiveKey] = useControllableState({
+        ...(activeKey !== undefined ? { value: activeKey } : {}),
+        defaultValue: defaultActiveKey ?? firstEnabledKey,
+        ...(onActiveKeyChange ? { onChange: onActiveKeyChange } : {})
+    });
+    const [currentSelectedKeys, setCurrentSelectedKeys] = useControllableState({
+        ...(selectedKeys !== undefined ? { value: normalizeSelectionKeys(selectedKeys) } : {}),
+        defaultValue: normalizeSelectionKeys(defaultSelectedKeys),
+        ...(onSelectedKeysChange ? { onChange: onSelectedKeysChange } : {})
+    });
+    const rovingActiveKey = currentActiveKey ?? firstEnabledKey;
+    React.useLayoutEffect(() => {
+        if (rovingActiveKey === undefined) {
+            return;
+        }
+        const activeRecord = records.find((record) => record.id === rovingActiveKey);
+        if (!activeRecord || activeRecord.disabled) {
+            setCurrentActiveKey(firstEnabledKey);
+        }
+    }, [firstEnabledKey, records, rovingActiveKey, setCurrentActiveKey]);
+    function focusItem(key) {
+        if (key === undefined) {
+            return;
+        }
+        rowRefs.current.get(key)?.focus();
+    }
+    function setExpanded(record, expanded) {
+        if (!record.branch) {
+            return;
+        }
+        setCurrentExpandedKeys((keys) => {
+            const normalizedKeys = normalizeSelectionKeys(keys);
+            if (expanded) {
+                return normalizedKeys.includes(record.id) ? normalizedKeys : [...normalizedKeys, record.id];
+            }
+            return normalizedKeys.filter((key) => key !== record.id);
+        });
+    }
+    function selectRecord(record) {
+        if (record.disabled) {
+            return;
+        }
+        setCurrentSelectedKeys((keys) => toggleSelectionKey(keys, record.id, selectionMode));
+    }
+    function moveActiveItem(movement) {
+        const nextKey = moveCollectionKey(navigationItems, rovingActiveKey, movement);
+        setCurrentActiveKey(nextKey);
+        focusItem(nextKey);
+    }
+    return (_jsx("div", { ...props, ref: ref, "aria-multiselectable": selectionMode === "multiple" ? true : undefined, className: cn("zvk-ui-tree-view", className), "data-selection-mode": selectionMode, onKeyDown: onKeyDown, role: role, children: records.map((record) => {
+            const selected = currentSelectedKeys.includes(record.id);
+            const active = rovingActiveKey === record.id;
+            const state = {
+                active,
+                branch: record.branch,
+                disabled: record.disabled,
+                expanded: record.expanded,
+                id: record.id,
+                level: record.level,
+                selected
+            };
+            const style = { "--zvk-ui-tree-view-indent": `${Math.max(record.level - 1, 0)}rem` };
+            return (_jsx("div", { ref: (node) => {
+                    if (node) {
+                        rowRefs.current.set(record.id, node);
+                    }
+                    else {
+                        rowRefs.current.delete(record.id);
+                    }
+                }, "aria-disabled": record.disabled ? "true" : undefined, "aria-expanded": record.branch ? (record.expanded ? "true" : "false") : undefined, "aria-level": record.level, "aria-posinset": record.posInSet, "aria-selected": selectionMode === "none" ? undefined : selected ? "true" : "false", "aria-setsize": record.setSize, className: "zvk-ui-tree-view__item", "data-active": active ? "true" : undefined, "data-disabled": record.disabled ? "true" : undefined, "data-expanded": record.branch ? (record.expanded ? "true" : "false") : undefined, "data-selected": selected ? "true" : undefined, onClick: () => {
+                    if (record.disabled) {
+                        return;
+                    }
+                    setCurrentActiveKey(record.id);
+                    onItemAction?.(record.id, record.item);
+                }, onFocus: () => {
+                    if (!record.disabled) {
+                        setCurrentActiveKey(record.id);
+                    }
+                }, onKeyDown: composeEventHandlers(undefined, (event) => {
+                    if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        moveActiveItem("next");
+                        return;
+                    }
+                    if (event.key === "ArrowUp") {
+                        event.preventDefault();
+                        moveActiveItem("previous");
+                        return;
+                    }
+                    if (event.key === "Home") {
+                        event.preventDefault();
+                        moveActiveItem("first");
+                        return;
+                    }
+                    if (event.key === "End") {
+                        event.preventDefault();
+                        moveActiveItem("last");
+                        return;
+                    }
+                    if (event.key === "ArrowRight") {
+                        event.preventDefault();
+                        if (record.branch && !record.expanded) {
+                            setExpanded(record, true);
+                            return;
+                        }
+                        const child = records.find((candidate) => candidate.parentId === record.id);
+                        setCurrentActiveKey(child?.id);
+                        focusItem(child?.id);
+                        return;
+                    }
+                    if (event.key === "ArrowLeft") {
+                        event.preventDefault();
+                        if (record.branch && record.expanded) {
+                            setExpanded(record, false);
+                            return;
+                        }
+                        setCurrentActiveKey(record.parentId);
+                        focusItem(record.parentId);
+                        return;
+                    }
+                    if (event.key === " ") {
+                        event.preventDefault();
+                        selectRecord(record);
+                        return;
+                    }
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        if (!record.disabled) {
+                            onItemAction?.(record.id, record.item);
+                        }
+                        return;
+                    }
+                    if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+                        const nextKey = findTypeaheadKey(navigationItems, record.id, event.key);
+                        if (nextKey !== undefined) {
+                            event.preventDefault();
+                            setCurrentActiveKey(nextKey);
+                            focusItem(nextKey);
+                        }
+                    }
+                }), role: "treeitem", style: style, tabIndex: record.disabled ? -1 : active ? 0 : -1, children: renderItem ? renderItem(record.item, state) : record.label }, record.id));
+        }) }));
+}

package/dist/internal/collection/index.d.ts

@@ -1,2 +1,4 @@
 export { createCollection } from "./collection.js";
 export type { Collection, CollectionItem } from "./collection.js";
+export { findTypeaheadKey, moveCollectionKey, normalizeSelectionKeys, toggleSelectionKey } from "./selection.js";
+export type { CollectionMovement, CollectionNavigationItem, CollectionSelectionMode } from "./selection.js";

package/dist/internal/collection/index.js

@@ -1 +1,2 @@
 export { createCollection } from "./collection.js";
+export { findTypeaheadKey, moveCollectionKey, normalizeSelectionKeys, toggleSelectionKey } from "./selection.js";

package/dist/internal/collection/selection.d.ts

@@ -0,0 +1,11 @@
+export type CollectionSelectionMode = "none" | "single" | "multiple";
+export type CollectionMovement = "next" | "previous" | "first" | "last";
+export interface CollectionNavigationItem {
+    disabled?: boolean | undefined;
+    id: string;
+    textValue?: string | undefined;
+}
+export declare function normalizeSelectionKeys(keys: Iterable<string> | null | undefined): string[];
+export declare function toggleSelectionKey(keys: Iterable<string> | null | undefined, key: string, mode: CollectionSelectionMode): string[];
+export declare function moveCollectionKey(items: readonly CollectionNavigationItem[], currentKey: string | undefined, movement: CollectionMovement): string | undefined;
+export declare function findTypeaheadKey(items: readonly CollectionNavigationItem[], currentKey: string | undefined, query: string): string | undefined;

package/dist/internal/collection/selection.js

@@ -0,0 +1,60 @@
+export function normalizeSelectionKeys(keys) {
+    return Array.from(new Set(keys ?? []));
+}
+export function toggleSelectionKey(keys, key, mode) {
+    if (mode === "none") {
+        return [];
+    }
+    const normalizedKeys = normalizeSelectionKeys(keys);
+    const selected = normalizedKeys.includes(key);
+    if (mode === "single") {
+        return selected ? [] : [key];
+    }
+    if (selected) {
+        return normalizedKeys.filter((selectedKey) => selectedKey !== key);
+    }
+    return [...normalizedKeys, key];
+}
+function enabledItems(items) {
+    return items.filter((item) => item.disabled !== true);
+}
+function wrapIndex(index, length) {
+    return ((index % length) + length) % length;
+}
+export function moveCollectionKey(items, currentKey, movement) {
+    const enabled = enabledItems(items);
+    if (enabled.length === 0) {
+        return undefined;
+    }
+    if (movement === "first") {
+        return enabled[0]?.id;
+    }
+    if (movement === "last") {
+        return enabled.at(-1)?.id;
+    }
+    const currentIndex = currentKey === undefined ? -1 : enabled.findIndex((item) => item.id === currentKey);
+    if (currentIndex === -1) {
+        return movement === "next" ? enabled[0]?.id : enabled.at(-1)?.id;
+    }
+    const nextIndex = movement === "next" ? currentIndex + 1 : currentIndex - 1;
+    return enabled[wrapIndex(nextIndex, enabled.length)]?.id;
+}
+export function findTypeaheadKey(items, currentKey, query) {
+    const normalizedQuery = query.trim().toLocaleLowerCase();
+    if (normalizedQuery.length === 0) {
+        return undefined;
+    }
+    const enabled = enabledItems(items).filter((item) => item.textValue?.trim());
+    if (enabled.length === 0) {
+        return undefined;
+    }
+    const currentIndex = currentKey === undefined ? -1 : enabled.findIndex((item) => item.id === currentKey);
+    const startIndex = currentIndex === -1 ? 0 : currentIndex + 1;
+    for (let offset = 0; offset < enabled.length; offset += 1) {
+        const item = enabled[wrapIndex(startIndex + offset, enabled.length)];
+        if (item?.textValue?.toLocaleLowerCase().startsWith(normalizedQuery)) {
+            return item.id;
+        }
+    }
+    return undefined;
+}