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

package/dist/components/headless/menu/radio-group/radio-item.d.ts

@@ -0,0 +1,10 @@
+import { type JSX, type ReactNode } from "react";
+export declare const RadioItem: import("react").ForwardRefExoticComponent<Omit<RadioItem.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace RadioItem {
+    type Props = Omit<JSX.IntrinsicElements["div"], "children"> & {
+        readonly disabled?: boolean;
+        readonly value: string;
+        readonly children?: ReactNode | ((checked: boolean) => ReactNode);
+        readonly closeOnAction?: boolean;
+    };
+}

package/dist/components/headless/menu/radio-group/radio-item.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useContext, useState } from "react";
+import { useMenuItemEvents } from "../item/use-menu-item-events.js";
+import { handleVerticalNavigation } from "../item/handle-vertical-navigation.js";
+import { context } from "./context.js";
+import { useDialogRoot } from "../../dialog/context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+function ItemImpl({ value, disabled, children, closeOnAction, ...props }, ref) {
+    const [item, setItem] = useState(null);
+    const combinedRefs = useCombinedRefs(ref, setItem);
+    const [active, setActive] = useMenuItemEvents(item);
+    const ctx = useContext(context);
+    const Node = typeof children === "function" ? children(ctx.value === value) : children;
+    const d = useDialogRoot();
+    return (_jsx("div", { ...props, role: "menuitemradio", ref: combinedRefs, tabIndex: 0, "aria-checked": ctx.value === value, "data-ln-disabled": disabled ? true : undefined, inert: disabled ? true : undefined, "data-ln-menu-item": true, "data-ln-active": active, "data-ln-checked": ctx.value === value, onFocus: (ev) => {
+            props.onFocus?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            setActive(true);
+        }, onBlur: (ev) => {
+            props.onBlur?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            setActive(false);
+        }, onClick: (ev) => {
+            props.onClick?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            ctx.onChange?.(value);
+            if (closeOnAction === false)
+                return;
+            d?.onOpenChange(false);
+        }, onKeyDown: (ev) => {
+            if (ev.key === "ArrowUp" || ev.key === "ArrowDown")
+                handleVerticalNavigation(ev);
+            if (ev.key === " " || ev.key === "Enter") {
+                ctx.onChange?.(value);
+                if (closeOnAction === false)
+                    return;
+                d?.onOpenChange(false);
+            }
+        }, children: Node }));
+}
+export const RadioItem = forwardRef(ItemImpl);

package/dist/components/headless/menu/submenu/submenu-context.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from "react";
+interface SubmenuContextValue {
+    readonly submenuRef: JSX.IntrinsicElements["div"]["ref"];
+    readonly open: boolean;
+    readonly onOpenChange: (b: boolean) => void;
+}
+export declare const submenuContext: import("react").Context<SubmenuContextValue | null>;
+export declare const useSubmenuContext: () => SubmenuContextValue | null;
+export {};

package/dist/components/headless/menu/submenu/submenu-context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from "react";
+export const submenuContext = createContext(null);
+export const useSubmenuContext = () => useContext(submenuContext);

package/dist/components/headless/menu/submenu/submenu-trigger.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "react";
+export declare const SubmenuTrigger: import("react").ForwardRefExoticComponent<Omit<SubmenuTrigger.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace SubmenuTrigger {
+    type Props = JSX.IntrinsicElements["div"] & {
+        disabled?: boolean;
+    };
+}

