@homebound/beam 2.334.1 → 2.334.3
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/Table/components/Row.js +2 -2
- package/dist/components/Table/utils/columns.js +1 -1
- package/dist/inputs/TreeSelectField/TreeSelectField.js +5 -5
- package/dist/inputs/TreeSelectField/utils.d.ts +4 -0
- package/dist/inputs/internal/ComboBoxInput.d.ts +1 -0
- package/dist/inputs/internal/ComboBoxInput.js +2 -2
- package/package.json +12 -12
|
@@ -74,7 +74,7 @@ function RowImpl(props) {
|
|
|
74
74
|
const dragOverCallback = (0, react_1.useCallback)((row, evt) => onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(row, evt), [onDragOver]);
|
|
75
75
|
// when the event is not called, we still need to call preventDefault
|
|
76
76
|
const onDragOverDebounced = (0, use_debounce_1.useDebouncedCallback)(dragOverCallback, 100);
|
|
77
|
-
const RowContent = () => ((0, jsx_runtime_1.jsx)(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), children: isKeptGroupRow ? ((0, jsx_runtime_1.jsx)(KeptGroupRow_1.KeptGroupRow, { as: as, style: style, columnSizes: columnSizes, row: row, colSpan: columns.length })) : (columns.map((column, columnIndex) => {
|
|
77
|
+
const RowContent = () => ((0, jsx_runtime_1.jsx)(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), ref: ref, children: isKeptGroupRow ? ((0, jsx_runtime_1.jsx)(KeptGroupRow_1.KeptGroupRow, { as: as, style: style, columnSizes: columnSizes, row: row, colSpan: columns.length })) : (columns.map((column, columnIndex) => {
|
|
78
78
|
var _a, _b, _c, _d;
|
|
79
79
|
// If the expandable column was hidden, then we need to look at the previous column to format the `expandHeader` and 'header' kinds correctly.
|
|
80
80
|
const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column;
|
|
@@ -241,7 +241,7 @@ function RowImpl(props) {
|
|
|
241
241
|
// call preventDefault for the drop event to fire
|
|
242
242
|
evt.preventDefault();
|
|
243
243
|
onDragOverDebounced(row, evt);
|
|
244
|
-
},
|
|
244
|
+
}, children: RowContent() })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: RowContent() }));
|
|
245
245
|
}
|
|
246
246
|
/**
|
|
247
247
|
* Memoizes rows so that re-rendering the table doesn't re-render every single row.
|
|
@@ -220,7 +220,7 @@ function dragHandleColumn(columnDef) {
|
|
|
220
220
|
// show the whole row being dragged when dragging with the handle
|
|
221
221
|
ref.current && evt.dataTransfer.setDragImage(ref.current, 0, 0);
|
|
222
222
|
return onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(row, evt);
|
|
223
|
-
}, onDragEnd: (evt) => onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(row, evt), onDrop: (evt) => onDrop === null || onDrop === void 0 ? void 0 : onDrop(row, evt), onDragEnter: (evt) => onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(row, evt), onDragOver: (evt) => onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(row, evt), css: Css_1.Css.
|
|
223
|
+
}, onDragEnd: (evt) => onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(row, evt), onDrop: (evt) => onDrop === null || onDrop === void 0 ? void 0 : onDrop(row, evt), onDragEnter: (evt) => onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(row, evt), onDragOver: (evt) => onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(row, evt), css: Css_1.Css.ma.$, children: (0, jsx_runtime_1.jsx)(src_1.Icon, { icon: "drag" }) })) : undefined,
|
|
224
224
|
};
|
|
225
225
|
};
|
|
226
226
|
});
|
|
@@ -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.3",
|
|
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",
|