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

package/dist/components/row-group-cell.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSlot } from "../hooks/use-slot/index.js";
+export const RowGroupCell = ({ api, row, leafLabel, groupLabel, aggLabel, expansionSlot, }) => {
+    const label = getRowLabel(row, api, leafLabel, groupLabel, aggLabel);
+    const depth = row.depth;
+    const slot = useSlot({
+        slot: row.kind === "branch" && row.expandable
+            ? (expansionSlot ?? (_jsxs("button", { "data-ln-component-group-cell-expander": true, "data-ln-component-group-cell-error": !!row.errorGroup, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (row.errorGroup) {
+                        // Retry will be defined on the server data source
+                        if (api.retry)
+                            api.retry();
+                    }
+                    else {
+                        api.rowGroupToggle(row.id);
+                    }
+                }, "aria-label": "toggle the row group expansion state", disabled: row.loadingGroup, children: [row.loadingGroup && !row.errorGroup && _jsx(LoadingSpinner, {}), !row.loadingGroup && !row.errorGroup && _jsx(CaretRight, {}), !!row.errorGroup && _jsx(WarningIcon, {})] })))
+            : undefined,
+        state: { row, api },
+    });
+    return (_jsxs("div", { "data-ln-component-group-cell": row.kind, "data-ln-component-group-cell-depth": depth, "data-ln-component-group-cell-expanded": api.rowIsGroup(row) && row.expanded, "data-ln-component-group-cell-expandable": api.rowIsGroup(row) ? row.expandable : undefined, style: { "--ln-row-depth": depth }, children: [slot, _jsx("div", { children: label })] }));
+};
+function getRowLabel(row, api, leafLabel, groupLabel, aggLabel) {
+    if (row.kind === "leaf")
+        return leafLabel?.(row, api) ?? "";
+    if (row.kind === "aggregated")
+        return aggLabel?.(row, api) ?? (row.id === "ln-pivot-grand-total" ? "Grand Total" : row.id);
+    return groupLabel?.(row, api) ?? (!row.key ? "(blank)" : row.key);
+}
+function CaretRight() {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentcolor", viewBox: "0 0 256 256", children: _jsx("path", { d: "M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z" }) }));
+}
+function LoadingSpinner(props) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 24 24", ...props, children: [_jsx("path", { fill: "currentColor", d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: 0.25 }), _jsx("path", { fill: "currentColor", d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", children: _jsx("animateTransform", { attributeName: "transform", dur: "0.75s", repeatCount: "indefinite", type: "rotate", values: "0 12 12;360 12 12" }) })] }));
+}
+function WarningIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentcolor", viewBox: "0 0 256 256", ...props, children: _jsx("path", { d: "M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z" }) }));
+}

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

