@homebound/beam 2.102.9 → 2.105.1

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/Chip.js

@@ -2,14 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const PresentationContext_1 = require("./PresentationContext");
 const Css_1 = require("../Css");
 const useTestIds_1 = require("../utils/useTestIds");
 /** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
 function Chip(props) {
+    var _a;
     const { text, xss = {} } = props;
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
+    const typeScale = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _a !== void 0 ? _a : "sm";
     const tid = (0, useTestIds_1.useTestIds)(props, "chip");
     return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
-            ...Css_1.Css.dif.aic.br16.sm.pl1.px1.pyPx(2).gray900.bgGray200.$,
+            ...Css_1.Css[typeScale].dif.aic.br16.pl1.px1.pyPx(2).gray900.bgGray200.$,
             ...xss,
         } }, tid, { title: text }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0) }), void 0));
 }

package/dist/components/Chips.js

@@ -3,10 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chips = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Chip_1 = require("./Chip");
+const PresentationContext_1 = require("./PresentationContext");
 const Css_1 = require("../Css");
 /** Renders a list of `Chip`s, with wrapping & appropriate margin between each `Chip`. */
 function Chips(props) {
+    const { wrap } = (0, PresentationContext_1.usePresentationContext)();
     const { values, xss = {} } = props;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...Css_1.Css.df.add({ flexWrap: "wrap" }).my1.$, ...xss } }, { children: values.map((value, i) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: value, xss: Css_1.Css.mr1.mb1.$ }, i))) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+            ...Css_1.Css.df.aifs.gap1.whiteSpace("normal").$,
+            ...(wrap !== false ? Css_1.Css.add({ flexWrap: "wrap" }).$ : {}),
+            ...xss,
+        } }, { children: values.map((value, i) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: value }, i))) }), void 0));
 }
 exports.Chips = Chips;

package/dist/components/PresentationContext.d.ts

@@ -13,6 +13,7 @@ export interface PresentationFieldProps {
 export declare type PresentationContextProps = {
     fieldProps?: PresentationFieldProps;
     gridTableStyle?: GridStyle;
+    wrap?: boolean;
 };
 export declare const PresentationContext: import("react").Context<PresentationContextProps>;
 export declare function PresentationProvider(props: PropsWithChildren<PresentationContextProps>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Table/GridTable.d.ts

@@ -1,4 +1,5 @@
 import React, { MutableRefObject, ReactElement, ReactNode } from "react";
+import { PresentationContextProps, PresentationFieldProps } from "../PresentationContext";
 import { GridRowLookup } from "./GridRowLookup";
 import { Margin, Only, Properties, Xss } from "../../Css";
 export declare type Kinded = {
@@ -46,6 +47,7 @@ export interface GridStyle {
     nestedCards?: NestedCardsStyle;
     /** Default content to put into an empty cell */
     emptyCell?: ReactNode;
+    presentationSettings?: Pick<PresentationFieldProps, "borderless" | "typeScale"> & Pick<PresentationContextProps, "wrap">;
 }
 export declare type NestedCardStyleByKind = Record<string, NestedCardStyle>;
 export interface NestedCardsStyle {

package/dist/components/Table/GridTable.js

@@ -80,7 +80,7 @@ exports.setGridTableDefaults = setGridTableDefaults;
  * special styling to the row that uses `kind: "header"`.)
  */
 function GridTable(props) {
-    var _a;
+    var _a, _b, _c, _d, _e;
     const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api, } = props;
     const [collapsedIds, collapseAllContext, collapseRowContext] = useToggleIds(rows, persistCollapse);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
@@ -98,12 +98,11 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sorting, sortState]);
+    const columnSizes = (0, react_1.useMemo)(() => { var _a; return calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth); }, [columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth]);
     // Filter + flatten + component-ize the sorted rows.
     let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
-        var _a;
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
-        const columnSizes = calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth);
         function makeRowComponent(row) {
             // We only pass sortState to header rows, b/c non-headers rows shouldn't have to re-render on sorting
             // changes, and so by not passing the sortProps, it means the data rows' React.memo will still cache them.
@@ -194,12 +193,22 @@ function GridTable(props) {
     }, [filteredRows === null || filteredRows === void 0 ? void 0 : filteredRows.length, setRowCount]);
     const noData = filteredRows.length === 0;
     const firstRowMessage = (noData && fallbackMessage) || (tooManyClientSideRows && "Hiding some rows, use filter...") || infoMessage;
