@johly/bits-ui 2.18.1

package/dist/internal/floating-svelte/types.d.ts

@@ -0,0 +1,97 @@
+import type { FloatingElement, Middleware, MiddlewareData, Placement, ReferenceElement, Strategy } from "@floating-ui/dom";
+import type { ReadableBox, WritableBox } from "svelte-toolbelt";
+type ValueOrGetValue<T> = T | (() => T);
+export type Measurable = {
+    getBoundingClientRect: () => DOMRect;
+};
+export type UseFloatingOptions = {
+    /**
+     * Represents the open/close state of the floating element.
+     * @default true
+     */
+    open?: ValueOrGetValue<boolean | undefined>;
+    /**
+     * Where to place the floating element relative to its reference element.
+     * @default 'bottom'
+     */
+    placement?: ValueOrGetValue<Placement | undefined>;
+    /**
+     * The type of CSS position property to use.
+     * @default 'absolute'
+     */
+    strategy?: ValueOrGetValue<Strategy | undefined>;
+    /**
+     * These are plain objects that modify the positioning coordinates in some fashion,
+     * or provide useful data for the consumer to use.
+     * @default undefined
+     */
+    middleware?: ValueOrGetValue<Middleware[] | undefined>;
+    /**
+     * Whether to use `transform` instead of `top` and `left` styles to
+     * position the floating element (`floatingStyles`).
+     * @default true
+     */
+    transform?: ValueOrGetValue<boolean | undefined>;
+    /**
+     * Reference / Anchor element to position the floating element relative to
+     */
+    reference: ReadableBox<Measurable | HTMLElement | null>;
+    /**
+     * Callback to handle mounting/unmounting of the elements.
+     * @default undefined
+     */
+    whileElementsMounted?: (reference: ReferenceElement, floating: FloatingElement, update: () => void) => () => void;
+    /**
+     * The offset from the reference element along the side axis.
+     * Used to detect bad coordinates during transitions.
+     * @default undefined
+     */
+    sideOffset?: ValueOrGetValue<number | undefined>;
+    /**
+     * The offset from the reference element along the alignment axis.
+     * Used to detect bad coordinates during transitions.
+     * @default undefined
+     */
+    alignOffset?: ValueOrGetValue<number | undefined>;
+};
+export type UseFloatingReturn = {
+    /**
+     * The reference element to position the floating element relative to.
+     */
+    reference: ReadableBox<Measurable | HTMLElement | null>;
+    /**
+     * The floating element to position.
+     */
+    floating: WritableBox<HTMLElement | null>;
+    /**
+     * The stateful placement, which can be different from the initial `placement` passed as options.
+     */
+    placement: Readonly<Placement>;
+    /**
+     * The type of CSS position property to use.
+     */
+    strategy: Readonly<Strategy>;
+    /**
+     * Additional data from middleware.
+     */
+    middlewareData: Readonly<MiddlewareData>;
+    /**
+     * The boolean that let you know if the floating element has been positioned.
+     */
+    isPositioned: Readonly<boolean>;
+    /**
+     * CSS styles to apply to the floating element to position it.
+     */
+    floatingStyles: Readonly<{
+        position: Strategy;
+        top: string;
+        left: string;
+        transform?: string;
+        willChange?: string;
+    }>;
+    /**
+     * The function to update floating position manually.
+     */
+    update: () => void;
+};
+export {};

package/dist/internal/floating-svelte/types.js

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

package/dist/internal/floating-svelte/use-floating.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { UseFloatingOptions, UseFloatingReturn } from "./types.js";
+export declare function useFloating(options: UseFloatingOptions): UseFloatingReturn;

package/dist/internal/floating-svelte/use-floating.svelte.js

