@homebound/beam 2.194.1 → 2.195.0
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.
|
@@ -56,7 +56,7 @@ function BeamProvider({ children, ...presentationProps }) {
|
|
|
56
56
|
drawerCanCloseDetailsChecks,
|
|
57
57
|
};
|
|
58
58
|
}, [modalBodyDiv, modalFooterDiv]);
|
|
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.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 &&
|
|
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.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));
|
|
60
60
|
}
|
|
61
61
|
exports.BeamProvider = BeamProvider;
|
|
62
62
|
/** Looks like a ref, but invokes a re-render on set (w/o changing the setter identity). */
|
|
@@ -24,7 +24,7 @@ function Modal(props) {
|
|
|
24
24
|
const { size = "md", content, forceScrolling, api, drawHeaderBorder = false } = props;
|
|
25
25
|
const isFixedHeight = typeof size !== "string";
|
|
26
26
|
const ref = (0, react_1.useRef)(null);
|
|
27
|
-
const { modalBodyDiv, modalFooterDiv, modalHeaderDiv
|
|
27
|
+
const { modalBodyDiv, modalFooterDiv, modalHeaderDiv } = (0, BeamContext_1.useBeamContext)();
|
|
28
28
|
const { closeModal } = (0, useModal_1.useModal)();
|
|
29
29
|
const { overlayProps, underlayProps } = (0, react_aria_1.useOverlay)({
|
|
30
30
|
...props,
|
|
@@ -56,10 +56,6 @@ function Modal(props) {
|
|
|
56
56
|
// Even though we use raw-divs for the createPortal calls, we do actually need to
|
|
57
57
|
// use refs + useEffect to stitch those raw divs back into the React component tree.
|
|
58
58
|
(0, react_1.useEffect)(() => {
|
|
59
|
-
// If the superdrawer is open, let it own the modal content
|
|
60
|
-
if (drawerContentStack.current.length > 0) {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
59
|
modalHeaderRef.current.appendChild(modalHeaderDiv);
|
|
64
60
|
modalBodyRef.current.appendChild(modalBodyDiv);
|
|
65
61
|
modalFooterRef.current.appendChild(modalFooterDiv);
|
|
@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.ConfirmCloseModal = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
5
5
|
const components_1 = require("..");
|
|
6
|
-
const Css_1 = require("../../Css");
|
|
7
6
|
const BeamContext_1 = require("../BeamContext");
|
|
8
7
|
/** Modal content to appear when a close checks fails */
|
|
9
8
|
function ConfirmCloseModal(props) {
|
|
@@ -15,10 +14,10 @@ function ConfirmCloseModal(props) {
|
|
|
15
14
|
// after a close and could/will cause other close attempts to fail.
|
|
16
15
|
modalState.current = undefined;
|
|
17
16
|
}
|
|
18
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ModalHeader, { children: "Are you sure you want to cancel?" }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalBody, { children: (0, jsx_runtime_1.jsx)("p", { children: "Any changes you've made so far will be lost." }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)(components_1.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
|
|
18
|
+
// The order of these calls doesn't really matter; close this modal and tell the call to do their close
|
|
19
|
+
onClose();
|
|
20
|
+
closeModal();
|
|
21
|
+
} }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { label: continueText, onClick: closeModal }, void 0)] }, void 0)] }, void 0));
|
|
23
22
|
}
|
|
24
23
|
exports.ConfirmCloseModal = ConfirmCloseModal;
|
|
@@ -35,19 +35,11 @@ const utils_2 = require("./utils");
|
|
|
35
35
|
*/
|
|
36
36
|
function SuperDrawer() {
|
|
37
37
|
var _a, _b;
|
|
38
|
-
const { drawerContentStack: contentStack
|
|
38
|
+
const { drawerContentStack: contentStack } = (0, BeamContext_1.useBeamContext)();
|
|
39
39
|
const { closeDrawer } = (0, components_1.useSuperDrawer)();
|
|
40
40
|
const modalBodyRef = (0, react_3.useRef)(null);
|
|
41
41
|
const modalFooterRef = (0, react_3.useRef)(null);
|
|
42
42
|
const testId = (0, utils_1.useTestIds)({}, "superDrawer");
|
|
43
|
-
// Steal the modal body/footer portals from Modal, if we're open
|
|
44
|
-
(0, react_3.useEffect)(() => {
|
|
45
|
-
if (modalBodyRef.current && modalFooterRef.current && modalState.current) {
|
|
46
|
-
modalBodyRef.current.appendChild(modalBodyDiv);
|
|
47
|
-
modalFooterRef.current.appendChild(modalFooterDiv);
|
|
48
|
-
}
|
|
49
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
50
|
-
}, [modalBodyRef.current, modalFooterRef.current, modalState.current]);
|
|
51
43
|
// Get the latest element on the stack
|
|
52
44
|
// We use undefined, nullish operators and empty object here to allow AnimatePresence
|
|
53
45
|
// to animate the drawers exit transition when our stack is empty
|
|
@@ -78,7 +70,7 @@ function SuperDrawer() {
|
|
|
78
70
|
// Custom transitions settings for the translateX animation
|
|
79
71
|
transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: width },
|
|
80
72
|
// Preventing clicks from triggering parent onClick
|
|
81
|
-
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
|
|
73
|
+
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.xl2Sb.gray900.mr2.$ }, testId.title, { children: title !== null && title !== void 0 ? title : null }), void 0), titleLeftContent !== null && titleLeftContent !== void 0 ? titleLeftContent : null] }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap3.aic.hPx(32).fs0.$ }, { children: [titleRightContent || null, !hideControls && ((0, jsx_runtime_1.jsx)(components_1.ButtonGroup, Object.assign({ buttons: [
|
|
82
74
|
{
|
|
83
75
|
icon: "chevronLeft",
|
|
84
76
|
onClick: () => onPrevClick && onPrevClick(),
|
|
@@ -89,8 +81,6 @@ function SuperDrawer() {
|
|
|
89
81
|
onClick: () => onNextClick && onNextClick(),
|
|
90
82
|
disabled: !onNextClick || isDetail,
|
|
91
83
|
},
|
|
92
|
-
] }, 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,
|
|
93
|
-
// Forcing some design constraints on the modal component
|
|
94
|
-
(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.fg1.top0.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))] }, void 0) }), "superDrawerContainer"))] }, void 0)) }, void 0), document.body);
|
|
84
|
+
] }, 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] }, void 0) }), "superDrawerContainer"))] }, void 0)) }, void 0), document.body);
|
|
95
85
|
}
|
|
96
86
|
exports.SuperDrawer = SuperDrawer;
|