package/dist/components/headless/menu/submenu/submenu-trigger.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { useSubmenuContext } from "./submenu-context.js";
+import { getNearestMatching, getTabbables } from "@1771technologies/lytenyte-shared";
+import { handleVerticalNavigation } from "../item/handle-vertical-navigation.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+function SubmenuTriggerImpl({ disabled, ...props }, ref) {
+    const [active, setActive] = useState(false);
+    const sub = useSubmenuContext();
+    const [triggerEl, setTriggerEl] = useState(null);
+    const combined = useCombinedRefs(setTriggerEl, ref);
+    const blurRef = useRef(null);
+    useEffect(() => {
+        if (!triggerEl || !sub)
+            return;
+        const controller = new AbortController();
+        const signal = controller.signal;
+        triggerEl.addEventListener("ln-activate-mouse", () => {
+            triggerEl.focus();
+            sub.onOpenChange(true);
+            if (blurRef.current)
+                clearTimeout(blurRef.current);
+        }, { signal });
+        triggerEl.addEventListener("ln-deactivate-mouse", () => {
+            blurRef.current = setTimeout(() => {
+                triggerEl.blur();
+            }, 100);
+        }, { signal });
+        return () => controller.abort();
+    }, [sub, triggerEl]);
+    if (!sub)
+        return null;
+    return (_jsx("div", { ...props, tabIndex: 0, "data-ln-open": sub.open, "data-ln-menu-item": true, "data-ln-subtrigger": true, "data-ln-active": active, "data-ln-disabled": disabled ? true : undefined, inert: disabled ? true : undefined, ref: combined, onFocus: (ev) => {
+            props.onFocus?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            setActive(true);
+        }, onBlur: (ev) => {
+            props.onBlur?.(ev);
+            if (ev.isPropagationStopped())
+                return;
+            setActive(false);
+            const triggerRoot = getNearestMatching(triggerEl, (el) => el.getAttribute("data-ln-submenu-root") === "true");
+            if (!triggerRoot || triggerRoot.contains(ev.relatedTarget))
+                return;
+            sub.onOpenChange(false);
+        }, onKeyDown: (ev) => {
+            if (ev.key === "ArrowUp" || ev.key === "ArrowDown") {
+                handleVerticalNavigation(ev);
+                return;
+            }
+            if (ev.key === "ArrowRight") {
+                ev.stopPropagation();
+                ev.preventDefault();
+                sub.onOpenChange(true);
+                const el = ev.currentTarget;
+                setTimeout(() => {
+                    const submenu = getNearestMatching(el, (el) => {
+                        return el.getAttribute("data-ln-submenu-root") === "true";
+                    });
+                    const menu = submenu?.querySelector('[data-ln-menu="true"][data-ln-submenu="true"]');
+                    if (!menu)
+                        return;
+                    const first = getTabbables(menu).filter((x) => x.getAttribute("data-ln-menu-item") === "true")[0];
+                    first?.focus();
+                }, 20);
+            }
+        } }));
+}
+export const SubmenuTrigger = forwardRef(SubmenuTriggerImpl);

package/dist/components/headless/menu/submenu/submenu.d.ts

@@ -0,0 +1,21 @@
+import { type JSX } from "react";
+import type { Placement } from "../../../external/floating-ui.js";
+export interface SubmenuProps {
+    readonly open?: boolean;
+    readonly onOpenChange?: (b: boolean) => void;
+    readonly placement?: Placement;
+    readonly shiftPadding?: number;
+    readonly sideOffset?: number;
+    readonly alignOffset?: number;
+}
+export declare const Submenu: import("react").ForwardRefExoticComponent<Omit<Submenu.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace Submenu {
+    type Props = JSX.IntrinsicElements["div"] & {
+        readonly open?: boolean;
+        readonly onOpenChange?: (b: boolean) => void;
+        readonly placement?: Placement;
+        readonly shiftPadding?: number;
+        readonly sideOffset?: number;
+        readonly alignOffset?: number;
+    };
+}

package/dist/components/headless/menu/submenu/submenu.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
+import { useSubmenuPosition } from "./use-submenu-position.js";
+import { submenuContext } from "./submenu-context.js";
+import { useCombinedRefs, useControlled } from "@1771technologies/lytenyte-core/internal";
+import { useTransitioned } from "../../../../hooks/use-transitioned-open.js";
+function SubmenuImpl({ open: userOpen, onOpenChange, placement = "right-start", shiftPadding, sideOffset = 2, alignOffset = 0, ...props }, ref) {
+    const [open, setOpen] = useControlled({ controlled: userOpen, default: false });
+    const [sub, submenuRef] = useState(null);
+    const [, shouldMount] = useTransitioned(open, sub);
+    const openChange = useCallback((b) => {
+        setOpen(b);
+        onOpenChange?.(b);
+    }, [onOpenChange, setOpen]);
+    const [root, setRoot] = useState(null);
+    const combined = useCombinedRefs(ref, setRoot);
+    useSubmenuPosition({
+        placement,
+        shiftPadding,
+        sideOffset,
+        alignOffset,
+        sub,
+        root,
+    });
+    useEffect(() => {
+        if (!root)
+            return;
+        const controller = new AbortController();
+        const signal = controller.signal;
+        root.addEventListener("ln-close", () => {
+            openChange(false);
+        }, { signal });
+        return () => controller.abort();
+    }, [openChange, root]);
+    return (_jsx(submenuContext.Provider, { value: useMemo(() => ({
+            submenuRef,
+            open: shouldMount,
+            onOpenChange: openChange,
+        }), [openChange, shouldMount]), children: _jsx("div", { ...props, "data-ln-open": open, "data-ln-submenu-root": true, role: "menuitem", style: {
+                ...props.style,
+                position: "relative",
+            }, ref: combined, onKeyDown: (ev) => {
+                props.onKeyDown?.(ev);
+                if (ev.isPropagationStopped())
+                    return;
+                if (ev.key === "ArrowLeft") {
+                    setOpen(false);
+                    const trigger = ev.currentTarget.querySelector('[data-ln-subtrigger="true"]');
+                    trigger?.focus();
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                }
+            }, children: props.children }) }));
+}
+export const Submenu = forwardRef(SubmenuImpl);

