@homebound/beam 2.266.0 → 2.267.0

package/dist/components/Filters/TreeFilter.d.ts

@@ -0,0 +1,14 @@
+import { Key } from "react";
+import { Filter } from "./types";
+import { TreeSelectFieldProps, Value } from "../../inputs";
+import { TreeSelectResponse } from "../../inputs/TreeSelectField/utils";
+export type TreeFilterProps<O, V extends Value> = Omit<TreeSelectFieldProps<O, V>, "values" | "onSelect" | "label"> & {
+    defaultValue?: V[];
+    label?: string;
+    /** Defines which of the tree values to use in the filter - "root", "leaf", or "all"
+     * @default "root" */
+    filterBy?: TreeFilterBy;
+};
+type TreeFilterBy = keyof TreeSelectResponse<any, any>;
+export declare function treeFilter<O, V extends Key>(props: TreeFilterProps<O, V>): (key: string) => Filter<V[]>;
+export {};

package/dist/components/Filters/TreeFilter.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.treeFilter = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const BaseFilter_1 = require("./BaseFilter");
+const inputs_1 = require("../../inputs");
+function treeFilter(props) {
+    return (key) => new TreeFilter(key, props);
+}
+exports.treeFilter = treeFilter;
+class TreeFilter extends BaseFilter_1.BaseFilter {
+    render(value, setValue, tid, inModal, vertical) {
+        const { defaultValue, nothingSelectedText, filterBy = "root", ...props } = this.props;
+        return ((0, jsx_runtime_1.jsx)(inputs_1.TreeSelectField, { ...props, label: this.label, values: value, compact: !vertical, labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above", sizeToContent: !inModal && !vertical, onSelect: (options) => setValue(options[filterBy].values), nothingSelectedText: nothingSelectedText !== null && nothingSelectedText !== void 0 ? nothingSelectedText : "All", ...this.testId(tid) }));
+    }
+}

package/dist/components/Filters/testDomain.d.ts

@@ -20,6 +20,7 @@ export type Status = {
     name: string;
 };
 export type Project = {
+    name: string;
     id: string;
     internalUser: InternalUser;
     market: Market;
@@ -30,6 +31,16 @@ export type Project = {
     doNotUse: boolean;
     isStale: boolean;
 };
+export type Cohort = {
+    id: string;
+    name: string;
+    projects: Project[];
+};
+export type Development = {
+    id: string;
+    name: string;
+    cohorts: Cohort[];
+};
 export type ProjectFilter = {
     marketId?: string[] | null;
     internalUserId?: string | null;
@@ -43,6 +54,7 @@ export type ProjectFilter = {
     dateRange?: DateRangeFilterValue<string>;
     numberRange?: NumberRangeFilterValue;
     isStale?: boolean | null;
+    projectCohortDevelopment?: string[];
 };
 export type StageFilter = NonNullable<FilterDefs<ProjectFilter>["stage"]>;
 export type StageSingleFilter = NonNullable<FilterDefs<ProjectFilter>["stageSingle"]>;

package/dist/forms/BoundTreeSelectField.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { FieldState } from "@homebound/form-state";
+import { TreeSelectFieldProps, Value } from "../inputs";
+import { TreeSelectResponse } from "../inputs/TreeSelectField/utils";
+import { HasIdAndName, Optional } from "../types";
+export type BoundTreeSelectFieldProps<O, V extends Value> = Omit<TreeSelectFieldProps<O, V>, "values" | "onSelect" | "label"> & {
+    onSelect?: (options: TreeSelectResponse<O, V>) => void;
+    field: FieldState<V[] | null | undefined>;
+    label?: string;
+};
+/**
+ * Wraps `TreeSelectField` and binds it to a form field.
+ *
+ * To ease integration with "select this fooId" inputs, we can take a list
+ * of objects, `T` (i.e. `TradePartner[]`), but accept a field of type `V`
+ * (i.e. `string`).
+ *
+ * The caller has to tell us how to turn `T` into `V`, which is usually a
+ * lambda like `t => t.id`.
+ */
+export declare function BoundTreeSelectField<T, V extends Value>(props: BoundTreeSelectFieldProps<T, V>): JSX.Element;
+export declare function BoundTreeSelectField<T extends HasIdAndName<V>, V extends Value>(props: Optional<BoundTreeSelectFieldProps<T, V>, "getOptionLabel" | "getOptionValue">): JSX.Element;

package/dist/forms/BoundTreeSelectField.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoundTreeSelectField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_1 = require("mobx-react");
+const inputs_1 = require("../inputs");
+const utils_1 = require("../utils");
+const defaultLabel_1 = require("../utils/defaultLabel");
+const useTestIds_1 = require("../utils/useTestIds");
+function BoundTreeSelectField(props) {
+    const { field, options, readOnly, getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
+    getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
+    onSelect = (options) => field.set(options.all.values), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
+    const testId = (0, useTestIds_1.useTestIds)(props, field.key);
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
+            var _a;
+            return ((0, jsx_runtime_1.jsx)(inputs_1.TreeSelectField, { label: label, values: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (options) => {
+                    onSelect(options);
+                    field.maybeAutoSave();
+                }, options: options, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => {
+                    field.blur();
+                    (0, utils_1.maybeCall)(onBlur);
+                }, onFocus: () => {
+                    field.focus();
+                    (0, utils_1.maybeCall)(onFocus);
+                }, ...others, ...testId }));
+        } }));
+}
+exports.BoundTreeSelectField = BoundTreeSelectField;

package/dist/forms/FormStateApp.js

@@ -9,6 +9,7 @@ const components_1 = require("../components");
 const Css_1 = require("../Css");
 const forms_1 = require("./");
 const BoundCheckboxGroupField_1 = require("./BoundCheckboxGroupField");
+const BoundTreeSelectField_1 = require("./BoundTreeSelectField");
 const FormLines_1 = require("./FormLines");
 const hooks_1 = require("../hooks");
 function FormStateApp() {
@@ -56,7 +57,22 @@ function FormStateApp() {
         { value: "a:4", label: "Iguana" },
         { value: "a:5", label: "Turtle" },
     ];
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.$, children: [(0, jsx_runtime_1.jsxs)("header", { css: Css_1.Css.wPx(700).$, children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, { labelSuffix: { required: "*", optional: "(Opt)" }, children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }), (0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Website", children: (0, jsx_runtime_1.jsx)("a", { href: "https://google.com", children: "google.com" }) })] }), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) })] }), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows })] }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.revertChanges(), label: "Cancel" }), (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => {
+    const genres = [
+        {
+            id: "g:1",
+            name: "Action",
+            children: [
+                {
+                    id: "g:2",
+                    name: "Action Adventure",
+                    children: [{ id: "g:3", name: "Action Adventure Comedy" }],
+                },
+                { id: "g:4", name: "Action Comedy" },
+            ],
+        },
+        { id: "g:5", name: "Comedy", children: [{ id: "g:6", name: "Comedy Drama" }] },
+    ];
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.$, children: [(0, jsx_runtime_1.jsxs)("header", { css: Css_1.Css.wPx(700).$, children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, { labelSuffix: { required: "*", optional: "(Opt)" }, children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }), (0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Website", children: (0, jsx_runtime_1.jsx)("a", { href: "https://google.com", children: "google.com" }) })] }), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }), (0, jsx_runtime_1.jsx)(BoundTreeSelectField_1.BoundTreeSelectField, { field: formState.favoriteGenres, options: genres }), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) })] }), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows })] }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.revertChanges(), label: "Cancel" }), (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => {
                                         if (formState.canSave()) {
                                             formState.commitChanges();
                                         }
@@ -86,6 +102,7 @@ exports.formConfig = {
     favoriteSport: { type: "value" },
     favoriteColors: { type: "value", rules: [form_state_1.required] },
     favoriteShapes: { type: "value", rules: [form_state_1.required] },
+    favoriteGenres: { type: "value", rules: [form_state_1.required] },
     books: {
         type: "list",
         rules: [({ value }) => ((value || []).length === 0 ? "Empty" : undefined)],

package/dist/forms/formStateDomain.d.ts

@@ -23,6 +23,7 @@ export interface AuthorInput {
     animals?: string[] | null;
     bio?: string | null;
     saleDates?: DateRange | null;
+    favoriteGenres?: string[] | null;
 }
 export interface AuthorAddress {
     street?: string | null;

package/dist/inputs/TreeSelectField/TreeSelectField.js

@@ -111,7 +111,11 @@ function TreeSelectFieldBase(props) {
         initialOptions.forEach(areAllChildrenSelected);
         return {
             selectedKeys,
-            inputValue: selectedOptions.length === 1 ? getOptionLabel(selectedOptions[0]) : "",
+            inputValue: selectedOptions.length === 1
+                ? getOptionLabel(selectedOptions[0])
+                : selectedOptions.length === 0
+                    ? nothingSelectedText
+                    : "",
             filteredOptions,
             selectedOptions,
             allOptions: initialOptions,
@@ -166,6 +170,10 @@ function TreeSelectFieldBase(props) {
             maybeInitLoad(options, fieldState, setFieldState);
             firstOpen.current = false;
         }
+        if (isOpen) {
+            // reset the input field to allow the user to start typing to filter
+            setFieldState((prevState) => ({ ...prevState, inputValue: "" }));
+        }
     }
     // This is _always_ going to appear new. Maybe `useMemo`?
     const comboBoxProps = {
@@ -187,6 +195,7 @@ function TreeSelectFieldBase(props) {
     const state = (0, react_stately_1.useComboBoxState)({
         ...comboBoxProps,
         allowsEmptyCollection: true,
+        allowsCustomValue: true,
     });
     // @ts-ignore - `selectionManager.state` exists, but not according to the types. We are tricking the ComboBox state to support multiple selections.
     state.selectionManager.state = (0, react_stately_1.useMultipleSelectionState)({
@@ -205,7 +214,12 @@ function TreeSelectFieldBase(props) {
             if (addedKeys.size > 0 || removedKeys.size > 0) {
                 // Quickly return out of this if all selections are removed
                 if (newKeys.size === 0) {
-                    setFieldState((prevState) => ({ ...prevState, inputValue: "", selectedKeys: [], selectedOptions: [] }));
+                    setFieldState((prevState) => ({
+                        ...prevState,
+                        inputValue: nothingSelectedText,
+                        selectedKeys: [],
+                        selectedOptions: [],
+                    }));
                     onSelect({
                         all: { values: [], options: [] },
                         leaf: { values: [], options: [] },
@@ -298,10 +312,15 @@ function TreeSelectFieldBase(props) {
     // Resets the TreeFieldState when the 'blur' event is triggered on the input.
     function resetField() {
         const { inputValue, selectedOptions } = fieldState;
-        if (inputValue !== "" || (selectedOptions.length === 1 && inputValue !== getOptionLabel(selectedOptions[0]))) {
+        if (inputValue !== nothingSelectedText ||
+            (selectedOptions.length === 1 && inputValue !== getOptionLabel(selectedOptions[0]))) {
             setFieldState((prevState) => ({
                 ...prevState,
-                inputValue: selectedOptions.length === 1 ? getOptionLabel(selectedOptions[0]) : "",
+                inputValue: selectedOptions.length === 1
+                    ? getOptionLabel(selectedOptions[0])
+                    : selectedOptions.length === 0
+                        ? nothingSelectedText
+                        : "",
                 filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0)),
                 allowCollapsing: true,
             }));

package/dist/inputs/internal/ComboBoxBase.js

@@ -133,11 +133,10 @@ function ComboBoxBase(props) {
             maybeInitLoad();
             firstOpen.current = false;
         }
-        setFieldState((prevState) => ({
-            ...prevState,
-            // When using the multiselect field, always empty the input upon open.
-            inputValue: multiselect && isOpen ? "" : prevState.inputValue,
-        }));
+        // When using the multiselect field, always empty the input upon open.
+        if (multiselect && isOpen) {
+            setFieldState((prevState) => ({ ...prevState, inputValue: "" }));
+        }
     }
     // Used to calculate the rendered width of the combo box (input + button)
     const comboBoxRef = (0, react_1.useRef)(null);
@@ -163,6 +162,9 @@ function ComboBoxBase(props) {
     const state = (0, react_stately_1.useComboBoxState)({
         ...comboBoxProps,
         allowsEmptyCollection: true,
+        // We don't really allow custom values, as we reset the input value once a user `blur`s the input field.
+        // Though, setting `allowsCustomValue: true` prevents React-Aria/Stately from attempting to reset the input field's value when the menu closes.
+        allowsCustomValue: true,
         // useComboBoxState.onSelectionChange will be executed if a keyboard interaction (Enter key) is used to select an item
         onSelectionChange: (key) => {
             // ignore undefined/null keys - `null` can happen if input field's value is completely deleted after having a value assigned.
@@ -250,7 +252,7 @@ function ComboBoxBase(props) {
         // Ensures the menu never gets too small.
         minWidth: 200,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField, 
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField, 
                 // If there are 10 or fewer options and it is not the multiselect, then we disable the typeahead filter for a better UX.
                 typeToFilter: !(!multiselect && Array.isArray(options) && options.length <= 10) }), 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, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
 }

package/dist/inputs/internal/VirtualizedOptions.js

@@ -24,11 +24,12 @@ function VirtualizedOptions(props) {
     }, [focusedItem]);
     return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, totalListHeightChanged: onListHeightChange, totalCount: items.length, 
         // Ensure the selected item is visible when the list renders
-        initialTopMostItemIndex: selectedItem ? selectedItem.index : 0, 
-        // 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: 10, itemContent: (idx) => {
+        initialTopMostItemIndex: selectedItem ? selectedItem.index : 0, ...(process.env.NODE_ENV === "test"
+            ? {
+                initialItemCount: items.length,
+                key: items.length,
+            }
+            : {}), itemContent: (idx) => {
             var _a;
             const item = items[idx];
             if (item) {

package/package.json

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