@1771technologies/lytenyte-pro 2.0.0-dev.0 → 2.0.0-dev.2

package/dist/components/smart-select/triggers/is-selectable-option.d.ts

@@ -0,0 +1 @@
+export declare function isSelectableOption(el: Element): boolean | "" | null;

package/dist/components/smart-select/triggers/is-selectable-option.js

@@ -0,0 +1,3 @@
+export function isSelectableOption(el) {
+    return el.getAttribute("data-ln-smart-option") && el.getAttribute("data-ln-selectable") !== "false";
+}

package/dist/components/smart-select/triggers/multi-combo-trigger.d.ts

@@ -0,0 +1,11 @@
+import { type ChangeEvent, type JSX } from "react";
+import type { SlotComponent } from "../../../hooks/use-slot/types.js";
+export type MultiComboTriggerProps = JSX.IntrinsicElements["div"] & {
+    readonly renderInput?: SlotComponent<{
+        query: string;
+        onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+        loading: boolean;
+        error: unknown;
+    }>;
+};
+export declare const MultiComboTrigger: import("react").ForwardRefExoticComponent<Omit<MultiComboTriggerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/smart-select/triggers/multi-combo-trigger.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from "react";
+import { useSmartSelect } from "../context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+import { useSlot } from "../../../hooks/use-slot/use-slot.js";
+import { useComboControls } from "./use-combo-controls.js";
+import { ChipContextProvider } from "../chip-context.js";
+function MultiComboBase({ renderInput, children, ...props }, ref) {
+    const { kindAndValue, comboState, setTrigger, query, inputRef, open } = useSmartSelect();
+    const { __is_trigger, ...p } = props;
+    if ((__is_trigger && kindAndValue.kind !== "multi") ||
+        (!__is_trigger && kindAndValue.kind !== "multi-combo")) {
+        throw new Error(`Cannot use ${__is_trigger ? "MultiTrigger" : "MultiComboTrigger"} when SmartSelect kind is not "${__is_trigger ? "multi" : "multi-combo"}". Found: ${kindAndValue.kind}`);
+    }
+    const [activeChip, setActiveChip] = useState(null);
+    const controls = useComboControls(setActiveChip, true);
+    const slot = useSlot({
+        props: [controls],
+        slot: renderInput ??
+            (__is_trigger ? (_jsx("button", { style: {
+                    padding: 0,
+                    width: 0,
+                    height: 0,
+                    background: "transparent",
+                    border: "0px solid transparent",
+                } })) : (_jsx("input", {}))),
+        ref: inputRef,
+        state: __is_trigger
+            ? {}
+            : { query, onChange: controls.onChange, loading: comboState.loading, error: comboState.error },
+    });
+    const combined = useCombinedRefs(setTrigger, ref);
+    return (_jsx(ChipContextProvider, { value: useMemo(() => ({ activeChip, setActiveChip }), [activeChip]), children: _jsxs("div", { ...p, ref: combined, "data-ln-smart-select-trigger": true, "data-ln-open": open, "data-ln-smart-select-loading": comboState.loading, "data-ln-smart-select-error": !!comboState.error, onBlur: () => setActiveChip(null), onClick: () => {
+                controls.onClick();
+                inputRef.current?.focus();
+            }, children: [children, slot] }) }));
+}
+export const MultiComboTrigger = forwardRef(MultiComboBase);

package/dist/components/smart-select/triggers/multi-trigger.d.ts

@@ -0,0 +1,6 @@
+import { type JSX } from "react";
+import type { SlotComponent } from "../../../hooks/use-slot/types.js";
+export type MultiTriggerProps = JSX.IntrinsicElements["div"] & {
+    readonly render?: SlotComponent;
+};
+export declare const MultiTrigger: import("react").ForwardRefExoticComponent<Omit<MultiTriggerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/smart-select/triggers/multi-trigger.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { MultiComboTrigger } from "./multi-combo-trigger.js";
+function MultiTriggerBase({ render, ...props }, ref) {
+    const overrides = { __is_trigger: true };
+    return _jsx(MultiComboTrigger, { ...props, renderInput: render, ref: ref, ...overrides });
+}
+export const MultiTrigger = forwardRef(MultiTriggerBase);

package/dist/components/smart-select/triggers/use-combo-controls.d.ts