package/dist/components/headless/menu/submenu/use-submenu-position.d.ts

@@ -0,0 +1,5 @@
+import type { SubmenuProps } from "./submenu.js";
+export declare function useSubmenuPosition({ placement, shiftPadding, sideOffset, alignOffset, sub, root, }: Pick<SubmenuProps, "alignOffset" | "placement" | "shiftPadding" | "sideOffset"> & {
+    sub: HTMLElement | null;
+    root: HTMLElement | null;
+}): void;

package/dist/components/headless/menu/submenu/use-submenu-position.js

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { autoUpdate, computePosition, flip, offset } from "../../../external/floating-ui.js";
+import { transformOrigin } from "../../dialog/transform-origin.js";
+export function useSubmenuPosition({ placement = "right-start", shiftPadding, sideOffset = 2, alignOffset = 0, sub, root, }) {
+    useEffect(() => {
+        if (!sub || !open || !root)
+            return;
+        const middleware = [offset({ alignmentAxis: alignOffset, mainAxis: sideOffset })];
+        const flipMw = flip({
+            crossAxis: true,
+        });
+        if (placement.includes("-"))
+            middleware.push(flipMw);
+        else
+            middleware.push(flipMw);
+        middleware.push(transformOrigin({ arrowHeight: 0, arrowWidth: 0 }));
+        const clean = autoUpdate(root, sub, async () => {
+            const pos = await computePosition(root, sub, {
+                strategy: "fixed",
+                placement: placement,
+                middleware,
+            });
+            const x = pos.middlewareData.transformOrigin.x;
+            const y = pos.middlewareData.transformOrigin.y;
+            sub.style.transformOrigin = `${x} ${y}`;
+            sub.style.top = `${pos.y}px`;
+            sub.style.left = `${pos.x}px`;
+        });
+        return () => clean();
+    }, [alignOffset, placement, root, shiftPadding, sideOffset, sub]);
+}

package/dist/components/headless/menu/use-menu.d.ts

@@ -0,0 +1 @@
+export declare function useMenu(el: HTMLElement | null): void;

package/dist/components/headless/menu/use-menu.js

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from "react";
+import { useSubmenuContext } from "./submenu/submenu-context.js";
+import { getNearestMatching } from "@1771technologies/lytenyte-shared";
+import { dispatchActivate, dispatchClose, dispatchDeactivate, getSubmenuRoots } from "./dom.js";
+export function useMenu(el) {
+    const sub = useSubmenuContext();
+    const mouseOutTime = useRef(null);
+    useEffect(() => {
+        if (!el || sub)
+            return;
+        const controller = new AbortController();
+        document.addEventListener("keydown", (ev) => {
+            if (el.contains(document.activeElement))
+                return;
+            if (ev.key !== "ArrowDown" && ev.key !== "ArrowUp")
+                return;
+            const menu = Array.from(document.querySelectorAll("[data-ln-menu]")).at(-1);
+            if (!menu)
+                return;
+            const firstItem = menu.querySelector("[data-ln-menu-item");
+            firstItem.focus?.();
+        }, { signal: controller.signal });
+        el.addEventListener("mouseover", (ev) => {
+            const target = ev.target;
+            const item = getNearestMatching(target, (el) => el.getAttribute("data-ln-menu-item") === "true");
+            if (!item)
+                return;
+            if (item) {
+                const itemRoots = getSubmenuRoots(item);
+                const menus = el.querySelectorAll('[data-ln-submenu-root="true"]');
+                menus.forEach((m) => {
+                    if (!itemRoots.includes(m))
+                        dispatchClose(m);
+                });
+            }
+            if (mouseOutTime.current)
+                clearTimeout(mouseOutTime.current);
+            dispatchActivate(item);
+        }, { signal: controller.signal });
+        el.addEventListener("mouseout", (ev) => {
+            const target = ev.target;
+            const item = getNearestMatching(target, (el) => el.getAttribute("data-ln-menu-item") === "true");
+            if (!item)
+                return;
+            mouseOutTime.current = setTimeout(() => {
+                dispatchDeactivate(item);
+                mouseOutTime.current = null;
+            });
+        }, { signal: controller.signal });
+        return () => controller.abort();
+    }, [el, sub]);
+}

