bits-ui 1.0.0-next.8 → 1.0.0-next.81

package/dist/internal/executeCallbacks.js

@@ -1,15 +0,0 @@
-/**
- * Executes an array of callback functions with the same arguments.
- * @template T The types of the arguments that the callback functions take.
- * @param callbacks array of callback functions to execute.
- * @returns A new function that executes all of the original callback functions with the same arguments.
- */
-export function executeCallbacks(...callbacks) {
-    return (...args) => {
-        for (const callback of callbacks) {
-            if (typeof callback === "function") {
-                callback(...args);
-            }
-        }
-    };
-}

package/dist/internal/mergeProps.d.ts

@@ -1,22 +0,0 @@
-type Props = Record<string, unknown>;
-type PropsArg = Props | null | undefined;
-type TupleTypes<T> = {
-    [P in keyof T]: T[P];
-} extends {
-    [key: number]: infer V;
-} ? NullToObject<V> : never;
-type NullToObject<T> = T extends null | undefined ? {} : T;
-type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
-/**
- * Given a list of prop objects, merges them into a single object.
- * - Automatically composes event handlers (e.g. `onclick`, `oninput`, etc.)
- * - Chains regular functions with the same name so they are called in order
- * - Merges class strings with `clsx`
- * - Merges style objects and converts them to strings
- * - Handles a bug with Svelte where setting the `hidden` attribute to `false` doesn't remove it
- * - Overrides other values with the last one
- */
-export declare function mergeProps<T extends PropsArg[]>(...args: T): UnionToIntersection<TupleTypes<T>> & {
-    style?: string;
-};
-export {};

package/dist/internal/mergeProps.js

@@ -1,98 +0,0 @@
-/**
- * Modified from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/utils/src/mergeProps.ts (see NOTICE.txt for source)
- */
-import { clsx } from "clsx";
-import { composeHandlers } from "./composeHandlers.js";
-import { executeCallbacks } from "./executeCallbacks.js";
-import { styleToString } from "./style.js";
-import { cssToStyleObj } from "./cssToStyleObj.js";
-function isEventHandler(key) {
-    // we check if the 3rd character is uppercase to avoid merging our own
-    // custom callbacks like `onValueChange` and strictly merge native event handlers
-    return key.length > 2 && key.startsWith("on") && key[2] === key[2]?.toLowerCase();
-}
-/**
- * Given a list of prop objects, merges them into a single object.
- * - Automatically composes event handlers (e.g. `onclick`, `oninput`, etc.)
- * - Chains regular functions with the same name so they are called in order
- * - Merges class strings with `clsx`
- * - Merges style objects and converts them to strings
- * - Handles a bug with Svelte where setting the `hidden` attribute to `false` doesn't remove it
- * - Overrides other values with the last one
- */
-export function mergeProps(...args) {
-    const result = { ...args[0] };
-    for (let i = 1; i < args.length; i++) {
-        const props = args[i];
-        for (const key in props) {
-            const a = result[key];
-            const b = props[key];
-            const aIsFunction = typeof a === "function";
-            const bIsFunction = typeof b === "function";
-            // compose event handlers
-            if (aIsFunction && typeof bIsFunction && isEventHandler(key)) {
-                // handle merging of event handlers
-                const aHandler = a;
-                const bHandler = b;
-                result[key] = composeHandlers(aHandler, bHandler);
-            }
-            else if (aIsFunction && bIsFunction) {
-                // chain non-event handler functions
-                result[key] = executeCallbacks(a, b);
-            }
-            else if (key === "class" && typeof a === "string" && typeof b === "string") {
-                // handle merging class strings
-                result[key] = clsx(a, b);
-            }
-            else if (key === "style") {
-                const aIsObject = typeof a === "object";
-                const bIsObject = typeof b === "object";
-                const aIsString = typeof a === "string";
-                const bIsString = typeof b === "string";
-                if (aIsObject && bIsObject) {
-                    // both are style objects, merge them
-                    result[key] = { ...a, ...b };
-                }
-                else if (aIsObject && bIsString) {
-                    // a is style object, b is string, convert b to style object and merge
-                    const parsedStyle = cssToStyleObj(b);
-                    result[key] = { ...a, ...parsedStyle };
-                }
-                else if (aIsString && bIsObject) {
-                    // a is string, b is style object, convert a to style object and merge
-                    const parsedStyle = cssToStyleObj(a);
-                    result[key] = { ...parsedStyle, ...b };
-                }
-                else if (aIsString && bIsString) {
-                    // both are strings, convert both to objects and merge
-                    const parsedStyleA = cssToStyleObj(a);
-                    const parsedStyleB = cssToStyleObj(b);
-                    result[key] = { ...parsedStyleA, ...parsedStyleB };
-                }
-                else if (aIsObject) {
-                    result[key] = a;
-                }
-                else if (bIsObject) {
-                    result[key] = b;
-                }
-            }
-            else {
-                // override other values
-                result[key] = b !== undefined ? b : a;
-            }
-        }
-    }
-    // convert style object to string
-    if (typeof result.style === "object") {
-        result.style = styleToString(result.style).replaceAll("\n", " ");
-    }
-    // handle weird svelte bug where `hidden` is not removed when set to `false`
-    if ("hidden" in result && result.hidden !== true) {
-        result.hidden = undefined;
-    }
-    // handle weird svelte bug where `disabled` is not removed when set to `false`
-    if ("disabled" in result && result.disabled !== true) {
-        result.disabled = undefined;
-    }
-    return result;
-}

