@homebound/beam 3.0.6 → 3.1.0-alpha.1

package/dist/index.cjs

@@ -5890,24 +5890,47 @@ function useHover2(props) {
 var import_react16 = require("react");
 var import_use_query_params2 = require("use-query-params");
 function usePersistedFilter({ storageKey, filterDefs }) {
-  const filterKeys = Object.keys(filterDefs);
+  const filterImpls = (0, import_react16.useMemo)(
+    () => Object.fromEntries(safeEntries(filterDefs).map(([key, def]) => [key, def(key)])),
+    [filterDefs]
+  );
+  const filterKeys = (0, import_react16.useMemo)(() => Object.keys(filterImpls), [filterImpls]);
   const defaultFilter = (0, import_react16.useMemo)(
     () => Object.fromEntries(
-      safeEntries(filterDefs).filter(([key, def]) => def(key).defaultValue !== void 0).map(([key, def]) => [key, def(key).defaultValue])
+      safeEntries(filterImpls).filter(([, def]) => def.defaultValue !== void 0).map(([key, def]) => [key, def.defaultValue])
     ),
-    [filterDefs]
+    [filterImpls]
   );
   const [{ filter: queryParamsFilter }, setQueryParams] = (0, import_use_query_params2.useQueryParams)({ filter: import_use_query_params2.JsonParam });
-  const [storedFilter, setStoredFilter] = useSessionStorage(storageKey, queryParamsFilter ?? defaultFilter);
+  const [storedFilter, setStoredFilter] = useSessionStorage(
+    storageKey,
+    dehydrateFilter(filterImpls, defaultFilter) ?? defaultFilter
+  );
   const isQueryParamFilterValid = hasValidFilterKeys(queryParamsFilter, filterKeys);
-  const filter = isQueryParamFilterValid ? queryParamsFilter : storedFilter ?? defaultFilter;
-  const setFilter = (filter2) => setQueryParams({ filter: filter2 });
+  const serializedQueryParamsFilter = (0, import_react16.useMemo)(() => JSON.stringify(queryParamsFilter), [queryParamsFilter]);
+  const serializedStoredFilter = (0, import_react16.useMemo)(() => JSON.stringify(storedFilter), [storedFilter]);
+  const queryParamsFilterSnapshot = (0, import_react16.useMemo)(
+    () => parseSerializedValue(serializedQueryParamsFilter),
+    [serializedQueryParamsFilter]
+  );
+  const storedFilterSnapshot = (0, import_react16.useMemo)(() => parseSerializedValue(serializedStoredFilter), [serializedStoredFilter]);
+  const hydratedQueryParamsFilter = (0, import_react16.useMemo)(
+    () => isQueryParamFilterValid ? hydrateFilter(filterImpls, queryParamsFilterSnapshot) : void 0,
+    [filterImpls, isQueryParamFilterValid, queryParamsFilterSnapshot]
+  );
+  const hydratedStoredFilter = (0, import_react16.useMemo)(
+    () => hasValidFilterKeys(storedFilterSnapshot, filterKeys) ? hydrateFilter(filterImpls, storedFilterSnapshot) : void 0,
+    [filterImpls, filterKeys, storedFilterSnapshot]
+  );
+  const rawFilter = hydratedQueryParamsFilter ?? hydratedStoredFilter ?? defaultFilter;
+  const filter = useStableValue(rawFilter);
+  const setFilter = (filter2) => setQueryParams({ filter: dehydrateFilter(filterImpls, filter2) });
   (0, import_react16.useEffect)(
     () => {
       if (queryParamsFilter === void 0) {
         setQueryParams({ filter: storedFilter }, "replaceIn");
       } else if (!isQueryParamFilterValid) {
-        setQueryParams({ filter: defaultFilter }, "replaceIn");
+        setQueryParams({ filter: dehydrateFilter(filterImpls, defaultFilter) }, "replaceIn");
       } else if (JSON.stringify(queryParamsFilter) !== JSON.stringify(storedFilter)) {
         setStoredFilter(queryParamsFilter);
       }
@@ -5919,7 +5942,45 @@ function usePersistedFilter({ storageKey, filterDefs }) {
   return { setFilter, filter };
 }
 function hasValidFilterKeys(queryParamsFilter, definedKeys) {
-  return queryParamsFilter && safeKeys(queryParamsFilter).every((key) => definedKeys.includes(key));
+  return !!queryParamsFilter && safeKeys(queryParamsFilter).every((key) => definedKeys.includes(key));
+}
+function hydrateFilter(filterImpls, value) {
+  if (typeof value !== "object" || value === null) return void 0;
+  const hydratedEntries = [];
+  safeEntries(value).forEach(([key, rawValue]) => {
+    const filter = filterImpls[key];
+    if (!filter) return;
+    const hydratedValue = filter.hydrate ? filter.hydrate(rawValue) : rawValue;
+    if (hydratedValue !== void 0) {
+      hydratedEntries.push([key, hydratedValue]);
+    }
+  });
+  return Object.fromEntries(hydratedEntries);
+}
+function dehydrateFilter(filterImpls, value) {
+  if (!value) return value;
+  return Object.fromEntries(
+    safeEntries(value).map(([key, rawValue]) => {
+      const filter = filterImpls[key];
+      return [
+        key,
+        filter?.dehydrate ? filter.dehydrate(rawValue) : rawValue
+      ];
+    })
+  );
+}
+function parseSerializedValue(value) {
+  return value === void 0 ? void 0 : JSON.parse(value);
+}
+function useStableValue(value) {
+  const stableValue = (0, import_react16.useRef)(value);
+  const stableKey = (0, import_react16.useRef)(JSON.stringify(value));
+  const nextKey = JSON.stringify(value);
+  if (stableKey.current !== nextKey) {
+    stableValue.current = value;
+    stableKey.current = nextKey;
+  }
+  return stableValue.current;
 }
 
 // src/hooks/useSessionStorage.ts
@@ -6537,6 +6598,61 @@ function WeekHeader() {
   ] }, (0, import_date_fns2.format)(day, "EEEE"))) }) });
 }
 
