@homebound/beam 3.1.0-alpha.1 → 3.1.0

package/dist/index.cjs

@@ -5890,47 +5890,24 @@ function useHover2(props) {
 var import_react16 = require("react");
 var import_use_query_params2 = require("use-query-params");
 function usePersistedFilter({ storageKey, 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 filterKeys = Object.keys(filterDefs);
   const defaultFilter = (0, import_react16.useMemo)(
     () => Object.fromEntries(
-      safeEntries(filterImpls).filter(([, def]) => def.defaultValue !== void 0).map(([key, def]) => [key, def.defaultValue])
+      safeEntries(filterDefs).filter(([key, def]) => def(key).defaultValue !== void 0).map(([key, def]) => [key, def(key).defaultValue])
     ),
-    [filterImpls]
+    [filterDefs]
   );
   const [{ filter: queryParamsFilter }, setQueryParams] = (0, import_use_query_params2.useQueryParams)({ filter: import_use_query_params2.JsonParam });
-  const [storedFilter, setStoredFilter] = useSessionStorage(
-    storageKey,
-    dehydrateFilter(filterImpls, defaultFilter) ?? defaultFilter
-  );
+  const [storedFilter, setStoredFilter] = useSessionStorage(storageKey, queryParamsFilter ?? defaultFilter);
   const isQueryParamFilterValid = hasValidFilterKeys(queryParamsFilter, filterKeys);
-  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) });
+  const filter = isQueryParamFilterValid ? queryParamsFilter : storedFilter ?? defaultFilter;
+  const setFilter = (filter2) => setQueryParams({ filter: filter2 });
   (0, import_react16.useEffect)(
     () => {
       if (queryParamsFilter === void 0) {
         setQueryParams({ filter: storedFilter }, "replaceIn");
       } else if (!isQueryParamFilterValid) {
-        setQueryParams({ filter: dehydrateFilter(filterImpls, defaultFilter) }, "replaceIn");
+        setQueryParams({ filter: defaultFilter }, "replaceIn");
       } else if (JSON.stringify(queryParamsFilter) !== JSON.stringify(storedFilter)) {
         setStoredFilter(queryParamsFilter);
       }
@@ -5942,45 +5919,7 @@ function usePersistedFilter({ storageKey, filterDefs }) {
   return { setFilter, filter };
 }
 function hasValidFilterKeys(queryParamsFilter, definedKeys) {
-  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;
+  return queryParamsFilter && safeKeys(queryParamsFilter).every((key) => definedKeys.includes(key));
 }
 
 // src/hooks/useSessionStorage.ts
@@ -6598,61 +6537,6 @@ 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) {
@@ -6672,15 +6556,15 @@ function DatePicker(props) {
         Head: WeekHeader,
         Day
       },
-      selected: value ? [plainDateToJsDate(value)] : [],
-      defaultMonth: plainDateToJsDate(value ?? todayPlainDate()),
+      selected: value ? [value] : [],
+      defaultMonth: value ?? /* @__PURE__ */ new Date(),
       onDayClick: (day, modifiers) => {
         if (modifiers.disabled) return;
-        onSelect(jsDateToPlainDate(day));
+        onSelect(day);
       },
-      disabled: dayMatchersToDayPickerMatchers(disabledDays),
+      disabled: disabledDays,
       modifiers: {
-        indicatorDot: dayMatchersToDayPickerMatchers(dottedDays) ?? []
+        indicatorDot: dottedDays ?? []
       }
     }
   ) });
@@ -6707,15 +6591,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: dateRangeToJsDateRange(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: range, components: {
     Caption: useYearPicker ? YearSkipHeader : Header,
     Head: WeekHeader,
     Day
-  }, defaultMonth: plainDateToJsDate(range?.to ?? range?.from ?? todayPlainDate()), onSelect: (selection, day, activeModifiers) => {
+  }, defaultMonth: range?.to ?? /* @__PURE__ */ new Date(), onSelect: (selection, day, activeModifiers) => {
     if (activeModifiers.disabled) return;
-    onSelect(jsDateRangeToDateRange(selection));
-  }, disabled: dayMatchersToDayPickerMatchers(disabledDays), modifiers: {
-    indicatorDot: dayMatchersToDayPickerMatchers(dottedDays) ?? []
+    onSelect(selection);
+  }, disabled: disabledDays, modifiers: {
+    indicatorDot: dottedDays ?? []
   } }) });
 }
 
