@homebound/beam 2.230.0 → 2.230.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/Filters/index.d.ts +1 -0
- package/dist/components/Filters/index.js +3 -1
- package/dist/inputs/TextFieldBase.js +35 -29
- package/dist/inputs/internal/ListBox.d.ts +1 -0
- package/dist/inputs/internal/ListBox.js +2 -2
- package/dist/inputs/internal/SelectFieldBase.js +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ export { numberRangeFilter } from "./NumberRangeFilter";
|
|
|
6
6
|
export { multiFilter } from "./MultiFilter";
|
|
7
7
|
export { singleFilter } from "./SingleFilter";
|
|
8
8
|
export { booleanFilter } from "./BooleanFilter";
|
|
9
|
+
export { checkboxFilter } from "./CheckboxFilter";
|
|
9
10
|
export * from "./FilterModal";
|
|
10
11
|
export * from "./Filters";
|
|
11
12
|
export { toggleFilter } from "./ToggleFilter";
|
|
@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.toggleFilter = exports.booleanFilter = exports.singleFilter = exports.multiFilter = exports.numberRangeFilter = exports.dateRangeFilter = exports.dateFilter = void 0;
|
|
17
|
+
exports.toggleFilter = exports.checkboxFilter = exports.booleanFilter = exports.singleFilter = exports.multiFilter = exports.numberRangeFilter = exports.dateRangeFilter = exports.dateFilter = void 0;
|
|
18
18
|
var DateFilter_1 = require("./DateFilter");
|
|
19
19
|
Object.defineProperty(exports, "dateFilter", { enumerable: true, get: function () { return DateFilter_1.dateFilter; } });
|
|
20
20
|
var DateRangeFilter_1 = require("./DateRangeFilter");
|
|
@@ -27,6 +27,8 @@ var SingleFilter_1 = require("./SingleFilter");
|
|
|
27
27
|
Object.defineProperty(exports, "singleFilter", { enumerable: true, get: function () { return SingleFilter_1.singleFilter; } });
|
|
28
28
|
var BooleanFilter_1 = require("./BooleanFilter");
|
|
29
29
|
Object.defineProperty(exports, "booleanFilter", { enumerable: true, get: function () { return BooleanFilter_1.booleanFilter; } });
|
|
30
|
+
var CheckboxFilter_1 = require("./CheckboxFilter");
|
|
31
|
+
Object.defineProperty(exports, "checkboxFilter", { enumerable: true, get: function () { return CheckboxFilter_1.checkboxFilter; } });
|
|
30
32
|
__exportStar(require("./FilterModal"), exports);
|
|
31
33
|
__exportStar(require("./Filters"), exports);
|
|
32
34
|
var ToggleFilter_1 = require("./ToggleFilter");
|
|
@@ -92,36 +92,42 @@ function TextFieldBase(props) {
|
|
|
92
92
|
}, onFocus);
|
|
93
93
|
const showFocus = (isFocused && !inputProps.readOnly) || forceFocus;
|
|
94
94
|
const showHover = (isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused) || forceHover;
|
|
95
|
-
return ((0, jsx_runtime_1.jsxs)("div", { css: fieldStyles.container, ...groupProps, ...focusWithinProps, children: [label && labelStyle !== "inline" && ((0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: labelProps, hidden: labelStyle === "hidden" || compound, label: label, suffix: labelSuffix, contrast: contrast, ...tid.label })), (0, components_1.maybeTooltip)({
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
...(inputProps.disabled ? fieldStyles.disabled : {}),
|
|
108
|
-
...(showFocus ? fieldStyles.focus : {}),
|
|
109
|
-
...(showHover ? fieldStyles.hover : {}),
|
|
110
|
-
// Only show error styles if the field is not disabled, following the pattern that the error message is also hidden
|
|
111
|
-
...(errorMsg && !inputProps.disabled ? fieldStyles.error : {}),
|
|
112
|
-
...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
|
|
113
|
-
}, ...hoverProps, ref: inputWrapRef, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.fs0.br4.pr1.$, children: startAdornment }), (0, jsx_runtime_1.jsx)(ElementType, { ...(0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(labelStyle === "hidden" ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, css: {
|
|
114
|
-
...fieldStyles.input,
|
|
95
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { css: fieldStyles.container, ...groupProps, ...focusWithinProps, children: [label && labelStyle !== "inline" && ((0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: labelProps, hidden: labelStyle === "hidden" || compound, label: label, suffix: labelSuffix, contrast: contrast, ...tid.label })), (0, components_1.maybeTooltip)({
|
|
96
|
+
title: tooltip,
|
|
97
|
+
placement: "top",
|
|
98
|
+
children: inputProps.readOnly ? ((0, jsx_runtime_1.jsxs)("div", { css: {
|
|
99
|
+
// Use input wrapper to get common styles, but then we need to override some
|
|
100
|
+
...fieldStyles.inputWrapperReadOnly,
|
|
101
|
+
...(multiline ? Css_1.Css.fdc.aifs.gap2.$ : Css_1.Css.truncate.$),
|
|
102
|
+
...xss,
|
|
103
|
+
}, "data-readonly": "true", ...tid, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), multiline
|
|
104
|
+
? (_g = inputProps.value) === null || _g === void 0 ? void 0 : _g.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", { 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", {})] }, j))) }, i)))
|
|
105
|
+
: inputProps.value] })) : ((0, jsx_runtime_1.jsxs)("div", { css: {
|
|
106
|
+
...fieldStyles.inputWrapper,
|
|
115
107
|
...(inputProps.disabled ? fieldStyles.disabled : {}),
|
|
108
|
+
...(showFocus ? fieldStyles.focus : {}),
|
|
116
109
|
...(showHover ? fieldStyles.hover : {}),
|
|
117
|
-
|
|
118
|
-
...
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
110
|
+
// Only show error styles if the field is not disabled, following the pattern that the error message is also hidden
|
|
111
|
+
...(errorMsg && !inputProps.disabled ? fieldStyles.error : {}),
|
|
112
|
+
...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
|
|
113
|
+
}, ...hoverProps, ref: inputWrapRef, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.fs0.br4.pr1.$, children: startAdornment }), (0, jsx_runtime_1.jsx)(ElementType, { ...(0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(labelStyle === "hidden" ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, css: {
|
|
114
|
+
...fieldStyles.input,
|
|
115
|
+
...(inputProps.disabled ? fieldStyles.disabled : {}),
|
|
116
|
+
...(showHover ? fieldStyles.hover : {}),
|
|
117
|
+
...(multiline ? Css_1.Css.h100.p1.add("resize", "none").$ : Css_1.Css.truncate.$),
|
|
118
|
+
...xss,
|
|
119
|
+
}, ...tid }), isFocused && clearable && onChange && inputProps.value && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {
|
|
120
|
+
var _a;
|
|
121
|
+
onChange(undefined);
|
|
122
|
+
// Reset focus to input element
|
|
123
|
+
(_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
124
|
+
} })), errorInTooltip && errorMsg && !hideErrorMessage && ((0, jsx_runtime_1.jsx)("span", { 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 }) })), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.pl1.fs0.$, children: endAdornment })] })),
|
|
125
|
+
}), labelStyle !== "left" && !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, { id: errorMessageId, errorMsg: errorMsg, hidden: hideErrorMessage, ...tid.errorMsg })), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }))] }), labelStyle === "left" &&
|
|
126
|
+
!compound &&
|
|
127
|
+
!inputProps.disabled &&
|
|
128
|
+
!inputProps.readOnly &&
|
|
129
|
+
((errorMsg && !errorInTooltip) || helperText) && (
|
|
130
|
+
// Reduces the margin between the error/helper text and input field
|
|
131
|
+
(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mtPx(-8).$, children: [errorMsg && !errorInTooltip && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { id: errorMessageId, errorMsg: errorMsg, hidden: hideErrorMessage, ...tid.errorMsg })), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }))] }));
|
|
126
132
|
}
|
|
127
133
|
exports.TextFieldBase = TextFieldBase;
|
|
@@ -7,6 +7,7 @@ interface ListBoxProps<O, V extends Key> {
|
|
|
7
7
|
getOptionLabel: (opt: O) => string;
|
|
8
8
|
getOptionValue: (opt: O) => V;
|
|
9
9
|
contrast?: boolean;
|
|
10
|
+
horizontalLayout?: boolean;
|
|
10
11
|
positionProps: React.HTMLAttributes<Element>;
|
|
11
12
|
loading?: boolean | (() => JSX.Element);
|
|
12
13
|
disabledOptionsWithReasons?: Record<string, string | undefined>;
|
|
@@ -12,7 +12,7 @@ const VirtualizedOptions_1 = require("./VirtualizedOptions");
|
|
|
12
12
|
/** A ListBox is an internal component used by SelectField and MultiSelectField to display the list of options */
|
|
13
13
|
function ListBox(props) {
|
|
14
14
|
var _a;
|
|
15
|
-
const { state, listBoxRef, selectedOptions = [], getOptionLabel, getOptionValue, contrast = false, positionProps, loading, disabledOptionsWithReasons = {}, } = props;
|
|
15
|
+
const { state, listBoxRef, selectedOptions = [], getOptionLabel, getOptionValue, contrast = false, positionProps, horizontalLayout = false, loading, disabledOptionsWithReasons = {}, } = props;
|
|
16
16
|
const { listBoxProps } = (0, react_aria_1.useListBox)({ disallowEmptySelection: true, ...props }, state, listBoxRef);
|
|
17
17
|
const positionMaxHeight = (_a = positionProps.style) === null || _a === void 0 ? void 0 : _a.maxHeight;
|
|
18
18
|
// The popoverMaxHeight will be based on the value defined by the positionProps returned from `useOverlayPosition` (which will always be a defined as a `number` based on React-Aria's `calculatePosition`).
|
|
@@ -53,7 +53,7 @@ function ListBox(props) {
|
|
|
53
53
|
firstRender.current = false;
|
|
54
54
|
}, [state.selectionManager.selectedKeys.size]);
|
|
55
55
|
return ((0, jsx_runtime_1.jsxs)("div", { css: {
|
|
56
|
-
...Css_1.Css.bgWhite.br4.w100.bshBasic.hPx(popoverHeight).df.fdc.if(contrast).bgGray700.$,
|
|
56
|
+
...Css_1.Css.bgWhite.br4.w100.bshBasic.hPx(popoverHeight).df.fdc.if(contrast).bgGray700.if(horizontalLayout).w50.$,
|
|
57
57
|
"&:hover": Css_1.Css.bshHover.$,
|
|
58
58
|
}, ref: listBoxRef, ...listBoxProps, children: [isMultiSelect && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bGray200.add("flexWrap", "wrap").$, ref: selectedList, children: selectedOptions.map((o) => ((0, jsx_runtime_1.jsx)(ListBoxToggleChip_1.ListBoxToggleChip, { state: state, option: o, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o)))) })), (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.fg1.$, children: hasSections ? ([...state.collection].map((section) => ((0, jsx_runtime_1.jsx)(ListBoxSection_1.ListBoxSection, { section: section, state: state, contrast: contrast, onListHeightChange: onListHeightChange, popoverHeight: popoverHeight,
|
|
59
59
|
// Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
|
|
@@ -247,7 +247,7 @@ function SelectFieldBase(props) {
|
|
|
247
247
|
// Ensures the menu never gets too small.
|
|
248
248
|
minWidth: 200,
|
|
249
249
|
};
|
|
250
|
-
return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).if(otherProps.labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, { ...otherProps, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
|
|
250
|
+
return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).if(otherProps.labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, { ...otherProps, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: otherProps.labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
|
|
251
251
|
}
|
|
252
252
|
exports.SelectFieldBase = SelectFieldBase;
|
|
253
253
|
function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText) {
|