+// src/utils/plainDate.ts
+var import_temporal_polyfill = require("temporal-polyfill");
+function plainDateToJsDate(date) {
+  return new Date(date.year, date.month - 1, date.day, 12);
+}
+function jsDateToPlainDate(date) {
+  return new import_temporal_polyfill.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 import_temporal_polyfill.Temporal.Now.plainDateISO();
+}
+function isPlainDate(value) {
+  return value instanceof import_temporal_polyfill.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 import_temporal_polyfill.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();
+}
+
 // src/components/internal/DatePicker/DatePicker.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function DatePicker(props) {
@@ -6556,15 +6672,15 @@ function DatePicker(props) {
         Head: WeekHeader,
         Day
       },
-      selected: value ? [value] : [],
-      defaultMonth: value ?? /* @__PURE__ */ new Date(),
+      selected: value ? [plainDateToJsDate(value)] : [],
+      defaultMonth: plainDateToJsDate(value ?? todayPlainDate()),
       onDayClick: (day, modifiers) => {
         if (modifiers.disabled) return;
-        onSelect(day);
+        onSelect(jsDateToPlainDate(day));
       },
-      disabled: disabledDays,
+      disabled: dayMatchersToDayPickerMatchers(disabledDays),
       modifiers: {
-        indicatorDot: dottedDays ?? []
+        indicatorDot: dayMatchersToDayPickerMatchers(dottedDays) ?? []
       }
     }
   ) });
