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

package/dist/index.d.cts

@@ -6921,14 +6921,16 @@ type TreeSelectFieldProps<O, V extends Value> = {
      * @default root */
     chipDisplay?: "all" | "leaf" | "root";
     disabledOptions?: V[];
+    groupOptions?: V[];
 } & BeamFocusableProps & PresentationFieldProps;
 declare function TreeSelectField<O, V extends Value>(props: TreeSelectFieldProps<O, V>): JSX.Element;
 declare function TreeSelectField<O extends HasIdAndName<V>, V extends Value>(props: Optional<TreeSelectFieldProps<O, V>, "getOptionValue" | "getOptionLabel">): JSX.Element;
-declare function useTreeSelectFieldProvider<O, V extends Value>(): CollapsedChildrenState<any, any>;
+declare function useTreeSelectFieldProvider<O, V extends Value>(): CollapsedChildrenState<O, V>;
 type CollapsedChildrenState<O, V extends Value> = {
     collapsedKeys: Key$1[];
     setCollapsedKeys: Dispatch<SetStateAction<Key$1[]>>;
     getOptionValue: (opt: O) => V;
+    groupKeys: Key$1[];
 };
 declare const CollapsedContext: React__default.Context<CollapsedChildrenState<any, any>>;
 

package/dist/index.d.ts

@@ -6921,14 +6921,16 @@ type TreeSelectFieldProps<O, V extends Value> = {
      * @default root */
     chipDisplay?: "all" | "leaf" | "root";
     disabledOptions?: V[];
+    groupOptions?: V[];
 } & BeamFocusableProps & PresentationFieldProps;
 declare function TreeSelectField<O, V extends Value>(props: TreeSelectFieldProps<O, V>): JSX.Element;
 declare function TreeSelectField<O extends HasIdAndName<V>, V extends Value>(props: Optional<TreeSelectFieldProps<O, V>, "getOptionValue" | "getOptionLabel">): JSX.Element;
-declare function useTreeSelectFieldProvider<O, V extends Value>(): CollapsedChildrenState<any, any>;
+declare function useTreeSelectFieldProvider<O, V extends Value>(): CollapsedChildrenState<O, V>;
 type CollapsedChildrenState<O, V extends Value> = {
     collapsedKeys: Key$1[];
     setCollapsedKeys: Dispatch<SetStateAction<Key$1[]>>;
     getOptionValue: (opt: O) => V;
+    groupKeys: Key$1[];
 };
 declare const CollapsedContext: React__default.Context<CollapsedChildrenState<any, any>>;
 

package/dist/index.js

@@ -5559,6 +5559,7 @@ function dehydrateFilter(filterImpls, value) {
       const filter = filterImpls[key];
       return [
         key,
+        // Let each filter own serialization so persisted state stays stable for non-plain JSON values like PlainDate.
         filter?.dehydrate ? filter.dehydrate(rawValue) : rawValue
       ];
     })
@@ -10715,7 +10716,8 @@ function TreeOption(props) {
   const {
     collapsedKeys,
     setCollapsedKeys,
-    getOptionValue
+    getOptionValue,
+    groupKeys
   } = useTreeSelectFieldProvider();
   const {
     optionProps,
@@ -10727,6 +10729,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: {
@@ -10754,7 +10762,12 @@ function TreeOption(props) {
       }]
     }
   };
