@homebound/beam 2.415.5 → 2.416.0

package/dist/{chunk-ZQBDHF22.js → chunk-XH44AYND.js}

@@ -35,6 +35,7 @@ function fail(message) {
 function toToggleState(isSelected, onChange) {
   return {
     isSelected,
+    defaultSelected: false,
     setSelected: onChange,
     toggle: () => onChange(!isSelected)
   };
@@ -92,4 +93,4 @@ export {
   isDefined,
   pluralize
 };
-//# sourceMappingURL=chunk-ZQBDHF22.js.map
+//# sourceMappingURL=chunk-XH44AYND.js.map

package/dist/chunk-XH44AYND.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/defaultTestId.ts","../src/utils/useTestIds.tsx","../src/utils/index.ts"],"sourcesContent":["import { camelCase } from \"change-case\";\n\n/**\n * Guesses an id based on a label string, i.e. given `Homeowner Contract`,\n * returns `homeownerContract`.\n *\n * This is useful for our (non-bound) form fields that will probably have a label,\n * but may not have a `data-testid` set by the encompassing page.\n *\n * (Bound form fields typically set their test id from their form-state field's key.)\n */\nexport function defaultTestId(label: string): string {\n  // Strip `m:4` to `m4` to prevent it from becoming `m_4` which our rtl-utils assumes\n  // means \"the 4th element with a data-testid value of 'm'\".\n  return camelCase(label.replace(\":\", \"\"));\n}\n","import { defaultTestId } from \"src/utils/defaultTestId\";\n\nexport type TestIds = Record<string, object>;\n\n/**\n * Provides a way to easily generate `data-testid`s.\n *\n * The test ids are made of a `${prefix}_${key}`, where:\n *\n * - The prefix is the component name, like \"profile\", and\n * - The key is the specific DOM element that's being tagged, like \"firstName\"\n *\n * To determine the prefix, the component passes us their props, which we'll use\n * to look for an incoming `data-testid` to become the prefix the `data-testid`s\n * that we create. I.e.:\n *\n * ```tsx\n * const { a, b } = props;\n * const tid = useTestIds(props);\n *\n * return <Foo {...tid.foo} />;\n * ```\n *\n * This allows components that embed the component to customize the prefix, i.e.\n * `<TextField data-testid=\"firstName\" />` and `<TextField data-testid=\"lastName\" />`\n * would produce, within `TextField` itself, ids like:\n *\n * - `firstName_input`\n * - `firstName_errors`\n * - `lastName_input`\n * - `lastName_errors`\n *\n * @param props the component's `props` object, which we'll scan for `data-testid` to use as the prefix\n * @param defaultPrefix the default prefix to use if no `data-testid` is found on `props`\n */\nexport function useTestIds(props: object, defaultPrefix?: string): Record<string, object> {\n  const prefix: string | undefined =\n    (props as any)[\"data-testid\"] ||\n    // Pass defaultPrefix through defaultTestId to allow `useTestIds(..., label)` usage\n    (defaultPrefix ? defaultTestId(defaultPrefix) : undefined);\n  const rootId = { \"data-testid\": prefix };\n  return newMethodMissingProxy(rootId, (key) => {\n    // If we get tagged ids, remove the colon so that we can do `r.foo_m2` for `m:2`\n    key = key.replace(\":\", \"\");\n    return { \"data-testid\": prefix ? `${prefix}_${key}` : key };\n  }) as any;\n}\n\n/** Uses `object` for any keys that exist on it, otherwise calls `methodMissing` fn. */\nexport function newMethodMissingProxy<T extends object, Y>(\n  object: T,\n  methodMissing: (key: string) => Y,\n): T & Record<string, Y> {\n  return new Proxy(object, {\n    get(object, property) {\n      if (Reflect.has(object, property)) {\n        return Reflect.get(object, property);\n      } else if (property === \"then\") {\n        return undefined;\n      } else {\n        return methodMissing(String(property));\n      }\n    },\n  }) as any;\n}\n","import { MutableRefObject } from \"react\";\nimport type { CheckboxGroupState, ToggleState } from \"react-stately\";\n\nexport function fail(message?: string): never {\n  throw new Error(message || \"Failed\");\n}\n\n/** Adapts our state to what useToggleState returns in a stateless manner. */\nexport function toToggleState(isSelected: boolean, onChange: (value: boolean) => void): ToggleState {\n  return {\n    isSelected,\n    defaultSelected: false,\n    setSelected: onChange,\n    toggle: () => onChange(!isSelected),\n  };\n}\n\n/** Adapts our state to what use*Group returns in a stateless manner. */\nexport function toGroupState<T extends string>(values: T[], onChange: (value: T[]) => void): CheckboxGroupState {\n  const addValue = (value: T) => onChange([...values, value]);\n  const removeValue = (value: T) => onChange(values.filter((_value) => _value !== value));\n\n  return {\n    value: values,\n    defaultValue: [],\n    setValue: onChange,\n    isSelected: (value: T) => values.includes(value),\n    addValue,\n    removeValue,\n    toggleValue: (value: T) => (values.includes(value) ? addValue(value) : removeValue(value)),\n    isDisabled: false,\n    isReadOnly: false,\n    // We do not use the validation state, as our Switch groups do not support error states. However, this field is required by the `CheckboxGroupState` so we need to include it.\n    // If we ever update our SwitchGroup component to support error states, we'll need to update this.\n    validationState: \"valid\",\n    isInvalid: false,\n    isRequired: false,\n    setInvalid: () => {},\n    realtimeValidation: { isInvalid: false, validationErrors: [], validationDetails: {} as ValidityState },\n    displayValidation: { isInvalid: false, validationErrors: [], validationDetails: {} as ValidityState },\n    updateValidation: () => {},\n    resetValidation: () => {},\n    commitValidation: () => {},\n  };\n}\n\n/**\n * Utility to maybe call a function if undefined with arguments\n *\n * @example\n *  maybeCall(onChange, true)\n *  maybeCall(onBlur)\n *  maybeCall(onSelect, { id: 1, value: \"book 1\"}, true)\n */\nexport function maybeCall(callback: Function | undefined, ...args: any[]) {\n  return callback && callback(...args);\n}\n\nexport * from \"./useTestIds\";\n\n/** Casts `Object.keys` to \"what it should be\", as long as your instance doesn't have keys it shouldn't. */\nexport function safeKeys<T>(instance: T): (keyof T)[] {\n  return Object.getOwnPropertyNames(instance) as any;\n}\n\n// Returns object with specified key removed\nexport const omitKey = <T, K extends keyof T>(key: K, { [key]: _, ...obj }: T) => obj as T;\n\nexport const noop = (..._: any) => {};\n\ntype Entries<T> = {\n  [K in keyof T]: [K, T[K]];\n}[keyof T][];\n\nexport function safeEntries<T extends object>(obj: T): Entries<T> {\n  return Object.entries(obj) as any;\n}\n\nexport class EmptyRef<T> implements MutableRefObject<T> {\n  get current(): T {\n    throw new Error(\"BeamProvider is missing\");\n  }\n\n  set current(_) {\n    throw new Error(\"BeamProvider is missing\");\n  }\n}\n\nexport const isAbsoluteUrl = (url: string) => /^(http(s?)):\\/\\//i.test(url);\n\nexport function areArraysEqual(a: any[], b: any[]): boolean {\n  return a.length === b.length && a.every((val, idx) => val === b[idx]);\n}\n\nexport function isPromise(obj: any | Promise<any>): obj is Promise<any> {\n  return typeof obj === \"object\" && \"then\" in obj && typeof obj.then === \"function\";\n}\n\nexport function isFunction(f: any): f is Function {\n  return typeof f === \"function\";\n}\n\nexport function isDefined<T extends any>(param: T | undefined | null): param is T {\n  return param !== null && param !== undefined;\n}\n\nexport function pluralize(count: number | unknown[], noun: string, pluralNoun?: string): string {\n  if ((Array.isArray(count) ? count.length : count) === 1) return noun;\n  return pluralNoun || `${noun}s`;\n}\n"],"mappings":";AAAA,SAAS,iBAAiB;AAWnB,SAAS,cAAc,OAAuB;AAGnD,SAAO,UAAU,MAAM,QAAQ,KAAK,EAAE,CAAC;AACzC;;;ACoBO,SAAS,WAAW,OAAe,eAAgD;AACxF,QAAM,SACH,MAAc,aAAa;AAAA,GAE3B,gBAAgB,cAAc,aAAa,IAAI;AAClD,QAAM,SAAS,EAAE,eAAe,OAAO;AACvC,SAAO,sBAAsB,QAAQ,CAAC,QAAQ;AAE5C,UAAM,IAAI,QAAQ,KAAK,EAAE;AACzB,WAAO,EAAE,eAAe,SAAS,GAAG,MAAM,IAAI,GAAG,KAAK,IAAI;AAAA,EAC5D,CAAC;AACH;AAGO,SAAS,sBACd,QACA,eACuB;AACvB,SAAO,IAAI,MAAM,QAAQ;AAAA,IACvB,IAAIA,SAAQ,UAAU;AACpB,UAAI,QAAQ,IAAIA,SAAQ,QAAQ,GAAG;AACjC,eAAO,QAAQ,IAAIA,SAAQ,QAAQ;AAAA,MACrC,WAAW,aAAa,QAAQ;AAC9B,eAAO;AAAA,MACT,OAAO;AACL,eAAO,cAAc,OAAO,QAAQ,CAAC;AAAA,MACvC;AAAA,IACF;AAAA,EACF,CAAC;AACH;;;AC7DO,SAAS,KAAK,SAAyB;AAC5C,QAAM,IAAI,MAAM,WAAW,QAAQ;AACrC;AAGO,SAAS,cAAc,YAAqB,UAAiD;AAClG,SAAO;AAAA,IACL;AAAA,IACA,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,QAAQ,MAAM,SAAS,CAAC,UAAU;AAAA,EACpC;AACF;AAuCO,SAAS,UAAU,aAAmC,MAAa;AACxE,SAAO,YAAY,SAAS,GAAG,IAAI;AACrC;AAKO,SAAS,SAAY,UAA0B;AACpD,SAAO,OAAO,oBAAoB,QAAQ;AAC5C;AAGO,IAAM,UAAU,CAAuB,KAAQ,EAAE,CAAC,MAAM,GAAG,GAAG,IAAI,MAAS;AAE3E,IAAM,OAAO,IAAI,MAAW;AAAC;AAM7B,SAAS,YAA8B,KAAoB;AAChE,SAAO,OAAO,QAAQ,GAAG;AAC3B;AAEO,IAAM,WAAN,MAAiD;AAAA,EACtD,IAAI,UAAa;AACf,UAAM,IAAI,MAAM,yBAAyB;AAAA,EAC3C;AAAA,EAEA,IAAI,QAAQ,GAAG;AACb,UAAM,IAAI,MAAM,yBAAyB;AAAA,EAC3C;AACF;AAEO,IAAM,gBAAgB,CAAC,QAAgB,oBAAoB,KAAK,GAAG;AAMnE,SAAS,UAAU,KAA8C;AACtE,SAAO,OAAO,QAAQ,YAAY,UAAU,OAAO,OAAO,IAAI,SAAS;AACzE;AAEO,SAAS,WAAW,GAAuB;AAChD,SAAO,OAAO,MAAM;AACtB;AAEO,SAAS,UAAyB,OAAyC;AAChF,SAAO,UAAU,QAAQ,UAAU;AACrC;AAEO,SAAS,UAAU,OAA2B,MAAc,YAA6B;AAC9F,OAAK,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,WAAW,EAAG,QAAO;AAChE,SAAO,cAAc,GAAG,IAAI;AAC9B;","names":["object"]}

