@homebound/beam 2.137.2 → 2.137.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useBeamContext = exports.BeamProvider = exports.BeamContext = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
5
|
-
const form_state_1 = require("@homebound/form-state");
|
|
6
5
|
const react_1 = require("react");
|
|
7
6
|
const react_aria_1 = require("react-aria");
|
|
8
7
|
const Modal_1 = require("./Modal/Modal");
|
|
@@ -57,7 +56,7 @@ function BeamProvider({ children, ...presentationProps }) {
|
|
|
57
56
|
tabActionsDiv,
|
|
58
57
|
};
|
|
59
58
|
}, [modalBodyDiv, modalFooterDiv]);
|
|
60
|
-
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.
|
|
59
|
+
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.jsxs)(SnackbarContext_1.SnackbarProvider, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && drawerContentStackRef.current.length === 0 && (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));
|
|
61
60
|
}
|
|
62
61
|
exports.BeamProvider = BeamProvider;
|
|
63
62
|
/** Looks like a ref, but invokes a re-render on set (w/o changing the setter identity). */
|
|
@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = void 0;
|
|
7
7
|
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
8
|
-
const form_state_1 = require("@homebound/form-state");
|
|
9
8
|
const resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
|
|
10
9
|
const react_1 = require("react");
|
|
11
10
|
const react_aria_1 = require("react-aria");
|
|
@@ -65,12 +64,12 @@ function Modal(props) {
|
|
|
65
64
|
modalBodyRef.current.appendChild(modalBodyDiv);
|
|
66
65
|
modalFooterRef.current.appendChild(modalFooterDiv);
|
|
67
66
|
}, [modalBodyRef, modalFooterRef, modalHeaderRef]);
|
|
68
|
-
return ((0, jsx_runtime_1.jsx)(react_aria_1.OverlayContainer, { children: (0, jsx_runtime_1.jsx)(
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
67
|
+
return ((0, jsx_runtime_1.jsx)(react_aria_1.OverlayContainer, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.underlay.z4.$ }, underlayProps, testId.underlay, { children: (0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, Object.assign({ contain: true, restoreFocus: true, autoFocus: true }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.br24.bgWhite.bshModal.overflowHidden
|
|
68
|
+
.maxh("90vh")
|
|
69
|
+
.df.fdc.wPx(width)
|
|
70
|
+
.mh((0, Css_1.px)(defaultMinHeight))
|
|
71
|
+
.if(isFixedHeight)
|
|
72
|
+
.hPx(height).$, ref: ref }, overlayProps, dialogProps, modalProps, testId, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.fg1.xl2Em.gray900.$, ref: modalHeaderRef }, titleProps, testId.title), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.pl1.$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", onClick: closeModal }, testId.titleClose), void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("main", Object.assign({ ref: contentRef, css: Css_1.Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$ }, { children: [content, (0, jsx_runtime_1.jsx)("div", { ref: modalBodyRef }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }, void 0));
|
|
74
73
|
}
|
|
75
74
|
exports.Modal = Modal;
|
|
76
75
|
function ModalHeader({ children }) {
|
|
@@ -4,7 +4,6 @@ exports.SuperDrawer = void 0;
|
|
|
4
4
|
const react_1 = require("@emotion/react");
|
|
5
5
|
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
6
6
|
const react_2 = require("@emotion/react");
|
|
7
|
-
const form_state_1 = require("@homebound/form-state");
|
|
8
7
|
const framer_motion_1 = require("framer-motion");
|
|
9
8
|
const react_3 = require("react");
|
|
10
9
|
const react_dom_1 = require("react-dom");
|
|
@@ -72,29 +71,29 @@ function SuperDrawer() {
|
|
|
72
71
|
animate: { opacity: 1 },
|
|
73
72
|
// Unmount styles
|
|
74
73
|
exit: { opacity: 0, transition: { delay: 0.2 } }, onClick: closeDrawer },
|
|
75
|
-
(0, jsx_runtime_1.
|
|
74
|
+
(0, jsx_runtime_1.jsxs)(framer_motion_1.motion.aside, Object.assign({ css: Css_1.Css.bgWhite.h100.maxw((0, Css_1.px)(1040)).w100.df.fdc.relative.$,
|
|
76
75
|
// Keeping initial x to 1040 as this will still work if the container is smaller
|
|
77
76
|
initial: { x: 1040 }, animate: { x: 0 },
|
|
78
77
|
// Custom transitions settings for the translateX animation
|
|
79
78
|
transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: 1040 },
|
|
80
79
|
// Preventing clicks from triggering parent onClick
|
|
81
|
-
onClick: (e) => e.stopPropagation() }, { children:
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
80
|
+
onClick: (e) => e.stopPropagation() }, { 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 && (
|
|
81
|
+
// Forcing height to 32px to match title height
|
|
82
|
+
(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap3.aic.hPx(32).fs0.$ }, { children: [titleRightContent || null, (0, jsx_runtime_1.jsx)(components_1.ButtonGroup, Object.assign({ buttons: [
|
|
83
|
+
{
|
|
84
|
+
icon: "chevronLeft",
|
|
85
|
+
onClick: () => onPrevClick && onPrevClick(),
|
|
86
|
+
disabled: !onPrevClick || isDetail,
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
icon: "chevronRight",
|
|
90
|
+
onClick: () => onNextClick && onNextClick(),
|
|
91
|
+
disabled: !onNextClick || isDetail,
|
|
92
|
+
},
|
|
93
|
+
] }, testId.headerActions), void 0), (0, jsx_runtime_1.jsx)(components_1.IconButton, Object.assign({ icon: "x", onClick: closeDrawer }, testId.close), void 0)] }), void 0))] }), void 0), content, modalState.current && (
|
|
94
|
+
// Forcing some design constraints on the modal component
|
|
95
|
+
(0, jsx_runtime_1.jsxs)("div", Object.assign({ css:
|
|
96
|
+
// topPX(81) is the offset from the header
|
|
97
|
+
Css_1.Css.fg1.topPx(81).left0.right0.bottom0.absolute.bgWhite.df.aic.jcc.fg1.fdc.z5.$ }, { children: [modalState.current.content, (0, jsx_runtime_1.jsx)("div", { ref: modalBodyRef }, void 0), (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0)] }), void 0))] }), "superDrawerContainer"))] }, void 0)) }, void 0), document.body);
|
|
99
98
|
}
|
|
100
99
|
exports.SuperDrawer = SuperDrawer;
|