@johly/bits-ui 2.18.1

package/dist/bits/menu-data/components/data-surface.svelte

@@ -0,0 +1,68 @@
+<script lang="ts" generics="TMeta = any">
+	import { mergeProps } from "svelte-toolbelt";
+	import type { DataSurfaceProps } from "../types.js";
+	import {
+		DataMenuSurfaceState,
+		dataMenuAttrs,
+		resolveDeepSearchConfig,
+		setDataMenuSurfaceContext,
+	} from "../menu-data.svelte.js";
+	import { noop } from "../../../internal/noop.js";
+
+	let {
+		content,
+		defaultSearch = "",
+		deepSearch = true,
+		search = $bindable(defaultSearch),
+		onSearchChange = noop,
+		loop = true,
+		autoHighlightFirst = true,
+		clearSearchOnClose = true,
+		children,
+		ref = $bindable(null),
+		onfocusin,
+		onpointermove,
+		...restProps
+	}: DataSurfaceProps<TMeta> = $props();
+
+	function setSearch(value: string) {
+		search = value;
+		onSearchChange(value);
+	}
+
+	const surfaceState = new DataMenuSurfaceState<TMeta>({
+		content: () => content,
+		deepSearchConfig: () => resolveDeepSearchConfig(deepSearch),
+		search: () => search,
+		setSearch,
+		loop: () => loop,
+		autoHighlightFirst: () => autoHighlightFirst,
+		clearSearchOnClose: () => clearSearchOnClose,
+	});
+
+	setDataMenuSurfaceContext(surfaceState);
+
+	function handleFocusIn(event: FocusEvent) {
+		onfocusin?.(event as FocusEvent & { currentTarget: EventTarget & HTMLDivElement });
+		if (event.defaultPrevented) return;
+		surfaceState.activate();
+	}
+
+	function handlePointerMove(event: PointerEvent) {
+		onpointermove?.(event as PointerEvent & { currentTarget: EventTarget & HTMLDivElement });
+		if (event.defaultPrevented) return;
+		surfaceState.activate();
+	}
+
+	const mergedProps = $derived(
+		mergeProps(restProps, {
+			onfocusin: handleFocusIn,
+			onpointermove: handlePointerMove,
+			[dataMenuAttrs.surface]: "",
+		})
+	);
+</script>
+
+<div bind:this={ref} {...mergedProps}>
+	{@render children?.()}
+</div>

package/dist/bits/menu-data/components/data-surface.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { DataSurfaceProps } from "../types.js";
+declare class __sveltets_Render<TMeta = any> {
+    props(): DataSurfaceProps<TMeta>;
+    events(): {};
+    slots(): {};
+    bindings(): "search" | "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TMeta = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TMeta>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TMeta>['props']>, ReturnType<__sveltets_Render<TMeta>['events']>, ReturnType<__sveltets_Render<TMeta>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TMeta>['bindings']>;
+    } & ReturnType<__sveltets_Render<TMeta>['exports']>;
+    <TMeta = any>(internal: unknown, props: ReturnType<__sveltets_Render<TMeta>['props']> & {}): ReturnType<__sveltets_Render<TMeta>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataSurface: $$IsomorphicComponent;
+type DataSurface<TMeta = any> = InstanceType<typeof DataSurface<TMeta>>;
+export default DataSurface;

package/dist/bits/menu-data/exports.d.ts

@@ -0,0 +1,5 @@
+export { default as DataSurface } from "./components/data-surface.svelte";
+export { default as DataInput } from "./components/data-input.svelte";
+export { default as DataList } from "./components/data-list.svelte";
+export { default as DataEmpty } from "./components/data-empty.svelte";
+export type { CheckboxItemDef, DataEmptyProps, DataInputProps, DataListChildrenSnippetProps, DataListProps, DataSurfaceProps, DeepSearchConfig, DeepSearchProp, DisplayGroupNode, DisplayNode, DisplayRadioGroupNode, DisplayRowNode, GroupDef, GroupRenderContext, ItemDef, NodeDef, RadioGroupDef, RowRenderContext, SeparatorDef, SubmenuDef, } from "./types.js";

package/dist/bits/menu-data/exports.js

