@homebound/beam 2.220.0 → 2.222.0

package/dist/components/BeamContext.js

@@ -10,6 +10,7 @@ const PresentationContext_1 = require("./PresentationContext");
 const SnackbarContext_1 = require("./Snackbar/SnackbarContext");
 const SuperDrawer_1 = require("./SuperDrawer/SuperDrawer");
 const index_1 = require("../utils/index");
+const ToastContext_1 = require("./Toast/ToastContext");
 /** This is only exported internally, for useModal and useSuperDrawer, it's not a public API. */
 exports.BeamContext = (0, react_1.createContext)({
     modalState: new index_1.EmptyRef(),
@@ -59,7 +60,7 @@ function BeamProvider({ children, ...presentationProps }) {
             sdHeaderDiv,
         };
     }, [modalBodyDiv, modalFooterDiv]);
-    return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({}, presentationProps, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsxs)(SnackbarContext_1.SnackbarProvider, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && (0, jsx_runtime_1.jsx)(Modal_1.Modal, Object.assign({}, modalRef.current), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }, void 0) }, void 0) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({}, presentationProps, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsxs)(SnackbarContext_1.SnackbarProvider, { children: [(0, jsx_runtime_1.jsx)(ToastContext_1.ToastProvider, { children: (0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && (0, jsx_runtime_1.jsx)(Modal_1.Modal, Object.assign({}, modalRef.current), void 0)] }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }, void 0) }, void 0) }), void 0) }), void 0));
 }
 exports.BeamProvider = BeamProvider;
 /** Looks like a ref, but invokes a re-render on set (w/o changing the setter identity). */

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

@@ -0,0 +1,2 @@
+export declare function Toast(): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare type ToastTypes = "error" | "warning" | "success" | "info" | "alert";

package/dist/components/Toast/Toast.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toast = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Icon_1 = require("../Icon");
+const Css_1 = require("../../Css");
+const utils_1 = require("../../utils");
+const IconButton_1 = require("../IconButton");
+const ToastContext_1 = require("./ToastContext");
+function Toast() {
+    const { setNotice, notice } = (0, ToastContext_1.useToastContext)();
+    const tid = (0, utils_1.useTestIds)({}, "toast");
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: notice && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { ...variantStyles[notice.type], ...Css_1.Css.df.aic.w100.gap1.p2.gray900.base.bshBasic.$ } }, tid, { role: "alert" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: typeToIcon[notice.type] }, tid.type, { color: Css_1.Palette.Gray900 }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fg1.$ }, tid.message, { children: notice.message }), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lh(0).$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", onClick: () => setNotice(undefined) }, tid.close, { color: Css_1.Palette.Gray900 }), void 0) }), void 0)] }), void 0)) }, void 0));
+}
+exports.Toast = Toast;
+const typeToIcon = {
+    success: "checkCircle",
+    info: "infoCircle",
+    warning: "error",
+    alert: "errorCircle",
+    error: "xCircle",
+};
+const variantStyles = {
+    success: Css_1.Css.bgGreen100.gray900.$,
+    info: Css_1.Css.bgLightBlue100.gray900.$,
+    warning: Css_1.Css.bgYellow200.gray900.$,
+    alert: Css_1.Css.bgGray200.gray900.$,
+    error: Css_1.Css.bgRed100.gray900.$,
+};

