@homebound/beam 2.136.1 → 2.137.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.
- package/dist/components/AutoSaveIndicator.d.ts +6 -0
- package/dist/components/AutoSaveIndicator.js +42 -0
- package/dist/components/BeamContext.js +2 -1
- package/dist/components/Modal/Modal.js +7 -6
- package/dist/components/SuperDrawer/SuperDrawer.js +20 -19
- package/dist/types.d.ts +1 -0
- package/dist/types.js +5 -0
- package/package.json +2 -2
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.AutoSaveIndicator = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
5
|
+
const form_state_1 = require("@homebound/form-state");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const Css_1 = require("../Css");
|
|
8
|
+
const types_1 = require("../types");
|
|
9
|
+
const _1 = require(".");
|
|
10
|
+
const Icon_1 = require("./Icon");
|
|
11
|
+
function AutoSaveIndicator({ hideOnIdle, doNotReset }) {
|
|
12
|
+
const { status, resetStatus, errors } = (0, form_state_1.useAutoSaveStatus)();
|
|
13
|
+
(0, react_1.useEffect)(() => {
|
|
14
|
+
if (doNotReset)
|
|
15
|
+
return;
|
|
16
|
+
/**
|
|
17
|
+
* Any time AutoSaveIndicator dismounts, most likely on Page Navigation,
|
|
18
|
+
* state should clear before the next Indicator mounts
|
|
19
|
+
*/
|
|
20
|
+
return () => resetStatus();
|
|
21
|
+
}, []);
|
|
22
|
+
switch (status) {
|
|
23
|
+
case form_state_1.AutoSaveStatus.IDLE:
|
|
24
|
+
return hideOnIdle ? null : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "cloudSave", color: Css_1.Palette.Gray700 }, void 0);
|
|
25
|
+
case form_state_1.AutoSaveStatus.SAVING:
|
|
26
|
+
return ((0, jsx_runtime_1.jsx)(HelperText, Object.assign({ text: "Saving...", color: Css_1.Palette.Gray700 }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "refresh", color: Css_1.Palette.Gray700 }, void 0) }), void 0));
|
|
27
|
+
case form_state_1.AutoSaveStatus.DONE:
|
|
28
|
+
return ((0, jsx_runtime_1.jsx)(HelperText, Object.assign({ text: "Saved", color: Css_1.Palette.LightBlue700 }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "cloudSave", color: Css_1.Palette.LightBlue700 }, void 0) }), void 0));
|
|
29
|
+
case form_state_1.AutoSaveStatus.ERROR:
|
|
30
|
+
return (
|
|
31
|
+
/**
|
|
32
|
+
* Tooltip is expanding to fill as much available space as it can, possibly
|
|
33
|
+
* rendering it far away from the Icon/Text. Wrap it with a div to constrain
|
|
34
|
+
* it.
|
|
35
|
+
*/
|
|
36
|
+
(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.dif.$ }, { children: (0, jsx_runtime_1.jsx)(_1.Tooltip, Object.assign({ title: String(errors), placement: "bottom" }, { children: (0, jsx_runtime_1.jsx)(HelperText, Object.assign({ text: "Error saving", color: Css_1.Palette.Gray700 }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "error", color: Css_1.Palette.Red500 }, void 0) }), void 0) }), void 0) }), void 0));
|
|
37
|
+
default:
|
|
38
|
+
(0, types_1.assertNever)(status);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
exports.AutoSaveIndicator = AutoSaveIndicator;
|
|
42
|
+
const HelperText = ({ text, color, children }) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.color(color).$ }, { children: [children, text] }), void 0));
|
|
@@ -2,6 +2,7 @@
|
|
|
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");
|
|
5
6
|
const react_1 = require("react");
|
|
6
7
|
const react_aria_1 = require("react-aria");
|
|
7
8
|
const Modal_1 = require("./Modal/Modal");
|
|
@@ -56,7 +57,7 @@ function BeamProvider({ children, ...presentationProps }) {
|
|
|
56
57
|
tabActionsDiv,
|
|
57
58
|
};
|
|
58
59
|
}, [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.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));
|
|
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.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 && 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) }), void 0));
|
|
60
61
|
}
|
|
61
62
|
exports.BeamProvider = BeamProvider;
|
|
62
63
|
/** Looks like a ref, but invokes a re-render on set (w/o changing the setter identity). */
|
|
@@ -5,6 +5,7 @@ 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");
|
|
8
9
|
const resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
|
|
9
10
|
const react_1 = require("react");
|
|
10
11
|
const react_aria_1 = require("react-aria");
|
|
@@ -64,12 +65,12 @@ function Modal(props) {
|
|
|
64
65
|
modalBodyRef.current.appendChild(modalBodyDiv);
|
|
65
66
|
modalFooterRef.current.appendChild(modalFooterDiv);
|
|
66
67
|
}, [modalBodyRef, modalFooterRef, modalHeaderRef]);
|
|
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
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
68
|
+
return ((0, jsx_runtime_1.jsx)(react_aria_1.OverlayContainer, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { 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
|
|
69
|
+
.maxh("90vh")
|
|
70
|
+
.df.fdc.wPx(width)
|
|
71
|
+
.mh((0, Css_1.px)(defaultMinHeight))
|
|
72
|
+
.if(isFixedHeight)
|
|
73
|
+
.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) }, void 0));
|
|
73
74
|
}
|
|
74
75
|
exports.Modal = Modal;
|
|
75
76
|
function ModalHeader({ children }) {
|
|
@@ -4,6 +4,7 @@ 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");
|
|
7
8
|
const framer_motion_1 = require("framer-motion");
|
|
8
9
|
const react_3 = require("react");
|
|
9
10
|
const react_dom_1 = require("react-dom");
|
|
@@ -71,29 +72,29 @@ function SuperDrawer() {
|
|
|
71
72
|
animate: { opacity: 1 },
|
|
72
73
|
// Unmount styles
|
|
73
74
|
exit: { opacity: 0, transition: { delay: 0.2 } }, onClick: closeDrawer },
|
|
74
|
-
(0, jsx_runtime_1.
|
|
75
|
+
(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.$,
|
|
75
76
|
// Keeping initial x to 1040 as this will still work if the container is smaller
|
|
76
77
|
initial: { x: 1040 }, animate: { x: 0 },
|
|
77
78
|
// Custom transitions settings for the translateX animation
|
|
78
79
|
transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: 1040 },
|
|
79
80
|
// Preventing clicks from triggering parent onClick
|
|
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
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
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.$ }, { 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 && (
|
|
82
|
+
// Forcing height to 32px to match title height
|
|
83
|
+
(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: [
|
|
84
|
+
{
|
|
85
|
+
icon: "chevronLeft",
|
|
86
|
+
onClick: () => onPrevClick && onPrevClick(),
|
|
87
|
+
disabled: !onPrevClick || isDetail,
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
icon: "chevronRight",
|
|
91
|
+
onClick: () => onNextClick && onNextClick(),
|
|
92
|
+
disabled: !onNextClick || isDetail,
|
|
93
|
+
},
|
|
94
|
+
] }, 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 && (
|
|
95
|
+
// Forcing some design constraints on the modal component
|
|
96
|
+
(0, jsx_runtime_1.jsxs)("div", Object.assign({ css:
|
|
97
|
+
// topPX(81) is the offset from the header
|
|
98
|
+
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))] }, void 0) }), "superDrawerContainer"))] }, void 0)) }, void 0), document.body);
|
|
98
99
|
}
|
|
99
100
|
exports.SuperDrawer = SuperDrawer;
|
package/dist/types.d.ts
CHANGED
package/dist/types.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@homebound/beam",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.137.0",
|
|
4
4
|
"author": "Homebound",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md}\""
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@homebound/form-state": "2.
|
|
35
|
+
"@homebound/form-state": "2.15.1",
|
|
36
36
|
"@internationalized/number": "^3.0.3",
|
|
37
37
|
"@react-aria/utils": "^3.11.3",
|
|
38
38
|
"@react-hook/resize-observer": "^1.2.2",
|