package/dist/components/headless/popover/container.d.ts

@@ -0,0 +1,5 @@
+import { DialogContainer } from "../dialog/container.js";
+export declare const PopoverContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export declare namespace PopoverContainer {
+    type Props = DialogContainer.Props;
+}

package/dist/components/headless/popover/container.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { DialogContainer } from "../dialog/container.js";
+const PopoverContainerBase = (props, ref) => {
+    return (_jsx(DialogContainer, { ...props, ref: ref, "data-ln-popover": props["data-ln-menu-popover"] ? undefined : true }));
+};
+export const PopoverContainer = forwardRef(PopoverContainerBase);

package/dist/components/headless/popover/context.d.ts

@@ -0,0 +1,6 @@
+import type { Dispatch, SetStateAction } from "react";
+export interface PopoverContext {
+    readonly setTrigger: Dispatch<SetStateAction<HTMLElement | null>>;
+}
+export declare const PopoverContext: import("react").Context<PopoverContext>;
+export declare const usePopoverContext: () => PopoverContext;

package/dist/components/headless/popover/context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from "react";
+export const PopoverContext = createContext(null);
+export const usePopoverContext = () => useContext(PopoverContext);

package/dist/components/headless/popover/index.d.ts

@@ -0,0 +1,30 @@
+import type { PropsWithChildren } from "react";
+import { PopoverRoot } from "./root.js";
+import { PopoverTrigger } from "./trigger.js";
+import { DialogArrow } from "../dialog/arrow.js";
+import { DialogClose } from "../dialog/close.js";
+import { PopoverContainer } from "./container.js";
+import { DialogDescription } from "../dialog/description.js";
+import { DialogTitle } from "../dialog/title.js";
+import { useDialog } from "../dialog/use-dialog.js";
+export declare const Popover: {
+    (props: PropsWithChildren<PopoverRoot.Props>): import("react/jsx-runtime").JSX.Element;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("../dialog/trigger.js").DialogTrigger.Props, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<DialogArrow.Props, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<DialogClose.Props, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Container: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<DialogDescription.Props, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<DialogTitle.Props, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    useControls: typeof useDialog;
+};
+export declare namespace Popover {
+    type Props = PopoverRoot.Props;
+    namespace Component {
+        type Trigger = PopoverTrigger.Props;
+        type Arrow = DialogArrow.Props;
+        type Close = DialogClose.Props;
+        type Container = PopoverContainer.Props;
+        type Description = DialogDescription.Props;
+        type Title = DialogTitle.Props;
+    }
+}

package/dist/components/headless/popover/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PopoverRoot } from "./root.js";
+import { PopoverTrigger } from "./trigger.js";
+import { DialogArrow } from "../dialog/arrow.js";
+import { DialogClose } from "../dialog/close.js";
+import { PopoverContainer } from "./container.js";
+import { DialogDescription } from "../dialog/description.js";
+import { DialogTitle } from "../dialog/title.js";
+import { useDialog } from "../dialog/use-dialog.js";
+export const Popover = (props) => _jsx(PopoverRoot, { ...props });
+Popover.Trigger = PopoverTrigger;
+Popover.Arrow = DialogArrow;
+Popover.Close = DialogClose;
+Popover.Container = PopoverContainer;
+Popover.Description = DialogDescription;
+Popover.Title = DialogTitle;
+Popover.useControls = useDialog;

