@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, onKeyDownCapture, onKeyUp, onKeyPress, value, openOnFocus = false, ...props }, forwardedRef) => {
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(80);
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
- const t12 = !showMenu;
192
- let t13;
191
+ let t12;
193
192
  if ($[39] !== activeDescendantRef || $[40] !== customScrollContainerRef || $[41] !== scrollContainerRef || $[42] !== setIsMenuDirectlyActivated) {
194
- t13 = (current, _previous, directlyActivated) => {
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] = t13;
212
- } else t13 = $[43];
213
- let t14;
214
- if ($[44] !== inputRef || $[45] !== t12 || $[46] !== t13) {
215
- t14 = {
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: t13
219
+ onActiveDescendantChanged: t12
222
220
  };
223
221
  $[44] = inputRef;
224
222
  $[45] = t12;
225
223
  $[46] = t13;
226
- $[47] = t14;
227
- } else t14 = $[47];
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
- let t17;
237
- if ($[50] !== deferredInputValue || $[51] !== highlightedItem || $[52] !== selectedItemIds || $[53] !== setAutocompleteSuggestion) {
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
- t17 = [
240
+ t16 = [
244
241
  highlightedItem,
245
242
  deferredInputValue,
246
243
  selectedItemIds,
247
244
  setAutocompleteSuggestion
248
245
  ];
249
- $[50] = deferredInputValue;
250
- $[51] = highlightedItem;
251
- $[52] = selectedItemIds;
252
- $[53] = setAutocompleteSuggestion;
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(t16, t17);
256
+ useEffect(t15, t16);
257
+ let t17;
260
258
  let t18;
261
- let t19;
262
- if ($[56] !== onOpenChange || $[57] !== selectedItemIds || $[58] !== showMenu || $[59] !== sortOnCloseFn || $[60] !== sortedItemIds) {
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
- t19 = [
266
+ t18 = [
270
267
  showMenu,
271
268
  onOpenChange,
272
269
  selectedItemIds,
273
270
  sortOnCloseFn,
274
271
  sortedItemIds
275
272
  ];
276
- $[56] = onOpenChange;
277
- $[57] = selectedItemIds;
278
- $[58] = showMenu;
279
- $[59] = sortOnCloseFn;
280
- $[60] = sortedItemIds;
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(t18, t19);
288
- let t20;
289
- if ($[63] !== selectedItemIds.length || $[64] !== setSelectedItemLength) {
290
- t20 = () => {
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
- $[63] = selectedItemIds.length;
294
- $[64] = setSelectedItemLength;
295
- $[65] = t20;
296
- } else t20 = $[65];
297
- let t21;
298
- if ($[66] !== selectedItemIds || $[67] !== setSelectedItemLength) {
299
- t21 = [selectedItemIds, setSelectedItemLength];
300
- $[66] = selectedItemIds;
301
- $[67] = setSelectedItemLength;
302
- $[68] = t21;
303
- } else t21 = $[68];
304
- useEffect(t20, t21);
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
- const t22 = !showMenu;
307
- let t23;
308
- if ($[69] !== allItemsToRender || $[70] !== ariaLabelledBy || $[71] !== emptyStateText || $[72] !== id || $[73] !== loading || $[74] !== selectionVariant) {
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
- $[69] = allItemsToRender;
327
- $[70] = ariaLabelledBy;
328
- $[71] = emptyStateText;
329
- $[72] = id;
330
- $[73] = loading;
331
- $[74] = selectionVariant;
332
- $[75] = t23;
333
- } else t23 = $[75];
334
- let t24;
335
- if ($[76] !== showMenu || $[77] !== t22 || $[78] !== t23) {
336
- t24 = /*#__PURE__*/ jsx(VisuallyHidden, {
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
- hidden: t22,
339
- children: t23
334
+ children: t21
340
335
  });
341
- $[76] = showMenu;
336
+ $[75] = showMenu;
337
+ $[76] = t21;
342
338
  $[77] = t22;
343
- $[78] = t23;
344
- $[79] = t24;
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
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.37.1-rc.9889ac942",
4
+ "version": "38.37.1-rc.c2576f920",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",