@@ -0,0 +1,12 @@
+import { type SlotComponent } from "../hooks/use-slot/index.js";
+import type { API, GridSpec } from "../types/index.js";
+export interface SelectAllProps {
+    readonly slot?: SlotComponent<{
+        readonly indeterminate: boolean;
+        readonly selected: boolean;
+        readonly toggle: (forceState?: boolean) => void;
+    }>;
+}
+export declare function SelectAll<Spec extends GridSpec>({ api, slot, }: SelectAllProps & {
+    readonly api: API<Spec>;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/select-all.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useSlot } from "../hooks/use-slot/index.js";
+import { useEvent } from "@1771technologies/lytenyte-core/internal";
+export function SelectAll({ api, slot, }) {
+    const s = api.useSelectionState();
+    const selected = useMemo(() => {
+        const selected = s.kind === "isolated" ? s.selected && s.exceptions.size === 0 : s.selected && s.children.size === 0;
+        return selected;
+    }, [s]);
+    const indeterminate = useMemo(() => {
+        if (s.kind === "isolated")
+            return !!s.exceptions.size;
+        return Boolean(s.children.size);
+    }, [s]);
+    const toggle = useEvent((b) => {
+        if (b != null)
+            return api.rowSelect({ selected: "all", deselect: !b });
+        api.rowSelect({ selected: "all", deselect: selected });
+    });
+    const rendered = useSlot({
+        slot: slot ?? (_jsx("input", { "aria-label": "Toggle the selection for all the rows in the grid.", ref: (x) => {
+                if (!x)
+                    return;
+                x.indeterminate = indeterminate;
+            }, type: "checkbox", checked: selected, onChange: () => toggle() })),
+        state: {
+            selected,
+            indeterminate,
+            toggle,
+        },
+    });
+    return rendered;
+}

package/dist/components/smart-select/chip-context.d.ts

@@ -0,0 +1,8 @@
+export declare const ChipContextProvider: import("react").Provider<{
+    activeChip: string | null;
+    setActiveChip: (s: string | null) => void;
+}>;
+export declare const useChipContext: () => {
+    activeChip: string | null;
+    setActiveChip: (s: string | null) => void;
+};

package/dist/components/smart-select/chip-context.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+const context = createContext({});
+export const ChipContextProvider = context.Provider;
+export const useChipContext = () => useContext(context);

package/dist/components/smart-select/chip-remove.d.ts

@@ -0,0 +1 @@
+export declare const ChipRemove: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/smart-select/chip-remove.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useChip } from "./chip.js";
+function ChipRemoveBase(props, ref) {
+    const remove = useChip();
+    return (_jsx("button", { ...props, ref: ref, onClick: (ev) => {
+            props.onClick?.(ev);
+            if (ev.isPropagationStopped() || ev.defaultPrevented)
+                return;
+            remove();
+        } }));
+}
+export const ChipRemove = forwardRef(ChipRemoveBase);

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

@@ -0,0 +1,13 @@
+import { type JSX } from "react";
+import { type SlotComponent } from "../../hooks/use-slot/index.js";
+import type { BaseOption } from "./type.js";
+export type ChipProps<T extends BaseOption> = JSX.IntrinsicElements["div"] & {
+    readonly option: T;
+    readonly render?: SlotComponent<{
+        option: T;
+        active: boolean;
+        remove: () => void;
+    }>;
+};
+export declare const useChip: () => () => void;
+export declare const Chip: import("react").ForwardRefExoticComponent<Omit<ChipProps<BaseOption>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from "react";
+import { useSlot } from "../../hooks/use-slot/index.js";
+import { useChipContext } from "./chip-context.js";
+import { useSmartSelect } from "./context.js";
+import { useEvent } from "@1771technologies/lytenyte-core/internal";
+const context = createContext(null);
+export const useChip = () => useContext(context);
+function ChipBase({ render, option, ...props }, ref) {
+    const { activeChip, setActiveChip } = useChipContext();
+    const { kindAndValue: { value }, onOptionsChange, preventNextOpen, rtl, trigger, inputRef, } = useSmartSelect();
+    const v = value;
+    const remove = useEvent(() => {
+        onOptionsChange(v.filter((x) => x.id !== option.id));
+        preventNextOpen.current = true;
+    });
+    const r = useSlot({
+        props: [
+            props,
+            { tabIndex: -1, "data-ln-smart-select-chip": option.id },
+            {
+                onKeyDown: (ev) => {
+                    const start = rtl ? "ArrowRight" : "ArrowLeft";
+                    const end = rtl ? "ArrowLeft" : "ArrowRight";
+                    const chips = Array.from(trigger.querySelectorAll("[data-ln-smart-select-chip]"));
+                    const thisIndex = chips.indexOf(ev.currentTarget);
+                    if (thisIndex === -1)
+                        return;
+                    if (ev.key === "Backspace" || ev.key === "Delete") {
+                        remove();
+                        const dir = ev.key === "Backspace" ? 1 : -1;
+                        let next = chips[thisIndex + dir];
+                        if (!next)
+                            next = chips[thisIndex - dir];
+                        if (!next) {
+                            setActiveChip(null);
+                            inputRef.current?.focus();
+                        }
+                        else {
+                            next.focus();
+                            setActiveChip(next.getAttribute("data-ln-smart-select-chip"));
+                        }
+                        return;
+                    }
+                    if (ev.key === "Delete" || ev.key === "Backspace") {
+                        console.log(" i ran");
+                    }
+                    if (ev.key === start) {
+                        const next = chips[thisIndex - 1];
+                        if (!next)
+                            return;
+                        next.focus();
+                        setActiveChip(next.getAttribute("data-ln-smart-select-chip"));
+                    }
+                    else if (ev.key === end) {
+                        const next = chips[thisIndex + 1];
+                        if (!next) {
+                            setActiveChip(null);
+                            inputRef.current?.focus();
+                        }
+                        else {
+                            next.focus();
+                            setActiveChip(next.getAttribute("data-ln-smart-select-chip"));
+                        }
+                    }
+                },
+            },
+        ],
+        ref: ref,
+        slot: render ?? _jsx("div", {}),
+        state: {
+            option,
+            active: activeChip === option.id,
+            remove,
+        },
+    });
+    return _jsx(context.Provider, { value: remove, children: r });
+}
+export const Chip = forwardRef(ChipBase);

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