@@ -0,0 +1,192 @@
+import { computePosition } from "@floating-ui/dom";
+import { simpleBox } from "svelte-toolbelt";
+import { get, getDPR, roundByDPR } from "./floating-utils.svelte.js";
+export function useFloating(options) {
+    /** Options */
+    const whileElementsMountedOption = options.whileElementsMounted;
+    const openOption = $derived(get(options.open) ?? true);
+    const middlewareOption = $derived(get(options.middleware));
+    const transformOption = $derived(get(options.transform) ?? true);
+    const placementOption = $derived(get(options.placement) ?? "bottom");
+    const strategyOption = $derived(get(options.strategy) ?? "absolute");
+    const sideOffsetOption = $derived(get(options.sideOffset) ?? 0);
+    const alignOffsetOption = $derived(get(options.alignOffset) ?? 0);
+    const reference = options.reference;
+    /** State */
+    let x = $state(0);
+    let y = $state(0);
+    const floating = simpleBox(null);
+    // svelte-ignore state_referenced_locally
+    let strategy = $state(strategyOption);
+    // svelte-ignore state_referenced_locally
+    let placement = $state(placementOption);
+    let middlewareData = $state({});
+    let isPositioned = $state(false);
+    let hasWhileMountedPosition = false;
+    let updateRequestId = 0;
+    const floatingStyles = $derived.by(() => {
+        // preserve last known position when floating ref is null (during transitions)
+        const xVal = floating.current ? roundByDPR(floating.current, x) : x;
+        const yVal = floating.current ? roundByDPR(floating.current, y) : y;
+        if (transformOption) {
+            return {
+                position: strategy,
+                left: "0",
+                top: "0",
+                transform: `translate(${xVal}px, ${yVal}px)`,
+                ...(floating.current &&
+                    getDPR(floating.current) >= 1.5 && {
+                    willChange: "transform",
+                }),
+            };
+        }
+        return {
+            position: strategy,
+            left: `${xVal}px`,
+            top: `${yVal}px`,
+        };
+    });
+    /** Effects */
+    let whileElementsMountedCleanup;
+    function update() {
+        if (reference.current === null || floating.current === null)
+            return;
+        const referenceNode = reference.current;
+        const floatingNode = floating.current;
+        const requestId = ++updateRequestId;
+        computePosition(referenceNode, floatingNode, {
+            middleware: middlewareOption,
+            placement: placementOption,
+            strategy: strategyOption,
+        }).then((position) => {
+            // ignore stale async resolutions when newer updates were requested.
+            if (requestId !== updateRequestId)
+                return;
+            // ignore stale resolutions after ref replacement.
+            if (reference.current !== referenceNode || floating.current !== floatingNode)
+                return;
+            const referenceHidden = isReferenceHidden(referenceNode);
+            if (referenceHidden) {
+                // keep last good coordinates when the anchor disappears to avoid
+                // a transient jump to viewport origin before close propagates.
+                middlewareData = {
+                    ...middlewareData,
+                    hide: {
+                        // oxlint-disable-next-line no-explicit-any
+                        ...middlewareData.hide,
+                        referenceHidden: true,
+                    },
+                };
+                return;
+            }
+            // ignore bad coordinates that cause jumping during close transitions
+            if (!openOption && x !== 0 && y !== 0) {
+                // if we had a good position and now getting coordinates near
+                // the expected offset bounds during close, ignore it
+                const maxExpectedOffset = Math.max(Math.abs(sideOffsetOption), Math.abs(alignOffsetOption), 15);
+                if (position.x <= maxExpectedOffset && position.y <= maxExpectedOffset)
+                    return;
+            }
+            x = position.x;
+            y = position.y;
+            strategy = position.strategy;
+            placement = position.placement;
+            middlewareData = position.middlewareData;
+            isPositioned = true;
+        });
+    }
+    function cleanup() {
+        if (typeof whileElementsMountedCleanup === "function") {
+            whileElementsMountedCleanup();
+            whileElementsMountedCleanup = undefined;
+        }
+        updateRequestId++;
+    }
+    function attach() {
+        cleanup();
+        if (whileElementsMountedOption === undefined) {
+            update();
+            return;
+        }
+        if (!openOption)
+            return;
+        if (reference.current === null || floating.current === null)
+            return;
+        whileElementsMountedCleanup = whileElementsMountedOption(reference.current, floating.current, update);
+    }
+    function reset() {
+        if (!openOption && floating.current === null) {
+            isPositioned = false;
+        }
+    }
+    function trackWhileMountedDeps() {
+        return [
+            middlewareOption,
+            placementOption,
+            strategyOption,
+            sideOffsetOption,
+            alignOffsetOption,
+            openOption,
+        ];
+    }
+    $effect(() => {
+        if (whileElementsMountedOption !== undefined)
+            return;
+        if (!openOption)
+            return;
+        update();
+    });
+    $effect(attach);
+    $effect(() => {
+        if (whileElementsMountedOption === undefined)
+            return;
+        trackWhileMountedDeps();
+        if (!openOption) {
+            hasWhileMountedPosition = false;
+            return;
+        }
+        if (!isPositioned) {
+            hasWhileMountedPosition = false;
+            return;
+        }
+        // skip the first post-position run, since autoUpdate already computed it
+        if (!hasWhileMountedPosition) {
+            hasWhileMountedPosition = true;
+            return;
+        }
+        update();
+    });
+    $effect(reset);
+    $effect(() => cleanup);
+    return {
+        floating,
+        reference,
+        get strategy() {
+            return strategy;
+        },
+        get placement() {
+            return placement;
+        },
+        get middlewareData() {
+            return middlewareData;
+        },
+        get isPositioned() {
+            return isPositioned;
+        },
+        get floatingStyles() {
+            return floatingStyles;
+        },
+        get update() {
+            return update;
+        },
+    };
+}
+function isReferenceHidden(node) {
+    if (!(node instanceof Element))
+        return false;
+    if (!node.isConnected)
+        return true;
+    if (node instanceof HTMLElement && node.hidden)
+        return true;
+    return node.getClientRects().length === 0;
+}