package/dist/internal/onDestroyEffect.svelte.d.ts

@@ -1 +0,0 @@
-export declare function onDestroyEffect(fn: () => void): void;

package/dist/internal/onDestroyEffect.svelte.js

@@ -1,7 +0,0 @@
-export function onDestroyEffect(fn) {
-    $effect(() => {
-        return () => {
-            fn();
-        };
-    });
-}

package/dist/internal/strings.d.ts

@@ -1,3 +0,0 @@
-export declare function pascalCase(str?: string): string;
-export declare function camelCase(str?: string): string;
-export declare function kebabCase(str?: string): string;

package/dist/internal/strings.js

@@ -1,70 +0,0 @@
-const NUMBER_CHAR_RE = /\d/;
-const STR_SPLITTERS = ["-", "_", "/", "."];
-function isUppercase(char = "") {
-    if (NUMBER_CHAR_RE.test(char))
-        return undefined;
-    return char !== char.toLowerCase();
-}
-function splitByCase(str) {
-    const parts = [];
-    let buff = "";
-    let previousUpper;
-    let previousSplitter;
-    for (const char of str) {
-        // Splitter
-        const isSplitter = STR_SPLITTERS.includes(char);
-        if (isSplitter === true) {
-            parts.push(buff);
-            buff = "";
-            previousUpper = undefined;
-            continue;
-        }
-        const isUpper = isUppercase(char);
-        if (previousSplitter === false) {
-            // Case rising edge
-            if (previousUpper === false && isUpper === true) {
-                parts.push(buff);
-                buff = char;
-                previousUpper = isUpper;
-                continue;
-            }
-            // Case falling edge
-            if (previousUpper === true && isUpper === false && buff.length > 1) {
-                const lastChar = buff.at(-1);
-                parts.push(buff.slice(0, Math.max(0, buff.length - 1)));
-                buff = lastChar + char;
-                previousUpper = isUpper;
-                continue;
-            }
-        }
-        // Normal char
-        buff += char;
-        previousUpper = isUpper;
-        previousSplitter = isSplitter;
-    }
-    parts.push(buff);
-    return parts;
-}
-export function pascalCase(str) {
-    if (!str)
-        return "";
-    return splitByCase(str)
-        .map((p) => upperFirst(p))
-        .join("");
-}
-export function camelCase(str) {
-    return lowerFirst(pascalCase(str || ""));
-}
-export function kebabCase(str) {
-    return str
-        ? splitByCase(str)
-            .map((p) => p.toLowerCase())
-            .join("-")
-        : "";
-}
-function upperFirst(str) {
-    return str ? str[0].toUpperCase() + str.slice(1) : "";
-}
-function lowerFirst(str) {
-    return str ? str[0].toLowerCase() + str.slice(1) : "";
-}

package/dist/internal/style.d.ts

@@ -1,3 +0,0 @@
-import type { StyleProperties } from "../shared/index.js";
-export declare function styleToString(style?: StyleProperties): string;
-export declare const srOnlyStyles: StyleProperties;

