This commit is contained in:
eewing
2026-02-17 14:10:16 -06:00
parent 2bca5834c5
commit cf73cd3b4c
11246 changed files with 1690552 additions and 0 deletions
@@ -0,0 +1,61 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { DatePickerCalendarProps } from "../types.js";
import { DatePickerRootContext } from "../date-picker.svelte.js";
import { CalendarRootState } from "../../calendar/calendar.svelte.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
children,
child,
id = createId(uid),
ref = $bindable(null),
...restProps
}: DatePickerCalendarProps = $props();
const datePickerRootState = DatePickerRootContext.get();
const calendarState = CalendarRootState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
calendarLabel: datePickerRootState.opts.calendarLabel,
fixedWeeks: datePickerRootState.opts.fixedWeeks,
isDateDisabled: datePickerRootState.opts.isDateDisabled,
isDateUnavailable: datePickerRootState.opts.isDateUnavailable,
locale: datePickerRootState.opts.locale,
numberOfMonths: datePickerRootState.opts.numberOfMonths,
pagedNavigation: datePickerRootState.opts.pagedNavigation,
preventDeselect: datePickerRootState.opts.preventDeselect,
readonly: datePickerRootState.opts.readonly,
type: boxWith(() => "single"),
weekStartsOn: datePickerRootState.opts.weekStartsOn,
weekdayFormat: datePickerRootState.opts.weekdayFormat,
disabled: datePickerRootState.opts.disabled,
disableDaysOutsideMonth: datePickerRootState.opts.disableDaysOutsideMonth,
maxValue: datePickerRootState.opts.maxValue,
minValue: datePickerRootState.opts.minValue,
placeholder: datePickerRootState.opts.placeholder,
value: datePickerRootState.opts.value,
onDateSelect: datePickerRootState.opts.onDateSelect,
initialFocus: datePickerRootState.opts.initialFocus,
defaultPlaceholder: datePickerRootState.opts.defaultPlaceholder,
maxDays: boxWith(() => undefined),
monthFormat: datePickerRootState.opts.monthFormat,
yearFormat: datePickerRootState.opts.yearFormat,
});
const mergedProps = $derived(mergeProps(restProps, calendarState.props));
</script>
{#if child}
{@render child({ props: mergedProps, ...calendarState.snippetProps })}
{:else}
<div {...mergedProps}>
{@render children?.(calendarState.snippetProps)}
</div>
{/if}
@@ -0,0 +1,4 @@
import type { DatePickerCalendarProps } from "../types.js";
declare const DatePickerCalendar: import("svelte").Component<DatePickerCalendarProps, {}, "ref">;
type DatePickerCalendar = ReturnType<typeof DatePickerCalendar>;
export default DatePickerCalendar;
@@ -0,0 +1,18 @@
<script lang="ts">
import { mergeProps } from "svelte-toolbelt";
import type { DatePickerContentStaticProps } from "../types.js";
import PopoverContentStatic from "../../popover/components/popover-content-static.svelte";
import { pickerOpenFocus } from "../../../internal/date-time/calendar-helpers.svelte.js";
let {
ref = $bindable(null),
onOpenAutoFocus,
...restProps
}: DatePickerContentStaticProps = $props();
const mergedProps = $derived(
mergeProps({ onOpenAutoFocus }, { onOpenAutoFocus: pickerOpenFocus })
);
</script>
<PopoverContentStatic {...mergedProps} bind:ref {...restProps} />
@@ -0,0 +1,4 @@
import type { DatePickerContentStaticProps } from "../types.js";
declare const DatePickerContentStatic: import("svelte").Component<DatePickerContentStaticProps, {}, "ref">;
type DatePickerContentStatic = ReturnType<typeof DatePickerContentStatic>;
export default DatePickerContentStatic;
@@ -0,0 +1,14 @@
<script lang="ts">
import { mergeProps } from "svelte-toolbelt";
import type { DatePickerContentProps } from "../types.js";
import PopoverContent from "../../popover/components/popover-content.svelte";
import { pickerOpenFocus } from "../../../internal/date-time/calendar-helpers.svelte.js";
let { ref = $bindable(null), onOpenAutoFocus, ...restProps }: DatePickerContentProps = $props();
const mergedProps = $derived(
mergeProps({ onOpenAutoFocus }, { onOpenAutoFocus: pickerOpenFocus })
);
</script>
<PopoverContent {...mergedProps} bind:ref {...restProps} />
@@ -0,0 +1,4 @@
import type { DatePickerContentProps } from "../types.js";
declare const DatePickerContent: import("svelte").Component<DatePickerContentProps, {}, "ref">;
type DatePickerContent = ReturnType<typeof DatePickerContent>;
export default DatePickerContent;
@@ -0,0 +1,27 @@
<script lang="ts">
import { mergeProps } from "svelte-toolbelt";
import type { DatePickerTriggerProps } from "../types.js";
import PopoverTrigger from "../../popover/components/popover-trigger.svelte";
import { dateFieldAttrs } from "../../date-field/date-field.svelte.js";
import {
handleSegmentNavigation,
isSegmentNavigationKey,
} from "../../../internal/date-time/field/segments.js";
let { ref = $bindable(null), onkeydown, ...restProps }: DatePickerTriggerProps = $props();
function onKeydown(e: KeyboardEvent) {
if (isSegmentNavigationKey(e.key)) {
const currNode = e.currentTarget as HTMLElement;
const dateFieldInputNode = currNode.closest(
dateFieldAttrs.selector("input")
) as HTMLElement;
if (!dateFieldInputNode) return;
handleSegmentNavigation(e, dateFieldInputNode);
}
}
const mergedProps = $derived(mergeProps({ onkeydown }, { onkeydown: onKeydown }));
</script>
<PopoverTrigger {...restProps} bind:ref data-segment="trigger" {...mergedProps} />
@@ -0,0 +1,4 @@
import type { DatePickerTriggerProps } from "../types.js";
declare const DatePickerTrigger: import("svelte").Component<DatePickerTriggerProps, {}, "ref">;
type DatePickerTrigger = ReturnType<typeof DatePickerTrigger>;
export default DatePickerTrigger;
@@ -0,0 +1,162 @@
<script lang="ts">
// Date Picker composes the DateField, Popover, and Calendar components
import { watch } from "runed";
import { boxWith } from "svelte-toolbelt";
import type { DateValue } from "@internationalized/date";
import { DatePickerRootState } from "../date-picker.svelte.js";
import type { DatePickerRootProps } from "../types.js";
import { noop } from "../../../internal/noop.js";
import { PopoverRootState } from "../../popover/popover.svelte.js";
import { DateFieldRootState } from "../../date-field/date-field.svelte.js";
import { FloatingLayer } from "../../utilities/floating-layer/index.js";
import { getDefaultDate } from "../../../internal/date-time/utils.js";
import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
let {
open = $bindable(false),
onOpenChange = noop,
onOpenChangeComplete = noop,
value = $bindable(),
onValueChange = noop,
placeholder = $bindable(),
onPlaceholderChange = noop,
isDateUnavailable = () => false,
validate = noop,
onInvalid = noop,
minValue,
maxValue,
disabled = false,
readonly = false,
granularity,
readonlySegments = [],
hourCycle,
locale,
hideTimeZone = false,
required = false,
calendarLabel = "Event",
disableDaysOutsideMonth = true,
preventDeselect = false,
pagedNavigation = false,
weekStartsOn,
weekdayFormat = "narrow",
isDateDisabled = () => false,
fixedWeeks = false,
numberOfMonths = 1,
closeOnDateSelect = true,
initialFocus = false,
errorMessageId,
children,
monthFormat = "long",
yearFormat = "numeric",
}: DatePickerRootProps = $props();
const defaultPlaceholder = getDefaultDate({
granularity,
defaultValue: value,
minValue,
maxValue,
});
function handleDefaultPlaceholder() {
if (placeholder !== undefined) return;
placeholder = defaultPlaceholder;
}
// SSR
handleDefaultPlaceholder();
/**
* Covers an edge case where when a spread props object is reassigned,
* the props are reset to their default values, which would make placeholder
* undefined which causes errors to be thrown.
*/
watch.pre(
() => placeholder,
() => {
handleDefaultPlaceholder();
}
);
function onDateSelect() {
if (closeOnDateSelect) {
open = false;
}
}
const pickerRootState = DatePickerRootState.create({
open: boxWith(
() => open,
(v) => {
open = v;
onOpenChange(v);
}
),
value: boxWith(
() => value,
(v) => {
value = v;
onValueChange(v);
}
),
placeholder: boxWith(
() => placeholder as DateValue,
(v) => {
placeholder = v;
onPlaceholderChange(v as DateValue);
}
),
isDateUnavailable: boxWith(() => isDateUnavailable),
minValue: boxWith(() => minValue),
maxValue: boxWith(() => maxValue),
disabled: boxWith(() => disabled),
readonly: boxWith(() => readonly),
granularity: boxWith(() => granularity),
readonlySegments: boxWith(() => readonlySegments),
hourCycle: boxWith(() => hourCycle),
locale: resolveLocaleProp(() => locale),
hideTimeZone: boxWith(() => hideTimeZone),
required: boxWith(() => required),
calendarLabel: boxWith(() => calendarLabel),
disableDaysOutsideMonth: boxWith(() => disableDaysOutsideMonth),
preventDeselect: boxWith(() => preventDeselect),
pagedNavigation: boxWith(() => pagedNavigation),
weekStartsOn: boxWith(() => weekStartsOn),
weekdayFormat: boxWith(() => weekdayFormat),
isDateDisabled: boxWith(() => isDateDisabled),
fixedWeeks: boxWith(() => fixedWeeks),
numberOfMonths: boxWith(() => numberOfMonths),
initialFocus: boxWith(() => initialFocus),
onDateSelect: boxWith(() => onDateSelect),
defaultPlaceholder,
monthFormat: boxWith(() => monthFormat),
yearFormat: boxWith(() => yearFormat),
});
PopoverRootState.create({
open: pickerRootState.opts.open,
onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
});
DateFieldRootState.create({
value: pickerRootState.opts.value,
disabled: pickerRootState.opts.disabled,
readonly: pickerRootState.opts.readonly,
readonlySegments: pickerRootState.opts.readonlySegments,
validate: boxWith(() => validate),
onInvalid: boxWith(() => onInvalid),
minValue: pickerRootState.opts.minValue,
maxValue: pickerRootState.opts.maxValue,
granularity: pickerRootState.opts.granularity,
hideTimeZone: pickerRootState.opts.hideTimeZone,
hourCycle: pickerRootState.opts.hourCycle,
locale: pickerRootState.opts.locale,
required: pickerRootState.opts.required,
placeholder: pickerRootState.opts.placeholder,
errorMessageId: boxWith(() => errorMessageId),
isInvalidProp: boxWith(() => undefined),
});
</script>
<FloatingLayer.Root>
{@render children?.()}
</FloatingLayer.Root>
@@ -0,0 +1,3 @@
declare const DatePicker: import("svelte").Component<import("../types.js").DatePickerRootPropsWithoutHTML, {}, "value" | "placeholder" | "open">;
type DatePicker = ReturnType<typeof DatePicker>;
export default DatePicker;