bits-ui 1.3.5 → 1.3.6

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

@@ -33,7 +33,9 @@ type CalendarRootStateProps = WithRefProps<WritableBoxedValues<{
      * is selected. It is not intended to be used by the user.
      */
     onDateSelect?: () => void;
-}>>;
+}> & {
+    defaultPlaceholder: DateValue;
+}>;
 export declare class CalendarRootState {
     readonly opts: CalendarRootStateProps;
     months: Month<DateValue>[];

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

@@ -2,12 +2,12 @@ import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internation
 import { DEV } from "esm-env";
 import { untrack } from "svelte";
 import { useRefById } from "svelte-toolbelt";
-import { Context } from "runed";
+import { Context, watch } from "runed";
 import { getAriaDisabled, getAriaHidden, getAriaReadonly, getAriaSelected, getDataDisabled, getDataReadonly, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
 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, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.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 { isBefore, toDate } from "../../internal/date-time/utils.js";
 export class CalendarRootState {
     opts;
@@ -106,22 +106,27 @@ export class CalendarRootState {
         /**
          * Synchronize the placeholder value with the current value.
          */
-        $effect(() => {
-            this.opts.value.current;
-            untrack(() => {
-                const value = this.opts.value.current;
-                if (Array.isArray(value) && value.length) {
-                    const lastValue = value[value.length - 1];
-                    if (lastValue && this.opts.placeholder.current !== lastValue) {
-                        this.opts.placeholder.current = lastValue;
-                    }
-                }
-                else if (!Array.isArray(value) &&
-                    value &&
-                    this.opts.placeholder.current !== value) {
-                    this.opts.placeholder.current = value;
+        watch(() => this.opts.value.current, () => {
+            const value = this.opts.value.current;
+            if (Array.isArray(value) && value.length) {
+                const lastValue = value[value.length - 1];
+                if (lastValue && this.opts.placeholder.current !== lastValue) {
+                    this.opts.placeholder.current = lastValue;
                 }
-            });
+            }
+            else if (!Array.isArray(value) &&
+                value &&
+                this.opts.placeholder.current !== value) {
+                this.opts.placeholder.current = value;
+            }
+        });
+        useEnsureNonDisabledPlaceholder({
+            placeholder: opts.placeholder,
+            defaultPlaceholder: opts.defaultPlaceholder,
+            isDateDisabled: opts.isDateDisabled,
+            maxValue: opts.maxValue,
+            minValue: opts.minValue,
+            ref: opts.ref,
         });
     }
     setMonths(months) {
@@ -445,11 +450,11 @@ class CalendarDayState {
         this.onclick = this.onclick.bind(this);
         useRefById(opts);
     }
-    #tabindex = $derived.by(() => this.cell.isFocusedDate
-        ? 0
-        : (this.cell.isOutsideMonth && this.cell.root.opts.disableDaysOutsideMonth.current) ||
-            this.cell.isDisabled
-            ? undefined
+    #tabindex = $derived.by(() => (this.cell.isOutsideMonth && this.cell.root.opts.disableDaysOutsideMonth.current) ||
+        this.cell.isDisabled
+        ? undefined
+        : this.cell.isFocusedDate
+            ? 0
             : -1);
     onclick(e) {
         if (this.cell.isDisabled)

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { DateValue } from "@internationalized/date";
+	import { type DateValue } from "@internationalized/date";
 	import { useCalendarRoot } from "../calendar.svelte.js";
 	import type { CalendarRootProps } from "../types.js";
 	import { useId } from "../../../internal/use-id.js";
@@ -36,11 +36,11 @@
 		...restProps
 	}: CalendarRootProps = $props();
 
+	const defaultPlaceholder = getDefaultDate({
+		defaultValue: value,
+	});
+
 	if (placeholder === undefined) {
-		const defaultPlaceholder = getDefaultDate({
-			defaultPlaceholder: undefined,
-			defaultValue: value,
-		});
 		placeholder = defaultPlaceholder;
 	}
 
@@ -88,6 +88,7 @@
 			}
 		),
 		type: box.with(() => type),
+		defaultPlaceholder,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

package/dist/bits/date-field/components/date-field.svelte

@@ -30,7 +30,6 @@
 	if (placeholder === undefined) {
 		const defaultPlaceholder = getDefaultDate({
 			granularity,
-			defaultPlaceholder: undefined,
 			defaultValue: value,
 		});
 

package/dist/bits/date-picker/components/date-picker-calendar.svelte

@@ -41,6 +41,7 @@
 		value: datePickerRootState.opts.value,
 		onDateSelect: datePickerRootState.opts.onDateSelect,
 		initialFocus: datePickerRootState.opts.initialFocus,
+		defaultPlaceholder: datePickerRootState.opts.defaultPlaceholder,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, calendarState.props));

package/dist/bits/date-picker/components/date-picker.svelte

@@ -45,13 +45,12 @@
 		children,
 	}: DatePickerRootProps = $props();
 
-	if (placeholder === undefined) {
-		const defaultPlaceholder = getDefaultDate({
-			granularity,
-			defaultPlaceholder: undefined,
-			defaultValue: value,
-		});
+	const defaultPlaceholder = getDefaultDate({
+		granularity,
+		defaultValue: value,
+	});
 
+	if (placeholder === undefined) {
 		placeholder = defaultPlaceholder;
 	}
 
@@ -105,6 +104,7 @@
 		numberOfMonths: box.with(() => numberOfMonths),
 		initialFocus: box.with(() => initialFocus),
 		onDateSelect: box.with(() => onDateSelect),
+		defaultPlaceholder,
 	});
 
 	usePopoverRoot({

package/dist/bits/date-picker/date-picker.svelte.d.ts

@@ -30,7 +30,9 @@ type DatePickerRootStateProps = WritableBoxedValues<{
     disableDaysOutsideMonth: boolean;
     initialFocus: boolean;
     onDateSelect?: () => void;
-}>;
+}> & {
+    defaultPlaceholder: DateValue;
+};
 declare class DatePickerRootState {
     readonly opts: DatePickerRootStateProps;
     constructor(opts: DatePickerRootStateProps);

package/dist/bits/date-range-field/components/date-range-field.svelte

@@ -41,7 +41,6 @@
 	if (placeholder === undefined) {
 		const defaultPlaceholder = getDefaultDate({
 			granularity,
-			defaultPlaceholder: undefined,
 			defaultValue: value?.start,
 		});
 

package/dist/bits/date-range-picker/components/date-range-picker-calendar.svelte

@@ -41,6 +41,7 @@
 		onRangeSelect: dateRangePickerRootState.opts.onRangeSelect,
 		startValue: dateRangePickerRootState.opts.startValue,
 		endValue: dateRangePickerRootState.opts.endValue,
+		defaultPlaceholder: dateRangePickerRootState.opts.defaultPlaceholder,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rangeCalendarState.props));

package/dist/bits/date-range-picker/components/date-range-picker.svelte

@@ -57,14 +57,12 @@
 	if (value === undefined) {
 		value = { start: undefined, end: undefined };
 	}
+	const defaultPlaceholder = getDefaultDate({
+		granularity,
+		defaultValue: value?.start,
+	});
 
 	if (placeholder === undefined) {
-		const defaultPlaceholder = getDefaultDate({
-			granularity,
-			defaultPlaceholder: undefined,
-			defaultValue: value?.start,
-		});
-
 		placeholder = defaultPlaceholder;
 	}
 
@@ -131,6 +129,7 @@
 				onEndValueChange(v);
 			}
 		),