+    const borderless = (_b = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _b === void 0 ? void 0 : _b.borderless;
+    const typeScale = (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.typeScale;
+    const fieldProps = (0, react_1.useMemo)(() => ({
+        hideLabel: true,
+        numberAlignment: "right",
+        compact: true,
+        // Avoid passing `undefined` as it will unset existing PresentationContext settings
+        ...(borderless !== undefined ? { borderless } : {}),
+        ...(typeScale !== undefined ? { typeScale } : {}),
+    }), [borderless, typeScale]);
     // If we're running in Jest, force using `as=div` b/c jsdom doesn't support react-virtuoso.
     // This enables still putting the application's business/rendering logic under test, and letting it
     // just trust the GridTable impl that, at runtime, `as=virtual` will (other than being virtualized)
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
-    return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: { hideLabel: true, numberAlignment: "right", compact: true } }, { children: renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, xss, virtuosoRef) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_d = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _d === void 0 ? void 0 : _d.wrap }, { children: renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_e = style.nestedCards) === null || _e === void 0 ? void 0 : _e.firstLastColumnWidth, xss, virtuosoRef) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -497,6 +506,7 @@ function isJSX(content) {
 }
 /** If a column def return just string text for a given row, apply some default styling. */
 function toContent(content, isHeader, canSortColumn, isClientSideSorting, style, as, alignment) {
+    var _a;
     content = isGridCellContent(content) ? content.content : content;
     if (typeof content === "function") {
         // Actually create the JSX by calling `content()` here (which should be as late as
@@ -517,6 +527,9 @@ function toContent(content, isHeader, canSortColumn, isClientSideSorting, style,
     if (content && typeof content === "string" && isHeader && canSortColumn) {
         return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right" }, void 0);
     }
+    else if (content && typeof content === "string" && ((_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.wrap) === false) {
+        return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.mw0.truncate.$, title: content }, { children: content }), void 0));
+    }
     else if (style.emptyCell && isContentEmpty(content)) {
         // If the content is empty and the user specified an `emptyCell` node, return that.
         return style.emptyCell;

package/dist/components/Table/columns.d.ts

@@ -10,3 +10,5 @@ export declare function numericColumn<T extends Kinded, S = {}>(columnDef: GridC
 export declare function actionColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
 /** Provides default styling for a GridColumn containing a checkbox. */
 export declare function selectColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
+/** Provides default styling for a GridColumn containing the CollapseToggle component. */
+export declare function collapseColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;

package/dist/components/Table/columns.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectColumn = exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
+exports.collapseColumn = exports.selectColumn = exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
 /** Provides default styling for a GridColumn representing a Date. */
 function column(columnDef) {
     return { ...columnDef };
@@ -28,3 +28,9 @@ function selectColumn(columnDef) {
     return { clientSideSort: false, ...columnDef, align: "center", w: "48px" };
 }
 exports.selectColumn = selectColumn;
+/** Provides default styling for a GridColumn containing the CollapseToggle component. */
+function collapseColumn(columnDef) {
+    // Defining `w: 38px` based on the designs
+    return { ...columnDef, clientSideSort: false, align: "center", w: "38px" };
+}
+exports.collapseColumn = collapseColumn;

package/dist/components/Table/styles.d.ts

@@ -1,3 +1,4 @@
+import { Properties } from "../../Css";
 import { GridStyle } from ".";
 /** Our original table look & feel/style. */
 export declare const defaultStyle: GridStyle;
@@ -7,3 +8,5 @@ export declare const condensedStyle: GridStyle;
 export declare const cardStyle: GridStyle;
 export declare const beamFixedStyle: GridStyle;
 export declare const beamFlexibleStyle: GridStyle;
+export declare const beamGroupRowStyle: Properties;
+export declare const beamTotalsRowStyle: Properties;

package/dist/components/Table/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.beamFlexibleStyle = exports.beamFixedStyle = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
+exports.beamTotalsRowStyle = exports.beamGroupRowStyle = exports.beamFlexibleStyle = exports.beamFixedStyle = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
 const Css_1 = require("../../Css");
 /** Our original table look & feel/style. */
 exports.defaultStyle = {
@@ -41,11 +41,18 @@ exports.cardStyle = {
 };
 // Once completely rolled out across all tables in Blueprint, this will change to be the `defaultStyle`.
 exports.beamFixedStyle = {
-    rootCss: Css_1.Css.gray700.$,
-    // Doing a mix of `min` and `max` height of 40 as each cell is currently defining `h100`.
-    headerCellCss: Css_1.Css.xsEm.bgGray200.aic.nowrap.px2.mhPx(40).maxhPx(40).$,
-    // TODO: `cellCss` has incomplete styling at the moment. Will be done as part of SC-8145
-    cellCss: Css_1.Css.xs.bgWhite.aic.nowrap.px2.hPx(40).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
+    headerCellCss: Css_1.Css.gray700.xsEm.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
+    cellCss: Css_1.Css.gray900.xs.bgWhite.aic.nowrap.pxPx(12).hPx(36).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
+    emptyCell: "-",
+    presentationSettings: { borderless: true, typeScale: "xs", wrap: false },
+    rowHoverColor: Css_1.Palette.Gray200,
+};
+exports.beamFlexibleStyle = {
+    ...exports.beamFixedStyle,
+    cellCss: Css_1.Css.xs.bgWhite.aic.p2.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
+    presentationSettings: { borderless: false, typeScale: "xs", wrap: true },
 };
-// TODO: `cellCss` has incomplete styling at the moment. Will be done as part of SC-8145
-exports.beamFlexibleStyle = { ...exports.beamFixedStyle, cellCss: Css_1.Css.p2.$ };
+exports.beamGroupRowStyle = Css_1.Css.smEm
+    .mhPx(56)
+    .gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$;
+exports.beamTotalsRowStyle = Css_1.Css.gray700.smEm.hPx(40).mb1.bgWhite.boxShadow("none").$;

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 | 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/forms/formStateDomain.d.ts

@@ -1,5 +1,6 @@
 export declare const jan1: Date;
 export declare const jan2: Date;
+export declare const jan10: Date;
 export declare const dd100: DeweyDecimalClassification;
 export declare const dd200: DeweyDecimalClassification;
 export interface AuthorInput {

package/dist/forms/formStateDomain.js

@@ -3,9 +3,10 @@
 // by a GraphQL schema for a `saveAuthor` mutation that takes an author
 // plus the author's books.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateOnly = exports.dd200 = exports.dd100 = exports.jan2 = exports.jan1 = void 0;
+exports.DateOnly = exports.dd200 = exports.dd100 = exports.jan10 = exports.jan2 = exports.jan1 = void 0;
 exports.jan1 = new Date(2020, 0, 1);
 exports.jan2 = new Date(2020, 0, 2);
+exports.jan10 = new Date(2020, 0, 10);
 exports.dd100 = { number: "100", category: "Philosophy" };
 exports.dd200 = { number: "200", category: "Religion" };
 class DateOnly {

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;
@@ -25,8 +24,9 @@ export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless
      * Set custom logic for individual dates or date ranges to be disabled in the picker
      * exposed from `react-day-picker`: https://react-day-picker.js.org/api/DayPicker#modifiers
      */
-    disabledDays?: Modifier;
+    disabledDays?: Modifier | Modifier[];
     onEnter?: Callback;
+    defaultOpen?: boolean;
 }
 export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare const dateFormats: {

package/dist/inputs/DateField.js

@@ -9,14 +9,13 @@ 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 { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, disabledDays, onEnter, defaultOpen, ...others } = props;
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
@@ -48,6 +47,7 @@ function DateField(props) {
                 (0, utils_1.maybeCall)(onBlur);
             }
         },
+        isOpen: defaultOpen,
     });
     const { labelProps, inputProps } = (0, react_aria_1.useTextField)({
         ...textFieldProps,
@@ -100,6 +100,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 +121,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/dist/inputs/TextFieldBase.js

@@ -56,7 +56,7 @@ function TextFieldBase(props) {
             ...(!contrast ? Css_1.Css.bgWhite.$ : Css_1.Css.bgGray700.addIn("&::selection", Css_1.Css.bgGray800.$).$),
         },
         hover: Css_1.Css.bgGray100.if(contrast).bgGray600.bGray600.$,
-        focus: borderless ? Css_1.Css.bshFocus.$ : Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
+        focus: borderless ? Css_1.Css.bshFocus.z1.$ : Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
         disabled: visuallyDisabled
             ? Css_1.Css.cursorNotAllowed.gray400.bgGray100.if(contrast).gray500.bgGray700.$
             : Css_1.Css.cursorNotAllowed.$,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.102.9",
+  "version": "2.105.1",
   "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 {};