@homebound/beam 2.102.6 → 2.103.0

package/dist/components/Button.d.ts

@@ -6,7 +6,7 @@ export interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
     label: string;
     variant?: ButtonVariant;
     size?: ButtonSize;
-    icon?: IconProps["icon"];
+    icon?: IconProps["icon"] | null;
     /** Displays contents after the Button's label. Will be ignored for Buttons rendered as a link with an absolute URL */
     endAdornment?: ReactNode;
     /** HTML attributes to apply to the button element when it is being used to trigger a menu. */
@@ -14,6 +14,8 @@ export interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
     buttonRef?: RefObject<HTMLElement>;
     /** Allow for setting "submit" | "button" | "reset" on button element */
     type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    /** Denotes if this button is used to download a resource. Uses the anchor tag with the `download` attribute */
+    download?: boolean;
 }
 export declare function Button(props: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare type ButtonSize = "sm" | "md" | "lg";

package/dist/components/Button.js

@@ -10,10 +10,10 @@ const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const useTestIds_1 = require("../utils/useTestIds");
 function Button(props) {
-    const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, ...otherProps } = props;
+    const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, ...otherProps } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, ...otherProps, ...menuTriggerProps };
-    const { label, icon, variant = "primary", size = "sm", buttonRef } = ariaProps;
+    const { label, icon = download ? "download" : undefined, variant = "primary", size = "sm", buttonRef } = ariaProps;
     const ref = buttonRef || (0, react_1.useRef)(null);
     const tid = (0, useTestIds_1.useTestIds)(props, label);
     const { buttonProps, isPressed } = (0, react_aria_1.useButton)({
@@ -41,7 +41,7 @@ function Button(props) {
         },
         ...tid,
     };
-    const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsxs)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink, target: "_blank", rel: "noreferrer noopener" }, { children: [buttonContent, (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "linkExternal" }, void 0) }), void 0)] }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
+    const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew || download ? ((0, jsx_runtime_1.jsxs)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink }, (download ? { download: "" } : { target: "_blank", rel: "noreferrer noopener" }), { children: [buttonContent, !download && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "linkExternal" }, void 0) }), void 0))] }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
     // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
     return (0, components_1.maybeTooltip)({
         title: (0, components_1.resolveTooltip)(disabled, tooltip),

package/dist/components/ButtonDatePicker.d.ts

@@ -0,0 +1,7 @@
+import { DatePickerProps } from "./internal/DatePicker";
+import { OverlayTriggerProps } from "./internal/OverlayTrigger";
+interface ButtonDatePickerProps extends DatePickerProps, Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip"> {
+    defaultOpen?: boolean;
+}
+export declare function ButtonDatePicker(props: ButtonDatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ButtonDatePicker.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonDatePicker = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
+const DatePickerOverlay_1 = require("./internal/DatePickerOverlay");
+const OverlayTrigger_1 = require("./internal/OverlayTrigger");
+const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
+function ButtonDatePicker(props) {
+    const { defaultOpen, disabled, trigger } = 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) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : trigger.icon);
+    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)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({}, props, { state: state, overlayProps: menuProps }, tid.datePicker), void 0) }), void 0));
+}
+exports.ButtonDatePicker = ButtonDatePicker;

package/dist/components/ButtonMenu.d.ts

@@ -1,22 +1,10 @@
-import { ReactNode } from "react";
-import { ButtonProps } from "./Button";
 import { IconProps } from "./Icon";
-import { IconButtonProps } from "./IconButton";
+import { OverlayTriggerProps } from "./internal/OverlayTrigger";
 import { Callback } from "../types";