package/dist/internal/style.js

@@ -1,16 +0,0 @@
-import { styleToCSS } from "./styleToCSS.js";
-export function styleToString(style = {}) {
-    return styleToCSS(style).replace("\n", " ");
-}
-export const srOnlyStyles = {
-    position: "absolute",
-    width: "1px",
-    height: "1px",
-    padding: "0",
-    margin: "-1px",
-    overflow: "hidden",
-    clip: "rect(0, 0, 0, 0)",
-    whiteSpace: "nowrap",
-    borderWidth: "0",
-    transform: "translateX(-100%)",
-};

package/dist/internal/styleToCSS.d.ts

@@ -1 +0,0 @@
-export declare function styleToCSS(styleObj: object): string;

package/dist/internal/styleToCSS.js

@@ -1,23 +0,0 @@
-function createParser(matcher, replacer) {
-    const regex = RegExp(matcher, "g");
-    return (str) => {
-        // throw an error if not a string
-        if (typeof str !== "string") {
-            throw new TypeError(`expected an argument of type string, but got ${typeof str}`);
-        }
-        // if no match between string and matcher
-        if (!str.match(regex))
-            return str;
-        // executes the replacer function for each match
-        return str.replace(regex, replacer);
-    };
-}
-const camelToKebab = createParser(/[A-Z]/, (match) => `-${match.toLowerCase()}`);
-export function styleToCSS(styleObj) {
-    if (!styleObj || typeof styleObj !== "object" || Array.isArray(styleObj)) {
-        throw new TypeError(`expected an argument of type object, but got ${typeof styleObj}`);
-    }
-    return Object.keys(styleObj)
-        .map((property) => `${camelToKebab(property)}: ${styleObj[property]};`)
-        .join("\n");
-}

package/dist/internal/useBodyScrollLock.svelte.js

@@ -1,88 +0,0 @@
-import { SvelteMap } from "svelte/reactivity";
-import { box } from "svelte-toolbelt";
-import { isBrowser, isIOS } from "./is.js";
-import { addEventListener } from "./events.js";
-import { afterTick } from "./afterTick.js";
-import { useId } from "./useId.js";
-import { createSharedHook } from "./createSharedHook.svelte.js";
-import { watch } from "./box.svelte.js";
-const useBodyLockStackCount = createSharedHook(() => {
-    const map = new SvelteMap();
-    const locked = $derived.by(() => {
-        for (const value of map.values()) {
-            if (value) {
-                return true;
-            }
-        }
-        return false;
-    });
-    let initialBodyStyle = $state({});
-    let stopTouchMoveListener = null;
-    function resetBodyStyle() {
-        if (!isBrowser)
-            return;
-        document.body.style.paddingRight = initialBodyStyle.paddingRight ?? "";
-        document.body.style.marginRight = initialBodyStyle.marginRight ?? "";
-        document.body.style.pointerEvents = initialBodyStyle.pointerEvents ?? "";
-        document.body.style.removeProperty("--scrollbar-width");
-        document.body.style.overflow = initialBodyStyle.overflow ?? "";
-        isIOS && stopTouchMoveListener?.();
-    }
-    watch(box.with(() => locked), (curr, prev) => {
-        if (!curr) {
-            if (prev) {
-                resetBodyStyle();
-            }
-            return;
-        }
-        const bodyStyle = getComputedStyle(document.body);
-        initialBodyStyle.overflow = bodyStyle.overflow;
-        initialBodyStyle.paddingRight = bodyStyle.paddingRight;
-        initialBodyStyle.marginRight = bodyStyle.marginRight;
-        initialBodyStyle.pointerEvents = bodyStyle.pointerEvents;
-        // TODO: account for RTL direction, etc.
-        const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        const paddingRight = Number.parseInt(initialBodyStyle.paddingRight ?? "0", 10);
-        const config = {
-            padding: paddingRight + verticalScrollbarWidth,
-            margin: Number.parseInt(initialBodyStyle.marginRight ?? "0", 10),
-        };
-        if (verticalScrollbarWidth > 0) {
-            document.body.style.paddingRight = `${config.padding}px`;
-            document.body.style.marginRight = `${config.margin}px`;
-            document.body.style.setProperty("--scrollbar-width", `${verticalScrollbarWidth}px`);
-            document.body.style.overflow = "hidden";
-        }
-        if (isIOS) {
-            stopTouchMoveListener = addEventListener(document, "touchmove", (e) => {
-                if (e.target !== document.documentElement)
-                    return;
-                if (e.touches.length > 1)
-                    return;
-                e.preventDefault();
-            }, { passive: false });
-        }
-        afterTick(() => {
-            document.body.style.pointerEvents = "none";
-            document.body.style.overflow = "hidden";
-        });
-    });
-    $effect(() => {
-        return () => {
-            stopTouchMoveListener?.();
-        };
-    });
-    return map;
-});
-export function useBodyScrollLock(initialState) {
-    const id = useId();
-    const map = useBodyLockStackCount();
-    map.set(id, initialState ?? false);
-    const locked = box.with(() => map.get(id) ?? false, (v) => map.set(id, v));
-    $effect(() => {
-        return () => {
-            map.delete(id);
-        };
-    });
-    return locked;
-}

