@johly/bits-ui 2.18.1

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.js

@@ -0,0 +1,249 @@
+import { afterSleep, afterTick, executeCallbacks, onDestroyEffect, } from "svelte-toolbelt";
+import { watch } from "runed";
+import { on } from "svelte/events";
+import {} from "../../../internal/events.js";
+import { debounce } from "../../../internal/debounce.js";
+import { noop } from "../../../internal/noop.js";
+import { getOwnerDocument, isOrContainsTarget } from "../../../internal/elements.js";
+import { isElementOrSVGElement } from "../../../internal/is.js";
+import { isClickTrulyOutside } from "../../../internal/dom.js";
+import { CONTEXT_MENU_CONTENT_ATTR, CONTEXT_MENU_TRIGGER_ATTR, } from "../../menu/menu.svelte.js";
+globalThis.bitsDismissableLayers ??= new Map();
+export class DismissibleLayerState {
+    static create(opts) {
+        return new DismissibleLayerState(opts);
+    }
+    opts;
+    #interactOutsideProp;
+    #behaviorType;
+    #interceptedEvents = {
+        pointerdown: false,
+    };
+    #isResponsibleLayer = false;
+    #isFocusInsideDOMTree = false;
+    #documentObj = undefined;
+    #onFocusOutside;
+    #unsubClickListener = noop;
+    constructor(opts) {
+        this.opts = opts;
+        this.#behaviorType = opts.interactOutsideBehavior;
+        this.#interactOutsideProp = opts.onInteractOutside;
+        this.#onFocusOutside = opts.onFocusOutside;
+        $effect(() => {
+            this.#documentObj = getOwnerDocument(this.opts.ref.current);
+        });
+        let unsubEvents = noop;
+        const cleanup = () => {
+            this.#resetState();
+            globalThis.bitsDismissableLayers.delete(this);
+            this.#handleInteractOutside.destroy();
+            unsubEvents();
+        };
+        watch([() => this.opts.enabled.current, () => this.opts.ref.current], () => {
+            if (!this.opts.enabled.current || !this.opts.ref.current)
+                return;
+            afterSleep(1, () => {
+                if (!this.opts.ref.current)
+                    return;
+                globalThis.bitsDismissableLayers.set(this, this.#behaviorType);
+                unsubEvents();
+                unsubEvents = this.#addEventListeners();
+            });
+            return cleanup;
+        });
+        onDestroyEffect(() => {
+            this.#resetState.destroy();
+            globalThis.bitsDismissableLayers.delete(this);
+            this.#handleInteractOutside.destroy();
+            this.#unsubClickListener();
+            unsubEvents();
+        });
+    }
+    #handleFocus = (event) => {
+        if (event.defaultPrevented)
+            return;
+        if (!this.opts.ref.current)
+            return;
+        afterTick(() => {
+            if (!this.opts.ref.current || this.#isTargetWithinLayer(event.target))
+                return;
+            if (event.target && !this.#isFocusInsideDOMTree) {
+                this.#onFocusOutside.current?.(event);
+            }
+        });
+    };
+    #addEventListeners() {
+        return executeCallbacks(
+        /**
+         * CAPTURE INTERACTION START
+         * mark interaction-start event as intercepted.
+         * mark responsible layer during interaction start
+         * to avoid checking if is responsible layer during interaction end
+         * when a new floating element may have been opened.
+         */
+        on(this.#documentObj, "pointerdown", executeCallbacks(this.#markInterceptedEvent, this.#markResponsibleLayer), { capture: true }), 
+        /**
+         * BUBBLE INTERACTION START
+         * Mark interaction-start event as non-intercepted. Debounce `onInteractOutsideStart`
+         * to avoid prematurely checking if other events were intercepted.
+         */
+        on(this.#documentObj, "pointerdown", executeCallbacks(this.#markNonInterceptedEvent, this.#handleInteractOutside)), 
+        /**
+         * HANDLE FOCUS OUTSIDE
+         */
+        on(this.#documentObj, "focusin", this.#handleFocus));
+    }
+    #handleDismiss = (e) => {
+        let event = e;
+        if (event.defaultPrevented) {
+            event = createWrappedEvent(e);
+        }
+        this.#interactOutsideProp.current(e);
+    };
+    #handleInteractOutside = debounce((e) => {
+        if (!this.opts.ref.current) {
+            this.#unsubClickListener();
+            return;
+        }
+        const isEventValid = this.opts.isValidEvent.current(e, this.opts.ref.current) ||
+            isValidEvent(e, this.opts.ref.current);
+        if (!this.#isResponsibleLayer || this.#isAnyEventIntercepted() || !isEventValid) {
+            this.#unsubClickListener();
+            return;
+        }
+        let event = e;
+        if (event.defaultPrevented) {
+            event = createWrappedEvent(event);
+        }
+        if (this.#behaviorType.current !== "close" &&
+            this.#behaviorType.current !== "defer-otherwise-close") {
+            this.#unsubClickListener();
+            return;
+        }
+        if (e.pointerType === "touch") {
+            this.#unsubClickListener();
+            this.#unsubClickListener = on(this.#documentObj, "click", this.#handleDismiss, {
+                once: true,
+            });
+        }
+        else {
+            this.#interactOutsideProp.current(event);
+        }
+    }, 10);
+    #markInterceptedEvent = (e) => {
+        this.#interceptedEvents[e.type] = true;
+    };
+    #markNonInterceptedEvent = (e) => {
+        this.#interceptedEvents[e.type] = false;
+    };
+    #markResponsibleLayer = () => {
+        if (!this.opts.ref.current)
+            return;
+        this.#isResponsibleLayer = isResponsibleLayer(this.opts.ref.current);
+    };
+    #isTargetWithinLayer = (target) => {
+        if (!this.opts.ref.current)
+            return false;
+        return isOrContainsTarget(this.opts.ref.current, target);
+    };
+    #resetState = debounce(() => {
+        for (const eventType in this.#interceptedEvents) {
+            this.#interceptedEvents[eventType] = false;
+        }
+        this.#isResponsibleLayer = false;
+    }, 20);
+    #isAnyEventIntercepted() {
+        const i = Object.values(this.#interceptedEvents).some(Boolean);
+        return i;
+    }
+    #onfocuscapture = () => {
+        this.#isFocusInsideDOMTree = true;
+    };
+    #onblurcapture = () => {
+        this.#isFocusInsideDOMTree = false;
+    };
+    props = {
+        onfocuscapture: this.#onfocuscapture,
+        onblurcapture: this.#onblurcapture,
+    };
+}
+export function getTopMostDismissableLayer(layersArr = [
+    ...globalThis.bitsDismissableLayers,
+]) {
+    return layersArr.findLast(([_, { current: behaviorType }]) => behaviorType === "close" || behaviorType === "ignore");
+}
+function isResponsibleLayer(node) {
+    const layersArr = [...globalThis.bitsDismissableLayers];
+    /**
+     * We first check if we can find a top layer with `close` or `ignore`.
+     * If that top layer was found and matches the provided node, then the node is
+     * responsible for the outside interaction. Otherwise, we know that all layers defer so
+     * the first layer is the responsible one.
+     */
+    const topMostLayer = getTopMostDismissableLayer(layersArr);
+    if (topMostLayer)
+        return topMostLayer[0].opts.ref.current === node;
+    const [firstLayerNode] = layersArr[0];
+    return firstLayerNode.opts.ref.current === node;
+}
+function isValidEvent(e, node) {
+    const target = e.target;
+    if (!isElementOrSVGElement(target))
+        return false;
+    const targetIsContextMenuTrigger = Boolean(target.closest(`[${CONTEXT_MENU_TRIGGER_ATTR}]`));
+    const nodeIsContextMenu = Boolean(node.closest(`[${CONTEXT_MENU_CONTENT_ATTR}]`));
+    if ("button" in e && e.button > 0 && !targetIsContextMenuTrigger)
+        return false;
+    if ("button" in e && e.button === 0 && targetIsContextMenuTrigger && nodeIsContextMenu) {
+        return true;
+    }
+    if (targetIsContextMenuTrigger && nodeIsContextMenu)
+        return false;
+    const ownerDocument = getOwnerDocument(target);
+    const isValid = ownerDocument.documentElement.contains(target) &&
+        !isOrContainsTarget(node, target) &&
+        isClickTrulyOutside(e, node);
+    return isValid;
+}
+function createWrappedEvent(e) {
+    const capturedCurrentTarget = e.currentTarget;
+    const capturedTarget = e.target;
+    let newEvent;
+    if (e instanceof PointerEvent) {
+        newEvent = new PointerEvent(e.type, e);
+    }
+    else {
+        newEvent = new PointerEvent("pointerdown", e);
+    }
+    // track the prevented state separately
+    let isPrevented = false;
+    // Create a proxy to intercept property access and method calls
+    const wrappedEvent = new Proxy(newEvent, {
+        get: (target, prop) => {
+            if (prop === "currentTarget") {
+                return capturedCurrentTarget;
+            }
+            if (prop === "target") {
+                return capturedTarget;
+            }
+            if (prop === "preventDefault") {
+                return () => {
+                    isPrevented = true;
+                    if (typeof target.preventDefault === "function") {
+                        target.preventDefault();
+                    }
+                };
+            }
+            if (prop === "defaultPrevented") {
+                return isPrevented;
+            }
+            if (prop in target) {
+                // oxlint-disable-next-line no-explicit-any
+                return target[prop];
+            }
+            // oxlint-disable-next-line no-explicit-any
+            return e[prop];
+        },
+    });
+    return wrappedEvent;
+}

