@homebound/beam 2.118.3 → 2.118.4
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.
|
@@ -25,15 +25,37 @@ function ListBox(props) {
|
|
|
25
25
|
const isMultiSelect = state.selectionManager.selectionMode === "multiple";
|
|
26
26
|
const firstItem = state.collection.at(0);
|
|
27
27
|
const hasSections = firstItem && firstItem.type === "section";
|
|
28
|
-
|
|
28
|
+
// Create a reference for measuring the MultiSelect's selected list's height. Used for re-evaluating `popoverHeight`.
|
|
29
|
+
const selectedList = (0, react_1.useRef)(null);
|
|
30
|
+
const firstRender = (0, react_1.useRef)(true);
|
|
31
|
+
// Keep track of the virtuoso list height to properly update the ListBox's height.
|
|
32
|
+
// Using a ref, this itself should not trigger a rerender, only `popoverHeight` changes will trigger a rerender.
|
|
33
|
+
const virtuosoListHeight = (0, react_1.useRef)(0);
|
|
34
|
+
const onListHeightChange = (listHeight) => {
|
|
35
|
+
var _a;
|
|
36
|
+
virtuosoListHeight.current = listHeight;
|
|
37
|
+
// The "listHeight" is only the list of options.
|
|
38
|
+
// For multiple selects we need to also account for the height of the list of currently selected elements when re-evaluating.
|
|
39
|
+
// Using `offsetHeight` to account for borders
|
|
40
|
+
const height = (((_a = selectedList.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0) + listHeight;
|
|
29
41
|
// Using Math.min to choose between the smaller height, either the total height of the List (`height` arg), or the maximum height defined by the space allotted on screen or our hard coded max.
|
|
30
42
|
// If there are ListBoxSections, then we assume it is the persistent section with a single item and account for that height.
|
|
31
43
|
setPopoverHeight(Math.min(popoverMaxHeight, hasSections ? height + constants_1.persistentItemHeight + constants_1.sectionSeparatorHeight : height));
|
|
32
44
|
};
|
|
45
|
+
(0, react_1.useEffect)(() => {
|
|
46
|
+
// Reevaluate the list height when introducing or removing the MultiSelect's options list.
|
|
47
|
+
// Do not call `onListHeightChange` on the first render. Only when the selectedKeys size has actually changed between empty and not empty.
|
|
48
|
+
if (!firstRender.current &&
|
|
49
|
+
isMultiSelect &&
|
|
50
|
+
(state.selectionManager.selectedKeys.size === 0 || state.selectionManager.selectedKeys.size === 1)) {
|
|
51
|
+
onListHeightChange(virtuosoListHeight.current);
|
|
52
|
+
}
|
|
53
|
+
firstRender.current = false;
|
|
54
|
+
}, [state.selectionManager.selectedKeys.size]);
|
|
33
55
|
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
|
|
34
|
-
...Css_1.Css.bgWhite.br4.w100.bshBasic.if(contrast).bgGray700.$,
|
|
56
|
+
...Css_1.Css.bgWhite.br4.w100.bshBasic.hPx(popoverHeight).df.fdc.if(contrast).bgGray700.$,
|
|
35
57
|
"&:hover": Css_1.Css.bshHover.$,
|
|
36
|
-
}, ref: listBoxRef }, listBoxProps, { children: [isMultiSelect && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bGray200.add("flexWrap", "wrap")
|
|
58
|
+
}, ref: listBoxRef }, listBoxProps, { children: [isMultiSelect && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ 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)))) }), void 0)), (0, jsx_runtime_1.jsx)("ul", Object.assign({ 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,
|
|
37
59
|
// Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
|
|
38
60
|
scrollOnFocus: props.shouldUseVirtualFocus }, section.key)))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: [...state.collection], onListHeightChange: onListHeightChange, contrast: contrast,
|
|
39
61
|
// Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
|