@homebound/beam 3.1.0-alpha.1 → 3.1.0-alpha.2

package/dist/index.js

@@ -6005,6 +6005,107 @@ import { Item as Item5, useComboBoxState as useComboBoxState3 } from "react-stat
 // src/components/internal/DatePicker/DatePicker.tsx
 import { DayPicker } from "react-day-picker";
 
+// src/utils/plainDate.ts
+import { Temporal } from "temporal-polyfill";
+function jsDateToPlainDate(date) {
+  return new Temporal.PlainDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+}
+function formatPlainDate(date, format) {
+  switch (format) {
+    case "shortDate":
+      return date.toLocaleString("en-US", { month: "2-digit", day: "2-digit", year: "2-digit" });
+    case "date":
+      return date.toLocaleString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" });
+    case "shortWeekdayMonthDay":
+      return date.toLocaleString("en-US", { weekday: "short", month: "short", day: "numeric" });
+    case "longWeekdayMonthDayYear":
+      return `${date.toLocaleString("en-US", { weekday: "long" })} ${date.toLocaleString("en-US", { month: "long" })} ${date.day}, ${formatYear(date.year)}`;
+    case "monthYear":
+      return date.toLocaleString("en-US", { month: "long", year: "numeric" });
+    case "shortMonth":
+      return date.toLocaleString("en-US", { month: "short" });
+    case "year":
+      return formatYear(date.year);
+    case "weekdayInitial":
+      return date.toLocaleString("en-US", { weekday: "narrow" });
+    case "weekday":
+      return date.toLocaleString("en-US", { weekday: "long" });
+    default:
+      throw new Error(`Unsupported date format: ${format}`);
+  }
+}
+function todayPlainDate() {
+  return Temporal.Now.plainDateISO();
+}
+function isPlainDate(value) {
+  return value instanceof Temporal.PlainDate;
+}
+function parsePersistedPlainDate(value) {
+  if (isPlainDate(value)) return value;
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    return jsDateToPlainDate(value);
+  }
+  if (typeof value !== "string") return void 0;
+  try {
+    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+      return Temporal.PlainDate.from(value);
+    }
+  } catch {
+    return void 0;
+  }
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? void 0 : jsDateToPlainDate(date);
+}
+function dehydratePlainDate(value) {
+  return value?.toString();
+}
+function padNumber(value, length) {
+  return Math.abs(value).toString().padStart(length, "0");
+}
+function formatYear(year) {
+  return `${year < 0 ? "-" : ""}${padNumber(year, 4)}`;
+}
+
+// src/components/internal/DatePicker/dates.ts
+function plainDateToJsDate(date) {
+  return new Date(date.year, date.month - 1, date.day, 12);
+}
+function dateRangeToJsDateRange(range) {
+  if (!range) return void 0;
+  return {
+    from: range.from ? plainDateToJsDate(range.from) : void 0,
+    to: range.to ? plainDateToJsDate(range.to) : void 0
+  };
+}
+function jsDateRangeToDateRange(range) {
+  if (!range) return void 0;
+  return {
+    from: range.from ? jsDateToPlainDate(range.from) : void 0,
+    to: range.to ? jsDateToPlainDate(range.to) : void 0
+  };
+}
+function dateMatcherToDayPickerMatcher(matcher) {
+  if (typeof matcher === "function") {
+    return function dayPickerMatcher(date) {
+      return matcher(jsDateToPlainDate(date));
+    };
+  }
+  if (Array.isArray(matcher)) {
+    return matcher.map(plainDateToJsDate);
+  }
+  if (isPlainDate(matcher)) {
+    return plainDateToJsDate(matcher);
+  }
+  return {
+    from: matcher.from ? plainDateToJsDate(matcher.from) : void 0,
+    to: matcher.to ? plainDateToJsDate(matcher.to) : void 0
+  };
+}
+function dateMatchersToDayPickerMatchers(matchers) {
+  if (matchers === void 0) return void 0;
+  return Array.isArray(matchers) ? matchers.map(dateMatcherToDayPickerMatcher) : dateMatcherToDayPickerMatcher(matchers);
+}
+
 // src/components/internal/DatePicker/Day.tsx
 import { useRef as useRef7 } from "react";
 import { useDayRender } from "react-day-picker";