@@ -6591,15 +6707,15 @@ function DateRangePicker(props) {
     useYearPicker
   } = props;
   const tid = useTestIds(props, "datePicker");
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "dib bgWhite fw4 fz_12px lh_16px", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_day_picker4.DayPicker, { mode: "range", selected: range, components: {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "dib bgWhite fw4 fz_12px lh_16px", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_day_picker4.DayPicker, { mode: "range", selected: dateRangeToJsDateRange(range), components: {
     Caption: useYearPicker ? YearSkipHeader : Header,
     Head: WeekHeader,
     Day
-  }, defaultMonth: range?.to ?? /* @__PURE__ */ new Date(), onSelect: (selection, day, activeModifiers) => {
+  }, defaultMonth: plainDateToJsDate(range?.to ?? range?.from ?? todayPlainDate()), onSelect: (selection, day, activeModifiers) => {
     if (activeModifiers.disabled) return;
-    onSelect(selection);
-  }, disabled: disabledDays, modifiers: {
-    indicatorDot: dottedDays ?? []
+    onSelect(jsDateRangeToDateRange(selection));
+  }, disabled: dayMatchersToDayPickerMatchers(disabledDays), modifiers: {
+    indicatorDot: dayMatchersToDayPickerMatchers(dottedDays) ?? []
   } }) });
 }
 