package/dist/internal/focus.d.ts

@@ -0,0 +1,46 @@
+export type FocusableTarget = HTMLElement | {
+    focus: () => void;
+};
+/**
+ * Handles `initialFocus` prop behavior for the
+ * Calendar & RangeCalendar components.
+ */
+export declare function handleCalendarInitialFocus(calendar: HTMLElement): void;
+/**
+ * A utility function that focuses an element without scrolling.
+ */
+export declare function focusWithoutScroll(element: HTMLElement): void;
+/**
+ * A utility function that focuses an element.
+ */
+export declare function focus(element?: FocusableTarget | null, { select }?: {
+    select?: boolean | undefined;
+}): void;
+/**
+ * Attempts to focus the first element in a list of candidates.
+ * Stops when focus is successful.
+ */
+export declare function focusFirst(candidates: HTMLElement[], { select }: {
+    select?: boolean | undefined;
+} | undefined, getActiveElement: () => HTMLElement | null): true | undefined;
+/**
+ * Returns the first visible element in a list.
+ * NOTE: Only checks visibility up to the `container`.
+ */
+export declare function findVisible(elements: HTMLElement[], container: HTMLElement): HTMLElement | undefined;
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+export declare function getTabbableCandidates(container: HTMLElement): HTMLElement[];
+/**
+ * A utility function that returns the first and last elements within a container that are
+ * visible and focusable.
+ */
+export declare function getTabbableEdges(container: HTMLElement): readonly [HTMLElement | undefined, HTMLElement | undefined];

package/dist/internal/focus.js

@@ -0,0 +1,113 @@
+import { getDocument, getWindow } from "svelte-toolbelt";
+import { isBrowser, isElementHidden, isSelectableInput } from "./is.js";
+/**
+ * Handles `initialFocus` prop behavior for the
+ * Calendar & RangeCalendar components.
+ */
+export function handleCalendarInitialFocus(calendar) {
+    if (!isBrowser)
+        return;
+    const selectedDay = calendar.querySelector("[data-selected]");
+    if (selectedDay)
+        return focusWithoutScroll(selectedDay);
+    const today = calendar.querySelector("[data-today]");
+    if (today)
+        return focusWithoutScroll(today);
+    const firstDay = calendar.querySelector("[data-calendar-date]");
+    if (firstDay)
+        return focusWithoutScroll(firstDay);
+}
+/**
+ * A utility function that focuses an element without scrolling.
+ */
+export function focusWithoutScroll(element) {
+    const doc = getDocument(element);
+    const win = getWindow(element);
+    const scrollPosition = {
+        x: win.pageXOffset || doc.documentElement.scrollLeft,
+        y: win.pageYOffset || doc.documentElement.scrollTop,
+    };
+    element.focus();
+    win.scrollTo(scrollPosition.x, scrollPosition.y);
+}
+/**
+ * A utility function that focuses an element.
+ */
+export function focus(element, { select = false } = {}) {
+    if (!element || !element.focus)
+        return;
+    const doc = getDocument(element);
+    if (doc.activeElement === element)
+        return;
+    const previouslyFocusedElement = doc.activeElement;
+    // prevent scroll on focus
+    element.focus({ preventScroll: true });
+    // only elect if its not the same element, it supports selection, and we need to select it
+    if (element !== previouslyFocusedElement && isSelectableInput(element) && select) {
+        element.select();
+    }
+}
+/**
+ * Attempts to focus the first element in a list of candidates.
+ * Stops when focus is successful.
+ */
+export function focusFirst(candidates, { select = false } = {}, getActiveElement) {
+    const previouslyFocusedElement = getActiveElement();
+    for (const candidate of candidates) {
+        focus(candidate, { select });
+        if (getActiveElement() !== previouslyFocusedElement)
+            return true;
+    }
+}
+/**
+ * Returns the first visible element in a list.
+ * NOTE: Only checks visibility up to the `container`.
+ */
+export function findVisible(elements, container) {
+    for (const element of elements) {
+        // we stop checking if it's hidden at the `container` level (excluding)
+        if (!isElementHidden(element, container))
+            return element;
+    }
+}
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+export function getTabbableCandidates(container) {
+    const nodes = [];
+    const doc = getDocument(container);
+    const walker = doc.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+        // oxlint-disable-next-line no-explicit-any
+        acceptNode: (node) => {
+            const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+            if (node.disabled || node.hidden || isHiddenInput)
+                return NodeFilter.FILTER_SKIP;
+            // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+            // runtime's understanding of tabbability, so this automatically accounts
+            // for any kind of element that could be tabbed to.
+            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        },
+    });
+    while (walker.nextNode())
+        nodes.push(walker.currentNode);
+    // we do not take into account the order of nodes with positive `tabIndex` as it
+    // hinders accessibility to have tab order different from visual order.
+    return nodes;
+}
+/**
+ * A utility function that returns the first and last elements within a container that are
+ * visible and focusable.
+ */
+export function getTabbableEdges(container) {
+    const candidates = getTabbableCandidates(container);
+    const first = findVisible(candidates, container);
+    const last = findVisible(candidates.reverse(), container);
+    return [first, last];
+}

