@homebound/beam 2.221.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/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/package.json

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