@@ -12429,7 +12545,7 @@ var import_jsx_runtime60 = require("react/jsx-runtime");
 function DateFieldMock(props) {
   const { onChange = () => {
   }, errorMsg, onBlur, onFocus } = props;
-  const [value, setValue] = (0, import_react50.useState)(props.value ? (0, import_date_fns3.format)(props.value, "MM/dd/yy") : "");
+  const [value, setValue] = (0, import_react50.useState)(props.value ? (0, import_date_fns3.format)(plainDateToJsDate(props.value), "MM/dd/yy") : "");
   const tid = useTestIds(props, "date");
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "input",
@@ -12440,7 +12556,8 @@ function DateFieldMock(props) {
       onChange: (e) => {
         const { value: value2 } = e.target;
         setValue(value2);
-        onChange((0, import_date_fns3.parse)(value2, "MM/dd/yy", /* @__PURE__ */ new Date()));
+        const parsed = (0, import_date_fns3.parse)(value2, "MM/dd/yy", plainDateToJsDate(todayPlainDate()));
+        onChange(Number.isNaN(parsed.getTime()) ? void 0 : jsDateToPlainDate(parsed));
       },
       onBlur: () => maybeCall(onBlur),
       onFocus: () => maybeCall(onFocus),
@@ -12454,11 +12571,11 @@ function DateFieldMock(props) {
 // src/inputs/DateFields/DateFieldBase.tsx
 var import_react51 = require("react");
 var import_react_aria31 = require("react-aria");
-var import_react_day_picker5 = require("react-day-picker");
 var import_react_stately10 = require("react-stately");
 
 // src/inputs/DateFields/utils.ts
 var import_date_fns4 = require("date-fns");
+var import_temporal_polyfill2 = require("temporal-polyfill");
 var dateFormats = {
   short: "MM/dd/yy",
   medium: "EEE, MMM d",
@@ -12469,13 +12586,13 @@ function getDateFormat(format4) {
 }
 function formatDate(date, format4) {
   if (!date) return "";
-  return (0, import_date_fns4.format)(date, format4);
+  return (0, import_date_fns4.format)(plainDateToJsDate(date), format4);
 }
 function formatDateRange(date, format4) {
   if (!date) return "";
   const { from, to } = date;
-  const fromFormatted = from ? (0, import_date_fns4.format)(from, format4) : "";
-  const toFormatted = to ? (0, import_date_fns4.format)(to, format4) : "";
+  const fromFormatted = from ? (0, import_date_fns4.format)(plainDateToJsDate(from), format4) : "";
+  const toFormatted = to ? (0, import_date_fns4.format)(plainDateToJsDate(to), format4) : "";
   return !fromFormatted && !toFormatted ? void 0 : `${fromFormatted} - ${toFormatted}`;
 }
 function parseDate(str, format4) {
@@ -12485,7 +12602,7 @@ function parseDateRange(str, format4) {
   const [from = "", to = ""] = str.split("-");
   const fromDate = parseDateString(from.trim(), format4);
   const toDate = parseDateString(to.trim(), format4);
-  if (toDate && fromDate && toDate < fromDate) {
+  if (toDate && fromDate && import_temporal_polyfill2.Temporal.PlainDate.compare(toDate, fromDate) < 0) {
     return { from: toDate, to: fromDate };
   }
   if (toDate === void 0 && fromDate === void 0) {
@@ -12507,13 +12624,16 @@ function parseDateString(str, format4) {
   if (isNaN(year) || String(year).length > 4 || isNaN(month) || isNaN(day) || day <= 0 || day > 31 || month < 0 || month >= 12) {
     return void 0;
   }
-  const parsed = (0, import_date_fns4.parse)(str, format4, /* @__PURE__ */ new Date());
-  if (!isValidDate(parsed)) {
+  const parsed = (0, import_date_fns4.parse)(str, format4, plainDateToJsDate(todayPlainDate()));
+  if (!isValidJsDate(parsed)) {
     return void 0;
   }
-  return parsed;
+  return jsDateToPlainDate(parsed);
 }
 function isValidDate(d) {
+  return d !== void 0 && isPlainDate(d);
+}
+function isValidJsDate(d) {
   return d !== void 0 && (0, import_date_fns4.isDate)(d) && d.toString() !== "Invalid Date";
 }
 
@@ -12639,11 +12759,11 @@ function DateFieldBase(props) {
     (d) => {
       setWipValue(d);
       if (d && isParsedDateValid(d)) {
-        if (isRangeMode && (0, import_react_day_picker5.isDateRange)(d)) {
+        if (isRangeMode && isDateRangeValue(d)) {
           props.onChange(d);
           return;
         }
-        if (!isRangeMode && !(0, import_react_day_picker5.isDateRange)(d)) {
+        if (!isRangeMode && !isDateRangeValue(d)) {
           props.onChange(d);
           return;
         }
@@ -12718,7 +12838,10 @@ function DateFieldBase(props) {
   ] });
 }
 function isParsedDateValid(d) {
-  return d !== void 0 && (!(0, import_react_day_picker5.isDateRange)(d) || (0, import_react_day_picker5.isDateRange)(d) && isValidDate(d.from) && isValidDate(d.to));
+  return d !== void 0 && (!isDateRangeValue(d) || isValidDate(d.from) && isValidDate(d.to));
+}
+function isDateRangeValue(value) {
+  return typeof value === "object" && value !== null && ("from" in value || "to" in value);
 }
 
 // src/utils/withTestMock.tsx
@@ -18752,6 +18875,14 @@ function dateFilter(props) {
 }
 var anyOption = {};
 var DateFilter = class extends BaseFilter {
+  hydrate(value) {
+    if (!isDateFilterValue(value)) return void 0;
+    const hydratedValue = parsePersistedPlainDate(value.value);
+    return hydratedValue ? { op: value.op, value: hydratedValue } : void 0;
+  }
+  dehydrate(value) {
+    return value ? { op: value.op, value: dehydratePlainDate(value.value) } : void 0;
+  }
   render(value, setValue, tid, inModal, vertical) {
     const { label, operations, getOperationValue, getOperationLabel } = this.props;
     return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
@@ -18771,7 +18902,7 @@ var DateFilter = class extends BaseFilter {
             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 ? new Date(value.value) : /* @__PURE__ */ new Date() } : void 0)
+              setValue(op ? { op, value: value?.value ?? todayPlainDate() } : void 0)
             ),
             label: inModal ? `${label} date filter operation` : label,
             labelStyle: !inModal && !vertical ? "inline" : inModal || vertical ? "hidden" : "above",
@@ -18783,9 +18914,13 @@ var DateFilter = class extends BaseFilter {
           DateField,
           {
             labelStyle: "inline",
-            value: value?.value ? new Date(value.value) : /* @__PURE__ */ new Date(),
+            value: value?.value ?? todayPlainDate(),
             label: "Date",
-            onChange: (d) => setValue({ ...value, value: d }),
+            onChange: (d) => {
+              if (d && value) {
+                setValue({ ...value, value: d });
+              }
+            },
             disabled: !value,
             ...tid[`${defaultTestId(this.label)}_dateField`]
           }
@@ -18794,6 +18929,9 @@ var DateFilter = class extends BaseFilter {
     ] });
   }
 };
+function isDateFilterValue(value) {
+  return typeof value === "object" && value !== null && "op" in value && "value" in value;
+}
 
 // src/components/Filters/DateRangeFilter.tsx
 var import_jsx_runtime128 = require("react/jsx-runtime");
@@ -18801,6 +18939,17 @@ function dateRangeFilter(props) {
   return (key) => new DateRangeFilter(key, props);
 }
 var DateRangeFilter = class extends BaseFilter {
+  hydrate(value) {
+    if (!isDateRangeFilterValue(value)) return void 0;
+    const hydratedValue = hydrateDateRange(value.value);
+    return hydratedValue ? { op: value.op, value: hydratedValue } : void 0;
+  }
+  dehydrate(value) {
+    return value ? {
+      op: value.op,
+      value: value.value ? { from: dehydratePlainDate(value.value.from), to: dehydratePlainDate(value.value.to) } : void 0
+    } : void 0;
+  }
   render(value, setValue, tid, inModal, vertical) {
     const { label, placeholderText, disabledDays, testFieldLabel, defaultValue } = this.props;
     return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
@@ -18812,8 +18961,17 @@ var DateRangeFilter = class extends BaseFilter {
           isRangeFilterField: true,
           placeholder: placeholderText,
           label: testFieldLabel ?? "Date",
-          value: value?.value ? { from: new Date(value.value.from), to: new Date(value.value.to) } : void 0,
-          onChange: (d) => d ? setValue({ op: defaultValue?.op, value: d }) : setValue(void 0),
+          value: value?.value,
+          onChange: (d) => {
+            if (!d) {
+              setValue(void 0);
+              return;
+            }
+            const op = value?.op ?? defaultValue?.op;
+            if (op !== void 0) {
+              setValue({ op, value: d });
+            }
+          },
           disabledDays,
           ...tid[`${defaultTestId(this.label)}_dateField`]
         }
@@ -18821,6 +18979,17 @@ var DateRangeFilter = class extends BaseFilter {
     ] });
   }
 };
+function isDateRangeFilterValue(value) {
+  return typeof value === "object" && value !== null && "op" in value && "value" in value;
+}
+function hydrateDateRange(value) {
+  if (typeof value !== "object" || value === null) return void 0;
+  const { from, to } = value;
+  const hydratedFrom = parsePersistedPlainDate(from);
+  const hydratedTo = parsePersistedPlainDate(to);
+  if (hydratedFrom === void 0 && hydratedTo === void 0) return void 0;
+  return { from: hydratedFrom, to: hydratedTo };
+}
 
 // src/components/Filters/MultiFilter.tsx
 var import_jsx_runtime129 = require("react/jsx-runtime");
@@ -19626,10 +19795,10 @@ function useGridTableLayoutState({
   });
   (0, import_react99.useEffect)(() => {
     if (page.limit !== persistedPageSize) setPersistedPageSize(page.limit);
-    setPage((prev) => ({
+    setPage((prev) => prev.offset === 0 ? prev : {
       ...prev,
       offset: 0
-    }));
+    });
   }, [page.limit, persistedPageSize, setPersistedPageSize, filter, searchString]);
   return {
     filter,