-interface TextButtonTriggerProps extends Pick<ButtonProps, "label" | "variant" | "size" | "icon"> {
-}
-interface IconButtonTriggerProps extends Pick<IconButtonProps, "icon" | "color"> {
-}
-interface ButtonMenuProps {
-    trigger: TextButtonTriggerProps | IconButtonTriggerProps;
+interface ButtonMenuProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip"> {
     items: MenuItem[];
     persistentItems?: MenuItem[];
-    placement?: "left" | "right";
     defaultOpen?: boolean;
-    /** Whether the Button is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
-    disabled?: boolean | ReactNode;
-    /** Text to be shown via a tooltip when the user hovers over the button */
-    tooltip?: ReactNode;
 }
 export declare function ButtonMenu(props: ButtonMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare type MenuItemBase = {

package/dist/components/ButtonMenu.js

@@ -2,51 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonMenu = 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_stately_1 = require("react-stately");
-const Button_1 = require("./Button");
-const Icon_1 = require("./Icon");
-const IconButton_1 = require("./IconButton");
-const internal_1 = require("./internal");
 const Menu_1 = require("./internal/Menu");
-const Css_1 = require("../Css");
+const OverlayTrigger_1 = require("./internal/OverlayTrigger");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
 function ButtonMenu(props) {
-    const { trigger, items, placement, persistentItems, defaultOpen, disabled, tooltip } = props;
+    const { defaultOpen, disabled, items, persistentItems, trigger } = props;
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
-    const popoverRef = (0, react_1.useRef)(null);
-    const { menuTriggerProps, menuProps: ariaMenuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
-    const { overlayProps: positionProps } = (0, react_aria_1.useOverlayPosition)({
-        targetRef: buttonRef,
-        overlayRef: popoverRef,
-        shouldFlip: true,
-        isOpen: state.isOpen,
-        onClose: state.close,
-        placement: (placement ? `bottom ${placement}` : "bottom left"),
-    });
-    const tid = (0, utils_1.useTestIds)(props, isTextButton(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : trigger.icon);
-    // 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)({
-        initialItems: [items, persistentItems ? persistentItems : []].map((i, idx) => ({ label: idx === 0 ? "items" : "persistent", items: i })),
-        getKey: (item) => (0, change_case_1.camelCase)(item.label),
-        getChildren: (item) => { var _a; return (_a = item.items) !== null && _a !== void 0 ? _a : []; },
-    });
-    // 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]);
-    // NOTE: Not updating persistentItems at the moment as there seems to be a bug with this. Only updates one set of items at a time, will follow up later.
-    // If our list of persistentItems change, update the "persistent" menu section.
-    // useEffect(() => {
-    //   tree.update("persistent", { label: "persistent", items: persistentItems || [] } as MenuSection);
-    // }, [persistentItems]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.relative.dib.$ }, { children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: "secondary" }, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0), disabled: disabled, tooltip: tooltip }, tid), void 0)) : ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid), void 0)), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, Object.assign({ ariaMenuProps: ariaMenuProps, items: tree.items, onClose: () => state.close() }, tid, { children: (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, ""))) }), void 0) }), void 0))] }), void 0));
+    const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : trigger.icon);
+    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));
 }
 exports.ButtonMenu = ButtonMenu;
-function isTextButton(trigger) {
-    return trigger && typeof trigger === "object" && "label" in trigger;
-}

package/dist/components/Table/useSortState.js