package/dist/bits/utilities/escape-layer/escape-layer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { boxWith } from "svelte-toolbelt";
+	import type { EscapeLayerImplProps } from "./types.js";
+	import { EscapeLayerState } from "./use-escape-layer.svelte.js";
+	import { noop } from "../../../internal/noop.js";
+
+	let {
+		escapeKeydownBehavior = "close",
+		onEscapeKeydown = noop,
+		children,
+		enabled,
+		ref,
+	}: EscapeLayerImplProps = $props();
+
+	EscapeLayerState.create({
+		escapeKeydownBehavior: boxWith(() => escapeKeydownBehavior),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+		enabled: boxWith(() => enabled),
+		ref,
+	});
+</script>
+
+{@render children?.()}

package/dist/bits/utilities/escape-layer/escape-layer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { EscapeLayerImplProps } from "./types.js";
+declare const EscapeLayer: import("svelte").Component<EscapeLayerImplProps, {}, "">;
+type EscapeLayer = ReturnType<typeof EscapeLayer>;
+export default EscapeLayer;

package/dist/bits/utilities/escape-layer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EscapeLayer } from "./escape-layer.svelte";
+export type { EscapeLayerProps } from "./types.js";

package/dist/bits/utilities/escape-layer/index.js

@@ -0,0 +1 @@
+export { default as EscapeLayer } from "./escape-layer.svelte";

