@homebound/beam 2.93.3 → 2.94.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/Tooltip.d.ts +1 -1
- package/dist/components/Tooltip.js +6 -2
- package/dist/inputs/MultiSelectField.mock.js +2 -2
- package/dist/inputs/SelectField.mock.js +1 -1
- package/dist/inputs/TextFieldBase.js +30 -31
- package/dist/inputs/internal/SelectFieldBase.d.ts +2 -2
- package/dist/inputs/internal/SelectFieldBase.js +5 -2
- package/dist/inputs/internal/SelectFieldInput.d.ts +1 -0
- package/dist/inputs/internal/SelectFieldInput.js +1 -1
- package/package.json +1 -1
|
@@ -10,5 +10,5 @@ interface TooltipProps {
|
|
|
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
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;
|
|
13
|
+
export declare function resolveTooltip(disabled?: boolean | ReactNode, tooltip?: ReactNode, readOnly?: boolean | ReactNode): ReactNode | undefined;
|
|
14
14
|
export {};
|
|
@@ -54,8 +54,12 @@ function maybeTooltip(props) {
|
|
|
54
54
|
}
|
|
55
55
|
exports.maybeTooltip = maybeTooltip;
|
|
56
56
|
// Helper function for resolving showing the Tooltip text via a 'disabled' prop, or the 'tooltip' prop.
|
|
57
|
-
function resolveTooltip(disabled, tooltip) {
|
|
57
|
+
function resolveTooltip(disabled, tooltip, readOnly) {
|
|
58
58
|
// If `disabled` is a ReactNode, then return that. Otherwise, return `tooltip`
|
|
59
|
-
return typeof disabled !== "boolean" && disabled
|
|
59
|
+
return typeof disabled !== "boolean" && disabled
|
|
60
|
+
? disabled
|
|
61
|
+
: typeof readOnly !== "boolean" && readOnly
|
|
62
|
+
? readOnly
|
|
63
|
+
: tooltip !== null && tooltip !== void 0 ? tooltip : undefined;
|
|
60
64
|
}
|
|
61
65
|
exports.resolveTooltip = resolveTooltip;
|
|
@@ -7,7 +7,7 @@ const utils_1 = require("../utils");
|
|
|
7
7
|
function MultiSelectField(props) {
|
|
8
8
|
const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
|
|
9
9
|
getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
|
|
10
|
-
values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, } = props;
|
|
10
|
+
values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, } = props;
|
|
11
11
|
const tid = (0, utils_1.useTestIds)(props, "multiSelect");
|
|
12
12
|
return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, {
|
|
13
13
|
// We're cheating and assume the values are strings...what we should really do is either:
|
|
@@ -37,7 +37,7 @@ function MultiSelectField(props) {
|
|
|
37
37
|
onBlur();
|
|
38
38
|
},
|
|
39
39
|
// Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
|
|
40
|
-
disabled: readOnly, "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
|
|
40
|
+
disabled: !!(readOnly || disabled), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
|
|
41
41
|
return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: getOptionValue(option) }, { children: getOptionLabel(option) }), i));
|
|
42
42
|
})] }), void 0));
|
|
43
43
|
}
|
|
@@ -23,7 +23,7 @@ function SelectField(props) {
|
|
|
23
23
|
onBlur();
|
|
24
24
|
},
|
|
25
25
|
// Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
|
|
26
|
-
disabled: disabled || readOnly, "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
|
|
26
|
+
disabled: !!(disabled || readOnly), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
|
|
27
27
|
return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: `${getOptionValue(option)}` }, { children: getOptionLabel(option) }), i));
|
|
28
28
|
})] }), void 0));
|
|
29
29
|
}
|
|
@@ -77,36 +77,35 @@ function TextFieldBase(props) {
|
|
|
77
77
|
}, onFocus);
|
|
78
78
|
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: fieldStyles.container }, groupProps, focusWithinProps, { children: [label && !inlineLabel && (
|
|
79
79
|
// set `hidden` if being rendered as a compound field
|
|
80
|
-
(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)),
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
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));
|
|
80
|
+
(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)({
|
|
81
|
+
title: tooltip,
|
|
82
|
+
placement: "top",
|
|
83
|
+
children: readOnly ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
|
|
84
|
+
// Use input wrapper to get common styles, but then we need to override some
|
|
85
|
+
...fieldStyles.inputWrapperReadOnly,
|
|
86
|
+
...(multiline ? Css_1.Css.fdc.aifs.childGap2.$ : Css_1.Css.truncate.$),
|
|
87
|
+
...xss,
|
|
88
|
+
}, "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
|
|
89
|
+
? (_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)))
|
|
90
|
+
: inputProps.value] }), void 0)) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
|
|
91
|
+
...fieldStyles.inputWrapper,
|
|
92
|
+
...(inputProps.disabled ? fieldStyles.disabled : {}),
|
|
93
|
+
...(isFocused && !readOnly ? fieldStyles.focus : {}),
|
|
94
|
+
...(isHovered && !inputProps.disabled && !readOnly && !isFocused ? fieldStyles.hover : {}),
|
|
95
|
+
...(errorMsg ? fieldStyles.error : {}),
|
|
96
|
+
...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
|
|
97
|
+
} }, 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: {
|
|
98
|
+
...fieldStyles.input,
|
|
99
|
+
...(inputProps.disabled ? fieldStyles.disabled : {}),
|
|
100
|
+
...(isHovered && !inputProps.disabled && !readOnly && !isFocused ? fieldStyles.hover : {}),
|
|
101
|
+
...(multiline ? Css_1.Css.h100.p1.add("resize", "none").if(borderless).pPx(4).$ : Css_1.Css.truncate.$),
|
|
102
|
+
...xss,
|
|
103
|
+
} }, tid), void 0), isFocused && clearable && onChange && inputProps.value && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {
|
|
104
|
+
var _a;
|
|
105
|
+
onChange(undefined);
|
|
106
|
+
// Reset focus to input element
|
|
107
|
+
(_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
108
|
+
} }, 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)),
|
|
109
|
+
}), 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));
|
|
111
110
|
}
|
|
112
111
|
exports.TextFieldBase = TextFieldBase;
|
|
@@ -25,7 +25,7 @@ export interface SelectFieldBaseProps<O, V extends Value> extends BeamSelectFiel
|
|
|
25
25
|
export declare function SelectFieldBase<O, V extends Value>(props: SelectFieldBaseProps<O, V>): JSX.Element;
|
|
26
26
|
export interface BeamSelectFieldBaseProps<T, V extends Value> extends BeamFocusableProps, PresentationFieldProps {
|
|
27
27
|
disabledOptions?: V[];
|
|
28
|
-
disabled?: boolean;
|
|
28
|
+
disabled?: boolean | ReactNode;
|
|
29
29
|
required?: boolean;
|
|
30
30
|
errorMsg?: string;
|
|
31
31
|
helperText?: string | ReactNode;
|
|
@@ -35,7 +35,7 @@ export interface BeamSelectFieldBaseProps<T, V extends Value> extends BeamFocusa
|
|
|
35
35
|
label: string;
|
|
36
36
|
/** Renders the label inside the input field, i.e. for filters. */
|
|
37
37
|
inlineLabel?: boolean;
|
|
38
|
-
readOnly?: boolean;
|
|
38
|
+
readOnly?: boolean | ReactNode;
|
|
39
39
|
onBlur?: () => void;
|
|
40
40
|
onFocus?: () => void;
|
|
41
41
|
sizeToContent?: boolean;
|
|
@@ -5,6 +5,7 @@ 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_stately_1 = require("react-stately");
|
|
8
|
+
const components_1 = require("../../components");
|
|
8
9
|
const internal_1 = require("../../components/internal");
|
|
9
10
|
const Css_1 = require("../../Css");
|
|
10
11
|
const ListBox_1 = require("./ListBox");
|
|
@@ -21,8 +22,10 @@ const Value_1 = require("../Value");
|
|
|
21
22
|
*/
|
|
22
23
|
function SelectFieldBase(props) {
|
|
23
24
|
var _a;
|
|
24
|
-
const { compact, disabled
|
|
25
|
+
const { compact, disabled, errorMsg, helperText, label, hideLabel, required, inlineLabel, readOnly, onSelect, fieldDecoration, options, onBlur, onFocus, multiselect = false, getOptionLabel, getOptionValue, getOptionMenuLabel = getOptionLabel, sizeToContent = false, values, nothingSelectedText = "", contrast, disabledOptions, borderless, ...otherProps } = props;
|
|
25
26
|
const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
|
|
27
|
+
const isDisabled = !!disabled;
|
|
28
|
+
const isReadOnly = !!readOnly;
|
|
26
29
|
function onSelectionChange(keys) {
|
|
27
30
|
var _a;
|
|
28
31
|
// Close menu upon selection change only for Single selection mode
|
|
@@ -185,6 +188,6 @@ function SelectFieldBase(props) {
|
|
|
185
188
|
// Ensures the menu never gets too small.
|
|
186
189
|
minWidth: 200,
|
|
187
190
|
};
|
|
188
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, Object.assign({}, otherProps, { buttonProps: buttonProps, buttonRef: triggerRef, compact: compact, errorMsg: errorMsg, helperText: helperText, fieldDecoration: fieldDecoration, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, isDisabled: isDisabled, required: required, isReadOnly: isReadOnly, state: state, onBlur: onBlur, onFocus: onFocus, inlineLabel: inlineLabel, label: label, hideLabel: hideLabel, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, sizeToContent: sizeToContent, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200 }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast }), void 0) }), void 0))] }), void 0));
|
|
191
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, Object.assign({}, otherProps, { buttonProps: buttonProps, buttonRef: triggerRef, compact: compact, errorMsg: errorMsg, helperText: helperText, fieldDecoration: fieldDecoration, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, isDisabled: isDisabled, required: required, isReadOnly: isReadOnly, state: state, onBlur: onBlur, onFocus: onFocus, inlineLabel: inlineLabel, label: label, hideLabel: hideLabel, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, sizeToContent: sizeToContent, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200 }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast }), void 0) }), void 0))] }), void 0));
|
|
189
192
|
}
|
|
190
193
|
exports.SelectFieldBase = SelectFieldBase;
|
|
@@ -26,6 +26,7 @@ interface SelectFieldInputProps<O, V extends Value> extends PresentationFieldPro
|
|
|
26
26
|
sizeToContent: boolean;
|
|
27
27
|
contrast?: boolean;
|
|
28
28
|
nothingSelectedText: string;
|
|
29
|
+
tooltip?: ReactNode;
|
|
29
30
|
}
|
|
30
31
|
export declare function SelectFieldInput<O, V extends Value>(props: SelectFieldInputProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
31
32
|
export {};
|
|
@@ -16,7 +16,7 @@ function SelectFieldInput(props) {
|
|
|
16
16
|
const showNumSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 1;
|
|
17
17
|
// For MultiSelect only show the `fieldDecoration` when input is not in focus.
|
|
18
18
|
const showFieldDecoration = (!isMultiSelect || (isMultiSelect && !isFocused)) && fieldDecoration && selectedOptions.length === 1;
|
|
19
|
-
return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, otherProps, { inputRef: inputRef, inputWrapRef: inputWrapRef, label: label, readOnly: isReadOnly, hideLabel: hideLabel, labelProps: labelProps, inlineLabel: inlineLabel, compact: compact, required: required, errorMsg: errorMsg, helperText: helperText, contrast: contrast, xss: !inlineLabel ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinyEm.df.aic.jcc.$ }, { children: state.selectionManager.selectedKeys.size }), void 0))) ||
|
|
19
|
+
return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, otherProps, { inputRef: inputRef, inputWrapRef: inputWrapRef, label: label, readOnly: isReadOnly, hideLabel: hideLabel, labelProps: labelProps, inlineLabel: inlineLabel, compact: compact, required: required, errorMsg: errorMsg, helperText: helperText, contrast: contrast, xss: !inlineLabel && !isReadOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinyEm.df.aic.jcc.$ }, { children: state.selectionManager.selectedKeys.size }), void 0))) ||
|
|
20
20
|
(showFieldDecoration && fieldDecoration(selectedOptions[0])), endAdornment: !isReadOnly && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonProps, { disabled: isDisabled, ref: buttonRef, css: {
|
|
21
21
|
...Css_1.Css.br4.outline0.gray700.if(contrast).gray400.$,
|
|
22
22
|
...(isDisabled ? Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray600.$ : {}),
|