@@ -0,0 +1 @@
+export declare const SmartSelectContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Popover } from "../headless/popover/index.js";
+import { useSmartSelect } from "./context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+function SmartSelectContainerBase(props, ref) {
+    const { setContainer } = useSmartSelect();
+    const combined = useCombinedRefs(ref, setContainer);
+    return (_jsx(Popover.Container, { ...props, onClick: (e) => {
+            e.preventDefault();
+        }, ref: combined, "data-ln-smart-select-container": true }));
+}
+export const SmartSelectContainer = forwardRef(SmartSelectContainerBase);

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

@@ -0,0 +1,31 @@
+import { type Dispatch, type RefObject, type SetStateAction } from "react";
+import type { BaseOption, SmartSelectKinds } from "./type";
+import type { ComboOptionState } from "./use-async-options";
+export interface SmartSelectContext {
+    readonly kindAndValue: SmartSelectKinds<BaseOption>;
+    readonly open: boolean;
+    readonly onOpenChange: (b: boolean) => void;
+    readonly openKeys: string[];
+    readonly closeKeys: string[];
+    readonly options: BaseOption[];
+    readonly openOnClick: boolean;
+    readonly closeOnSelect: boolean;
+    readonly onOptionSelect: (b: BaseOption) => void;
+    readonly onOptionsChange: (b: BaseOption[]) => void;
+    readonly rtl: boolean;
+    readonly inputRef: RefObject<HTMLElement | null>;
+    readonly trigger: HTMLElement | null;
+    readonly setTrigger: Dispatch<SetStateAction<HTMLElement | null>>;
+    readonly activeId: string | null;
+    readonly setActiveId: Dispatch<SetStateAction<string | null>>;
+    readonly container: HTMLElement | null;
+    readonly setContainer: Dispatch<SetStateAction<HTMLElement | null>>;
+    readonly query: string;
+    readonly onQueryChange: (change: string) => void;
+    readonly comboState: ComboOptionState<BaseOption>;
+    readonly preventNextOpen: {
+        current: boolean;
+    };
+}
+export declare const SmartSelectProvider: import("react").Provider<SmartSelectContext>;
+export declare const useSmartSelect: () => SmartSelectContext;

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

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+const context = createContext({});
+export const SmartSelectProvider = context.Provider;
+export const useSmartSelect = () => useContext(context);

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