@@ -6139,18 +6240,19 @@ var rangeBaseStyles = {
 };
 
 // src/components/internal/DatePicker/Header.tsx
-import { addMonths, addYears, format } from "date-fns";
+import { addMonths, addYears } from "date-fns";
 import { useNavigation } from "react-day-picker";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function Header(props) {
   const {
     displayMonth
   } = props;
+  const displayMonthDate = jsDateToPlainDate(displayMonth);
   const {
     goToMonth
   } = useNavigation();
   return /* @__PURE__ */ jsxs10("div", { className: "df jcsb aic ml_12px mr_2px h_32px", children: [
-    /* @__PURE__ */ jsx17("h1", { className: "fw4 fz_16px lh_24px", children: format(displayMonth, "MMMM yyyy") }),
+    /* @__PURE__ */ jsx17("h1", { className: "fw4 fz_16px lh_24px", children: formatPlainDate(displayMonthDate, "monthYear") }),
     /* @__PURE__ */ jsxs10("div", { children: [
       /* @__PURE__ */ jsx17(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth(addMonths(displayMonth, -1)) }),
       /* @__PURE__ */ jsx17(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth(addMonths(displayMonth, 1)) })
@@ -6161,91 +6263,41 @@ function YearSkipHeader(props) {
   const {
     displayMonth
   } = props;
+  const displayMonthDate = jsDateToPlainDate(displayMonth);
   const {
     goToMonth
   } = useNavigation();
   return /* @__PURE__ */ jsxs10("div", { className: "df jcsb aic ml_12px mr_12px h_32px", children: [
     /* @__PURE__ */ jsxs10("div", { className: "df fdr jcsb", children: [
       /* @__PURE__ */ jsx17(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth(addMonths(displayMonth, -1)) }),
-      /* @__PURE__ */ jsx17("h1", { className: "fw4 fz_16px lh_24px", children: format(displayMonth, "MMM") }),
+      /* @__PURE__ */ jsx17("h1", { className: "fw4 fz_16px lh_24px", children: formatPlainDate(displayMonthDate, "shortMonth") }),
       /* @__PURE__ */ jsx17(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth(addMonths(displayMonth, 1)) })
     ] }),
     /* @__PURE__ */ jsxs10("div", { className: "df fdr jcsb", children: [
       /* @__PURE__ */ jsx17(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronLeft", onClick: () => goToMonth(addYears(displayMonth, -1)) }),
-      /* @__PURE__ */ jsx17("h1", { className: "fw4 fz_16px lh_24px", children: format(displayMonth, "yyyy") }),
+      /* @__PURE__ */ jsx17("h1", { className: "fw4 fz_16px lh_24px", children: formatPlainDate(displayMonthDate, "year") }),
       /* @__PURE__ */ jsx17(IconButton, { color: "rgba(100, 100, 100, 1)" /* Gray700 */, icon: "chevronRight", onClick: () => goToMonth(addYears(displayMonth, 1)) })
     ] })
   ] });
 }
 
 // src/components/internal/DatePicker/WeekHeader.tsx
-import { addDays, format as format2, startOfWeek } from "date-fns";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function WeekHeader() {
-  const start = startOfWeek(/* @__PURE__ */ new Date());
+  const today = todayPlainDate();
+  const start = today.subtract({
+    days: today.dayOfWeek % 7
+  });
   const days = [];
   for (let i = 0; i < 7; i++) {
-    days.push(addDays(start, i));
+    days.push(start.add({
+      days: i
+    }));
   }
   return /* @__PURE__ */ jsx18("thead", { className: "rdp-head", children: /* @__PURE__ */ jsx18("tr", { className: "rdp-head_row", children: days.map((day) => /* @__PURE__ */ jsxs11("th", { scope: "col", className: "pt1 pb_12px pr1 pl1 fw4 fz_12px lh_16px gray400", children: [
-    /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", children: format2(day, "EEEEE") }),
-    /* @__PURE__ */ jsx18("span", { className: "rdp-vhidden", children: format2(day, "EEEE") })
-  ] }, format2(day, "EEEE"))) }) });
-}
-
-// src/utils/plainDate.ts
-import { Temporal } from "temporal-polyfill";
-function plainDateToJsDate(date) {
-  return new Date(date.year, date.month - 1, date.day, 12);
-}
-function jsDateToPlainDate(date) {
-  return new Temporal.PlainDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
-}
-function dateRangeToJsDateRange(range) {
-  if (!range) return void 0;
-  return {
-    from: range.from ? plainDateToJsDate(range.from) : void 0,
-    to: range.to ? plainDateToJsDate(range.to) : void 0
-  };
-}
-function jsDateRangeToDateRange(range) {
-  if (!range) return void 0;
-  return {
-    from: range.from ? jsDateToPlainDate(range.from) : void 0,
-    to: range.to ? jsDateToPlainDate(range.to) : void 0
-  };
-}
-function dayMatcherToDayPickerMatcher(matcher) {
-  return (date) => matcher(jsDateToPlainDate(date));
-}
-function dayMatchersToDayPickerMatchers(matchers) {
-  if (matchers === void 0) return void 0;
-  return Array.isArray(matchers) ? matchers.map(dayMatcherToDayPickerMatcher) : dayMatcherToDayPickerMatcher(matchers);
-}
-function todayPlainDate() {
-  return Temporal.Now.plainDateISO();
-}
-function isPlainDate(value) {
-  return value instanceof Temporal.PlainDate;
-}
-function parsePersistedPlainDate(value) {
-  if (isPlainDate(value)) return value;
-  if (value instanceof Date && !Number.isNaN(value.getTime())) {
-    return jsDateToPlainDate(value);
-  }
-  if (typeof value !== "string") return void 0;
-  try {
-    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
-      return Temporal.PlainDate.from(value);
-    }
-  } catch {
-    return void 0;
-  }
-  const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? void 0 : jsDateToPlainDate(date);
-}
-function dehydratePlainDate(value) {
-  return value?.toString();
+    /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", children: formatPlainDate(day, "weekdayInitial") }),
+    /* @__PURE__ */ jsx18("span", { className: "rdp-vhidden", children: formatPlainDate(day, "weekday") })
+  ] }, formatPlainDate(day, "weekday"))) }) });
 }
 
 // src/components/internal/DatePicker/DatePicker.tsx
