@homebound/beam 2.157.3 → 2.158.0

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