@homebound/beam 2.70.0 → 2.71.3

package/dist/components/Tabs.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import type { IconKey } from "./";
-import { Margin, Only, Properties, Xss } from "../Css";
+import { Margin, Only, Xss } from "../Css";
 export interface Tab<V extends string = string> {
     name: string;
     value: V;
@@ -9,13 +9,20 @@ export interface Tab<V extends string = string> {
     render: () => ReactNode;
 }
 declare type TabsContentXss = Xss<Margin>;
-export interface TabsProps<V extends string, X extends Properties> {
+export interface TabsProps<V extends string, X> {
     ariaLabel?: string;
     selected: V;
     tabs: Tab<V>[];
     onChange: (value: V) => void;
     contentXss?: X;
 }
+export interface RouteTabsProps<V extends string, X> extends Omit<TabsProps<V, X>, "onChange" | "selected" | "tabs"> {
+    tabs: RouteTab<V>[];
+}
+export interface RouteTab<V extends string> extends Omit<Tab<V>, "value"> {
+    href: V;
+    path: string | string[];
+}
 /**
  * Provides a list of tabs and their content.
  *
@@ -25,10 +32,10 @@ export interface TabsProps<V extends string, X extends Properties> {
  * If you want to tease apart Tabs from their TabContent, you can use the `Tab`
  * and `TabContent` components directly.
  */
-export declare function TabsWithContent<V extends string, X extends Only<TabsContentXss, X>>(props: TabsProps<V, X>): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function TabContent<V extends string>(props: Omit<TabsProps<V, {}>, "onChange">): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function TabsWithContent<V extends string, X extends Only<TabsContentXss, X>>(props: TabsProps<V, X> | RouteTabsProps<V, X>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function TabContent<V extends string>(props: Omit<TabsProps<V, {}>, "onChange"> | RouteTabsProps<V, {}>): import("@emotion/react/jsx-runtime").JSX.Element;
 /** The top list of tabs. */
-export declare function Tabs<V extends string>(props: TabsProps<V, {}>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Tabs<V extends string>(props: TabsProps<V, {}> | RouteTabsProps<V, {}>): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function getTabStyles(): {
     baseStyles: {
         display: import("csstype").Property.Display | undefined;
@@ -87,5 +94,5 @@ export declare function getTabStyles(): {
         color: import("csstype").Property.Color | undefined;
     };
 };
-export declare function getNextTabValue<V extends string>(selected: V, key: "ArrowLeft" | "ArrowRight", tabs: Tab<V>[]): V;
+export declare function getNextTabValue<V extends string>(selected: V, key: "ArrowLeft" | "ArrowRight", tabs: Tab<V>[] | RouteTab<V>[]): V;
 export {};

package/dist/components/Tabs.js

@@ -2,10 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getNextTabValue = exports.getTabStyles = exports.Tabs = exports.TabContent = exports.TabsWithContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const change_case_1 = require("change-case");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
+const react_router_1 = require("react-router");
+const react_router_dom_1 = require("react-router-dom");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
 const Icon_1 = require("./Icon");
 /**
  * Provides a list of tabs and their content.
@@ -18,69 +22,100 @@ const Icon_1 = require("./Icon");
  */
 function TabsWithContent(props) {
     const onlyOneTabEnabled = props.tabs.filter((t) => !t.disabled).length === 1;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!onlyOneTabEnabled && (0, jsx_runtime_1.jsx)(Tabs, Object.assign({}, props), void 0), (0, jsx_runtime_1.jsx)(TabContent, Object.assign({}, props), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!onlyOneTabEnabled && (0, jsx_runtime_1.jsx)(Tabs, Object.assign({}, props), void 0), (0, jsx_runtime_1.jsx)(TabContent, Object.assign({}, props), void 0)] }, void 0));
 }
 exports.TabsWithContent = TabsWithContent;
 function TabContent(props) {
     const tid = (0, utils_1.useTestIds)(props, "tab");
-    const { selected, tabs, contentXss = {} } = props;
-    const selectedTab = tabs.find((tab) => tab.value === selected) || tabs[0];
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-labelledby": `${selectedTab.value}-tab`, id: `${selectedTab.value}-tabPanel`, role: "tabpanel", tabIndex: 0 }, tid.panel, { css: { ...Css_1.Css.mt2.$, ...contentXss } }, { children: selectedTab.render() }), void 0));
+    const { tabs, contentXss = {} } = props;
+    const location = (0, react_router_1.useLocation)();
+    const selectedTab = isRouteTabs(props)
+        ? props.tabs.find((t) => {
+            const paths = Array.isArray(t.path) ? t.path : [t.path];
+            return paths.some((p) => !!(0, react_router_1.matchPath)(location.pathname, { path: t.path, exact: true }));
+        }) || tabs[0]
+        : props.tabs.find((tab) => tab.value === props.selected) || tabs[0];
+    const uniqueValue = uniqueTabValue(selectedTab);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0 }, tid.panel, { css: { ...Css_1.Css.mt2.$, ...contentXss } }, { children: isRouteTab(selectedTab) ? (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: selectedTab.path, render: selectedTab.render }, void 0) : selectedTab.render() }), void 0));
 }
 exports.TabContent = TabContent;
 /** The top list of tabs. */
 function Tabs(props) {
-    const { ariaLabel, onChange, selected, tabs, ...others } = props;
+    const { ariaLabel, tabs, ...others } = props;
+    const location = (0, react_router_1.useLocation)();
+    const selected = isRouteTabs(props)
+        ? uniqueTabValue(props.tabs.find((t) => !!(0, react_router_1.matchPath)(location.pathname, { path: t.path, exact: true })) || props.tabs[0])
+        : props.selected;
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)();
     const tid = (0, utils_1.useTestIds)(others, "tabs");
     const [active, setActive] = (0, react_1.useState)(selected);
