@primer/react 38.37.1-rc.9889ac942 → 38.37.1-rc.c2576f920
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
CHANGED
|
@@ -4,8 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
7
|
-
- [#8343](https://github.com/primer/react/pull/8343) [`7034e1f`](https://github.com/primer/react/commit/7034e1fbb754883b29a05fdf75eea8704359e7bb) Thanks [@llastflowers](https://github.com/llastflowers)! - Don't focus Autocomplete menu items while menu is closed: fix SR announcement bug and menu item skipping bug
|
|
8
|
-
|
|
9
7
|
- [#8339](https://github.com/primer/react/pull/8339) [`1f5b99e`](https://github.com/primer/react/commit/1f5b99edc63e3989eb470d258c4d7b8703540f6b) Thanks [@ShiyunXu](https://github.com/ShiyunXu)! - Pin `box-sizing` with `!important` on the underline tabbed interface wrapper in wrap mode so external overrides can no longer offset its height budget and incorrectly trigger the overflow "more" menu
|
|
10
8
|
|
|
11
9
|
## 38.37.0
|
|
@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
6
6
|
import React, { useCallback, useContext, useEffect, useState } from "react";
|
|
7
7
|
//#region src/Autocomplete/AutocompleteInput.tsx
|
|
8
8
|
const ARROW_KEYS_NAV = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown"]);
|
|
9
|
-
const AutocompleteInput = /*#__PURE__*/ React.forwardRef(({ as: Component = TextInput_default, onFocus, onBlur, onChange, onKeyDown,
|
|
9
|
+
const AutocompleteInput = /*#__PURE__*/ React.forwardRef(({ as: Component = TextInput_default, onFocus, onBlur, onChange, onKeyDown, onKeyUp, onKeyPress, value, openOnFocus = false, ...props }, forwardedRef) => {
|
|
10
10
|
const autocompleteContext = useContext(AutocompleteContext);
|
|
11
11
|
const inputContext = useContext(AutocompleteInputContext);
|
|
12
12
|
if (autocompleteContext === null || inputContext === null) throw new Error("AutocompleteContext returned null values");
|
|
@@ -60,10 +60,6 @@ const AutocompleteInput = /*#__PURE__*/ React.forwardRef(({ as: Component = Text
|
|
|
60
60
|
showMenu,
|
|
61
61
|
setShowMenu
|
|
62
62
|
]);
|
|
63
|
-
const handleInputKeyDownCapture = (event) => {
|
|
64
|
-
onKeyDownCapture === null || onKeyDownCapture === void 0 || onKeyDownCapture(event);
|
|
65
|
-
if (!showMenu && ARROW_KEYS_NAV.has(event.key) && !event.altKey) event.preventDefault();
|
|
66
|
-
};
|
|
67
63
|
const handleInputKeyUp = useCallback((event) => {
|
|
68
64
|
onKeyUp === null || onKeyUp === void 0 || onKeyUp(event);
|
|
69
65
|
if (event.key === "Backspace") setHighlightRemainingText(true);
|
|
@@ -102,7 +98,6 @@ const AutocompleteInput = /*#__PURE__*/ React.forwardRef(({ as: Component = Text
|
|
|
102
98
|
onBlur: handleInputBlur,
|
|
103
99
|
onChange: handleInputChange,
|
|
104
100
|
onKeyDown: handleInputKeyDown,
|
|
105
|
-
onKeyDownCapture: handleInputKeyDownCapture,
|
|
106
101
|
onKeyPress: onInputKeyPress,
|
|
107
102
|
onKeyUp: handleInputKeyUp,
|
|
108
103
|
ref: mergedRef,
|
|
@@ -43,7 +43,7 @@ const debounceAnnouncement = debounce((announcement) => {
|
|
|
43
43
|
announce(announcement);
|
|
44
44
|
}, 250);
|
|
45
45
|
function AutocompleteMenu(props) {
|
|
46
|
-
const $ = c(
|
|
46
|
+
const $ = c(78);
|
|
47
47
|
const autocompleteContext = useContext(AutocompleteContext);
|
|
48
48
|
const deferredInputContext = useContext(AutocompleteDeferredInputContext);
|
|
49
49
|
if (autocompleteContext === null || deferredInputContext === null) throw new Error("AutocompleteContext returned null values");
|
|
@@ -188,10 +188,9 @@ function AutocompleteMenu(props) {
|
|
|
188
188
|
t11 = $[38];
|
|
189
189
|
}
|
|
190
190
|
React.useEffect(t10, t11);
|
|
191
|
-
|
|
192
|
-
let t13;
|
|
191
|
+
let t12;
|
|
193
192
|
if ($[39] !== activeDescendantRef || $[40] !== customScrollContainerRef || $[41] !== scrollContainerRef || $[42] !== setIsMenuDirectlyActivated) {
|
|
194
|
-
|
|
193
|
+
t12 = (current, _previous, directlyActivated) => {
|
|
195
194
|
activeDescendantRef.current = current || null;
|
|
196
195
|
if (current) {
|
|
197
196
|
const selectedItem = allItemsToRenderRef.current.find((item_1) => {
|
|
@@ -208,105 +207,102 @@ function AutocompleteMenu(props) {
|
|
|
208
207
|
$[40] = customScrollContainerRef;
|
|
209
208
|
$[41] = scrollContainerRef;
|
|
210
209
|
$[42] = setIsMenuDirectlyActivated;
|
|
211
|
-
$[43] =
|
|
212
|
-
} else
|
|
213
|
-
let
|
|
214
|
-
if ($[44] !== inputRef || $[45] !== t12
|
|
215
|
-
|
|
210
|
+
$[43] = t12;
|
|
211
|
+
} else t12 = $[43];
|
|
212
|
+
let t13;
|
|
213
|
+
if ($[44] !== inputRef || $[45] !== t12) {
|
|
214
|
+
t13 = {
|
|
216
215
|
containerRef: listContainerRef,
|
|
217
|
-
disabled: t12,
|
|
218
216
|
focusOutBehavior: "wrap",
|
|
219
217
|
focusableElementFilter: _temp4,
|
|
220
218
|
activeDescendantFocus: inputRef,
|
|
221
|
-
onActiveDescendantChanged:
|
|
219
|
+
onActiveDescendantChanged: t12
|
|
222
220
|
};
|
|
223
221
|
$[44] = inputRef;
|
|
224
222
|
$[45] = t12;
|
|
225
223
|
$[46] = t13;
|
|
226
|
-
|
|
227
|
-
|
|
224
|
+
} else t13 = $[46];
|
|
225
|
+
let t14;
|
|
226
|
+
if ($[47] !== loading) {
|
|
227
|
+
t14 = [loading];
|
|
228
|
+
$[47] = loading;
|
|
229
|
+
$[48] = t14;
|
|
230
|
+
} else t14 = $[48];
|
|
231
|
+
useFocusZone(t13, t14);
|
|
228
232
|
let t15;
|
|
229
|
-
if ($[48] !== loading) {
|
|
230
|
-
t15 = [loading];
|
|
231
|
-
$[48] = loading;
|
|
232
|
-
$[49] = t15;
|
|
233
|
-
} else t15 = $[49];
|
|
234
|
-
useFocusZone(t14, t15);
|
|
235
233
|
let t16;
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
t16 = () => {
|
|
234
|
+
if ($[49] !== deferredInputValue || $[50] !== highlightedItem || $[51] !== selectedItemIds || $[52] !== setAutocompleteSuggestion) {
|
|
235
|
+
t15 = () => {
|
|
239
236
|
var _highlightedItem$text;
|
|
240
237
|
if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(deferredInputValue) && !selectedItemIds.includes(highlightedItem.id)) setAutocompleteSuggestion(highlightedItem.text);
|
|
241
238
|
else setAutocompleteSuggestion("");
|
|
242
239
|
};
|
|
243
|
-
|
|
240
|
+
t16 = [
|
|
244
241
|
highlightedItem,
|
|
245
242
|
deferredInputValue,
|
|
246
243
|
selectedItemIds,
|
|
247
244
|
setAutocompleteSuggestion
|
|
248
245
|
];
|
|
249
|
-
$[
|
|
250
|
-
$[
|
|
251
|
-
$[
|
|
252
|
-
$[
|
|
246
|
+
$[49] = deferredInputValue;
|
|
247
|
+
$[50] = highlightedItem;
|
|
248
|
+
$[51] = selectedItemIds;
|
|
249
|
+
$[52] = setAutocompleteSuggestion;
|
|
250
|
+
$[53] = t15;
|
|
253
251
|
$[54] = t16;
|
|
254
|
-
$[55] = t17;
|
|
255
252
|
} else {
|
|
253
|
+
t15 = $[53];
|
|
256
254
|
t16 = $[54];
|
|
257
|
-
t17 = $[55];
|
|
258
255
|
}
|
|
259
|
-
useEffect(
|
|
256
|
+
useEffect(t15, t16);
|
|
257
|
+
let t17;
|
|
260
258
|
let t18;
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
t18 = () => {
|
|
259
|
+
if ($[55] !== onOpenChange || $[56] !== selectedItemIds || $[57] !== showMenu || $[58] !== sortOnCloseFn || $[59] !== sortedItemIds) {
|
|
260
|
+
t17 = () => {
|
|
264
261
|
const itemIdSortResult = [...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn((itemId_0) => isItemSelected(itemId_0, selectedItemIds)));
|
|
265
262
|
const sortResultMatchesState = itemIdSortResult.length === sortedItemIds.length && itemIdSortResult.every((element_0, index) => element_0 === sortedItemIds[index]);
|
|
266
263
|
if (showMenu === false && !sortResultMatchesState) setSortedItemIds(itemIdSortResult);
|
|
267
264
|
onOpenChange && onOpenChange(Boolean(showMenu));
|
|
268
265
|
};
|
|
269
|
-
|
|
266
|
+
t18 = [
|
|
270
267
|
showMenu,
|
|
271
268
|
onOpenChange,
|
|
272
269
|
selectedItemIds,
|
|
273
270
|
sortOnCloseFn,
|
|
274
271
|
sortedItemIds
|
|
275
272
|
];
|
|
276
|
-
$[
|
|
277
|
-
$[
|
|
278
|
-
$[
|
|
279
|
-
$[
|
|
280
|
-
$[
|
|
273
|
+
$[55] = onOpenChange;
|
|
274
|
+
$[56] = selectedItemIds;
|
|
275
|
+
$[57] = showMenu;
|
|
276
|
+
$[58] = sortOnCloseFn;
|
|
277
|
+
$[59] = sortedItemIds;
|
|
278
|
+
$[60] = t17;
|
|
281
279
|
$[61] = t18;
|
|
282
|
-
$[62] = t19;
|
|
283
280
|
} else {
|
|
281
|
+
t17 = $[60];
|
|
284
282
|
t18 = $[61];
|
|
285
|
-
t19 = $[62];
|
|
286
283
|
}
|
|
287
|
-
useEffect(
|
|
288
|
-
let
|
|
289
|
-
if ($[
|
|
290
|
-
|
|
284
|
+
useEffect(t17, t18);
|
|
285
|
+
let t19;
|
|
286
|
+
if ($[62] !== selectedItemIds.length || $[63] !== setSelectedItemLength) {
|
|
287
|
+
t19 = () => {
|
|
291
288
|
if (selectedItemIds.length) setSelectedItemLength(selectedItemIds.length);
|
|
292
289
|
};
|
|
293
|
-
$[
|
|
294
|
-
$[
|
|
295
|
-
$[
|
|
296
|
-
} else
|
|
297
|
-
let
|
|
298
|
-
if ($[
|
|
299
|
-
|
|
300
|
-
$[
|
|
301
|
-
$[
|
|
302
|
-
$[
|
|
303
|
-
} else
|
|
304
|
-
useEffect(
|
|
290
|
+
$[62] = selectedItemIds.length;
|
|
291
|
+
$[63] = setSelectedItemLength;
|
|
292
|
+
$[64] = t19;
|
|
293
|
+
} else t19 = $[64];
|
|
294
|
+
let t20;
|
|
295
|
+
if ($[65] !== selectedItemIds || $[66] !== setSelectedItemLength) {
|
|
296
|
+
t20 = [selectedItemIds, setSelectedItemLength];
|
|
297
|
+
$[65] = selectedItemIds;
|
|
298
|
+
$[66] = setSelectedItemLength;
|
|
299
|
+
$[67] = t20;
|
|
300
|
+
} else t20 = $[67];
|
|
301
|
+
useEffect(t19, t20);
|
|
305
302
|
if (selectionVariant === "single" && selectedItemIds.length > 1) throw new Error("Autocomplete: selectionVariant \"single\" cannot be used with multiple selected items");
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
t23 = loading ? /*#__PURE__*/ jsx("div", {
|
|
303
|
+
let t21;
|
|
304
|
+
if ($[68] !== allItemsToRender || $[69] !== ariaLabelledBy || $[70] !== emptyStateText || $[71] !== id || $[72] !== loading || $[73] !== selectionVariant) {
|
|
305
|
+
t21 = loading ? /*#__PURE__*/ jsx("div", {
|
|
310
306
|
className: AutocompleteMenu_module_css_default.SpinnerWrapper,
|
|
311
307
|
children: /*#__PURE__*/ jsx(Spinner, {})
|
|
312
308
|
}) : /*#__PURE__*/ jsx("div", {
|
|
@@ -323,27 +319,25 @@ function AutocompleteMenu(props) {
|
|
|
323
319
|
children: emptyStateText
|
|
324
320
|
}) : null
|
|
325
321
|
});
|
|
326
|
-
$[
|
|
327
|
-
$[
|
|
328
|
-
$[
|
|
329
|
-
$[
|
|
330
|
-
$[
|
|
331
|
-
$[
|
|
332
|
-
$[
|
|
333
|
-
} else
|
|
334
|
-
let
|
|
335
|
-
if ($[
|
|
336
|
-
|
|
322
|
+
$[68] = allItemsToRender;
|
|
323
|
+
$[69] = ariaLabelledBy;
|
|
324
|
+
$[70] = emptyStateText;
|
|
325
|
+
$[71] = id;
|
|
326
|
+
$[72] = loading;
|
|
327
|
+
$[73] = selectionVariant;
|
|
328
|
+
$[74] = t21;
|
|
329
|
+
} else t21 = $[74];
|
|
330
|
+
let t22;
|
|
331
|
+
if ($[75] !== showMenu || $[76] !== t21) {
|
|
332
|
+
t22 = /*#__PURE__*/ jsx(VisuallyHidden, {
|
|
337
333
|
isVisible: showMenu,
|
|
338
|
-
|
|
339
|
-
children: t23
|
|
334
|
+
children: t21
|
|
340
335
|
});
|
|
341
|
-
$[
|
|
336
|
+
$[75] = showMenu;
|
|
337
|
+
$[76] = t21;
|
|
342
338
|
$[77] = t22;
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
} else t24 = $[79];
|
|
346
|
-
return t24;
|
|
339
|
+
} else t22 = $[77];
|
|
340
|
+
return t22;
|
|
347
341
|
}
|
|
348
342
|
function _temp5(item_2) {
|
|
349
343
|
const { id: id_0, onAction, children, text, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, key, role, ...itemProps } = item_2;
|
package/package.json
CHANGED