@@ -51,6 +51,11 @@ function deriveSortState(currentSortState, clickedKey, initialSortState) {
     if (!currentSortState || clickedKey !== currentKey) {
         return [clickedKey, GridTable_1.ASC];
     }
+    // If there is an `initialSortState` and we're clicking on that same key, then flip the sort.
+    // Handles cases where the initial sort is DESC so that we can allow for DESC to ASC sorting.
+    if (initialSortState && initialSortState[0] === clickedKey) {
+        return [clickedKey, currentDirection === GridTable_1.ASC ? GridTable_1.DESC : GridTable_1.ASC];
+    }
     // Otherwise when clicking the current column, toggle through sort states
     if (currentDirection === GridTable_1.ASC) {
         // if ASC -> go to desc

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export * from "./ToggleChips";
 export * from "./Alert";
 export { BeamProvider } from "./BeamContext";
 export * from "./Button";
+export * from "./ButtonDatePicker";
 export * from "./ButtonGroup";
 export * from "./ButtonMenu";
 export * from "./Copy";

package/dist/components/index.js

@@ -20,6 +20,7 @@ __exportStar(require("./Alert"), exports);
 var BeamContext_1 = require("./BeamContext");
 Object.defineProperty(exports, "BeamProvider", { enumerable: true, get: function () { return BeamContext_1.BeamProvider; } });
 __exportStar(require("./Button"), exports);
+__exportStar(require("./ButtonDatePicker"), exports);
 __exportStar(require("./ButtonGroup"), exports);
 __exportStar(require("./ButtonMenu"), exports);
 __exportStar(require("./Copy"), exports);

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

@@ -0,0 +1,8 @@
+import { Modifier } from "react-day-picker";
+import "./DatePicker.css";
+export interface DatePickerProps {
+    value?: Date;
+    onSelect: (value: Date) => void;
+    disabledDays?: Modifier;
+}
+export declare function DatePicker(props: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/{inputs/internal/DatePickerOverlay.js → components/internal/DatePicker.js}

@@ -3,24 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerOverlay = void 0;
+exports.DatePicker = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_day_picker_1 = __importDefault(require("react-day-picker"));
-const components_1 = require("../../components");
+const index_1 = require("../index");
 const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
-function DatePickerOverlay(props) {
-    var _a;
-    const { value, state, positionProps, onChange, disabledDays } = props;
-    // We define some spacing between the Calendar overlay and the trigger element, and depending on where the overlay 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 DateField).
-    // The reason the placement may not be on bottom even though we set `bottom` is because also set `shouldFlip: true`
-    const isPositionedAbove = !((_a = positionProps.style) === null || _a === void 0 ? void 0 : _a.top);
+require("./DatePicker.css");
+function DatePicker(props) {
+    const { value, onSelect, disabledDays } = props;
     const tid = (0, utils_1.useTestIds)(props, "datePicker");
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
-            ...Css_1.Css.bgWhite.xs.br4.bshModal.$,
-            ...(isPositionedAbove ? Css_1.Css.mbPx(4).$ : Css_1.Css.mtPx(4).$),
+            ...Css_1.Css.dib.bgWhite.xs.$,
             // The S / M / T / W ... heading
             "& .DayPicker-Weekday": Css_1.Css.pPx(8).xs.gray400.important.$,
             // Un-collapse the borders so we can hover each cell
@@ -35,23 +29,22 @@ function DatePickerOverlay(props) {
             "& .DayPicker-Day:active": Css_1.Css.bgGray400.$,
             // Make the month title, i.e. "May 2021", match figma; pyPx nudge matches the NavbarElement nudging
             "& .DayPicker-Caption > div": Css_1.Css.base.pyPx(2).$,
-            // For days that are disabled via `disabledDays`, 
+            // For days that are disabled via `disabledDays`,
             "& .DayPicker-Day--disabled": Css_1.Css.cursorNotAllowed.$,
             // Override `.DayPicker-Day:active` background when the day is disabled
             "& .DayPicker-Day--disabled:active": Css_1.Css.bgWhite.$,
         } }, tid, { children: (0, jsx_runtime_1.jsx)(react_day_picker_1.default, { navbarElement: NavbarElement, weekdayElement: Weekday, selectedDays: [value], initialMonth: value !== null && value !== void 0 ? value : new Date(), onDayClick: (day, modifiers) => {
                 if (modifiers.disabled)
                     return;
-                // Set the day value, and close the picker.
-                onChange(day);
-                state.close();
+                // Set the day value
+                onSelect(day);
             }, disabledDays: disabledDays }, void 0) }), void 0));
 }
-exports.DatePickerOverlay = DatePickerOverlay;
+exports.DatePicker = DatePicker;
 /** Customize the prev/next button to be our SVG icons. */
 function NavbarElement(props) {
     const { showPreviousButton, showNextButton, onPreviousClick, onNextClick, classNames } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classNames.navBar }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.absolute.top(2).right(6.5).$ }, { children: (0, jsx_runtime_1.jsx)(components_1.IconButton, { color: Css_1.Palette.Gray700, disabled: !showPreviousButton, icon: "chevronLeft", onClick: () => onPreviousClick() }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.absolute.top(2).right(3).$ }, { children: (0, jsx_runtime_1.jsx)(components_1.IconButton, { color: Css_1.Palette.Gray700, disabled: !showNextButton, icon: "chevronRight", onClick: () => onNextClick() }, void 0) }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classNames.navBar }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.absolute.top(2).right(6.5).$ }, { children: (0, jsx_runtime_1.jsx)(index_1.IconButton, { color: Css_1.Palette.Gray700, disabled: !showPreviousButton, icon: "chevronLeft", onClick: () => onPreviousClick() }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.absolute.top(2).right(3).$ }, { children: (0, jsx_runtime_1.jsx)(index_1.IconButton, { color: Css_1.Palette.Gray700, disabled: !showNextButton, icon: "chevronRight", onClick: () => onNextClick() }, void 0) }), void 0)] }), void 0));
 }
 /** Customize the weekday names to be only the first letter. */
 function Weekday({ weekday, className, localeUtils, locale }) {

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+import { OverlayTriggerState } from "react-stately";
+import { DatePickerProps } from "./DatePicker";
+interface DatePickerOverlayProps extends DatePickerProps {
+    overlayProps: HTMLAttributes<HTMLElement>;
+    state: OverlayTriggerState;
+}
+export declare function DatePickerOverlay({ overlayProps, state, ...datePickerProps }: DatePickerOverlayProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/internal/DatePickerOverlay.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerOverlay = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const DatePicker_1 = require("./DatePicker");
+const Css_1 = require("../../Css");
+// Small wrapper around DatePicker to provide necessary styling and state handling when displayed as an overlay.
+function DatePickerOverlay({ overlayProps, state, ...datePickerProps }) {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.br4.bshModal.$ }, overlayProps, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, datePickerProps, { onSelect: (d) => {
+                datePickerProps.onSelect(d);
+                state.close();
+            } }), void 0) }), void 0));
+}
+exports.DatePickerOverlay = DatePickerOverlay;

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