package/dist/bits/utilities/escape-layer/types.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from "svelte";
+import type { Box } from "svelte-toolbelt";
+export type EscapeBehaviorType = "close" | "defer-otherwise-close" | "defer-otherwise-ignore" | "ignore";
+export type EscapeLayerProps = {
+    /**
+     * Callback fired when escape is pressed.
+     */
+    onEscapeKeydown?: (e: KeyboardEvent) => void;
+    /**
+     * Escape behavior type.
+     * `close`: Closes the element immediately.
+     * `defer-otherwise-close`: Delegates the action to its parent component that has an
+     * escape keydown handler. If no parent is found, it closes the element.
+     * `defer-otherwise-ignore`: Delegates the action to the parent element. If no parent is found, nothing is done.
+     * `ignore`: Prevents the element from closing and also blocks the parent element from closing in response to an escape key press.
+     *
+     * @defaultValue `close`
+     */
+    escapeKeydownBehavior?: EscapeBehaviorType;
+};
+export type EscapeLayerImplProps = {
+    /**
+     * Whether the layer is enabled. Currently, we determine this with the
+     * `presence` returned from the `presence` layer.
+     */
+    enabled: boolean;
+    children?: Snippet;
+    ref: Box<HTMLElement | null>;
+} & EscapeLayerProps;

package/dist/bits/utilities/escape-layer/types.js

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

package/dist/bits/utilities/escape-layer/use-escape-layer.svelte.d.ts

@@ -0,0 +1,13 @@
+import { DOMContext, type Box, type ReadableBoxedValues } from "svelte-toolbelt";
+import type { EscapeLayerImplProps } from "./types.js";
+interface EscapeLayerStateOpts extends ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children" | "ref">>> {
+    ref: Box<HTMLElement | null>;
+}
+export declare class EscapeLayerState {
+    #private;
+    static create(opts: EscapeLayerStateOpts): EscapeLayerState;
+    readonly opts: EscapeLayerStateOpts;
+    readonly domContext: DOMContext;
+    constructor(opts: EscapeLayerStateOpts);
+}
+export {};

package/dist/bits/utilities/escape-layer/use-escape-layer.svelte.js

