bits-ui 2.4.1 → 2.6.0

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

@@ -30,11 +30,14 @@ type CalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     readonly: boolean;
     disableDaysOutsideMonth: boolean;
     initialFocus: boolean;
+    maxDays: number | undefined;
     /**
      * This is strictly used by the `DatePicker` component to close the popover when a date
      * is selected. It is not intended to be used by the user.
      */
     onDateSelect?: () => void;
+    monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
 }> & {
     defaultPlaceholder: DateValue;
 }>;
@@ -56,7 +59,9 @@ export declare class CalendarRootState {
      * calendar's days of the week is strongly recommended, as it guarantees that
      * the days are correctly formatted for the current locale and calendar view.
      */
-    weekdays: string[];
+    readonly weekdays: string[];
+    readonly initialPlaceholderYear: number;
+    readonly defaultYears: number[];
     /**
      * Navigates to the next page of the calendar.
      */
@@ -298,6 +303,75 @@ export declare class CalendarHeaderState {
         readonly "data-readonly": "" | undefined;
     };
 }
+export type CalendarMonthSelectStateProps = WithRefProps<ReadableBoxedValues<{
+    months: number[];
+    monthFormat: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+    disabled: boolean;
+}>>;
+export declare class CalendarMonthSelectState {
+    readonly opts: CalendarMonthSelectStateProps;
+    readonly root: CalendarRootState | RangeCalendarRootState;
+    constructor(opts: CalendarMonthSelectStateProps, root: CalendarRootState | RangeCalendarRootState);
+    readonly monthItems: {
+        value: number;
+        label: string;
+    }[];
+    readonly currentMonth: number;
+    readonly isDisabled: boolean;
+    readonly snippetProps: {
+        monthItems: {
+            value: number;
+            label: string;
+        }[];
+        selectedMonthItem: {
+            value: number;
+            label: string;
+        };
+    };
+    onchange(event: Event): void;
+    props: {
+        readonly id: string;
+        readonly value: number;
+        readonly disabled: boolean;
+        readonly "data-disabled": "" | undefined;
+        readonly onchange: (event: Event) => void;
+    };
+}
+export type CalendarYearSelectStateProps = WithRefProps<ReadableBoxedValues<{
+    years: number[] | undefined;
+    yearFormat: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
+    disabled: boolean;
+}>>;
+export declare class CalendarYearSelectState {
+    readonly opts: CalendarYearSelectStateProps;
+    readonly root: CalendarRootState | RangeCalendarRootState;
+    constructor(opts: CalendarYearSelectStateProps, root: CalendarRootState | RangeCalendarRootState);
+    readonly years: number[];
+    readonly yearItems: {
+        value: number;
+        label: string;
+    }[];
+    readonly currentYear: number;
+    readonly isDisabled: boolean;
+    readonly snippetProps: {
+        yearItems: {
+            value: number;
+            label: string;
+        }[];
+        selectedYearItem: {
+            value: number;
+            label: string;
+        };
+    };
+    onchange(event: Event): void;
+    props: {
+        readonly id: string;
+        readonly value: number;
+        readonly disabled: boolean;
+        readonly "data-disabled": "" | undefined;
+        readonly onchange: (event: Event) => void;
+    };
+}
 export declare const CalendarRootContext: Context<RangeCalendarRootState | CalendarRootState>;
 export declare function useCalendarRoot(props: CalendarRootStateProps): RangeCalendarRootState | CalendarRootState;
 export declare function useCalendarGrid(props: CalendarGridStateProps): CalendarGridState;
@@ -311,4 +385,6 @@ export declare function useCalendarGridRow(props: CalendarGridRowStateProps): Ca
 export declare function useCalendarHeadCell(props: CalendarHeadCellStateProps): CalendarHeadCellState;
 export declare function useCalendarHeader(props: CalendarHeaderStateProps): CalendarHeaderState;
 export declare function useCalendarHeading(props: CalendarHeadingStateProps): CalendarHeadingState;
