@homebound/beam 2.219.0 → 2.221.0

package/dist/components/ButtonMenu.d.ts

@@ -3,6 +3,7 @@ import { OverlayTriggerProps } from "./internal/OverlayTrigger";
 interface ButtonMenuProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip" | "showActiveBorder"> {
     items: MenuItem[];
     persistentItems?: MenuItem[];
+    searchable?: boolean;
     defaultOpen?: boolean;
 }
 export declare function ButtonMenu(props: ButtonMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/ButtonMenu.js

@@ -9,11 +9,11 @@ const Menu_1 = require("./internal/Menu");
 const OverlayTrigger_1 = require("./internal/OverlayTrigger");
 const utils_1 = require("../utils");
 function ButtonMenu(props) {
-    const { defaultOpen, disabled, items, persistentItems, trigger } = props;
+    const { defaultOpen, disabled, items, persistentItems, trigger, searchable } = props;
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
     const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, Object.assign({ ariaMenuProps: menuProps, onClose: () => state.close(), items: items, persistentItems: persistentItems }, tid), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, Object.assign({ ariaMenuProps: menuProps, onClose: () => state.close(), items: items, persistentItems: persistentItems, searchable: searchable }, tid), void 0) }), void 0));
 }
 exports.ButtonMenu = ButtonMenu;

package/dist/components/internal/Menu.d.ts

@@ -4,6 +4,7 @@ interface MenuProps<T> {
     ariaMenuProps: HTMLAttributes<HTMLElement>;
     onClose: VoidFunction;
     items: MenuItem[];
+    searchable?: boolean;
     persistentItems?: MenuItem[];
 }
 export declare function Menu<T>(props: PropsWithChildren<MenuProps<T>>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/internal/Menu.js

@@ -8,9 +8,10 @@ const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 const MenuSection_1 = require("./MenuSection");
 const Css_1 = require("../../Css");
+const MenuSearchField_1 = require("../../inputs/internal/MenuSearchField");
 const utils_1 = require("../../utils");
 function Menu(props) {
-    const { ariaMenuProps, items, persistentItems, onClose } = props;
+    const { ariaMenuProps, items, persistentItems, onClose, searchable } = props;
     // Build out the Menu's Tree data to include the Persistent Action, if any. This is a collection of Nodes that is used
     // by React-Aria to keep track of item states such as focus, and provide hooks for calling those actions.
     const tree = (0, react_stately_1.useTreeData)({
@@ -18,20 +19,49 @@ function Menu(props) {
         getKey: (item) => (0, change_case_1.camelCase)(item.label),
         getChildren: (item) => { var _a; return (_a = item.items) !== null && _a !== void 0 ? _a : []; },
     });
+    const [search, setSearch] = (0, react_1.useState)(undefined);
+    let { contains } = (0, react_aria_1.useFilter)({
+        sensitivity: "base",
+    });
+    // Filter our tree data items based on the search term
+    const filteredTree = (0, react_1.useMemo)(() => {
+        const { items, ...others } = tree;
+        const [itemsSection, persistentSection] = items;
+        if (search) {
+            const filteredChildren = itemsSection.children.filter((item) => contains(item.value.label, search));
+            const { items, ...otherValues } = itemsSection.value;
+            const filteredValue = items === null || items === void 0 ? void 0 : items.filter((item) => contains(item.label, search));
+            return {
+                ...others,
+                items: [
+                    { ...itemsSection, value: { ...otherValues, children: filteredChildren, items: filteredValue } },
+                    persistentSection,
+                ],
+            };
+        }
+        else {
+            return tree;
+        }
+    }, [tree, search, contains]);
     const menuChildren = (0, react_1.useMemo)(() => {
-        return tree.items.map(({ value: s }) => ((0, jsx_runtime_1.jsx)(react_stately_1.Section, Object.assign({ title: s.label, items: s.items }, { children: (item) => (0, jsx_runtime_1.jsx)(react_stately_1.Item, { children: item.label }, item.label.replace(/"/g, "")) }), s.label.replace(/"/g, ""))));
-    }, [tree]);
-    const state = (0, react_stately_1.useTreeState)({ children: menuChildren, items: tree.items.map((i) => i.value), selectionMode: "none" });
+        return filteredTree.items.map(({ value: s }) => ((0, jsx_runtime_1.jsx)(react_stately_1.Section, Object.assign({ title: s.label, items: s.items }, { children: (item) => (0, jsx_runtime_1.jsx)(react_stately_1.Item, { children: item.label }, item.label.replace(/"/g, "")) }), s.label.replace(/"/g, ""))));
+    }, [filteredTree]);
+    const state = (0, react_stately_1.useTreeState)({
+        children: menuChildren,
+        items: filteredTree.items.map((i) => i.value),
+        selectionMode: "none",
+    });
     const menuRef = (0, react_1.useRef)(null);
-    const { menuProps } = (0, react_aria_1.useMenu)({ ...ariaMenuProps, autoFocus: true }, state, menuRef);
+    const { menuProps } = (0, react_aria_1.useMenu)({ ...ariaMenuProps, autoFocus: searchable ? false : true }, state, menuRef);
     const tid = (0, utils_1.useTestIds)(props);
     // Bulk updates of MenuItems below. If we find this to be of sluggish performance, then we can change to be more surgical in our updating.
     // If our list of items change, update the "items" menu section. (key is based on label in `getKey` above)
-    (0, react_1.useEffect)(() => tree.update("items", { label: "items", items }), [items]);
-    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: {
-                // Using `max-height: inherit` allows us to take advantage of the height set on the overlay container, which updates based on the available space for the overlay within the viewport
-                ...Css_1.Css.df.fdc.myPx(4).bgWhite.outline0.br4.bshBasic.listReset.maxh("inherit").overflowAuto.$,
-                "&:hover, &:focus": Css_1.Css.bshHover.$,
-            } }, menuProps, { ref: menuRef }, tid.menu, { children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, Object.assign({ section: item, state: state, onClose: onClose }, tid), item.key))) }), void 0) }, void 0));
+    (0, react_1.useEffect)(() => filteredTree.update("items", { label: "items", items }), [items]);
+    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ 
+            // Using `max-height: inherit` allows us to take advantage of the height set on the overlay container, which updates based on the available space for the overlay within the viewport
+            css: {
+                ...Css_1.Css.df.fdc.myPx(4).bgWhite.outline0.br4.bshBasic.maxh("inherit").overflowAuto.$,
+                "&:hover": Css_1.Css.bshHover.$,
+            } }, { children: [searchable && ((0, jsx_runtime_1.jsx)(MenuSearchField_1.MenuSearchField, Object.assign({ label: "", value: search, placeholder: "Search...", inlineLabel: true, onChange: setSearch }, tid), void 0)), (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.$ }, menuProps, { ref: menuRef }, tid.menu, { children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, Object.assign({ section: item, state: state, onClose: onClose }, tid), item.key))) }), void 0)] }), void 0) }, void 0));
 }
 exports.Menu = Menu;

