@homebound/beam 2.237.0 → 2.238.1

package/dist/components/ButtonMenu.d.ts

@@ -1,14 +1,19 @@
 import { ReactNode } from "react";
 import { IconProps } from "./Icon";
 import { OverlayTriggerProps } from "./internal/OverlayTrigger";
-interface ButtonMenuProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip" | "showActiveBorder"> {
+interface ButtonMenuBaseProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip" | "showActiveBorder"> {
     items: MenuItem[];
     persistentItems?: MenuItem[];
     searchable?: boolean;
     defaultOpen?: boolean;
     contrast?: boolean;
 }
-export declare function ButtonMenu(props: ButtonMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
+interface SelectionButtonMenuProps extends ButtonMenuBaseProps {
+    /** Display a menu item as selected based. Use the Menu Item's label to identify */
+    selectedItem: string | undefined;
+    onChange: (key: string) => void;
+}
+export declare function ButtonMenu(props: ButtonMenuBaseProps | SelectionButtonMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
 type MenuItemBase = {
     label: string;
     /** If the `onClick` property is set as a string, then the menu item will be rendered as a link with the `onClick` value being the href */

package/dist/components/ButtonMenu.js

@@ -11,6 +11,11 @@ const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
 function ButtonMenu(props) {
     const { defaultOpen, disabled, items, persistentItems, trigger, searchable, contrast = false } = props;
+    let selectedItem, onChange;
+    if (isSelectionButtonMenuProps(props)) {
+        selectedItem = props.selectedItem;
+        onChange = props.onChange;
+    }
     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);
@@ -21,6 +26,9 @@ function ButtonMenu(props) {
             : (0, OverlayTrigger_1.isIconButton)(trigger)
                 ? trigger.icon
                 : trigger.name);
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, contrast: contrast, children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, { ariaMenuProps: menuProps, onClose: () => state.close(), items: items, persistentItems: persistentItems, searchable: searchable, contrast: contrast, ...tid }) }));
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, contrast: contrast, children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, { ariaMenuProps: menuProps, onClose: () => state.close(), items: items, persistentItems: persistentItems, searchable: searchable, contrast: contrast, selectedItem: selectedItem, onChange: onChange, ...tid }) }));
 }
 exports.ButtonMenu = ButtonMenu;
+function isSelectionButtonMenuProps(props) {
+    return typeof props === "object" && "selectedItem" in props && "onChange" in props;
+}

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

@@ -7,6 +7,8 @@ interface MenuProps<T> {
     searchable?: boolean;
     persistentItems?: MenuItem[];
     contrast: boolean;
+    selectedItem: string | undefined;
+    onChange: ((key: string) => void) | undefined;
 }
 export declare function Menu<T>(props: PropsWithChildren<MenuProps<T>>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/internal/Menu.js

@@ -11,7 +11,7 @@ const Css_1 = require("../../Css");
 const MenuSearchField_1 = require("../../inputs/internal/MenuSearchField");
 const utils_1 = require("../../utils");
 function Menu(props) {
-    const { ariaMenuProps, items, persistentItems, onClose, searchable, contrast } = props;
+    const { ariaMenuProps, items, persistentItems, onClose, searchable, contrast, selectedItem, onChange } = 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)({
@@ -20,9 +20,7 @@ function Menu(props) {
         getChildren: (item) => { var _a; return (_a = item.items) !== null && _a !== void 0 ? _a : []; },
     });
     const [search, setSearch] = (0, react_1.useState)(undefined);
-    const { contains } = (0, react_aria_1.useFilter)({
-        sensitivity: "base",
-    });
+    const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     // Filter our tree data items based on the search term
     const filteredTree = (0, react_1.useMemo)(() => {
         const { items, ...others } = tree;
@@ -49,7 +47,12 @@ function Menu(props) {
     const state = (0, react_stately_1.useTreeState)({
         children: menuChildren,
         items: filteredTree.items.map((i) => i.value),
-        selectionMode: "none",
+        selectionMode: typeof onChange === "function" ? "single" : "none",
+        disallowEmptySelection: typeof onChange === "function",
+        selectedKeys: selectedItem ? [selectedItem] : undefined,
+        onSelectionChange: (keys) => {
+            keys !== "all" && onChange && onChange([...keys.values()].map((k) => k.toString())[0]);
+        },
     });
     const menuRef = (0, react_1.useRef)(null);
     const { menuProps } = (0, react_aria_1.useMenu)({ ...ariaMenuProps, autoFocus: searchable ? false : true }, state, menuRef);

package/dist/components/internal/MenuItem.js

@@ -17,6 +17,7 @@ function MenuItemImpl(props) {
     const menuItem = item.value;
     const { disabled, onClick, label, destructive } = menuItem;
     const isDisabled = Boolean(disabled);
+    const isSelected = state.selectionManager.selectedKeys.has(label);
     const isFocused = state.selectionManager.focusedKey === item.key;
     const ref = (0, react_1.useRef)(null);
     const history = (0, react_router_1.useHistory)();
@@ -55,10 +56,19 @@ function MenuItemImpl(props) {
         }, ...tid[(0, defaultTestId_1.defaultTestId)(menuItem.label)], children: (0, Tooltip_1.maybeTooltip)({
             title: (0, Tooltip_1.resolveTooltip)(disabled),
             placement: "right",
-            children: maybeWrapInLink(onClick, isIconMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(IconMenuItem, { ...menuItem })) : isImageMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(ImageMenuItem, { ...menuItem })) : (label), isDisabled),
+            children: renderMenuItem(menuItem, isSelected, isDisabled, contrast),
         }) }));
 }
 exports.MenuItemImpl = MenuItemImpl;
+function renderMenuItem(menuItem, isSelected, isDisabled, contrast) {
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.w100.aic.jcsb.gap2.$, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.aic.$, children: maybeWrapInLink(menuItem.onClick, isIconMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(IconMenuItem, { ...menuItem })) : isImageMenuItem(menuItem) ? ((0, jsx_runtime_1.jsx)(ImageMenuItem, { ...menuItem })) : (menuItem.label), isDisabled) }), isSelected && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "check", color: !contrast
+                    ? isDisabled
+                        ? Css_1.Palette.Gray400
+                        : Css_1.Palette.LightBlue700
+                    : isDisabled
+                        ? Css_1.Palette.Gray500
+                        : Css_1.Palette.White }))] }));
+}
 function ImageMenuItem(item) {
     const { src, size = 24, label, isAvatar = false } = item;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.mr2.$, children: isAvatar ? ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { src: src, name: label, size: size === 24 ? "sm" : "lg" })) : ((0, jsx_runtime_1.jsx)("img", { width: size, src: src, css: Css_1.Css.br4.$, alt: label })) }), label] }));

package/dist/inputs/Value.js

@@ -15,7 +15,8 @@ function keyToValue(key) {
             return undefined;
         }
         else if (key.startsWith("__VALUE:boolean:")) {
-            return (key.split(":")[2] === "true" ? true : false);
+            // boolean values end with `;` (i.e. '__VALUE:boolean:true;').
+            return key.split(":")[2].startsWith("true");
         }
         else if (key.startsWith("__VALUE:number")) {
             return Number(key.split(":")[2]);

package/package.json

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