package/dist/internal/useGraceArea.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { Getter } from "svelte-toolbelt";
-export declare function useGraceArea(triggerNode: Getter<HTMLElement | null>, contentNode: Getter<HTMLElement | null>): {
-    isPointerInTransit: import("svelte-toolbelt").WritableBox<boolean>;
-    onPointerExit: import("./createEventHook.svelte.js").EventHookOn<void>;
-};

package/dist/internal/useId.js

@@ -1,8 +0,0 @@
-let count = 0;
-/**
- * Generates a unique ID based on a global counter.
- */
-export function useId(prefix = "bits") {
-    count++;
-    return `${prefix}-${count}`;
-}

package/dist/internal/useRefById.svelte.d.ts

@@ -1,28 +0,0 @@
-import type { Getter, WritableBox } from "svelte-toolbelt";
-import type { Box } from "./box.svelte.js";
-type UseRefByIdProps = {
-    /**
-     * The ID of the node to find.
-     */
-    id: Box<string>;
-    /**
-     * The ref to set the node to.
-     */
-    ref: WritableBox<HTMLElement | null>;
-    /**
-     * A reactive condition that will cause the node to be set.
-     */
-    condition?: Getter<boolean>;
-    /**
-     * A callback fired when the ref changes.
-     */
-    onRefChange?: (node: HTMLElement | null) => void;
-};
-/**
- * Finds the node with that ID and sets it to the boxed node.
- * Reactive using `$effect` to ensure when the ID or condition changes,
- * an update is triggered and new node is found.
- *
- */
-export declare function useRefById({ id, ref, condition, onRefChange, }: UseRefByIdProps): void;
-export {};

package/dist/internal/useRefById.svelte.js

@@ -1,27 +0,0 @@
-import { untrack } from "svelte";
-import { noop } from "./callbacks.js";
-/**
- * Finds the node with that ID and sets it to the boxed node.
- * Reactive using `$effect` to ensure when the ID or condition changes,
- * an update is triggered and new node is found.
- *
- */
-export function useRefById({ id, ref, condition = () => true, onRefChange = noop, }) {
-    $effect(() => {
-        // re-run when the ID changes.
-        id.current;
-        condition();
-        // re-run when the condition changes.
-        untrack(() => {
-            const node = document.getElementById(id.current);
-            ref.current = node;
-            onRefChange(ref.current);
-        });
-    });
-    $effect(() => {
-        return () => {
-            ref.current = null;
-            onRefChange(null);
-        };
-    });
-}

package/dist/internal/useTypeahead.svelte.d.ts