+export declare function useCalendarMonthSelect(props: CalendarMonthSelectStateProps): CalendarMonthSelectState;
+export declare function useCalendarYearSelect(props: CalendarYearSelectStateProps): CalendarYearSelectState;
 export {};

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 { calendarAttrs, createAccessibleHeading, createMonths, getCalendarElementProps, getCalendarHeadingValue, getDateWithPreviousTime, getIsNextButtonDisabled, getIsPrevButtonDisabled, getWeekdays, handleCalendarKeydown, handleCalendarNextPage, handleCalendarPrevPage, shiftCalendarFocus, useEnsureNonDisabledPlaceholder, useMonthViewOptionsSync, useMonthViewPlaceholderSync, } from "../../internal/date-time/calendar-helpers.svelte.js";
+import { calendarAttrs, createAccessibleHeading, createMonths, getCalendarElementProps, getCalendarHeadingValue, getDateWithPreviousTime, getDefaultYears, 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;
@@ -21,7 +21,11 @@ export class CalendarRootState {
         this.opts = opts;
         this.domContext = new DOMContext(opts.ref);
         this.announcer = getAnnouncer(null);
-        this.formatter = createFormatter(this.opts.locale.current);
+        this.formatter = createFormatter({
+            initialLocale: this.opts.locale.current,
+            monthFormat: this.opts.monthFormat,
+            yearFormat: this.opts.yearFormat,
+        });
         this.setMonths = this.setMonths.bind(this);
         this.nextPage = this.nextPage.bind(this);
         this.prevPage = this.prevPage.bind(this);
@@ -128,6 +132,14 @@ export class CalendarRootState {
             weekdayFormat: this.opts.weekdayFormat.current,
         });
     });
+    initialPlaceholderYear = $derived.by(() => untrack(() => this.opts.placeholder.current.year));
+    defaultYears = $derived.by(() => {
+        return getDefaultYears({
+            minValue: this.opts.minValue.current,
+            maxValue: this.opts.maxValue.current,
+            placeholderYear: this.initialPlaceholderYear,
+        });
+    });
     #setupInitialFocusEffect() {
         $effect(() => {
             const initialFocus = untrack(() => this.opts.initialFocus.current);
@@ -153,7 +165,7 @@ export class CalendarRootState {
         });
     }
     #setupFormatterEffect() {