-  return /* @__PURE__ */ jsxs33("li", { ...hoverProps, ...trussProps34({
+  return /* @__PURE__ */ jsxs33("li", { ...hoverProps, onClick: (e) => {
+    if (!isGroup) return;
+    e.preventDefault();
+    e.stopPropagation();
+    toggleCollapsed();
+  }, ...trussProps34({
     ...{
       display: "df",
       alignItems: "aic",
@@ -10771,18 +10784,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__ */ jsx49("span", { className: "w_18px fs0 df aic", children: option.children && option.children?.length > 0 && /* @__PURE__ */ jsx49("button", { onClick: (e) => {
+    allowCollapsing && /* @__PURE__ */ jsx49("span", { className: "w_18px fs0 df aic", children: canCollapse && /* @__PURE__ */ jsx49("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__ */ jsx49(Icon, { icon: collapsedKeys.includes(item.key) ? "triangleRight" : "triangleDown", inc: 2 }) }) }),
     /* @__PURE__ */ jsxs33("span", { className: "df aic gap1 h100 fg1 pt1 pb1 pr2", ref, ...optionProps, "data-label": item.textValue, children: [
-      /* @__PURE__ */ jsx49(StyledCheckbox, { isDisabled, isSelected, isIndeterminate, ...tid[item.key.toString()] }),
+      !isGroup && /* @__PURE__ */ jsx49(StyledCheckbox, { isDisabled, isSelected, isIndeterminate, ...tid[item.key.toString()] }),
       /* @__PURE__ */ jsx49("div", { className: "pl1", children: item.rendered })
     ] })
   ] });
@@ -10865,9 +10878,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
@@ -10907,8 +10925,7 @@ function VirtualizedOptions(props) {
       components: !loading ? {} : {
         Footer: typeof loading === "function" ? loading : () => /* @__PURE__ */ jsx50(LoadingDots, { contrast })
       }
-    },
-    items.length
+    }
   );
 }
 
@@ -11081,6 +11098,7 @@ function TreeSelectField(props) {
     ...otherProps
   } = props;
   const [collapsedKeys, setCollapsedKeys] = useState17([]);
+  const groupKeys = useMemo15(() => props.groupOptions?.map((option) => valueToKey(option)) ?? [], [props.groupOptions]);
   useEffect13(() => {
     setCollapsedKeys(!Array.isArray(options) ? [] : defaultCollapsed ? options.map((o) => getOptionValue(o)) : options.flatMap(flattenOptions).filter((o) => o.defaultCollapsed).map((o) => getOptionValue(o)));
   }, [options, defaultCollapsed]);
@@ -11088,11 +11106,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__ */ jsx54(CollapsedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx54(TreeSelectFieldBase, { ...otherProps, options, getOptionLabel, getOptionValue, values, onSelect: ({
     all,
@@ -11113,7 +11132,8 @@ var CollapsedContext = React9.createContext({
   collapsedKeys: [],
   setCollapsedKeys: () => {
   },
-  getOptionValue: () => ({})
+  getOptionValue: () => ({}),
+  groupKeys: []
 });
 function TreeSelectFieldBase(props) {
   const {
@@ -11132,13 +11152,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;
@@ -11150,7 +11172,10 @@ function TreeSelectFieldBase(props) {
   const {
     collapsedKeys
   } = useTreeSelectFieldProvider();
+  const groupKeys = useMemo15(() => _groupOptions?.map((option) => valueToKey(option)) ?? [], [_groupOptions]);
+  const groupKeySet = useMemo15(() => new Set(groupKeys), [groupKeys]);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
+  const disabledKeys = [.../* @__PURE__ */ new Set([...Object.keys(disabledOptionsWithReasons), ...groupKeys])];
   const initTreeFieldState = useCallback8(() => {
     const selectedKeys = new Set(values?.flatMap((v) => {
       const foundOptions = findOptions(initialOptions, valueToKey(v), getOptionValue);
@@ -11159,14 +11184,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;
     }
@@ -11177,18 +11204,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] = useState17(() => initTreeFieldState());
   useEffect13(() => {
     if (Array.isArray(options)) {
@@ -11208,75 +11234,54 @@ function TreeSelectFieldBase(props) {
       setFieldState(initTreeFieldState());
     }
   }, [getOptionValue, initTreeFieldState, values]);
-  const reactToCollapse = useRef22(false);
-  useEffect13(
-    () => {
-      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 = useMemo15(() => getFilteredOptions(fieldState.allOptions, fieldState.searchValue, collapsedKeys, contains, getOptionLabel, getOptionValue), [fieldState.allOptions, fieldState.searchValue, collapsedKeys, contains, getOptionLabel, getOptionValue]);
   const onInputChange = useCallback8((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 = useCallback8(async (options2, fieldState2, setFieldState2) => {
+  }, []);
+  const maybeInitLoad = useCallback8(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 = useRef22(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 = useCallback8(([item]) => /* @__PURE__ */ jsx54(Item3, { 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,
@@ -11301,6 +11306,8 @@ function TreeSelectFieldBase(props) {
           setFieldState((prevState) => ({
             ...prevState,
             inputValue: nothingSelectedText,
+            searchValue: void 0,
+            allowCollapsing: true,
             selectedKeys: [],
             selectedOptions: []
           }));
@@ -11331,15 +11338,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);
+                }
               }
             }
           }
@@ -11372,7 +11380,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)
@@ -11403,7 +11411,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
       }));
     }
@@ -11492,6 +11500,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
 import { jsx as jsx55 } from "react/jsx-runtime";