@@ -0,0 +1,55 @@
+import { DOMContext } from "svelte-toolbelt";
+import { watch } from "runed";
+import { on } from "svelte/events";
+import { kbd } from "../../../internal/kbd.js";
+import { noop } from "../../../internal/noop.js";
+globalThis.bitsEscapeLayers ??= new Map();
+export class EscapeLayerState {
+    static create(opts) {
+        return new EscapeLayerState(opts);
+    }
+    opts;
+    domContext;
+    constructor(opts) {
+        this.opts = opts;
+        this.domContext = new DOMContext(this.opts.ref);
+        let unsubEvents = noop;
+        watch(() => opts.enabled.current, (enabled) => {
+            if (enabled) {
+                globalThis.bitsEscapeLayers.set(this, opts.escapeKeydownBehavior);
+                unsubEvents = this.#addEventListener();
+            }
+            return () => {
+                unsubEvents();
+                globalThis.bitsEscapeLayers.delete(this);
+            };
+        });
+    }
+    #addEventListener = () => {
+        return on(this.domContext.getDocument(), "keydown", this.#onkeydown, { passive: false });
+    };
+    #onkeydown = (e) => {
+        if (e.key !== kbd.ESCAPE || !isResponsibleEscapeLayer(this))
+            return;
+        const clonedEvent = new KeyboardEvent(e.type, e);
+        e.preventDefault();
+        const behaviorType = this.opts.escapeKeydownBehavior.current;
+        if (behaviorType !== "close" && behaviorType !== "defer-otherwise-close")
+            return;
+        this.opts.onEscapeKeydown.current(clonedEvent);
+    };
+}
+function isResponsibleEscapeLayer(instance) {
+    const layersArr = [...globalThis.bitsEscapeLayers];
+    /**
+     * We first check if we can find a top layer with `close` or `ignore`.
+     * If that top layer was found and matches the provided node, then the node is
+     * responsible for the escape. Otherwise, we know that all layers defer so
+     * the first layer is the responsible one.
+     */
+    const topMostLayer = layersArr.findLast(([_, { current: behaviorType }]) => behaviorType === "close" || behaviorType === "ignore");
+    if (topMostLayer)
+        return topMostLayer[0] === instance;
+    const [firstLayerNode] = layersArr[0];
+    return firstLayerNode === instance;
+}

package/dist/bits/utilities/floating-layer/components/floating-layer-anchor.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { boxWith } from "svelte-toolbelt";
+	import { FloatingAnchorState } from "../use-floating-layer.svelte.js";
+	import type { AnchorProps } from "./index.js";
+	import type { Measurable } from "../../../../internal/floating-svelte/types.js";
+
+	let { id, children, virtualEl, ref, tooltip = false }: AnchorProps = $props();
+
+	FloatingAnchorState.create(
+		{
+			id: boxWith(() => id),
+			virtualEl: boxWith(() => virtualEl as unknown as Measurable | null),
+			ref,
+		},
+		tooltip
+	);
+</script>
+
+{@render children?.()}

package/dist/bits/utilities/floating-layer/components/floating-layer-anchor.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AnchorProps } from "./index.js";
+declare const FloatingLayerAnchor: import("svelte").Component<AnchorProps, {}, "">;
+type FloatingLayerAnchor = ReturnType<typeof FloatingLayerAnchor>;
+export default FloatingLayerAnchor;

package/dist/bits/utilities/floating-layer/components/floating-layer-arrow.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { FloatingArrowState } from "../use-floating-layer.svelte.js";
+	import { Arrow, type ArrowProps } from "../../arrow/index.js";
+	import { useId } from "../../../../internal/use-id.js";
+
+	let { id = useId(), ref = $bindable(null), ...restProps }: ArrowProps = $props();
+
+	const arrowState = FloatingArrowState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, arrowState.props));
+</script>
+
+<Arrow {...mergedProps} />

package/dist/bits/utilities/floating-layer/components/floating-layer-arrow.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ArrowProps } from "../../arrow/index.js";
+declare const FloatingLayerArrow: import("svelte").Component<ArrowProps, {}, "ref">;
+type FloatingLayerArrow = ReturnType<typeof FloatingLayerArrow>;
+export default FloatingLayerArrow;

package/dist/bits/utilities/floating-layer/components/floating-layer-content-static.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { type Snippet, onMount } from "svelte";
+
+	let {
+		content,
+		onPlaced,
+	}: {
+		content?: Snippet<
+			[{ props: Record<string, unknown>; wrapperProps: Record<string, unknown> }]
+		>;
+		onPlaced?: () => void;
+	} = $props();
+
+	onMount(() => {
+		onPlaced?.();
+	});
+</script>
+
+{@render content?.({ props: {}, wrapperProps: {} })}

package/dist/bits/utilities/floating-layer/components/floating-layer-content-static.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    content?: Snippet<[
+        {
+            props: Record<string, unknown>;
+            wrapperProps: Record<string, unknown>;
+        }
+    ]>;
+    onPlaced?: () => void;
+};
+declare const FloatingLayerContentStatic: import("svelte").Component<$$ComponentProps, {}, "">;
+type FloatingLayerContentStatic = ReturnType<typeof FloatingLayerContentStatic>;
+export default FloatingLayerContentStatic;

