@solid2-aria/stately 0.0.0-stage → 0.0.1

package/dist/datepicker/create-date-picker-state.js

@@ -0,0 +1,191 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/datepicker/useDatePickerState.ts.
+ * Modified for Solid Aria: adapted reactive state, getters, imports, and APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createControlledSignal } from "../utils/create-controlled-signal.js";
+import { getLegacyValidationState } from "../utils/legacy-props.js";
+import { createFormValidationState } from "../form/create-form-validation-state.js";
+import { createOverlayTriggerState } from "../overlays/create-overlay-trigger-state.js";
+import { createDefaultProps, getFormatOptions, getPlaceholderTime, getValidationResult } from "./utils.js";
+import { createMemo, createRenderEffect, createSignal, merge, untrack } from "solid-js";
+import { DateFormatter, toCalendarDate, toCalendarDateTime } from "@internationalized/date";
+// src/datepicker/create-date-picker-state.ts
+/**
+* Provides state management for a date picker component. A date picker combines a DateField and a
+* Calendar popover to allow users to enter or select a date and time value.
+*/
+function createDatePickerState(props) {
+	const overlayState = createOverlayTriggerState(props);
+	const [value, setValue] = createControlledSignal(() => props.value, untrack(() => props.defaultValue ?? null), (localValue) => props.onChange?.(localValue));
+	const initialValue = untrack(() => value());
+	const v = createMemo(() => {
+		return value() ?? props.placeholderValue ?? null;
+	});
+	const derived0 = createDefaultProps(v, () => props.granularity);
+	const granularity = createMemo(() => {
+		const [currentGranularity] = derived0();
+		const currentValue = v();
+		if (currentValue && !(currentGranularity in currentValue)) throw new Error(`Invalid granularity ${currentGranularity} for value ${currentValue.toString()}`);
+		return currentGranularity;
+	});
+	const defaultTimeZone = createMemo(() => {
+		return derived0()[1];
+	});
+	const dateValue = createMemo(() => {
+		const currentValue = value();
+		const currentDefaultTimeZone = defaultTimeZone();
+		return currentValue === null || currentValue === void 0 ? null : currentValue.toDate(currentDefaultTimeZone ?? "UTC");
+	});
+	const hasTime = createMemo(() => {
+		const currentGranularity = granularity();
+		return currentGranularity === "hour" || currentGranularity === "minute" || currentGranularity === "second";
+	});
+	const shouldCloseOnSelect = createMemo(() => props.shouldCloseOnSelect ?? true);
+	const [selectedDate, setSelectedDate] = createSignal(null, { ownedWrite: true });
+	const [selectedTime, setSelectedTime] = createSignal(null, { ownedWrite: true });
+	createRenderEffect(value, (currentValue) => {
+		if (currentValue) {
+			setSelectedDate(currentValue);
+			if ("hour" in currentValue) setSelectedTime(currentValue);
+		}
+	});
+	const showEra = createMemo(() => {
+		const currentValue = value();
+		return currentValue?.calendar.identifier === "gregory" && currentValue.era === "BC";
+	});
+	const formatOpts = createMemo(() => {
+		const currentGranularity = granularity();
+		const currentDefaultTimeZone = defaultTimeZone();
+		const currentShowEra = showEra();
+		return {
+			granularity: currentGranularity,
+			hideTimeZone: props.hideTimeZone,
+			hourCycle: props.hourCycle,
+			shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+			showEra: currentShowEra,
+			timeZone: currentDefaultTimeZone
+		};
+	});
+	const minValue = createMemo(() => props.minValue);
+	const maxValue = createMemo(() => props.maxValue);
+	const isDateUnavailable = createMemo(() => props.isDateUnavailable);
+	const builtinValidation = createMemo(() => {
+		const currentValue = value();
+		const currentMinValue = minValue();
+		const currentMaxValue = maxValue();
+		const currentIsDateUnavailable = isDateUnavailable();
+		const currentFormatOpts = formatOpts();
+		return getValidationResult(currentValue, currentMinValue, currentMaxValue, currentIsDateUnavailable, currentFormatOpts);
+	});
+	const validation = createFormValidationState(merge(props, {
+		get builtinValidation() {
+			return builtinValidation();
+		},
+		validate: (localValue) => props.validate?.(localValue),
+		get value() {
+			return value();
+		}
+	}));
+	const isValueInvalid = createMemo(() => validation.displayValidation.isInvalid);
+	const validationState = createMemo(() => {
+		const currentIsValueInvalid = isValueInvalid();
+		return getLegacyValidationState(props) ?? (currentIsValueInvalid ? "invalid" : null);
+	});
+	const commitValue = (date, time) => {
+		setValue("timeZone" in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time));
+		setSelectedDate(null);
+		setSelectedTime(null);
+		validation.commitValidation();
+	};
+	const selectDate = (newValue) => {
+		const currentShouldCloseOnSelect = shouldCloseOnSelect();
+		const currentHasTime = hasTime();
+		const currentSelectedTime = selectedTime();
+		const shouldClose = typeof currentShouldCloseOnSelect === "function" ? currentShouldCloseOnSelect() : currentShouldCloseOnSelect;
+		if (currentHasTime) {
+			if (currentSelectedTime || shouldClose) commitValue(newValue, currentSelectedTime ?? getPlaceholderTime(props.defaultValue ?? props.placeholderValue));
+			else setSelectedDate(newValue);
+		} else {
+			setValue(newValue);
+			validation.commitValidation();
+		}
+		if (shouldClose) overlayState.setOpen(false);
+	};
+	const selectTime = (newValue) => {
+		const currentSelectedDate = selectedDate();
+		if (currentSelectedDate && Boolean(newValue)) commitValue(currentSelectedDate, newValue);
+		else setSelectedTime(newValue);
+	};
+	return merge(validation, {
+		get dateValue() {
+			return selectedDate();
+		},
+		get defaultValue() {
+			return props.defaultValue ?? initialValue;
+		},
+		get granularity() {
+			return granularity();
+		},
+		get hasTime() {
+			return hasTime();
+		},
+		get setDateValue() {
+			return selectDate;
+		},
+		get setTimeValue() {
+			return selectTime;
+		},
+		setValue,
+		get timeValue() {
+			return selectedTime();
+		},
+		get value() {
+			return value();
+		}
+	}, overlayState, {
+		formatValue(locale, fieldOptions) {
+			const currentDateValue = dateValue();
+			const currentFormatOpts = formatOpts();
+			if (!currentDateValue) return "";
+			const formatOptions = getFormatOptions(fieldOptions, currentFormatOpts);
+			return new DateFormatter(locale, formatOptions).format(currentDateValue);
+		},
+		getDateFormatter(locale, formatOptions) {
+			const newOptions = {
+				...formatOpts(),
+				...formatOptions
+			};
+			const newFormatOptions = getFormatOptions({}, newOptions);
+			return new DateFormatter(locale, newFormatOptions);
+		},
+		get isInvalid() {
+			return isValueInvalid();
+		},
+		setOpen(isOpen) {
+			const currentValue = value();
+			const currentSelectedDate = selectedDate();
+			const currentHasTime = hasTime();
+			const currentSelectedTime = selectedTime();
+			if (!isOpen && !currentValue && currentSelectedDate && currentHasTime) commitValue(currentSelectedDate, currentSelectedTime ?? getPlaceholderTime(props.defaultValue ?? props.placeholderValue));
+			overlayState.setOpen(isOpen);
+		},
+		get validationState() {
+			return validationState();
+		}
+	});
+}
+export { createDatePickerState };
+
+//# sourceMappingURL=create-date-picker-state.js.map