+    const ref = (0, react_1.useRef)(null);
     // Whenever selected changes, reset active
     (0, react_1.useEffect)(() => setActive(selected), [selected]);
     // the active tab is highlighted, but not necessarily "selected"
     // the selected tab dictates what is displayed in the content panel
-    function handleKeyUp(e) {
+    function onKeyUp(e) {
+        var _a;
         // left and right arrow keys update the active tab
         if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
             const nextTabValue = getNextTabValue(active, e.key, tabs);
             setActive(nextTabValue);
-        }
-        // hitting enter will select the active tab and display the related contents
-        if (e.key === "Enter") {
-            onChange(active);
+            // Ensure the browser's focus follows the active element.
+            (_a = document.getElementById(`${nextTabValue}-tab`)) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
     // clicking on a tab sets it to selected and active
-    function handleOnClick(value) {
-        onChange(value);
-        setActive(value);
+    function onClick(value) {
+        !isRouteTabs(props) && props.onChange(value);
     }
     // bluring out resets active to whatever selected is
-    function handleBlur() {
-        setActive(selected);
+    function onBlur(e) {
+        // only reset active state if we've moved focus out of the tab list
+        if (!(ref.current && ref.current.contains(e.relatedTarget))) {
+            setActive(selected);
+        }
     }
     // We also check this in TabsWithContent, but if someone is using Tabs standalone, check it here as well
     const onlyOneTabEnabled = props.tabs.filter((t) => !t.disabled).length === 1;
     if (onlyOneTabEnabled) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.dif.childGap1.$, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
-            const { name, value, icon, disabled = false } = tab;
-            return ((0, jsx_runtime_1.jsx)(SingleTab, Object.assign({ active: active === value, disabled: disabled, focusProps: focusProps, icon: icon, isFocusVisible: isFocusVisible, label: name, onClick: disabled ? () => { } : handleOnClick, onKeyUp: handleKeyUp, onBlur: handleBlur, value: value }, tid[value]), value));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: Css_1.Css.dif.childGap1.$, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
+            const uniqueValue = uniqueTabValue(tab);
+            return ((0, jsx_runtime_1.jsx)(TabImpl, Object.assign({ active: active === uniqueValue, focusProps: focusProps, isFocusVisible: isFocusVisible, onClick: onClick, onKeyUp: onKeyUp, onBlur: onBlur, tab: tab }, tid[(0, defaultTestId_1.defaultTestId)(uniqueValue)]), uniqueValue));
         }) }), void 0));
 }
 exports.Tabs = Tabs;
