@homebound/beam 2.186.4 → 2.186.6
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/Icon.d.ts +2 -1
- package/dist/components/Icon.js +7 -2
- package/dist/components/Modal/Modal.js +1 -1
- package/dist/components/Modal/TestModalContent.js +3 -1
- package/dist/components/Snackbar/SnackbarNotice.js +1 -1
- package/dist/components/Table/GridTable.js +0 -5
- package/dist/inputs/TextFieldBase.js +2 -2
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DOMProps } from "@react-types/shared";
|
|
2
|
-
import React, { AriaAttributes } from "react";
|
|
2
|
+
import React, { AriaAttributes, ReactNode } from "react";
|
|
3
3
|
import { Margin, Palette, Xss } from "../Css";
|
|
4
4
|
export interface IconProps extends AriaAttributes, DOMProps {
|
|
5
5
|
/** The name of an icon */
|
|
@@ -10,6 +10,7 @@ export interface IconProps extends AriaAttributes, DOMProps {
|
|
|
10
10
|
inc?: number;
|
|
11
11
|
/** Styles overrides */
|
|
12
12
|
xss?: Xss<Margin | "visibility">;
|
|
13
|
+
tooltip?: ReactNode;
|
|
13
14
|
}
|
|
14
15
|
export declare const Icon: React.MemoExoticComponent<(props: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
|
|
15
16
|
/**
|
package/dist/components/Icon.js
CHANGED
|
@@ -6,11 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.Icons = exports.Icon = void 0;
|
|
7
7
|
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
8
8
|
const react_1 = __importDefault(require("react"));
|
|
9
|
+
const Tooltip_1 = require("./Tooltip");
|
|
9
10
|
const Css_1 = require("../Css");
|
|
10
11
|
exports.Icon = react_1.default.memo((props) => {
|
|
11
|
-
const { icon, inc = 3, color = "currentColor", xss, ...other } = props;
|
|
12
|
+
const { icon, inc = 3, color = "currentColor", xss, tooltip, ...other } = props;
|
|
12
13
|
const size = (0, Css_1.increment)(inc);
|
|
13
|
-
return (
|
|
14
|
+
return (0, Tooltip_1.maybeTooltip)({
|
|
15
|
+
title: tooltip,
|
|
16
|
+
placement: "top",
|
|
17
|
+
children: ((0, jsx_runtime_1.jsx)("svg", Object.assign({ "aria-hidden": true, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", css: { "path, rect": Css_1.Css.fill(color).$, ...xss }, "data-icon": icon }, other, { children: exports.Icons[icon] }), void 0)),
|
|
18
|
+
});
|
|
14
19
|
});
|
|
15
20
|
/**
|
|
16
21
|
* Map of icons paths mapped to their respective name.
|
|
@@ -33,7 +33,7 @@ function Modal(props) {
|
|
|
33
33
|
isDismissable: true,
|
|
34
34
|
shouldCloseOnInteractOutside: (el) => {
|
|
35
35
|
// Do not close the Modal if the user is interacting with the Tribute mentions dropdown (via RichTextField) or with another 3rd party dialog (such as a lightbox) on top of it.
|
|
36
|
-
return !(el.closest(".tribute-container") || el.closest("[role='dialog']"));
|
|
36
|
+
return !(el.closest(".tribute-container") || el.closest("[role='dialog']") || el.closest("[role='alert']"));
|
|
37
37
|
},
|
|
38
38
|
}, ref);
|
|
39
39
|
const { modalProps } = (0, react_aria_1.useModal)();
|
|
@@ -8,6 +8,7 @@ const Button_1 = require("../Button");
|
|
|
8
8
|
const Layout_1 = require("../Layout");
|
|
9
9
|
const Modal_1 = require("./Modal");
|
|
10
10
|
const useModal_1 = require("./useModal");
|
|
11
|
+
const Snackbar_1 = require("../Snackbar");
|
|
11
12
|
const Table_1 = require("../Table");
|
|
12
13
|
const Tag_1 = require("../Tag");
|
|
13
14
|
const Css_1 = require("../../Css");
|
|
@@ -22,7 +23,8 @@ function TestModalContent(props) {
|
|
|
22
23
|
const [leftActionDisabled, setLeftActionDisabled] = (0, react_1.useState)(false);
|
|
23
24
|
const [date, setDate] = (0, react_1.useState)(formStateDomain_1.jan1);
|
|
24
25
|
const [internalValue, setValue] = (0, react_1.useState)("");
|
|
25
|
-
|
|
26
|
+
const { triggerNotice } = (0, Snackbar_1.useSnackbar)();
|
|
27
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: props.withTag ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Modal Title with Tag" }, void 0), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { text: "In progress", type: "info", xss: Css_1.Css.ml1.$ }, void 0)] }), void 0)) : props.withTextArea ? ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), preventNewLines: true, hideLabel: true, borderless: true, xss: Css_1.Css.xl.$ }, void 0)) : ("The title of the modal that might wrap") }, void 0), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.fdc.aifs.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.$ }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More", onClick: () => setNumSentences(numSentences + 2) }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: () => setNumSentences(0) }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Primary", onClick: () => setPrimaryDisabled(!primaryDisabled) }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Trigger Snackbar", onClick: () => triggerNotice({ message: "Snackbar message" }) }, void 0), showLeftAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Left Action", onClick: () => setLeftActionDisabled(!leftActionDisabled) }, void 0))] }), void 0), (0, jsx_runtime_1.jsx)("p", { children: "The body content of the modal. This content can be anything!".repeat(numSentences) }, void 0)] }), void 0), withDateField && (0, jsx_runtime_1.jsx)(inputs_1.DateField, { value: date, label: "Date", onChange: setDate }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, Object.assign({ xss: showLeftAction ? Css_1.Css.jcsb.$ : undefined }, { children: [showLeftAction && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: (0, addon_actions_1.action)("Clear Action"), variant: "tertiary", disabled: leftActionDisabled }, void 0) }, void 0)), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap1.$ }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }, void 0), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: (0, addon_actions_1.action)("Primary action"), disabled: primaryDisabled }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
26
28
|
}
|
|
27
29
|
exports.TestModalContent = TestModalContent;
|
|
28
30
|
function TestModalFilterTable() {
|
|
@@ -12,7 +12,7 @@ function SnackbarNotice(props) {
|
|
|
12
12
|
const tid = (0, utils_1.useTestIds)(props, "snackbar");
|
|
13
13
|
// Only allow the "close" button to be hidden if not a `persistent` notice. Otherwise we could get in a state where the user cannot remove the notice from the screen.
|
|
14
14
|
const reallyHideClose = hideCloseButton && !persistent;
|
|
15
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.white.bgGray800.br4.base.df.aic.maxwPx(420).$ }, tid, { children: [icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.plPx(12).$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: typeToIcon[icon] }, tid.icon), void 0) }), void 0)), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp3.pr2.myPx(12).plPx(icon ? 8 : 16).$ }, (typeof message === "string" ? { title: message } : undefined), tid.message, { children: message }), void 0), (action || !reallyHideClose) && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ css: Css_1.Css.fs0.df.aic.$ }, { children: [action && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ttu.sm.prPx(!reallyHideClose && action.variant !== "text" ? 4 : 8).$ }, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ contrast: true }, action, tid.action), void 0) }), void 0)), !reallyHideClose && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.pr1.add("lineHeight", 0).$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", contrast: true, onClick: onClose }, tid.close), void 0) }), void 0))] }), void 0))] }), void 0));
|
|
15
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.white.bgGray800.br4.base.df.aic.maxwPx(420).$ }, tid, { role: "alert" }, { children: [icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.plPx(12).$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: typeToIcon[icon] }, tid.icon), void 0) }), void 0)), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp3.pr2.myPx(12).plPx(icon ? 8 : 16).$ }, (typeof message === "string" ? { title: message } : undefined), tid.message, { children: message }), void 0), (action || !reallyHideClose) && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ css: Css_1.Css.fs0.df.aic.$ }, { children: [action && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ttu.sm.prPx(!reallyHideClose && action.variant !== "text" ? 4 : 8).$ }, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ contrast: true }, action, tid.action), void 0) }), void 0)), !reallyHideClose && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.pr1.add("lineHeight", 0).$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", contrast: true, onClick: onClose }, tid.close), void 0) }), void 0))] }), void 0))] }), void 0));
|
|
16
16
|
}
|
|
17
17
|
exports.SnackbarNotice = SnackbarNotice;
|
|
18
18
|
const typeToIcon = {
|
|
@@ -610,11 +610,6 @@ const MemoizedGridRow = react_1.default.memo((0, mobx_react_1.observer)(GridRow)
|
|
|
610
610
|
const { row: row2, ...others2 } = two;
|
|
611
611
|
return (0, shallowEqual_1.shallowEqual)(row1, row2) && (0, shallowEqual_1.shallowEqual)(others1, others2);
|
|
612
612
|
});
|
|
613
|
-
/** Wraps a mobx Observer around the row's rendering/evaluation, so that it will be reactive. */
|
|
614
|
-
const ObservedGridRow = react_1.default.memo((props) => ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
|
|
615
|
-
// Invoke this just as a regular function so that Observer sees the proxy access's
|
|
616
|
-
return GridRow(props);
|
|
617
|
-
} }, void 0)));
|
|
618
613
|
/** A heuristic to detect the result of `React.createElement` / i.e. JSX. */
|
|
619
614
|
function isJSX(content) {
|
|
620
615
|
return typeof content === "object" && content && "type" in content && "props" in content;
|
|
@@ -94,7 +94,7 @@ function TextFieldBase(props) {
|
|
|
94
94
|
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: fieldStyles.container }, groupProps, focusWithinProps, { children: [label && !inlineLabel && (
|
|
95
95
|
// set `hidden` if being rendered as a compound field
|
|
96
96
|
(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ labelProps: labelProps, hidden: hideLabel || compound, label: label, suffix: labelSuffix, contrast: contrast }, tid.label), void 0)), (0, components_1.maybeTooltip)({
|
|
97
|
-
title:
|
|
97
|
+
title: tooltip,
|
|
98
98
|
placement: "top",
|
|
99
99
|
children: inputProps.readOnly ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
|
|
100
100
|
// Use input wrapper to get common styles, but then we need to override some
|
|
@@ -121,7 +121,7 @@ function TextFieldBase(props) {
|
|
|
121
121
|
onChange(undefined);
|
|
122
122
|
// Reset focus to input element
|
|
123
123
|
(_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
124
|
-
} }, void 0)), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.pl1.fs0.$ }, { children: endAdornment }), void 0)] }), void 0)),
|
|
124
|
+
} }, void 0)), errorInTooltip && errorMsg && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.pl1.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "error", color: Css_1.Palette.Red600, tooltip: errorMsg }, void 0) }), void 0)), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.pl1.fs0.$ }, { children: endAdornment }), void 0)] }), void 0)),
|
|
125
125
|
}), !compound && !inputProps.disabled && !inputProps.readOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMsg && !errorInTooltip && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }, void 0))] }), void 0));
|
|
126
126
|
}
|
|
127
127
|
exports.TextFieldBase = TextFieldBase;
|