package/dist/inputs/internal/ListBox.d.ts

@@ -9,6 +9,7 @@ interface ListBoxProps<O, V extends Key> {
     contrast?: boolean;
     positionProps: React.HTMLAttributes<Element>;
     loading?: boolean | (() => JSX.Element);
+    disabledOptionsWithReasons?: Record<string, string | undefined>;
 }
 /** A ListBox is an internal component used by SelectField and MultiSelectField to display the list of options */
 export declare function ListBox<O, V extends Key>(props: ListBoxProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/internal/ListBox.js

@@ -12,7 +12,7 @@ const VirtualizedOptions_1 = require("./VirtualizedOptions");
 /** A ListBox is an internal component used by SelectField and MultiSelectField to display the list of options */
 function ListBox(props) {
     var _a;
-    const { state, listBoxRef, selectedOptions = [], getOptionLabel, getOptionValue, contrast = false, positionProps, loading, } = props;
+    const { state, listBoxRef, selectedOptions = [], getOptionLabel, getOptionValue, contrast = false, positionProps, loading, disabledOptionsWithReasons = {}, } = props;
     const { listBoxProps } = (0, react_aria_1.useListBox)({ disallowEmptySelection: true, ...props }, state, listBoxRef);
     const positionMaxHeight = (_a = positionProps.style) === null || _a === void 0 ? void 0 : _a.maxHeight;
     // The popoverMaxHeight will be based on the value defined by the positionProps returned from `useOverlayPosition` (which will always be a defined as a `number` based on React-Aria's `calculatePosition`).
@@ -57,9 +57,9 @@ function ListBox(props) {
             "&:hover": Css_1.Css.bshHover.$,
         }, ref: listBoxRef }, listBoxProps, { children: [isMultiSelect && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bGray200.add("flexWrap", "wrap").$, ref: selectedList }, { children: selectedOptions.map((o) => ((0, jsx_runtime_1.jsx)(ListBoxToggleChip_1.ListBoxToggleChip, { state: state, option: o, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o)))) }), void 0)), (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.fg1.$ }, { children: hasSections ? ([...state.collection].map((section) => ((0, jsx_runtime_1.jsx)(ListBoxSection_1.ListBoxSection, { section: section, state: state, contrast: contrast, onListHeightChange: onListHeightChange, popoverHeight: popoverHeight, 
                     // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
-                    scrollOnFocus: props.shouldUseVirtualFocus }, section.key)))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: [...state.collection], onListHeightChange: onListHeightChange, contrast: contrast, 
+                    scrollOnFocus: props.shouldUseVirtualFocus, disabledOptionsWithReasons: disabledOptionsWithReasons }, section.key)))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: [...state.collection], onListHeightChange: onListHeightChange, contrast: contrast, 
                     // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