@@ -6273,9 +6325,9 @@ function DatePicker(props) {
         if (modifiers.disabled) return;
         onSelect(jsDateToPlainDate(day));
       },
-      disabled: dayMatchersToDayPickerMatchers(disabledDays),
+      disabled: dateMatchersToDayPickerMatchers(disabledDays),
       modifiers: {
-        indicatorDot: dayMatchersToDayPickerMatchers(dottedDays) ?? []
+        indicatorDot: dateMatchersToDayPickerMatchers(dottedDays) ?? []
       }
     }
   ) });
@@ -6309,8 +6361,8 @@ function DateRangePicker(props) {
   }, defaultMonth: plainDateToJsDate(range?.to ?? range?.from ?? todayPlainDate()), onSelect: (selection, day, activeModifiers) => {
     if (activeModifiers.disabled) return;
     onSelect(jsDateRangeToDateRange(selection));
-  }, disabled: dayMatchersToDayPickerMatchers(disabledDays), modifiers: {
-    indicatorDot: dayMatchersToDayPickerMatchers(dottedDays) ?? []
+  }, disabled: dateMatchersToDayPickerMatchers(disabledDays), modifiers: {
+    indicatorDot: dateMatchersToDayPickerMatchers(dottedDays) ?? []
   } }) });
 }
 