package/dist/datepicker/create-date-picker-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-date-picker-state.js","names":[],"sources":["../../src/datepicker/create-date-picker-state.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n/*\n * Derived from Adobe React Spectrum: packages/react-stately/src/datepicker/useDatePickerState.ts.\n * Modified for Solid Aria: adapted reactive state, getters, imports, and APIs for Solid 2.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport {\n  DateFormatter,\n  toCalendarDate,\n  toCalendarDateTime,\n} from \"@internationalized/date\";\nimport type { ValidationState } from \"@solid2-aria/types-shared\";\nimport {\n  createMemo,\n  createSignal,\n  createRenderEffect,\n  untrack,\n  merge,\n} from \"solid-js\";\n\nimport { createFormValidationState } from \"../form/create-form-validation-state\";\nimport type { FormValidationState } from \"../form/create-form-validation-state\";\nimport { createOverlayTriggerState } from \"../overlays/create-overlay-trigger-state\";\nimport type { OverlayTriggerState } from \"../overlays/create-overlay-trigger-state\";\nimport { createControlledSignal } from \"../utils/create-controlled-signal\";\nimport { getLegacyValidationState } from \"../utils/legacy-props\";\nimport type {\n  DatePickerProps,\n  DateValue,\n  Granularity,\n  MappedDateValue,\n  TimeValue,\n} from \"./types\";\nimport {\n  getFormatOptions,\n  getPlaceholderTime,\n  getValidationResult,\n  createDefaultProps,\n} from \"./utils\";\nimport type { FieldOptions, FormatterOptions } from \"./utils\";\n\nexport interface DatePickerStateOptions<\n  T extends DateValue,\n> extends DatePickerProps<T> {\n  /**\n   * Determines whether the date picker popover should close automatically when a date is selected.\n   *\n   * @default true\n   */\n  shouldCloseOnSelect?: boolean | (() => boolean);\n}\n\nexport interface DatePickerState\n  extends OverlayTriggerState, FormValidationState {\n  /** The currently selected date. */\n  value: DateValue | null;\n  /** The default date. */\n  defaultValue: DateValue | null;\n  /** Sets the selected date. */\n  setValue: (value: DateValue | null) => void;\n  /**\n   * The date portion of the value. This may be set prior to `value` if the user has\n   * selected a date but has not yet selected a time.\n   */\n  dateValue: DateValue | null;\n  /** Sets the date portion of the value. */\n  setDateValue: (value: DateValue) => void;\n  /**\n   * The time portion of the value. This may be set prior to `value` if the user has\n   * selected a time but has not yet selected a date.\n   */\n  timeValue: TimeValue | null;\n  /** Sets the time portion of the value. */\n  setTimeValue: (value: TimeValue) => void;\n  /** The granularity for the field, based on the `granularity` prop and current value. */\n  granularity: Granularity;\n  /**\n   * Whether the date picker supports selecting a time, according to the `granularity` prop and\n   * current value.\n   */\n  hasTime: boolean;\n  /** Whether the calendar popover is currently open. */\n  isOpen: boolean;\n  /** Sets whether the calendar popover is open. */\n  setOpen: (isOpen: boolean) => void;\n  /**\n   * The current validation state of the date picker, based on the `validationState`, `minValue`,\n   * and `maxValue` props.\n   *\n   * @deprecated Use `isInvalid` instead.\n   */\n  validationState: ValidationState | null;\n  /** Whether the date picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */\n  isInvalid: boolean;\n  /** Formats the selected value using the given options. */\n  formatValue: (locale: string, fieldOptions: FieldOptions) => string;\n  /** Gets a formatter based on state's props. */\n  getDateFormatter: (\n    locale: string,\n    formatOptions: FormatterOptions\n  ) => DateFormatter;\n}\n\n/**\n * Provides state management for a date picker component. A date picker combines a DateField and a\n * Calendar popover to allow users to enter or select a date and time value.\n */\nexport function createDatePickerState<T extends DateValue = DateValue>(\n  props: DatePickerStateOptions<T>\n): DatePickerState {\n  const overlayState = createOverlayTriggerState(props);\n\n  const [value, setValue] = createControlledSignal<DateValue | null>(\n    () => props.value,\n    untrack(() => props.defaultValue ?? null),\n    // SAFETY: Date edits preserve the input date/time class; the mapped generic callback widens subclasses to that class.\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion\n    (localValue) => props.onChange?.(localValue as MappedDateValue<T> | null)\n  );\n\n  const initialValue = untrack(() => value());\n\n  const v = createMemo(() => {\n    const currentValue = value();\n\n    return currentValue ?? props.placeholderValue ?? null;\n  });\n\n  const derived0 = createDefaultProps(v, () => props.granularity);\n\n  const granularity = createMemo(() => {\n    const [currentGranularity] = derived0();\n    const currentValue = v();\n\n    if (currentValue && !(currentGranularity in currentValue)) {\n      throw new Error(\n        `Invalid granularity ${currentGranularity} for value ${currentValue.toString()}`\n      );\n    }\n\n    return currentGranularity;\n  });\n\n  const defaultTimeZone = createMemo(() => {\n    const currentDerived0 = derived0();\n\n    return currentDerived0[1];\n  });\n\n  const dateValue = createMemo(() => {\n    const currentValue = value();\n    const currentDefaultTimeZone = defaultTimeZone();\n\n    return currentValue === null || currentValue === undefined\n      ? null\n      : currentValue.toDate(currentDefaultTimeZone ?? \"UTC\");\n  });\n\n  const hasTime = createMemo(() => {\n    const currentGranularity = granularity();\n\n    return (\n      currentGranularity === \"hour\" ||\n      currentGranularity === \"minute\" ||\n      currentGranularity === \"second\"\n    );\n  });\n\n  const shouldCloseOnSelect = createMemo(\n    () => props.shouldCloseOnSelect ?? true\n  );\n\n  const [selectedDate, setSelectedDate] = createSignal<DateValue | null>(null, {\n    ownedWrite: true,\n  });\n\n  const [selectedTime, setSelectedTime] = createSignal<TimeValue | null>(null, {\n    ownedWrite: true,\n  });\n\n  createRenderEffect(value, (currentValue) => {\n    if (currentValue) {\n      setSelectedDate(currentValue);\n\n      if (\"hour\" in currentValue) {\n        setSelectedTime(currentValue);\n      }\n    }\n  });\n\n  const showEra = createMemo(() => {\n    const currentValue = value();\n\n    return (\n      currentValue?.calendar.identifier === \"gregory\" &&\n      currentValue.era === \"BC\"\n    );\n  });\n\n  const formatOpts = createMemo(() => {\n    const currentGranularity = granularity();\n    const currentDefaultTimeZone = defaultTimeZone();\n    const currentShowEra = showEra();\n\n    return {\n      granularity: currentGranularity,\n      hideTimeZone: props.hideTimeZone,\n      hourCycle: props.hourCycle,\n      shouldForceLeadingZeros: props.shouldForceLeadingZeros,\n      showEra: currentShowEra,\n      timeZone: currentDefaultTimeZone,\n    };\n  });\n\n  const minValue = createMemo(() => props.minValue);\n  const maxValue = createMemo(() => props.maxValue);\n  const isDateUnavailable = createMemo(() => props.isDateUnavailable);\n\n  const builtinValidation = createMemo(() => {\n    const currentValue = value();\n    const currentMinValue = minValue();\n    const currentMaxValue = maxValue();\n    const currentIsDateUnavailable = isDateUnavailable();\n    const currentFormatOpts = formatOpts();\n\n    return getValidationResult(\n      currentValue,\n      currentMinValue,\n      currentMaxValue,\n      currentIsDateUnavailable,\n      currentFormatOpts\n    );\n  });\n\n  const validation = createFormValidationState<DateValue>(\n    merge(props, {\n      get builtinValidation() {\n        return builtinValidation();\n      },\n      validate: (localValue: DateValue) =>\n        // SAFETY: Date edits preserve the input date/time class; the mapped generic callback widens subclasses to that class.\n        // oxlint-disable-next-line typescript/no-unsafe-type-assertion\n        props.validate?.(localValue as MappedDateValue<T>),\n      get value() {\n        return value();\n      },\n    })\n  );\n\n  const isValueInvalid = createMemo(\n    () => validation.displayValidation.isInvalid\n  );\n\n  const validationState = createMemo(() => {\n    const currentIsValueInvalid = isValueInvalid();\n\n    return (\n      getLegacyValidationState(props) ??\n      (currentIsValueInvalid ? \"invalid\" : null)\n    );\n  });\n\n  const commitValue = (date: DateValue, time: TimeValue) => {\n    setValue(\n      \"timeZone\" in time\n        ? time.set(toCalendarDate(date))\n        : toCalendarDateTime(date, time)\n    );\n    setSelectedDate(null);\n    setSelectedTime(null);\n    validation.commitValidation();\n  };\n\n  // Intercept setValue to make sure the Time section is not changed by date selection in Calendar\n  const selectDate = (newValue: DateValue) => {\n    const currentShouldCloseOnSelect = shouldCloseOnSelect();\n    const currentHasTime = hasTime();\n    const currentSelectedTime = selectedTime();\n\n    const shouldClose =\n      typeof currentShouldCloseOnSelect === \"function\"\n        ? currentShouldCloseOnSelect()\n        : currentShouldCloseOnSelect;\n\n    if (currentHasTime) {\n      if (currentSelectedTime || shouldClose) {\n        commitValue(\n          newValue,\n          currentSelectedTime ??\n            getPlaceholderTime(props.defaultValue ?? props.placeholderValue)\n        );\n      } else {\n        setSelectedDate(newValue);\n      }\n    } else {\n      setValue(newValue);\n      validation.commitValidation();\n    }\n\n    if (shouldClose) {\n      overlayState.setOpen(false);\n    }\n  };\n\n  const selectTime = (newValue: TimeValue) => {\n    const currentSelectedDate = selectedDate();\n\n    if (currentSelectedDate && Boolean(newValue)) {\n      commitValue(currentSelectedDate, newValue);\n    } else {\n      setSelectedTime(newValue);\n    }\n  };\n\n  return merge(\n    validation,\n    {\n      get dateValue() {\n        return selectedDate();\n      },\n      get defaultValue() {\n        return props.defaultValue ?? initialValue;\n      },\n      get granularity() {\n        return granularity();\n      },\n      get hasTime() {\n        return hasTime();\n      },\n      get setDateValue() {\n        return selectDate;\n      },\n      get setTimeValue() {\n        return selectTime;\n      },\n      setValue,\n      get timeValue() {\n        return selectedTime();\n      },\n      get value() {\n        return value();\n      },\n    } satisfies Partial<DatePickerState>,\n    overlayState,\n    {\n      formatValue(locale, fieldOptions) {\n        const currentDateValue = dateValue();\n        const currentFormatOpts = formatOpts();\n\n        if (!currentDateValue) {\n          return \"\";\n        }\n\n        const formatOptions = getFormatOptions(fieldOptions, currentFormatOpts);\n        const formatter = new DateFormatter(locale, formatOptions);\n\n        return formatter.format(currentDateValue);\n      },\n      getDateFormatter(locale, formatOptions: FormatterOptions) {\n        const currentFormatOpts = formatOpts();\n        const newOptions = { ...currentFormatOpts, ...formatOptions };\n        const newFormatOptions = getFormatOptions({}, newOptions);\n\n        return new DateFormatter(locale, newFormatOptions);\n      },\n      get isInvalid() {\n        return isValueInvalid();\n      },\n      setOpen(isOpen) {\n        const currentValue = value();\n        const currentSelectedDate = selectedDate();\n        const currentHasTime = hasTime();\n        const currentSelectedTime = selectedTime();\n\n        // Commit the selected date when the calendar is closed. Use a placeholder time if one wasn't set.\n        // If only the time was set and not the date, don't commit. The state will be preserved until\n        // the user opens the popover again.\n        if (!isOpen && !currentValue && currentSelectedDate && currentHasTime) {\n          commitValue(\n            currentSelectedDate,\n            currentSelectedTime ??\n              getPlaceholderTime(props.defaultValue ?? props.placeholderValue)\n          );\n        }\n\n        overlayState.setOpen(isOpen);\n      },\n      // oxlint-disable-next-line typescript/no-deprecated -- Expose the legacy output alias for existing consumers; internal state uses its modern replacement.\n      get validationState() {\n        return validationState();\n      },\n    } satisfies Partial<DatePickerState>\n  );\n}\n"],"mappings":"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"}

package/dist/datepicker/create-date-range-picker-state.d.ts

@@ -0,0 +1,97 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/datepicker/useDateRangePickerState.ts.
+ * Modified for Solid Aria: adapted reactive state, getters, imports, and APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { FormValidationState } from "../form/create-form-validation-state.js";
+import { OverlayTriggerState } from "../overlays/create-overlay-trigger-state.js";
+import { DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue } from "./types.js";
+import { FieldOptions, FormatterOptions } from "./utils.js";
+import { DateFormatter } from "@internationalized/date";
+import { RangeValue, ValidationState } from "@solid2-aria/types-shared";
+export interface DateRangePickerStateOptions<T extends DateValue = DateValue> extends DateRangePickerProps<T> {
+  /**
+   * Determines whether the date picker popover should close automatically when a date is selected.
+   *
+   * @default true
+   */
+  shouldCloseOnSelect?: boolean | (() => boolean);
+}
+type TimeRange = RangeValue<TimeValue>;
+export interface DateRangePickerState extends OverlayTriggerState, FormValidationState {
+  /** The currently selected date range. */
+  value: RangeValue<DateValue | null>;
+  /** The default selected date range. */
+  defaultValue: DateRange | null;
+  /** Sets the selected date range. */
+  setValue: (value: DateRange | null) => void;
+  /**
+   * The date portion of the selected range. This may be set prior to `value` if the user has
+   * selected a date range but has not yet selected a time range.
+   */
+  dateRange: RangeValue<DateValue | null> | null;
+  /** Sets the date portion of the selected range. */
+  setDateRange: (value: DateRange) => void;
+  /**
+   * The time portion of the selected range. This may be set prior to `value` if the user has
+   * selected a time range but has not yet selected a date range.
+   */
+  timeRange: RangeValue<TimeValue | null> | null;
+  /** Sets the time portion of the selected range. */
+  setTimeRange: (value: TimeRange) => void;
+  /** Sets the date portion of either the start or end of the selected range. */
+  setDate: (part: "start" | "end", value: DateValue | null) => void;
+  /** Sets the time portion of either the start or end of the selected range. */
+  setTime: (part: "start" | "end", value: TimeValue | null) => void;
+  /** Sets the date and time of either the start or end of the selected range. */
+  setDateTime: (part: "start" | "end", value: DateValue | null) => void;
+  /** The granularity for the field, based on the `granularity` prop and current value. */
+  granularity: Granularity;
+  /**
+   * Whether the date range picker supports selecting times, according to the `granularity` prop and
+   * current value.
+   */
+  hasTime: boolean;
+  /** Whether the calendar popover is currently open. */
+  isOpen: boolean;
+  /** Sets whether the calendar popover is open. */
+  setOpen: (isOpen: boolean) => void;
+  /**
+   * The current validation state of the date range picker, based on the `validationState`,
+   * `minValue`, and `maxValue` props.
+   *
+   * @deprecated Use `isInvalid` instead.
+   */
+  validationState: ValidationState | null;
+  /**
+   * Whether the date range picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue`
+   * props.
+   */
+  isInvalid: boolean;
+  /** Formats the selected range using the given options. */
+  formatValue: (locale: string, fieldOptions: FieldOptions) => {
+    start: string;
+    end: string;
+  } | null;
+  /** Gets a formatter based on state's props. */
+  getDateFormatter: (locale: string, formatOptions: FormatterOptions) => DateFormatter;
+}
+/**
+ * Provides state management for a date range picker component.
+ * A date range picker combines two DateFields and a RangeCalendar popover to allow
+ * users to enter or select a date and time range.
+ */
+export declare function createDateRangePickerState<T extends DateValue = DateValue>(props: DateRangePickerStateOptions<T>): DateRangePickerState;
+export {};
+//# sourceMappingURL=create-date-range-picker-state.d.ts.map

package/dist/datepicker/create-date-range-picker-state.js

@@ -0,0 +1,305 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/datepicker/useDateRangePickerState.ts.
+ * Modified for Solid Aria: adapted reactive state, getters, imports, and APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createControlledSignal } from "../utils/create-controlled-signal.js";
+import { getLegacyValidationState } from "../utils/legacy-props.js";
+import { createFormValidationState } from "../form/create-form-validation-state.js";
+import { createOverlayTriggerState } from "../overlays/create-overlay-trigger-state.js";
+import { createDefaultProps, getFormatOptions, getPlaceholderTime, getRangeValidationResult } from "./utils.js";
+import { createMemo, createRenderEffect, createSignal, merge, untrack } from "solid-js";
+import { DateFormatter, toCalendarDate, toCalendarDateTime } from "@internationalized/date";
+// src/datepicker/create-date-range-picker-state.ts
+/**
+* Provides state management for a date range picker component.
+* A date range picker combines two DateFields and a RangeCalendar popover to allow
+* users to enter or select a date and time range.
+*/
+function createDateRangePickerState(props) {
+	const overlayState = createOverlayTriggerState(props);
+	const [controlledValue, setControlledValue] = createControlledSignal(() => props.value, untrack(() => props.defaultValue ?? null), (value) => props.onChange?.(value));
+	const initialValue = untrack(() => controlledValue());
+	const [placeholderValue, setPlaceholderValue] = createSignal(untrack(() => (() => {
+		return controlledValue() ?? {
+			end: null,
+			start: null
+		};
+	})()), { ownedWrite: true });
+	createRenderEffect(() => ({
+		controlled: controlledValue(),
+		placeholder: placeholderValue()
+	}), ({ controlled, placeholder }) => {
+		if (!controlled && placeholder.start && placeholder.end) setPlaceholderValue({
+			end: null,
+			start: null
+		});
+	});
+	const value = createMemo(() => {
+		const currentControlledValue = controlledValue();
+		const currentPlaceholderValue = placeholderValue();
+		return currentControlledValue ?? currentPlaceholderValue;
+	});
+	const setValue = (newValue) => {
+		const currentValue = newValue ?? {
+			end: null,
+			start: null
+		};
+		setPlaceholderValue(currentValue);
+		if (isCompleteRange(currentValue)) setControlledValue(currentValue);
+		else setControlledValue(null);
+	};
+	const v = createMemo(() => {
+		const currentValue = value();
+		return currentValue?.start ?? currentValue?.end ?? props.placeholderValue ?? null;
+	});
+	const derived0 = createDefaultProps(v, () => props.granularity);
+	const granularity = createMemo(() => {
+		return derived0()[0];
+	});
+	const defaultTimeZone = createMemo(() => {
+		return derived0()[1];
+	});
+	const hasTime = createMemo(() => {
+		const currentGranularity = granularity();
+		return currentGranularity === "hour" || currentGranularity === "minute" || currentGranularity === "second";
+	});
+	const shouldCloseOnSelect = createMemo(() => props.shouldCloseOnSelect ?? true);
+	const [dateRange, setSelectedDateRange] = createSignal(null, { ownedWrite: true });
+	const [timeRange, setSelectedTimeRange] = createSignal(null, { ownedWrite: true });
+	createRenderEffect(value, (currentValue) => {
+		if (isCompleteRange(currentValue)) {
+			setSelectedDateRange(currentValue);
+			if ("hour" in currentValue.start && "hour" in currentValue.end) setSelectedTimeRange({
+				end: currentValue.end,
+				start: currentValue.start
+			});
+		}
+	});
+	const showEra = createMemo(() => {
+		const currentValue = value();
+		return currentValue?.start?.calendar.identifier === "gregory" && currentValue.start.era === "BC" || currentValue?.end?.calendar.identifier === "gregory" && currentValue.end.era === "BC";
+	});
+	const formatOpts = createMemo(() => {
+		const currentGranularity = granularity();
+		const currentDefaultTimeZone = defaultTimeZone();
+		const currentShowEra = showEra();
+		return {
+			granularity: currentGranularity,
+			hideTimeZone: props.hideTimeZone,
+			hourCycle: props.hourCycle,
+			shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+			showEra: currentShowEra,
+			timeZone: currentDefaultTimeZone
+		};
+	});
+	const minValue = createMemo(() => props.minValue);
+	const maxValue = createMemo(() => props.maxValue);
+	const isDateUnavailable = createMemo(() => props.isDateUnavailable);
+	const builtinValidation = createMemo(() => {
+		const currentValue = value();
+		const currentMinValue = minValue();
+		const currentMaxValue = maxValue();
+		const currentIsDateUnavailable = isDateUnavailable();
+		const currentFormatOpts = formatOpts();
+		return getRangeValidationResult(currentValue, currentMinValue, currentMaxValue, currentIsDateUnavailable ? (date) => currentIsDateUnavailable(date, null) : void 0, currentFormatOpts);
+	});
+	const derivedProperty0 = createMemo(() => [props.startName, props.endName].filter((n) => n !== null && n !== void 0));
+	const validation = createFormValidationState(merge(props, {
+		get builtinValidation() {
+			return builtinValidation();
+		},
+		get name() {
+			return derivedProperty0();
+		},
+		validate: (localValue) => props.validate?.(localValue),
+		get value() {
+			return controlledValue();
+		}
+	}));
+	const commitValue = (localDateRange, localTimeRange) => {
+		setValue({
+			end: "timeZone" in localTimeRange.end ? localTimeRange.end.set(toCalendarDate(localDateRange.end)) : toCalendarDateTime(localDateRange.end, localTimeRange.end),
+			start: "timeZone" in localTimeRange.start ? localTimeRange.start.set(toCalendarDate(localDateRange.start)) : toCalendarDateTime(localDateRange.start, localTimeRange.start)
+		});
+		setSelectedDateRange(null);
+		setSelectedTimeRange(null);
+		validation.commitValidation();
+	};
+	const setDateRange = (range) => {
+		const currentShouldCloseOnSelect = shouldCloseOnSelect();
+		const currentHasTime = hasTime();
+		const currentTimeRange = timeRange();
+		const shouldClose = typeof currentShouldCloseOnSelect === "function" ? currentShouldCloseOnSelect() : currentShouldCloseOnSelect;
+		if (currentHasTime) {
+			if (isCompleteRange(range) && (shouldClose || currentTimeRange?.start && currentTimeRange?.end)) commitValue(range, {
+				end: currentTimeRange?.end ?? getPlaceholderTime(props.placeholderValue),
+				start: currentTimeRange?.start ?? getPlaceholderTime(props.placeholderValue)
+			});
+			else setSelectedDateRange(range);
+		} else if (isCompleteRange(range)) {
+			setValue(range);
+			validation.commitValidation();
+		} else setSelectedDateRange(range);
+		if (shouldClose) overlayState.setOpen(false);
+	};
+	const setTimeRange = (range) => {
+		const currentDateRange = dateRange();
+		if (isCompleteRange(currentDateRange) && isCompleteRange(range)) commitValue(currentDateRange, range);
+		else setSelectedTimeRange(range);
+	};
+	const isValueInvalid = createMemo(() => validation.displayValidation.isInvalid);
+	const validationState = createMemo(() => {
+		const currentIsValueInvalid = isValueInvalid();
+		return getLegacyValidationState(props) ?? (currentIsValueInvalid ? "invalid" : null);
+	});
+	return merge(validation, {
+		get dateRange() {
+			return dateRange();
+		},
+		get defaultValue() {
+			return props.defaultValue ?? initialValue;
+		},
+		get granularity() {
+			return granularity();
+		},
+		get hasTime() {
+			return hasTime();
+		},
+		setDate(part, date) {
+			const currentDateRange = dateRange();
+			if (part === "start") setDateRange({
+				end: currentDateRange?.end ?? null,
+				start: date
+			});
+			else setDateRange({
+				end: date,
+				start: currentDateRange?.start ?? null
+			});
+		},
+		setDateRange,
+		setDateTime(part, dateTime) {
+			const currentValue = value();
+			if (part === "start") setValue({
+				end: currentValue?.end ?? null,
+				start: dateTime
+			});
+			else setValue({
+				end: dateTime,
+				start: currentValue?.start ?? null
+			});
+		},
+		setTime(part, time) {
+			const currentTimeRange = timeRange();
+			if (part === "start") setTimeRange({
+				end: currentTimeRange?.end ?? null,
+				start: time
+			});
+			else setTimeRange({
+				end: time,
+				start: currentTimeRange?.start ?? null
+			});
+		},
+		setTimeRange,
+		setValue,
+		get timeRange() {
+			return timeRange();
+		},
+		get value() {
+			return value();
+		}
+	}, overlayState, {
+		formatValue(locale, fieldOptions) {
+			const currentValue = value();
+			if (!currentValue.start || !currentValue.end) return null;
+			const startTimeZone = "timeZone" in currentValue.start ? currentValue.start.timeZone : void 0;
+			const startGranularity = props.granularity ?? (Boolean(currentValue.start) && "minute" in currentValue.start ? "minute" : "day");
+			const endTimeZone = "timeZone" in currentValue.end ? currentValue.end.timeZone : void 0;
+			const endGranularity = props.granularity ?? (Boolean(currentValue.end) && "minute" in currentValue.end ? "minute" : "day");
+			const startOptions = getFormatOptions(fieldOptions, {
+				granularity: startGranularity,
+				hideTimeZone: props.hideTimeZone,
+				hourCycle: props.hourCycle,
+				showEra: currentValue.start.calendar.identifier === "gregory" && currentValue.start.era === "BC" || currentValue.end.calendar.identifier === "gregory" && currentValue.end.era === "BC",
+				timeZone: startTimeZone
+			});
+			const startDate = currentValue.start.toDate(startTimeZone ?? "UTC");
+			const endDate = currentValue.end.toDate(endTimeZone ?? "UTC");
+			const startFormatter = new DateFormatter(locale, startOptions);
+			let endFormatter;
+			if (startTimeZone === endTimeZone && startGranularity === endGranularity && currentValue.start.compare(currentValue.end) !== 0) {
+				try {
+					return splitDateRangeParts(startFormatter.formatRangeToParts(startDate, endDate));
+				} catch {}
+				endFormatter = startFormatter;
+			} else {
+				const endOptions = getFormatOptions(fieldOptions, {
+					granularity: endGranularity,
+					hideTimeZone: props.hideTimeZone,
+					hourCycle: props.hourCycle,
+					timeZone: endTimeZone
+				});
+				endFormatter = new DateFormatter(locale, endOptions);
+			}
+			return {
+				end: endFormatter.format(endDate),
+				start: startFormatter.format(startDate)
+			};
+		},
+		getDateFormatter(locale, formatOptions) {
+			const newOptions = {
+				...formatOpts(),
+				...formatOptions
+			};
+			const newFormatOptions = getFormatOptions({}, newOptions);
+			return new DateFormatter(locale, newFormatOptions);
+		},
+		get isInvalid() {
+			return isValueInvalid();
+		},
+		setOpen(isOpen) {
+			const currentValue = value();
+			const currentDateRange = dateRange();
+			const currentHasTime = hasTime();
+			const currentTimeRange = timeRange();
+			if (!isOpen && (!currentValue?.start || !currentValue?.end) && isCompleteRange(currentDateRange) && currentHasTime) commitValue(currentDateRange, {
+				end: currentTimeRange?.end ?? getPlaceholderTime(props.placeholderValue),
+				start: currentTimeRange?.start ?? getPlaceholderTime(props.placeholderValue)
+			});
+			overlayState.setOpen(isOpen);
+		},
+		get validationState() {
+			return validationState();
+		}
+	});
+}
+function isCompleteRange(value) {
+	return value?.start !== null && value?.start !== void 0 && value.end !== null && value.end !== void 0;
+}
+function splitDateRangeParts(parts) {
+	let separatorIndex = -1;
+	for (const [index, part] of parts.entries()) if (part.source === "shared" && part.type === "literal") separatorIndex = index;
+	else if (part.source === "endRange") break;
+	let start = "";
+	let end = "";
+	for (const [index, part] of parts.entries()) if (index < separatorIndex) start += part.value;
+	else if (index > separatorIndex) end += part.value;
+	return {
+		end,
+		start
+	};
+}
+export { createDateRangePickerState };
+
+//# sourceMappingURL=create-date-range-picker-state.js.map