@homebound/beam 2.137.0 → 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.
- package/dist/components/BeamContext.js +1 -2
- package/dist/components/Modal/Modal.js +6 -7
- package/dist/components/SuperDrawer/SuperDrawer.js +19 -20
- package/dist/forms/FormStateApp.js +1 -1
- package/dist/forms/StaticField.js +3 -1
- package/dist/forms/index.d.ts +0 -1
- package/dist/forms/index.js +0 -1
- package/dist/inputs/TextFieldBase.js +7 -6
- package/package.json +1 -1
- package/dist/forms/StaticLinkField.d.ts +0 -6
- package/dist/forms/StaticLinkField.js +0 -10
|
@@ -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;
|
|
@@ -56,7 +56,7 @@ function FormStateApp() {
|
|
|
56
56
|
{ value: "a:4", label: "Iguana" },
|
|
57
57
|
{ value: "a:5", label: "Turtle" },
|
|
58
58
|
];
|
|
59
|
-
return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.wPx(700).$ }, { children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, Object.assign({ labelSuffix: { required: "*", optional: "(Opt)" } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }, void 0), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.
|
|
59
|
+
return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.wPx(700).$ }, { children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, Object.assign({ labelSuffix: { required: "*", optional: "(Opt)" } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }, void 0), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.StaticField, Object.assign({ label: "Website" }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "https://google.com" }, { children: "google.com" }), void 0) }), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }, void 0), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows, observeRows: true }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap1.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.revertChanges(), label: "Cancel" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => {
|
|
60
60
|
if (formState.canSave()) {
|
|
61
61
|
formState.commitChanges();
|
|
62
62
|
}
|
|
@@ -2,12 +2,14 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.StaticField = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
5
|
+
const utils_1 = require("@react-aria/utils");
|
|
5
6
|
const Css_1 = require("../Css");
|
|
6
7
|
const defaultTestId_1 = require("../utils/defaultTestId");
|
|
7
8
|
const useTestIds_1 = require("../utils/useTestIds");
|
|
8
9
|
function StaticField(props) {
|
|
9
10
|
const { label, value, children } = props;
|
|
10
11
|
const tid = (0, useTestIds_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
|
|
11
|
-
|
|
12
|
+
const id = (0, utils_1.useId)();
|
|
13
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ css: Css_1.Css.db.sm.gray700.mbPx(4).$, htmlFor: id }, tid.label, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: id, css: Css_1.Css.smEm.gray900.df.aic.$ }, tid, { children: value || children }), void 0)] }, void 0));
|
|
12
14
|
}
|
|
13
15
|
exports.StaticField = StaticField;
|
package/dist/forms/index.d.ts
CHANGED
package/dist/forms/index.js
CHANGED
|
@@ -27,4 +27,3 @@ __exportStar(require("./BoundToggleChipGroupField"), exports);
|
|
|
27
27
|
__exportStar(require("./FormHeading"), exports);
|
|
28
28
|
__exportStar(require("./FormLines"), exports);
|
|
29
29
|
__exportStar(require("./StaticField"), exports);
|
|
30
|
-
__exportStar(require("./StaticLinkField"), exports);
|
|
@@ -18,7 +18,7 @@ function TextFieldBase(props) {
|
|
|
18
18
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
19
19
|
const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
|
|
20
20
|
const { label, required, labelProps, hideLabel = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.hideLabel) !== null && _a !== void 0 ? _a : false, inputProps, inputRef, inputWrapRef, groupProps, compact = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _b !== void 0 ? _b : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, inlineLabel, contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, } = props;
|
|
21
|
-
const typeScale = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _e !== void 0 ? _e : "sm";
|
|
21
|
+
const typeScale = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _e !== void 0 ? _e : (inputProps.readOnly && !hideLabel ? "smEm" : "sm");
|
|
22
22
|
const errorInTooltip = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _f !== void 0 ? _f : false;
|
|
23
23
|
const internalProps = props.internalProps || {};
|
|
24
24
|
const { compound = false, forceFocus = false, forceHover = false } = internalProps;
|
|
@@ -52,11 +52,12 @@ function TextFieldBase(props) {
|
|
|
52
52
|
...(!compound ? Css_1.Css.ba.$ : {}),
|
|
53
53
|
},
|
|
54
54
|
inputWrapperReadOnly: {
|
|
55
|
-
...Css_1.Css[typeScale].df.aic.w100
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
.mhPx(
|
|
59
|
-
|
|
55
|
+
...Css_1.Css[typeScale].df.aic.w100.gray900.if(contrast).white.$,
|
|
56
|
+
// If we are hiding the label, then we are typically in a table. Keep the `mh` in this case to ensure editable and non-editable fields in a single table row line up properly
|
|
57
|
+
...(hideLabel &&
|
|
58
|
+
Css_1.Css.mhPx(fieldHeight - maybeSmaller)
|
|
59
|
+
.if(compact)
|
|
60
|
+
.mhPx(compactFieldHeight - maybeSmaller).$),
|
|
60
61
|
},
|
|
61
62
|
input: {
|
|
62
63
|
...Css_1.Css.w100.mw0.outline0.fg1.if(multiline).br4.$,
|
package/package.json
CHANGED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.StaticLinkField = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
5
|
-
const Css_1 = require("../Css");
|
|
6
|
-
function StaticLinkField(props) {
|
|
7
|
-
const { label, href } = props;
|
|
8
|
-
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ css: Css_1.Css.db.sm.gray700.mbPx(4).$ }, { children: label }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.sm.gray900.hPx(40).df.aic.$ }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: href }, { children: href.replace(/^https?:\/\//, "") }), void 0) }), void 0)] }, void 0));
|
|
9
|
-
}
|
|
10
|
-
exports.StaticLinkField = StaticLinkField;
|