-        $effect(() => {
+        $effect.pre(() => {
             if (this.formatter.getLocale() === this.opts.locale.current)
                 return;
             this.formatter.setLocale(this.opts.locale.current);
@@ -240,6 +252,8 @@ export class CalendarRootState {
         return false;
     });
     headingValue = $derived.by(() => {
+        this.opts.monthFormat.current;
+        this.opts.yearFormat.current;
         return getCalendarHeadingValue({
             months: this.months,
             formatter: this.formatter,
@@ -285,10 +299,20 @@ export class CalendarRootState {
             numberOfMonths: this.opts.numberOfMonths.current,
         });
     }
+    #isMultipleSelectionValid(selectedDates) {
+        // only validate for multiple type and when maxDays is set
+        if (this.opts.type.current !== "multiple")
+            return true;
+        if (!this.opts.maxDays.current)
+            return true;
+        const selectedCount = selectedDates.length;
+        if (this.opts.maxDays.current && selectedCount > this.opts.maxDays.current)
+            return false;
+        return true;
+    }
     handleCellClick(_, date) {
-        if (this.opts.readonly.current)
-            return;
-        if (this.opts.isDateDisabled.current?.(date) ||
+        if (this.opts.readonly.current ||
+            this.opts.isDateDisabled.current?.(date) ||
             this.opts.isDateUnavailable.current?.(date)) {
             return;
         }
@@ -314,8 +338,10 @@ export class CalendarRootState {
         }
     }
     handleMultipleUpdate(prev, date) {
-        if (!prev)
-            return [date];
+        if (!prev) {
+            const newSelection = [date];
+            return this.#isMultipleSelectionValid(newSelection) ? newSelection : [date];
+        }
         if (!Array.isArray(prev)) {
             if (DEV)
                 throw new Error("Invalid value for multiple prop.");
@@ -324,7 +350,15 @@ export class CalendarRootState {
         const index = prev.findIndex((d) => isSameDay(d, date));
         const preventDeselect = this.opts.preventDeselect.current;
         if (index === -1) {
-            return [...prev, date];
+            // adding a new date - check if it would be valid
+            const newSelection = [...prev, date];
+            if (this.#isMultipleSelectionValid(newSelection)) {
+                return newSelection;
+            }
+            else {
+                // reset to just the newly selected date when constraints are violated
+                return [date];
+            }
         }
         else if (preventDeselect) {
             return prev;
@@ -641,6 +675,126 @@ export class CalendarHeaderState {
         ...attachRef(this.opts.ref),
     }));
 }
+export class CalendarMonthSelectState {
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.onchange = this.onchange.bind(this);
+    }
+    monthItems = $derived.by(() => {
+        this.root.opts.locale.current;
+        const monthNumbers = this.opts.months.current;
+        const monthFormat = this.opts.monthFormat.current;
+        const months = [];
+        for (const month of monthNumbers) {
+            // create a date with the current year and the month to get localized name
+            const date = this.root.opts.placeholder.current.set({ month });
+            let label;
+            if (typeof monthFormat === "function") {
+                label = monthFormat(month);
+            }
+            else {
+                label = this.root.formatter.custom(toDate(date), { month: monthFormat });
+            }
+            months.push({
+                value: month,
+                label,
+            });
+        }
+        return months;
+    });
+    currentMonth = $derived.by(() => this.root.opts.placeholder.current.month);
+    isDisabled = $derived.by(() => this.root.opts.disabled.current || this.opts.disabled.current);
+    snippetProps = $derived.by(() => {
+        return {
+            monthItems: this.monthItems,
+            selectedMonthItem: this.monthItems.find((month) => month.value === this.currentMonth),
+        };
+    });
+    onchange(event) {
+        if (this.isDisabled)
+            return;
+        const target = event.target;
+        const month = parseInt(target.value, 10);
+        if (!isNaN(month)) {
+            this.root.opts.placeholder.current = this.root.opts.placeholder.current.set({ month });
+        }
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        value: this.currentMonth,
+        disabled: this.isDisabled,
+        "data-disabled": getDataDisabled(this.isDisabled),
+        [this.root.getBitsAttr("month-select")]: "",
+        //
+        onchange: this.onchange,
+        ...attachRef(this.opts.ref),
+    }));
+}
+export class CalendarYearSelectState {
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.onchange = this.onchange.bind(this);
+    }
+    years = $derived.by(() => {
+        if (this.opts.years.current && this.opts.years.current.length)
+            return this.opts.years.current;
+        return this.root.defaultYears;
+    });
+    yearItems = $derived.by(() => {
+        this.root.opts.locale.current;
+        const yearFormat = this.opts.yearFormat.current;
+        const localYears = [];
+        for (const year of this.years) {
+            // create a date with the year to get localized formatting
+            const date = this.root.opts.placeholder.current.set({ year });
+            let label;
+            if (typeof yearFormat === "function") {
+                label = yearFormat(year);
+            }
+            else {
+                label = this.root.formatter.custom(toDate(date), { year: yearFormat });
+            }
+            localYears.push({
+                value: year,
+                label,
+            });
+        }
+        return localYears;
+    });
+    currentYear = $derived.by(() => this.root.opts.placeholder.current.year);
+    isDisabled = $derived.by(() => this.root.opts.disabled.current || this.opts.disabled.current);
+    snippetProps = $derived.by(() => {
+        return {
+            yearItems: this.yearItems,
+            selectedYearItem: this.yearItems.find((year) => year.value === this.currentYear),
+        };
+    });
+    onchange(event) {
+        if (this.isDisabled)
+            return;
+        const target = event.target;
+        const year = parseInt(target.value, 10);
+        if (!isNaN(year)) {
+            this.root.opts.placeholder.current = this.root.opts.placeholder.current.set({ year });
+        }
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        value: this.currentYear,
+        disabled: this.isDisabled,
+        "data-disabled": getDataDisabled(this.isDisabled),
+        [this.root.getBitsAttr("year-select")]: "",
+        //
+        onchange: this.onchange,
+        ...attachRef(this.opts.ref),
+    }));
+}
 export const CalendarRootContext = new Context("Calendar.Root | RangeCalender.Root");
 const CalendarCellContext = new Context("Calendar.Cell | RangeCalendar.Cell");
 export function useCalendarRoot(props) {
@@ -679,3 +833,9 @@ export function useCalendarHeader(props) {
 export function useCalendarHeading(props) {
     return new CalendarHeadingState(props, CalendarRootContext.get());
 }
+export function useCalendarMonthSelect(props) {
+    return new CalendarMonthSelectState(props, CalendarRootContext.get());
+}
+export function useCalendarYearSelect(props) {
+    return new CalendarYearSelectState(props, CalendarRootContext.get());
+}

package/dist/bits/calendar/components/calendar-month-select.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { CalendarMonthSelectProps } from "../types.js";
+	import { useCalendarMonthSelect } from "../calendar.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = createId(uid),
+		months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+		monthFormat = "long",
+		disabled = false,
+		"aria-label": ariaLabel = "Select a month",
+		...restProps
+	}: CalendarMonthSelectProps = $props();
+
+	const monthSelectState = useCalendarMonthSelect({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		months: box.with(() => months),
+		monthFormat: box.with(() => monthFormat),
+		disabled: box.with(() => Boolean(disabled)),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(restProps, monthSelectState.props, { "aria-label": ariaLabel })
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...monthSelectState.snippetProps })}
+{:else}
+	<select {...mergedProps}>
+		{#if children}
+			{@render children?.(monthSelectState.snippetProps)}
+		{:else}
+			{#each monthSelectState.monthItems as month (month.value)}
+				<option
+					value={month.value}
+					selected={month.value === monthSelectState.currentMonth}
+				>
+					{month.label}
+				</option>
+			{/each}
+		{/if}
+	</select>
+{/if}

package/dist/bits/calendar/components/calendar-month-select.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarMonthSelectProps } from "../types.js";
+declare const CalendarMonthSelect: import("svelte").Component<CalendarMonthSelectProps, {}, "ref">;
+type CalendarMonthSelect = ReturnType<typeof CalendarMonthSelect>;
+export default CalendarMonthSelect;

package/dist/bits/calendar/components/calendar-year-select.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { CalendarYearSelectProps } from "../types.js";
+	import { useCalendarYearSelect } from "../calendar.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = createId(uid),
+		years,
+		yearFormat = "numeric",
+		disabled = false,
+		"aria-label": ariaLabel = "Select a year",
+		...restProps
+	}: CalendarYearSelectProps = $props();
+
+	const yearSelectState = useCalendarYearSelect({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		years: box.with(() => years),
+		yearFormat: box.with(() => yearFormat),
+		disabled: box.with(() => Boolean(disabled)),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(restProps, yearSelectState.props, { "aria-label": ariaLabel })
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...yearSelectState.snippetProps })}
+{:else}
+	<select {...mergedProps}>
+		{#if children}
+			{@render children?.(yearSelectState.snippetProps)}
+		{:else}
+			{#each yearSelectState.yearItems as year (year.value)}
+				<option value={year.value} selected={year.value === yearSelectState.currentYear}>
+					{year.label}
+				</option>
+			{/each}
+		{/if}
+	</select>
+{/if}

package/dist/bits/calendar/components/calendar-year-select.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarYearSelectProps } from "../types.js";
+declare const CalendarYearSelect: import("svelte").Component<CalendarYearSelectProps, {}, "ref">;
+type CalendarYearSelect = ReturnType<typeof CalendarYearSelect>;
+export default CalendarYearSelect;

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

@@ -35,6 +35,9 @@
 		type,
 		disableDaysOutsideMonth = true,
 		initialFocus = false,
+		maxDays,
+		monthFormat = "long",
+		yearFormat = "numeric",
 		...restProps
 	}: CalendarRootProps = $props();
 
