@primer/react 38.37.1-rc.80bad12c0 → 38.37.1-rc.8ba10d629
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 +0 -2
- package/dist/ActionList/Group.js +1 -1
- package/dist/ActionList/Heading.js +1 -1
- package/dist/Autocomplete/AutocompleteInput.js +1 -6
- package/dist/Autocomplete/AutocompleteMenu.js +73 -79
- package/dist/experimental/SelectPanel2/SelectPanel.js +1 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels.js +4 -4
- package/package.json +2 -2
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
|
package/dist/ActionList/Group.js
CHANGED
|
@@ -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
|
|
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
|
|
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,
|
|
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;
|
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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.
|
|
4
|
+
"version": "38.37.1-rc.8ba10d629",
|
|
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.
|
|
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",
|