@homebound/beam 2.136.1 → 2.137.2
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/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/dist/types.d.ts +1 -0
- package/dist/types.js +5 -0
- package/package.json +2 -2
- package/dist/forms/StaticLinkField.d.ts +0 -6
- package/dist/forms/StaticLinkField.js +0 -10
|
@@ -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;
|
|
@@ -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/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.2",
|
|
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",
|
|
@@ -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;
|