@@ -0,0 +1,30 @@
+import type { JSX } from "react";
+import type { Popover } from "../headless/popover";
+import { type ChipProps } from "./chip.js";
+import type { SmartSelectRootProps } from "./root";
+import { type MultiComboTriggerProps } from "./triggers/multi-combo-trigger.js";
+import { type MultiTriggerProps } from "./triggers/multi-trigger.js";
+import type { BaseOption } from "./type";
+export declare const SmartSelect: {
+    <T extends BaseOption>(props: SmartSelectRootProps<T>): import("react/jsx-runtime").JSX.Element;
+    Container: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+    Chip: import("react").ForwardRefExoticComponent<Omit<ChipProps<BaseOption>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ChipRemove: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    BasicTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    MultiTrigger: import("react").ForwardRefExoticComponent<Omit<MultiTriggerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ComboTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    MultiComboTrigger: import("react").ForwardRefExoticComponent<Omit<MultiComboTriggerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Option: import("react").ForwardRefExoticComponent<Omit<import("./option.js").OptionTriggerProps<BaseOption>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export declare namespace SmartSelect {
+    type Props<T extends BaseOption> = SmartSelectRootProps<T>;
+    namespace Component {
+        type Container = Popover.Component.Container;
+        type Chip<T extends BaseOption> = ChipProps<T>;
+        type BasicTrigger = JSX.IntrinsicElements["button"];
+        type MultiTrigger = MultiTriggerProps;
+        type ComboTrigger = JSX.IntrinsicElements["input"];
+        type MultiComboTrigger = MultiComboTriggerProps;
+        type ChipRemove = JSX.IntrinsicElements["button"];
+    }
+}

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip } from "./chip.js";
+import { SmartSelectContainer } from "./container.js";
+import { Option } from "./option.js";
+import { SmartSelectRoot } from "./root.js";
+import { BasicSelectTrigger } from "./triggers/basic-trigger.js";
+import { ComboTrigger } from "./triggers/combo-trigger.js";
+import { MultiComboTrigger } from "./triggers/multi-combo-trigger.js";
+import { MultiTrigger } from "./triggers/multi-trigger.js";
+import { ChipRemove } from "./chip-remove.js";
+export const SmartSelect = (props) => (_jsx(SmartSelectRoot, { ...props }));
+SmartSelect.Container = SmartSelectContainer;
+SmartSelect.Chip = Chip;
+SmartSelect.ChipRemove = ChipRemove;
+SmartSelect.BasicTrigger = BasicSelectTrigger;
+SmartSelect.MultiTrigger = MultiTrigger;
+SmartSelect.ComboTrigger = ComboTrigger;
+SmartSelect.MultiComboTrigger = MultiComboTrigger;
+SmartSelect.Option = Option;

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

@@ -0,0 +1,8 @@
+import { type JSX } from "react";
+import { type SlotComponent } from "../../hooks/use-slot/index.js";
+import type { BaseOption, OptionRenderProps } from "./type.js";
+export type OptionTriggerProps<T extends BaseOption> = JSX.IntrinsicElements["div"] & {
+    readonly render?: SlotComponent<OptionRenderProps<T>>;
+    readonly closeOnSelect?: boolean;
+} & OptionRenderProps<T>;
+export declare const Option: import("react").ForwardRefExoticComponent<Omit<OptionTriggerProps<BaseOption>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,36 @@
+import { forwardRef } from "react";
+import { useSlot } from "../../hooks/use-slot/index.js";
+import { useSmartSelect } from "./context.js";
+function OptionBase({ render, option, active, selected, closeOnSelect: closeOverride, ...props }, ref) {
+    const { onOptionSelect, setActiveId, closeOnSelect, onOpenChange, inputRef } = useSmartSelect();
+    const closeOnSelectFinal = closeOverride ?? closeOnSelect;
+    const r = useSlot({
+        props: [
+            {
+                "data-ln-selected": selected,
+                "data-ln-active": active,
+                "data-ln-smart-option": option.id,
+                "data-ln-selectable": option.selectable ?? true,
+                "data-ln-close-on-select": closeOnSelectFinal,
+            },
+            {
+                onMouseDown: () => {
+                    onOptionSelect(option);
+                },
+                onClick: () => {
+                    inputRef.current?.focus();
+                    if (closeOnSelectFinal)
+                        onOpenChange(false);
+                },
+                onMouseEnter: () => setActiveId(option.id),
+                onMouseLeave: () => setActiveId(null),
+            },
+            props,
+        ],
+        ref,
+        slot: render,
+        state: { option, selected, active },
+    });
+    return r;
+}
+export const Option = forwardRef(OptionBase);

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