@@ -93,6 +96,7 @@
 		maxValue: box.with(() => maxValue),
 		disableDaysOutsideMonth: box.with(() => disableDaysOutsideMonth),
 		initialFocus: box.with(() => initialFocus),
+		maxDays: box.with(() => maxDays),
 		placeholder: box.with(
 			() => placeholder as DateValue,
 			(v) => {
@@ -110,6 +114,8 @@
 			}
 		),
 		type: box.with(() => type),
+		monthFormat: box.with(() => monthFormat),
+		yearFormat: box.with(() => yearFormat),
 		defaultPlaceholder,
 	});
 

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

@@ -8,6 +8,8 @@ export { default as HeadCell } from "./components/calendar-head-cell.svelte";
 export { default as GridRow } from "./components/calendar-grid-row.svelte";
 export { default as Header } from "./components/calendar-header.svelte";
 export { default as Heading } from "./components/calendar-heading.svelte";
+export { default as MonthSelect } from "./components/calendar-month-select.svelte";
 export { default as NextButton } from "./components/calendar-next-button.svelte";
 export { default as PrevButton } from "./components/calendar-prev-button.svelte";
-export type { CalendarRootProps as RootProps, CalendarPrevButtonProps as PrevButtonProps, CalendarNextButtonProps as NextButtonProps, CalendarHeadingProps as HeadingProps, CalendarHeaderProps as HeaderProps, CalendarGridProps as GridProps, CalendarGridHeadProps as GridHeadProps, CalendarHeadCellProps as HeadCellProps, CalendarGridBodyProps as GridBodyProps, CalendarGridRowProps as GridRowProps, CalendarCellProps as CellProps, CalendarDayProps as DayProps, } from "./types.js";
+export { default as YearSelect } from "./components/calendar-year-select.svelte";
+export type { CalendarRootProps as RootProps, CalendarPrevButtonProps as PrevButtonProps, CalendarNextButtonProps as NextButtonProps, CalendarHeadingProps as HeadingProps, CalendarHeaderProps as HeaderProps, CalendarGridProps as GridProps, CalendarGridHeadProps as GridHeadProps, CalendarHeadCellProps as HeadCellProps, CalendarGridBodyProps as GridBodyProps, CalendarGridRowProps as GridRowProps, CalendarCellProps as CellProps, CalendarDayProps as DayProps, CalendarMonthSelectProps as MonthSelectProps, CalendarYearSelectProps as YearSelectProps, } from "./types.js";

package/dist/bits/calendar/exports.js

@@ -8,5 +8,7 @@ export { default as HeadCell } from "./components/calendar-head-cell.svelte";
 export { default as GridRow } from "./components/calendar-grid-row.svelte";
 export { default as Header } from "./components/calendar-header.svelte";
 export { default as Heading } from "./components/calendar-heading.svelte";
+export { default as MonthSelect } from "./components/calendar-month-select.svelte";
 export { default as NextButton } from "./components/calendar-next-button.svelte";
 export { default as PrevButton } from "./components/calendar-prev-button.svelte";
+export { default as YearSelect } from "./components/calendar-year-select.svelte";