@johly/bits-ui 2.18.1

package/dist/internal/css-escape.js

@@ -0,0 +1,59 @@
+/**
+ * https://github.com/mathiasbynens/CSS.escape
+ *
+ * @param value - The value to escape for use as a CSS identifier
+ * @returns The escaped CSS identifier string
+ */
+export function cssEscape(value) {
+    if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+        return CSS.escape(value);
+    }
+    const length = value.length;
+    let index = -1;
+    let codeUnit;
+    let result = "";
+    const firstCodeUnit = value.charCodeAt(0);
+    // If the character is the first character and is a `-` (U+002D), and
+    // there is no second character, escape it
+    if (length === 1 && firstCodeUnit === 0x002d)
+        return "\\" + value;
+    while (++index < length) {
+        codeUnit = value.charCodeAt(index);
+        // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD)
+        if (codeUnit === 0x0000) {
+            result += "\uFFFD";
+            continue;
+        }
+        if (
+        // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is U+007F
+        (codeUnit >= 0x0001 && codeUnit <= 0x001f) ||
+            codeUnit === 0x007f ||
+            // If the character is the first character and is in the range [0-9] (U+0030 to U+0039)
+            (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+            // If the character is the second character and is in the range [0-9] (U+0030 to U+0039)
+            // and the first character is a `-` (U+002D)
+            (index === 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit === 0x002d)) {
+            // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+            result += "\\" + codeUnit.toString(16) + " ";
+            continue;
+        }
+        // If the character is not handled by one of the above rules and is
+        // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+        // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to U+005A),
+        // or [a-z] (U+0061 to U+007A)
+        if (codeUnit >= 0x0080 ||
+            codeUnit === 0x002d ||
+            codeUnit === 0x005f ||
+            (codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+            (codeUnit >= 0x0041 && codeUnit <= 0x005a) ||
+            (codeUnit >= 0x0061 && codeUnit <= 0x007a)) {
+            // Use the character itself
+            result += value.charAt(index);
+            continue;
+        }
+        // Otherwise, escape the character
+        // https://drafts.csswg.org/cssom/#escape-a-character
+        result += "\\" + value.charAt(index);
+    }
+    return result;
+}

package/dist/internal/data-typeahead.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Getter } from "svelte-toolbelt";
+interface DataTypeaheadOpts {
+    onMatch: (value: string) => void;
+    getCurrentItem: () => string;
+    candidateValues: Getter<string[]>;
+    enabled: Getter<boolean>;
+    getWindow: () => Window & typeof globalThis;
+}
+export declare class DataTypeahead {
+    #private;
+    constructor(opts: DataTypeaheadOpts);
+    handleTypeaheadSearch(key: string): string | undefined;
+    resetTypeahead(): void;
+}
+export {};

package/dist/internal/data-typeahead.svelte.js

