@proyecto-viviana/solid-stately 0.5.0 → 0.6.0-rc.0

package/src/calendar/createCalendarState.ts

@@ -1,3 +1,17 @@
+/*
+ * 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.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/calendar/useCalendarState.ts
+
 /**
  * CalendarState for Solid-Stately
  *
@@ -5,7 +19,8 @@
  * Based on @react-stately/calendar useCalendarState
  */
 
-import { createSignal, createMemo, createEffect, type Accessor } from "solid-js";
+import { createMemo, createEffect } from "solid-js";
+import type { Accessor } from "solid-js";
 import {
   type Calendar as InternationalizedCalendar,
   type CalendarDate,
@@ -25,8 +40,9 @@ import {
   createCalendar as intlCreateCalendar,
   toCalendar as intlToCalendar,
   toCalendarDate as intlToCalendarDate,
+  minDate,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 
 export type ValidationState = "valid" | "invalid";
 export type CalendarPageBehavior = "single" | "visible";
@@ -75,7 +91,7 @@ export interface CalendarStateProps<
   /** Callback that is called for each date in the calendar to determine if it is unavailable. */
   isDateUnavailable?: (date: DateValue) => boolean;
   /** The number of months to display at once. */
-  visibleMonths?: number;
+  visibleMonths?: MaybeAccessor<number | undefined>;
   /** Controls whether paging advances by one month or by the visible month range. */
   pageBehavior?: CalendarPageBehavior;
   /** Determines how the visible months align around the initial focused date. */
@@ -138,6 +154,10 @@ export interface CalendarState<
   isOutsideVisibleRange: (date: DateValue) => boolean;
   /** Whether a date is invalid. */
   isInvalid: (date: DateValue) => boolean;
+  /** Whether the previous page is entirely outside min/max. */
+  isPreviousVisibleRangeInvalid: () => boolean;
+  /** Whether the next page is entirely outside min/max. */
+  isNextVisibleRangeInvalid: () => boolean;
   /** Moves focus to the previous page (month). */
   focusPreviousPage: () => void;
   /** Moves focus to the next page (month). */
@@ -198,7 +218,7 @@ export function createCalendarState<
   const calendar = createMemo(() =>
     (props.createCalendar ?? intlCreateCalendar)(resolvedOptions().calendar as CalendarIdentifier),
   );
-  const visibleMonths = props.visibleMonths ?? 1;
+  const visibleMonths = createMemo(() => Math.max(1, Number(access(props.visibleMonths) ?? 1)));
   const firstDayOfWeekName = (): CalendarDayOfWeek | undefined =>
     props.firstDayOfWeek == null ? undefined : dayOfWeekNames[props.firstDayOfWeek];
 
@@ -212,11 +232,11 @@ export function createCalendarState<
       case "start":
         return 0;
       case "end":
-        return Math.max(visibleMonths - 1, 0);
+        return Math.max(visibleMonths() - 1, 0);
       case "center":
       default: {
-        let halfDuration = Math.floor(visibleMonths / 2);
-        if (halfDuration > 0 && visibleMonths % 2 === 0) {
+        let halfDuration = Math.floor(visibleMonths() / 2);
+        if (halfDuration > 0 && visibleMonths() % 2 === 0) {
           halfDuration--;
         }
         return halfDuration;
@@ -232,7 +252,7 @@ export function createCalendarState<
   const visibleRangeEnd = (start: CalendarDate): CalendarDate => {
     let end = endOfMonth(start);
 
-    for (let i = 1; i < visibleMonths; i++) {
+    for (let i = 1; i < visibleMonths(); i++) {
       end = endOfMonth(end.add({ months: 1 }));
     }
 
@@ -280,18 +300,19 @@ export function createCalendarState<
 
   // State signals
   const initialFocusedDate = constrainDate(getInitialFocusedDate());
-  const [internalValue, setInternalValue] = createSignal<T | T[] | null>(
+  const [internalValue, setInternalValue] = createInternalSignal<T | T[] | null>(
     (props.defaultValue as T | T[] | null) ?? null,
   );
-  const [focusedDate, setFocusedDateInternal] = createSignal<CalendarDate>(initialFocusedDate);
-  const [visibleRangeStart, setVisibleRangeStart] = createSignal<CalendarDate>(
+  const [focusedDate, setFocusedDateInternal] =
+    createInternalSignal<CalendarDate>(initialFocusedDate);
+  const [visibleRangeStart, setVisibleRangeStart] = createInternalSignal<CalendarDate>(
     alignVisibleRangeStart(initialFocusedDate),
   );
   // Init from autoFocus, mirroring @react-stately useCalendarState
   // (`useState(props.autoFocus || false)`). Without autoFocus the calendar
   // mounts unfocused and never steals DOM focus.
-  const [isFocused, setFocused] = createSignal(props.autoFocus ?? false);
-  const [isPaginating, setIsPaginating] = createSignal(false);
+  const [isFocused, setFocused] = createInternalSignal(props.autoFocus ?? false);
+  const [isPaginating, setIsPaginating] = createInternalSignal(false);
 
   // Controlled vs uncontrolled value
   const sourceValue = createMemo<T | T[] | null>(() => {
@@ -312,75 +333,96 @@ export function createCalendarState<
   const validationState = createMemo(() => access(props.validationState));
   const isValueInvalid = createMemo(() => validationState() === "invalid");
 
-  // Visible range based on the paged range start.
-  const visibleRange = createMemo(() => {
+  // Visible range based on the paged range start. Function (not memo) so
+  // onFocusChange snapshots see the live page after a same-turn write.
+  const visibleRange = () => {
     const start = visibleRangeStart();
     const end = visibleRangeEnd(start);
 
     return { start, end };
-  });
-
-  const syncVisibleRangeForFocusedDate = (nextFocusedDate: CalendarDate) => {
-    const range = visibleRange();
+  };
 
+  const syncVisibleRangeForFocusedDate = (
+    nextFocusedDate: CalendarDate,
+    range: { start: CalendarDate; end: CalendarDate },
+    months: number,
+  ) => {
     if (nextFocusedDate.compare(range.start) < 0) {
-      setVisibleRangeStart(startOfMonth(nextFocusedDate.subtract({ months: visibleMonths - 1 })));
+      setVisibleRangeStart(startOfMonth(nextFocusedDate.subtract({ months: months - 1 })));
     } else if (nextFocusedDate.compare(range.end) > 0) {
       setVisibleRangeStart(startOfMonth(nextFocusedDate));
     }
   };
 
-  createEffect(() => {
-    const controlledFocused = access(props.focusedValue);
-    if (!controlledFocused) {
-      return;
-    }
-
-    const nextFocusedDate = constrainDate(toDisplayCalendarDate(controlledFocused));
-
-    const currentFocusedDate = focusedDate();
-    if (
-      nextFocusedDate.compare(currentFocusedDate) !== 0 ||
-      !isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
-    ) {
-      setFocusedDateInternal(nextFocusedDate);
-    }
-
-    syncVisibleRangeForFocusedDate(nextFocusedDate);
-  });
-
-  createEffect(() => {
-    const controlledFocused = access(props.focusedValue);
-    if (controlledFocused) {
-      return;
-    }
-
-    const currentFocusedDate = focusedDate();
-    const nextFocusedDate = constrainDate(currentFocusedDate);
-
-    if (
-      nextFocusedDate.compare(currentFocusedDate) === 0 &&
-      isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
-    ) {
-      return;
-    }
-
-    syncVisibleRangeForFocusedDate(nextFocusedDate);
-    setFocusedDateInternal(nextFocusedDate);
-    props.onFocusChange?.(nextFocusedDate);
-  });
-
-  createEffect(() => {
-    const currentFocusedDate = focusedDate();
-    const nextFocusedDate = toDisplayCalendarDate(currentFocusedDate);
+  createEffect(
+    () => {
+      const controlledFocused = access(props.focusedValue);
+      if (!controlledFocused) return null;
+      return {
+        nextFocusedDate: constrainDate(toDisplayCalendarDate(controlledFocused)),
+        currentFocusedDate: focusedDate(),
+        range: visibleRange(),
+        months: visibleMonths(),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      const { nextFocusedDate, currentFocusedDate, range, months } = data;
+      if (
+        nextFocusedDate.compare(currentFocusedDate) !== 0 ||
+        !isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
+      ) {
+        setFocusedDateInternal(nextFocusedDate);
+      }
+      syncVisibleRangeForFocusedDate(nextFocusedDate, range, months);
+    },
+  );
 
-    if (isEqualCalendar(currentFocusedDate.calendar, nextFocusedDate.calendar)) {
-      return;
-    }
+  createEffect(
+    () => {
+      const controlledFocused = access(props.focusedValue);
+      if (controlledFocused) return null;
+      const currentFocusedDate = focusedDate();
+      const nextFocusedDate = constrainDate(currentFocusedDate);
+      if (
+        nextFocusedDate.compare(currentFocusedDate) === 0 &&
+        isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
+      ) {
+        return null;
+      }
+      return {
+        currentFocusedDate,
+        nextFocusedDate,
+        range: visibleRange(),
+        months: visibleMonths(),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      syncVisibleRangeForFocusedDate(data.nextFocusedDate, data.range, data.months);
+      setFocusedDateInternal(data.nextFocusedDate);
+      props.onFocusChange?.(data.nextFocusedDate);
+    },
+  );
 
-    setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(alignVisibleRangeStart(nextFocusedDate));
-  });
+  createEffect(
+    () => {
+      const currentFocusedDate = focusedDate();
+      const nextFocusedDate = toDisplayCalendarDate(currentFocusedDate);
+      if (isEqualCalendar(currentFocusedDate.calendar, nextFocusedDate.calendar)) {
+        return null;
+      }
+      return {
+        nextFocusedDate,
+        alignedStart: alignVisibleRangeStart(nextFocusedDate),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      setFocusedDateInternal(data.nextFocusedDate);
+      setVisibleRangeStart(data.alignedStart);
+    },
+  );
 
   // Format week days for headers
   const weekDays = createMemo(() => {
@@ -408,22 +450,45 @@ export function createCalendarState<
     return formatter.format(formattableMonth.toDate(timeZone));
   });
 
+  // Walks previousAvailableDate from minValue ?? minDate(constrained, startDate)
+  // rather than from startDate alone, so a date before the visible month remains
+  // selectable when isDateUnavailable is set. Mirrors useCalendarState.normalizeValue.
+  const normalizeValue = (newValue: CalendarDate): T | null => {
+    const constrained = constrainDate(newValue);
+    const minBound = access(props.minValue);
+    const lowerBound =
+      minBound != null
+        ? toDisplayCalendarDate(minBound)
+        : (minDate(constrained, visibleRange().start) ?? constrained);
+    const prev = previousAvailableDate(constrained, lowerBound, props.isDateUnavailable);
+    if (!prev) {
+      return null;
+    }
+
+    const oldValue = sourceValue();
+    const referenceValue = Array.isArray(oldValue) ? (oldValue[0] ?? null) : oldValue;
+    return convertValue(prev, referenceValue) as T;
+  };
+
   // Set value with onChange callback
   const setValue = (newValue: T | T[] | null) => {
     if (isDisabled() || isReadOnly()) return;
 
     const oldValue = sourceValue();
-    const referenceValue = Array.isArray(oldValue) ? (oldValue[0] ?? null) : oldValue;
 
     let nextValue: T | T[] | null;
     if (newValue == null) {
       nextValue = selectionMode() === "multiple" ? ([] as T[]) : null;
     } else if (Array.isArray(newValue)) {
-      nextValue = newValue.map(
-        (v) => convertValue(constrainDate(toDisplayCalendarDate(v)), referenceValue) as T,
-      );
+      nextValue = newValue
+        .map((v) => normalizeValue(toDisplayCalendarDate(v)))
+        .filter((v): v is T => v != null);
     } else {
-      nextValue = convertValue(constrainDate(toDisplayCalendarDate(newValue)), referenceValue) as T;
+      const localValue = normalizeValue(toDisplayCalendarDate(newValue));
+      if (!localValue) {
+        return;
+      }
+      nextValue = localValue;
     }
 
     const controlled = access(props.value);
@@ -444,7 +509,7 @@ export function createCalendarState<
       return;
     }
 
-    syncVisibleRangeForFocusedDate(constrained);
+    syncVisibleRangeForFocusedDate(constrained, visibleRange(), visibleMonths());
     setFocusedDateInternal(constrained);
     props.onFocusChange?.(constrained);
   };
@@ -510,10 +575,33 @@ export function createCalendarState<
     return isCellDisabled(date) || isCellUnavailable(date);
   };
 
+  // RAC `useCalendarState.ts` `isPreviousVisibleRangeInvalid` /
+  // `isNextVisibleRangeInvalid`: prev = startDate−1 invalid; next = endDate+1.
+  const isDateOutsideAllowedRange = (date: DateValue): boolean => {
+    const min = minValueState();
+    const max = maxValueState();
+    const calDate = toDisplayCalendarDate(date);
+    if (min && calDate.compare(toDisplayCalendarDate(min)) < 0) return true;
+    if (max && calDate.compare(toDisplayCalendarDate(max)) > 0) return true;
+    return false;
+  };
+
+  const isPreviousVisibleRangeInvalid = () => {
+    const start = visibleRange().start;
+    const previous = start.subtract({ days: 1 });
+    return isSameDay(previous, start) || isDateOutsideAllowedRange(previous);
+  };
+
+  const isNextVisibleRangeInvalid = () => {
+    const end = visibleRange().end;
+    const next = end.add({ days: 1 });
+    return isSameDay(next, end) || isDateOutsideAllowedRange(next);
+  };
+
   // Navigation methods
   const focusPreviousPage = () => {
     setIsPaginating(true);
-    const pageMonths = props.pageBehavior === "single" ? 1 : visibleMonths;
+    const pageMonths = props.pageBehavior === "single" ? 1 : visibleMonths();
     const nextFocusedDate = constrainDate(focusedDate().subtract({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
     setVisibleRangeStart(startOfMonth(visibleRangeStart().subtract({ months: pageMonths })));
@@ -523,7 +611,7 @@ export function createCalendarState<
 
   const focusNextPage = () => {
     setIsPaginating(true);
-    const pageMonths = props.pageBehavior === "single" ? 1 : visibleMonths;
+    const pageMonths = props.pageBehavior === "single" ? 1 : visibleMonths();
     const nextFocusedDate = constrainDate(focusedDate().add({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
     setVisibleRangeStart(startOfMonth(visibleRangeStart().add({ months: pageMonths })));
@@ -583,7 +671,7 @@ export function createCalendarState<
     if (isReadOnly() || isDisabled()) return;
 
     if (selectionMode() === "multiple") {
-      const current = value();
+      const current = access(props.value) !== undefined ? value() : readNow(internalValue);
       const base: CalendarDate[] = Array.isArray(current)
         ? current.map((v) => toDisplayCalendarDate(v))
         : current != null
@@ -655,6 +743,8 @@ export function createCalendarState<
     isCellDisabled,
     isOutsideVisibleRange,
     isInvalid,
+    isPreviousVisibleRangeInvalid,
+    isNextVisibleRangeInvalid,
     focusPreviousPage,
     focusNextPage,
     focusPreviousSection,
@@ -673,7 +763,9 @@ export function createCalendarState<
     getWeeksInMonth: getWeeksInMonthFn,
     weekDays,
     title,
-    visibleMonths,
+    get visibleMonths() {
+      return visibleMonths();
+    },
     isPaginating,
   };
 }
@@ -695,3 +787,26 @@ function convertValue(newValue: CalendarDate, oldValue?: DateValue | null): Date
 
   return localValue;
 }
+
+/**
+ * Walks backward from `date` while it is unavailable and still at/after `minValue`.
+ * Mirrors @react-stately/calendar previousAvailableDate.
+ */
+function previousAvailableDate(
+  date: CalendarDate,
+  minValue: CalendarDate,
+  isDateUnavailable?: (date: DateValue) => boolean,
+): CalendarDate | null {
+  if (!isDateUnavailable) {
+    return date;
+  }
+
+  while (date.compare(minValue) >= 0 && isDateUnavailable(date)) {
+    date = date.subtract({ days: 1 });
+  }
+
+  if (date.compare(minValue) >= 0) {
+    return date;
+  }
+  return null;
+}

package/src/calendar/createDateFieldState.ts

@@ -1,3 +1,18 @@
+/*
+ * 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.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/datepicker/useDateFieldState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/datepicker/utils.ts
+
 /**
  * DateFieldState for Solid-Stately
  *
@@ -12,11 +27,14 @@
  *
  * The upstream "derived state during render" resync (which re-mints the display
  * value when the committed value / calendar / hour cycle changes) is ported to a
- * Solid `createComputed` so it runs synchronously before render effects — mirroring
- * React's render-phase setState rather than a post-render `createEffect`.
+ * split `createEffect`. Compute tracks the committed value; apply writes the
+ * display override. Solid 2 has no `createComputed`.
  */
 
-import { createSignal, createMemo, createComputed, untrack, type Accessor } from "solid-js";
+import { createMemo, createEffect, untrack } from "solid-js";
+import type { Accessor } from "solid-js";
+import { access, createInternalSignal, type MaybeAccessor } from "../utils";
+
 import {
   type Calendar,
   type CalendarDateTime,
@@ -33,7 +51,6 @@ import {
   isEqualCalendar,
   createCalendar as intlCreateCalendar,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
 import type { ValidationState } from "./createCalendarState";
 import { IncompleteDate } from "./IncompleteDate";
 import { formatDateFieldError, getPlaceholder, type DateFieldErrorKey } from "./intl";
@@ -100,7 +117,7 @@ export interface DateFieldStateProps<T extends DateValue = DateValue> {
   /** Whether the value is invalid (controlled). */
   isInvalid?: boolean;
   /** The locale to use for formatting. */
-  locale?: string;
+  locale?: MaybeAccessor<string | undefined>;
   /** The granularity of the date/time (day, hour, minute, second). */
   granularity?: FieldGranularity;
   /** The maximum granularity (largest editable unit). Defaults to `year`. */
@@ -235,7 +252,7 @@ const TYPE_MAPPING: Record<string, string> = {
 export function createDateFieldState<T extends DateValue = DateValue>(
   props: DateFieldStateProps<T> = {},
 ): DateFieldState<T> {
-  const locale = (): string => props.locale ?? "en-US";
+  const locale = createMemo(() => access(props.locale) ?? "en-US");
   const createCalendarFn = (name: CalendarIdentifier): Calendar =>
     (props.createCalendar ?? intlCreateCalendar)(name);
 
@@ -252,19 +269,15 @@ export function createDateFieldState<T extends DateValue = DateValue>(
       timeZone: v && "timeZone" in v ? (v as { timeZone: string }).timeZone : undefined,
     };
   });
-  const [lastDefaults, setLastDefaults] = createSignal<{
-    granularity: Granularity;
-    timeZone: string | undefined;
-  }>(initialDefaults);
-  createComputed(() => {
+  const lastDefaults = createMemo<typeof initialDefaults>((prev = initialDefaults) => {
     const v = v0();
-    if (!v) return;
+    if (!v) return prev;
     const defaultGranularity = ("minute" in v ? "minute" : "day") as Granularity;
     const defaultTimeZone = "timeZone" in v ? (v as { timeZone: string }).timeZone : undefined;
-    const last = untrack(lastDefaults);
-    if (last.granularity !== defaultGranularity || last.timeZone !== defaultTimeZone) {
-      setLastDefaults({ granularity: defaultGranularity, timeZone: defaultTimeZone });
+    if (prev.granularity !== defaultGranularity || prev.timeZone !== defaultTimeZone) {
+      return { granularity: defaultGranularity, timeZone: defaultTimeZone };
     }
+    return prev;
   });
   const granularity = (): FieldGranularity => {
     if (props.granularity) return props.granularity;
@@ -296,7 +309,9 @@ export function createDateFieldState<T extends DateValue = DateValue>(
   const hourCycle = (): HourCycle => calendarAndHourCycle()[1];
 
   // Controlled vs uncontrolled committed value.
-  const [internalValue, setInternalValue] = createSignal<T | null>(props.defaultValue ?? null);
+  const [internalValue, setInternalValue] = createInternalSignal<T | null>(
+    props.defaultValue ?? null,
+  );
   const rawValue = createMemo<T | null>(() => {
     const controlled = access(props.value);
     return controlled !== undefined ? controlled : internalValue();
@@ -307,32 +322,33 @@ export function createDateFieldState<T extends DateValue = DateValue>(
   };
 
   // The current value, converted to the display calendar.
-  const calendarValue = createMemo<DateValue | null>(() => convertValue(rawValue(), calendar()) ?? null);
+  const calendarValue = createMemo<DateValue | null>(
+    () => convertValue(rawValue(), calendar()) ?? null,
+  );
 
   const initialValue = untrack(calendarValue);
 
   // The display override: holds the (possibly invalid/incomplete) value being edited.
-  const [displayValue, setDisplayValue] = createSignal<IncompleteDate>(
+  const [displayValue, setDisplayValue] = createInternalSignal<IncompleteDate>(
     untrack(() => new IncompleteDate(calendar(), hourCycle(), untrack(calendarValue))),
   );
 
-  // Render-phase resync: whenever the committed value, calendar, or hour cycle changes
-  // from the outside, re-mint the display override. Ported to createComputed so it runs
-  // synchronously (like React's render-phase setState), never leaving a stale frame.
+  // Resync the display override when the committed value, calendar, or hour
+  // cycle changes from the outside. Compute tracks those sources; apply writes.
   let lastValue = untrack(calendarValue);
   let lastCalendar = untrack(calendar);
   let lastHourCycle = untrack(hourCycle);
-  createComputed(() => {
-    const cv = calendarValue();
-    const cal = calendar();
-    const hc = hourCycle();
-    if (cv !== lastValue || hc !== lastHourCycle || !isEqualCalendar(cal, lastCalendar)) {
-      lastValue = cv;
-      lastCalendar = cal;
-      lastHourCycle = hc;
-      setDisplayValue(new IncompleteDate(cal, hc, cv));
-    }
-  });
+  createEffect(
+    () => ({ cv: calendarValue(), cal: calendar(), hc: hourCycle() }),
+    ({ cv, cal, hc }) => {
+      if (cv !== lastValue || hc !== lastHourCycle || !isEqualCalendar(cal, lastCalendar)) {
+        lastValue = cv;
+        lastCalendar = cal;
+        lastHourCycle = hc;
+        setDisplayValue(new IncompleteDate(cal, hc, cv));
+      }
+    },
+  );
 
   const showEra = (): boolean => calendar().identifier === "gregory" && displayValue().era === "BC";
   const maxGranularity = (): "year" | "month" | "day" | "hour" | "minute" =>
@@ -352,7 +368,9 @@ export function createDateFieldState<T extends DateValue = DateValue>(
     shouldForceLeadingZeros: props.shouldForceLeadingZeros,
   }));
 
-  const dateFormatter = createMemo(() => new DateFormatter(locale(), getFormatOptions({}, formatOpts())));
+  const dateFormatter = createMemo(
+    () => new DateFormatter(locale(), getFormatOptions({}, formatOpts())),
+  );
   const resolvedOptions = createMemo(() => dateFormatter().resolvedOptions());
 
   const displaySegments = createMemo<DateSegmentType[]>(() => {
@@ -632,9 +650,7 @@ function processSegments(
     const isPlaceholder =
       EDITABLE_SEGMENTS[type] === true &&
       displayValue[segment.type as keyof IncompleteDate] == null;
-    const placeholder = EDITABLE_SEGMENTS[type]
-      ? getPlaceholder(type, segment.value, locale)
-      : "";
+    const placeholder = EDITABLE_SEGMENTS[type] ? getPlaceholder(type, segment.value, locale) : "";
     const limits = displayValue.getSegmentLimits(type);
     const dateSegment: DateSegment = {
       type,
@@ -736,13 +752,12 @@ export function getFormatOptions(
   let endIdx = keys.indexOf(granularity);
   if (endIdx < 0) endIdx = 2;
   if (startIdx > endIdx) throw new Error("maxGranularity must be greater than granularity");
-  const opts: Record<string, unknown> = keys.slice(startIdx, endIdx + 1).reduce(
-    (acc: Record<string, unknown>, key) => {
+  const opts: Record<string, unknown> = keys
+    .slice(startIdx, endIdx + 1)
+    .reduce((acc: Record<string, unknown>, key) => {
       acc[key] = merged[key];
       return acc;
-    },
-    {},
-  );
+    }, {});
   if (options.hourCycle != null) opts.hour12 = options.hourCycle === 12;
   opts.timeZone = options.timeZone || "UTC";
   const hasTime = granularity === "hour" || granularity === "minute" || granularity === "second";
@@ -751,7 +766,10 @@ export function getFormatOptions(
   return opts as Intl.DateTimeFormatOptions;
 }
 
-function convertValue(value: DateValue | null | undefined, calendar: Calendar): DateValue | null | undefined {
+function convertValue(
+  value: DateValue | null | undefined,
+  calendar: Calendar,
+): DateValue | null | undefined {
   if (value === null) return null;
   if (!value) return undefined;
   return toCalendar(value, calendar);