bits-ui 1.3.18 → 1.4.0

package/dist/bits/calendar/calendar.svelte.js

@@ -7,7 +7,7 @@ import { getAriaDisabled, getAriaHidden, getAriaReadonly, getAriaSelected, getDa
 import { useId } from "../../internal/use-id.js";
 import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
-import { createAccessibleHeading, createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
+import { createAccessibleHeading, createMonths, getCalendarElementProps, getCalendarHeadingValue, getDateWithPreviousTime, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
 import { getDateValueType, isBefore, toDate } from "../../internal/date-time/utils.js";
 export class CalendarRootState {
     opts;
@@ -258,9 +258,7 @@ export class CalendarRootState {
         else if (!value) {
             return false;
         }
-        else {
-            return isSameDay(value, date);
-        }
+        return isSameDay(value, date);
     }
     shiftFocus(node, add) {
         return shiftCalendarFocus({
@@ -275,13 +273,12 @@ export class CalendarRootState {
         });
     }
     handleCellClick(_, date) {
-        const readonly = this.opts.readonly.current;
-        if (readonly)
+        if (this.opts.readonly.current)
             return;
-        const isDateDisabled = this.opts.isDateDisabled.current;
-        const isDateUnavailable = this.opts.isDateUnavailable.current;
-        if (isDateDisabled?.(date) || isDateUnavailable?.(date))
+        if (this.opts.isDateDisabled.current?.(date) ||
+            this.opts.isDateUnavailable.current?.(date)) {
             return;
+        }
         const prev = this.opts.value.current;
         const multiple = this.opts.type.current === "multiple";
         if (multiple) {
@@ -289,19 +286,17 @@ export class CalendarRootState {
                 this.opts.value.current = this.handleMultipleUpdate(prev, date);
             }
         }
-        else {
-            if (!Array.isArray(prev)) {
-                const next = this.handleSingleUpdate(prev, date);
-                if (!next) {
-                    this.announcer.announce("Selected date is now empty.", "polite", 5000);
-                }
-                else {
-                    this.announcer.announce(`Selected Date: ${this.formatter.selectedDate(next, false)}`, "polite");
-                }
-                this.opts.value.current = next;
-                if (next !== undefined) {
-                    this.opts.onDateSelect?.current?.();
-                }
+        else if (!Array.isArray(prev)) {
+            const next = this.handleSingleUpdate(prev, date);
+            if (!next) {
+                this.announcer.announce("Selected date is now empty.", "polite", 5000);
+            }
+            else {
+                this.announcer.announce(`Selected Date: ${this.formatter.selectedDate(next, false)}`, "polite");
+            }
+            this.opts.value.current = getDateWithPreviousTime(next, prev);
+            if (next !== undefined) {
+                this.opts.onDateSelect?.current?.();
             }
         }
     }

package/dist/bits/calendar/components/calendar.svelte

@@ -45,7 +45,7 @@
 	}
 
 	if (value === undefined) {
-		const defaultValue = type === "single" ? "" : [];
+		const defaultValue = type === "single" ? undefined : [];
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		value = defaultValue as any;
 	}

package/dist/bits/command/command.svelte.js

@@ -29,6 +29,20 @@ const COMMAND_VALID_ITEM_SELECTOR = `${COMMAND_ITEM_SELECTOR}:not([aria-disabled
 const CommandRootContext = new Context("Command.Root");
 const CommandListContext = new Context("Command.List");
 const CommandGroupContainerContext = new Context("Command.Group");
+const defaultState = {
+    /** Value of the search query */
+    search: "",
+    /** Currently selected item value */
+    value: "",
+    filtered: {
+        /** The count of all visible items. */
+        count: 0,
+        /** Map from visible item id to its search store. */
+        items: new Map(),
+        /** Set of groups with at least one visible item. */
+        groups: new Set(),
+    },
+};
 class CommandRootState {
     opts;
     #updateScheduled = false;
@@ -43,9 +57,9 @@ class CommandRootState {
     inputNode = $state(null);
     labelNode = $state(null);
     // published state that the components and other things can react to
-    commandState = $state.raw(null);
+    commandState = $state.raw(defaultState);
     // internal state that we mutate in batches and publish to the `state` at once
-    _commandState = $state(null);
+    _commandState = $state(defaultState);
     // whether the search has had a value other than ""
     searchHasHadValue = $state(false);
     #snapshot() {
@@ -89,22 +103,9 @@ class CommandRootState {
     }
     constructor(opts) {
         this.opts = opts;
-        const defaultState = {
-            /** Value of the search query */
-            search: "",
-            /** Currently selected item value */
-            value: this.opts.value.current ?? "",
-            filtered: {
-                /** The count of all visible items. */
-                count: 0,
-                /** Map from visible item id to its search store. */
-                items: new Map(),
-                /** Set of groups with at least one visible item. */
-                groups: new Set(),
-            },
-        };
-        this._commandState = defaultState;
-        this.commandState = defaultState;
+        const defaults = { ...this._commandState, value: this.opts.value.current ?? "" };
+        this._commandState = defaults;
+        this.commandState = defaults;
         useRefById(opts);
         this.onkeydown = this.onkeydown.bind(this);
         $effect(() => {

package/dist/bits/popover/exports.d.ts

@@ -5,5 +5,4 @@ export { default as ContentStatic } from "./components/popover-content-static.sv
 export { default as Trigger } from "./components/popover-trigger.svelte";
 export { default as Close } from "./components/popover-close.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, } from "./types.js";
-export type { PortalProps } from "../utilities/portal/types.js";
+export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, PopoverPortalProps as PortalProps, } from "./types.js";

package/dist/bits/popover/types.d.ts

@@ -3,6 +3,7 @@ import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popp
 import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
 import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
+import type { PortalProps } from "../../types.js";
 export type PopoverRootPropsWithoutHTML = WithChildren<{
     /**
      * The open state of the popover.
@@ -24,3 +25,5 @@ export type PopoverClosePropsWithoutHTML = WithChild;
 export type PopoverCloseProps = PopoverClosePropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PopoverClosePropsWithoutHTML>;
 export type PopoverArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type PopoverArrowProps = ArrowProps;
+export type PopoverPortalPropsWithoutHTML = PortalProps;
+export type PopoverPortalProps = PortalProps;

package/dist/bits/select/components/select-scroll-down-button.svelte

@@ -8,6 +8,7 @@
 	let {
 		id = useId(),
 		ref = $bindable(null),
+		delay = () => 50,
 		child,
 		children,
 		...restProps
@@ -19,6 +20,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		delay: box.with(() => delay),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, scrollButtonState.props));

package/dist/bits/select/components/select-scroll-up-button.svelte

@@ -8,6 +8,7 @@
 	let {
 		id = useId(),
 		ref = $bindable(null),
+		delay = () => 50,
 		child,
 		children,
 		...restProps
@@ -19,6 +20,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		delay: box.with(() => delay),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, scrollButtonState.props));

package/dist/bits/select/select.svelte.d.ts

@@ -304,12 +304,14 @@ declare class SelectViewportState {
         };
     };
 }
-type SelectScrollButtonImplStateProps = WithRefProps;
+type SelectScrollButtonImplStateProps = WithRefProps & ReadableBoxedValues<{
+    delay: (tick: number) => number;
+}>;
 declare class SelectScrollButtonImplState {
     readonly opts: SelectScrollButtonImplStateProps;
     readonly content: SelectContentState;
     root: SelectBaseRootState;
-    autoScrollInterval: number | null;
+    autoScrollTimer: number | null;
     userScrollTimer: number;
     isUserScrolling: boolean;
     onAutoScroll: () => void;
@@ -318,7 +320,7 @@ declare class SelectScrollButtonImplState {
     handleUserScroll(): void;
     clearAutoScrollInterval(): void;
     onpointerdown(_: BitsPointerEvent): void;
-    onpointermove(_: BitsPointerEvent): void;
+    onpointermove(e: BitsPointerEvent): void;
     onpointerleave(_: BitsPointerEvent): void;
     props: {
         readonly id: string;
@@ -327,7 +329,7 @@ declare class SelectScrollButtonImplState {
             readonly flexShrink: 0;
         };
         readonly onpointerdown: (_: BitsPointerEvent) => void;
-        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (e: BitsPointerEvent) => void;
         readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }
@@ -351,7 +353,7 @@ declare class SelectScrollDownButtonState {
             readonly flexShrink: 0;
         };
         readonly onpointerdown: (_: BitsPointerEvent) => void;
-        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (e: BitsPointerEvent) => void;
         readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }
@@ -374,7 +376,7 @@ declare class SelectScrollUpButtonState {
             readonly flexShrink: 0;
         };
         readonly onpointerdown: (_: BitsPointerEvent) => void;
-        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly onpointermove: (e: BitsPointerEvent) => void;
         readonly onpointerleave: (_: BitsPointerEvent) => void;
     };
 }

package/dist/bits/select/select.svelte.js

@@ -55,7 +55,7 @@ class SelectBaseRootState {
     setHighlightedNode(node, initial = false) {
         this.highlightedNode = node;
         if (node && (this.isUsingKeyboard || initial)) {
-            node.scrollIntoView({ block: "nearest" });
+            node.scrollIntoView({ block: this.opts.scrollAlignment.current });
         }
     }
     getCandidateNodes() {
@@ -921,7 +921,7 @@ class SelectScrollButtonImplState {
     opts;
     content;
     root;
-    autoScrollInterval = null;
+    autoScrollTimer = null;
     userScrollTimer = -1;
     isUserScrolling = false;
     onAutoScroll = noop;
@@ -959,24 +959,22 @@ class SelectScrollButtonImplState {
         }, 200);
     }
     clearAutoScrollInterval() {
-        if (this.autoScrollInterval === null)
+        if (this.autoScrollTimer === null)
             return;
-        window.clearInterval(this.autoScrollInterval);
-        this.autoScrollInterval = null;
+        window.clearTimeout(this.autoScrollTimer);
+        this.autoScrollTimer = null;
     }
     onpointerdown(_) {
-        if (this.autoScrollInterval !== null)
+        if (this.autoScrollTimer !== null)
             return;
-        this.autoScrollInterval = window.setInterval(() => {
+        const autoScroll = (tick) => {
             this.onAutoScroll();
-        }, 50);
+            this.autoScrollTimer = window.setTimeout(() => autoScroll(tick + 1), this.opts.delay.current(tick));
+        };
+        this.autoScrollTimer = window.setTimeout(() => autoScroll(1), this.opts.delay.current(0));
     }
-    onpointermove(_) {
-        if (this.autoScrollInterval !== null)
-            return;
-        this.autoScrollInterval = window.setInterval(() => {
-            this.onAutoScroll();
-        }, 50);
+    onpointermove(e) {
+        this.onpointerdown(e);
     }
     onpointerleave(_) {
         this.clearAutoScrollInterval();
@@ -1018,7 +1016,7 @@ class SelectScrollDownButtonState {
             }
             this.scrollIntoViewTimer = afterSleep(5, () => {
                 const activeItem = this.root.highlightedNode;
-                activeItem?.scrollIntoView({ block: "nearest" });
+                activeItem?.scrollIntoView({ block: this.root.opts.scrollAlignment.current });
             });
         });
     }

package/dist/bits/select/types.d.ts

@@ -177,7 +177,16 @@ export type SelectArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type SelectArrowProps = ArrowProps;
 export type SelectViewportPropsWithoutHTML = WithChild;
 export type SelectViewportProps = SelectViewportPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectViewportPropsWithoutHTML>;
-export type SelectScrollUpButtonPropsWithoutHTML = WithChild;
+export type SelectScrollButtonPropsWithoutHTML = WithChild<{
+    /**
+     * Controls the initial delay (tick 0) and delay between auto-scrolls in milliseconds.
+     * The default function always returns 50ms.
+     *
+     * @param tick current tick number
+     */
+    delay?: (tick: number) => number;
+}>;
+export type SelectScrollUpButtonPropsWithoutHTML = SelectScrollButtonPropsWithoutHTML;
 export type SelectScrollUpButtonProps = SelectScrollUpButtonPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectScrollUpButtonPropsWithoutHTML>;
-export type SelectScrollDownButtonPropsWithoutHTML = WithChild;
+export type SelectScrollDownButtonPropsWithoutHTML = SelectScrollButtonPropsWithoutHTML;
 export type SelectScrollDownButtonProps = SelectScrollDownButtonPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectScrollDownButtonPropsWithoutHTML>;

package/dist/bits/slider/slider.svelte.js

@@ -229,8 +229,8 @@ class SliderSingleRootState extends SliderBaseRootState {
         }
         const currValue = this.opts.value.current;
         return Array.from({ length: count }, (_, i) => {
-            const tickPosition = i * (step / difference) * 100;
-            const scale = linearScale([this.opts.min.current, this.opts.max.current], this.getThumbScale());
+            const tickPosition = i * step;
+            const scale = linearScale([0, (count - 1) * step], this.getThumbScale());
             const isFirst = i === 0;
             const isLast = i === count - 1;
             const offsetPercentage = isFirst ? 0 : isLast ? -100 : -50;
@@ -484,11 +484,12 @@ class SliderMultiRootState extends SliderBaseRootState {
         }
         const currValue = this.opts.value.current;
         return Array.from({ length: count }, (_, i) => {
-            const tickPosition = i * (step / difference) * 100;
+            const tickPosition = i * step;
+            const scale = linearScale([0, (count - 1) * step], this.getThumbScale());
             const isFirst = i === 0;
             const isLast = i === count - 1;
             const offsetPercentage = isFirst ? 0 : isLast ? -100 : -50;
-            const style = getTickStyles(this.direction, tickPosition, offsetPercentage);
+            const style = getTickStyles(this.direction, scale(tickPosition), offsetPercentage);
             const tickValue = min + i * step;
             const bounded = currValue.length === 1
                 ? tickValue <= currValue[0]

package/dist/bits/utilities/focus-scope/use-focus-scope.svelte.js

@@ -125,7 +125,7 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
     }
     function handleClose(prevFocusedElement) {
         const destroyEvent = AutoFocusOnDestroyEvent.createEvent();
-        onCloseAutoFocus.current(destroyEvent);
+        onCloseAutoFocus.current?.(destroyEvent);
         const shouldIgnore = ctx.ignoreCloseAutoFocus;
         afterSleep(0, () => {
             if (!destroyEvent.defaultPrevented && prevFocusedElement && !shouldIgnore) {

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

@@ -197,4 +197,5 @@ export declare function useEnsureNonDisabledPlaceholder({ ref, placeholder, defa
     maxValue: ReadableBox<DateValue | undefined>;
     defaultPlaceholder: DateValue;
 }): void;
+export declare function getDateWithPreviousTime(date: DateValue | undefined, prev: DateValue | undefined): DateValue | undefined;
 export {};

package/dist/internal/date-time/calendar-helpers.svelte.js

@@ -1,7 +1,7 @@
 import { endOfMonth, isSameDay, isSameMonth, startOfMonth, } from "@internationalized/date";
 import { afterTick, styleToString } from "svelte-toolbelt";
 import { untrack } from "svelte";
-import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, isAfter, isBefore, parseAnyDateValue, parseStringToDateValue, toDate, } from "./utils.js";
+import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, hasTime, isAfter, isBefore, parseAnyDateValue, parseStringToDateValue, toDate, } from "./utils.js";
 import { getDataDisabled, getDataInvalid, getDataReadonly } from "../attrs.js";
 import { chunk, isValidIndex } from "../arrays.js";
 import { isBrowser, isHTMLElement } from "../is.js";
@@ -495,3 +495,16 @@ export function useEnsureNonDisabledPlaceholder({ ref, placeholder, defaultPlace
         }
     });
 }
+export function getDateWithPreviousTime(date, prev) {
+    if (!date || !prev)
+        return date;
+    if (hasTime(date) && hasTime(prev)) {
+        return date.set({
+            hour: prev.hour,
+            minute: prev.minute,
+            millisecond: prev.millisecond,
+            second: prev.second,
+        });
+    }
+    return date;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.3.18",
+  "version": "1.4.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",