@@ -0,0 +1,4 @@
+export { default as DataSurface } from "./components/data-surface.svelte";
+export { default as DataInput } from "./components/data-input.svelte";
+export { default as DataList } from "./components/data-list.svelte";
+export { default as DataEmpty } from "./components/data-empty.svelte";

package/dist/bits/menu-data/menu-data.svelte.d.ts

@@ -0,0 +1,62 @@
+import type { DeepSearchConfig, DeepSearchProp, DataInputVisibility, DisplayNode, NodeDef } from "./types.js";
+import { type MenuHighlightModality } from "../menu/menu.svelte.js";
+export declare const dataMenuAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["surface", "input", "list", "empty"]>;
+export declare function setDataMenuSurfaceContext(state: DataMenuSurfaceState): DataMenuSurfaceState<any>;
+export declare function useDataMenuSurfaceContext<TMeta = any>(): DataMenuSurfaceState<TMeta>;
+export declare function resolveDeepSearchConfig(deepSearch?: DeepSearchProp): Required<DeepSearchConfig>;
+interface DataMenuSurfaceStateOpts<TMeta> {
+    content: () => Array<NodeDef<TMeta>>;
+    deepSearchConfig: () => Required<DeepSearchConfig>;
+    search: () => string;
+    setSearch: (value: string) => void;
+    loop: () => boolean;
+    autoHighlightFirst: () => boolean;
+    clearSearchOnClose: () => boolean;
+}
+export declare class DataMenuSurfaceState<TMeta = any> {
+    #private;
+    readonly opts: DataMenuSurfaceStateOpts<TMeta>;
+    readonly menuContent: import("../menu/menu.svelte.js").MenuContentState | null;
+    inputActive: boolean;
+    inputVisibility: DataInputVisibility;
+    inputNode: HTMLInputElement | null;
+    listNode: HTMLElement | null;
+    highlightedId: string | null;
+    constructor(opts: DataMenuSurfaceStateOpts<TMeta>);
+    get contentId(): string;
+    get parentContentId(): string | null;
+    get isActive(): boolean;
+    get isRootSurface(): boolean;
+    get isMenuChainOpen(): boolean;
+    get isParentMenuChainOpen(): boolean;
+    get shouldAutoActivateOnOpen(): boolean;
+    get shouldRenderInput(): boolean;
+    setInputVisibility(visibility: DataInputVisibility): void;
+    activate(): void;
+    focusPreferred(): void;
+    setHighlightedId(id: string | null, opts?: {
+        scroll?: boolean;
+        modality?: MenuHighlightModality;
+    }): void;
+    revealInput(seed?: string): boolean;
+    get content(): NodeDef<TMeta>[];
+    get search(): string;
+    setSearch(value: string): void;
+    get deepSearchConfig(): Required<DeepSearchConfig>;
+    get result(): {
+        displayNodes: Array<DisplayNode<TMeta>>;
+        isDeepSearching: boolean;
+    };
+    get displayNodes(): DisplayNode<TMeta>[];
+    get isDeepSearching(): boolean;
+    get navigableIds(): string[];
+    selectShortcut(key: string): boolean;
+    highlightNext(): void;
+    highlightPrevious(): void;
+    highlightFirst(): void;
+    highlightLast(): void;
+    openHighlightedSubmenu(): boolean;
+    selectHighlighted(): boolean;
+    closeToParent(): boolean;
+}
+export {};

package/dist/bits/menu-data/menu-data.svelte.js

