@johly/bits-ui 2.18.11 → 2.18.12

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

@@ -15,15 +15,30 @@ export const dateFieldAttrs = createBitsAttrs({
     component: "date-field",
     parts: ["input", "label", "segment"],
 });
+/**
+ * Whether the year segment holds a year that is still being typed. The segment
+ * is zero-padded, so "0202" is what typing "202" towards "2024" looks like.
+ */
+function isPartialYear(year) {
+    return year !== null && Number.parseInt(year) < 1000;
+}
+/**
+ * Days in the typed month. Until the year is fully typed it could still become
+ * a leap year, so a leap year is assumed.
+ */
+function getDaysInSegmentMonth(dateRef, year, month) {
+    const typedYear = year && !isPartialYear(year) ? Number.parseInt(year) : 2000;
+    return getDaysInMonth(dateRef.set({ year: typedYear, month: Number.parseInt(month) }));
+}
 const SEGMENT_CONFIGS = {
     day: {
         min: 1,
         max: (root) => {
-            const segmentMonthValue = root.segmentValues.month;
+            const { year, month } = root.segmentValues;
+            if (!month)
+                return 31;
             const placeholder = root.value.current ?? root.placeholder.current;
-            return segmentMonthValue
-                ? getDaysInMonth(placeholder.set({ month: Number.parseInt(segmentMonthValue) }))
-                : getDaysInMonth(placeholder);
+            return getDaysInSegmentMonth(placeholder, year, month);
         },
         cycle: 1,
         padZero: true,
@@ -265,6 +280,19 @@ export class DateFieldRootState {
         this.states.minute.updating = null;
         this.states.dayPeriod.updating = null;
     }
+    /** Once the year is fully typed, clamp a day it doesn't have (29 February). */
+    #clampDayToYear(segments, year, dateRef) {
+        if (year === null || isPartialYear(year))
+            return;
+        if (segments.month === null || segments.day === null)
+            return;
+        const daysInMonth = getDaysInSegmentMonth(dateRef, year, segments.month);
+        if (Number.parseInt(segments.day) <= daysInMonth)
+            return;
+        segments.day = `${daysInMonth}`;
+        if (this.states.day.updating)
+            this.states.day.updating = segments.day;
+    }
     setValue(value) {
         this.value.current = value;
     }
@@ -439,8 +467,7 @@ export class DateFieldRootState {
                 const next = castCb(pVal);
                 this.states.month.updating = next;
                 if (next !== null && prev.day !== null) {
-                    const date = dateRef.set({ month: Number.parseInt(next) });
-                    const daysInMonth = getDaysInMonth(toDate(date));
+                    const daysInMonth = getDaysInSegmentMonth(dateRef, prev.year, next);
                     const prevDay = Number.parseInt(prev.day);
                     if (prevDay > daysInMonth) {
                         prev.day = `${daysInMonth}`;
@@ -491,6 +518,7 @@ export class DateFieldRootState {
             else if (part === "year") {
                 const next = castCb(pVal);
                 this.states.year.updating = next;
+                this.#clampDayToYear(prev, next, dateRef);
                 newSegmentValues = { ...prev, [part]: next };
             }
             else if (part === "day") {
@@ -509,8 +537,7 @@ export class DateFieldRootState {
             const next = castCb(pVal);
             if (part === "month" && next !== null && prev.day !== null) {
                 this.states.month.updating = next;
-                const date = dateRef.set({ month: Number.parseInt(next) });
-                const daysInMonth = getDaysInMonth(toDate(date));
+                const daysInMonth = getDaysInSegmentMonth(dateRef, prev.year, next);
                 if (Number.parseInt(prev.day) > daysInMonth) {
                     prev.day = `${daysInMonth}`;
                 }
@@ -519,6 +546,7 @@ export class DateFieldRootState {
             else if (part === "year") {
                 const next = castCb(pVal);
                 this.states.year.updating = next;
+                this.#clampDayToYear(prev, next, dateRef);
                 newSegmentValues = { ...prev, [part]: next };
             }
             else if (part === "day") {
@@ -531,6 +559,12 @@ export class DateFieldRootState {
             }
         }
         this.segmentValues = newSegmentValues;
+        // Committing a year mid-typing would clamp the day to it, turning
+        // 29 February into the 28th before "2024" is complete, so the value
+        // is left alone until the year is.
+        if (part === "year" && "year" in newSegmentValues && isPartialYear(newSegmentValues.year)) {
+            return;
+        }
         if (areAllSegmentsFilled(newSegmentValues, this.#fieldNode)) {
             this.setValue(getValueFromSegments({
                 segmentObj: newSegmentValues,

package/dist/internal/date-time/field/helpers.js

@@ -1,6 +1,6 @@
 import { styleToString } from "svelte-toolbelt";
 import { getPlaceholder } from "../placeholders.js";
-import { hasTime, isZonedDateTime } from "../utils.js";
+import { getDaysInMonth, hasTime, isZonedDateTime } from "../utils.js";
 import { ALL_SEGMENT_PARTS, DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS, } from "./parts.js";
 import { getSegments } from "./segments.js";
 import { isBrowser, isNull, isNumberString } from "../../is.js";
@@ -25,6 +25,25 @@ export function initializeSegmentValues(granularity) {
     });
     return Object.fromEntries(initialParts);
 }
+/**
+ * The date to format a segment value with. A day can be typed before its month,
+ * so it may not exist in `dateRef`'s month; setting it there would constrain it
+ * (31 would read as 30), so it is shown in the first month long enough instead.
+ */
+function getPartDate(dateRef, part, value) {
+    if (part !== "day")
+        return dateRef.set({ [part]: value });
+    const day = Number.parseInt(value);
+    if (day <= getDaysInMonth(dateRef))
+        return dateRef.set({ day });
+    const monthsInYear = dateRef.calendar.getMonthsInYear(dateRef);
+    for (let month = 1; month <= monthsInYear; month++) {
+        const candidate = dateRef.set({ month, day: 1 });
+        if (day <= getDaysInMonth(candidate))
+            return candidate.set({ day });
+    }
+    return dateRef.set({ day });
+}
 function createContentObj(props) {
     const { segmentValues, formatter, locale, dateRef } = props;
     const content = Object.keys(segmentValues).reduce((obj, part) => {
@@ -53,7 +72,7 @@ function createContentObj(props) {
                 return "0";
             }
             else if (!isNull(value) && !isNull(intValue)) {
-                const formatted = formatter.part(dateRef.set({ [part]: value }), part, {
+                const formatted = formatter.part(getPartDate(dateRef, part, value), part, {
                     hourCycle: props.hourCycle === 24 ? "h23" : undefined,
                 });
                 /**
@@ -116,7 +135,7 @@ function createContentObj(props) {
                     return "0";
                 }
                 else if (!isNull(value)) {
-                    const formatted = formatter.part(dateRef.set({ [part]: value }), part);
+                    const formatted = formatter.part(getPartDate(dateRef, part, value), part);
                     if (part === "year") {
                         return `${value}`;
                     }
@@ -238,9 +257,23 @@ function getUsedSegments(fieldNode) {
     });
     return usedSegments;
 }
+/**
+ * The order the segments are applied in when building a date from them.
+ *
+ * Setting a part on a `DateValue` constrains the result immediately, so the day
+ * has to be applied after the year and month it belongs to. Applying it in the
+ * order the segments are displayed clamps the day to the number of days in the
+ * `dateRef`'s month in day-first locales (e.g. `31/08` entered in `en-GB` with a
+ * `dateRef` in November would resolve to the 30th).
+ */
+const SEGMENT_APPLY_ORDER = ["year", "month", "day", "hour", "minute", "second", "dayPeriod"];
+function getSegmentApplyOrder(part) {
+    const index = SEGMENT_APPLY_ORDER.indexOf(part);
+    return index === -1 ? SEGMENT_APPLY_ORDER.length : index;
+}
 export function getValueFromSegments(props) {
     const { segmentObj, fieldNode, dateRef } = props;
-    const usedSegments = getUsedSegments(fieldNode);
+    const usedSegments = getUsedSegments(fieldNode).sort((a, b) => getSegmentApplyOrder(a) - getSegmentApplyOrder(b));
     let date = dateRef;
     for (const part of usedSegments) {
         if ("hour" in segmentObj) {

package/package.json

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