@homebound/beam 2.219.0 → 2.220.0

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/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.220.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",