package/dist/components/headless/popover/root.d.ts

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from "react";
+import { DialogRoot } from "../dialog/root.js";
+export declare function PopoverRoot(props: PropsWithChildren<PopoverRoot.Props>): import("react/jsx-runtime").JSX.Element;
+export declare namespace PopoverRoot {
+    type Props = DialogRoot.Props;
+}

package/dist/components/headless/popover/root.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { DialogRoot } from "../dialog/root.js";
+import { PopoverContext } from "./context.js";
+export function PopoverRoot(props) {
+    const [trigger, setTrigger] = useState(null);
+    return (_jsx(PopoverContext.Provider, { value: useMemo(() => ({ setTrigger }), []), children: _jsx(DialogRoot, { ...props, anchor: props.anchor ?? trigger }) }));
+}

package/dist/components/headless/popover/trigger.d.ts

@@ -0,0 +1,7 @@
+import { DialogTrigger } from "../dialog/trigger.js";
+export declare const PopoverTriggerBase: (props: DialogTrigger.Props, ref: DialogTrigger.Props["ref"]) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Omit<DialogTrigger.Props, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare namespace PopoverTrigger {
+    type Props = DialogTrigger.Props;
+    type State = DialogTrigger.State;
+}

package/dist/components/headless/popover/trigger.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { DialogTrigger } from "../dialog/trigger.js";
+import { usePopoverContext } from "./context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+export const PopoverTriggerBase = (props, ref) => {
+    const { setTrigger } = usePopoverContext();
+    const combined = useCombinedRefs(ref, setTrigger);
+    return _jsx(DialogTrigger, { ...props, ref: combined });
+};
+export const PopoverTrigger = forwardRef(PopoverTriggerBase);

package/dist/components/pill-manager/container.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "react";
+export declare const PillContainer: import("react").NamedExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace PillContainer {
+    type Props = JSX.IntrinsicElements["div"];
+}