-                    scrollOnFocus: props.shouldUseVirtualFocus, loading: loading }, void 0)) }), void 0)] }), void 0));
+                    scrollOnFocus: props.shouldUseVirtualFocus, loading: loading, disabledOptionsWithReasons: disabledOptionsWithReasons }, void 0)) }), void 0)] }), void 0));
 }
 exports.ListBox = ListBox;
 // UX specified maximum height for a ListBox (in pixels)

package/dist/inputs/internal/ListBoxSection.d.ts

@@ -7,6 +7,7 @@ interface ListBoxSectionProps<O> {
     onListHeightChange: (height: number) => void;
     popoverHeight: number;
     scrollOnFocus?: boolean;
+    disabledOptionsWithReasons: Record<string, string | undefined>;
 }
 export declare function ListBoxSection<O>(props: ListBoxSectionProps<O>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/internal/ListBoxSection.js

@@ -10,11 +10,11 @@ const VirtualizedOptions_1 = require("./VirtualizedOptions");
 // Creates a section of options within a ListBox.
 // Currently only expects two possible sections; 1. The list of options, and 2. A persistent action (in that order).
 function ListBoxSection(props) {
-    const { section, state, contrast, onListHeightChange, popoverHeight, scrollOnFocus } = props;
+    const { section, state, contrast, onListHeightChange, popoverHeight, scrollOnFocus, disabledOptionsWithReasons } = props;
     const { itemProps, groupProps } = (0, react_aria_1.useListBoxSection)(section);
     const { separatorProps } = (0, react_aria_1.useSeparator)({ elementType: "li" });
     const isPersistentSection = section.key !== state.collection.getFirstKey();
     const childNodes = [...section.childNodes];
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isPersistentSection && (0, jsx_runtime_1.jsx)("li", Object.assign({}, separatorProps, { css: Css_1.Css.bt.bGray200.$ }), void 0), (0, jsx_runtime_1.jsx)("li", Object.assign({}, itemProps, { css: Css_1.Css.if(!isPersistentSection).overflowAuto.$ }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.if(!isPersistentSection).hPx(popoverHeight - constants_1.sectionSeparatorHeight - constants_1.persistentItemHeight).$ }, groupProps, { children: isPersistentSection ? (childNodes.map((item) => (0, jsx_runtime_1.jsx)(Option_1.Option, { item: item, state: state, contrast: contrast }, item.key))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: childNodes, onListHeightChange: onListHeightChange, contrast: contrast, scrollOnFocus: scrollOnFocus }, void 0)) }), void 0) }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isPersistentSection && (0, jsx_runtime_1.jsx)("li", Object.assign({}, separatorProps, { css: Css_1.Css.bt.bGray200.$ }), void 0), (0, jsx_runtime_1.jsx)("li", Object.assign({}, itemProps, { css: Css_1.Css.if(!isPersistentSection).overflowAuto.$ }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.if(!isPersistentSection).hPx(popoverHeight - constants_1.sectionSeparatorHeight - constants_1.persistentItemHeight).$ }, groupProps, { children: isPersistentSection ? (childNodes.map((item) => ((0, jsx_runtime_1.jsx)(Option_1.Option, { item: item, state: state, contrast: contrast, disabledReason: disabledOptionsWithReasons[item.key] }, item.key)))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: childNodes, onListHeightChange: onListHeightChange, contrast: contrast, scrollOnFocus: scrollOnFocus, disabledOptionsWithReasons: disabledOptionsWithReasons }, void 0)) }), void 0) }), void 0)] }, void 0));
 }
 exports.ListBoxSection = ListBoxSection;

package/dist/inputs/internal/MenuSearchField.d.ts

