@homebound/beam 2.220.0 → 2.221.0

package/dist/components/ButtonMenu.d.ts

@@ -3,6 +3,7 @@ import { OverlayTriggerProps } from "./internal/OverlayTrigger";
 interface ButtonMenuProps extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip" | "showActiveBorder"> {
     items: MenuItem[];
     persistentItems?: MenuItem[];
+    searchable?: boolean;
     defaultOpen?: boolean;
 }
 export declare function ButtonMenu(props: ButtonMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/ButtonMenu.js

@@ -9,11 +9,11 @@ const Menu_1 = require("./internal/Menu");
 const OverlayTrigger_1 = require("./internal/OverlayTrigger");
 const utils_1 = require("../utils");
 function ButtonMenu(props) {
-    const { defaultOpen, disabled, items, persistentItems, trigger } = props;
+    const { defaultOpen, disabled, items, persistentItems, trigger, searchable } = 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) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
-    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));
+    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, searchable: searchable }, tid), void 0) }), void 0));
 }
 exports.ButtonMenu = ButtonMenu;

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

@@ -4,6 +4,7 @@ interface MenuProps<T> {
     ariaMenuProps: HTMLAttributes<HTMLElement>;
     onClose: VoidFunction;
     items: MenuItem[];
+    searchable?: boolean;
     persistentItems?: MenuItem[];
 }
 export declare function Menu<T>(props: PropsWithChildren<MenuProps<T>>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/internal/Menu.js

@@ -8,9 +8,10 @@ const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 const MenuSection_1 = require("./MenuSection");
 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 } = props;
+    const { ariaMenuProps, items, persistentItems, onClose, searchable } = 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)({
@@ -18,20 +19,49 @@ function Menu(props) {
         getKey: (item) => (0, change_case_1.camelCase)(item.label),
         getChildren: (item) => { var _a; return (_a = item.items) !== null && _a !== void 0 ? _a : []; },
     });
+    const [search, setSearch] = (0, react_1.useState)(undefined);
+    let { 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;
+        const [itemsSection, persistentSection] = items;
+        if (search) {
+            const filteredChildren = itemsSection.children.filter((item) => contains(item.value.label, search));
+            const { items, ...otherValues } = itemsSection.value;
+            const filteredValue = items === null || items === void 0 ? void 0 : items.filter((item) => contains(item.label, search));
+            return {
+                ...others,
+                items: [
+                    { ...itemsSection, value: { ...otherValues, children: filteredChildren, items: filteredValue } },
+                    persistentSection,
+                ],
+            };
+        }
+        else {
+            return tree;
+        }
+    }, [tree, search, contains]);
     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" });
+        return filteredTree.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, ""))));
+    }, [filteredTree]);
+    const state = (0, react_stately_1.useTreeState)({
+        children: menuChildren,
+        items: filteredTree.items.map((i) => i.value),
+        selectionMode: "none",
+    });
     const menuRef = (0, react_1.useRef)(null);
-    const { menuProps } = (0, react_aria_1.useMenu)({ ...ariaMenuProps, autoFocus: true }, state, menuRef);
+    const { menuProps } = (0, react_aria_1.useMenu)({ ...ariaMenuProps, autoFocus: searchable ? false : 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, { 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: onClose }, tid), item.key))) }), void 0) }, void 0));
+    (0, react_1.useEffect)(() => filteredTree.update("items", { label: "items", items }), [items]);
+    return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ 
+            // 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: {
+                ...Css_1.Css.df.fdc.myPx(4).bgWhite.outline0.br4.bshBasic.maxh("inherit").overflowAuto.$,
+                "&:hover": Css_1.Css.bshHover.$,
+            } }, { children: [searchable && ((0, jsx_runtime_1.jsx)(MenuSearchField_1.MenuSearchField, Object.assign({ label: "", value: search, placeholder: "Search...", inlineLabel: true, onChange: setSearch }, tid), void 0)), (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.$ }, 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) }, void 0));
 }
 exports.Menu = Menu;

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

@@ -0,0 +1,7 @@
+import { Only } from "../../Css";
+import { BeamTextFieldProps, TextFieldXss } from "../../interfaces";
+interface TextFieldProps<X> extends BeamTextFieldProps<X> {
+    inlineLabel: boolean;
+}
+export declare function MenuSearchField<X extends Only<TextFieldXss, X>>(props: TextFieldProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/inputs/internal/MenuSearchField.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSearchField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const textfield_1 = require("@react-aria/textfield");
+const react_1 = require("react");
+const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const TextFieldBase_1 = require("../TextFieldBase");
+function MenuSearchField(props) {
+    const tid = (0, utils_1.useTestIds)(props);
+    const inputRef = (0, react_1.useRef)(null);
+    const { labelProps, inputProps } = (0, textfield_1.useTextField)({ ...props }, inputRef);
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({ label: "", labelProps: labelProps, inputProps: inputProps, startAdornment: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "search" }, void 0) }, tid.search), void 0));
+}
+exports.MenuSearchField = MenuSearchField;

package/package.json

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