package/dist/components/pill-manager/container.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect, useRef, useState } from "react";
+import { usePillRoot } from "./root.context.js";
+import { usePillRow } from "./pill-row.context.js";
+import { dragX, dragY, getDragData, useCombinedRefs, useSelector, } from "@1771technologies/lytenyte-core/internal";
+import { getFocusables } from "@1771technologies/lytenyte-shared";
+function ContainerBase(props, forwarded) {
+    const { setCloned, orientation, rows, movedRef } = usePillRoot();
+    const { row } = usePillRow();
+    const [over, setOver] = useState(false);
+    const x = useSelector(dragX);
+    const y = useSelector(dragY);
+    const [container, setContainer] = useState(null);
+    const wasOver = useRef(false);
+    useEffect(() => {
+        if (!container)
+            return;
+        const ds = getDragData();
+        if (!ds?.pill?.data) {
+            setOver(false);
+            return;
+        }
+        const { item: dragged, id } = ds.pill.data;
+        const bb = container.getBoundingClientRect();
+        const isOver = bb.left < x && bb.right > x && bb.top < y && bb.bottom > y;
+        // The current drag is from the current row.
+        if (id === row.id) {
+            movedRef.current = !isOver ? { id: row.id, pillId: dragged.id } : null;
+            return;
+        }
+        const thisRow = rows.findIndex((x) => x.id === row.id);
+        const originalRow = rows[thisRow];
+        if (isOver) {
+            wasOver.current = true;
+            if (row.pills.find((x) => x.id === dragged.id))
+                return;
+            if (!row.accepts || !dragged.tags || dragged.tags.every((x) => !row.accepts?.includes(x)))
+                return;
+            setOver(true);
+            const thisRow = rows.findIndex((x) => x.id === row.id);
+            const originalRow = rows[thisRow];
+            const newPills = [...originalRow.pills, { ...dragged, __temp: true }];
+            setCloned((prev) => {
+                if (!prev)
+                    throw new Error("Can't call drag function without cloning nodes.");
+                const newPill = { ...prev[thisRow] };
+                newPill.pills = newPills;
+                const newDef = [...prev];
+                newDef[thisRow] = newPill;
+                return newDef;
+            });
+        }
+        else {
+            if (wasOver.current) {
+                setCloned((prev) => {
+                    if (!prev)
+                        return prev;
+                    const next = [...prev];
+                    next[thisRow] = structuredClone(originalRow);
+                    return next;
+                });
+                wasOver.current = false;
+            }
+            setOver(false);
+            // The original row has the dragged pill as an ID so we can safely skip it.
+            if (originalRow.pills.find((x) => x.id === dragged.id))
+                return;
+            if (!row.pills.find((x) => x.id === dragged.id))
+                return;
+            const newPills = row.pills.filter((x) => x.id !== dragged.id);
+            const newRow = { ...row, pills: newPills };
+            setCloned((prev) => {
+                if (!prev)
+                    throw new Error("Can't call drag function without cloning nodes.");
+                const newDef = [...prev];
+                newDef[thisRow] = newRow;
+                return newDef;
+            });
+        }
+    }, [container, movedRef, over, row, rows, setCloned, x, y]);
+    const combined = useCombinedRefs(forwarded, setContainer);
+    const rtl = useRef(null);
+    return (_jsx("div", { ...props, ref: combined, "data-ln-over": over, "data-ln-orientation": orientation, "data-ln-pill-container": true, "data-ln-pill-type": row.type, tabIndex: 0, onKeyDown: (ev) => {
+            if (rtl.current == null) {
+                const dir = getComputedStyle(ev.currentTarget).direction;
+                rtl.current = dir === "rtl";
+            }
+            const start = rtl.current ? "ArrowRight" : "ArrowLeft";
+            const end = rtl.current ? "ArrowLeft" : "ArrowRight";
+            const next = orientation === "horizontal" ? end : "ArrowDown";
+            const prev = orientation === "horizontal" ? start : "ArrowUp";
+            if (ev.key === next) {
+                const focusables = getFocusables(ev.currentTarget);
+                if (!focusables.length)
+                    return;
+                const active = focusables.indexOf(document.activeElement);
+                if (active === -1 || active === focusables.length - 1) {
+                    focusables[0].focus();
+                }
+                else {
+                    focusables[active + 1].focus();
+                }
+                ev.preventDefault();
+            }
+            else if (ev.key === prev) {
+                const focusables = getFocusables(ev.currentTarget);
+                if (!focusables.length)
+                    return;
+                const active = focusables.indexOf(document.activeElement);
+                if (active === -1 || active === 0) {
+                    focusables.at(-1)?.focus();
+                }
+                else {
+                    focusables[active - 1].focus();
+                }
+                ev.preventDefault();
+            }
+        }, onDrop: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, onDragOver: (e) => {
+            e.dataTransfer.dropEffect = "move";
+            e.preventDefault();
+            e.stopPropagation();
+        } }));
+}
+export const PillContainer = memo(forwardRef(ContainerBase));

package/dist/components/pill-manager/expander.d.ts

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

package/dist/components/pill-manager/expander.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, memo } from "react";
+import { useSlot } from "../../hooks/use-slot/index.js";
+import { usePillRow } from "./pill-row.context.js";
+import { CollapseIcon, ExpandIcon, Icon } from "./icons.js";
+function PillRowExpanderBase({ render, ...props }, forwarded) {
+    const { expandToggle, expanded, row } = usePillRow();
+    const expander = render ?? (_jsx("div", { "data-ln-pill-expander": true, children: _jsx("button", { "data-ln-button": "secondary", "data-ln-size": "md", "data-ln-expanded": expanded, "data-ln-icon": true, onClick: () => expandToggle(), children: _jsx(Icon, { children: expanded ? _jsx(CollapseIcon, {}) : _jsx(ExpandIcon, {}) }) }) }));
+    const slot = useSlot({
+        props: [props],
+        slot: expander,
+        ref: forwarded,
+        state: {
+            expanded,
+            expandToggle,
+            row,
+        },
+    });
+    return slot;
+}
+export const PillRowExpander = memo(forwardRef(PillRowExpanderBase));

package/dist/components/pill-manager/icons.d.ts

@@ -0,0 +1,12 @@
+import type { JSX } from "react";
+export declare function Icon(props: JSX.IntrinsicElements["div"]): import("react/jsx-runtime").JSX.Element;
+type Props = JSX.IntrinsicElements["svg"];
+export declare const DragDots: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Measure: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const RowGroups: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Columns: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const RowPivots: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnPivots: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ExpandIcon: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const CollapseIcon: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};