@@ -1,13 +1,11 @@
-import type { TreeNode } from "@react-stately/data";
-import type { CollectionChildren } from "@react-types/shared";
 import { HTMLAttributes, PropsWithChildren } from "react";
-import { MenuSection } from "..";
+import { MenuItem } from "..";
 import { Callback } from "../../types";
 interface MenuProps<T> {
     ariaMenuProps: HTMLAttributes<HTMLElement>;
-    children: CollectionChildren<MenuSection>;
-    items: TreeNode<MenuSection>[];
     onClose: Callback;
+    items: MenuItem[];
+    persistentItems?: MenuItem[];
 }
 export declare function Menu<T>(props: PropsWithChildren<MenuProps<T>>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/internal/Menu.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = 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_stately_1 = require("react-stately");
@@ -9,15 +10,28 @@ const MenuSection_1 = require("./MenuSection");
 const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
 function Menu(props) {
-    const { children, ariaMenuProps } = props;
-    const state = (0, react_stately_1.useTreeState)({ ...props, items: props.items.map((i) => i.value), selectionMode: "none" });
+    const { ariaMenuProps, items, persistentItems, onClose } = 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)({
+        initialItems: [items, persistentItems ? persistentItems : []].map((i, idx) => ({ label: idx === 0 ? "items" : "persistent", items: i })),
+        getKey: (item) => (0, change_case_1.camelCase)(item.label),
+        getChildren: (item) => { var _a; return (_a = item.items) !== null && _a !== void 0 ? _a : []; },
+    });
+    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" });
     const menuRef = (0, react_1.useRef)(null);
-    const { menuProps } = (0, react_aria_1.useMenu)({ ...ariaMenuProps, children, autoFocus: true }, state, menuRef);
+    const { menuProps } = (0, react_aria_1.useMenu)({ ...ariaMenuProps, children: menuChildren, autoFocus: 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, Object.assign({ restoreFocus: true }, { 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: props.onClose }, tid), item.key))) }), void 0) }), void 0));
+            } }, 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));
 }
 exports.Menu = Menu;

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

@@ -0,0 +1,29 @@
+import { AriaButtonProps } from "@react-types/button";
+import { MutableRefObject, ReactElement, ReactNode } from "react";
+import { MenuTriggerState } from "react-stately";
+import { ButtonProps } from "../Button";
+import { IconButtonProps } from "../IconButton";
+interface TextButtonTriggerProps extends Pick<ButtonProps, "label" | "variant" | "size" | "icon"> {
+}
+interface IconButtonTriggerProps extends Pick<IconButtonProps, "icon" | "color"> {
+}
+export interface OverlayTriggerProps {
+    trigger: TextButtonTriggerProps | IconButtonTriggerProps;
+    /** Defaults to "left" */
+    placement?: "left" | "right";
+    /** Whether the Button is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
+    disabled?: boolean | ReactNode;
+    /** Text to be shown via a tooltip when the user hovers over the button */
+    tooltip?: ReactNode;
+    /** The component to be shown within the overlay */
+    children: ReactElement;
+    /** Props returned by the useMenuTrigger hook to be passed to the button element */
+    menuTriggerProps: AriaButtonProps;
+    /** Ref for the button element */
+    buttonRef: MutableRefObject<HTMLButtonElement | null>;
+    /** Result of the useMenuTriggerState hook */
+    state: MenuTriggerState;
+}
+export declare function OverlayTrigger(props: OverlayTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function isTextButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps): trigger is TextButtonTriggerProps;
+export {};

