@homebound/beam 2.157.3 → 2.160.0

package/dist/components/Chip.d.ts

@@ -1,7 +1,11 @@
 import { Margin, Only, Xss } from "../Css";
+declare type ChipType = "caution" | "warning" | "success" | "light" | "dark" | "neutral";
+export declare const ChipTypes: Record<ChipType, ChipType>;
 export interface ChipProps<X> {
     text: string;
     xss?: X;
+    type?: ChipType;
 }
 /** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
-export declare function Chip<X extends Only<Xss<Margin>, X>>(props: ChipProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Chip<X extends Only<Xss<Margin>, X>>({ type, ...props }: ChipProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chip.js

@@ -1,19 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Chip = void 0;
+exports.Chip = exports.ChipTypes = 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");
+// exporting for using in type prop as constant - this could be moved and become a global list for colors
+exports.ChipTypes = {
+    caution: "caution",
+    warning: "warning",
+    success: "success",
+    light: "light",
+    dark: "dark",
+    neutral: "neutral",
+};
 /** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
-function Chip(props) {
+function Chip({ type = exports.ChipTypes.neutral, ...props }) {
     const { text, xss = {} } = props;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     const compact = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact;
     const tid = (0, useTestIds_1.useTestIds)(props, "chip");
     return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
-            ...Css_1.Css[compact ? "xs" : "sm"].dif.aic.br16.pl1.px1.pyPx(2).gray900.bgGray200.$,
+            ...Css_1.Css[compact ? "xs" : "sm"].dif.aic.br16.pl1.px1.pyPx(2).gray900.$,
+            ...typeStyles[type],
             ...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));
 }
 exports.Chip = Chip;
+const typeStyles = {
+    caution: Css_1.Css.bgYellow200.$,
+    warning: Css_1.Css.bgRed100.$,
+    success: Css_1.Css.bgGreen100.$,
+    light: Css_1.Css.bgWhite.$,
+    dark: Css_1.Css.bgGray900.white.$,
+    neutral: Css_1.Css.bgGray200.$,
+};

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -12,6 +12,7 @@ const components_1 = require("..");
 const BeamContext_1 = require("../BeamContext");
 const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
+const utils_2 = require("./utils");
 /**
  * Global drawer component.
  *
@@ -59,6 +60,7 @@ function SuperDrawer() {
     const { onPrevClick, onNextClick, titleRightContent, titleLeftContent, hideControls } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
     const isDetail = currentContent !== firstContent;
     const title = content === undefined ? '' : currentContent.title || firstContent.title;
+    const { width = utils_2.SuperDrawerWidth.Normal } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Global, { styles: { body: Css_1.Css.overflowHidden.$ } }, void 0), (0, react_1.createElement)(framer_motion_1.motion.div, { ...testId, 
                     // Key is required for framer-motion animations
                     key: "superDrawer", 
@@ -72,11 +74,11 @@ function SuperDrawer() {
                     animate: { opacity: 1 }, 
                     // Unmount styles
                     exit: { opacity: 0, transition: { delay: 0.2 } }, onClick: closeDrawer },
-                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.aside, Object.assign({ css: Css_1.Css.bgWhite.h100.maxw((0, Css_1.px)(1040)).w100.df.fdc.relative.$, 
+                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.aside, Object.assign({ css: Css_1.Css.bgWhite.h100.maxw((0, Css_1.px)(width)).w100.df.fdc.relative.$, 
                         // Keeping initial x to 1040 as this will still work if the container is smaller
-                        initial: { x: 1040 }, animate: { x: 0 }, 
+                        initial: { x: width }, animate: { x: 0 }, 
                         // Custom transitions settings for the translateX animation
-                        transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: 1040 }, 
+                        transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: width }, 
                         // Preventing clicks from triggering parent onClick
                         onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.bb.bGray200.df.aic.jcsb.gap2.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.xl2Em.gray900.mr2.$ }, testId.title, { ref: drawerHeaderRef }, { children: !modalState.current && (title || null) }), void 0), !modalState.current && (titleLeftContent || null)] }), void 0), !modalState.current && (
                                         // Forcing height to 32px to match title height

package/dist/components/SuperDrawer/SuperDrawerContent.js

@@ -7,6 +7,7 @@ const BeamContext_1 = require("../BeamContext");
 const Button_1 = require("../Button");
 const useSuperDrawer_1 = require("./useSuperDrawer");
 const Css_1 = require("../../Css");
+const utils_1 = require("./utils");
 /**
  * Helper component to place the given children and actions into the appropriate
  * DOM format to render inside the SuperDrawer.
@@ -15,17 +16,19 @@ const Css_1 = require("../../Css");
  * that knows how to handle the title, prev/next link and the onClose handler.
  */
 const SuperDrawerContent = ({ children, actions }) => {
-    var _a;
+    var _a, _b;
     const { closeDrawerDetail } = (0, useSuperDrawer_1.useSuperDrawer)();
     const { drawerContentStack: contentStack } = (0, BeamContext_1.useBeamContext)();
     // Determine if the current element is a new content element or an detail element
     const { kind } = (_a = contentStack.current[contentStack.current.length - 1]) !== null && _a !== void 0 ? _a : {};
+    const firstContent = (_b = contentStack.current[0]) === null || _b === void 0 ? void 0 : _b.opts;
+    const { width = utils_1.SuperDrawerWidth.Normal } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
     function wrapWithMotionAndMaybeBack(children) {
         if (kind === "open") {
             return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ css: Css_1.Css.p3.fg1.overflowAuto.$ }, { children: children }), "content"));
         }
         else if (kind === "detail") {
-            return ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, Object.assign({ css: Css_1.Css.px3.pt2.pb3.fg1.$, animate: { overflow: "auto" }, transition: { overflow: { delay: 0.3 } } }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }, void 0), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: { x: 1040, opacity: 0 }, animate: { x: 0, opacity: 1 }, transition: { ease: "linear", duration: 0.3, opacity: { delay: 0.15 } }, exit: { x: 1040, opacity: 0 }, css: Css_1.Css.pt2.$ }, { children: children }), void 0)] }), "content"));
+            return ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, Object.assign({ css: Css_1.Css.px3.pt2.pb3.fg1.$, animate: { overflow: "auto" }, transition: { overflow: { delay: 0.3 } } }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: closeDrawerDetail }, void 0), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ initial: { x: width, opacity: 0 }, animate: { x: 0, opacity: 1 }, transition: { ease: "linear", duration: 0.3, opacity: { delay: 0.15 } }, exit: { x: width, opacity: 0 }, css: Css_1.Css.pt2.$ }, { children: children }), void 0)] }), "content"));
         }
         else {
             // Hides content changes when closing the drawer

package/dist/components/SuperDrawer/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./ConfirmCloseModal";
 export * from "./SuperDrawerContent";
 export * from "./useSuperDrawer";
+export * from "./utils";

package/dist/components/SuperDrawer/index.js

@@ -14,3 +14,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ConfirmCloseModal"), exports);
 __exportStar(require("./SuperDrawerContent"), exports);
 __exportStar(require("./useSuperDrawer"), exports);
+__exportStar(require("./utils"), exports);

package/dist/components/SuperDrawer/useSuperDrawer.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { CanCloseCheck } from "../../types";
+import { SuperDrawerWidth } from "./utils";
 export interface OpenInDrawerOpts {
     /** Title of the SuperDrawer */
     title: string;
@@ -16,6 +17,8 @@ export interface OpenInDrawerOpts {
     /** Adds a callback that is called _after_ close has definitely happened. */
     onClose?: () => void;
     content: ReactNode;
+    /** Adds the ability to change the SuperDrawer width based on some pre-defined values */
+    width?: SuperDrawerWidth;
 }
 export interface OpenDetailOpts {
     /** Title of the SuperDrawer for this detail page (replaces the original title). */

package/dist/components/SuperDrawer/utils.d.ts

@@ -0,0 +1,4 @@
+export declare enum SuperDrawerWidth {
+    Small = 560,
+    Normal = 1040
+}

package/dist/components/SuperDrawer/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuperDrawerWidth = void 0;
+var SuperDrawerWidth;
+(function (SuperDrawerWidth) {
+    SuperDrawerWidth[SuperDrawerWidth["Small"] = 560] = "Small";
+    SuperDrawerWidth[SuperDrawerWidth["Normal"] = 1040] = "Normal";
+})(SuperDrawerWidth = exports.SuperDrawerWidth || (exports.SuperDrawerWidth = {}));
+;

package/package.json

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