@homebound/beam 2.71.1 → 2.71.5

package/dist/components/Modal/OpenModal.d.ts

@@ -1,8 +1,16 @@
 import { ModalProps } from "./Modal";
+export interface OpenModalProps {
+    /** The custom modal content to show. */
+    children: JSX.Element;
+    /** The size to use. */
+    size?: ModalProps["size"];
+    /** Whether to force the modal to stay open. This is useful for stories where ruler/tape extensions cause the modal to close. */
+    keepOpen?: boolean;
+}
 /**
- * A component for testing open modals in unit tests.
+ * A component for testing open modals in stories and unit tests.
  *
- * Current, calling `render(<ModalComponent />)` in a test currently doesn't work, because
+ * Currently, calling `render(<ModalComponent />)` in a test currently doesn't work, because
  * nothing has called `useModal` to get the header & footer mounted into the DOM.
  *
  * So instead tests can call:
@@ -18,7 +26,4 @@ import { ModalProps } from "./Modal";
  * And `OpenModal` will do a boilerplate `openModal` call, so that the content
  * shows up in the DOM as expected.
  */
-export declare function OpenModal(props: {
-    children: JSX.Element;
-    size?: ModalProps["size"];
-}): JSX.Element;
+export declare function OpenModal(props: OpenModalProps): JSX.Element;

package/dist/components/Modal/OpenModal.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OpenModal = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
+const Modal_1 = require("./Modal");
 const useModal_1 = require("./useModal");
 /**
- * A component for testing open modals in unit tests.
+ * A component for testing open modals in stories and unit tests.
  *
- * Current, calling `render(<ModalComponent />)` in a test currently doesn't work, because
+ * Currently, calling `render(<ModalComponent />)` in a test currently doesn't work, because
  * nothing has called `useModal` to get the header & footer mounted into the DOM.
  *
  * So instead tests can call:
@@ -25,8 +26,17 @@ const useModal_1 = require("./useModal");
  */
 function OpenModal(props) {
     const { openModal } = (0, useModal_1.useModal)();
-    const { size, children } = props;
-    (0, react_1.useEffect)(() => openModal({ size, content: children }), [openModal, size, children]);
-    return (0, jsx_runtime_1.jsx)("div", { children: "dummy content" }, void 0);
+    const { size, children, keepOpen } = props;
+    (0, react_1.useEffect)(() => {
+        if (!keepOpen) {
+            openModal({ size, content: children });
+        }
+    }, [keepOpen, openModal, size, children]);
+    if (keepOpen) {
+        return (0, jsx_runtime_1.jsx)(Modal_1.Modal, { size: size, content: children }, void 0);
+    }
+    else {
+        return (0, jsx_runtime_1.jsx)("div", { children: "dummy content" }, void 0);
+    }
 }
 exports.OpenModal = OpenModal;

package/dist/components/internal/Option.js

@@ -27,11 +27,7 @@ function Option({ item, state, contrast = false, }) {
         key: item.key,
         isDisabled,
         isSelected,
-        // If this is true, then a user can: 1) press down to open the select menu,
-        // 2) have the menu drawn under their mouse cursor, 3) release their press
-        // and useSelectableItem will fire onPress/select and cause the
-        // accidentally-selected item to be added to the list.
-        shouldSelectOnPressUp: false,
+        shouldSelectOnPressUp: true,
         shouldFocusOnHover: true,
         shouldUseVirtualFocus: true,
     }, state, ref);

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/internal/ListBox.d.ts

@@ -1,14 +1,14 @@
-import { Key, MutableRefObject } from "react";
+import React, { Key, MutableRefObject } from "react";
 import { SelectState } from "react-stately";
 interface ListBoxProps<O, V extends Key> {
     compact: boolean;
     listBoxRef: MutableRefObject<HTMLDivElement | null>;
     state: SelectState<O>;
-    maxListHeight?: number;
     selectedOptions: O[];
     getOptionLabel: (opt: O) => string;
     getOptionValue: (opt: O) => V;
     contrast?: boolean;
+    positionProps: React.HTMLAttributes<Element>;
 }
 /** 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

@@ -10,11 +10,19 @@ const index_1 = require("../../components/internal/index");
 const Css_1 = require("../../Css");
 /** A ListBox is an internal component used by SelectField and MultiSelectField to display the list of options */
 function ListBox(props) {
-    const { state, compact, listBoxRef, 
-    // Choosing `273` as a defined max-height. `42px` is the min-height of each option, so this allows
-    // 6.5 options in view at a time (doing `.5` so the user can easily tell if there are more).
-    maxListHeight = 273, selectedOptions, getOptionLabel, getOptionValue, contrast = false, ...otherProps } = props;
+    var _a, _b;
+    const { state, compact, listBoxRef, selectedOptions, getOptionLabel, getOptionValue, contrast = false, positionProps, ...otherProps } = props;
     const { listBoxProps } = (0, react_aria_1.useListBox)({ disallowEmptySelection: true, ...otherProps }, state, listBoxRef);
+    const positionMaxHeight = (_a = positionProps.style) === null || _a === void 0 ? void 0 : _a.maxHeight;
+    // The maxListHeight 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`).
+    // If `maxHeight` is set use that, otherwise use `273` as a default (`42px` is the min-height of each option, so this allows
+    // 6.5 options in view at a time (doing `.5` so the user can easily tell if there are more).
+    const maxListHeight = positionMaxHeight && typeof positionMaxHeight === "number" ? positionMaxHeight : 273;
+    // We define some spacing between the ListBox and the trigger element, and depending on where the list box renders (above or below) we need to adjust the spacing.
+    // We can determine if the position was flipped based on what style is defined, `top` (for positioned below the trigger), and `bottom` (for above the trigger).
+    // The above assumption regarding `top` and `bottom` is true as long as we use `bottom` as our default `OverlayPosition.placement` (set in SelectFieldBase).
+    // The reason the placement may not be on bottom even though we set `bottom` is because also set `shouldFlip: true`
+    const isPositionedAbove = !((_b = positionProps.style) === null || _b === void 0 ? void 0 : _b.top);
     const [listHeight, setListHeight] = (0, react_1.useState)(maxListHeight);
     const isMultiSelect = state.selectionManager.selectionMode === "multiple";
     const virtuosoRef = (0, react_1.useRef)(null);
@@ -26,7 +34,9 @@ function ListBox(props) {
         }
     }, [focusedItem]);
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-            ...Css_1.Css.mtPx(4).bgWhite.br4.w100.bshBasic.if(contrast).bgGray700.$,
+            ...Css_1.Css.bgWhite.br4.w100.bshBasic.if(contrast).bgGray700.$,
+            // Add spacing based on menu's position relative to the trigger element
+            ...(isPositionedAbove ? Css_1.Css.mbPx(4).$ : Css_1.Css.mtPx(4).$),
             "&: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").$ }, { children: selectedOptions.map((o) => ((0, jsx_runtime_1.jsx)(ListBoxChip, { 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.hPx(Math.min(maxListHeight, listHeight)).$ }, { children: (0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, totalListHeightChanged: setListHeight, totalCount: state.collection.size, 
                     // We don't really need to set this, but it's handy for tests, which would

package/dist/inputs/internal/SelectFieldBase.js

@@ -171,11 +171,12 @@ function SelectFieldBase(props) {
         shouldFlip: true,
         isOpen: state.isOpen,
         onClose: state.close,
+        placement: "bottom",
     });
     positionProps.style = {
         ...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, { positionProps: positionProps, 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.71.1",
+  "version": "2.71.5",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",