bits-ui 1.8.0 → 2.1.0

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

@@ -1,20 +1,12 @@
-import { afterTick, executeCallbacks } from "svelte-toolbelt";
+import { executeCallbacks } from "svelte-toolbelt";
 import { Previous, watch } from "runed";
 import { on } from "svelte/events";
 import { useStateMachine } from "../../../internal/use-state-machine.svelte.js";
-export function usePresence(present, id) {
+export function usePresence(present, ref) {
     let styles = $state({});
     let prevAnimationNameState = $state("none");
     const initialState = present.current ? "mounted" : "unmounted";
-    let node = $state(null);
     const prevPresent = new Previous(() => present.current);
-    watch([() => id.current, () => present.current], ([id, present]) => {
-        if (!id || !present)
-            return;
-        afterTick(() => {
-            node = document.getElementById(id);
-        });
-    });
     const { state, dispatch } = useStateMachine(initialState, {
         mounted: {
             UNMOUNT: "unmounted",
@@ -28,18 +20,15 @@ export function usePresence(present, id) {
             MOUNT: "mounted",
         },
     });
-    watch(() => present.current, (currPresent) => {
-        if (!node) {
-            node = document.getElementById(id.current);
-        }
-        if (!node)
+    watch(() => present.current, () => {
+        if (!ref.current)
             return;
-        const hasPresentChanged = currPresent !== prevPresent.current;
+        const hasPresentChanged = present.current !== prevPresent.current;
         if (!hasPresentChanged)
             return;
         const prevAnimationName = prevAnimationNameState;
-        const currAnimationName = getAnimationName(node);
-        if (currPresent) {
+        const currAnimationName = getAnimationName(ref.current);
+        if (present.current) {
             dispatch("MOUNT");
         }
         else if (currAnimationName === "none" || styles.display === "none") {
@@ -69,38 +58,32 @@ export function usePresence(present, id) {
      * make sure we only trigger ANIMATION_END for the currently active animation.
      */
     function handleAnimationEnd(event) {
-        if (!node)
-            node = document.getElementById(id.current);
-        if (!node)
+        if (!ref.current)
             return;
-        const currAnimationName = getAnimationName(node);
+        const currAnimationName = getAnimationName(ref.current);
         const isCurrentAnimation = currAnimationName.includes(event.animationName) || currAnimationName === "none";
-        if (event.target === node && isCurrentAnimation) {
+        if (event.target === ref.current && isCurrentAnimation) {
             dispatch("ANIMATION_END");
         }
     }
     function handleAnimationStart(event) {
-        if (!node)
-            node = document.getElementById(id.current);
-        if (!node)
+        if (!ref.current)
             return;
-        if (event.target === node) {
-            prevAnimationNameState = getAnimationName(node);
+        if (event.target === ref.current) {
+            prevAnimationNameState = getAnimationName(ref.current);
         }
     }
     watch(() => state.current, () => {
-        if (!node)
-            node = document.getElementById(id.current);
-        if (!node)
+        if (!ref.current)
             return;
-        const currAnimationName = getAnimationName(node);
+        const currAnimationName = getAnimationName(ref.current);
         prevAnimationNameState = state.current === "mounted" ? currAnimationName : "none";
     });
-    watch(() => node, (node) => {
-        if (!node)
+    watch(() => ref.current, () => {
+        if (!ref.current)
             return;
-        styles = getComputedStyle(node);
-        return executeCallbacks(on(node, "animationstart", handleAnimationStart), on(node, "animationcancel", handleAnimationEnd), on(node, "animationend", handleAnimationEnd));
+        styles = getComputedStyle(ref.current);
+        return executeCallbacks(on(ref.current, "animationstart", handleAnimationStart), on(ref.current, "animationcancel", handleAnimationEnd), on(ref.current, "animationend", handleAnimationEnd));
     });
     const isPresentDerived = $derived(["mounted", "unmountSuspended"].includes(state.current));
     return {

package/dist/bits/utilities/text-selection-layer/text-selection-layer.svelte

@@ -11,6 +11,7 @@
 		id,
 		children,
 		enabled,
+		ref,
 	}: TextSelectionLayerImplProps = $props();
 
 	useTextSelectionLayer({
@@ -18,6 +19,7 @@
 		onPointerDown: box.with(() => onPointerDown),
 		onPointerUp: box.with(() => onPointerUp),
 		enabled: box.with(() => enabled && preventOverflowTextSelection),
+		ref,
 	});
 </script>
 

package/dist/bits/utilities/text-selection-layer/types.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { ReadableBox } from "svelte-toolbelt";
 export type PointerHandler = (e: PointerEvent) => void;
 export type TextSelectionLayerProps = {
     /**
@@ -28,4 +29,5 @@ export type TextSelectionLayerImplProps = {
      * Callback fired when pointerup event triggers.
      */
     onPointerUp?: PointerHandler;
+    ref: ReadableBox<HTMLElement | null>;
 } & TextSelectionLayerProps;

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

@@ -1,6 +1,8 @@
 import type { TextSelectionLayerImplProps } from "./types.js";
 import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-type TextSelectionLayerStateProps = ReadableBoxedValues<Required<Omit<TextSelectionLayerImplProps, "children" | "preventOverflowTextSelection">>>;
+type TextSelectionLayerStateProps = ReadableBoxedValues<Required<Omit<TextSelectionLayerImplProps, "children" | "preventOverflowTextSelection" | "ref">> & {
+    ref: HTMLElement | null;
+}>;
 export declare class TextSelectionLayerState {
     #private;
     readonly opts: TextSelectionLayerStateProps;

package/dist/bits/utilities/text-selection-layer/use-text-selection-layer.svelte.js

@@ -1,4 +1,4 @@
-import { box, composeHandlers, executeCallbacks, useRefById, } from "svelte-toolbelt";
+import { composeHandlers, executeCallbacks } from "svelte-toolbelt";
 import { watch } from "runed";
 import { on } from "svelte/events";
 import { noop } from "../../../internal/noop.js";
@@ -8,14 +8,8 @@ globalThis.bitsTextSelectionLayers ??= new Map();
 export class TextSelectionLayerState {
     opts;
     #unsubSelectionLock = noop;
-    #ref = box(null);
     constructor(opts) {
         this.opts = opts;
-        useRefById({
-            id: opts.id,
-            ref: this.#ref,
-            deps: () => this.opts.enabled.current,
-        });
         let unsubEvents = noop;
         watch(() => this.opts.enabled.current, (isEnabled) => {
             if (isEnabled) {
@@ -34,7 +28,7 @@ export class TextSelectionLayerState {
         return executeCallbacks(on(document, "pointerdown", this.#pointerdown), on(document, "pointerup", composeHandlers(this.#resetSelectionLock, this.opts.onPointerUp.current)));
     }
     #pointerdown = (e) => {
-        const node = this.#ref.current;
+        const node = this.opts.ref.current;
         const target = e.target;
         if (!isHTMLElement(node) || !isHTMLElement(target) || !this.opts.enabled.current)
             return;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
 export * from "./shared/index.js";
 export type * from "./shared/index.js";
 export * from "./types.js";

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
 export * from "./shared/index.js";
 export * from "./types.js";

package/dist/internal/create-id.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Creates a unique ID for a given uid and optional prefix.
+ *
+ * @param uid - the uid generated by $props.id()
+ * @param prefix - optional prefix to use for the id (defaults to "bits")
+ */
+export declare function createId(uid: string): string;
+export declare function createId(prefix: string, uid: string): string;

package/dist/internal/create-id.js

@@ -0,0 +1,5 @@
+export function createId(prefixOrUid, uid) {
+    if (uid === undefined)
+        return `bits-${prefixOrUid}`;
+    return `bits-${prefixOrUid}-${uid}`;
+}

package/dist/internal/date-time/field/helpers.d.ts

@@ -76,4 +76,5 @@ export declare function setDescription(id: string, formatter: Formatter, value:
  * date field is unmounted.
  */
 export declare function removeDescriptionElement(id: string): void;
+export declare function getDefaultHourCycle(locale: string): 12 | 24;
 export {};

package/dist/internal/date-time/field/helpers.js

@@ -1,7 +1,7 @@
 import { styleToString } from "svelte-toolbelt";
 import { getPlaceholder } from "../placeholders.js";
 import { hasTime, isZonedDateTime } from "../utils.js";
-import { ALL_SEGMENT_PARTS, DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, TIME_SEGMENT_PARTS, } from "./parts.js";
+import { ALL_SEGMENT_PARTS, DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS, } from "./parts.js";
 import { getSegments } from "./segments.js";
 import { isBrowser, isNull, isNumberString } from "../../is.js";
 import { useId } from "../../use-id.js";
@@ -289,7 +289,7 @@ export function isDateAndTimeSegmentObj(obj) {
         return false;
     }
     return Object.entries(obj).every(([key, value]) => {
-        const validKey = TIME_SEGMENT_PARTS.includes(key) ||
+        const validKey = EDITABLE_TIME_SEGMENT_PARTS.includes(key) ||
             DATE_SEGMENT_PARTS.includes(key);
         const validValue = key === "dayPeriod"
             ? value === "AM" || value === "PM" || value === null
@@ -376,3 +376,9 @@ export function removeDescriptionElement(id) {
         return;
     document.body.removeChild(el);
 }
+export function getDefaultHourCycle(locale) {
+    const formatter = new Intl.DateTimeFormat(locale, { hour: "numeric" });
+    const parts = formatter.formatToParts(new Date("2023-01-01T13:00:00"));
+    const hourPart = parts.find((part) => part.type === "hour");
+    return hourPart?.value === "1" ? 12 : 24;
+}

package/dist/internal/date-time/field/parts.d.ts

@@ -1,6 +1,8 @@
 export declare const DATE_SEGMENT_PARTS: readonly ["day", "month", "year"];
-export declare const TIME_SEGMENT_PARTS: readonly ["hour", "minute", "second", "dayPeriod"];
+export declare const EDITABLE_TIME_SEGMENT_PARTS: readonly ["hour", "minute", "second", "dayPeriod"];
 export declare const NON_EDITABLE_SEGMENT_PARTS: readonly ["literal", "timeZoneName"];
 export declare const EDITABLE_SEGMENT_PARTS: readonly ["day", "month", "year", "hour", "minute", "second", "dayPeriod"];
 export declare const ALL_SEGMENT_PARTS: readonly ["day", "month", "year", "hour", "minute", "second", "dayPeriod", "literal", "timeZoneName"];
+export declare const ALL_TIME_SEGMENT_PARTS: readonly ["hour", "minute", "second", "dayPeriod", "literal", "timeZoneName"];
 export declare const ALL_EXCEPT_LITERAL_PARTS: ("day" | "month" | "year" | "hour" | "minute" | "second" | "dayPeriod" | "timeZoneName")[];
+export declare const ALL_TIME_EXCEPT_LITERAL_PARTS: ("hour" | "minute" | "second" | "dayPeriod" | "timeZoneName")[];

package/dist/internal/date-time/field/parts.js

@@ -1,9 +1,17 @@
 export const DATE_SEGMENT_PARTS = ["day", "month", "year"];
-export const TIME_SEGMENT_PARTS = ["hour", "minute", "second", "dayPeriod"];
+export const EDITABLE_TIME_SEGMENT_PARTS = ["hour", "minute", "second", "dayPeriod"];
 export const NON_EDITABLE_SEGMENT_PARTS = ["literal", "timeZoneName"];
-export const EDITABLE_SEGMENT_PARTS = [...DATE_SEGMENT_PARTS, ...TIME_SEGMENT_PARTS];
+export const EDITABLE_SEGMENT_PARTS = [
+    ...DATE_SEGMENT_PARTS,
+    ...EDITABLE_TIME_SEGMENT_PARTS,
+];
 export const ALL_SEGMENT_PARTS = [
     ...EDITABLE_SEGMENT_PARTS,
     ...NON_EDITABLE_SEGMENT_PARTS,
 ];
+export const ALL_TIME_SEGMENT_PARTS = [
+    ...EDITABLE_TIME_SEGMENT_PARTS,
+    ...NON_EDITABLE_SEGMENT_PARTS,
+];
 export const ALL_EXCEPT_LITERAL_PARTS = ALL_SEGMENT_PARTS.filter((part) => part !== "literal");
+export const ALL_TIME_EXCEPT_LITERAL_PARTS = ALL_TIME_SEGMENT_PARTS.filter((part) => part !== "literal");

package/dist/internal/date-time/field/segments.d.ts

@@ -5,6 +5,7 @@
  * @param fieldNode - The ID of the field we're navigating within
  */
 export declare function handleSegmentNavigation(e: KeyboardEvent, fieldNode: HTMLElement | null): void;
+export declare function handleTimeSegmentNavigation(e: KeyboardEvent, fieldNode: HTMLElement | null): void;
 /**
  * Retrieves the next segment in the list of segments relative to the provided node.
  *
@@ -29,11 +30,17 @@ export declare function getPrevNextSegments(startingNode: HTMLElement, fieldNode
     next: HTMLElement | null | undefined;
     prev: HTMLElement | null | undefined;
 };
+export declare function getPrevNextTimeSegments(startingNode: HTMLElement, fieldNode: HTMLElement | null): {
+    next: HTMLElement | null | undefined;
+    prev: HTMLElement | null | undefined;
+};
 /**
  * Shifts the focus to the next segment in the list of segments
  * within the field identified by the provided ID.
  */
 export declare function moveToNextSegment(e: KeyboardEvent, fieldNode: HTMLElement | null): void;
+export declare function moveToNextTimeSegment(e: KeyboardEvent, fieldNode: HTMLElement | null): void;
+export declare function moveToPrevTimeSegment(e: KeyboardEvent, fieldNode: HTMLElement | null): void;
 /**
  * Shifts the focus to the previous segment in the list of segments
  * within the field identified by the provided ID. If this is the first
@@ -45,6 +52,8 @@ export declare function isSegmentNavigationKey(key: string): boolean;
  * Retrieves all the interactive segments within the field identified by the provided ID.
  */
 export declare function getSegments(fieldNode: HTMLElement | null): HTMLElement[];
+export declare function getTimeSegments(fieldNode: HTMLElement | null): HTMLElement[];
+export declare function getFirstTimeSegment(fieldNode: HTMLElement | null): HTMLElement | undefined;
 /**
  * Get the first interactive segment within the field identified by the provided ID.
  */

package/dist/internal/date-time/field/segments.js

@@ -23,6 +23,22 @@ export function handleSegmentNavigation(e, fieldNode) {
         next.focus();
     }
 }
+export function handleTimeSegmentNavigation(e, fieldNode) {
+    const currentTarget = e.currentTarget;
+    if (!isHTMLElement(currentTarget))
+        return;
+    const { prev, next } = getPrevNextTimeSegments(currentTarget, fieldNode);
+    if (e.key === kbd.ARROW_LEFT) {
+        if (!prev)
+            return;
+        prev.focus();
+    }
+    else if (e.key === kbd.ARROW_RIGHT) {
+        if (!next)
+            return;
+        next.focus();
+    }
+}
 /**
  * Retrieves the next segment in the list of segments relative to the provided node.
  *
@@ -70,6 +86,19 @@ export function getPrevNextSegments(startingNode, fieldNode) {
         prev: getPrevSegment(startingNode, segments),
     };
 }
+export function getPrevNextTimeSegments(startingNode, fieldNode) {
+    const segments = getTimeSegments(fieldNode);
+    if (!segments.length) {
+        return {
+            next: null,
+            prev: null,
+        };
+    }
+    return {
+        next: getNextSegment(startingNode, segments),
+        prev: getPrevSegment(startingNode, segments),
+    };
+}
 /**
  * Shifts the focus to the next segment in the list of segments
  * within the field identified by the provided ID.
@@ -83,6 +112,24 @@ export function moveToNextSegment(e, fieldNode) {
         return;
     next.focus();
 }
+export function moveToNextTimeSegment(e, fieldNode) {
+    const node = e.currentTarget;
+    if (!isHTMLElement(node))
+        return;
+    const { next } = getPrevNextTimeSegments(node, fieldNode);
+    if (!next)
+        return;
+    next.focus();
+}
+export function moveToPrevTimeSegment(e, fieldNode) {
+    const node = e.currentTarget;
+    if (!isHTMLElement(node))
+        return;
+    const { prev } = getPrevNextTimeSegments(node, fieldNode);
+    if (!prev)
+        return;
+    prev.focus();
+}
 /**
  * Shifts the focus to the previous segment in the list of segments
  * within the field identified by the provided ID. If this is the first
@@ -120,6 +167,24 @@ export function getSegments(fieldNode) {
     });
     return segments;
 }
+export function getTimeSegments(fieldNode) {
+    if (!fieldNode)
+        return [];
+    const segments = Array.from(fieldNode.querySelectorAll("[data-segment]")).filter((el) => {
+        if (!isHTMLElement(el))
+            return false;
+        const segment = el.dataset.segment;
+        if (segment === "trigger")
+            return true;
+        if (segment === "literal")
+            return false;
+        return true;
+    });
+    return segments;
+}
+export function getFirstTimeSegment(fieldNode) {
+    return getTimeSegments(fieldNode)[0];
+}
 /**
  * Get the first interactive segment within the field identified by the provided ID.
  */

package/dist/internal/date-time/field/time-helpers.d.ts

@@ -0,0 +1,77 @@
+import type { EditableTimeSegmentPart, HourCycle, TimeGranularity, TimeSegmentContentObj, TimeSegmentStateMap, TimeSegmentValueObj, TimeValue } from "../../../shared/date/types.js";
+import { CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
+import type { TimeFormatter } from "../formatter.js";
+import type { TimeSegmentPart } from "./types.js";
+export declare function initializeSegmentValues(): TimeSegmentValueObj;
+type SharedTimeContentProps = {
+    granularity: TimeGranularity;
+    timeRef: TimeValue;
+    formatter: TimeFormatter;
+    hideTimeZone: boolean;
+    hourCycle: HourCycle | undefined;
+};
+type CreateTimeContentObjProps = SharedTimeContentProps & {
+    segmentValues: TimeSegmentValueObj;
+    locale: string;
+};
+type CreateTimeContentProps = CreateTimeContentObjProps;
+export declare function createTimeContent(props: CreateTimeContentProps): {
+    obj: TimeSegmentContentObj;
+    arr: {
+        part: TimeSegmentPart;
+        value: string;
+    }[];
+};
+export declare function initTimeSegmentStates(): TimeSegmentStateMap;
+export declare function initTimeSegmentIds(): any;
+export declare function isEditableTimeSegmentPart(part: unknown): part is EditableTimeSegmentPart;
+export declare function isAnyTimeSegmentPart(part: unknown): part is TimeSegmentPart;
+type GetTimeValueFromSegments<T extends TimeValue = Time> = {
+    segmentObj: TimeSegmentValueObj;
+    fieldNode: HTMLElement | null;
+    timeRef: T;
+};
+export declare function getTimeValueFromSegments<T extends TimeValue = Time>(props: GetTimeValueFromSegments<T>): T;
+/**
+ * Check if all the segments being used have been filled.
+ * We use this to determine when we should set the value
+ * store of the date field(s).
+ *
+ * @param segmentValues - The current `SegmentValueObj`
+ * @param fieldNode  - The id of the date field
+ */
+export declare function areAllTimeSegmentsFilled(segmentValues: TimeSegmentValueObj, fieldNode: HTMLElement | null): boolean;
+/**
+ * Infer the granularity to use based on the
+ * value and granularity props.
+ */
+export declare function inferTimeGranularity(granularity: TimeGranularity | undefined): TimeGranularity;
+/**
+ * Determines if the element with the provided id is the first focusable
+ * segment in the date field with the provided fieldId.
+ *
+ * @param id - The id of the element to check if it's the first segment
+ * @param fieldNode - The id of the date field associated with the segment
+ */
+export declare function isFirstTimeSegment(id: string, fieldNode: HTMLElement | null): boolean;
+/**
+ * Creates or updates a description element for a date field
+ * which enables screen readers to read the date field's value.
+ *
+ * This element is hidden from view, and is portalled to the body
+ * so it can be associated via `aria-describedby` and read by
+ * screen readers as the user interacts with the date field.
+ */
+export declare function setTimeDescription(id: string, formatter: TimeFormatter, value: TimeValue): void;
+/**
+ * Removes the description element for the date field with
+ * the provided ID. This function should be called when the
+ * date field is unmounted.
+ */
+export declare function removeTimeDescriptionElement(id: string): void;
+export declare function convertTimeValueToDateValue(time: TimeValue): CalendarDateTime | ZonedDateTime;
+export declare function convertTimeValueToTime(time: TimeValue): Time;
+export declare function isTimeBefore(timeToCompare: Time, referenceTime: Time): boolean;
+export declare function isTimeAfter(timeToCompare: Time, referenceTime: Time): boolean;
+export declare function getISOTimeValue(time: TimeValue): string;
+export {};