@@ -0,0 +1,7 @@
+import { Only } from "../../Css";
+import { BeamTextFieldProps, TextFieldXss } from "../../interfaces";
+interface TextFieldProps<X> extends BeamTextFieldProps<X> {
+    inlineLabel: boolean;
+}
+export declare function MenuSearchField<X extends Only<TextFieldXss, X>>(props: TextFieldProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/inputs/internal/MenuSearchField.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSearchField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const textfield_1 = require("@react-aria/textfield");
+const react_1 = require("react");
+const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const TextFieldBase_1 = require("../TextFieldBase");
+function MenuSearchField(props) {
+    const tid = (0, utils_1.useTestIds)(props);
+    const inputRef = (0, react_1.useRef)(null);
+    const { labelProps, inputProps } = (0, textfield_1.useTextField)({ ...props }, inputRef);
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({ label: "", labelProps: labelProps, inputProps: inputProps, startAdornment: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "search" }, void 0) }, tid.search), void 0));
+}
+exports.MenuSearchField = MenuSearchField;

package/dist/inputs/internal/Option.d.ts

@@ -5,6 +5,7 @@ interface OptionProps<O> {
     state: ListState<O> | TreeState<O>;
     contrast?: boolean;
     scrollToIndex?: (index: number) => void;
+    disabledReason?: string;
 }
 /** Represents a single option within a ListBox - used by SelectField and MultiSelectField */
 export declare function Option<O>(props: OptionProps<O>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/internal/Option.js

@@ -4,12 +4,13 @@ exports.Option = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
+const components_1 = require("../../components");
 const Icon_1 = require("../../components/Icon");
 const Css_1 = require("../../Css");
 const ChipSelectField_1 = require("../ChipSelectField");
 /** Represents a single option within a ListBox - used by SelectField and MultiSelectField */
 function Option(props) {
-    const { item, state, contrast = false, scrollToIndex } = props;
+    const { item, state, contrast = false, scrollToIndex, disabledReason } = props;
     const ref = (0, react_1.useRef)(null);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
     const themeStyles = {
@@ -39,20 +40,24 @@ function Option(props) {
             scrollToIndex(toItem.index);
         }
     }, [scrollToIndex, state]);
-    return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, (0, react_aria_1.mergeProps)(optionProps, hoverProps, { onKeyDown }), { ref: ref, css: {
-            ...Css_1.Css.df.aic.jcsb.py1.px2.mh("42px").outline0.cursorPointer.sm.$,
-            // Assumes only one Persistent Item per list - will need to change to utilize Sections if that assumption is incorrect.
-            ...((0, ChipSelectField_1.isPersistentKey)(item.key) ? Css_1.Css.bt.bGray200.$ : {}),
-            ...themeStyles.item,
-            ...(isHovered && !isDisabled ? themeStyles.hover : {}),
-            ...(isFocused ? themeStyles.focus : {}),
-            ...(isDisabled ? themeStyles.disabled : {}),
-        } }, { children: [item.rendered, isSelected && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "check", color: !contrast
-                        ? isDisabled
-                            ? Css_1.Palette.Gray400
-                            : Css_1.Palette.LightBlue700
-                        : isDisabled
-                            ? Css_1.Palette.Gray500
-                            : Css_1.Palette.White }, void 0) }), void 0))] }), void 0));
+    return (0, components_1.maybeTooltip)({
+        title: disabledReason,
+        placement: "right",
+        children: ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, (0, react_aria_1.mergeProps)(optionProps, hoverProps, { onKeyDown }), { ref: ref, css: {
+                ...Css_1.Css.df.aic.jcsb.py1.px2.mh("42px").outline0.cursorPointer.sm.$,
+                // Assumes only one Persistent Item per list - will need to change to utilize Sections if that assumption is incorrect.
+                ...((0, ChipSelectField_1.isPersistentKey)(item.key) ? Css_1.Css.bt.bGray200.$ : {}),
+                ...themeStyles.item,
+                ...(isHovered && !isDisabled ? themeStyles.hover : {}),
+                ...(isFocused ? themeStyles.focus : {}),
+                ...(isDisabled ? themeStyles.disabled : {}),
+            } }, { children: [item.rendered, isSelected && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "check", color: !contrast
+                            ? isDisabled
+                                ? Css_1.Palette.Gray400
+                                : Css_1.Palette.LightBlue700
+                            : isDisabled
+                                ? Css_1.Palette.Gray500
+                                : Css_1.Palette.White }, void 0) }), void 0))] }), void 0)),
+    });
 }
 exports.Option = Option;

package/dist/inputs/internal/SelectFieldBase.d.ts

@@ -11,7 +11,10 @@ export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusa
     values: V[] | undefined;
     onSelect: (values: V[], opts: O[]) => void;
     multiselect?: boolean;