package/dist/internal/get-directional-keys.d.ts

@@ -0,0 +1,21 @@
+import type { Direction, Orientation } from "../shared/index.js";
+export declare const FIRST_KEYS: string[];
+export declare const LAST_KEYS: string[];
+export declare const FIRST_LAST_KEYS: string[];
+export declare const SELECTION_KEYS: string[];
+/**
+ * A utility function that returns the next key based on the direction and orientation.
+ */
+export declare function getNextKey(dir?: Direction, orientation?: Orientation): string;
+/**
+ * A utility function that returns the previous key based on the direction and orientation.
+ */
+export declare function getPrevKey(dir?: Direction, orientation?: Orientation): string;
+/**
+ * A utility function that returns the next and previous keys based on the direction
+ * and orientation.
+ */
+export declare function getDirectionalKeys(dir?: Direction, orientation?: Orientation): {
+    nextKey: string;
+    prevKey: string;
+};

package/dist/internal/get-directional-keys.js

@@ -0,0 +1,37 @@
+import { kbd } from "./kbd.js";
+export const FIRST_KEYS = [kbd.ARROW_DOWN, kbd.PAGE_UP, kbd.HOME];
+export const LAST_KEYS = [kbd.ARROW_UP, kbd.PAGE_DOWN, kbd.END];
+export const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
+export const SELECTION_KEYS = [kbd.SPACE, kbd.ENTER];
+/**
+ * A utility function that returns the next key based on the direction and orientation.
+ */
+export function getNextKey(dir = "ltr", orientation = "horizontal") {
+    return {
+        horizontal: dir === "rtl" ? kbd.ARROW_LEFT : kbd.ARROW_RIGHT,
+        vertical: kbd.ARROW_DOWN,
+    }[orientation];
+}
+/**
+ * A utility function that returns the previous key based on the direction and orientation.
+ */
+export function getPrevKey(dir = "ltr", orientation = "horizontal") {
+    return {
+        horizontal: dir === "rtl" ? kbd.ARROW_RIGHT : kbd.ARROW_LEFT,
+        vertical: kbd.ARROW_UP,
+    }[orientation];
+}
+/**
+ * A utility function that returns the next and previous keys based on the direction
+ * and orientation.
+ */
+export function getDirectionalKeys(dir = "ltr", orientation = "horizontal") {
+    if (!["ltr", "rtl"].includes(dir))
+        dir = "ltr";
+    if (!["horizontal", "vertical"].includes(orientation))
+        orientation = "horizontal";
+    return {
+        nextKey: getNextKey(dir, orientation),
+        prevKey: getPrevKey(dir, orientation),
+    };
+}

package/dist/internal/grace-area.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type Getter } from "svelte-toolbelt";
+interface GraceAreaOptions {
+    enabled: Getter<boolean>;
+    triggerNode: Getter<HTMLElement | null>;
+    contentNode: Getter<HTMLElement | null>;
+    onPointerExit: () => void;
+    setIsPointerInTransit?: (value: boolean) => void;
+    transitTimeout?: number;
+}
+export declare class GraceArea {
+    #private;
+    constructor(opts: GraceAreaOptions);
+}
+export {};