@homebound/beam 2.362.0 → 2.362.2

package/dist/inputs/ToggleChipGroup.js

@@ -36,7 +36,8 @@ function ToggleChip(props) {
         title: tooltip,
         placement: "top",
         children: ((0, jsx_runtime_1.jsxs)("label", { css: {
-                ...Css_1.Css.relative.dib.br16.sm.px1.cursorPointer.pyPx(4).bgGray200.if(isDisabled).cursorNotAllowed.gray600.pr1.$,
+                ...Css_1.Css.relative.dif.gap1.aic.br16.sm.px1.cursorPointer.pyPx(4).bgGray200.if(isDisabled).cursorNotAllowed
+                    .gray600.pr1.$,
                 ...(isSelected
                     ? {
                         ...Css_1.Css.color((_a = xss === null || xss === void 0 ? void 0 : xss.color) !== null && _a !== void 0 ? _a : Css_1.Palette.White).bgColor((_b = xss === null || xss === void 0 ? void 0 : xss.backgroundColor) !== null && _b !== void 0 ? _b : Css_1.Palette.Blue700).$,
@@ -44,6 +45,6 @@ function ToggleChip(props) {
                     }
                     : { ":hover:not([data-disabled='true'])": Css_1.Css.bgGray300.$ }),
                 ...(isFocusVisible ? Css_1.Css.bshFocus.$ : {}),
-            }, "data-selected": isSelected, "data-disabled": isDisabled, "aria-disabled": isDisabled, ...others, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ...inputProps, ...focusProps }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [startAdornment, label] })] })),
+            }, "data-selected": isSelected, "data-disabled": isDisabled, "aria-disabled": isDisabled, ...others, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ...inputProps, ...focusProps }) }), startAdornment, label] })),
     });
 }

package/dist/inputs/TreeSelectField/TreeSelectField.js

@@ -42,7 +42,19 @@ function TreeSelectField(props) {
     const { getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
     options, onSelect, values, defaultCollapsed = false, ...otherProps } = props;
-    const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(Array.isArray(options) && defaultCollapsed ? options.map((o) => getOptionValue(o)) : []);
+    const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        setCollapsedKeys(!Array.isArray(options)
+            ? []
+            : defaultCollapsed
+                ? options.map((o) => getOptionValue(o))
+                : options
+                    .flatMap(utils_1.flattenOptions)
+                    .filter((o) => o.defaultCollapsed)
+                    .map((o) => getOptionValue(o)));
+        // Explicitly ignoring `getOptionValue` as it typically isn't memo'd
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [options, defaultCollapsed]);
     const contextValue = (0, react_1.useMemo)(() => ({ collapsedKeys, setCollapsedKeys, getOptionValue }), 
     // 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
@@ -84,14 +96,17 @@ function TreeSelectFieldBase(props) {
             // Find the options that matches the value. These could be parents or a children.
             const foundOptions = (0, utils_1.findOptions)(initialOptions, (0, Value_1.valueToKey)(v), getOptionValue);
             // Go through the `foundOptions` and get the keys of the options and its children if it has any.
-            return foundOptions.flatMap(({ option }) => {
-                var _a, _b;
-                return [
-                    (0, Value_1.valueToKey)(getOptionValue(option)),
-                    ...((_b = (_a = option.children) === null || _a === void 0 ? void 0 : _a.flatMap((o) => (0, Value_1.valueToKey)(getOptionValue(o)))) !== null && _b !== void 0 ? _b : []),
-                ];
-            });
+            return foundOptions.flatMap(({ option }) => selectOptionAndAllChildren(option));
         }));
+        function selectOptionAndAllChildren(maybeParent) {
+            var _a, _b;
+            // Check if the maybeParent has children, if so, return those as selected keys
+            // Do in a recursive way so that children may have children
+            return [
+                (0, Value_1.valueToKey)(getOptionValue(maybeParent)),
+                ...((_b = (_a = maybeParent.children) === null || _a === void 0 ? void 0 : _a.flatMap(selectOptionAndAllChildren)) !== null && _b !== void 0 ? _b : []),
+            ];
+        }
         // It is possible that all the children of a parent were considered selected `values`, but the parent wasn't included in the `values` array.
         // In this case, the parent also should be considered a selected option.
         function areAllChildrenSelected(maybeParent) {
@@ -146,17 +161,27 @@ function TreeSelectFieldBase(props) {
         getOptionLabel,
         isReadOnly,
         nothingSelectedText,
-        collapsedKeys,
         getOptionValue,
+        collapsedKeys,
     ]);
     // Initialize the TreeFieldState
     const [fieldState, setFieldState] = (0, react_1.useState)(() => initTreeFieldState());
+    (0, react_1.useEffect)(() => {
+        // We don't want to do this if initialOptions is not an array, because we would be lazy loading `allOptions`
+        if (Array.isArray(options)) {
+            setFieldState((prevState) => ({ ...prevState, allOptions: options }));
+        }
+    }, [options]);
     // Reset the TreeFieldState if the values array changes and doesn't match the selectedOptions
     (0, react_1.useEffect)(() => {
         // if the values does not match the values in the fieldState, then update the fieldState
         const selectedKeys = fieldState.selectedOptions.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)));
-        if (values &&
-            (values.length !== selectedKeys.length || !values.every((v) => selectedKeys.includes((0, Value_1.valueToKey)(v))))) {
+        if (
+        // If the values were cleared
+        (values === undefined && selectedKeys.length !== 0) ||
+            // Or values were set, but they don't match the selected keys
+            (values && (values.length !== selectedKeys.length || !values.every((v) => selectedKeys.includes((0, Value_1.valueToKey)(v)))))) {
+            // Then reinitialize
             setFieldState(initTreeFieldState());
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -218,7 +243,7 @@ function TreeSelectFieldBase(props) {
             setFieldState((prevState) => ({
                 ...prevState,
                 inputValue: "",
-                filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue)),
+                filteredOptions: prevState.allOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue)),
             }));
         }
     }
@@ -417,10 +442,10 @@ function TreeSelectFieldBase(props) {
         ...positionProps.style,
         width: (_c = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth,
         // Ensures the menu never gets too small.
-        minWidth: 200,
+        minWidth: 320,
     };
     const fieldMaxWidth = (0, utils_2.getFieldWidth)(fullWidth);
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, fullWidth: fullWidth, labelStyle: labelStyle, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, selectedOptionsLabels: fieldState.selectedOptionsLabels, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField, nothingSelectedText: nothingSelectedText, isTree: true }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, isTree: true }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, fullWidth: fullWidth, labelStyle: labelStyle, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, selectedOptionsLabels: fieldState.selectedOptionsLabels, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField, nothingSelectedText: nothingSelectedText, isTree: true }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 320, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, isTree: true }) }))] }));
 }
 function levelOptions(o, level, filtering, collapsedKeys, getOptionValue) {
     var _a;

package/dist/inputs/TreeSelectField/utils.d.ts

@@ -7,6 +7,7 @@ type FoundOption<O> = {
 };
 export type NestedOption<O> = O & {
     children?: NestedOption<O>[];
+    defaultCollapsed?: boolean;
 };
 export type NestedOptionsOrLoad<O> = NestedOption<O>[] | {
     current: NestedOption<O>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.362.0",
+  "version": "2.362.2",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",