@@ -12134,69 +12186,36 @@ function CheckboxGroupItem(props) {
 }
 
 // src/inputs/DateFields/DateField.mock.tsx
-import { format as format3, parse } from "date-fns";
 import { useState as useState20 } from "react";
-import { jsx as jsx60 } from "react/jsx-runtime";
-function DateFieldMock(props) {
-  const { onChange = () => {
-  }, errorMsg, onBlur, onFocus } = props;
-  const [value, setValue] = useState20(props.value ? format3(plainDateToJsDate(props.value), "MM/dd/yy") : "");
-  const tid = useTestIds(props, "date");
-  return /* @__PURE__ */ jsx60(
-    "input",
-    {
-      ...tid,
-      "data-error": !!errorMsg,
-      value,
-      onChange: (e) => {
-        const { value: value2 } = e.target;
-        setValue(value2);
-        const parsed = parse(value2, "MM/dd/yy", plainDateToJsDate(todayPlainDate()));
-        onChange(Number.isNaN(parsed.getTime()) ? void 0 : jsDateToPlainDate(parsed));
-      },
-      onBlur: () => maybeCall(onBlur),
-      onFocus: () => maybeCall(onFocus),
-      disabled: !!props.disabled,
-      readOnly: !!props.readOnly,
-      "data-disabled-days": JSON.stringify(props.disabledDays)
-    }
-  );
-}
-
-// src/inputs/DateFields/DateFieldBase.tsx
-import { useCallback as useCallback11, useEffect as useEffect15, useRef as useRef27, useState as useState21 } from "react";
-import { FocusScope as FocusScope3, useButton as useButton8, useOverlayPosition as useOverlayPosition6, useOverlayTrigger, useTextField as useTextField2 } from "react-aria";
-import { useOverlayTriggerState } from "react-stately";
 
 // src/inputs/DateFields/utils.ts
-import { format as dateFnsFormat, parse as dateFnsParse, isDate } from "date-fns";
 import { Temporal as Temporal2 } from "temporal-polyfill";
 var dateFormats = {
-  short: "MM/dd/yy",
-  medium: "EEE, MMM d",
-  long: "EEEE LLLL d, uuuu"
+  short: "shortDate",
+  medium: "shortWeekdayMonthDay",
+  long: "longWeekdayMonthDayYear"
 };