@@ -1,34 +0,0 @@
-export type Typeahead = ReturnType<typeof useTypeahead>;
-type TypeaheadOpts = {
-    onMatch?: (item: HTMLElement) => void;
-    getCurrentItem?: () => HTMLElement | null;
-};
-export declare function useTypeahead(opts?: TypeaheadOpts): {
-    search: import("svelte-toolbelt").WritableBox<string>;
-    handleTypeaheadSearch: (key: string, candidates: HTMLElement[]) => HTMLElement | undefined;
-    resetTypeahead: () => void;
-};
-/**
- * Wraps an array around itself at a given start index
- * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
- */
-export declare function wrapArray<T>(array: T[], startIndex: number): T[];
-/**
- * This is the "meat" of the typeahead matching logic. It takes in all the values,
- * the search and the current match, and returns the next match (or `undefined`).
- *
- * We normalize the search because if a user has repeatedly pressed a character,
- * we want the exact same behavior as if we only had that one character
- * (ie. cycle through options starting with that character)
- *
- * We also reorder the values by wrapping the array around the current match.
- * This is so we always look forward from the current match, and picking the first
- * match will always be the correct one.
- *
- * Finally, if the normalized search is exactly one character, we exclude the
- * current match from the values because otherwise it would be the first to match always
- * and focus would never move. This is as opposed to the regular case, where we
- * don't want focus to move if the current match still matches.
- */
-export declare function getNextMatch(values: string[], search: string, currentMatch?: string): string | undefined;
-export {};

package/dist/internal/useTypeahead.svelte.js

@@ -1,64 +0,0 @@
-import { boxAutoReset } from "./boxAutoReset.svelte.js";
-export function useTypeahead(opts) {
-    // Reset `search` 1 second after it was last updated
-    const search = boxAutoReset("", 1000);
-    const onMatch = opts?.onMatch ?? ((node) => node.focus());
-    const getCurrentItem = opts?.getCurrentItem ?? (() => document.activeElement);
-    function handleTypeaheadSearch(key, candidates) {
-        if (!candidates.length)
-            return;
-        search.current = search.current + key;
-        const currentItem = getCurrentItem();
-        const currentMatch = candidates.find((item) => item === currentItem)?.textContent?.trim() ?? "";
-        const values = candidates.map((item) => item.textContent?.trim() ?? "");
-        const nextMatch = getNextMatch(values, search.current, currentMatch);
-        const newItem = candidates.find((item) => item.textContent?.trim() === nextMatch);
-        if (newItem) {
-            onMatch(newItem);
-        }
-        return newItem;
-    }
-    function resetTypeahead() {
-        search.current = "";
-    }
-    return {
-        search,
-        handleTypeaheadSearch,
-        resetTypeahead,
-    };
-}
-/**
- * Wraps an array around itself at a given start index
- * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
- */
-export function wrapArray(array, startIndex) {
-    return array.map((_, index) => array[(startIndex + index) % array.length]);
-}
-/**
- * This is the "meat" of the typeahead matching logic. It takes in all the values,
- * the search and the current match, and returns the next match (or `undefined`).
- *
- * We normalize the search because if a user has repeatedly pressed a character,
- * we want the exact same behavior as if we only had that one character
- * (ie. cycle through options starting with that character)
- *
- * We also reorder the values by wrapping the array around the current match.
- * This is so we always look forward from the current match, and picking the first
- * match will always be the correct one.
- *
- * Finally, if the normalized search is exactly one character, we exclude the
- * current match from the values because otherwise it would be the first to match always
- * and focus would never move. This is as opposed to the regular case, where we
- * don't want focus to move if the current match still matches.
- */
-export function getNextMatch(values, search, currentMatch) {
-    const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
-    const normalizedSearch = isRepeated ? search[0] : search;
-    const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
-    let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
-    const excludeCurrentMatch = normalizedSearch.length === 1;
-    if (excludeCurrentMatch)
-        wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
-    const nextMatch = wrappedValues.find((value) => value?.toLowerCase().startsWith(normalizedSearch.toLowerCase()));
-    return nextMatch !== currentMatch ? nextMatch : undefined;
-}

package/dist/shared/date/index.d.ts

@@ -1,7 +0,0 @@
-export * from "./announcer.js";
-export * from "./calendar-helpers.svelte.js";
-export * from "./field.js";
-export * from "./formatter.js";
-export * from "./placeholders.js";
-export * from "./types.js";
-export * from "./utils.js";

package/dist/shared/date/index.js

@@ -1,7 +0,0 @@
-export * from "./announcer.js";
-export * from "./calendar-helpers.svelte.js";
-export * from "./field.js";
-export * from "./formatter.js";
-export * from "./placeholders.js";
-export * from "./types.js";
-export * from "./utils.js";