-function SingleTab(props) {
-    const { disabled: isDisabled, label, value, onClick, active, icon = false, onKeyUp, onBlur, focusProps, isFocusVisible = false, ...others } = props;
+function TabImpl(props) {
+    const { tab, onClick, active, onKeyUp, onBlur, focusProps, isFocusVisible = false, ...others } = props;
+    const { disabled: isDisabled = false, name: label, icon } = tab;
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
     const { baseStyles, activeStyles, focusRingStyles, hoverStyles, disabledStyles, activeHoverStyles } = (0, react_1.useMemo)(() => getTabStyles(), []);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "aria-controls": `${value}-tabPanel`, "aria-selected": active, "aria-disabled": isDisabled || undefined, id: `${value}-tab`, role: "tab", tabIndex: active ? 0 : -1 }, (0, react_aria_1.mergeProps)(focusProps, hoverProps, { onKeyUp, onBlur, onClick: () => onClick(value) }), others, { css: {
+    const uniqueValue = uniqueTabValue(tab);
+    const tabProps = {
+        "aria-controls": `${uniqueValue}-tabPanel`,
+        "aria-selected": active,
+        "aria-disabled": isDisabled || undefined,
+        id: `${uniqueValue}-tab`,
+        role: "tab",
+        tabIndex: active ? 0 : -1,
+        ...others,
+        css: {
             ...baseStyles,
             ...(active && activeStyles),
             ...(isDisabled && disabledStyles),
             ...(isHovered && hoverStyles),
             ...(isHovered && active && activeHoverStyles),
             ...(isFocusVisible && active && focusRingStyles),
-        } }, { children: [label, icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }, void 0) }), void 0))] }), void 0));
+        },
+    };
+    const interactiveProps = (0, react_aria_1.mergeProps)(focusProps, hoverProps, {
+        onKeyUp,
+        onBlur,
+        ...(isRouteTab(tab) ? {} : { onClick: () => onClick(tab.value) }),
+    });
+    const tabLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }, void 0) }), void 0))] }, void 0));
+    return isDisabled ? ((0, jsx_runtime_1.jsx)("div", Object.assign({}, tabProps, { children: tabLabel }), void 0)) : isRouteTab(tab) ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, { ...tabProps, ...interactiveProps }, { className: "navLink", to: tab.href }, { children: tabLabel }), void 0)) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, { ...tabProps, ...interactiveProps }, { children: tabLabel }), void 0));
 }
 function getTabStyles() {
     return {
@@ -96,8 +131,18 @@ exports.getTabStyles = getTabStyles;
 function getNextTabValue(selected, key, tabs) {
     const enabledTabs = tabs.filter((tab) => tab.disabled !== true);
     const tabsToScan = key === "ArrowRight" ? enabledTabs : enabledTabs.reverse();
-    const currentIndex = tabsToScan.findIndex((tab) => tab.value === selected);
+    const currentIndex = tabsToScan.findIndex((tab) => uniqueTabValue(tab) === selected);
     const nextIndex = currentIndex === tabsToScan.length - 1 ? 0 : currentIndex + 1;
-    return tabsToScan[nextIndex].value;
+    return uniqueTabValue(tabsToScan[nextIndex]);
 }
 exports.getNextTabValue = getNextTabValue;
+function isRouteTabs(props) {
+    const { tabs } = props;
+    return tabs.length > 0 && isRouteTab(tabs[0]);
+}
+function isRouteTab(tab) {
+    return "path" in tab;
+}
+function uniqueTabValue(tab) {
+    return isRouteTab(tab) ? (0, change_case_1.camelCase)(tab.name) : tab.value;
+}

package/dist/components/testData.d.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from "react";
 import { Tab } from "./Tabs";
 export declare type TabValue = "tab1" | "tab2" | "tab3" | "tab4";
 export declare const testTabs: Tab<TabValue>[];
-export declare function TestTabContent({ title }: {
-    title: string;
+export declare function TestTabContent({ content }: {
+    content: ReactNode;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/testData.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TestTabContent = exports.testTabs = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 exports.testTabs = [
-    { name: "Tab 1", value: "tab1", render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { title: "Tab 1 Content" }, void 0) },
-    { name: "Tab 2", value: "tab2", render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { title: "Tab 2 Content" }, void 0) },
-    { name: "Tab 3", value: "tab3", disabled: true, render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { title: "Tab 3 Content" }, void 0) },
-    { name: "Tab 4", value: "tab4", render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { title: "Tab 4 Content" }, void 0) },
+    { name: "Tab 1", value: "tab1", render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { content: "Tab 1 Content" }, void 0) },
+    { name: "Tab 2", value: "tab2", render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { content: "Tab 2 Content" }, void 0) },
+    { name: "Tab 3", value: "tab3", disabled: true, render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { content: "Tab 3 Content" }, void 0) },
+    { name: "Tab 4", value: "tab4", render: () => (0, jsx_runtime_1.jsx)(TestTabContent, { content: "Tab 4 Content" }, void 0) },
 ];