@@ -0,0 +1,17 @@
+import { type PropsWithChildren, type ReactNode } from "react";
+import type { SlotComponent } from "../../hooks/use-slot/types.js";
+import type { BaseOption, OptionRenderProps, SmartSelectKinds } from "./type.js";
+import { type ComboOptionState } from "./use-async-options.js";
+export type SmartSelectRootProps<T extends BaseOption> = {
+    readonly open?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    readonly onOpenChangeComplete?: (open: boolean) => void;
+    readonly openOnClick?: boolean;
+    readonly openKeys?: string[];
+    readonly closeKeys?: string[];
+    readonly trigger: SlotComponent;
+    readonly container?: SlotComponent<PropsWithChildren<ComboOptionState<T>>>;
+    readonly closeOnSelect?: boolean;
+    readonly children?: (params: OptionRenderProps<T>) => ReactNode;
+} & SmartSelectKinds<T>;
+export declare function SmartSelectRoot<T extends BaseOption>(p: SmartSelectRootProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useControlled, useEvent } from "@1771technologies/lytenyte-core/internal";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { SmartSelectProvider } from "./context.js";
+import { Popover } from "../headless/popover/index.js";
+import { useSlot } from "../../hooks/use-slot/use-slot.js";
+import { SmartSelectContainer } from "./container.js";
+import { Option } from "./option.js";
+import { useAsyncOptions } from "./use-async-options.js";
+import { getNearestMatching } from "@1771technologies/lytenyte-shared";
+import { createPortal } from "react-dom";
+export function SmartSelectRoot(p) {
+    const [open, setOpen] = useControlled({ controlled: p.open, default: false });
+    const [query, setQuery] = useControlled({ controlled: p.query, default: "" });
+    const [triggerEl, setTriggerEl] = useState(null);
+    const [activeId, setActiveId] = useState(null);
+    const [containerEl, setContainerEl] = useState(null);
+    const [rtl, setRtl] = useState(false);
+    const triggerRef = useCallback((el) => {
+        setTriggerEl(el);
+        if (!el)
+            return;
+        const style = getComputedStyle(el);
+        setRtl(style.direction === "rtl");
+    }, []);
+    const onOpenChange = useEvent((b) => {
+        setOpen(b);
+        p.onOpenChange?.(b);
+    });
+    const onQueryChange = useEvent((change) => {
+        setQuery(change);
+        p.onQueryChange?.(change);
+    });
+    const normalizedValue = useMemo(() => {
+        if (p.kind === "basic" || p.kind === "combo")
+            return [p.value];
+        return p.value;
+    }, [p.kind, p.value]);
+    const clearOnSelect = p.clearOnSelect ?? true;
+    const onOptionSelect = useEvent((change) => {
+        if (p.kind === "basic" || p.kind === "combo") {
+            const isSelected = p.value?.id === change.id;
+            if (isSelected)
+                p.onOptionChange(null);
+            else
+                p.onOptionChange(change);
+        }
+        else {
+            const isSelected = p.value.find((x) => x.id === change.id);
+            const next = isSelected ? p.value.filter((x) => x.id !== change.id) : [...p.value, change];
+            p.onOptionChange(next);
+        }
+        if (clearOnSelect)
+            onQueryChange("");
+    });
+    const onOptionsChange = useEvent((change) => {
+        if (p.kind === "basic" || p.kind === "combo")
+            return;
+        p.onOptionChange(change);
+    });
+    const optValue = typeof p.options === "function" ? null : p.options;
+    const basicSelectOptions = useMemo(() => {
+        return optValue ?? [];
+    }, [optValue]);
+    const comboState = useAsyncOptions(typeof p.options === "function" ? p.options : null, p.clearOnQuery ?? false);
+    const options = typeof p.options === "function" ? comboState.options : basicSelectOptions;
+    const debounce = p.kind === "multi" || p.kind === "multi-combo"
+        ? (p.searchDebounceMs ?? 200)
+        : 0;
+    const loadOptions = comboState.loadOptions;
+    useEffect(() => {
+        if (p.kind !== "multi-combo" && p.kind !== "combo")
+            return;
+        const t = setTimeout(() => {
+            loadOptions(query);
+        }, debounce);
+        return () => clearTimeout(t);
+    }, [loadOptions, debounce, p.kind, query]);
+    useEffect(() => {
+        if (!open)
+            return;
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setActiveId((prev) => {
+            const active = prev ? (options.find((x) => x.id === prev) ?? null) : null;
+            if (!active)
+                queueMicrotask(() => setActiveId(options.at(0)?.id ?? null));
+            return prev;
+        });
+    }, [comboState, open, options]);
+    const renderedOptions = useMemo(() => {
+        const render = p.children ?? DefaultChildren;
+        return options.map((x) => {
+            const selected = !!normalizedValue.find((v) => x.id === v?.id);
+            const active = x.id === activeId;
+            return _jsx(Fragment, { children: render({ option: x, selected, active }) }, x.id);
+        });
+    }, [activeId, normalizedValue, options, p.children]);
+    const trigger = useSlot({ slot: p.trigger });
+    const container = useSlot({
+        props: [{ children: renderedOptions }],
+        slot: p.container ?? _jsx(SmartSelectContainer, {}),
+        state: {
+            children: renderedOptions,
+            ...comboState,
+            options,
+        },
+    });
+    const inputRef = useRef(null);
+    const value = useMemo(() => {
+        return {
+            onOpenChange,
+            open,
+            closeOnSelect: p.closeOnSelect ?? true,
+            onOptionSelect,
+            onOptionsChange,
+            kindAndValue: { kind: p.kind, value: p.value },
+            options,
+            inputRef,
+            trigger: triggerEl,
+            setTrigger: triggerRef,
+            rtl,
+            openKeys: p.openKeys ?? [" ", "Enter", "ArrowDown"],
+            closeKeys: p.closeKeys ?? ["Escape"],
+            activeId: activeId,
+            setActiveId: setActiveId,
+            container: containerEl,
+            setContainer: setContainerEl,
+            query,
+            onQueryChange,
+            openOnClick: p.openOnClick ?? true,
+            preventNextOpen: { current: false },
+            comboState,
+        };
+    }, [
+        activeId,
+        comboState,
+        containerEl,
+        onOpenChange,
+        onOptionSelect,
+        onOptionsChange,
+        onQueryChange,
+        open,
+        options,
+        p.closeKeys,
+        p.closeOnSelect,
+        p.kind,
+        p.openKeys,
+        p.openOnClick,
+        p.value,
+        query,
+        rtl,
+        triggerEl,
+        triggerRef,
+    ]);
+    const lightDismiss = useCallback((el) => {
+        const closest = getNearestMatching(el, (el) => el === triggerEl);
+        if (!closest)
+            return true;
+        return false;
+    }, [triggerEl]);
+    return (_jsx(SmartSelectProvider, { value: value, children: _jsxs(Popover, { open: open, onOpenChange: onOpenChange, onOpenChangeComplete: p.onOpenChangeComplete, focusTrap: false, modal: false, anchor: triggerEl, lightDismiss: lightDismiss, children: [trigger, triggerEl && createPortal(container, triggerEl)] }) }));
+}
+function DefaultChildren(p) {
+    return _jsx(Option, { ...p });
+}

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