@@ -11068,7 +10952,8 @@ function TreeOption(props) {
   const {
     collapsedKeys,
     setCollapsedKeys,
-    getOptionValue
+    getOptionValue,
+    groupKeys
   } = useTreeSelectFieldProvider();
   const {
     optionProps,
@@ -11080,6 +10965,12 @@ function TreeOption(props) {
     shouldSelectOnPressUp: true,
     shouldFocusOnHover: false
   }, state, ref);
+  const isGroup = groupKeys.includes(item.key);
+  const canCollapse = allowCollapsing && !!option.children?.length;
+  function toggleCollapsed() {
+    if (!canCollapse) return;
+    setCollapsedKeys((prevKeys) => collapsedKeys.includes(item.key) ? prevKeys.filter((k) => k !== item.key) : [...prevKeys, item.key]);
+  }
   const isIndeterminate = !isSelected && option.children?.some((o) => hasSelectedChildren(o, state, getOptionValue));
   const listItemStyles = {
     item: {
@@ -11107,7 +10998,12 @@ function TreeOption(props) {
       }]
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("li", { ...hoverProps, ...(0, import_runtime36.trussProps)({
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("li", { ...hoverProps, onClick: (e) => {
+    if (!isGroup) return;
+    e.preventDefault();
+    e.stopPropagation();
+    toggleCollapsed();
+  }, ...(0, import_runtime36.trussProps)({
     ...{
       display: "df",
       alignItems: "aic",
@@ -11124,18 +11020,18 @@ function TreeOption(props) {
       lineHeight: "lh_20px"
     },
     ...listItemStyles.item,
-    ...isHovered && !isDisabled ? listItemStyles.hover : {},
-    ...isFocused ? listItemStyles.focus : {},
-    ...isDisabled ? listItemStyles.disabled : {}
+    ...isHovered && (!isDisabled || isGroup) ? listItemStyles.hover : {},
+    ...isFocused && !isGroup ? listItemStyles.focus : {},
+    ...isDisabled && !isGroup ? listItemStyles.disabled : {}
   }), children: [
-    allowCollapsing && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "w_18px fs0 df aic", children: option.children && option.children?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("button", { onClick: (e) => {
+    allowCollapsing && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "w_18px fs0 df aic", children: canCollapse && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("button", { onClick: (e) => {
       e.preventDefault();
       e.stopPropagation();
-      setCollapsedKeys((prevKeys) => collapsedKeys.includes(item.key) ? prevKeys.filter((k) => k !== item.key) : [...prevKeys, item.key]);
+      toggleCollapsed();
       return false;
     }, className: "br4 h_16px w_16px bgTransparent h_bgGray300", ...tid[`collapseToggle_${item.key}`], children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { icon: collapsedKeys.includes(item.key) ? "triangleRight" : "triangleDown", inc: 2 }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "df aic gap1 h100 fg1 pt1 pb1 pr2", ref, ...optionProps, "data-label": item.textValue, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(StyledCheckbox, { isDisabled, isSelected, isIndeterminate, ...tid[item.key.toString()] }),
+      !isGroup && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(StyledCheckbox, { isDisabled, isSelected, isIndeterminate, ...tid[item.key.toString()] }),
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "pl1", children: item.rendered })
     ] })
   ] });
@@ -11218,9 +11114,14 @@ function VirtualizedOptions(props) {
       totalListHeightChanged: onListHeightChange,
       totalCount: items.length,
       ...process.env.NODE_ENV === "test" ? {
-        // We don't really need to set this, but it's handy for tests, which would
-        // otherwise render just 1 row. A better way to do this would be to jest.mock
-        // out Virtuoso with an impl that just rendered everything, but doing this for now.
+        // In tests, we render all rows so assertions can see expands/async-loaded items. However,
+        // the `initialItemCount` (next prop) is only applied on amount, so we set `key={items.length}`
+        // to force a remount when our list changes -- and we only want/need this in tests, b/c otherwise
+        // in production a Virtuoso remount causes visible flashing.
+        key: items.length,
+        // We don't really need to set this, but it's handy for tests, which would otherwise render
+        // just 1 row. A better way to do this would be to jest.mock out Virtuoso with an impl that
+        // just rendered everything, but doing this for now.
         initialItemCount: items.length
       } : {
         // Ensure the selected item is visible when the list renders
@@ -11260,8 +11161,7 @@ function VirtualizedOptions(props) {
       components: !loading ? {} : {
         Footer: typeof loading === "function" ? loading : () => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(LoadingDots, { contrast })
       }
-    },
-    items.length
+    }
   );
 }
 
@@ -11434,6 +11334,7 @@ function TreeSelectField(props) {
     ...otherProps
   } = props;
   const [collapsedKeys, setCollapsedKeys] = (0, import_react44.useState)([]);
+  const groupKeys = (0, import_react44.useMemo)(() => props.groupOptions?.map((option) => valueToKey(option)) ?? [], [props.groupOptions]);
   (0, import_react44.useEffect)(() => {
     setCollapsedKeys(!Array.isArray(options) ? [] : defaultCollapsed ? options.map((o) => getOptionValue(o)) : options.flatMap(flattenOptions).filter((o) => o.defaultCollapsed).map((o) => getOptionValue(o)));
   }, [options, defaultCollapsed]);
@@ -11441,11 +11342,12 @@ function TreeSelectField(props) {
     () => ({
       collapsedKeys,
       setCollapsedKeys,
-      getOptionValue
+      getOptionValue,
+      groupKeys
     }),
     // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [collapsedKeys, setCollapsedKeys]
+    [collapsedKeys, setCollapsedKeys, groupKeys]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CollapsedContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TreeSelectFieldBase, { ...otherProps, options, getOptionLabel, getOptionValue, values, onSelect: ({
     all,
@@ -11466,7 +11368,8 @@ var CollapsedContext = import_react44.default.createContext({
   collapsedKeys: [],
   setCollapsedKeys: () => {
   },
-  getOptionValue: () => ({})
+  getOptionValue: () => ({}),
+  groupKeys: []
 });
 function TreeSelectFieldBase(props) {
   const {
@@ -11485,13 +11388,15 @@ function TreeSelectFieldBase(props) {
     contrast = false,
     nothingSelectedText = "",
     onSelect,
-    defaultCollapsed = false,
+    defaultCollapsed: _defaultCollapsed = false,
     placeholder,
     fullWidth = fieldProps?.fullWidth ?? false,
     chipDisplay = "root",
     disabledOptions,
+    groupOptions: _groupOptions,
     ...otherProps
   } = props;
+  void _defaultCollapsed;
   const isDisabled = !!disabled;
   const isReadOnly = !!readOnly;
   const initialOptions = Array.isArray(options) ? options : options.current;
@@ -11503,7 +11408,10 @@ function TreeSelectFieldBase(props) {
   const {
     collapsedKeys
   } = useTreeSelectFieldProvider();
+  const groupKeys = (0, import_react44.useMemo)(() => _groupOptions?.map((option) => valueToKey(option)) ?? [], [_groupOptions]);
+  const groupKeySet = (0, import_react44.useMemo)(() => new Set(groupKeys), [groupKeys]);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
+  const disabledKeys = [.../* @__PURE__ */ new Set([...Object.keys(disabledOptionsWithReasons), ...groupKeys])];
   const initTreeFieldState = (0, import_react44.useCallback)(() => {
     const selectedKeys = new Set(values?.flatMap((v) => {
       const foundOptions = findOptions(initialOptions, valueToKey(v), getOptionValue);
@@ -11512,14 +11420,16 @@ function TreeSelectFieldBase(props) {
       }) => selectOptionAndAllChildren(option));
     }));
     function selectOptionAndAllChildren(maybeParent) {
-      return [valueToKey(getOptionValue(maybeParent)), ...maybeParent.children?.flatMap(selectOptionAndAllChildren) ?? []];
+      const key = valueToKey(getOptionValue(maybeParent));
+      return [...groupKeySet.has(key) ? [] : [key], ...maybeParent.children?.flatMap(selectOptionAndAllChildren) ?? []];
     }
     function areAllChildrenSelected(maybeParent) {
-      const isSelected = selectedKeys.has(valueToKey(getOptionValue(maybeParent)));
+      const key = valueToKey(getOptionValue(maybeParent));
+      const isSelected = selectedKeys.has(key);
       if (isSelected || !maybeParent.children || maybeParent.children.length === 0) return isSelected;
       const areAllSelected = maybeParent.children.every(areAllChildrenSelected);
-      if (areAllSelected) {
-        selectedKeys.add(valueToKey(getOptionValue(maybeParent)));
+      if (areAllSelected && !groupKeySet.has(key)) {
+        selectedKeys.add(key);
       }
       return areAllSelected;
     }
@@ -11530,18 +11440,17 @@ function TreeSelectFieldBase(props) {
       return [maybeOption.option];
     });
     const selectedOptionsLabels = chipDisplay === "root" ? initialOptions.flatMap((o) => getTopLevelSelections(o, selectedKeys, getOptionValue)).map(getOptionLabel) : chipDisplay === "leaf" ? selectedOptions.filter((o) => !o.children || o.children.length === 0).map(getOptionLabel) : selectedOptions.map(getOptionLabel);
-    const filteredOptions = initialOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue));
     return {
       selectedKeys: [...selectedKeys],
+      searchValue: void 0,
       inputValue: selectedOptions.length === 1 ? getOptionLabel([...selectedOptions][0]) : isReadOnly && selectedOptions.length > 0 ? selectedOptionsLabels.join(", ") : selectedOptions.length === 0 ? nothingSelectedText : "",
-      filteredOptions,
       selectedOptions,
       allOptions: initialOptions,
       selectedOptionsLabels,
       optionsLoading: false,
       allowCollapsing: true
     };
-  }, [initialOptions, values, chipDisplay, getOptionLabel, isReadOnly, nothingSelectedText, getOptionValue, collapsedKeys]);
+  }, [initialOptions, values, chipDisplay, getOptionLabel, isReadOnly, nothingSelectedText, getOptionValue, groupKeySet]);
   const [fieldState, setFieldState] = (0, import_react44.useState)(() => initTreeFieldState());
   (0, import_react44.useEffect)(() => {
     if (Array.isArray(options)) {
@@ -11561,75 +11470,54 @@ function TreeSelectFieldBase(props) {
       setFieldState(initTreeFieldState());
     }
   }, [getOptionValue, initTreeFieldState, values]);
-  const reactToCollapse = (0, import_react44.useRef)(false);
-  (0, import_react44.useEffect)(
-    () => {
-      if (reactToCollapse.current) {
-        setFieldState(({
-          allOptions,
-          inputValue,
-          ...others
-        }) => ({
-          allOptions,
-          inputValue,
-          ...others,
-          filteredOptions: allOptions.flatMap((o) => levelOptions(o, 0, inputValue.length > 0, collapsedKeys, getOptionValue).filter(([option]) => contains(getOptionLabel(option), inputValue)))
-        }));
-      }
-      reactToCollapse.current = true;
-    },
-    // Only react to collapseKey changes. Other deps should be stable (`contains`, `getOptionLabel`, `getOptionValue`).
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [collapsedKeys]
-  );
+  const filteredOptions = (0, import_react44.useMemo)(() => getFilteredOptions(fieldState.allOptions, fieldState.searchValue, collapsedKeys, contains, getOptionLabel, getOptionValue), [fieldState.allOptions, fieldState.searchValue, collapsedKeys, contains, getOptionLabel, getOptionValue]);
   const onInputChange = (0, import_react44.useCallback)((inputValue) => {
     setFieldState((prevState) => {
       return {
         ...prevState,
         inputValue,
-        allowCollapsing: inputValue.length === 0,
-        filteredOptions: prevState.allOptions.flatMap((o) => levelOptions(o, 0, inputValue.length > 0, collapsedKeys, getOptionValue).filter(([option]) => contains(getOptionLabel(option), inputValue)))
+        searchValue: inputValue.length === 0 ? void 0 : inputValue,
+        allowCollapsing: inputValue.length === 0
       };
     });
-  }, [collapsedKeys, contains, getOptionLabel, getOptionValue]);
-  const maybeInitLoad = (0, import_react44.useCallback)(async (options2, fieldState2, setFieldState2) => {
+  }, []);
+  const maybeInitLoad = (0, import_react44.useCallback)(async (options2, setFieldState2) => {
     if (!Array.isArray(options2)) {
       setFieldState2((prevState) => ({
         ...prevState,
         optionsLoading: true
       }));
       const loadedOptions = (await options2.load()).options;
-      const filteredOptions = loadedOptions.flatMap((o) => levelOptions(o, 0, fieldState2.inputValue.length > 0, collapsedKeys, getOptionValue).filter(([option]) => contains(getOptionLabel(option), fieldState2.inputValue)));
       setFieldState2((prevState) => ({
         ...prevState,
-        filteredOptions,
         allOptions: loadedOptions,
         optionsLoading: false
       }));
     }
-  }, [collapsedKeys, contains, getOptionLabel, getOptionValue]);
+  }, []);
   const firstOpen = (0, import_react44.useRef)(true);
   function onOpenChange(isOpen) {
     if (firstOpen.current && isOpen) {
-      maybeInitLoad(options, fieldState, setFieldState);
+      maybeInitLoad(options, setFieldState);
       firstOpen.current = false;
     }
     if (isOpen) {
       setFieldState((prevState) => ({
         ...prevState,
         inputValue: "",
-        filteredOptions: prevState.allOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue))
+        searchValue: void 0,
+        allowCollapsing: true
       }));
     }
   }
   const comboBoxChildren = (0, import_react44.useCallback)(([item]) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_stately5.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))), [getOptionValue, getOptionLabel, getOptionMenuLabel]);
   const comboBoxProps = {
     ...otherProps,
-    disabledKeys: Object.keys(disabledOptionsWithReasons),
+    disabledKeys,
     placeholder: !values || values.length === 0 ? placeholder : "",
     label: props.label,
     inputValue: fieldState.inputValue,
-    items: fieldState.filteredOptions,
+    items: filteredOptions,
     isDisabled,
     isReadOnly,
     onInputChange,
@@ -11654,6 +11542,8 @@ function TreeSelectFieldBase(props) {
           setFieldState((prevState) => ({
             ...prevState,
             inputValue: nothingSelectedText,
+            searchValue: void 0,
+            allowCollapsing: true,
             selectedKeys: [],
             selectedOptions: []
           }));
@@ -11684,15 +11574,16 @@ function TreeSelectFieldBase(props) {
               const childrenKeys = option.children.flatMap(flattenOptions).map((o) => valueToKey(getOptionValue(o))).filter((childKey) => {
                 return !state.disabledKeys.has(childKey);
               });
-              [key, ...childrenKeys].forEach(addedKeys.add, addedKeys);
+              [...groupKeySet.has(key) ? [] : [key], ...childrenKeys].forEach(addedKeys.add, addedKeys);
             }
-            for (const parent of parents.reverse()) {
-              const allChecked = parent.children?.every((child) => {
-                const childKey = valueToKey(getOptionValue(child));
-                return addedKeys.has(childKey) || existingKeys.has(childKey) || state.disabledKeys.has(childKey);
-              });
-              if (allChecked) {
-                addedKeys.add(valueToKey(getOptionValue(parent)));
+            const selectionKeys = /* @__PURE__ */ new Set([...existingKeys, ...addedKeys]);
+            for (const parent of [...parents].reverse()) {
+              const parentKey = valueToKey(getOptionValue(parent));
+              if (isOptionFullySelected(parent, selectionKeys, state.disabledKeys, groupKeySet, getOptionValue)) {
+                if (!groupKeySet.has(parentKey)) {
+                  addedKeys.add(parentKey);
+                  selectionKeys.add(parentKey);
+                }
               }
             }
           }
@@ -11725,7 +11616,7 @@ function TreeSelectFieldBase(props) {
           ...prevState,
           // Since we reset the list of options upon selection changes, then set the `inputValue` to empty string to reflect that.
           inputValue: "",
-          filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue)),
+          searchValue: void 0,
           selectedKeys: [...selectedKeys],
           selectedOptions,
           selectedOptionsLabels: chipDisplay === "root" ? rootOptions.map(getOptionLabel) : chipDisplay === "leaf" ? leafOptions.map(getOptionLabel) : selectedOptions.map(getOptionLabel)
@@ -11756,7 +11647,7 @@ function TreeSelectFieldBase(props) {
       setFieldState((prevState) => ({
         ...prevState,
         inputValue: selectedOptions.length === 1 ? getOptionLabel(selectedOptions[0]) : selectedOptions.length === 0 ? nothingSelectedText : "",
-        filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue)),
+        searchValue: void 0,
         allowCollapsing: true
       }));
     }
@@ -11845,6 +11736,18 @@ function getTopLevelSelections(o, selectedKeys, getOptionValue) {
   if (o.children) return [...o.children.flatMap((c) => getTopLevelSelections(c, selectedKeys, getOptionValue))];
   return [];
 }
+function getFilteredOptions(allOptions, searchValue, collapsedKeys, contains, getOptionLabel, getOptionValue) {
+  return allOptions.flatMap((option) => levelOptions(option, 0, !!searchValue, collapsedKeys, getOptionValue).filter(([nestedOption]) => searchValue ? contains(getOptionLabel(nestedOption), searchValue) : true));
+}
+function isOptionFullySelected(option, selectedKeys, disabledKeys, groupKeys, getOptionValue) {
+  const key = valueToKey(getOptionValue(option));
+  if (groupKeys.has(key)) {
+    return option.children?.length ? option.children.every((child) => isOptionFullySelected(child, selectedKeys, disabledKeys, groupKeys, getOptionValue)) : false;
+  }
+  if (selectedKeys.has(key) || disabledKeys.has(key)) return true;
+  if (!option.children || option.children.length === 0) return false;
+  return option.children.every((child) => isOptionFullySelected(child, selectedKeys, disabledKeys, groupKeys, getOptionValue));
+}
 
 // src/inputs/internal/ComboBoxInput.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
@@ -12545,7 +12448,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)(plainDateToJsDate(props.value), "MM/dd/yy") : "");
+  const [value, setValue] = (0, import_react50.useState)(props.value ? (0, import_date_fns3.format)(props.value, "MM/dd/yy") : "");
   const tid = useTestIds(props, "date");
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "input",
@@ -12556,8 +12459,7 @@ function DateFieldMock(props) {
       onChange: (e) => {
         const { value: value2 } = e.target;
         setValue(value2);
-        const parsed = (0, import_date_fns3.parse)(value2, "MM/dd/yy", plainDateToJsDate(todayPlainDate()));
-        onChange(Number.isNaN(parsed.getTime()) ? void 0 : jsDateToPlainDate(parsed));
+        onChange((0, import_date_fns3.parse)(value2, "MM/dd/yy", /* @__PURE__ */ new Date()));
       },
       onBlur: () => maybeCall(onBlur),
       onFocus: () => maybeCall(onFocus),
@@ -12571,11 +12473,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",
@@ -12586,13 +12488,13 @@ function getDateFormat(format4) {
 }
 function formatDate(date, format4) {
   if (!date) return "";
-  return (0, import_date_fns4.format)(plainDateToJsDate(date), format4);
+  return (0, import_date_fns4.format)(date, format4);
 }
 function formatDateRange(date, format4) {
   if (!date) return "";
   const { from, to } = date;
-  const fromFormatted = from ? (0, import_date_fns4.format)(plainDateToJsDate(from), format4) : "";
-  const toFormatted = to ? (0, import_date_fns4.format)(plainDateToJsDate(to), format4) : "";
+  const fromFormatted = from ? (0, import_date_fns4.format)(from, format4) : "";
+  const toFormatted = to ? (0, import_date_fns4.format)(to, format4) : "";
   return !fromFormatted && !toFormatted ? void 0 : `${fromFormatted} - ${toFormatted}`;
 }
 function parseDate(str, format4) {
@@ -12602,7 +12504,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 && import_temporal_polyfill2.Temporal.PlainDate.compare(toDate, fromDate) < 0) {
+  if (toDate && fromDate && toDate < fromDate) {
     return { from: toDate, to: fromDate };
   }
   if (toDate === void 0 && fromDate === void 0) {
@@ -12624,16 +12526,13 @@ 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, plainDateToJsDate(todayPlainDate()));
-  if (!isValidJsDate(parsed)) {
+  const parsed = (0, import_date_fns4.parse)(str, format4, /* @__PURE__ */ new Date());
+  if (!isValidDate(parsed)) {
     return void 0;
   }
-  return jsDateToPlainDate(parsed);
+  return 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";
 }
 
@@ -12759,11 +12658,11 @@ function DateFieldBase(props) {
     (d) => {
       setWipValue(d);
       if (d && isParsedDateValid(d)) {
-        if (isRangeMode && isDateRangeValue(d)) {
+        if (isRangeMode && (0, import_react_day_picker5.isDateRange)(d)) {
           props.onChange(d);
           return;
         }
-        if (!isRangeMode && !isDateRangeValue(d)) {
+        if (!isRangeMode && !(0, import_react_day_picker5.isDateRange)(d)) {
           props.onChange(d);
           return;
         }
@@ -12838,10 +12737,7 @@ function DateFieldBase(props) {
   ] });
 }
 function isParsedDateValid(d) {
-  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);
+  return d !== void 0 && (!(0, import_react_day_picker5.isDateRange)(d) || (0, import_react_day_picker5.isDateRange)(d) && isValidDate(d.from) && isValidDate(d.to));
 }
 
 // src/utils/withTestMock.tsx
@@ -18875,14 +18771,6 @@ 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: [
@@ -18902,7 +18790,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 ?? todayPlainDate() } : void 0)
+              setValue(op ? { op, value: value?.value ? new Date(value.value) : /* @__PURE__ */ new Date() } : void 0)
             ),
             label: inModal ? `${label} date filter operation` : label,
             labelStyle: !inModal && !vertical ? "inline" : inModal || vertical ? "hidden" : "above",
@@ -18914,13 +18802,9 @@ var DateFilter = class extends BaseFilter {
           DateField,
           {
             labelStyle: "inline",
-            value: value?.value ?? todayPlainDate(),
+            value: value?.value ? new Date(value.value) : /* @__PURE__ */ new Date(),
             label: "Date",
-            onChange: (d) => {
-              if (d && value) {
-                setValue({ ...value, value: d });
-              }
-            },
+            onChange: (d) => setValue({ ...value, value: d }),
             disabled: !value,
             ...tid[`${defaultTestId(this.label)}_dateField`]
           }
@@ -18929,9 +18813,6 @@ 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");
@@ -18939,17 +18820,6 @@ 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: [
@@ -18961,17 +18831,8 @@ var DateRangeFilter = class extends BaseFilter {
           isRangeFilterField: true,
           placeholder: placeholderText,
           label: testFieldLabel ?? "Date",
-          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 });
-            }
-          },
+          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),
           disabledDays,
           ...tid[`${defaultTestId(this.label)}_dateField`]
         }
@@ -18979,17 +18840,6 @@ 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");
@@ -19795,10 +19645,10 @@ function useGridTableLayoutState({
   });
   (0, import_react99.useEffect)(() => {
     if (page.limit !== persistedPageSize) setPersistedPageSize(page.limit);
-    setPage((prev) => prev.offset === 0 ? prev : {
+    setPage((prev) => ({
       ...prev,
       offset: 0
-    });
+    }));
   }, [page.limit, persistedPageSize, setPersistedPageSize, filter, searchString]);
   return {
     filter,