@@ -0,0 +1,33 @@
+import { getNextMatch } from "./arrays.js";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+export class DataTypeahead {
+    #opts;
+    #candidateValues = $derived.by(() => this.#opts.candidateValues());
+    #search;
+    constructor(opts) {
+        this.#opts = opts;
+        this.#search = boxAutoReset("", {
+            afterMs: 1000,
+            getWindow: this.#opts.getWindow,
+        });
+        this.handleTypeaheadSearch = this.handleTypeaheadSearch.bind(this);
+        this.resetTypeahead = this.resetTypeahead.bind(this);
+    }
+    handleTypeaheadSearch(key) {
+        if (!this.#opts.enabled() || !this.#candidateValues.length)
+            return;
+        this.#search.current = this.#search.current + key;
+        const currentItem = this.#opts.getCurrentItem();
+        const currentMatch = this.#candidateValues.find((item) => item === currentItem) ?? "";
+        const values = this.#candidateValues.map((item) => item ?? "");
+        const nextMatch = getNextMatch(values, this.#search.current, currentMatch);
+        const newItem = this.#candidateValues.find((item) => item === nextMatch);
+        if (newItem) {
+            this.#opts.onMatch(newItem);
+        }
+        return newItem;
+    }
+    resetTypeahead() {
+        this.#search.current = "";
+    }
+}

package/dist/internal/date-time/announcer.d.ts

@@ -0,0 +1,7 @@
+export type Announcer = ReturnType<typeof getAnnouncer>;
+/**
+ * Creates an announcer object that can be used to make `aria-live` announcements to screen readers.
+ */
+export declare function getAnnouncer(doc: Document | null): {
+    announce: (value: string | null | number, kind?: "assertive" | "polite", timeout?: number) => NodeJS.Timeout | undefined;
+};

package/dist/internal/date-time/announcer.js

@@ -0,0 +1,82 @@
+import { srOnlyStylesString } from "svelte-toolbelt";
+import { isBrowser, isHTMLElement } from "../is.js";
+/**
+ * Creates or gets an announcer element which is used to announce messages to screen readers.
+ * Within the date components, we use this to announce when the values of the individual segments
+ * change, as without it we get inconsistent behavior across screen readers.
+ */
+function initAnnouncer(doc) {
+    if (!isBrowser || !doc)
+        return null;
+    let el = doc.querySelector("[data-bits-announcer]");
+    /**
+     * Creates a log element for assertive or polite announcements.
+     */
+    const createLog = (kind) => {
+        const log = doc.createElement("div");
+        log.role = "log";
+        log.ariaLive = kind;
+        log.setAttribute("aria-relevant", "additions");
+        return log;
+    };
+    if (!isHTMLElement(el)) {
+        const div = doc.createElement("div");
+        div.style.cssText = srOnlyStylesString;
+        div.setAttribute("data-bits-announcer", "");
+        div.appendChild(createLog("assertive"));
+        div.appendChild(createLog("polite"));
+        el = div;
+        doc.body.insertBefore(el, doc.body.firstChild);
+    }
+    /**
+     * Retrieves the log element for assertive or polite announcements.
+     */
+    const getLog = (kind) => {
+        if (!isHTMLElement(el))
+            return null;
+        const log = el.querySelector(`[aria-live="${kind}"]`);
+        if (!isHTMLElement(log))
+            return null;
+        return log;
+    };
+    return {
+        getLog,
+    };
+}
+/**
+ * Creates an announcer object that can be used to make `aria-live` announcements to screen readers.
+ */
+export function getAnnouncer(doc) {
+    const announcer = initAnnouncer(doc);
+    /**
+     * Announces a message to screen readers using the specified kind of announcement.
+     */
+    function announce(value, kind = "assertive", timeout = 7500) {
+        if (!announcer || !isBrowser || !doc)
+            return;
+        const log = announcer.getLog(kind);
+        const content = doc.createElement("div");
+        if (typeof value === "number") {
+            value = value.toString();
+        }
+        else if (value === null) {
+            value = "Empty";
+        }
+        else {
+            value = value.trim();
+        }
+        content.innerText = value;
+        if (kind === "assertive") {
+            log?.replaceChildren(content);
+        }
+        else {
+            log?.appendChild(content);
+        }
+        return setTimeout(() => {
+            content.remove();
+        }, timeout);
+    }
+    return {
+        announce,
+    };
+}

package/dist/internal/date-time/calendar-helpers.svelte.d.ts

@@ -0,0 +1,208 @@
+import { type DateValue } from "@internationalized/date";
+import { type ReadableBox, type WritableBox } from "svelte-toolbelt";
+import type { Formatter } from "./formatter.js";
+import type { DateMatcher, Month } from "../../shared/index.js";
+/**
+ * Checks if a given node is a calendar cell element.
+ *
+ * @param node - The node to check.
+ */
+export declare function isCalendarDayNode(node: unknown): node is HTMLElement;
+/**
+ * Retrieves an array of date values representing the days between
+ * the provided start and end dates.
+ */
+export declare function getDaysBetween(start: DateValue, end: DateValue): DateValue[];
+export type CreateMonthProps = {
+    /**
+     * The date object representing the month's date (usually the first day of the month).
+     */
+    dateObj: DateValue;
+    /**
+     * The day of the week to start the calendar on (0 for Sunday, 1 for Monday, etc.).
+     */
+    weekStartsOn: number | undefined;
+    /**
+     * Whether to always render 6 weeks in the calendar, even if the month doesn't
+     * span 6 weeks.
+     */
+    fixedWeeks: boolean;
+    /**
+     * The locale to use when creating the calendar month.
+     */
+    locale: string;
+};
+type SetMonthProps = CreateMonthProps & {
+    numberOfMonths: number | undefined;
+    currentMonths?: Month<DateValue>[];
+};
+export declare function createMonths(props: SetMonthProps): Month<DateValue>[];
+export declare function getSelectableCells(calendarNode: HTMLElement | null): HTMLElement[];
+/**
+ * A helper function to extract the date from the `data-value`
+ * attribute of a date cell and set it as the placeholder value.
+ *
+ * Shared between the calendar and range calendar builders.
+ *
+ * @param node - The node to extract the date from.
+ * @param placeholder - The placeholder value store which will be set to the extracted date.
+ */
+export declare function setPlaceholderToNodeValue(node: HTMLElement, placeholder: WritableBox<DateValue>): void;
+type ShiftCalendarFocusProps = {
+    /**
+     * The day node with current focus.
+     */
+    node: HTMLElement;
+    /**
+     * The number of days to shift the focus by.
+     */
+    add: number;
+    /**
+     * The `placeholder` value box
+     */
+    placeholder: WritableBox<DateValue>;
+    /**
+     * The calendar node.
+     */
+    calendarNode: HTMLElement | null;
+    /**
+     * Whether the previous button is disabled.
+     */
+    isPrevButtonDisabled: boolean;
+    /**
+     * Whether the next button is disabled.
+     */
+    isNextButtonDisabled: boolean;
+    /**
+     * The months array of the calendar.
+     */
+    months: Month<DateValue>[];
+    /**
+     * The number of months being displayed in the calendar.
+     */
+    numberOfMonths: number;
+};
+/**
+ * Shared logic for shifting focus between cells in the
+ * calendar and range calendar.
+ */
+export declare function shiftCalendarFocus({ node, add, placeholder, calendarNode, isPrevButtonDisabled, isNextButtonDisabled, months, numberOfMonths, }: ShiftCalendarFocusProps): void;
+type HandleCalendarKeydownProps = {
+    event: KeyboardEvent;
+    handleCellClick: (event: Event, date: DateValue) => void;
+    shiftFocus: (node: HTMLElement, add: number) => void;
+    placeholderValue: DateValue;
+};
+/**
+ * Shared keyboard event handler for the calendar and range calendar.
+ */
+export declare function handleCalendarKeydown({ event, handleCellClick, shiftFocus, placeholderValue, }: HandleCalendarKeydownProps): void;
+type HandleCalendarPageProps = {
+    months: Month<DateValue>[];
+    setMonths: (months: Month<DateValue>[]) => void;
+    numberOfMonths: number;
+    pagedNavigation: boolean;
+    weekStartsOn: number | undefined;
+    locale: string;
+    fixedWeeks: boolean;
+    setPlaceholder: (date: DateValue) => void;
+};
+export declare function handleCalendarNextPage({ months, setMonths, numberOfMonths, pagedNavigation, weekStartsOn, locale, fixedWeeks, setPlaceholder, }: HandleCalendarPageProps): void;
+export declare function handleCalendarPrevPage({ months, setMonths, numberOfMonths, pagedNavigation, weekStartsOn, locale, fixedWeeks, setPlaceholder, }: HandleCalendarPageProps): void;
+type GetWeekdaysProps = {
+    months: Month<DateValue>[];
+    weekdayFormat: Intl.DateTimeFormatOptions["weekday"];
+    formatter: Formatter;
+};
+export declare function getWeekdays({ months, formatter, weekdayFormat }: GetWeekdaysProps): string[];
+type UseMonthViewSyncProps = {
+    weekStartsOn: ReadableBox<number | undefined>;
+    locale: ReadableBox<string>;
+    fixedWeeks: ReadableBox<boolean>;
+    numberOfMonths: ReadableBox<number>;
+    placeholder: WritableBox<DateValue>;
+    setMonths: (months: Month<DateValue>[]) => void;
+};
+/**
+ * Updates the displayed months based on changes in the options values,
+ * which determines the month to show in the calendar.
+ */
+export declare function useMonthViewOptionsSync(props: UseMonthViewSyncProps): void;
+type CreateAccessibleHeadingProps = {
+    calendarNode: HTMLElement;
+    label: string;
+    accessibleHeadingId: string;
+};
+/**
+ * Creates an accessible heading element for the calendar.
+ * Returns a function that removes the heading element.
+ */
+export declare function createAccessibleHeading({ calendarNode, label, accessibleHeadingId, }: CreateAccessibleHeadingProps): () => void;
+type UseMonthViewPlaceholderSyncProps = {
+    placeholder: WritableBox<DateValue>;
+    getVisibleMonths: () => DateValue[];
+    weekStartsOn: ReadableBox<number | undefined>;
+    locale: ReadableBox<string>;
+    fixedWeeks: ReadableBox<boolean>;
+    numberOfMonths: ReadableBox<number>;
+    setMonths: (months: Month<DateValue>[]) => void;
+};
+export declare function useMonthViewPlaceholderSync({ placeholder, getVisibleMonths, weekStartsOn, locale, fixedWeeks, numberOfMonths, setMonths, }: UseMonthViewPlaceholderSyncProps): void;
+type GetIsNextButtonDisabledProps = {
+    maxValue: DateValue | undefined;
+    months: Month<DateValue>[];
+    disabled: boolean;
+};
+export declare function getIsNextButtonDisabled({ maxValue, months, disabled, }: GetIsNextButtonDisabledProps): boolean;
+type GetIsPrevButtonDisabledProps = {
+    minValue: DateValue | undefined;
+    months: Month<DateValue>[];
+    disabled: boolean;
+};
+export declare function getIsPrevButtonDisabled({ minValue, months, disabled, }: GetIsPrevButtonDisabledProps): boolean;
+type GetCalendarHeadingValueProps = {
+    months: Month<DateValue>[];
+    formatter: Formatter;
+    locale: string;
+};
+export declare function getCalendarHeadingValue({ months, locale, formatter, }: GetCalendarHeadingValueProps): string;
+type GetCalendarElementProps = {
+    fullCalendarLabel: string;
+    id: string;
+    isInvalid: boolean;
+    disabled: boolean;
+    readonly: boolean;
+};
+export declare function getCalendarElementProps({ fullCalendarLabel, id, isInvalid, disabled, readonly, }: GetCalendarElementProps): {
+    readonly id: string;
+    readonly role: "application";
+    readonly "aria-label": string;
+    readonly "data-invalid": "" | undefined;
+    readonly "data-disabled": "" | undefined;
+    readonly "data-readonly": "" | undefined;
+};
+export type CalendarParts = "root" | "grid" | "cell" | "next-button" | "prev-button" | "day" | "grid-body" | "grid-head" | "grid-row" | "head-cell" | "header" | "heading" | "month-select" | "year-select";
+export declare function pickerOpenFocus(e: Event): void;
+export declare function getFirstNonDisabledDateInView(calendarRef: HTMLElement): DateValue | undefined;
+/**
+ * Ensures the placeholder is not set to a disabled date,
+ * which would prevent the user from entering the Calendar
+ * via the keyboard.
+ */
+export declare function useEnsureNonDisabledPlaceholder({ ref, placeholder, defaultPlaceholder, minValue, maxValue, isDateDisabled, }: {
+    ref: WritableBox<HTMLElement | null>;
+    placeholder: WritableBox<DateValue | undefined>;
+    isDateDisabled: ReadableBox<DateMatcher>;
+    minValue: ReadableBox<DateValue | undefined>;
+    maxValue: ReadableBox<DateValue | undefined>;
+    defaultPlaceholder: DateValue;
+}): void;
+export declare function getDateWithPreviousTime(date: DateValue | undefined, prev: DateValue | undefined): DateValue | undefined;
+export declare const calendarAttrs: import("../attrs.js").CreateBitsAttrsReturn<readonly ["root", "grid", "cell", "next-button", "prev-button", "day", "grid-body", "grid-head", "grid-row", "head-cell", "header", "heading", "month-select", "year-select"]>;
+type GetDefaultYearsProps = {
+    placeholderYear: number;
+    minValue: DateValue | undefined;
+    maxValue: DateValue | undefined;
+};
+export declare function getDefaultYears(opts: GetDefaultYearsProps): number[];
+export {};