-function getDateFormat(format4) {
-  return format4 ? dateFormats[format4] : dateFormats.short;
+function getDateFormat(format) {
+  return format ? dateFormats[format] : dateFormats.short;
 }
-function formatDate(date, format4) {
+function formatDate(date, format) {
   if (!date) return "";
-  return dateFnsFormat(plainDateToJsDate(date), format4);
+  return formatPlainDate(date, format);
 }
-function formatDateRange(date, format4) {
+function formatDateRange(date, format) {
   if (!date) return "";
   const { from, to } = date;
-  const fromFormatted = from ? dateFnsFormat(plainDateToJsDate(from), format4) : "";
-  const toFormatted = to ? dateFnsFormat(plainDateToJsDate(to), format4) : "";
+  const fromFormatted = from ? formatPlainDate(from, format) : "";
+  const toFormatted = to ? formatPlainDate(to, format) : "";
   return !fromFormatted && !toFormatted ? void 0 : `${fromFormatted} - ${toFormatted}`;
 }
-function parseDate(str, format4) {
-  return parseDateString(str, format4);
+function parseDate(str, format) {
+  return parseDateString(str, format);
 }
-function parseDateRange(str, format4) {
+function parseDateRange(str, format) {
   const [from = "", to = ""] = str.split("-");
-  const fromDate = parseDateString(from.trim(), format4);
-  const toDate = parseDateString(to.trim(), format4);
+  const fromDate = parseDateString(from.trim(), format);
+  const toDate = parseDateString(to.trim(), format);
   if (toDate && fromDate && Temporal2.PlainDate.compare(toDate, fromDate) < 0) {
     return { from: toDate, to: fromDate };
   }
@@ -12205,34 +12224,81 @@ function parseDateRange(str, format4) {
   }
   return { from: fromDate, to: toDate };
 }
-function parseDateString(str, format4) {
+function parseDateString(str, format) {
+  if (format !== dateFormats.short && format !== "date") {
+    return void 0;
+  }
   const split = str.split("/");
   if (split.length !== 3) {
     return void 0;
   }
-  if (split[2].length !== 2) {
+  const yearLength = format === dateFormats.short ? 2 : 4;
+  if (split[2].length !== yearLength) {
     return void 0;
   }
-  const month = parseInt(split[0], 10) - 1;
+  const month = parseInt(split[0], 10);
   const day = parseInt(split[1], 10);
   const year = parseInt(split[2], 10);
-  if (isNaN(year) || String(year).length > 4 || isNaN(month) || isNaN(day) || day <= 0 || day > 31 || month < 0 || month >= 12) {
+  if (Number.isNaN(year) || Number.isNaN(month) || Number.isNaN(day) || day <= 0 || day > 31 || month <= 0 || month > 12) {
     return void 0;
   }
-  const parsed = dateFnsParse(str, format4, plainDateToJsDate(todayPlainDate()));
-  if (!isValidJsDate(parsed)) {
+  try {
+    return Temporal2.PlainDate.from({
+      year: yearLength === 2 ? normalizeTwoDigitYear(year, todayPlainDate().year) : year,
+      month,
+      day
+    });
+  } catch {
     return void 0;
   }
-  return jsDateToPlainDate(parsed);
 }
 function isValidDate(d) {
   return d !== void 0 && isPlainDate(d);
 }
-function isValidJsDate(d) {
-  return d !== void 0 && isDate(d) && d.toString() !== "Invalid Date";
+function normalizeTwoDigitYear(twoDigitYear, currentYear) {
+  const isCommonEra = currentYear > 0;
+  const absCurrentYear = isCommonEra ? currentYear : 1 - currentYear;
+  if (absCurrentYear <= 50) {
+    return isCommonEra ? twoDigitYear || 100 : 1 - (twoDigitYear || 100);
+  }
+  const rangeEnd = absCurrentYear + 50;
+  const rangeEndCentury = Math.floor(rangeEnd / 100) * 100;
+  const isPreviousCentury = twoDigitYear >= rangeEnd % 100;
+  const normalizedYear = twoDigitYear + rangeEndCentury - (isPreviousCentury ? 100 : 0);
+  return isCommonEra ? normalizedYear : 1 - normalizedYear;
+}
+
+// src/inputs/DateFields/DateField.mock.tsx
+import { jsx as jsx60 } from "react/jsx-runtime";
+function DateFieldMock(props) {
+  const { onChange = () => {
+  }, errorMsg, onBlur, onFocus } = props;
+  const [value, setValue] = useState20(formatDate(props.value, dateFormats.short));
+  const tid = useTestIds(props, "date");
+  return /* @__PURE__ */ jsx60(
+    "input",
+    {
+      ...tid,
+      "data-error": !!errorMsg,
+      value,
+      onChange: (e) => {
+        const { value: value2 } = e.target;
+        setValue(value2);
+        onChange(parseDate(value2, dateFormats.short));
+      },
+      onBlur: () => maybeCall(onBlur),
+      onFocus: () => maybeCall(onFocus),
+      disabled: !!props.disabled,
+      readOnly: !!props.readOnly,
+      "data-disabled-days": JSON.stringify(props.disabledDays)
+    }
+  );
 }
 
 // src/inputs/DateFields/DateFieldBase.tsx
+import { useCallback as useCallback11, useEffect as useEffect15, useRef as useRef27, useState as useState21 } from "react";
+import { FocusScope as FocusScope3, useButton as useButton8, useOverlayPosition as useOverlayPosition6, useOverlayTrigger, useTextField as useTextField2 } from "react-aria";
+import { useOverlayTriggerState } from "react-stately";
 import { trussProps as trussProps41 } from "@homebound/truss/runtime";
 import { Fragment as Fragment18, jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
 function DateFieldBase(props) {
@@ -12248,7 +12314,7 @@ function DateFieldBase(props) {
     errorMsg,
     helperText,
     readOnly,
-    format: format4 = "short",
+    format = "short",
     iconLeft = false,
     hideCalendarIcon = false,
     disabledDays,
@@ -12265,7 +12331,7 @@ function DateFieldBase(props) {
   const buttonRef = useRef27(null);
   const overlayRef = useRef27(null);
   const isFocused = useRef27(false);
-  const dateFormat = getDateFormat(format4);
+  const dateFormat = getDateFormat(format);
   const [wipValue, setWipValue] = useState21(value);
   const [inputValue, setInputValue] = useState21((isRangeMode ? formatDateRange(props.value, dateFormat) : formatDate(props.value, dateFormat)) ?? "");
   const tid = useTestIds(props, defaultTestId(label));
@@ -12363,7 +12429,11 @@ function DateFieldBase(props) {
           return;
         }
       } else {
-        props.onChange(void 0);
+        if (isRangeMode) {
+          props.onChange(void 0);
+        } else {
+          props.onChange(void 0);
+        }
         return;
       }
     },
@@ -12371,7 +12441,7 @@ function DateFieldBase(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [isRangeMode, props.onChange]
   );
-  const inputSize = !isRangeMode ? format4 === "short" ? 8 : format4 === "medium" ? 10 : void 0 : void 0;
+  const inputSize = !isRangeMode ? format === "short" ? 8 : format === "medium" ? 10 : void 0 : void 0;
   const clearButton = /* @__PURE__ */ jsx61(Fragment18, { children: inputValue !== "" && !state.isOpen && /* @__PURE__ */ jsx61(IconButton, { icon: "xCircle", color: "rgba(100, 100, 100, 1)" /* Gray700 */, onClick: () => {
     setInputValue("");
     onChange(void 0);
@@ -18479,7 +18549,7 @@ var DateFilter = class extends BaseFilter {
     return value ? { op: value.op, value: dehydratePlainDate(value.value) } : void 0;
   }
   render(value, setValue, tid, inModal, vertical) {
-    const { label, operations, getOperationValue, getOperationLabel } = this.props;
+    const { label, operations, getOperationValue, getOperationLabel, defaultValue } = this.props;
     return /* @__PURE__ */ jsxs65(Fragment28, { children: [
       vertical && /* @__PURE__ */ jsx127(Label, { label }),
       /* @__PURE__ */ jsxs65(CompoundField, { children: [
@@ -18496,8 +18566,8 @@ var DateFilter = class extends BaseFilter {
             getOptionLabel: (o) => o === anyOption ? "Any" : getOperationLabel(o),
             value: value?.op,
             onSelect: (op) => (
-              // default the selected date to today if it doesn't exist in the filter's value
-              setValue(op ? { op, value: value?.value ?? todayPlainDate() } : void 0)
+              // default the selected date to the filter's default date or today if it doesn't exist in the filter's value
+              setValue(op ? { op, value: value?.value ?? defaultValue?.value ?? todayPlainDate() } : void 0)
             ),
             label: inModal ? `${label} date filter operation` : label,
             labelStyle: !inModal && !vertical ? "inline" : inModal || vertical ? "hidden" : "above",
@@ -18509,7 +18579,7 @@ var DateFilter = class extends BaseFilter {
           DateField,
           {
             labelStyle: "inline",
-            value: value?.value ?? todayPlainDate(),
+            value: value?.value ?? defaultValue?.value ?? todayPlainDate(),
             label: "Date",
             onChange: (d) => {
               if (d && value) {
@@ -21787,6 +21857,7 @@ export {
   filterTestIdPrefix,
   formatDate,
   formatDateRange,
+  formatPlainDate,
   formatValue,
   generateColumnId,
   getAlignment,