@homebound/beam 2.224.0 → 2.225.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 Layout_1 = require("./Layout");
 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)({
@@ -60,7 +61,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.jsx)(SnackbarContext_1.SnackbarProvider, { children: (0, jsx_runtime_1.jsxs)(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), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }, 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)(Layout_1.RightPaneProvider, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)(SnackbarContext_1.SnackbarProvider, { children: (0, jsx_runtime_1.jsxs)(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), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }, void 0) }, 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/Layout/RightPaneLayout/RightPaneContext.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+export interface OpenRightPaneOpts {
+    content: ReactNode;
+}
+export declare type RightPaneLayoutContextProps = {
+    openInPane: (opts: OpenRightPaneOpts) => void;
+    closePane: () => void;
+    clearPane: () => void;
+    isRightPaneOpen: Boolean;
+    rightPaneContent: ReactNode;
+};
+export declare const RightPaneContext: React.Context<RightPaneLayoutContextProps>;
+export declare function RightPaneProvider({ children }: {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useRightPaneContext(): RightPaneLayoutContextProps;

package/dist/components/Layout/RightPaneLayout/RightPaneContext.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRightPaneContext = exports.RightPaneProvider = exports.RightPaneContext = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.RightPaneContext = react_1.default.createContext({
+    openInPane: () => { },
+    closePane: () => { },
+    clearPane: () => { },
+    isRightPaneOpen: false,
+    rightPaneContent: null,
+});
+function RightPaneProvider({ children }) {
+    // Note: separating the pane content from isOpen state to prevent animating when updating content.
+    const [rightPaneContent, setRightPaneContent] = (0, react_1.useState)(undefined);
+    const [isRightPaneOpen, setIsRightPaneOpen] = (0, react_1.useState)(false);
+    const openInPane = (0, react_1.useCallback)((opts) => {
+        setRightPaneContent(opts === null || opts === void 0 ? void 0 : opts.content);
+        setIsRightPaneOpen(true);
+    }, [setRightPaneContent]);
+    const closePane = (0, react_1.useCallback)(() => setIsRightPaneOpen(false), [setRightPaneContent]);
+    const clearPane = (0, react_1.useCallback)(() => setRightPaneContent(undefined), [setRightPaneContent]);
+    const context = (0, react_1.useMemo)(() => ({ openInPane, closePane, clearPane, rightPaneContent, isRightPaneOpen }), [openInPane, closePane, rightPaneContent, clearPane, isRightPaneOpen]);
+    return (0, jsx_runtime_1.jsx)(exports.RightPaneContext.Provider, Object.assign({ value: context }, { children: children }), void 0);
+}
+exports.RightPaneProvider = RightPaneProvider;
+function useRightPaneContext() {
+    return (0, react_1.useContext)(exports.RightPaneContext);
+}
+exports.useRightPaneContext = useRightPaneContext;

package/dist/components/Layout/RightPaneLayout/RightPaneLayout.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from "react";
+import { Palette } from "../../../Css";
+export declare function RightPaneLayout({ children, paneBgColor, paneWidth, }: {
+    children: ReactElement;
+    paneBgColor?: Palette;
+    paneWidth?: number;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Layout/RightPaneLayout/RightPaneLayout.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RightPaneLayout = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const framer_motion_1 = require("framer-motion");
+const Css_1 = require("../../../Css");
+const RightPaneContext_1 = require("./RightPaneContext");
+function RightPaneLayout({ children, paneBgColor = Css_1.Palette.White, paneWidth = 450, }) {
+    const { isRightPaneOpen, rightPaneContent, clearPane } = (0, RightPaneContext_1.useRightPaneContext)();
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.h100.df.overflowXHidden.$ }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.w(`calc(100% - ${paneWidth + 24}px)`)
+                        .add("transition", "width .2s linear")
+                        .h100.mr3.overflowXAuto.if(!isRightPaneOpen).w100.mr0.$ }, { children: children }), void 0), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isRightPaneOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ layout: "position", "data-testid": "rightPaneContent", css: Css_1.Css.bgColor(paneBgColor).h100.wPx(paneWidth).$, 
+                        // Keeping initial x to offset pane width and space between panel and page content
+                        initial: { x: paneWidth + 24 }, animate: { x: 0 }, transition: { ease: "linear", duration: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: paneWidth }, 
+                        // Clear the content of the detail pane when the animation is completed and only when pane is closing
+                        onAnimationComplete: (definition) => definition.x !== 0 && clearPane() }, { children: rightPaneContent }), "rightPane")) }, void 0)] }, void 0) }), void 0));
+}
+exports.RightPaneLayout = RightPaneLayout;

package/dist/components/Layout/RightPaneLayout/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./RightPaneContext";
+export * from "./RightPaneLayout";
+export * from "./useRightPane";

package/dist/components/Layout/RightPaneLayout/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./RightPaneContext"), exports);
+__exportStar(require("./RightPaneLayout"), exports);
+__exportStar(require("./useRightPane"), exports);

package/dist/components/Layout/RightPaneLayout/useRightPane.d.ts

@@ -0,0 +1,8 @@
+import { OpenRightPaneOpts } from "./RightPaneContext";
+export interface UseRightPaneHook {
+    /** Opens a right pane */
+    openRightPane: (opts: OpenRightPaneOpts) => void;
+    /** Closes the right pane */
+    closeRightPane: () => void;
+}
+export declare function useRightPane(): UseRightPaneHook;

package/dist/components/Layout/RightPaneLayout/useRightPane.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRightPane = void 0;
+const RightPaneContext_1 = require("./RightPaneContext");
+function useRightPane() {
+    const { openInPane, closePane } = (0, RightPaneContext_1.useRightPaneContext)();
+    return {
+        openRightPane: openInPane,
+        closeRightPane: closePane,
+    };
+}
+exports.useRightPane = useRightPane;

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

@@ -1,4 +1,5 @@
 export * from "./FullBleed";
 export * from "./PreventBrowserScroll";
+export * from "./RightPaneLayout";
 export * from "./ScrollableContent";
 export * from "./ScrollableParent";

package/dist/components/Layout/index.js

@@ -12,5 +12,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./FullBleed"), exports);
 __exportStar(require("./PreventBrowserScroll"), exports);
+__exportStar(require("./RightPaneLayout"), exports);
 __exportStar(require("./ScrollableContent"), exports);
 __exportStar(require("./ScrollableParent"), exports);

package/package.json

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