@@ -0,0 +1,9 @@
+import { type Dispatch, type SetStateAction } from "react";
+export declare function useComboControls(setActiveChip: Dispatch<SetStateAction<string | null>>, isMulti: boolean): {
+    onClick: () => void;
+    onFocus: () => void;
+    onBlur: (e: import("react").FocusEvent<HTMLInputElement, Element>) => void;
+    value: string;
+    onChange: (ev: import("react").ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown: (e: import("react").KeyboardEvent<HTMLInputElement>) => void;
+};

package/dist/components/smart-select/triggers/use-combo-controls.js

@@ -0,0 +1,145 @@
+import { useMemo } from "react";
+import { useSmartSelect } from "../context.js";
+import { isSelectableOption } from "./is-selectable-option.js";
+export function useComboControls(setActiveChip, isMulti) {
+    const { query, open, openOnClick, preventNextOpen, onOpenChange, setActiveId, container, onQueryChange, onOptionsChange, onOptionSelect, trigger, kindAndValue: { value }, rtl, closeKeys, openKeys, options, } = useSmartSelect();
+    return useMemo(() => {
+        return {
+            onClick: () => {
+                if (!open && openOnClick && !preventNextOpen.current) {
+                    onOpenChange(true);
+                }
+            },
+            onFocus: () => {
+                setActiveChip(null);
+            },
+            onBlur: (e) => {
+                if (e.currentTarget.contains(e.relatedTarget))
+                    return;
+                onOpenChange(false);
+                return;
+            },
+            value: query,
+            onChange: (ev) => {
+                onQueryChange(ev.target.value);
+                if (!open)
+                    onOpenChange(true);
+            },
+            onKeyDown: (e) => {
+                if (!open && openKeys.includes(e.key)) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onOpenChange(true);
+                    return;
+                }
+                if (open && closeKeys.includes(e.key)) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onOpenChange(false);
+                    return;
+                }
+                if ((e.key === "Enter" || e.key === " ") && open) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const active = container?.querySelector('[data-ln-active="true"]');
+                    if (!active)
+                        return;
+                    const id = active.getAttribute("data-ln-smart-option");
+                    const option = options.find((x) => x.id === id);
+                    if (!option)
+                        return;
+                    onOptionSelect(option);
+                    if (active.getAttribute("data-ln-close-on-select")) {
+                        onOpenChange(false);
+                    }
+                    return;
+                }
+                if (isMulti && query.length === 0) {
+                    const key = rtl ? "ArrowRight" : "ArrowLeft";
+                    if (e.key === "Backspace") {
+                        const chips = Array.from(trigger.querySelectorAll("[data-ln-smart-select-chip]"));
+                        const lastChip = chips.at(-1);
+                        if (!lastChip)
+                            return;
+                        const id = lastChip.getAttribute("data-ln-smart-select-chip");
+                        onOptionsChange(value.filter((x) => x.id !== id));
+                        return;
+                    }
+                    if (e.key === key) {
+                        const chips = Array.from(trigger.querySelectorAll("[data-ln-smart-select-chip]"));
+                        const first = chips.at(-1);
+                        if (!first)
+                            return;
+                        first.focus();
+                        onOpenChange(false);
+                        setActiveChip(first.getAttribute("data-ln-smart-select-chip"));
+                        return;
+                    }
+                }
+                if (e.key === "ArrowDown" && !open) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onOpenChange(true);
+                    return;
+                }
+                if (!open || !container)
+                    return;
+                if (e.key === "ArrowUp") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const active = container.querySelector('[data-ln-active="true"]');
+                    let current = active?.previousElementSibling;
+                    while (current && !isSelectableOption(current))
+                        current = current.previousElementSibling;
+                    if (!current) {
+                        current = container.lastElementChild;
+                        while (current && !isSelectableOption(current))
+                            current = current.previousElementSibling;
+                    }
+                    if (current) {
+                        setActiveId(current.getAttribute("data-ln-smart-option"));
+                        current.scrollIntoView({ block: "nearest" });
+                    }
+                    return;
+                }
+                if (e.key === "ArrowDown") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const active = container.querySelector('[data-ln-active="true"]');
+                    let current = active?.nextElementSibling;
+                    while (current && !isSelectableOption(current))
+                        current = current.nextElementSibling;
+                    if (!current) {
+                        current = container.firstElementChild;
+                        while (current && !isSelectableOption(current))
+                            current = current.nextElementSibling;
+                    }
+                    if (current) {
+                        setActiveId(current.getAttribute("data-ln-smart-option"));
+                        current.scrollIntoView({ block: "nearest" });
+                    }
+                    return;
+                }
+            },
+        };
+    }, [
+        closeKeys,
+        container,
+        isMulti,
+        onOpenChange,
+        onOptionSelect,
+        onOptionsChange,
+        onQueryChange,
+        open,
+        openKeys,
+        openOnClick,
+        options,
+        preventNextOpen,
+        query,
+        rtl,
+        setActiveChip,
+        setActiveId,
+        trigger,
+        value,
+    ]);
+}