-    disabledOptions?: V[];
+    disabledOptions?: (V | {
+        value: V;
+        reason: string;
+    })[];
     options: OptionsOrLoad<O>;
     /** Whether the field is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
     disabled?: boolean | ReactNode;

package/dist/inputs/internal/SelectFieldBase.js

@@ -22,7 +22,7 @@ const utils_1 = require("../../utils");
  * and so we cannot easily change them.
  */
 function SelectFieldBase(props) {
-    var _a;
+    var _a, _b;
     const { disabled, readOnly, onSelect, options, multiselect = false, values = [], nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, ...otherProps } = props;
     // Call `initializeOptions` to prepend the `unset` option if the `unsetLabel` was provided.
     const maybeOptions = (0, react_1.useMemo)(() => initializeOptions(options, unsetLabel), [options, unsetLabel]);
@@ -143,9 +143,12 @@ function SelectFieldBase(props) {
     const inputWrapRef = (0, react_1.useRef)(null);
     const listBoxRef = (0, react_1.useRef)(null);
     const popoverRef = (0, react_1.useRef)(null);
+    // `disabledKeys` from ComboBoxState does not support additional meta for showing a disabled reason to the user
+    // This lookup map helps us cleanly prune out the optional reason text, then access it further down the component tree
+    const disabledOptionsWithReasons = Object.fromEntries((_a = disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions.map(disabledOptionToKeyedTuple)) !== null && _a !== void 0 ? _a : []);
     const comboBoxProps = {
         ...otherProps,
-        disabledKeys: disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions.map(Value_1.valueToKey),
+        disabledKeys: Object.keys(disabledOptionsWithReasons),
         inputValue: fieldState.inputValue,
         items: fieldState.filteredOptions,
         isDisabled,
@@ -240,11 +243,11 @@ function SelectFieldBase(props) {
     });
     positionProps.style = {
         ...positionProps.style,
-        width: (_a = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth,
+        width: (_b = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth,
         // Ensures the menu never gets too small.
         minWidth: 200,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, Object.assign({}, 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 }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200 }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, loading: fieldState.optionsLoading }), void 0) }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, Object.assign({}, 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 }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200 }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }), void 0) }), void 0))] }), void 0));
 }
 exports.SelectFieldBase = SelectFieldBase;
 function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText) {
@@ -268,3 +271,11 @@ function getOptionsWithUnset(unsetLabel, options) {
     return [exports.unsetOption, ...options];
 }
 exports.unsetOption = {};
+function disabledOptionToKeyedTuple(disabledOption) {
+    if (typeof disabledOption === "object" && disabledOption !== null) {
+        return [(0, Value_1.valueToKey)(disabledOption.value), disabledOption.reason];
+    }
+    else {
+        return [(0, Value_1.valueToKey)(disabledOption), undefined];
+    }
+}

package/dist/inputs/internal/VirtualizedOptions.d.ts

@@ -7,6 +7,7 @@ interface VirtualizedOptionsProps<O> {
     contrast: boolean;
     scrollOnFocus?: boolean;
     loading?: boolean | (() => JSX.Element);
+    disabledOptionsWithReasons: Record<string, string | undefined>;
 }
 export declare function VirtualizedOptions<O>(props: VirtualizedOptionsProps<O>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/internal/VirtualizedOptions.js

@@ -8,7 +8,7 @@ const LoadingDots_1 = require("./LoadingDots");
 const Option_1 = require("./Option");
 // Displays ListBox options in a virtualized container for performance reasons
 function VirtualizedOptions(props) {
-    const { state, items, onListHeightChange, contrast, scrollOnFocus, loading } = props;
+    const { state, items, onListHeightChange, contrast, scrollOnFocus, loading, disabledOptionsWithReasons } = props;
     const virtuosoRef = (0, react_1.useRef)(null);
     const focusedItem = state.collection.getItem(state.selectionManager.focusedKey);
     const selectedItem = state.selectionManager.selectedKeys.size > 0
@@ -32,7 +32,7 @@ function VirtualizedOptions(props) {
             if (item) {
                 return ((0, jsx_runtime_1.jsx)(Option_1.Option, { item: item, state: state, contrast: contrast, 
                     // Only send scrollToIndex functionality forward if we are not auto-scrolling on focus.
-                    scrollToIndex: scrollOnFocus ? undefined : (_a = virtuosoRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex }, item.key));
+                    scrollToIndex: scrollOnFocus ? undefined : (_a = virtuosoRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex, disabledReason: disabledOptionsWithReasons[item.key] }, item.key));
             }
         }, components: !loading
             ? {}

package/package.json

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