package/dist/index.cjs

@@ -4388,6 +4388,7 @@ function fail(message) {
 function toToggleState(isSelected, onChange) {
   return {
     isSelected,
+    defaultSelected: false,
     setSelected: onChange,
     toggle: () => onChange(!isSelected)
   };
@@ -8501,7 +8502,7 @@ var RowState = class {
     }
   }
   /** Used by node when doing `console.log(rs)`. */
-  [Symbol.for("nodejs.util.inspect.custom")]() {
+  [/* @__PURE__ */ Symbol.for("nodejs.util.inspect.custom")]() {
     return `RowState@${this.row.id}`;
   }
 };
@@ -9077,7 +9078,7 @@ function Menu(props) {
     const { items: items2, ...others } = tree;
     const [itemsSection, persistentSection] = items2;
     if (search) {
-      const filteredChildren = itemsSection.children.filter((item) => contains(item.value.label, search));
+      const filteredChildren = (itemsSection.children ?? []).filter((item) => contains(item.value.label, search));
       const { items: items3, ...otherValues } = itemsSection.value;
       const filteredValue = items3?.filter((item) => contains(item.label, search));
       return {
@@ -9518,18 +9519,21 @@ function ListBoxChip({ label }) {
 }
 
 // src/inputs/Value.ts
+var VALUE_PREFIX = "__VALUE--";
 function keyToValue(key) {
   if (typeof key === "number") {
     return key;
   } else if (typeof key === "string") {
-    if (key === "__VALUE:null") {
+    if (key === `${VALUE_PREFIX}null` || key === "__VALUE:null") {
       return null;
-    } else if (key === "__VALUE:undefined") {
+    } else if (key === `${VALUE_PREFIX}undefined` || key === "__VALUE:undefined") {
       return void 0;
-    } else if (key.startsWith("__VALUE:boolean:")) {
-      return key.split(":")[2] === "true";
-    } else if (key.startsWith("__VALUE:number")) {
-      return Number(key.split(":")[2]);
+    } else if (key.startsWith(`${VALUE_PREFIX}boolean--`) || key.startsWith("__VALUE:boolean:")) {
+      const parts = key.includes("--boolean--") ? key.split("--") : key.split(":");
+      return parts[parts.length - 1] === "true";
+    } else if (key.startsWith(`${VALUE_PREFIX}number--`) || key.startsWith("__VALUE:number:")) {
+      const parts = key.includes("--number--") ? key.split("--") : key.split(":");
+      return Number(parts[parts.length - 1]);
     } else {
       return key;
     }
@@ -9541,13 +9545,13 @@ function valueToKey(value) {
   if (typeof value === "string") {
     return value;
   } else if (typeof value === "number") {
-    return `__VALUE:number:${value}`;
+    return `${VALUE_PREFIX}number--${value}`;
   } else if (typeof value === "boolean") {
-    return `__VALUE:boolean:${value}`;
+    return `${VALUE_PREFIX}boolean--${value}`;
   } else if (value === null) {
-    return "__VALUE:null";
+    return `${VALUE_PREFIX}null`;
   } else if (value === void 0) {
-    return "__VALUE:undefined";
+    return `${VALUE_PREFIX}undefined`;
   } else {
     throw new Error(`Unsupported value ${value}`);
   }
@@ -10118,7 +10122,8 @@ function VirtualizedOptions(props) {
     allowCollapsing
   } = props;
   const virtuosoRef = (0, import_react45.useRef)(null);
-  const focusedItem = state.collection.getItem(state.selectionManager.focusedKey);
+  const focusedKey = state.selectionManager.focusedKey;
+  const focusedItem = focusedKey != null ? state.collection.getItem(focusedKey) : null;
   const selectedItem = state.selectionManager.selectedKeys.size > 0 ? state.collection.getItem([...state.selectionManager.selectedKeys.values()][0]) : void 0;
   (0, import_react45.useEffect)(
     () => {
@@ -10562,23 +10567,22 @@ function TreeSelectFieldBase(props) {
       }));
     }
   }
+  const comboBoxChildren = (0, import_react47.useCallback)(
+    ([item]) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_stately6.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))),
+    [getOptionValue, getOptionLabel, getOptionMenuLabel]
+  );
   const comboBoxProps = {
     ...otherProps,
     disabledKeys: Object.keys(disabledOptionsWithReasons),
     placeholder: !values || values.length === 0 ? placeholder : "",
     label: props.label,
     inputValue: fieldState.inputValue,
-    // where we might want to do flatmap and return diff kind of array (children ? add level prop) inside children callback - can put markup wrapper div adds padding
-    // so we're not doing it multiple places
     items: fieldState.filteredOptions,
     isDisabled,
     isReadOnly,
     onInputChange,
     onOpenChange,
-    children: ([item]) => (
-      // what we're telling it to render. look at padding here - don't have to pass down to tree option - filtered options is where we're flat mapping
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_stately6.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item)))
-    )
+    children: comboBoxChildren
   };
   const state = (0, import_react_stately6.useComboBoxState)({
     ...comboBoxProps,
@@ -10588,6 +10592,7 @@ function TreeSelectFieldBase(props) {
   state.selectionManager.state = (0, import_react_stately6.useMultipleSelectionState)({
     selectionMode: "multiple",
     selectedKeys: fieldState.selectedKeys,
+    disabledKeys: Object.keys(disabledOptionsWithReasons),
     onSelectionChange: (newKeys) => {
       if (newKeys === "all") {
         return;
@@ -10880,7 +10885,9 @@ function ComboBoxInput(props) {
           onKeyDown: (e) => {
             if (isMultiSelect) {
               if (isTree) {
-                const item = state.collection.getItem(state.selectionManager.focusedKey);
+                const focusedKey = state.selectionManager.focusedKey;
+                if (focusedKey == null) return;
+                const item = state.collection.getItem(focusedKey);
                 if (item && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
                   if (!isLeveledNode(item)) return;
                   const leveledOption = item.value;
@@ -10902,7 +10909,10 @@ function ComboBoxInput(props) {
                 if (state.isOpen) {
                   e.preventDefault();
                 }
-                state.selectionManager.toggleSelection(state.selectionManager.focusedKey);
+                const focusedKey = state.selectionManager.focusedKey;
+                if (focusedKey != null) {
+                  state.selectionManager.toggleSelection(focusedKey);
+                }
                 return;
               }
               if (e.key === "Escape") {
@@ -11090,6 +11100,10 @@ function ComboBoxBase(props) {
   const listBoxRef = (0, import_react49.useRef)(null);
   const popoverRef = (0, import_react49.useRef)(null);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
+  const comboBoxChildren = (0, import_react49.useCallback)(
+    (item) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_stately7.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))),
+    [getOptionValue, getOptionLabel, getOptionMenuLabel]
+  );
   const comboBoxProps = {
     ...otherProps,
     disabledKeys: Object.keys(disabledOptionsWithReasons),
@@ -11099,7 +11113,7 @@ function ComboBoxBase(props) {
     isReadOnly,
     onInputChange,
     onOpenChange,
-    children: (item) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_stately7.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item)))
+    children: comboBoxChildren
   };
   const state = (0, import_react_stately7.useComboBoxState)({
     ...comboBoxProps,
@@ -11124,7 +11138,8 @@ function ComboBoxBase(props) {
     // Do not allow an empty selection if single select mode
     disallowEmptySelection: !multiselect,
     selectedKeys,
-    onSelectionChange
+    onSelectionChange,
+    disabledKeys: Object.keys(disabledOptionsWithReasons)
   });
   const [debouncedSearch] = (0, import_use_debounce5.useDebounce)(searchValue, 300);
   (0, import_react49.useEffect)(() => {
@@ -11298,6 +11313,10 @@ function Autocomplete(props) {
     ...others
   } = props;
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
+  const comboBoxChildren = (0, import_react50.useCallback)(
+    (item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_stately8.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
+    [getOptionValue, getOptionLabel, getOptionMenuLabel]
+  );
   const comboBoxProps = {
     isDisabled: !!disabled,
     disabledKeys: Object.keys(disabledOptionsWithReasons),
@@ -11306,8 +11325,9 @@ function Autocomplete(props) {
     items: options,
     // Allow the user to type in a value that is not in the list. Allows for the text to stay in the input when the user clicks away
     allowsCustomValue: true,
-    children: (item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_stately8.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
+    children: comboBoxChildren,
     onSelectionChange: (key) => {
+      if (key == null) return;
       const selectedItem = options.find((i) => getOptionValue(i) === key);
       if (selectedItem) {
         onInputChange(getOptionLabel(selectedItem));
@@ -12146,7 +12166,6 @@ function RadioGroupField(props) {
       /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Label, { label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden" }),
       /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { ...radioGroupProps, children: [
         options.map((option) => {
-          const isDisabled = state.isDisabled || !!option.disabled;
           return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react58.Fragment, { children: maybeTooltip({
             title: resolveTooltip(option.disabled),
             placement: "bottom",
@@ -12155,7 +12174,8 @@ function RadioGroupField(props) {
               {
                 parentId: name,
                 option,
-                state: { ...state, isDisabled },
+                state,
+                isOptionDisabled: !!option.disabled,
                 ...otherProps,
                 ...tid[option.value]
               }
@@ -12173,13 +12193,18 @@ function Radio(props) {
     parentId,
     option: { description, label, value },
     state,
+    isOptionDisabled,
     ...others
   } = props;
-  const disabled = state.isDisabled;
   const labelId = `${parentId}-${value}-label`;
   const descriptionId = `${parentId}-${value}-description`;
   const ref = (0, import_react58.useRef)(null);
-  const { inputProps } = (0, import_react_aria34.useRadio)({ value, "aria-labelledby": labelId }, state, ref);
+  const { inputProps, isDisabled } = (0, import_react_aria34.useRadio)(
+    { value, "aria-labelledby": labelId, isDisabled: isOptionDisabled },
+    state,
+    ref
+  );
+  const disabled = isDisabled;
   const { focusProps, isFocusVisible } = (0, import_react_aria34.useFocusRing)();
   const { hoverProps, isHovered } = (0, import_react_aria34.useHover)({ isDisabled: disabled });
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("label", { css: Css.df.cursorPointer.mb1.if(disabled).add("cursor", "initial").$, ...hoverProps, children: [
@@ -17825,7 +17850,10 @@ function ButtonDatePicker(props) {
   const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
   const state = (0, import_react_stately18.useMenuTriggerState)({ isOpen: defaultOpen });
   const buttonRef = (0, import_react105.useRef)(null);
-  const { menuTriggerProps, menuProps } = (0, import_react_aria46.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
+  const {
+    menuTriggerProps,
+    menuProps: { autoFocus: _af, ...menuProps }
+  } = (0, import_react_aria46.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
     isTextButton(trigger) ? defaultTestId(labelOr(trigger, "buttonDatePicker")) : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name