-function TestTabContent({ title }) {
-    return (0, jsx_runtime_1.jsx)("div", { children: title }, void 0);
+function TestTabContent({ content }) {
+    return (0, jsx_runtime_1.jsx)("div", { children: content }, void 0);
 }
 exports.TestTabContent = TestTabContent;

package/dist/forms/FormLines.js

@@ -16,7 +16,8 @@ function FormLines(props) {
     const { children, width = "full", labelSuffix = settings.labelSuffix } = props;
     let firstFormHeading = true;
     return ((0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, Object.assign({ value: { labelSuffix } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
-                ...Css_1.Css.df.fdc.w(sizes[width]).$,
+                // Note that we're purposefully not using display:flex so that our children's margins will collapse.
+                ...Css_1.Css.w(sizes[width]).$,
                 // Purposefully use this instead of childGap3 to put margin-bottom on the last line
                 "& > *": Css_1.Css.mb2.$,
             } }, { children: react_1.Children.map(children, (child) => {

package/dist/forms/index.d.ts

@@ -10,6 +10,7 @@ export * from "./BoundSwitchField";
 export * from "./BoundTextAreaField";
 export * from "./BoundTextField";
 export * from "./BoundToggleChipGroupField";
+export * from "./FormHeading";
 export * from "./FormLines";
 export * from "./StaticField";
 export * from "./StaticLinkField";

package/dist/forms/index.js

@@ -22,6 +22,7 @@ __exportStar(require("./BoundSwitchField"), exports);
 __exportStar(require("./BoundTextAreaField"), exports);
 __exportStar(require("./BoundTextField"), exports);
 __exportStar(require("./BoundToggleChipGroupField"), exports);
+__exportStar(require("./FormHeading"), exports);
 __exportStar(require("./FormLines"), exports);
 __exportStar(require("./StaticField"), exports);
 __exportStar(require("./StaticLinkField"), exports);

package/dist/inputs/RadioGroupField.d.ts

@@ -10,6 +10,7 @@ export interface RadioFieldOption<K extends string> {
 export interface RadioGroupFieldProps<K extends string> {
     /** The label for the choice itself, i.e. "Favorite Cheese". */
     label: string;
+    hideLabel?: boolean;
     /** The currently selected option value (i.e. an id). */
     value: K | undefined;
     /** Called when an option is selected. We don't support unselecting. */

package/dist/inputs/RadioGroupField.js

@@ -20,7 +20,7 @@ let nextNameId = 0;
  * TODO: Add hover (non selected and selected) styles
  */
 function RadioGroupField(props) {
-    const { label, value, onChange, options, disabled = false, errorMsg, helperText, ...otherProps } = props;
+    const { label, hideLabel, value, onChange, options, disabled = false, errorMsg, helperText, ...otherProps } = props;
     // useRadioGroupState uses a random group name, so use our name
     const name = (0, react_1.useMemo)(() => `radio-group-${++nextNameId}`, []);
     const state = (0, react_stately_1.useRadioGroupState)({
@@ -38,7 +38,7 @@ function RadioGroupField(props) {
     const anyDescriptions = options.some((o) => !!o.description);
     return (
     // width of `max-content` is used to limit invisible label clicking
-    (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.w("max-content").maxw(anyDescriptions ? "344px" : "320px").$ }, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label }, labelProps, tid.label), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({}, radioGroupProps, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(Radio, Object.assign({ parentId: name, option: option, state: state }, otherProps, tid[option.value]), option.value))) }), void 0), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText }, void 0)] }), void 0));
+    (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.w("max-content").maxw(anyDescriptions ? "344px" : "320px").$ }, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label }, labelProps, tid.label, { hidden: hideLabel }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({}, radioGroupProps, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(Radio, Object.assign({ parentId: name, option: option, state: state }, otherProps, tid[option.value]), option.value))) }), void 0), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText }, void 0)] }), void 0));
 }
 exports.RadioGroupField = RadioGroupField;
 // Not meant to be standalone, but its own component so it can use hooks

package/dist/inputs/internal/SelectFieldBase.js

@@ -176,6 +176,6 @@ function SelectFieldBase(props) {
         ...positionProps.style,
         width: (_a = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.dif.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, { buttonProps: buttonProps, buttonRef: triggerRef, compact: compact, errorMsg: errorMsg, helperText: helperText, fieldDecoration: fieldDecoration, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, isDisabled: isDisabled, required: required, isReadOnly: isReadOnly, state: state, onBlur: onBlur, onFocus: onFocus, inlineLabel: inlineLabel, label: label, hideLabel: hideLabel, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, sizeToContent: sizeToContent, contrast: contrast, nothingSelectedText: nothingSelectedText }, 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 }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { state: state, compact: compact, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast }), 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, { buttonProps: buttonProps, buttonRef: triggerRef, compact: compact, errorMsg: errorMsg, helperText: helperText, fieldDecoration: fieldDecoration, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, isDisabled: isDisabled, required: required, isReadOnly: isReadOnly, state: state, onBlur: onBlur, onFocus: onFocus, inlineLabel: inlineLabel, label: label, hideLabel: hideLabel, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, sizeToContent: sizeToContent, contrast: contrast, nothingSelectedText: nothingSelectedText }, 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 }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { state: state, compact: compact, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast }), void 0) }), void 0))] }), void 0));
 }
 exports.SelectFieldBase = SelectFieldBase;

package/package.json

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