package/dist/components/smart-select/triggers/use-trigger-controls.d.ts

@@ -0,0 +1,5 @@
+export declare function useSelectControls(isMulti: boolean, setActiveChip: (s: string | null) => void): {
+    onClick: () => void;
+    onBlur: (e: import("react").FocusEvent<HTMLButtonElement, Element>) => void;
+    onKeyDown: (e: import("react").KeyboardEvent<HTMLButtonElement>) => void;
+};

package/dist/components/smart-select/triggers/use-trigger-controls.js

@@ -0,0 +1,126 @@
+import { useMemo } from "react";
+import { useSmartSelect } from "../context.js";
+import { isSelectableOption } from "./is-selectable-option.js";
+export function useSelectControls(isMulti, setActiveChip) {
+    const { open, onOpenChange, openOnClick, setActiveId, container, rtl, trigger, onOptionsChange, kindAndValue: { value }, openKeys, closeKeys, options, onOptionSelect, } = useSmartSelect();
+    return useMemo(() => {
+        return {
+            onClick: () => {
+                if (!open && openOnClick)
+                    onOpenChange(true);
+            },
+            onBlur: (e) => {
+                if (e.currentTarget.contains(e.relatedTarget))
+                    return;
+                onOpenChange(false);
+                return;
+            },
+            onKeyDown: (e) => {
+                if (!open && openKeys.includes(e.key)) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onOpenChange(true);
+                    return;
+                }
+                if (open && closeKeys.includes(e.key)) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onOpenChange(false);
+                    return;
+                }
+                if ((e.key === "Enter" || e.key === " ") && open) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const active = container?.querySelector('[data-ln-active="true"]');
+                    if (!active)
+                        return;
+                    const id = active.getAttribute("data-ln-smart-option");
+                    const option = options.find((x) => x.id === id);
+                    if (!option)
+                        return;
+                    onOptionSelect(option);
+                    if (active.getAttribute("data-ln-close-on-select")) {
+                        onOpenChange(false);
+                    }
+                    return;
+                }
+                if (isMulti) {
+                    const key = rtl ? "ArrowRight" : "ArrowLeft";
+                    if (e.key === "Backspace") {
+                        const chips = Array.from(trigger.querySelectorAll("[data-ln-smart-select-chip]"));
+                        const lastChip = chips.at(-1);
+                        if (!lastChip)
+                            return;
+                        const id = lastChip.getAttribute("data-ln-smart-select-chip");
+                        onOptionsChange(value.filter((x) => x.id !== id));
+                        return;
+                    }
+                    if (e.key === key) {
+                        const chips = Array.from(trigger.querySelectorAll("[data-ln-smart-select-chip]"));
+                        const first = chips.at(-1);
+                        if (!first)
+                            return;
+                        first.focus();
+                        onOpenChange(false);
+                        setActiveChip(first.getAttribute("data-ln-smart-select-chip"));
+                        return;
+                    }
+                }
+                if (!open || !container)
+                    return;
+                if (e.key === "ArrowUp") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const active = container.querySelector('[data-ln-active="true"]');
+                    let current = active?.previousElementSibling;
+                    while (current && !isSelectableOption(current))
+                        current = current.previousElementSibling;
+                    if (!current) {
+                        current = container.lastElementChild;
+                        while (current && !isSelectableOption(current))
+                            current = current.previousElementSibling;
+                    }
+                    if (current) {
+                        setActiveId(current.getAttribute("data-ln-smart-option"));
+                        current.scrollIntoView({ block: "nearest" });
+                    }
+                    return;
+                }
+                if (e.key === "ArrowDown") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const active = container.querySelector('[data-ln-active="true"]');
+                    let current = active?.nextElementSibling;
+                    while (current && !isSelectableOption(current))
+                        current = current.nextElementSibling;
+                    if (!current) {
+                        current = container.firstElementChild;
+                        while (current && !isSelectableOption(current))
+                            current = current.nextElementSibling;
+                    }
+                    if (current) {
+                        setActiveId(current.getAttribute("data-ln-smart-option"));
+                        current.scrollIntoView({ block: "nearest" });
+                    }
+                    return;
+                }
+            },
+        };
+    }, [
+        closeKeys,
+        container,
+        isMulti,
+        onOpenChange,
+        onOptionSelect,
+        onOptionsChange,
+        open,
+        openKeys,
+        openOnClick,
+        options,
+        rtl,
+        setActiveChip,
+        setActiveId,
+        trigger,
+        value,
+    ]);
+}