package/dist/components/internal/OverlayTrigger.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTextButton = exports.OverlayTrigger = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_1 = require("react-aria");
+const Button_1 = require("../Button");
+const Icon_1 = require("../Icon");
+const IconButton_1 = require("../IconButton");
+const internal_1 = require("./");
+const Css_1 = require("../../Css");
+const utils_1 = require("../../utils");
+const defaultTestId_1 = require("../../utils/defaultTestId");
+function OverlayTrigger(props) {
+    const { trigger, buttonRef, menuTriggerProps, placement, state, disabled, tooltip, children } = props;
+    const popoverRef = (0, react_1.useRef)(null);
+    const { overlayProps: positionProps } = (0, react_aria_1.useOverlayPosition)({
+        targetRef: buttonRef,
+        overlayRef: popoverRef,
+        shouldFlip: true,
+        isOpen: state.isOpen,
+        onClose: state.close,
+        placement: (placement ? `bottom ${placement}` : "bottom left"),
+    });
+    const tid = (0, utils_1.useTestIds)(props, isTextButton(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : trigger.icon);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.relative.dib.$ }, { children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ variant: "secondary" }, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0), disabled: disabled, tooltip: tooltip }, tid), void 0)) : ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({}, trigger, { menuTriggerProps: menuTriggerProps, buttonRef: buttonRef }, tid), void 0)), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen }, { children: children }), void 0))] }), void 0));
+}
+exports.OverlayTrigger = OverlayTrigger;
+function isTextButton(trigger) {
+    return trigger && typeof trigger === "object" && "label" in trigger;
+}
+exports.isTextButton = isTextButton;

package/dist/inputs/DateField.d.ts

@@ -2,7 +2,6 @@ import { ReactNode } from "react";
 import { Modifier } from "react-day-picker";
 import { TextFieldBaseProps } from "./TextFieldBase";
 import { Callback } from "../types";
-import "./DateField.css";
 export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
     value: Date | undefined;
     label: string;

package/dist/inputs/DateField.js

@@ -9,12 +9,11 @@ const react_day_picker_1 = require("react-day-picker");
 const react_stately_1 = require("react-stately");
 const components_1 = require("../components");
 const internal_1 = require("../components/internal");
+const DatePickerOverlay_1 = require("../components/internal/DatePickerOverlay");
 const Css_1 = require("../Css");
-const DatePickerOverlay_1 = require("./internal/DatePickerOverlay");
 const TextFieldBase_1 = require("./TextFieldBase");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
-require("./DateField.css");
 function DateField(props) {
     const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, disabledDays, onEnter, ...others } = props;
     const inputRef = (0, react_1.useRef)(null);
@@ -100,6 +99,7 @@ function DateField(props) {
         onClose: state.close,
         placement: "bottom left",
         shouldUpdatePosition: true,
+        offset: 4,
     });
     // If showing the short date format, "01/01/20", so set size to 8. If medium (Wed, Nov 23) use 10 characters (leaving out the `,` character in the count because it is so small)
     // Otherwise the long format can be `undefined`.
@@ -120,10 +120,10 @@ function DateField(props) {
                             onChange(parsed);
                         }
                     }
-                }, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton, tooltip: isDisabled && typeof disabled !== "boolean" ? disabled : undefined }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: { ...overlayProps, ...positionProps }, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ state: state, value: value, positionProps: positionProps, onChange: (d) => {
+                }, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton, tooltip: isDisabled && typeof disabled !== "boolean" ? disabled : undefined }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ value: value, onSelect: (d) => {
                         setInputValue(formatDate(d, dateFormat));
                         onChange(d);
-                    }, disabledDays: disabledDays }, tid.datePicker), void 0) }), void 0))] }, void 0));
+                    }, state: state, disabledDays: disabledDays, overlayProps: overlayProps }, tid.datePicker), void 0) }), void 0))] }, void 0));
 }
 exports.DateField = DateField;
 function formatDate(date, format) {

package/package.json

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

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

@@ -1,12 +0,0 @@
-import React from "react";
-import { Modifier } from "react-day-picker";
-import { OverlayTriggerState } from "react-stately";
-interface DatePickerOverlayProps {
-    value: Date | undefined;
-    state: OverlayTriggerState;
-    positionProps: React.HTMLAttributes<Element>;
-    onChange: (value: Date) => void;
-    disabledDays: Modifier;
-}
-export declare function DatePickerOverlay(props: DatePickerOverlayProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};