@@ -0,0 +1,378 @@
+import { Context, watch } from "runed";
+import { afterTick, onDestroyEffect } from "svelte-toolbelt";
+import { untrack } from "svelte";
+import { createBitsAttrs } from "../../internal/attrs.js";
+import { filterNodes } from "./utils.js";
+import { useMaybeMenuContentContext, } from "../menu/menu.svelte.js";
+export const dataMenuAttrs = createBitsAttrs({
+    component: "menu-data",
+    parts: ["surface", "input", "list", "empty"],
+});
+const DataMenuSurfaceContext = new Context("DataMenu.Surface");
+export function setDataMenuSurfaceContext(state) {
+    return DataMenuSurfaceContext.set(state);
+}
+export function useDataMenuSurfaceContext() {
+    return DataMenuSurfaceContext.get();
+}
+export function resolveDeepSearchConfig(deepSearch = true) {
+    if (typeof deepSearch === "boolean") {
+        return {
+            enabled: deepSearch,
+            minLength: 0,
+            groupSearchBehavior: "preserve",
+            radioGroupSearchBehavior: "preserve",
+            sortGroups: true,
+        };
+    }
+    return {
+        enabled: deepSearch.enabled ?? true,
+        minLength: deepSearch.minLength ?? 0,
+        groupSearchBehavior: deepSearch.groupSearchBehavior ?? "preserve",
+        radioGroupSearchBehavior: deepSearch.radioGroupSearchBehavior ?? "preserve",
+        sortGroups: deepSearch.sortGroups ?? true,
+    };
+}
+export class DataMenuSurfaceState {
+    opts;
+    menuContent = useMaybeMenuContentContext();
+    inputActive = $state(true);
+    inputVisibility = $state("always");
+    inputNode = $state(null);
+    listNode = $state(null);
+    highlightedId = $state(null);
+    #activationPending = false;
+    constructor(opts) {
+        this.opts = opts;
+        if (this.menuContent) {
+            this.menuContent.virtualFocus = true;
+            this.menuContent.parentMenu.root.registerDataMenuSurface({
+                contentId: this.contentId,
+                parentContentId: this.parentContentId,
+                focusPreferred: () => this.focusPreferred(),
+            });
+            onDestroyEffect(() => {
+                this.menuContent?.parentMenu.root.unregisterDataMenuSurface(this.contentId);
+                if (this.menuContent) {
+                    this.menuContent.virtualFocus = false;
+                }
+            });
+            watch(() => this.menuContent?.parentMenu.opts.open.current, (open) => {
+                if (open) {
+                    afterTick(() => {
+                        if (!this.menuContent?.parentMenu.opts.open.current)
+                            return;
+                        if (!this.shouldAutoActivateOnOpen)
+                            return;
+                        this.activate();
+                    });
+                    return;
+                }
+                this.highlightedId = null;
+                this.menuContent?.setVirtualHighlightedId(null, {
+                    scroll: false,
+                    modality: null,
+                });
+                this.inputActive = this.inputVisibility === "always";
+                if (this.opts.clearSearchOnClose()) {
+                    this.opts.setSearch("");
+                }
+                const root = this.menuContent?.parentMenu.root;
+                untrack(() => {
+                    if (root?.activeDataMenuContentId === this.contentId) {
+                        if (this.parentContentId && this.isParentMenuChainOpen) {
+                            root.activateDataMenuSurface(this.parentContentId);
+                        }
+                        else {
+                            root.activateDataMenuSurface(null);
+                        }
+                    }
+                });
+            });
+            $effect(() => {
+                if (!this.menuContent)
+                    return;
+                if (!this.menuContent.parentMenu.opts.open.current)
+                    return;
+                if (!this.menuContent.parentMenu.contentNode)
+                    return;
+                if (!this.shouldAutoActivateOnOpen)
+                    return;
+                this.#queueActivation();
+            });
+            $effect(() => {
+                const menuHighlightedId = this.menuContent?.highlightedId ?? null;
+                if (menuHighlightedId === this.highlightedId)
+                    return;
+                if (menuHighlightedId !== null && !this.navigableIds.includes(menuHighlightedId))
+                    return;
+                this.highlightedId = menuHighlightedId;
+            });
+        }
+        $effect(() => {
+            const ids = this.navigableIds;
+            if (!this.opts.autoHighlightFirst())
+                return;
+            if (ids.length === 0) {
+                this.setHighlightedId(null, { scroll: false, modality: null });
+                return;
+            }
+            if (!this.highlightedId || !ids.includes(this.highlightedId)) {
+                this.setHighlightedId(ids[0] ?? null, { scroll: false, modality: "auto" });
+            }
+        });
+    }
+    get contentId() {
+        return this.menuContent?.parentMenu.contentId.current ?? "";
+    }
+    get parentContentId() {
+        return this.menuContent?.parentMenu.parentMenu?.contentId.current ?? null;
+    }
+    get isActive() {
+        return this.menuContent?.parentMenu.root.activeDataMenuContentId === this.contentId;
+    }
+    get isRootSurface() {
+        return this.menuContent?.parentMenu.parentMenu === null;
+    }
+    get isMenuChainOpen() {
+        let menu = this.menuContent?.parentMenu ?? null;
+        while (menu) {
+            if (!menu.opts.open.current)
+                return false;
+            menu = menu.parentMenu;
+        }
+        return true;
+    }
+    get isParentMenuChainOpen() {
+        let menu = this.menuContent?.parentMenu.parentMenu ?? null;
+        while (menu) {
+            if (!menu.opts.open.current)
+                return false;
+            menu = menu.parentMenu;
+        }
+        return true;
+    }
+    get shouldAutoActivateOnOpen() {
+        if (this.isRootSurface)
+            return true;
+        const openModality = this.menuContent?.parentMenu.pendingOpenModality;
+        return openModality !== "preview";
+    }
+    get shouldRenderInput() {
+        if (this.inputVisibility === "hidden")
+            return false;
+        if (this.inputVisibility === "always")
+            return true;
+        return this.inputActive || this.search.length > 0;
+    }
+    setInputVisibility(visibility) {
+        if (this.inputVisibility === visibility)
+            return;
+        this.inputVisibility = visibility;
+        this.inputActive = visibility === "always";
+    }
+    activate() {
+        const menuContent = this.menuContent;
+        if (!menuContent)
+            return;
+        if (!this.isMenuChainOpen)
+            return;
+        if (menuContent.parentMenu.root.activeDataMenuContentId === this.contentId)
+            return;
+        untrack(() => {
+            menuContent.parentMenu.root.activateDataMenuSurface(menuContent.parentMenu.contentId.current);
+        });
+    }
+    #queueActivation() {
+        if (this.#activationPending)
+            return;
+        this.#activationPending = true;
+        afterTick(() => {
+            this.#activationPending = false;
+            if (!this.menuContent)
+                return;
+            if (!this.menuContent.parentMenu.opts.open.current)
+                return;
+            if (!this.menuContent.parentMenu.contentNode)
+                return;
+            if (!this.shouldAutoActivateOnOpen)
+                return;
+            this.activate();
+        });
+    }
+    focusPreferred() {
+        if (!this.isMenuChainOpen)
+            return;
+        const target = this.shouldRenderInput ? this.inputNode : null;
+        (target ?? this.listNode)?.focus({ preventScroll: true });
+    }
+    setHighlightedId(id, opts = {}) {
+        this.highlightedId = id;
+        this.menuContent?.setVirtualHighlightedId(id, opts);
+    }
+    revealInput(seed = "") {
+        if (this.inputVisibility === "hidden")
+            return false;
+        this.inputActive = true;
+        if (seed)
+            this.setSearch(seed);
+        afterTick(() => {
+            this.activate();
+            this.focusPreferred();
+            if (!seed || !this.inputNode)
+                return;
+            const length = this.inputNode.value.length;
+            this.inputNode.setSelectionRange(length, length);
+        });
+        return true;
+    }
+    get content() {
+        return this.opts.content();
+    }
+    get search() {
+        return this.opts.search();
+    }
+    setSearch(value) {
+        this.opts.setSearch(value);
+    }
+    get deepSearchConfig() {
+        return this.opts.deepSearchConfig();
+    }
+    get result() {
+        const config = this.deepSearchConfig;
+        return filterNodes({
+            query: this.search,
+            nodes: this.content,
+            highlightedId: this.highlightedId,
+            deepSearch: config.enabled,
+            minLength: config.minLength,
+            groupSearchBehavior: config.groupSearchBehavior,
+            radioGroupSearchBehavior: config.radioGroupSearchBehavior,
+            sortGroups: config.sortGroups,
+        });
+    }
+    get displayNodes() {
+        return this.result.displayNodes;
+    }
+    get isDeepSearching() {
+        return this.result.isDeepSearching;
+    }
+    get navigableIds() {
+        const ids = [];
+        for (const node of this.displayNodes) {
+            if ("kind" in node && node.kind === "group") {
+                for (const item of node.items) {
+                    if (!item.node.disabled)
+                        ids.push(item.node.id);
+                }
+            }
+            else if ("kind" in node && node.kind === "radio-group") {
+                for (const item of node.items) {
+                    if (!item.node.disabled)
+                        ids.push(item.node.id);
+                }
+            }
+            else if (!("kind" in node) && !node.node.disabled) {
+                ids.push(node.node.id);
+            }
+        }
+        return ids;
+    }
+    selectShortcut(key) {
+        if (this.search.length > 0)
+            return false;
+        if (!this.menuContent)
+            return false;
+        const normalizedKey = key.toLowerCase();
+        let shortcutId = null;
+        for (const node of this.displayNodes) {
+            if ("kind" in node && node.kind === "group") {
+                for (const item of node.items) {
+                    if (!item.node.disabled &&
+                        "shortcut" in item.node &&
+                        item.node.shortcut?.toLowerCase() === normalizedKey) {
+                        shortcutId = item.node.id;
+                        break;
+                    }
+                }
+            }
+            else if ("kind" in node && node.kind === "radio-group") {
+                for (const item of node.items) {
+                    if (!item.node.disabled &&
+                        "shortcut" in item.node &&
+                        item.node.shortcut?.toLowerCase() === normalizedKey) {
+                        shortcutId = item.node.id;
+                        break;
+                    }
+                }
+            }
+            else if (!("kind" in node) &&
+                !node.node.disabled &&
+                "shortcut" in node.node &&
+                node.node.shortcut?.toLowerCase() === normalizedKey) {
+                shortcutId = node.node.id;
+            }
+            if (shortcutId)
+                break;
+        }
+        if (!shortcutId)
+            return false;
+        const target = this.menuContent
+            .getCandidateNodes()
+            .find((candidate) => candidate.id === shortcutId);
+        if (!target)
+            return false;
+        this.setHighlightedId(shortcutId, { modality: "keyboard" });
+        return this.menuContent.selectCandidate(target);
+    }
+    highlightNext() {
+        const ids = this.navigableIds;
+        if (ids.length === 0)
+            return;
+        const currentIndex = this.highlightedId ? ids.indexOf(this.highlightedId) : -1;
+        const nextIndex = currentIndex + 1 >= ids.length
+            ? this.opts.loop()
+                ? 0
+                : ids.length - 1
+            : currentIndex + 1;
+        this.setHighlightedId(ids[nextIndex] ?? null, { modality: "keyboard" });
+    }
+    highlightPrevious() {
+        const ids = this.navigableIds;
+        if (ids.length === 0)
+            return;
+        const currentIndex = this.highlightedId ? ids.indexOf(this.highlightedId) : -1;
+        const previousIndex = currentIndex - 1 < 0 ? (this.opts.loop() ? ids.length - 1 : 0) : currentIndex - 1;
+        this.setHighlightedId(ids[previousIndex] ?? null, { modality: "keyboard" });
+    }
+    highlightFirst() {
+        this.setHighlightedId(this.navigableIds[0] ?? null, { modality: "keyboard" });
+    }
+    highlightLast() {
+        const ids = this.navigableIds;
+        this.setHighlightedId(ids[ids.length - 1] ?? null, { modality: "keyboard" });
+    }
+    openHighlightedSubmenu() {
+        const item = this.menuContent?.getHighlightedCandidate();
+        if (!item || !this.menuContent) {
+            return false;
+        }
+        if (!item.hasAttribute(this.menuContent.parentMenu.root.getBitsAttr("sub-trigger"))) {
+            return false;
+        }
+        item.click();
+        return true;
+    }
+    selectHighlighted() {
+        if (this.openHighlightedSubmenu())
+            return true;
+        return this.menuContent?.selectCandidate() ?? false;
+    }
+    closeToParent() {
+        if (!this.menuContent?.parentMenu.parentMenu)
+            return false;
+        this.menuContent.parentMenu.pendingOpenModality = "preview";
+        this.menuContent.parentMenu.root.activateDataMenuSurface(this.parentContentId);
+        return true;
+    }
+}