@homebound/beam 2.91.9 → 2.92.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/Button.js +8 -8
- package/dist/components/IconButton.js +5 -4
- package/dist/components/PresentationContext.d.ts +1 -0
- package/dist/components/Tooltip.d.ts +2 -0
- package/dist/components/Tooltip.js +12 -1
- package/dist/inputs/ChipSelectField.js +23 -21
- package/dist/inputs/DateField.d.ts +3 -5
- package/dist/inputs/DateField.js +6 -5
- package/dist/inputs/TextFieldBase.d.ts +2 -2
- package/dist/inputs/TextFieldBase.js +29 -22
- package/package.json +1 -1
|
@@ -5,18 +5,17 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const react_aria_1 = require("react-aria");
|
|
7
7
|
const react_router_dom_1 = require("react-router-dom");
|
|
8
|
-
const src_1 = require("..");
|
|
9
8
|
const components_1 = require("./");
|
|
10
|
-
const Tooltip_1 = require("./Tooltip");
|
|
11
9
|
const Css_1 = require("../Css");
|
|
12
10
|
const utils_1 = require("../utils");
|
|
11
|
+
const useTestIds_1 = require("../utils/useTestIds");
|
|
13
12
|
function Button(props) {
|
|
14
13
|
const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, ...otherProps } = props;
|
|
15
14
|
const isDisabled = !!disabled;
|
|
16
15
|
const ariaProps = { onPress, isDisabled, ...otherProps, ...menuTriggerProps };
|
|
17
16
|
const { label, icon, variant = "primary", size = "sm", buttonRef } = ariaProps;
|
|
18
17
|
const ref = buttonRef || (0, react_1.useRef)(null);
|
|
19
|
-
const tid = (0,
|
|
18
|
+
const tid = (0, useTestIds_1.useTestIds)(props, label);
|
|
20
19
|
const { buttonProps, isPressed } = (0, react_aria_1.useButton)({
|
|
21
20
|
...ariaProps,
|
|
22
21
|
onPress: typeof onPress === "string" ? utils_1.noop : onPress,
|
|
@@ -42,12 +41,13 @@ function Button(props) {
|
|
|
42
41
|
},
|
|
43
42
|
...tid,
|
|
44
43
|
};
|
|
45
|
-
const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsxs)("a", Object.assign({}, buttonAttrs, { href: onPress, className:
|
|
44
|
+
const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsxs)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink, target: "_blank", rel: "noreferrer noopener" }, { children: [buttonContent, (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "linkExternal" }, void 0) }), void 0)] }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
|
|
46
45
|
// If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
return (0, components_1.maybeTooltip)({
|
|
47
|
+
title: (0, components_1.resolveTooltip)(disabled, tooltip),
|
|
48
|
+
placement: "top",
|
|
49
|
+
children: button,
|
|
50
|
+
});
|
|
51
51
|
}
|
|
52
52
|
exports.Button = Button;
|
|
53
53
|
function getButtonStyles(variant, size) {
|
|
@@ -33,10 +33,11 @@ function IconButton(props) {
|
|
|
33
33
|
const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray900), inc: inc }, void 0));
|
|
34
34
|
const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink, target: "_blank", rel: "noreferrer noopener" }, { children: buttonContent }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
|
|
35
35
|
// If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
return (0, components_1.maybeTooltip)({
|
|
37
|
+
title: (0, components_1.resolveTooltip)(disabled, tooltip),
|
|
38
|
+
placement: "top",
|
|
39
|
+
children: button,
|
|
40
|
+
});
|
|
40
41
|
}
|
|
41
42
|
exports.IconButton = IconButton;
|
|
42
43
|
const iconButtonStylesReset = Css_1.Css.hPx(28).wPx(28).br8.bTransparent.bsSolid.bw2.bgTransparent.cursorPointer.outline0.p0.dif.aic.jcc.transition.$;
|
|
@@ -9,4 +9,6 @@ interface TooltipProps {
|
|
|
9
9
|
}
|
|
10
10
|
export declare function Tooltip(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
11
11
|
export declare type Placement = "top" | "bottom" | "left" | "right" | "auto";
|
|
12
|
+
export declare function maybeTooltip(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function resolveTooltip(disabled?: boolean | ReactNode, tooltip?: ReactNode): ReactNode | undefined;
|
|
12
14
|
export {};
|
|
@@ -19,7 +19,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
-
exports.Tooltip = void 0;
|
|
22
|
+
exports.resolveTooltip = exports.maybeTooltip = exports.Tooltip = void 0;
|
|
23
23
|
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
24
24
|
const react_1 = __importStar(require("react"));
|
|
25
25
|
const react_aria_1 = require("react-aria");
|
|
@@ -48,3 +48,14 @@ function Popper({ triggerRef, content, placement = "auto" }) {
|
|
|
48
48
|
});
|
|
49
49
|
return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: popperRef, style: styles.popper }, attributes.popper, { css: Css_1.Css.maxw("320px").bgGray900.white.px1.py("4px").br4.xs.z999.$ }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setArrowRef, style: { ...styles.arrow }, id: "arrow" }, void 0), content] }), void 0), document.body);
|
|
50
50
|
}
|
|
51
|
+
// Helper function to conditionally wrap component with Tooltip if necessary.
|
|
52
|
+
function maybeTooltip(props) {
|
|
53
|
+
return props.title ? (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({}, props), void 0) : props.children;
|
|
54
|
+
}
|
|
55
|
+
exports.maybeTooltip = maybeTooltip;
|
|
56
|
+
// Helper function for resolving showing the Tooltip text via a 'disabled' prop, or the 'tooltip' prop.
|
|
57
|
+
function resolveTooltip(disabled, tooltip) {
|
|
58
|
+
// If `disabled` is a ReactNode, then return that. Otherwise, return `tooltip`
|
|
59
|
+
return typeof disabled !== "boolean" && disabled ? disabled : tooltip !== null && tooltip !== void 0 ? tooltip : undefined;
|
|
60
|
+
}
|
|
61
|
+
exports.resolveTooltip = resolveTooltip;
|
|
@@ -157,29 +157,31 @@ function ChipSelectField(props) {
|
|
|
157
157
|
// Trigger onBlur to initiate any auto-saving behavior.
|
|
158
158
|
(0, utils_1.maybeCall)(onBlur);
|
|
159
159
|
}, [setShowInput]);
|
|
160
|
-
|
|
160
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showInput && onCreateNew && ((0, jsx_runtime_1.jsx)(CreateNewField, Object.assign({ onBlur: removeCreateNewField, onEnter: async (value) => {
|
|
161
161
|
await onCreateNew(value);
|
|
162
162
|
removeCreateNewField();
|
|
163
|
-
} }, tid.createNewField), void 0)), (0,
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
163
|
+
} }, tid.createNewField), void 0)), (0, components_1.maybeTooltip)({
|
|
164
|
+
title: (0, components_1.resolveTooltip)(disabled),
|
|
165
|
+
placement: "top",
|
|
166
|
+
children: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: wrapperRef, css: {
|
|
167
|
+
...chipStyles,
|
|
168
|
+
...Css_1.Css.dif.relative.p0.mwPx(32).if(!value).bgGray200.$,
|
|
169
|
+
...(visualFocus ? Css_1.Css.bshFocus.$ : {}),
|
|
170
|
+
...(showInput ? Css_1.Css.dn.$ : {}),
|
|
171
|
+
} }, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label, labelProps: labelProps, hidden: true }, tid.label), void 0), (0, jsx_runtime_1.jsx)("button", Object.assign({}, (0, react_aria_1.mergeProps)(focusProps, buttonProps), { ref: buttonRef, css: {
|
|
172
|
+
...Css_1.Css.tl.br16.pxPx(10).pyPx(2).outline0.if(showClearButton).prPx(4).borderRadius("16px 0 0 16px").$,
|
|
173
|
+
...(isDisabled ? Css_1.Css.cursorNotAllowed.gray700.$ : {}),
|
|
174
|
+
"&:hover:not(:disabled)": Css_1.Css.bgGray400.if(!value).bgGray300.$,
|
|
175
|
+
}, title: state.selectedItem ? state.selectedItem.textValue : placeholder }, tid, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({}, valueProps, { css: Css_1.Css.lineClamp1.breakAll.$ }, { children: state.selectedItem ? state.selectedItem.textValue : placeholder }), void 0) }), void 0), showClearButton && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, clearFocusProps, { css: {
|
|
176
|
+
...Css_1.Css.prPx(4).borderRadius("0 16px 16px 0").outline0.$,
|
|
177
|
+
"&:hover": Css_1.Css.bgGray400.$,
|
|
178
|
+
...(isClearFocused ? Css_1.Css.boxShadow(`0px 0px 0px 2px rgba(3,105,161,1)`).$ : {}),
|
|
179
|
+
}, onClick: () => {
|
|
180
|
+
onSelect(undefined, undefined);
|
|
181
|
+
(0, utils_1.maybeCall)(onBlur);
|
|
182
|
+
setIsClearFocused(false);
|
|
183
|
+
}, "aria-label": "Remove" }, tid.clearButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "x", inc: typeScale === "xs" ? 2 : undefined }, void 0) }), void 0))] }), void 0)),
|
|
184
|
+
}), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: overlayProps, onClose: state.close, isOpen: state.isOpen, shouldCloseOnBlur: true }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, menuProps, { listBoxRef: listBoxRef, state: state, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, positionProps: overlayProps }), void 0) }), void 0))] }, void 0));
|
|
183
185
|
}
|
|
184
186
|
exports.ChipSelectField = ChipSelectField;
|
|
185
187
|
exports.persistentItemPrefix = "persistentItem:";
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
|
+
import { TextFieldBaseProps } from "./TextFieldBase";
|
|
2
3
|
import "./DateField.css";
|
|
3
|
-
export interface DateFieldProps {
|
|
4
|
+
export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
|
|
4
5
|
value: Date | undefined;
|
|
5
6
|
label: string;
|
|
6
7
|
onChange: (value: Date) => void;
|
|
@@ -8,7 +9,7 @@ export interface DateFieldProps {
|
|
|
8
9
|
onBlur?: () => void;
|
|
9
10
|
/** Called when the component is in focus. */
|
|
10
11
|
onFocus?: () => void;
|
|
11
|
-
disabled?: boolean;
|
|
12
|
+
disabled?: boolean | ReactNode;
|
|
12
13
|
errorMsg?: string;
|
|
13
14
|
required?: boolean;
|
|
14
15
|
readOnly?: boolean;
|
|
@@ -16,11 +17,8 @@ export interface DateFieldProps {
|
|
|
16
17
|
/** Renders the label inside the input field, i.e. for filters. */
|
|
17
18
|
inlineLabel?: boolean;
|
|
18
19
|
placeholder?: string;
|
|
19
|
-
compact?: boolean;
|
|
20
20
|
format?: keyof typeof dateFormats;
|
|
21
21
|
iconLeft?: boolean;
|
|
22
|
-
hideLabel?: boolean;
|
|
23
|
-
borderless?: boolean;
|
|
24
22
|
}
|
|
25
23
|
export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
26
24
|
declare const dateFormats: {
|
package/dist/inputs/DateField.js
CHANGED
|
@@ -16,7 +16,7 @@ const utils_1 = require("../utils");
|
|
|
16
16
|
const defaultTestId_1 = require("../utils/defaultTestId");
|
|
17
17
|
require("./DateField.css");
|
|
18
18
|
function DateField(props) {
|
|
19
|
-
const { label, disabled
|
|
19
|
+
const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, ...others } = props;
|
|
20
20
|
const inputRef = (0, react_1.useRef)(null);
|
|
21
21
|
const inputWrapRef = (0, react_1.useRef)(null);
|
|
22
22
|
const buttonRef = (0, react_1.useRef)(null);
|
|
@@ -26,6 +26,7 @@ function DateField(props) {
|
|
|
26
26
|
const dateFormat = getDateFormat(format);
|
|
27
27
|
const [inputValue, setInputValue] = (0, react_1.useState)(value ? formatDate(value, dateFormat) : "");
|
|
28
28
|
const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
|
|
29
|
+
const isDisabled = !!disabled;
|
|
29
30
|
(0, react_1.useEffect)(() => {
|
|
30
31
|
// Avoid updating any WIP values.
|
|
31
32
|
if (!isFocused) {
|
|
@@ -35,7 +36,7 @@ function DateField(props) {
|
|
|
35
36
|
const textFieldProps = {
|
|
36
37
|
...others,
|
|
37
38
|
label,
|
|
38
|
-
isDisabled
|
|
39
|
+
isDisabled,
|
|
39
40
|
isReadOnly: readOnly,
|
|
40
41
|
"aria-haspopup": "dialog",
|
|
41
42
|
value: inputValue,
|
|
@@ -86,7 +87,7 @@ function DateField(props) {
|
|
|
86
87
|
const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: "dialog" }, state, buttonRef);
|
|
87
88
|
const { buttonProps } = (0, react_aria_1.useButton)({
|
|
88
89
|
...triggerProps,
|
|
89
|
-
isDisabled:
|
|
90
|
+
isDisabled: isDisabled || readOnly,
|
|
90
91
|
// When pressed or focused then move focus the input, which will select the text and trigger the DatePicker to open
|
|
91
92
|
onPress: () => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
|
|
92
93
|
onFocus: () => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
|
|
@@ -107,7 +108,7 @@ function DateField(props) {
|
|
|
107
108
|
// How do other applications handle this defined sizing? Appears they use hard coded widths depending on format, which is similar here (using `size` instead of css `width`).
|
|
108
109
|
// But would also need to allow for the input to be `fullWidth`, which is basically also what we're accomplishing here... so maybe fine?
|
|
109
110
|
const inputSize = format === "short" ? 8 : format === "medium" ? 10 : undefined;
|
|
110
|
-
const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled:
|
|
111
|
+
const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1 }, tid.calendarButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: Css_1.Palette.Gray700 }, void 0) }), void 0));
|
|
111
112
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, textFieldProps, { readOnly: readOnly, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...triggerProps, ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
|
|
112
113
|
// hide the calendar if the user is manually entering the date
|
|
113
114
|
state.close();
|
|
@@ -119,7 +120,7 @@ function DateField(props) {
|
|
|
119
120
|
onChange(parsed);
|
|
120
121
|
}
|
|
121
122
|
}
|
|
122
|
-
}, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: { ...overlayProps, ...positionProps }, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ state: state, value: value, positionProps: positionProps, onChange: (d) => {
|
|
123
|
+
}, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton, tooltip: isDisabled && typeof disabled !== "boolean" ? disabled : undefined }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: { ...overlayProps, ...positionProps }, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ state: state, value: value, positionProps: positionProps, onChange: (d) => {
|
|
123
124
|
setInputValue(formatDate(d, dateFormat));
|
|
124
125
|
onChange(d);
|
|
125
126
|
} }, tid.datePicker), void 0) }), void 0))] }, void 0));
|
|
@@ -2,7 +2,7 @@ import type { NumberFieldAria } from "@react-aria/numberfield";
|
|
|
2
2
|
import { InputHTMLAttributes, LabelHTMLAttributes, MutableRefObject, ReactNode, TextareaHTMLAttributes } from "react";
|
|
3
3
|
import { Only } from "../Css";
|
|
4
4
|
import { BeamTextFieldProps, TextFieldXss } from "../interfaces";
|
|
5
|
-
interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "readOnly" | "errorMsg" | "onBlur" | "onFocus" | "helperText" | "hideLabel" | "placeholder" | "compact" | "borderless" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
|
|
5
|
+
export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "readOnly" | "errorMsg" | "onBlur" | "onFocus" | "helperText" | "hideLabel" | "placeholder" | "compact" | "borderless" | "visuallyDisabled" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
|
|
6
6
|
labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
|
|
7
7
|
inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
|
|
8
8
|
inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;
|
|
@@ -15,6 +15,6 @@ interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "r
|
|
|
15
15
|
contrast?: boolean;
|
|
16
16
|
clearable?: boolean;
|
|
17
17
|
textAreaMinHeight?: number;
|
|
18
|
+
tooltip?: ReactNode;
|
|
18
19
|
}
|
|
19
20
|
export declare function TextFieldBase<X extends Only<TextFieldXss, X>>(props: TextFieldBaseProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
20
|
-
export {};
|
|
@@ -15,10 +15,10 @@ const defaultTestId_1 = require("../utils/defaultTestId");
|
|
|
15
15
|
const useTestIds_1 = require("../utils/useTestIds");
|
|
16
16
|
// Used by both TextField and TextArea
|
|
17
17
|
function TextFieldBase(props) {
|
|
18
|
-
var _a, _b, _c, _d, _e;
|
|
18
|
+
var _a, _b, _c, _d, _e, _f;
|
|
19
19
|
const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
|
|
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, readOnly, 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, } = props;
|
|
21
|
-
const typeScale = (
|
|
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, readOnly, 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";
|
|
22
22
|
const internalProps = props.internalProps || {};
|
|
23
23
|
const { compound = false } = internalProps;
|
|
24
24
|
const errorMessageId = `${inputProps.id}-error`;
|
|
@@ -57,7 +57,9 @@ function TextFieldBase(props) {
|
|
|
57
57
|
},
|
|
58
58
|
hover: Css_1.Css.bgGray100.if(contrast).bgGray600.bGray600.$,
|
|
59
59
|
focus: borderless ? Css_1.Css.bshFocus.$ : Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
|
|
60
|
-
disabled:
|
|
60
|
+
disabled: visuallyDisabled
|
|
61
|
+
? Css_1.Css.cursorNotAllowed.gray400.bgGray100.if(contrast).gray500.bgGray700.$
|
|
62
|
+
: Css_1.Css.cursorNotAllowed.$,
|
|
61
63
|
error: Css_1.Css.bRed600.if(contrast).bRed400.$,
|
|
62
64
|
};
|
|
63
65
|
// Watch for each WIP change, convert empty to undefined, and call the user's onChange
|
|
@@ -81,25 +83,30 @@ function TextFieldBase(props) {
|
|
|
81
83
|
...(multiline ? Css_1.Css.fdc.aifs.childGap2.$ : Css_1.Css.truncate.$),
|
|
82
84
|
...xss,
|
|
83
85
|
}, "data-readonly": "true" }, tid, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), multiline
|
|
84
|
-
? (
|
|
85
|
-
: inputProps.value] }), void 0)), !readOnly &&
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
|
|
92
|
-
} }, hoverProps, { ref: inputWrapRef }, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.fs0.br4.pr1.$ }, { children: startAdornment }), void 0), (0, jsx_runtime_1.jsx)(ElementType, Object.assign({}, (0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(hideLabel ? { "aria-label": label } : {}) }), (errorMsg ? { "aria-errormessage": errorMessageId } : {}), { ref: fieldRef, rows: multiline ? 1 : undefined, css: {
|
|
93
|
-
...fieldStyles.input,
|
|
86
|
+
? (_f = inputProps.value) === null || _f === void 0 ? void 0 : _f.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.my1.$ }, { children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {}, void 0)] }, j))) }), i)))
|
|
87
|
+
: inputProps.value] }), void 0)), !readOnly &&
|
|
88
|
+
(0, components_1.maybeTooltip)({
|
|
89
|
+
title: tooltip,
|
|
90
|
+
placement: "top",
|
|
91
|
+
children: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
|
|
92
|
+
...fieldStyles.inputWrapper,
|
|
94
93
|
...(inputProps.disabled ? fieldStyles.disabled : {}),
|
|
94
|
+
...(isFocused && !readOnly ? fieldStyles.focus : {}),
|
|
95
95
|
...(isHovered && !inputProps.disabled && !readOnly && !isFocused ? fieldStyles.hover : {}),
|
|
96
|
-
...(
|
|
97
|
-
...
|
|
98
|
-
} },
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
96
|
+
...(errorMsg ? fieldStyles.error : {}),
|
|
97
|
+
...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
|
|
98
|
+
} }, hoverProps, { ref: inputWrapRef }, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.fs0.br4.pr1.$ }, { children: startAdornment }), void 0), (0, jsx_runtime_1.jsx)(ElementType, Object.assign({}, (0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(hideLabel ? { "aria-label": label } : {}) }), (errorMsg ? { "aria-errormessage": errorMessageId } : {}), { ref: fieldRef, rows: multiline ? 1 : undefined, css: {
|
|
99
|
+
...fieldStyles.input,
|
|
100
|
+
...(inputProps.disabled ? fieldStyles.disabled : {}),
|
|
101
|
+
...(isHovered && !inputProps.disabled && !readOnly && !isFocused ? fieldStyles.hover : {}),
|
|
102
|
+
...(multiline ? Css_1.Css.h100.p1.add("resize", "none").if(borderless).pPx(4).$ : Css_1.Css.truncate.$),
|
|
103
|
+
...xss,
|
|
104
|
+
} }, tid), void 0), isFocused && clearable && onChange && inputProps.value && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {
|
|
105
|
+
var _a;
|
|
106
|
+
onChange(undefined);
|
|
107
|
+
// Reset focus to input element
|
|
108
|
+
(_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
109
|
+
} }, 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)),
|
|
110
|
+
}), errorMsg && !compound && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && !compound && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
|
|
104
111
|
}
|
|
105
112
|
exports.TextFieldBase = TextFieldBase;
|