@primer/react 38.37.1-rc.87dd0709e → 38.37.1-rc.8d13034d0

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
@@ -247,7 +247,7 @@ const GroupHeadingImpl = (t0) => {
247
247
  const [slots, childrenWithoutSlots] = useSlots(children, t3);
248
248
  const trailingAction = trailingActionEnabled ? slots.trailingAction : null;
249
249
  const headingChildren = trailingActionEnabled ? childrenWithoutSlots : children;
250
- if (trailingAction) listRole !== void 0 && listRole !== "list" && invariant(false, `ActionList.GroupHeading.TrailingAction can not be used inside an ActionList with an ARIA role of "${listRole}". Trailing actions on group headings are only supported in lists with the default "list" role.`);
250
+ if (trailingAction) !(listRole === void 0 || listRole === "list") && invariant(false, `ActionList.GroupHeading.TrailingAction can not be used inside an ActionList with an ARIA role of "${listRole}". Trailing actions on group headings are only supported in lists with the default "list" role.`);
251
251
  const missingAsForList = (listRole === void 0 || listRole === "list") && children !== void 0 && as === void 0;
252
252
  const unnecessaryAsForListboxOrMenu = listRole !== void 0 && listRole !== "list" && children !== void 0 && as !== void 0;
253
253
  missingAsForList && invariant(false, "You are setting a heading for a list, that requires a heading level. Please use 'as' prop to set a proper heading level.");
@@ -41,7 +41,7 @@ const Heading = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
41
41
  const mergedRef = useMergedRefs(forwardedRef, innerRef);
42
42
  const { headingId, variant: listVariant } = React.useContext(ListContext);
43
43
  const { container } = React.useContext(ActionListContainerContext);
44
- container === "ActionMenu" && invariant(false, "ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.");
44
+ !(container !== "ActionMenu") && invariant(false, "ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.");
45
45
  const t2 = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : headingId;
46
46
  let t3;
47
47
  if ($[7] !== className || $[8] !== visuallyHidden) {
@@ -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;
@@ -374,7 +374,7 @@ SecondaryLink.displayName = "SecondaryLink";
374
374
  const SecondaryCheckbox = ({ id, children, className, ...props }) => {
375
375
  const checkboxId = useId$1(id);
376
376
  const { selectionVariant } = React.useContext(SelectPanelContext);
377
- selectionVariant === "instant" && invariant(false, "Sorry! SelectPanel.SecondaryAction with variant=\"checkbox\" is not allowed inside selectionVariant=\"instant\"");
377
+ !(selectionVariant !== "instant") && invariant(false, "Sorry! SelectPanel.SecondaryAction with variant=\"checkbox\" is not allowed inside selectionVariant=\"instant\"");
378
378
  return /*#__PURE__*/ jsxs("div", {
379
379
  className: SelectPanel_module_css_default.SecondaryCheckbox,
380
380
  children: [/*#__PURE__*/ jsx(Checkbox, {
@@ -121,13 +121,13 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
121
121
  return ariaSelected === true || ariaSelected === "true";
122
122
  });
123
123
  !(selectedTabs.length <= 1) && invariant(false, "Only one tab can be selected at a time.");
124
- tabs.length !== tabPanels.length && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
124
+ !(tabs.length === tabPanels.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
125
125
  const duplicateTabValue = tabValues.find((value, index) => tabValues.indexOf(value) !== index);
126
- duplicateTabValue !== void 0 && invariant(false, `Every tab must have a unique \`value\`. Found duplicate "${duplicateTabValue}".`);
126
+ !(duplicateTabValue === void 0) && invariant(false, `Every tab must have a unique \`value\`. Found duplicate "${duplicateTabValue}".`);
127
127
  const duplicatePanelValue = panelValues.find((value, index) => panelValues.indexOf(value) !== index);
128
- duplicatePanelValue !== void 0 && invariant(false, `Every panel must have a unique \`value\`. Found duplicate "${duplicatePanelValue}".`);
128
+ !(duplicatePanelValue === void 0) && invariant(false, `Every panel must have a unique \`value\`. Found duplicate "${duplicatePanelValue}".`);
129
129
  const unmatchedTabValue = tabValues.find((value) => !panelValues.includes(value));
130
- unmatchedTabValue !== void 0 && invariant(false, `Tab with \`value\` "${unmatchedTabValue}" has no matching panel. Give a \`UnderlinePanels.Panel\` the same \`value\`.`);
130
+ !(unmatchedTabValue === void 0) && invariant(false, `Tab with \`value\` "${unmatchedTabValue}" has no matching panel. Give a \`UnderlinePanels.Panel\` the same \`value\`.`);
131
131
  warning(isControlled && selectedTabs.length > 0, "UnderlinePanels: do not combine the controlled `value` prop with `aria-selected` on a tab. `value` takes precedence; use `value`/`onChange` (or `defaultValue`) to drive selection.");
132
132
  warning(controlledValue !== void 0 && defaultValue !== void 0, "UnderlinePanels: do not combine the controlled `value` prop with `defaultValue`. `value` takes precedence; use one or the other.");
133
133
  const providedValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue;
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.87dd0709e",
4
+ "version": "38.37.1-rc.8d13034d0",
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",
@@ -166,7 +166,7 @@
166
166
  "react-is": "18.3.1",
167
167
  "recast": "0.23.7",
168
168
  "rimraf": "5.0.5",
169
- "rolldown": "^1.2.5",
169
+ "rolldown": "^1.2.3",
170
170
  "rolldown-plugin-dts": "^0.26.0",
171
171
  "rolldown-plugin-import-css": "^0.0.0",
172
172
  "rolldown-plugin-preserve-directives": "^0.0.0",