package/dist/bits/utilities/floating-layer/components/floating-layer-content.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { FloatingContentState } from "../use-floating-layer.svelte.js";
+	import type { ContentImplProps } from "./index.js";
+	import { useId } from "../../../../internal/use-id.js";
+
+	let {
+		content,
+		side = "bottom",
+		sideOffset = 0,
+		align = "center",
+		alignOffset = 0,
+		id,
+		arrowPadding = 0,
+		avoidCollisions = true,
+		collisionBoundary = [],
+		collisionPadding = 0,
+		hideWhenDetached = false,
+		onPlaced = () => {},
+		sticky = "partial",
+		updatePositionStrategy = "optimized",
+		strategy = "fixed",
+		dir = "ltr",
+		style = {},
+		wrapperId = useId(),
+		customAnchor = null,
+		enabled,
+		tooltip = false,
+	}: ContentImplProps = $props();
+
+	const contentState = FloatingContentState.create(
+		{
+			side: boxWith(() => side),
+			sideOffset: boxWith(() => sideOffset),
+			align: boxWith(() => align),
+			alignOffset: boxWith(() => alignOffset),
+			id: boxWith(() => id),
+			arrowPadding: boxWith(() => arrowPadding),
+			avoidCollisions: boxWith(() => avoidCollisions),
+			collisionBoundary: boxWith(() => collisionBoundary),
+			collisionPadding: boxWith(() => collisionPadding),
+			hideWhenDetached: boxWith(() => hideWhenDetached),
+			onPlaced: boxWith(() => onPlaced),
+			sticky: boxWith(() => sticky),
+			updatePositionStrategy: boxWith(() => updatePositionStrategy),
+			strategy: boxWith(() => strategy),
+			dir: boxWith(() => dir),
+			style: boxWith(() => style),
+			enabled: boxWith(() => enabled),
+			wrapperId: boxWith(() => wrapperId),
+			customAnchor: boxWith(() => customAnchor),
+		},
+		tooltip
+	);
+
+	const mergedProps = $derived(
+		mergeProps(contentState.wrapperProps, {
+			style: {
+				pointerEvents: "auto",
+			},
+		})
+	);
+</script>
+
+{@render content?.({ props: contentState.props, wrapperProps: mergedProps })}

package/dist/bits/utilities/floating-layer/components/floating-layer-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ContentImplProps } from "./index.js";
+declare const FloatingLayerContent: import("svelte").Component<ContentImplProps, {}, "">;
+type FloatingLayerContent = ReturnType<typeof FloatingLayerContent>;
+export default FloatingLayerContent;

package/dist/bits/utilities/floating-layer/components/floating-layer.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { FloatingRootState } from "../use-floating-layer.svelte.js";
+
+	let { children, tooltip = false }: { children?: Snippet; tooltip?: boolean } = $props();
+
+	FloatingRootState.create(tooltip);
+</script>
+
+{@render children?.()}

package/dist/bits/utilities/floating-layer/components/floating-layer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children?: Snippet;
+    tooltip?: boolean;
+};
+declare const FloatingLayer: import("svelte").Component<$$ComponentProps, {}, "">;
+type FloatingLayer = ReturnType<typeof FloatingLayer>;
+export default FloatingLayer;

package/dist/bits/utilities/floating-layer/components/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Anchor } from "./floating-layer-anchor.svelte";
+export { default as Arrow } from "./floating-layer-arrow.svelte";
+export { default as Content } from "./floating-layer-content.svelte";
+export { default as ContentStatic } from "./floating-layer-content-static.svelte";
+export { default as Root } from "./floating-layer.svelte";
+export type { FloatingLayerContentImplProps as ContentImplProps, FloatingLayerContentProps as ContentProps, FloatingLayerAnchorProps as AnchorProps, } from "../types.js";

package/dist/bits/utilities/floating-layer/components/index.js

@@ -0,0 +1,5 @@
+export { default as Anchor } from "./floating-layer-anchor.svelte";
+export { default as Arrow } from "./floating-layer-arrow.svelte";
+export { default as Content } from "./floating-layer-content.svelte";
+export { default as ContentStatic } from "./floating-layer-content-static.svelte";
+export { default as Root } from "./floating-layer.svelte";

package/dist/bits/utilities/floating-layer/index.d.ts

@@ -0,0 +1 @@
+export * as FloatingLayer from "./components/index.js";

package/dist/bits/utilities/floating-layer/index.js

@@ -0,0 +1 @@
+export * as FloatingLayer from "./components/index.js";