@spaced-out/ui-design-system 0.6.28 → 0.6.32
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/CHANGELOG.md +18 -0
- package/lib/components/DateRangePicker/DateRangePicker.d.ts.map +1 -1
- package/lib/components/DateRangePicker/DateRangePicker.js +32 -12
- package/lib/components/DateRangePicker/DateRangeWrapper.d.ts.map +1 -1
- package/lib/components/DateRangePicker/DateRangeWrapper.js +3 -1
- package/lib/components/Menu/Menu.d.ts +13 -1
- package/lib/components/Menu/Menu.d.ts.map +1 -1
- package/lib/components/Menu/Menu.js +157 -44
- package/mcp/package.json +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.6.32](https://github.com/spaced-out/ui-design-system/compare/v0.6.31...v0.6.32) (2026-09-04)
|
|
6
|
+
|
|
7
|
+
### [0.6.31](https://github.com/spaced-out/ui-design-system/compare/v0.6.30...v0.6.31) (2026-08-31)
|
|
8
|
+
|
|
9
|
+
### [0.6.30](https://github.com/spaced-out/ui-design-system/compare/v0.6.29...v0.6.30) (2026-08-24)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
* **date-range-picker:** fixed year selection edge case behavior ([#499](https://github.com/spaced-out/ui-design-system/issues/499)) ([1bd840a](https://github.com/spaced-out/ui-design-system/commit/1bd840a70254127afe77d8e26905475395505189))
|
|
15
|
+
|
|
16
|
+
### [0.6.29](https://github.com/spaced-out/ui-design-system/compare/v0.6.28...v0.6.29) (2026-08-20)
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### Features
|
|
20
|
+
|
|
21
|
+
* **menu:** support variable row heights in virtualized menus ([#500](https://github.com/spaced-out/ui-design-system/issues/500)) ([623b86a](https://github.com/spaced-out/ui-design-system/commit/623b86afc56c2ea352a72888f590c8b8b43627e6))
|
|
22
|
+
|
|
5
23
|
### [0.6.28](https://github.com/spaced-out/ui-design-system/compare/v0.6.28-beta.1...v0.6.28) (2026-08-17)
|
|
6
24
|
|
|
7
25
|
### [0.6.28-beta.1](https://github.com/spaced-out/ui-design-system/compare/v0.6.28-beta.0...v0.6.28-beta.1) (2026-07-29)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAEV,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,WAAW,CAAC;AAsBnB,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,
|
|
1
|
+
{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAEV,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,WAAW,CAAC;AAsBnB,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CAuQf,CAAC"}
|
|
@@ -59,19 +59,39 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
|
|
|
59
59
|
const [rangeStartMonth, setRangeStartMonth] = React.useState(validRangeStartMonth);
|
|
60
60
|
const [rangeEndMonth, setRangeEndMonth] = React.useState(validRangeEndMonth);
|
|
61
61
|
const [isMobileSyncedToStartMonth, setIsMobileSyncedToStartMonth] = React.useState(false);
|
|
62
|
-
const
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
const clampMonthToBounds = date => {
|
|
63
|
+
const minMonth = (0, _utils.getMonthEndDate)(validMinDate);
|
|
64
|
+
const maxMonth = (0, _utils.getMonthEndDate)(validMaxDate);
|
|
65
|
+
if ((0, _dateRangePicker.isBefore)(date, minMonth)) {
|
|
66
|
+
return minMonth;
|
|
67
|
+
}
|
|
68
|
+
if ((0, _dateRangePicker.isAfter)(date, maxMonth)) {
|
|
69
|
+
return maxMonth;
|
|
67
70
|
}
|
|
71
|
+
return date;
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
// The single mobile calendar drives both month cursors at once, so it only
|
|
75
|
+
// gets the minDate/maxDate clamp — the ordering is already worked out by
|
|
76
|
+
// handleMobileCalendarMonthSelection.
|
|
77
|
+
const setRangeStartMonthInBounds = date => {
|
|
78
|
+
setRangeStartMonth(clampMonthToBounds(date));
|
|
79
|
+
};
|
|
80
|
+
const setRangeEndMonthInBounds = date => {
|
|
81
|
+
setRangeEndMonth(clampMonthToBounds(date));
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
// The two desktop panes must stay ordered. A month/year pick that would
|
|
85
|
+
// collide with (or overshoot) the other pane lands on the month adjacent to
|
|
86
|
+
// it rather than resetting to minDate/maxDate, so the user still arrives in
|
|
87
|
+
// the year they asked for.
|
|
88
|
+
const setRangeStartMonthValidated = date => {
|
|
89
|
+
const latestAllowed = (0, _utils.getMonthEndDate)((0, _utils.getSubtractedDate)(rangeEndMonth, 1, 'M'));
|
|
90
|
+
setRangeStartMonthInBounds((0, _dateRangePicker.isSameOrAfter)(date, rangeEndMonth, 'month') ? latestAllowed : date);
|
|
68
91
|
};
|
|
69
92
|
const setRangeEndMonthValidated = date => {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
} else {
|
|
73
|
-
setRangeEndMonth((0, _utils.getMonthEndDate)(validMaxDate));
|
|
74
|
-
}
|
|
93
|
+
const earliestAllowed = (0, _utils.getMonthEndDate)((0, _utils.getAddedDate)(rangeStartMonth, 1, 'M'));
|
|
94
|
+
setRangeEndMonthInBounds((0, _dateRangePicker.isSameOrBefore)(date, rangeStartMonth, 'month') ? earliestAllowed : date);
|
|
75
95
|
};
|
|
76
96
|
const onMonthNavigate = (marker, action) => {
|
|
77
97
|
if (marker === _utils.MARKERS.DATE_RANGE_START) {
|
|
@@ -106,8 +126,8 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
|
|
|
106
126
|
syncToStart = (0, _dateRangePicker.isBefore)(newMonth, rangeEndMonth);
|
|
107
127
|
[start, end] = syncToStart ? [newMonth, validMaxDate] : [(0, _utils.getSubtractedDate)(newMonth, 1, 'M'), newMonth];
|
|
108
128
|
}
|
|
109
|
-
|
|
110
|
-
|
|
129
|
+
setRangeStartMonthInBounds(start);
|
|
130
|
+
setRangeEndMonthInBounds(end);
|
|
111
131
|
setIsMobileSyncedToStartMonth(syncToStart);
|
|
112
132
|
};
|
|
113
133
|
const handleMobileMonthSelection = date => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAE,qBAAqB,EAAC,MAAM,WAAW,CAAC;AAChE,OAAO,
|
|
1
|
+
{"version":3,"file":"DateRangeWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAE,qBAAqB,EAAC,MAAM,WAAW,CAAC;AAChE,OAAO,EAOL,OAAO,EACP,iBAAiB,EAClB,MAAM,WAAW,CAAC;AAmEnB,UAAU,qBAAqB;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,sBAAsB,EAAE;QACtB,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAkSD,eAAO,MAAM,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,CACnD,qBAAqB,EACrB,cAAc,CAmHf,CAAC"}
|
|
@@ -228,7 +228,9 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
|
|
|
228
228
|
locale,
|
|
229
229
|
testId
|
|
230
230
|
} = _ref4;
|
|
231
|
-
|
|
231
|
+
// True only while the panes are ordered and more than one month apart, so
|
|
232
|
+
// the chevrons can never push them into (or further past) each other.
|
|
233
|
+
const canNavigateCloser = (0, _dateRangePicker.isBefore)((0, _utils.getMonthEndDate)((0, _utils.getAddedDate)(rangeStartMonth, 1, 'M')), rangeEndMonth);
|
|
232
234
|
const handleApplyClick = () => {
|
|
233
235
|
const {
|
|
234
236
|
startDate,
|
|
@@ -8,7 +8,19 @@ type OptionClassNames = Readonly<{
|
|
|
8
8
|
}>;
|
|
9
9
|
export type Virtualization = Readonly<{
|
|
10
10
|
enable: boolean;
|
|
11
|
-
|
|
11
|
+
/**
|
|
12
|
+
* Height of an option row. A number applies to every row; pass a function
|
|
13
|
+
* for per-row heights (e.g. taller rows for options with descriptions).
|
|
14
|
+
* `index` is the position of the option in the filtered option list —
|
|
15
|
+
* group title rows are not counted.
|
|
16
|
+
*/
|
|
17
|
+
itemHeight?: number | ((option: MenuOption, index: number) => number);
|
|
18
|
+
/**
|
|
19
|
+
* Height of a group title row when virtualizing `groupTitleOptions`.
|
|
20
|
+
* A number applies to every title; pass a function for per-title heights
|
|
21
|
+
* (e.g. taller custom title nodes).
|
|
22
|
+
*/
|
|
23
|
+
groupTitleHeight?: number | ((groupTitle: React.ReactNode, groupIndex: number) => number);
|
|
12
24
|
menuHeight?: number;
|
|
13
25
|
}>;
|
|
14
26
|
export interface MenuOption {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -22,7 +22,37 @@ const menuSizeMedium = 276,
|
|
|
22
22
|
menuSizeSmall = 228;
|
|
23
23
|
const buttonSizeMedium = 40,
|
|
24
24
|
buttonSizeSmall = 32;
|
|
25
|
-
|
|
25
|
+
|
|
26
|
+
// default group title row height when virtualizing groupTitleOptions
|
|
27
|
+
const groupTitleSize = 32;
|
|
28
|
+
// VariableSizeList caches row offsets, so the cache must be flushed whenever
|
|
29
|
+
// the rows or their heights change. `heightSignature` encodes every row's
|
|
30
|
+
// key and height; when it changes, resetAfterIndex invalidates the cache in
|
|
31
|
+
// place without remounting the list (a remount would drop scroll position).
|
|
32
|
+
const MenuVariableSizeList = _ref => {
|
|
33
|
+
let {
|
|
34
|
+
heightSignature,
|
|
35
|
+
height,
|
|
36
|
+
itemCount,
|
|
37
|
+
itemSize,
|
|
38
|
+
itemKey,
|
|
39
|
+
children
|
|
40
|
+
} = _ref;
|
|
41
|
+
const listRef = React.useRef(null);
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
listRef.current?.resetAfterIndex(0, true);
|
|
44
|
+
}, [heightSignature]);
|
|
45
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactWindow.VariableSizeList, {
|
|
46
|
+
ref: listRef,
|
|
47
|
+
height: height,
|
|
48
|
+
itemSize: itemSize,
|
|
49
|
+
itemCount: itemCount,
|
|
50
|
+
itemKey: itemKey,
|
|
51
|
+
width: "initial",
|
|
52
|
+
children: children
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
const RenderOption = _ref2 => {
|
|
26
56
|
let {
|
|
27
57
|
options,
|
|
28
58
|
composeOptions,
|
|
@@ -37,24 +67,45 @@ const RenderOption = _ref => {
|
|
|
37
67
|
SEARCH_PLACEHOLDER: 'Search...'
|
|
38
68
|
},
|
|
39
69
|
...restProps
|
|
40
|
-
} =
|
|
70
|
+
} = _ref2;
|
|
41
71
|
const {
|
|
42
72
|
allowSearch,
|
|
43
73
|
size,
|
|
44
|
-
virtualization
|
|
45
|
-
enable: false,
|
|
46
|
-
menuHeight: null,
|
|
47
|
-
itemHeight: null
|
|
48
|
-
}
|
|
74
|
+
virtualization
|
|
49
75
|
} = restProps;
|
|
76
|
+
const {
|
|
77
|
+
enable: isVirtualizationEnabled = false,
|
|
78
|
+
menuHeight,
|
|
79
|
+
itemHeight,
|
|
80
|
+
groupTitleHeight
|
|
81
|
+
} = virtualization ?? {
|
|
82
|
+
enable: false
|
|
83
|
+
};
|
|
84
|
+
const listHeight = menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall);
|
|
85
|
+
const resolveItemHeight = (option, index) => typeof itemHeight === 'function' ? itemHeight(option, index) : itemHeight || (size === 'medium' ? buttonSizeMedium : buttonSizeSmall);
|
|
86
|
+
const resolveGroupTitleHeight = (groupTitle, groupIndex) => typeof groupTitleHeight === 'function' ? groupTitleHeight(groupTitle, groupIndex) : groupTitleHeight || groupTitleSize;
|
|
50
87
|
if (options && Array.isArray(options) && options.length) {
|
|
51
88
|
const optionsFiltered = !allowSearch ? options : (0, _menu.getFilteredOptionsFromSearchText)(options, searchText);
|
|
52
89
|
const finalResultText = !allowSearch ? '' : (0, _menu.getFilteredOptionsResultText)(optionsFiltered, staticLabels);
|
|
53
|
-
const {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
90
|
+
const renderFlatRow = _ref3 => {
|
|
91
|
+
let {
|
|
92
|
+
index: idx,
|
|
93
|
+
style
|
|
94
|
+
} = _ref3;
|
|
95
|
+
const buttonOption = optionsFiltered[idx];
|
|
96
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuOptionButton.MenuOptionButton, {
|
|
97
|
+
option: buttonOption,
|
|
98
|
+
classNames: classNames,
|
|
99
|
+
style: style,
|
|
100
|
+
...restProps,
|
|
101
|
+
isLastItem: idx === optionsFiltered.length - 1,
|
|
102
|
+
testId: (0, _qa.generateTestId)({
|
|
103
|
+
base: testId,
|
|
104
|
+
slot: 'option',
|
|
105
|
+
index: idx.toString()
|
|
106
|
+
})
|
|
107
|
+
});
|
|
108
|
+
};
|
|
58
109
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
59
110
|
children: [allowSearch && showResultText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
|
|
60
111
|
className: _MenuModule.default.filterOptionsResultText,
|
|
@@ -64,32 +115,20 @@ const RenderOption = _ref => {
|
|
|
64
115
|
slot: 'result-text'
|
|
65
116
|
}),
|
|
66
117
|
children: finalResultText
|
|
67
|
-
}), virtualization && isVirtualizationEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
68
|
-
|
|
118
|
+
}), virtualization && isVirtualizationEnabled ? typeof itemHeight === 'function' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuVariableSizeList, {
|
|
119
|
+
heightSignature: optionsFiltered.map((option, idx) => `${option.key}:${resolveItemHeight(option, idx)}`).join('|'),
|
|
120
|
+
height: listHeight,
|
|
121
|
+
itemSize: idx => resolveItemHeight(optionsFiltered[idx], idx),
|
|
122
|
+
itemCount: optionsFiltered.length,
|
|
123
|
+
itemKey: idx => optionsFiltered[idx].key,
|
|
124
|
+
children: renderFlatRow
|
|
125
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactWindow.FixedSizeList, {
|
|
126
|
+
height: listHeight,
|
|
69
127
|
itemSize: itemHeight || (size === 'medium' ? buttonSizeMedium : buttonSizeSmall),
|
|
70
128
|
itemCount: optionsFiltered.length,
|
|
129
|
+
itemKey: idx => optionsFiltered[idx].key,
|
|
71
130
|
width: "initial",
|
|
72
|
-
children:
|
|
73
|
-
let {
|
|
74
|
-
index: idx,
|
|
75
|
-
style
|
|
76
|
-
} = _ref2;
|
|
77
|
-
const buttonOption = optionsFiltered[idx];
|
|
78
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
|
|
79
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuOptionButton.MenuOptionButton, {
|
|
80
|
-
option: buttonOption,
|
|
81
|
-
classNames: classNames,
|
|
82
|
-
style: style,
|
|
83
|
-
...restProps,
|
|
84
|
-
isLastItem: idx === optionsFiltered.length - 1,
|
|
85
|
-
testId: (0, _qa.generateTestId)({
|
|
86
|
-
base: testId,
|
|
87
|
-
slot: 'option',
|
|
88
|
-
index: idx.toString()
|
|
89
|
-
})
|
|
90
|
-
})
|
|
91
|
-
}, buttonOption.key);
|
|
92
|
-
}
|
|
131
|
+
children: renderFlatRow
|
|
93
132
|
}) : optionsFiltered.map((option, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
|
|
94
133
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuOptionButton.MenuOptionButton, {
|
|
95
134
|
option: option,
|
|
@@ -141,16 +180,90 @@ const RenderOption = _ref => {
|
|
|
141
180
|
if (groupTitleOptions && Array.isArray(groupTitleOptions) && groupTitleOptions.length) {
|
|
142
181
|
const optionsFiltered = !allowSearch ? groupTitleOptions : (0, _menu.getFilteredGroupTitleOptionsFromSearchText)(groupTitleOptions, searchText);
|
|
143
182
|
const finalResultText = !allowSearch ? '' : (0, _menu.getFilteredGroupTitleOptionsResultText)(optionsFiltered, staticLabels);
|
|
183
|
+
const resultText = allowSearch && showResultText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
|
|
184
|
+
className: _MenuModule.default.filterOptionsResultText,
|
|
185
|
+
color: "tertiary",
|
|
186
|
+
testId: (0, _qa.generateTestId)({
|
|
187
|
+
base: testId,
|
|
188
|
+
slot: 'result-text'
|
|
189
|
+
}),
|
|
190
|
+
children: finalResultText
|
|
191
|
+
});
|
|
192
|
+
if (isVirtualizationEnabled) {
|
|
193
|
+
// Mixed row heights (group titles vs options) rule out FixedSizeList —
|
|
194
|
+
// flatten the groups into one row list and size each row individually.
|
|
195
|
+
const rows = [];
|
|
196
|
+
let flatOptionIndex = 0;
|
|
197
|
+
optionsFiltered.forEach((optionsGroup, groupIndex) => {
|
|
198
|
+
if (optionsGroup.groupTitle) {
|
|
199
|
+
rows.push({
|
|
200
|
+
kind: 'title',
|
|
201
|
+
node: optionsGroup.groupTitle,
|
|
202
|
+
groupIndex
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
optionsGroup.options?.forEach((option, optionIndex) => {
|
|
206
|
+
rows.push({
|
|
207
|
+
kind: 'option',
|
|
208
|
+
option,
|
|
209
|
+
groupIndex,
|
|
210
|
+
optionIndex,
|
|
211
|
+
flatOptionIndex
|
|
212
|
+
});
|
|
213
|
+
flatOptionIndex += 1;
|
|
214
|
+
});
|
|
215
|
+
});
|
|
216
|
+
const rowHeight = idx => {
|
|
217
|
+
const row = rows[idx];
|
|
218
|
+
return row.kind === 'title' ? resolveGroupTitleHeight(row.node, row.groupIndex) : resolveItemHeight(row.option, row.flatOptionIndex);
|
|
219
|
+
};
|
|
220
|
+
const rowKey = idx => {
|
|
221
|
+
const row = rows[idx];
|
|
222
|
+
return row.kind === 'title' ? `group-title-${row.groupIndex}` : row.option.key;
|
|
223
|
+
};
|
|
224
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
225
|
+
children: [resultText, /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuVariableSizeList, {
|
|
226
|
+
heightSignature: rows.map((_row, idx) => `${rowKey(idx)}:${rowHeight(idx)}`).join('|'),
|
|
227
|
+
height: listHeight,
|
|
228
|
+
itemSize: rowHeight,
|
|
229
|
+
itemCount: rows.length,
|
|
230
|
+
itemKey: rowKey,
|
|
231
|
+
children: _ref4 => {
|
|
232
|
+
let {
|
|
233
|
+
index: idx,
|
|
234
|
+
style
|
|
235
|
+
} = _ref4;
|
|
236
|
+
const row = rows[idx];
|
|
237
|
+
if (row.kind === 'title') {
|
|
238
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
239
|
+
style: style,
|
|
240
|
+
className: (0, _classify.classify)(_MenuModule.default.groupTitleWrapper, classNames?.groupTitle),
|
|
241
|
+
"data-testid": (0, _qa.generateTestId)({
|
|
242
|
+
base: testId,
|
|
243
|
+
slot: 'group-title',
|
|
244
|
+
index: row.groupIndex.toString()
|
|
245
|
+
}),
|
|
246
|
+
children: row.node
|
|
247
|
+
});
|
|
248
|
+
}
|
|
249
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuOptionButton.MenuOptionButton, {
|
|
250
|
+
option: row.option,
|
|
251
|
+
classNames: classNames,
|
|
252
|
+
style: style,
|
|
253
|
+
...restProps,
|
|
254
|
+
isLastItem: idx === rows.length - 1,
|
|
255
|
+
testId: (0, _qa.generateTestId)({
|
|
256
|
+
base: testId,
|
|
257
|
+
slot: 'option',
|
|
258
|
+
index: `${row.groupIndex}-${row.optionIndex}`
|
|
259
|
+
})
|
|
260
|
+
});
|
|
261
|
+
}
|
|
262
|
+
})]
|
|
263
|
+
});
|
|
264
|
+
}
|
|
144
265
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
145
|
-
children: [
|
|
146
|
-
className: _MenuModule.default.filterOptionsResultText,
|
|
147
|
-
color: "tertiary",
|
|
148
|
-
testId: (0, _qa.generateTestId)({
|
|
149
|
-
base: testId,
|
|
150
|
-
slot: 'result-text'
|
|
151
|
-
}),
|
|
152
|
-
children: finalResultText
|
|
153
|
-
}), optionsFiltered.map((optionsGroup, index) =>
|
|
266
|
+
children: [resultText, optionsFiltered.map((optionsGroup, index) =>
|
|
154
267
|
/*#__PURE__*/
|
|
155
268
|
// eslint-disable-next-line react/no-array-index-key
|
|
156
269
|
(0, _jsxRuntime.jsxs)(React.Fragment, {
|
package/mcp/package.json
CHANGED