@homebound/beam 2.238.1 → 2.238.2

package/dist/inputs/internal/ListBox.js

@@ -53,9 +53,11 @@ function ListBox(props) {
         firstRender.current = false;
     }, [state.selectionManager.selectedKeys.size]);
     return ((0, jsx_runtime_1.jsxs)("div", { css: {
+            // If `horizontalLayout`, then that means `labelStyle === "left"`. In this case the label the the field both take 50% of the horizontal space.
+            // Add `w50` in that case to ensure the ListBox is only the width of the field. If the width definitions ever change, we need to update here as well.
             ...Css_1.Css.bgWhite.br4.w100.bshBasic.hPx(popoverHeight).df.fdc.if(contrast).bgGray700.if(horizontalLayout).w50.$,
             "&:hover": Css_1.Css.bshHover.$,
-        }, ref: listBoxRef, ...listBoxProps, children: [isMultiSelect && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", { 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)))) })), (0, jsx_runtime_1.jsx)("ul", { 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, 
+        }, ref: listBoxRef, ...listBoxProps, children: [isMultiSelect && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bGray200.add("flexWrap", "wrap").maxh("50%").overflowAuto.$, 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)))) })), (0, jsx_runtime_1.jsx)("ul", { 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, 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))

package/dist/inputs/internal/SelectFieldBase.js

@@ -7,6 +7,7 @@ const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 const components_1 = require("../../components");
 const internal_1 = require("../../components/internal");
+const PresentationContext_1 = require("../../components/PresentationContext");
 const Css_1 = require("../../Css");
 const ListBox_1 = require("./ListBox");
 const SelectFieldInput_1 = require("./SelectFieldInput");
@@ -22,8 +23,10 @@ const utils_1 = require("../../utils");
  * and so we cannot easily change them.
  */
 function SelectFieldBase(props) {
-    var _a, _b;
+    var _a, _b, _c, _d;
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     const { disabled, readOnly, onSelect, options, multiselect = false, values = [], nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, ...otherProps } = props;
+    const labelStyle = (_b = (_a = otherProps.labelStyle) !== null && _a !== void 0 ? _a : fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _b !== void 0 ? _b : "above";
     // Call `initializeOptions` to prepend the `unset` option if the `unsetLabel` was provided.
     const maybeOptions = (0, react_1.useMemo)(() => initializeOptions(options, unsetLabel), [options, unsetLabel]);
     // Memoize the callback functions and handle the `unset` option if provided.
@@ -145,7 +148,7 @@ function SelectFieldBase(props) {
     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 disabledOptionsWithReasons = Object.fromEntries((_c = disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions.map(disabledOptionToKeyedTuple)) !== null && _c !== void 0 ? _c : []);
     const comboBoxProps = {
         ...otherProps,
         disabledKeys: Object.keys(disabledOptionsWithReasons),
@@ -243,11 +246,11 @@ function SelectFieldBase(props) {
     });
     positionProps.style = {
         ...positionProps.style,
-        width: (_b = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth,
+        width: (_d = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _d === void 0 ? void 0 : _d.clientWidth,
         // 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(otherProps.labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, { ...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 }), 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: otherProps.labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
+    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)(SelectFieldInput_1.SelectFieldInput, { ...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 }), 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 }) }))] }));
 }
 exports.SelectFieldBase = SelectFieldBase;
 function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText) {

package/package.json

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