package/dist/components/smart-select/type.d.ts

@@ -0,0 +1,44 @@
+export type BaseOption = {
+    readonly id: string;
+    readonly selectable?: boolean;
+};
+export type BasicSelect<T extends BaseOption> = {
+    readonly kind: "basic";
+    readonly value: T | null;
+    readonly onOptionChange: (change: T | null) => void;
+    readonly options: T[];
+};
+export type MultiSelect<T extends BaseOption> = {
+    readonly kind: "multi";
+    readonly value: T[];
+    readonly onOptionChange: (change: T[]) => void;
+    readonly options: T[];
+};
+export type ComboSelect<T extends BaseOption> = {
+    readonly kind: "combo";
+    readonly value: T | null;
+    readonly onOptionChange: (change: T | null) => void;
+    readonly query?: string;
+    readonly onQueryChange?: (change: string) => void;
+    readonly searchDebounceMs?: number;
+    readonly clearOnSelect?: boolean;
+    readonly clearOnQuery?: boolean;
+    readonly options: (query: string | null) => Promise<T[]> | T[];
+};
+export type MultiComboSelect<T extends BaseOption> = {
+    readonly kind: "multi-combo";
+    readonly value: T[];
+    readonly onOptionChange: (change: T[]) => void;
+    readonly query?: string;
+    readonly onQueryChange?: (change: string) => void;
+    readonly searchDebounceMs?: number;
+    readonly clearOnSelect?: boolean;
+    readonly clearOnQuery?: boolean;
+    readonly options: (query: string | null) => Promise<T[]> | T[];
+};
+export type SmartSelectKinds<T extends BaseOption> = BasicSelect<T> | MultiSelect<T> | ComboSelect<T> | MultiComboSelect<T>;
+export type OptionRenderProps<T extends BaseOption> = {
+    readonly option: T;
+    readonly active: boolean;
+    readonly selected: boolean;
+};

package/dist/components/smart-select/type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/smart-select/use-async-options.d.ts

@@ -0,0 +1,8 @@
+import type { BaseOption } from "./type";
+export interface ComboOptionState<T extends BaseOption> {
+    loading: boolean;
+    error: unknown;
+    options: T[];
+    loadOptions: (query: any) => void;
+}
+export declare function useAsyncOptions<T extends BaseOption>(p: null | ((query: string) => Promise<T[]> | T[]), clearOnQuery: boolean): ComboOptionState<T>;

package/dist/components/smart-select/use-async-options.js

@@ -0,0 +1,42 @@
+import { useMemo, useRef, useState } from "react";
+import { useEvent } from "@1771technologies/lytenyte-core/internal";
+export function useAsyncOptions(p, clearOnQuery) {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [options, setOptions] = useState([]);
+    const controllerRef = useRef(null);
+    const loadOptions = useEvent((query) => {
+        if (!p)
+            return;
+        if (controllerRef.current)
+            controllerRef.current.abort();
+        const opts = p(query);
+        if (Array.isArray(opts)) {
+            setOptions(opts);
+            return;
+        }
+        const controller = new AbortController();
+        controllerRef.current = controller;
+        if (clearOnQuery)
+            setOptions([]);
+        setLoading(true);
+        setError(null);
+        opts
+            .then((res) => {
+            if (controller.signal.aborted)
+                return;
+            setOptions(res);
+        })
+            .catch((e) => {
+            if (controller.signal.aborted)
+                return;
+            setError(e);
+        })
+            .finally(() => {
+            if (controller.signal.aborted)
+                return;
+            setLoading(false);
+        });
+    });
+    return useMemo(() => ({ loading, error, options, loadOptions }), [error, loadOptions, loading, options]);
+}

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

@@ -0,0 +1,4 @@
+export type { TreeViewProps, TreeViewApi } from "./root.js";
+export type { TreeViewChildParams, TreeViewItem, TreeViewSelectAllParams } from "./types.js";
+export { TreeView } from "./root.js";
+export { TreeChildren } from "./tree-children.js";

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