@@ -0,0 +1,2 @@
+import "../../../css/components.css";
+export default function SmartSelect(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../../../css/components.css";
+import { useState } from "react";
+import { SmartSelectRoot } from "./root.js";
+import { Option } from "./option.js";
+import { SmartSelectContainer } from "./container.js";
+import { Chip } from "./chip.js";
+import { MultiTrigger } from "./triggers/multi-trigger.js";
+const options = [
+    { id: "js", label: "JavaScript" },
+    { id: "ts", label: "TypeScript" },
+    { id: "py", label: "Python" },
+    { id: "java", label: "Java" },
+    { id: "cpp", label: "C++" },
+    { id: "cs", label: "C#" },
+    { id: "php", label: "PHP" },
+    { id: "ruby", label: "Ruby" },
+    { id: "go", label: "Go" },
+    { id: "rust", label: "Rust" },
+    { id: "swift", label: "Swift" },
+];
+export default function SmartSelect() {
+    const [value, setValue] = useState([options[0]]);
+    void setValue;
+    return (_jsx("div", { style: { display: "flex", justifyContent: "center", padding: 20 }, children: _jsx(SmartSelectRoot, { options: options, value: value, onOptionChange: (v) => {
+                if (!v)
+                    return;
+                setValue(v);
+            }, closeOnSelect: false, kind: "multi", container: (p) => {
+                return (_jsxs(SmartSelectContainer, { children: [p.loading && _jsx("div", { children: "Loading...." }), p.children] }));
+            }, trigger: _jsx(MultiTrigger, { render: _jsxs("button", { "data-ln-button": "website", "data-ln-size": "md", children: [_jsx("div", { children: "Select Items" }), _jsx("div", {})] }), className: "flex items-center", children: value.map((x) => {
+                    return (_jsx(Chip, { option: x, render: (p) => (_jsxs("div", { children: [x.label, p.active && "A"] })) }, x.id));
+                }) }), children: (p) => {
+                return (_jsxs(Option, { ...p, children: [_jsx("div", { children: p.option.label }), _jsx("div", { children: p.selected && "✔️" })] }));
+            } }) }));
+}

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

@@ -0,0 +1 @@
+export declare const BasicSelectTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useSmartSelect } from "../context.js";
+import { mergeProps } from "../../../hooks/use-slot/merge-props.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+import { useSelectControls } from "./use-trigger-controls.js";
+const noop = () => { };
+function BasicSelectTriggerBase(props, ref) {
+    const { kindAndValue, setTrigger, inputRef, open } = useSmartSelect();
+    if (kindAndValue.kind !== "basic") {
+        throw new Error(`Cannot use BasicSelectTrigger when SmartSelect kind is not "basic". Found: ${kindAndValue.kind}`);
+    }
+    const triggerControls = useSelectControls(false, noop);
+    const p = mergeProps(props, triggerControls);
+    const combined = useCombinedRefs(setTrigger, ref, inputRef);
+    return _jsx("button", { ...p, ref: combined, "data-ln-smart-select-trigger": true, "data-ln-open": open });
+}
+export const BasicSelectTrigger = forwardRef(BasicSelectTriggerBase);

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

@@ -0,0 +1 @@
+export declare const ComboTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useSmartSelect } from "../context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+import { mergeProps } from "../../../hooks/use-slot/merge-props.js";
+import { useComboControls } from "./use-combo-controls.js";
+const noop = () => { };
+function ComboTriggerBase(props, ref) {
+    const { kindAndValue, setTrigger, inputRef, open, comboState } = useSmartSelect();
+    if (kindAndValue.kind !== "combo") {
+        throw new Error(`Cannot use BasicSelectTrigger when SmartSelect kind is not "combo". Found: ${kindAndValue.kind}`);
+    }
+    const combined = useCombinedRefs(setTrigger, ref, inputRef);
+    const p = mergeProps(props, useComboControls(noop, false));
+    return (_jsx("input", { ...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 }));
+}
+export const ComboTrigger = forwardRef(ComboTriggerBase);