package/dist/components/Toast/ToastContext.d.ts

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren, ReactNode } from "react";
+import { ToastTypes } from "./Toast";
+export interface ToastNoticeProps {
+    type: ToastTypes;
+    message: ReactNode;
+}
+export declare type ToastContextProps = {
+    notice: ToastNoticeProps | undefined;
+    setNotice: React.Dispatch<React.SetStateAction<ToastNoticeProps | undefined>>;
+};
+export declare const ToastContext: React.Context<ToastContextProps>;
+export declare function ToastProvider(props: PropsWithChildren<{}>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useToastContext(): ToastContextProps;

package/dist/components/Toast/ToastContext.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToastContext = exports.ToastProvider = exports.ToastContext = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+exports.ToastContext = (0, react_1.createContext)({
+    setNotice: () => {
+        throw new Error("Missing ToastProvider");
+    },
+    notice: undefined,
+});
+function ToastProvider(props) {
+    const [notice, setNotice] = (0, react_1.useState)();
+    const contextValue = (0, react_1.useMemo)(() => ({ setNotice, notice }), [setNotice, notice]);
+    return (0, jsx_runtime_1.jsx)(exports.ToastContext.Provider, Object.assign({ value: contextValue }, { children: props.children }), void 0);
+}
+exports.ToastProvider = ToastProvider;
+function useToastContext() {
+    return (0, react_1.useContext)(exports.ToastContext);
+}
+exports.useToastContext = useToastContext;

package/dist/components/Toast/useToast.d.ts

@@ -0,0 +1,5 @@
+import { ToastNoticeProps } from "./ToastContext";
+export interface UseToastProps {
+    showToast: (props: ToastNoticeProps) => void;
+}
+export declare function useToast(): UseToastProps;

package/dist/components/Toast/useToast.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToast = void 0;
+const react_1 = require("react");
+const ToastContext_1 = require("./ToastContext");
+function useToast() {
+    const { setNotice } = (0, ToastContext_1.useToastContext)();
+    const showToast = (0, react_1.useCallback)((props) => {
+        setNotice(props);
+    }, [setNotice]);
+    return { showToast };
+}
+exports.useToast = useToast;

package/dist/components/index.d.ts

@@ -5,7 +5,6 @@ export * from "./ToggleChip";
 export * from "./ToggleChips";
 export * from "./Accordion";
 export * from "./AccordionList";
-export * from "./Alert";
 export * from "./AutoSaveIndicator";
 export * from "./Avatar";
 export * from "./AvatarButton";
@@ -13,8 +12,8 @@ export { BeamProvider } from "./BeamContext";
 export * from "./Button";
 export * from "./ButtonDatePicker";
 export * from "./ButtonGroup";
-export * from "./ButtonModal";
 export * from "./ButtonMenu";
+export * from "./ButtonModal";
 export * from "./Copy";
 export * from "./CssReset";
 export * from "./Filters";
@@ -36,4 +35,6 @@ export * from "./Table";
 export { TabContent, Tabs, TabsWithContent } from "./Tabs";
 export type { RouteTab, RouteTabWithContent, Tab, TabWithContent } from "./Tabs";
 export * from "./Tag";
+export * from "./Toast/Toast";
+export { useToast } from "./Toast/useToast";
 export * from "./Tooltip";

package/dist/components/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsWithContent = exports.Tabs = exports.TabContent = exports.PresentationProvider = exports.NavLink = exports.HB_QUIPS_MISSION = exports.HB_QUIPS_FLAVOR = exports.HbSpinnerProvider = exports.HbLoadingSpinner = exports.BeamProvider = void 0;
+exports.useToast = exports.TabsWithContent = exports.Tabs = exports.TabContent = exports.PresentationProvider = exports.NavLink = exports.HB_QUIPS_MISSION = exports.HB_QUIPS_FLAVOR = exports.HbSpinnerProvider = exports.HbLoadingSpinner = exports.BeamProvider = void 0;
 __exportStar(require("./Chip"), exports);
 __exportStar(require("./Chips"), exports);
 __exportStar(require("./Table/GridTable"), exports);
@@ -18,7 +18,6 @@ __exportStar(require("./ToggleChip"), exports);
 __exportStar(require("./ToggleChips"), exports);
 __exportStar(require("./Accordion"), exports);
 __exportStar(require("./AccordionList"), exports);
-__exportStar(require("./Alert"), exports);
 __exportStar(require("./AutoSaveIndicator"), exports);
 __exportStar(require("./Avatar"), exports);
 __exportStar(require("./AvatarButton"), exports);
@@ -27,8 +26,8 @@ Object.defineProperty(exports, "BeamProvider", { enumerable: true, get: function
 __exportStar(require("./Button"), exports);
 __exportStar(require("./ButtonDatePicker"), exports);
 __exportStar(require("./ButtonGroup"), exports);
-__exportStar(require("./ButtonModal"), exports);
 __exportStar(require("./ButtonMenu"), exports);
+__exportStar(require("./ButtonModal"), exports);
 __exportStar(require("./Copy"), exports);
 __exportStar(require("./CssReset"), exports);
 __exportStar(require("./Filters"), exports);
@@ -57,4 +56,7 @@ Object.defineProperty(exports, "TabContent", { enumerable: true, get: function (
 Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
 Object.defineProperty(exports, "TabsWithContent", { enumerable: true, get: function () { return Tabs_1.TabsWithContent; } });
 __exportStar(require("./Tag"), exports);
+__exportStar(require("./Toast/Toast"), exports);
+var useToast_1 = require("./Toast/useToast");
+Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return useToast_1.useToast; } });
 __exportStar(require("./Tooltip"), exports);

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.222.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",

package/dist/components/Alert.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from "react";
-export interface AlertProps {
-    children: ReactNode;
-    onClose: () => void;
-}
-export declare function Alert(props: AlertProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Alert.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alert = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const IconButton_1 = require("./IconButton");
-const Css_1 = require("../Css");
-function Alert(props) {
-    const { children, onClose } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aifs.jcsb.bgRed100.ba.bRed400.red700.p2.br4.$, role: "alert" }, { children: [(0, jsx_runtime_1.jsx)("div", { children: children }, void 0), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { icon: "x", color: Css_1.Palette.Red700, onClick: onClose }, void 0)] }), void 0));
-}
-exports.Alert = Alert;