@@ -0,0 +1,2 @@
+export { TreeView } from "./root.js";
+export { TreeChildren } from "./tree-children.js";

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

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+import { type RowGroup, type RowLeaf, type RowSelectionLinked } from "@1771technologies/lytenyte-shared";
+import type { TreeViewChildParams, TreeViewItem, TreeViewSelectAllParams } from "./types.js";
+export interface TreeViewProps<T extends TreeViewItem> {
+    readonly items: T[];
+    readonly children?: (props: TreeViewChildParams<T>) => ReactNode;
+    readonly selectAllSlot?: (params: TreeViewSelectAllParams) => ReactNode;
+    readonly rowHeight?: number;
+    readonly defaultExpansion?: boolean | number;
+    readonly branchJoinSeparator?: string;
+    readonly rowSelectAllShow?: boolean;
+    readonly rowSelectionEnabled?: boolean;
+    readonly rowSelection?: RowSelectionLinked;
+    readonly onRowSelectionChange?: (selection: RowSelectionLinked) => void;
+    readonly rowGroupExpansions?: Record<string, boolean | undefined>;
+    readonly onRowGroupExpansionChange?: (change: Record<string, boolean | undefined>) => void;
+    /**
+     * @alpha
+     * @internal
+     *
+     * Do not use this property unless you know what you are doing. Support for tree view drag
+     * and drag is still being prototyped.
+     */
+    readonly draggable?: boolean;
+    /**
+     * @alpha
+     * @internal
+     *
+     * Do not use this property unless you know what you are doing. Support for tree view drag
+     * and drag is still being prototyped.
+     */
+    readonly onItemsReordered?: (items: T[]) => void;
+}
+export interface TreeViewApi<T extends TreeViewItem> {
+    readonly rowsSelected: () => (RowLeaf<T> | RowGroup)[];
+}
+export declare const TreeView: <T extends TreeViewItem>(props: TreeViewProps<T>) => ReactNode;

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

