@homebound/beam 2.334.1 → 2.334.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.
|
@@ -123,21 +123,20 @@ function TreeSelectFieldBase(props) {
|
|
|
123
123
|
return false;
|
|
124
124
|
return parents.some((parent) => selectedKeys.includes((0, Value_1.valueToKey)(getOptionValue(parent))));
|
|
125
125
|
};
|
|
126
|
+
const selectedOptionsLabels = selectedOptions.filter((o) => !isParentSelected(o)).map(getOptionLabel);
|
|
126
127
|
return {
|
|
127
128
|
selectedKeys,
|
|
128
129
|
inputValue: selectedOptions.length === 1
|
|
129
130
|
? getOptionLabel(selectedOptions[0])
|
|
130
131
|
: isReadOnly && selectedOptions.length > 0
|
|
131
|
-
?
|
|
132
|
-
.filter((o) => !isParentSelected(o))
|
|
133
|
-
.map(getOptionLabel)
|
|
134
|
-
.join(", ")
|
|
132
|
+
? selectedOptionsLabels.join(", ")
|
|
135
133
|
: selectedOptions.length === 0
|
|
136
134
|
? nothingSelectedText
|
|
137
135
|
: "",
|
|
138
136
|
filteredOptions,
|
|
139
137
|
selectedOptions,
|
|
140
138
|
allOptions: initialOptions,
|
|
139
|
+
selectedOptionsLabels,
|
|
141
140
|
optionsLoading: false,
|
|
142
141
|
allowCollapsing: true,
|
|
143
142
|
};
|
|
@@ -332,6 +331,7 @@ function TreeSelectFieldBase(props) {
|
|
|
332
331
|
filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0)),
|
|
333
332
|
selectedKeys: [...selectedKeys],
|
|
334
333
|
selectedOptions,
|
|
334
|
+
selectedOptionsLabels: rootOptions.map(getOptionLabel),
|
|
335
335
|
}));
|
|
336
336
|
onSelect({
|
|
337
337
|
all: { values: [...selectedKeys].map((key) => (0, Value_1.keyToValue)(key)), options: selectedOptions },
|
|
@@ -390,5 +390,5 @@ function TreeSelectFieldBase(props) {
|
|
|
390
390
|
minWidth: 200,
|
|
391
391
|
};
|
|
392
392
|
const fieldMaxWidth = (0, utils_2.getFieldWidth)(fullWidth);
|
|
393
|
-
return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, fullWidth: fullWidth, labelStyle: labelStyle, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField, nothingSelectedText: nothingSelectedText, isTree: true }), 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: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, isTree: true }) }))] }));
|
|
393
|
+
return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, fullWidth: fullWidth, labelStyle: labelStyle, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, selectedOptionsLabels: fieldState.selectedOptionsLabels, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField, nothingSelectedText: nothingSelectedText, isTree: true }), 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: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, isTree: true }) }))] }));
|
|
394
394
|
}
|
|
@@ -20,6 +20,10 @@ export type TreeFieldState<O> = {
|
|
|
20
20
|
filteredOptions: LeveledOption<O>[];
|
|
21
21
|
selectedKeys: Key[];
|
|
22
22
|
selectedOptions: NestedOption<O>[];
|
|
23
|
+
/** These are the labels of the top-level selected values
|
|
24
|
+
* (e.g. ["d1c1", "d1c1p1", "d2c2p1"] will be ["d1c1", "d2c2p1"]).
|
|
25
|
+
*/
|
|
26
|
+
selectedOptionsLabels: string[];
|
|
23
27
|
allOptions: NestedOption<O>[];
|
|
24
28
|
optionsLoading: boolean;
|
|
25
29
|
allowCollapsing: boolean;
|
|
@@ -19,6 +19,7 @@ interface ComboBoxInputProps<O, V extends Value> extends PresentationFieldProps
|
|
|
19
19
|
labelProps: LabelHTMLAttributes<HTMLLabelElement>;
|
|
20
20
|
label: string;
|
|
21
21
|
selectedOptions: O[];
|
|
22
|
+
selectedOptionsLabels?: string[];
|
|
22
23
|
getOptionValue: (opt: O) => V;
|
|
23
24
|
getOptionLabel: (opt: O) => string;
|
|
24
25
|
sizeToContent?: boolean;
|
|
@@ -13,7 +13,7 @@ const TreeSelectField_1 = require("../TreeSelectField/TreeSelectField");
|
|
|
13
13
|
const utils_1 = require("../TreeSelectField/utils");
|
|
14
14
|
const utils_2 = require("../../utils");
|
|
15
15
|
function ComboBoxInput(props) {
|
|
16
|
-
const { inputProps, buttonProps, buttonRef, errorMsg, state, fieldDecoration, onBlur, onFocus, selectedOptions, getOptionValue, getOptionLabel, sizeToContent = false, contrast = false, nothingSelectedText, resetField, isTree, listBoxRef, inputRef, inputWrapRef, multiline = false, ...otherProps } = props;
|
|
16
|
+
const { inputProps, buttonProps, buttonRef, errorMsg, state, fieldDecoration, onBlur, onFocus, selectedOptions, selectedOptionsLabels, getOptionValue, getOptionLabel, sizeToContent = false, contrast = false, nothingSelectedText, resetField, isTree, listBoxRef, inputRef, inputWrapRef, multiline = false, ...otherProps } = props;
|
|
17
17
|
const { wrap = false } = (0, PresentationContext_1.usePresentationContext)();
|
|
18
18
|
// Allow the field to wrap whether the caller has explicitly set `multiline=true` or the `PresentationContext.wrap=true`
|
|
19
19
|
const allowWrap = wrap || multiline;
|
|
@@ -25,7 +25,7 @@ function ComboBoxInput(props) {
|
|
|
25
25
|
const showFieldDecoration = (!isMultiSelect || (isMultiSelect && !isFocused)) && fieldDecoration && selectedOptions.length === 1;
|
|
26
26
|
const multilineProps = allowWrap ? { textAreaMinHeight: 0, multiline: true } : {};
|
|
27
27
|
(0, useGrowingTextField_1.useGrowingTextField)({ disabled: !allowWrap, inputRef, inputWrapRef, value: inputProps.value });
|
|
28
|
-
return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...otherProps, ...multilineProps, inputRef: inputRef, inputWrapRef: inputWrapRef, errorMsg: errorMsg, contrast: contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.tinySb.df.aic.jcc.$, "data-testid": "selectedOptionsCount", children: state.selectionManager.selectedKeys.size }))) ||
|
|
28
|
+
return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...otherProps, ...multilineProps, inputRef: inputRef, inputWrapRef: inputWrapRef, errorMsg: errorMsg, contrast: contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.tinySb.df.aic.jcc.$, "data-testid": "selectedOptionsCount", children: isTree ? selectedOptionsLabels === null || selectedOptionsLabels === void 0 ? void 0 : selectedOptionsLabels.length : state.selectionManager.selectedKeys.size }))) ||
|
|
29
29
|
(showFieldDecoration && fieldDecoration(selectedOptions[0])), endAdornment: !inputProps.readOnly && ((0, jsx_runtime_1.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, css: {
|
|
30
30
|
...Css_1.Css.br4.outline0.gray700.if(contrast).gray400.$,
|
|
31
31
|
...(inputProps.disabled ? Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray600.$ : {}),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@homebound/beam",
|
|
3
|
-
"version": "2.334.
|
|
3
|
+
"version": "2.334.2",
|
|
4
4
|
"author": "Homebound",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -82,16 +82,16 @@
|
|
|
82
82
|
"@homebound/tsconfig": "^1.0.3",
|
|
83
83
|
"@semantic-release/exec": "^6.0.3",
|
|
84
84
|
"@semantic-release/git": "^10.0.1",
|
|
85
|
-
"@storybook/addon-docs": "^7.
|
|
86
|
-
"@storybook/addon-essentials": "^7.
|
|
87
|
-
"@storybook/addon-interactions": "^7.
|
|
88
|
-
"@storybook/addon-links": "^7.
|
|
89
|
-
"@storybook/addon-mdx-gfm": "^7.
|
|
90
|
-
"@storybook/addons": "^7.
|
|
91
|
-
"@storybook/manager-api": "^7.
|
|
85
|
+
"@storybook/addon-docs": "^7.6.10",
|
|
86
|
+
"@storybook/addon-essentials": "^7.6.10",
|
|
87
|
+
"@storybook/addon-interactions": "^7.6.10",
|
|
88
|
+
"@storybook/addon-links": "^7.6.10",
|
|
89
|
+
"@storybook/addon-mdx-gfm": "^7.6.10",
|
|
90
|
+
"@storybook/addons": "^7.6.10",
|
|
91
|
+
"@storybook/manager-api": "^7.6.10",
|
|
92
92
|
"@storybook/mdx2-csf": "^1.1.0",
|
|
93
|
-
"@storybook/react": "^7.
|
|
94
|
-
"@storybook/react-vite": "^7.
|
|
93
|
+
"@storybook/react": "^7.6.10",
|
|
94
|
+
"@storybook/react-vite": "^7.6.10",
|
|
95
95
|
"@storybook/testing-library": "^0.2.1",
|
|
96
96
|
"@testing-library/jest-dom": "^6.1.2",
|
|
97
97
|
"@testing-library/react": "^14.0.0",
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
"array-move": "^4.0.0",
|
|
107
107
|
"babel-eslint": "^10.1.0",
|
|
108
108
|
"babel-loader": "^8.2.2",
|
|
109
|
-
"chromatic": "^
|
|
109
|
+
"chromatic": "^10.3.1",
|
|
110
110
|
"conventional-changelog-conventionalcommits": "^5.0.0",
|
|
111
111
|
"eslint": "^8.52.0",
|
|
112
112
|
"eslint-plugin-storybook": "^0.6.14",
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
"react": "^18.2.0",
|
|
124
124
|
"react-dom": "^18.2.0",
|
|
125
125
|
"semantic-release": "^20.1.0",
|
|
126
|
-
"storybook": "^7.
|
|
126
|
+
"storybook": "^7.6.10",
|
|
127
127
|
"storybook-addon-designs": "beta",
|
|
128
128
|
"ts-jest": "^29.0.5",
|
|
129
129
|
"ts-node": "^10.9.1",
|