@primer/react 38.32.0-rc.4bb4bba69 → 38.32.0-rc.55b6eaf9c
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/ActionBar/ActionBar.js +424 -130
- package/dist/FilteredActionList/FilteredActionList.js +155 -66
- package/dist/FilteredActionList/useAnnouncements.js +138 -66
- package/dist/LabelGroup/LabelGroup.js +110 -76
- package/dist/Overlay/Overlay.js +169 -45
- package/dist/TextInput/TextInput.js +7 -7
- package/dist/TreeView/TreeView.js +814 -309
- package/dist/experimental/UnderlinePanels/UnderlinePanels.js +95 -38
- package/dist/hooks/useControllableState.js +3 -3
- package/package.json +1 -3
|
@@ -12,6 +12,7 @@ import { FilteredActionListBodyLoader } from "./FilteredActionListLoaders.js";
|
|
|
12
12
|
import FilteredActionList_module_css_default from "./FilteredActionList.module.css.js";
|
|
13
13
|
import { useAnnouncements } from "./useAnnouncements.js";
|
|
14
14
|
import { FilteredActionListInput } from "./FilteredActionListInput.js";
|
|
15
|
+
import { c } from "react-compiler-runtime";
|
|
15
16
|
import { clsx } from "clsx";
|
|
16
17
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
18
|
import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
@@ -43,11 +44,11 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
|
|
|
43
44
|
const inputDescriptionTextId = useId$1();
|
|
44
45
|
const [isInputFocused, setIsInputFocused] = useState(false);
|
|
45
46
|
const selectAllChecked = items.length > 0 && items.every((item) => item.selected);
|
|
46
|
-
const selectAllIndeterminate = !selectAllChecked && items.some((
|
|
47
|
+
const selectAllIndeterminate = !selectAllChecked && items.some((item_0) => item_0.selected);
|
|
47
48
|
const selectAllLabelText = selectAllChecked ? "Deselect all" : "Select all";
|
|
48
49
|
const getItemListForEachGroup = useCallback((groupId) => {
|
|
49
50
|
const itemsInGroup = [];
|
|
50
|
-
for (const
|
|
51
|
+
for (const item_1 of items) if (item_1.groupId === groupId) itemsInGroup.push(item_1);
|
|
51
52
|
return itemsInGroup;
|
|
52
53
|
}, [items]);
|
|
53
54
|
const onInputKeyDown = useCallback((event) => {
|
|
@@ -64,7 +65,7 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
|
|
|
64
65
|
for (let i = 0; i < groupMetadata.length; i++) if (getItemListForEachGroup(groupMetadata[i].groupId).length > 0) break;
|
|
65
66
|
else firstGroupIndex++;
|
|
66
67
|
const firstGroup = groupMetadata[firstGroupIndex].groupId;
|
|
67
|
-
firstItem = items.filter((
|
|
68
|
+
firstItem = items.filter((item_2) => item_2.groupId === firstGroup)[0];
|
|
68
69
|
} else firstItem = items[0];
|
|
69
70
|
if (firstItem.onAction) {
|
|
70
71
|
firstItem.onAction(firstItem, event);
|
|
@@ -76,11 +77,11 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
|
|
|
76
77
|
groupMetadata,
|
|
77
78
|
getItemListForEachGroup
|
|
78
79
|
]);
|
|
79
|
-
const onInputKeyPress = useCallback((
|
|
80
|
-
if (
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
const activeDescendantEvent = new KeyboardEvent(
|
|
80
|
+
const onInputKeyPress = useCallback((event_0) => {
|
|
81
|
+
if (event_0.key === "Enter" && activeDescendantRef.current) {
|
|
82
|
+
event_0.preventDefault();
|
|
83
|
+
event_0.nativeEvent.stopImmediatePropagation();
|
|
84
|
+
const activeDescendantEvent = new KeyboardEvent(event_0.type, event_0.nativeEvent);
|
|
84
85
|
activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
|
|
85
86
|
}
|
|
86
87
|
}, [activeDescendantRef]);
|
|
@@ -99,10 +100,10 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
|
|
|
99
100
|
overscan: 10,
|
|
100
101
|
enabled: isVirtualized,
|
|
101
102
|
getItemKey: (index) => {
|
|
102
|
-
var _ref,
|
|
103
|
-
const
|
|
104
|
-
if (!
|
|
105
|
-
return (_ref = (
|
|
103
|
+
var _ref, _item_3$key, _item_3$id;
|
|
104
|
+
const item_3 = items[index];
|
|
105
|
+
if (!item_3) return index.toString();
|
|
106
|
+
return (_ref = (_item_3$key = item_3.key) !== null && _item_3$key !== void 0 ? _item_3$key : (_item_3$id = item_3.id) === null || _item_3$id === void 0 ? void 0 : _item_3$id.toString()) !== null && _ref !== void 0 ? _ref : index.toString();
|
|
106
107
|
},
|
|
107
108
|
measureElement: (el) => el.scrollHeight
|
|
108
109
|
});
|
|
@@ -132,9 +133,9 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
|
|
|
132
133
|
onActiveDescendantChanged: (current, previous, directlyActivated) => {
|
|
133
134
|
activeDescendantRef.current = current;
|
|
134
135
|
if (isVirtualized && current) {
|
|
135
|
-
const
|
|
136
|
+
const index_0 = current.getAttribute("data-index");
|
|
136
137
|
const range = virtualizer.range;
|
|
137
|
-
if (
|
|
138
|
+
if (index_0 !== null && range && (Number(index_0) < range.startIndex || Number(index_0) >= range.endIndex)) virtualizer.scrollToIndex(Number(index_0), { align: "auto" });
|
|
138
139
|
}
|
|
139
140
|
if (current && scrollContainerRef.current && (directlyActivated || focusPrependedElements)) scrollIntoView(current, scrollContainerRef.current, {
|
|
140
141
|
...menuScrollMargins,
|
|
@@ -169,8 +170,8 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
|
|
|
169
170
|
if (!inputAndListContainerElement) return;
|
|
170
171
|
const list = listRef.current;
|
|
171
172
|
if (!list) return;
|
|
172
|
-
const handleFocusIn = (
|
|
173
|
-
if (
|
|
173
|
+
const handleFocusIn = (event_1) => {
|
|
174
|
+
if (event_1.target === inputRef.current || list.contains(event_1.target)) setIsInputFocused(inputRef.current && inputRef.current === document.activeElement ? true : false);
|
|
174
175
|
};
|
|
175
176
|
inputAndListContainerElement.addEventListener("focusin", handleFocusIn);
|
|
176
177
|
return () => {
|
|
@@ -192,8 +193,8 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
|
|
|
192
193
|
]);
|
|
193
194
|
useAnnouncements(items, usingRovingTabindex ? listRef : { current: listContainerElement }, inputRef, announcementsEnabled, loading, messageText, _PrivateFocusManagement);
|
|
194
195
|
useScrollFlash(scrollContainerRef);
|
|
195
|
-
const handleSelectAllChange = useCallback((
|
|
196
|
-
if (onSelectAllChange) onSelectAllChange(
|
|
196
|
+
const handleSelectAllChange = useCallback((e_0) => {
|
|
197
|
+
if (onSelectAllChange) onSelectAllChange(e_0.target.checked);
|
|
197
198
|
}, [onSelectAllChange]);
|
|
198
199
|
function getBodyContent() {
|
|
199
200
|
if (loading && scrollContainerRef.current && loadingType.appearsInBody) return /*#__PURE__*/ jsx(FilteredActionListBodyLoader, {
|
|
@@ -201,58 +202,58 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
|
|
|
201
202
|
height: scrollContainerRef.current.clientHeight
|
|
202
203
|
});
|
|
203
204
|
if (message) return message;
|
|
204
|
-
let
|
|
205
|
+
let firstGroupIndex_0 = 0;
|
|
205
206
|
const renderListItems = () => {
|
|
206
|
-
if (groupMetadata !== null && groupMetadata !== void 0 && groupMetadata.length) return groupMetadata.map((group,
|
|
207
|
+
if (groupMetadata !== null && groupMetadata !== void 0 && groupMetadata.length) return groupMetadata.map((group, index_1) => {
|
|
207
208
|
var _group$header, _group$header2;
|
|
208
|
-
if (
|
|
209
|
+
if (index_1 === firstGroupIndex_0 && getItemListForEachGroup(group.groupId).length === 0) firstGroupIndex_0++;
|
|
209
210
|
return /*#__PURE__*/ jsxs(ActionList.Group, { children: [/*#__PURE__*/ jsx(ActionList.GroupHeading, {
|
|
210
211
|
variant: (_group$header = group.header) !== null && _group$header !== void 0 && _group$header.variant ? group.header.variant : void 0,
|
|
211
212
|
children: (_group$header2 = group.header) !== null && _group$header2 !== void 0 && _group$header2.title ? group.header.title : `Group ${group.groupId}`
|
|
212
|
-
}), getItemListForEachGroup(group.groupId).map(({ key: itemKey, ...
|
|
213
|
-
var _ref2,
|
|
214
|
-
const key = (_ref2 = itemKey !== null && itemKey !== void 0 ? itemKey : (
|
|
213
|
+
}), getItemListForEachGroup(group.groupId).map(({ key: itemKey, ...item_5 }, itemIndex) => {
|
|
214
|
+
var _ref2, _item_5$id;
|
|
215
|
+
const key = (_ref2 = itemKey !== null && itemKey !== void 0 ? itemKey : (_item_5$id = item_5.id) === null || _item_5$id === void 0 ? void 0 : _item_5$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
|
|
215
216
|
return /*#__PURE__*/ jsx(MappedActionListItem, {
|
|
216
|
-
className: clsx(FilteredActionList_module_css_default.ActionListItem, "className" in
|
|
217
|
+
className: clsx(FilteredActionList_module_css_default.ActionListItem, "className" in item_5 ? item_5.className : void 0),
|
|
217
218
|
"data-input-focused": isInputFocused ? "" : void 0,
|
|
218
|
-
"data-first-child":
|
|
219
|
-
...
|
|
219
|
+
"data-first-child": index_1 === firstGroupIndex_0 && itemIndex === 0 ? "" : void 0,
|
|
220
|
+
...item_5,
|
|
220
221
|
renderItem: listProps.renderItem
|
|
221
222
|
}, key);
|
|
222
|
-
})] },
|
|
223
|
+
})] }, index_1);
|
|
223
224
|
});
|
|
224
|
-
if (isVirtualized && virtualizedItemEntries) return virtualizedItemEntries.map(({ virtualItem, item: { key:
|
|
225
|
-
var _ref3,
|
|
226
|
-
const
|
|
225
|
+
if (isVirtualized && virtualizedItemEntries) return virtualizedItemEntries.map(({ virtualItem: virtualItem_0, item: { key: itemKey_0, ...item_6 }, index: index_2 }) => {
|
|
226
|
+
var _ref3, _item_6$id;
|
|
227
|
+
const key_0 = (_ref3 = itemKey_0 !== null && itemKey_0 !== void 0 ? itemKey_0 : (_item_6$id = item_6.id) === null || _item_6$id === void 0 ? void 0 : _item_6$id.toString()) !== null && _ref3 !== void 0 ? _ref3 : index_2.toString();
|
|
227
228
|
return /*#__PURE__*/ jsx(MappedActionListItem, {
|
|
228
|
-
className: clsx(FilteredActionList_module_css_default.ActionListItem, "className" in
|
|
229
|
+
className: clsx(FilteredActionList_module_css_default.ActionListItem, "className" in item_6 ? item_6.className : void 0),
|
|
229
230
|
"data-input-focused": isInputFocused ? "" : void 0,
|
|
230
|
-
"data-first-child":
|
|
231
|
-
"data-index":
|
|
232
|
-
ref: (
|
|
233
|
-
if (
|
|
231
|
+
"data-first-child": index_2 === 0 ? "" : void 0,
|
|
232
|
+
"data-index": virtualItem_0.index,
|
|
233
|
+
ref: (node_0) => {
|
|
234
|
+
if (node_0) virtualizer.measureElement(node_0);
|
|
234
235
|
},
|
|
235
236
|
style: {
|
|
236
237
|
position: "absolute",
|
|
237
238
|
top: 0,
|
|
238
239
|
left: 0,
|
|
239
240
|
right: 0,
|
|
240
|
-
transform: `translateY(${
|
|
241
|
+
transform: `translateY(${virtualItem_0.start}px)`
|
|
241
242
|
},
|
|
242
|
-
...
|
|
243
|
+
...item_6,
|
|
243
244
|
renderItem: listProps.renderItem
|
|
244
|
-
},
|
|
245
|
+
}, key_0);
|
|
245
246
|
});
|
|
246
|
-
return items.map(({ key:
|
|
247
|
-
var _ref4,
|
|
248
|
-
const
|
|
247
|
+
return items.map(({ key: itemKey_1, ...item_7 }, index_3) => {
|
|
248
|
+
var _ref4, _item_7$id;
|
|
249
|
+
const key_1 = (_ref4 = itemKey_1 !== null && itemKey_1 !== void 0 ? itemKey_1 : (_item_7$id = item_7.id) === null || _item_7$id === void 0 ? void 0 : _item_7$id.toString()) !== null && _ref4 !== void 0 ? _ref4 : index_3.toString();
|
|
249
250
|
return /*#__PURE__*/ jsx(MappedActionListItem, {
|
|
250
|
-
className: clsx(FilteredActionList_module_css_default.ActionListItem, "className" in
|
|
251
|
+
className: clsx(FilteredActionList_module_css_default.ActionListItem, "className" in item_7 ? item_7.className : void 0),
|
|
251
252
|
"data-input-focused": isInputFocused ? "" : void 0,
|
|
252
|
-
"data-first-child":
|
|
253
|
-
...
|
|
253
|
+
"data-first-child": index_3 === 0 ? "" : void 0,
|
|
254
|
+
...item_7,
|
|
254
255
|
renderItem: listProps.renderItem
|
|
255
|
-
},
|
|
256
|
+
}, key_1);
|
|
256
257
|
});
|
|
257
258
|
};
|
|
258
259
|
const actionListContent = /*#__PURE__*/ jsx(ActionList, {
|
|
@@ -333,27 +334,115 @@ function FilteredActionList({ loading = false, placeholderText, filterValue: ext
|
|
|
333
334
|
}
|
|
334
335
|
FilteredActionList.displayName = "FilteredActionList";
|
|
335
336
|
const MappedActionListItem = /*#__PURE__*/ forwardRef((item, ref) => {
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
337
|
+
const $ = c(36);
|
|
338
|
+
if (typeof item.renderItem === "function") {
|
|
339
|
+
let t0;
|
|
340
|
+
if ($[0] !== item) {
|
|
341
|
+
t0 = item.renderItem(item);
|
|
342
|
+
$[0] = item;
|
|
343
|
+
$[1] = t0;
|
|
344
|
+
} else t0 = $[1];
|
|
345
|
+
return t0;
|
|
346
|
+
}
|
|
347
|
+
let LeadingVisual;
|
|
348
|
+
let TrailingIcon;
|
|
349
|
+
let TrailingVisual;
|
|
350
|
+
let children;
|
|
351
|
+
let description;
|
|
352
|
+
let descriptionVariant;
|
|
353
|
+
let id;
|
|
354
|
+
let onAction;
|
|
355
|
+
let rest;
|
|
356
|
+
let text;
|
|
357
|
+
let trailingText;
|
|
358
|
+
if ($[2] !== item) {
|
|
359
|
+
({id, description, descriptionVariant, text, trailingVisual: TrailingVisual, leadingVisual: LeadingVisual, trailingText, trailingIcon: TrailingIcon, onAction, children, ...rest} = item);
|
|
360
|
+
$[2] = item;
|
|
361
|
+
$[3] = LeadingVisual;
|
|
362
|
+
$[4] = TrailingIcon;
|
|
363
|
+
$[5] = TrailingVisual;
|
|
364
|
+
$[6] = children;
|
|
365
|
+
$[7] = description;
|
|
366
|
+
$[8] = descriptionVariant;
|
|
367
|
+
$[9] = id;
|
|
368
|
+
$[10] = onAction;
|
|
369
|
+
$[11] = rest;
|
|
370
|
+
$[12] = text;
|
|
371
|
+
$[13] = trailingText;
|
|
372
|
+
} else {
|
|
373
|
+
LeadingVisual = $[3];
|
|
374
|
+
TrailingIcon = $[4];
|
|
375
|
+
TrailingVisual = $[5];
|
|
376
|
+
children = $[6];
|
|
377
|
+
description = $[7];
|
|
378
|
+
descriptionVariant = $[8];
|
|
379
|
+
id = $[9];
|
|
380
|
+
onAction = $[10];
|
|
381
|
+
rest = $[11];
|
|
382
|
+
text = $[12];
|
|
383
|
+
trailingText = $[13];
|
|
384
|
+
}
|
|
385
|
+
let t0;
|
|
386
|
+
if ($[14] !== item || $[15] !== onAction) {
|
|
387
|
+
t0 = (e) => {
|
|
341
388
|
if (typeof onAction === "function") onAction(item, e);
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
389
|
+
};
|
|
390
|
+
$[14] = item;
|
|
391
|
+
$[15] = onAction;
|
|
392
|
+
$[16] = t0;
|
|
393
|
+
} else t0 = $[16];
|
|
394
|
+
let t1;
|
|
395
|
+
if ($[17] !== LeadingVisual) {
|
|
396
|
+
t1 = LeadingVisual ? /*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: /*#__PURE__*/ jsx(LeadingVisual, {}) }) : null;
|
|
397
|
+
$[17] = LeadingVisual;
|
|
398
|
+
$[18] = t1;
|
|
399
|
+
} else t1 = $[18];
|
|
400
|
+
let t2;
|
|
401
|
+
if ($[19] !== description || $[20] !== descriptionVariant) {
|
|
402
|
+
t2 = description ? /*#__PURE__*/ jsx(ActionList.Description, {
|
|
403
|
+
variant: descriptionVariant,
|
|
404
|
+
children: description
|
|
405
|
+
}) : null;
|
|
406
|
+
$[19] = description;
|
|
407
|
+
$[20] = descriptionVariant;
|
|
408
|
+
$[21] = t2;
|
|
409
|
+
} else t2 = $[21];
|
|
410
|
+
let t3;
|
|
411
|
+
if ($[22] !== TrailingIcon || $[23] !== TrailingVisual || $[24] !== trailingText) {
|
|
412
|
+
t3 = TrailingVisual ? /*#__PURE__*/ jsx(ActionList.TrailingVisual, { children: typeof TrailingVisual !== "string" && isValidElementType(TrailingVisual) ? /*#__PURE__*/ jsx(TrailingVisual, {}) : TrailingVisual }) : TrailingIcon || trailingText ? /*#__PURE__*/ jsxs(ActionList.TrailingVisual, { children: [trailingText, TrailingIcon && /*#__PURE__*/ jsx(TrailingIcon, {})] }) : null;
|
|
413
|
+
$[22] = TrailingIcon;
|
|
414
|
+
$[23] = TrailingVisual;
|
|
415
|
+
$[24] = trailingText;
|
|
416
|
+
$[25] = t3;
|
|
417
|
+
} else t3 = $[25];
|
|
418
|
+
let t4;
|
|
419
|
+
if ($[26] !== children || $[27] !== id || $[28] !== ref || $[29] !== rest || $[30] !== t0 || $[31] !== t1 || $[32] !== t2 || $[33] !== t3 || $[34] !== text) {
|
|
420
|
+
t4 = /*#__PURE__*/ jsxs(ActionList.Item, {
|
|
421
|
+
role: "option",
|
|
422
|
+
onSelect: t0,
|
|
423
|
+
"data-id": id,
|
|
424
|
+
ref,
|
|
425
|
+
...rest,
|
|
426
|
+
children: [
|
|
427
|
+
t1,
|
|
428
|
+
children,
|
|
429
|
+
text,
|
|
430
|
+
t2,
|
|
431
|
+
t3
|
|
432
|
+
]
|
|
433
|
+
});
|
|
434
|
+
$[26] = children;
|
|
435
|
+
$[27] = id;
|
|
436
|
+
$[28] = ref;
|
|
437
|
+
$[29] = rest;
|
|
438
|
+
$[30] = t0;
|
|
439
|
+
$[31] = t1;
|
|
440
|
+
$[32] = t2;
|
|
441
|
+
$[33] = t3;
|
|
442
|
+
$[34] = text;
|
|
443
|
+
$[35] = t4;
|
|
444
|
+
} else t4 = $[35];
|
|
445
|
+
return t4;
|
|
357
446
|
});
|
|
358
447
|
FilteredActionList.displayName = "FilteredActionList";
|
|
359
448
|
//#endregion
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { c } from "react-compiler-runtime";
|
|
2
|
+
import { useEffect, useRef } from "react";
|
|
2
3
|
import { announce } from "@primer/live-region-element";
|
|
3
4
|
//#region src/FilteredActionList/useAnnouncements.tsx
|
|
4
5
|
const delayMs = 500;
|
|
@@ -22,84 +23,155 @@ const getItemWithActiveDescendant = (listRef, items) => {
|
|
|
22
23
|
selected: activeItem === null || activeItem === void 0 ? void 0 : activeItem.selected
|
|
23
24
|
};
|
|
24
25
|
};
|
|
25
|
-
const useAnnouncements = (items, listContainerRef, inputRef,
|
|
26
|
+
const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message, focusManagement) => {
|
|
27
|
+
const $ = c(33);
|
|
28
|
+
const enabled = t0 === void 0 ? true : t0;
|
|
29
|
+
const loading = t1 === void 0 ? false : t1;
|
|
26
30
|
const usingRovingTabindex = focusManagement === "roving-tabindex";
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
let t2;
|
|
32
|
+
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
33
|
+
t2 = document.querySelector("live-region");
|
|
34
|
+
$[0] = t2;
|
|
35
|
+
} else t2 = $[0];
|
|
36
|
+
const liveRegion = t2;
|
|
37
|
+
let t3;
|
|
38
|
+
if ($[1] !== items) {
|
|
39
|
+
t3 = items.filter(_temp);
|
|
40
|
+
$[1] = items;
|
|
41
|
+
$[2] = t3;
|
|
42
|
+
} else t3 = $[2];
|
|
43
|
+
const selectedItems = t3.length;
|
|
44
|
+
let t4;
|
|
45
|
+
if ($[3] !== enabled) {
|
|
46
|
+
t4 = (...t5) => {
|
|
47
|
+
const args = t5;
|
|
48
|
+
if (enabled) return announce(...args);
|
|
49
|
+
};
|
|
50
|
+
$[3] = enabled;
|
|
51
|
+
$[4] = t4;
|
|
52
|
+
} else t4 = $[4];
|
|
53
|
+
const announce$1 = t4;
|
|
54
|
+
let t5;
|
|
55
|
+
let t6;
|
|
56
|
+
if ($[5] !== announce$1 || $[6] !== inputRef || $[7] !== items || $[8] !== listContainerRef || $[9] !== selectedItems || $[10] !== usingRovingTabindex) {
|
|
57
|
+
t5 = function announceInitialFocus() {
|
|
58
|
+
const focusHandler = () => {
|
|
59
|
+
if (usingRovingTabindex) announce$1(`${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`, {
|
|
60
|
+
delayMs,
|
|
61
|
+
from: liveRegion ? liveRegion : void 0
|
|
62
|
+
});
|
|
63
|
+
else window.requestAnimationFrame(() => {
|
|
64
|
+
const activeItem = getItemWithActiveDescendant(listContainerRef, items);
|
|
65
|
+
if (!activeItem) return;
|
|
66
|
+
const { index, text, selected } = activeItem;
|
|
67
|
+
announce$1([
|
|
68
|
+
"Focus on filter text box and list of items",
|
|
69
|
+
`Focused item: ${text}`,
|
|
70
|
+
`${selected ? "selected" : "not selected"}`,
|
|
71
|
+
`${index + 1} of ${items.length}`
|
|
72
|
+
].join(", "), {
|
|
73
|
+
delayMs,
|
|
74
|
+
from: liveRegion ? liveRegion : void 0
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
const inputElement = inputRef.current;
|
|
79
|
+
inputElement === null || inputElement === void 0 || inputElement.addEventListener("focus", focusHandler);
|
|
80
|
+
return () => inputElement === null || inputElement === void 0 ? void 0 : inputElement.removeEventListener("focus", focusHandler);
|
|
81
|
+
};
|
|
82
|
+
t6 = [
|
|
83
|
+
listContainerRef,
|
|
84
|
+
inputRef,
|
|
85
|
+
items,
|
|
86
|
+
liveRegion,
|
|
87
|
+
announce$1,
|
|
88
|
+
usingRovingTabindex,
|
|
89
|
+
selectedItems
|
|
90
|
+
];
|
|
91
|
+
$[5] = announce$1;
|
|
92
|
+
$[6] = inputRef;
|
|
93
|
+
$[7] = items;
|
|
94
|
+
$[8] = listContainerRef;
|
|
95
|
+
$[9] = selectedItems;
|
|
96
|
+
$[10] = usingRovingTabindex;
|
|
97
|
+
$[11] = t5;
|
|
98
|
+
$[12] = t6;
|
|
99
|
+
} else {
|
|
100
|
+
t5 = $[11];
|
|
101
|
+
t6 = $[12];
|
|
102
|
+
}
|
|
103
|
+
useEffect(t5, t6);
|
|
104
|
+
const isFirstRender = useFirstRender();
|
|
105
|
+
let t7;
|
|
106
|
+
if ($[13] !== announce$1 || $[14] !== isFirstRender || $[15] !== items || $[16] !== listContainerRef || $[17] !== loading || $[18] !== (message === null || message === void 0 ? void 0 : message.description) || $[19] !== (message === null || message === void 0 ? void 0 : message.title) || $[20] !== selectedItems || $[21] !== usingRovingTabindex) {
|
|
107
|
+
t7 = function announceListUpdates() {
|
|
108
|
+
if (isFirstRender) return;
|
|
109
|
+
liveRegion === null || liveRegion === void 0 || liveRegion.clear();
|
|
110
|
+
if (items.length === 0 && !loading) {
|
|
111
|
+
announce$1(`${message === null || message === void 0 ? void 0 : message.title}. ${message === null || message === void 0 ? void 0 : message.description}`, { delayMs });
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
34
114
|
if (usingRovingTabindex) announce$1(`${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`, {
|
|
35
115
|
delayMs,
|
|
36
116
|
from: liveRegion ? liveRegion : void 0
|
|
37
117
|
});
|
|
38
118
|
else window.requestAnimationFrame(() => {
|
|
39
|
-
const
|
|
40
|
-
if (!
|
|
41
|
-
const { index, text, selected } =
|
|
119
|
+
const activeItem_0 = getItemWithActiveDescendant(listContainerRef, items);
|
|
120
|
+
if (!activeItem_0) return;
|
|
121
|
+
const { index: index_0, text: text_0, selected: selected_0 } = activeItem_0;
|
|
42
122
|
announce$1([
|
|
43
|
-
|
|
44
|
-
`Focused item: ${
|
|
45
|
-
`${
|
|
46
|
-
`${
|
|
123
|
+
"List updated",
|
|
124
|
+
`Focused item: ${text_0}`,
|
|
125
|
+
`${selected_0 ? "selected" : "not selected"}`,
|
|
126
|
+
`${index_0 + 1} of ${items.length}`
|
|
47
127
|
].join(", "), {
|
|
48
128
|
delayMs,
|
|
49
129
|
from: liveRegion ? liveRegion : void 0
|
|
50
130
|
});
|
|
51
131
|
});
|
|
52
132
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
const
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
announce$1,
|
|
93
|
-
isFirstRender,
|
|
94
|
-
items,
|
|
95
|
-
listContainerRef,
|
|
96
|
-
liveRegion,
|
|
97
|
-
usingRovingTabindex,
|
|
98
|
-
message === null || message === void 0 ? void 0 : message.title,
|
|
99
|
-
message === null || message === void 0 ? void 0 : message.description,
|
|
100
|
-
loading,
|
|
101
|
-
selectedItems
|
|
102
|
-
]);
|
|
133
|
+
$[13] = announce$1;
|
|
134
|
+
$[14] = isFirstRender;
|
|
135
|
+
$[15] = items;
|
|
136
|
+
$[16] = listContainerRef;
|
|
137
|
+
$[17] = loading;
|
|
138
|
+
$[18] = message === null || message === void 0 ? void 0 : message.description;
|
|
139
|
+
$[19] = message === null || message === void 0 ? void 0 : message.title;
|
|
140
|
+
$[20] = selectedItems;
|
|
141
|
+
$[21] = usingRovingTabindex;
|
|
142
|
+
$[22] = t7;
|
|
143
|
+
} else t7 = $[22];
|
|
144
|
+
const t8 = message === null || message === void 0 ? void 0 : message.title;
|
|
145
|
+
const t9 = message === null || message === void 0 ? void 0 : message.description;
|
|
146
|
+
let t10;
|
|
147
|
+
if ($[23] !== announce$1 || $[24] !== isFirstRender || $[25] !== items || $[26] !== listContainerRef || $[27] !== loading || $[28] !== selectedItems || $[29] !== t8 || $[30] !== t9 || $[31] !== usingRovingTabindex) {
|
|
148
|
+
t10 = [
|
|
149
|
+
announce$1,
|
|
150
|
+
isFirstRender,
|
|
151
|
+
items,
|
|
152
|
+
listContainerRef,
|
|
153
|
+
liveRegion,
|
|
154
|
+
usingRovingTabindex,
|
|
155
|
+
t8,
|
|
156
|
+
t9,
|
|
157
|
+
loading,
|
|
158
|
+
selectedItems
|
|
159
|
+
];
|
|
160
|
+
$[23] = announce$1;
|
|
161
|
+
$[24] = isFirstRender;
|
|
162
|
+
$[25] = items;
|
|
163
|
+
$[26] = listContainerRef;
|
|
164
|
+
$[27] = loading;
|
|
165
|
+
$[28] = selectedItems;
|
|
166
|
+
$[29] = t8;
|
|
167
|
+
$[30] = t9;
|
|
168
|
+
$[31] = usingRovingTabindex;
|
|
169
|
+
$[32] = t10;
|
|
170
|
+
} else t10 = $[32];
|
|
171
|
+
useEffect(t7, t10);
|
|
103
172
|
};
|
|
173
|
+
function _temp(item) {
|
|
174
|
+
return item.selected;
|
|
175
|
+
}
|
|
104
176
|
//#endregion
|
|
105
177
|
export { useAnnouncements };
|