+		defaultPlaceholder,
 	});
 
 	usePopoverRoot({

package/dist/bits/date-range-picker/date-range-picker.svelte.d.ts

@@ -31,7 +31,9 @@ type DateRangePickerRootStateProps = WritableBoxedValues<{
     calendarLabel: string;
     disableDaysOutsideMonth: boolean;
     onRangeSelect?: () => void;
-}>;
+}> & {
+    defaultPlaceholder: DateValue;
+};
 declare class DateRangePickerRootState {
     readonly opts: DateRangePickerRootStateProps;
     constructor(opts: DateRangePickerRootStateProps);

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { DateValue } from "@internationalized/date";
+	import { type DateValue } from "@internationalized/date";
 	import type { RangeCalendarRootProps } from "../types.js";
 	import { useRangeCalendarRoot } from "../range-calendar.svelte.js";
 	import { noop } from "../../../internal/noop.js";
@@ -39,11 +39,11 @@
 	let startValue = $state<DateValue | undefined>(value?.start);
 	let endValue = $state<DateValue | undefined>(value?.end);
 
+	const defaultPlaceholder = getDefaultDate({
+		defaultValue: value?.start,
+	});
+
 	if (placeholder === undefined) {
-		const defaultPlaceholder = getDefaultDate({
-			defaultPlaceholder: undefined,
-			defaultValue: value?.start,
-		});
 		placeholder = defaultPlaceholder;
 	}
 
@@ -101,6 +101,7 @@
 				onEndValueChange(v);
 			}
 		),