@@ -0,0 +1,139 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useState, } from "react";
+import { itemsWithIdToMap, moveRelative, } from "@1771technologies/lytenyte-shared";
+import { TreeChildren } from "./tree-children.js";
+import { SelectAll } from "./select-all.js";
+import { useClientDataSource } from "../../data-source-client/use-client-data-source.js";
+import { usePiece } from "@1771technologies/lytenyte-core/internal";
+import { Root } from "../../root/root.js";
+import { Grid } from "@1771technologies/lytenyte-core";
+function TreeViewBase({ items, rowSelectAllShow: rowSelectAll = true, defaultExpansion, rowHeight = 28, children = TreeChildren, branchJoinSeparator = "/", rowSelectionEnabled = true, rowSelection, onRowSelectionChange, rowGroupExpansions, onRowGroupExpansionChange, selectAllSlot, draggable, onItemsReordered, }, forwarded) {
+    const groupFn = useMemo(() => {
+        return (x) => x.data.path;
+    }, []);
+    const finalItems = useMemo(() => {
+        if (!rowSelectAll)
+            return items;
+        return [{ id: "__ln_select_all", path: [], name: "Select All" }, ...items];
+    }, [items, rowSelectAll]);
+    const subtractions = useMemo(() => {
+        if (rowSelectAll)
+            return new Set(["__ln_select_all"]);
+        return new Set();
+    }, [rowSelectAll]);
+    const source = useClientDataSource({
+        group: groupFn,
+        data: finalItems,
+        rowGroupDefaultExpansion: defaultExpansion ?? false,
+        leafIdFn: useCallback((d) => d.id, []),
+        groupIdFn: useCallback((p) => p.join(branchJoinSeparator), [branchJoinSeparator]),
+        rowGroupExpansions,
+        onRowGroupExpansionChange,
+        rowSelectionIdUniverseSubtractions: subtractions,
+        rowSelection,
+        onRowSelectionChange: onRowSelectionChange,
+    });
+    const [overId, setOverId] = useState(null);
+    const [isBefore, setIsBefore] = useState(false);
+    const itemLookup = useMemo(() => itemsWithIdToMap(items), [items]);
+    const over$ = usePiece(overId);
+    const isBefore$ = usePiece(isBefore);
+    const [api, setApi] = useState(null);
+    const groupColumn = useMemo(() => {
+        return {
+            widthFlex: 1,
+            width: 20,
+            widthMin: 20,
+            cellRenderer: ({ row, rowIndex, api, indeterminate, selected }) => {
+                const { props, isDragActive } = api.useRowDrag({
+                    rowIndex,
+                });
+                const over = over$.useValue();
+                const isBefore = isBefore$.useValue();
+                if (row.kind === "aggregated")
+                    return null;
+                if (row.id === "__ln_select_all") {
+                    if (!api)
+                        return null;
+                    return _jsx(SelectAll, { api: api, render: selectAllSlot });
+                }
+                const leafs = () => row.kind === "branch"
+                    ? api.rowLeafs(row.id).map((x) => itemLookup.get(x))
+                    : [itemLookup.get(row.id)];
+                return children({
+                    row,
+                    leafs,
+                    selectEnabled: rowSelectionEnabled,
+                    selected,
+                    indeterminate,
+                    select: (b) => api.rowSelect({ selected: row.id, deselect: !(b ?? selected) }),
+                    handleSelect: api.rowHandleSelect,
+                    toggle: (b) => api.rowGroupToggle(row.id, b),
+                    dragProps: draggable ? props : {},
+                    isBefore: isBefore,
+                    isOver: !isDragActive && row.id === over,
+                });
+            },
+        };
+    }, [children, draggable, isBefore$, itemLookup, over$, rowSelectionEnabled, selectAllSlot]);
+    useImperativeHandle(forwarded, () => {
+        return {
+            rowsSelected: () => (api?.rowsSelected().rows ?? []).filter((x) => x.id !== "__ln_select_all"),
+        };
+    }, [api]);
+    return (_jsx(Root, { ref: setApi, rowSource: source, rowGroupColumn: groupColumn, rowAlternateAttr: false, headerHeight: 0, rowHeight: rowHeight, rowSelectionMode: rowSelectionEnabled ? "multiple" : "none", rowSelectionActivator: "none", onRowDragEnter: (p) => {
+            if (p.over.kind === "viewport")
+                return;
+            setOverId(p.over.row.id);
+            setIsBefore(p.over.rowIndex < p.source.rowIndex);
+        }, onRowDragLeave: (p) => {
+            if (p.over.kind === "viewport")
+                return;
+            setOverId(null);
+        }, onRowDrop: (p) => {
+            setOverId(null);
+            if (p.over.kind === "viewport")
+                return;
+            const sourceRow = p.source.row;
+            const rows = sourceRow.kind === "branch" ? p.source.api.rowLeafs(sourceRow.id) : [sourceRow.id];
+            const overRow = p.over.row;
+            const overId = p.over.row.kind === "branch" ? p.over.api.rowLeafs(overRow.id)[0] : overRow.id;
+            if (rows.includes(overId))
+                return;
+            const moveItems = rows.map((r) => items.findIndex((x) => x.id === r)).sort((l, r) => l - r);
+            const target = items.findIndex((x) => x.id === overId);
+            const next = moveRelative(items, moveItems[0], target, moveItems.slice(1));
+            onItemsReordered?.(next);
+        }, events: useMemo(() => {
+            return {
+                cell: {
+                    keyDown: ({ api, event, row }) => {
+                        if (event.key === " " && row.kind === "branch") {
+                            event.preventDefault();
+                            api.rowGroupToggle(row.id);
+                        }
+                        if (event.key === "ArrowLeft" && row.kind === "branch") {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            api.rowGroupToggle(row.id, false);
+                        }
+                        if (event.key === "ArrowRight" && row.kind === "branch") {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            api.rowGroupToggle(row.id, true);
+                        }
+                        if (event.key === "Enter") {
+                            api.rowSelect({ selected: row.id, deselect: api.rowIsSelected(row.id) });
+                        }
+                    },
+                },
+            };
+        }, []), styles: useMemo(() => {
+            return {
+                viewport: {
+                    className: "ln-tree-view",
+                },
+            };
+        }, []), children: _jsx(Grid.Viewport, { children: _jsx(Grid.RowsContainer, { children: _jsx(Grid.RowsCenter, {}) }) }) }));
+}
+export const TreeView = forwardRef(TreeViewBase);

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

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+import type { TreeViewSelectAllParams } from "./types";
+import type { API } from "../../types";
+export declare function SelectAll({ api, render, }: {
+    render?: (params: TreeViewSelectAllParams) => ReactNode;
+    api: API;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;