+		defaultPlaceholder,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));

package/dist/bits/range-calendar/range-calendar.svelte.d.ts

@@ -31,7 +31,9 @@ type RangeCalendarRootStateProps = WithRefProps<WritableBoxedValues<{
      * is selected. It is not intended to be used by the user.
      */
     onRangeSelect?: () => void;
-}>>;
+}> & {
+    defaultPlaceholder: DateValue;
+}>;
 export declare class RangeCalendarRootState {
     #private;
     readonly opts: RangeCalendarRootStateProps;

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

@@ -6,7 +6,7 @@ import { useId } from "../../internal/use-id.js";
 import { getAriaDisabled, getAriaSelected, getDataDisabled, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
 import { getAnnouncer } from "../../internal/date-time/announcer.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
-import { createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
+import { createMonths, getCalendarElementProps, getCalendarHeadingValue, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
 import { areAllDaysBetweenValid, isAfter, isBefore, isBetweenInclusive, toDate, } from "../../internal/date-time/utils.js";
 export class RangeCalendarRootState {
     opts;
@@ -142,6 +142,14 @@ export class RangeCalendarRootState {
         this.isDateUnavailable = this.isDateUnavailable.bind(this);
         this.isOutsideVisibleMonths = this.isOutsideVisibleMonths.bind(this);
         this.isSelected = this.isSelected.bind(this);
+        useEnsureNonDisabledPlaceholder({
+            placeholder: opts.placeholder,
+            defaultPlaceholder: opts.defaultPlaceholder,
+            isDateDisabled: opts.isDateDisabled,
+            maxValue: opts.maxValue,
+            minValue: opts.minValue,
+            ref: opts.ref,
+        });
     }
     #updateValue(cb) {
         const value = this.opts.value.current;
@@ -481,11 +489,11 @@ class RangeCalendarDayState {
         this.onmouseenter = this.onmouseenter.bind(this);
         this.onfocusin = this.onfocusin.bind(this);
     }
-    #tabindex = $derived.by(() => this.cell.isFocusedDate
-        ? 0
-        : (this.cell.isOutsideMonth && this.cell.root.opts.disableDaysOutsideMonth.current) ||
-            this.cell.isDisabled
-            ? undefined
+    #tabindex = $derived.by(() => (this.cell.isOutsideMonth && this.cell.root.opts.disableDaysOutsideMonth.current) ||
+        this.cell.isDisabled
+        ? undefined
+        : this.cell.isFocusedDate
+            ? 0
             : -1);
     onclick(e) {
         if (this.cell.isDisabled)

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

@@ -1,7 +1,7 @@
-import { type DateValue } from "@internationalized/date";
+import { CalendarDate, type DateValue } from "@internationalized/date";
 import { type ReadableBox, type WritableBox } from "svelte-toolbelt";
 import type { Formatter } from "./formatter.js";
-import type { Month } from "../../shared/index.js";
+import type { DateMatcher, Month } from "../../shared/index.js";
 /**
  * Checks if a given node is a calendar cell element.
  *
@@ -183,4 +183,18 @@ export declare function getCalendarElementProps({ fullCalendarLabel, id, isInval
 };
 export type CalendarParts = "root" | "grid" | "cell" | "next-button" | "prev-button" | "day" | "grid-body" | "grid-head" | "grid-row" | "head-cell" | "header" | "heading";
 export declare function pickerOpenFocus(e: Event): void;
+export declare function getFirstNonDisabledDateInView(calendarRef: HTMLElement): CalendarDate | 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 {};

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

@@ -1,11 +1,12 @@
-import { endOfMonth, isSameMonth, startOfMonth } from "@internationalized/date";
+import { CalendarDate, endOfMonth, isSameDay, isSameMonth, parseDate, startOfMonth, } from "@internationalized/date";
 import { afterTick, styleToString } from "svelte-toolbelt";
 import { untrack } from "svelte";
 import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek, isAfter, isBefore, parseStringToDateValue, toDate, } from "./utils.js";
 import { getDataDisabled, getDataInvalid, getDataReadonly } from "../attrs.js";
 import { chunk, isValidIndex } from "../arrays.js";
-import { isHTMLElement } from "../is.js";
+import { isBrowser, isHTMLElement } from "../is.js";
 import { kbd } from "../kbd.js";
+import { watch } from "runed";
 /**
  * Checks if a given node is a calendar cell element.
  *
@@ -443,3 +444,52 @@ export function pickerOpenFocus(e) {
         nodeToFocus?.focus();
     }
 }
+export function getFirstNonDisabledDateInView(calendarRef) {
+    if (!isBrowser)
+        return;
+    const daysInView = Array.from(calendarRef.querySelectorAll("[data-bits-day]:not([aria-disabled=true])"));
+    if (daysInView.length === 0)
+        return;
+    const value = daysInView[0]?.getAttribute("data-value");
+    if (!value)
+        return;
+    return parseDate(value);
+}
+/**
+ * Ensures the placeholder is not set to a disabled date,
+ * which would prevent the user from entering the Calendar
+ * via the keyboard.
+ */
+export function useEnsureNonDisabledPlaceholder({ ref, placeholder, defaultPlaceholder, minValue, maxValue, isDateDisabled, }) {
+    function isDisabled(date) {
+        if (isDateDisabled.current(date))
+            return true;
+        if (minValue.current && isBefore(date, minValue.current))
+            return true;
+        if (maxValue.current && isBefore(maxValue.current, date))
+            return true;
+        return false;
+    }
+    watch(() => ref.current, () => {
+        if (!ref.current)
+            return;
+        /**
+         * If the placeholder is still the default placeholder and it's a disabled date, find
+         * the first available date in the calendar view and set it as the placeholder.
+         *
+         * This prevents the placeholder from being a disabled date and no date being tabbable
+         * preventing the user from entering the Calendar. If all dates in the view are
+         * disabled, currently that is considered an error on the developer's part and should
+         * be handled by them.
+         *
+         * Perhaps in the future we can introduce a dev-only log message to prevent this from
+         * being a silent error.
+         */
+        if (placeholder.current &&
+            isSameDay(placeholder.current, defaultPlaceholder) &&
+            isDisabled(defaultPlaceholder)) {
+            placeholder.current =
+                getFirstNonDisabledDateInView(ref.current) ?? defaultPlaceholder;
+        }
+    });
+}

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

@@ -2,7 +2,6 @@ import { CalendarDateTime, type DateValue, ZonedDateTime } from "@internationali
 import type { DateMatcher, Granularity } from "../../shared/date/types.js";
 type GetDefaultDateProps = {
     defaultValue?: DateValue | DateValue[] | undefined;
-    defaultPlaceholder?: DateValue | undefined;
     granularity?: Granularity;
 };
 /**
@@ -15,7 +14,7 @@ type GetDefaultDateProps = {
  * behavior the user expects based on the props they've provided.
  *
  */
-export declare function getDefaultDate(props?: GetDefaultDateProps): DateValue;
+export declare function getDefaultDate(opts: GetDefaultDateProps): DateValue;
 /**
  * Given a date string and a reference `DateValue` object, parse the
  * string to the same type as the reference object.

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

@@ -1,7 +1,6 @@
 import { CalendarDate, CalendarDateTime, ZonedDateTime, getDayOfWeek, getLocalTimeZone, parseDate, parseDateTime, parseZonedDateTime, toCalendar, } from "@internationalized/date";
 const defaultDateDefaults = {
     defaultValue: undefined,
-    defaultPlaceholder: undefined,
     granularity: "day",
 };
 /**
@@ -14,18 +13,15 @@ const defaultDateDefaults = {
  * behavior the user expects based on the props they've provided.
  *
  */
-export function getDefaultDate(props) {
-    const withDefaults = { ...defaultDateDefaults, ...props };
-    const { defaultValue, defaultPlaceholder, granularity } = withDefaults;
+export function getDefaultDate(opts) {
+    const withDefaults = { ...defaultDateDefaults, ...opts };
+    const { defaultValue, granularity } = withDefaults;
     if (Array.isArray(defaultValue) && defaultValue.length) {
         return defaultValue[defaultValue.length - 1];
     }
     if (defaultValue && !Array.isArray(defaultValue)) {
         return defaultValue;
     }
-    else if (defaultPlaceholder) {
-        return defaultPlaceholder;
-    }
     else {
         const date = new Date();
         const year = date.getFullYear();

package/package.json

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