@primer/react 38.1.0-rc.a72ba106c → 38.1.0-rc.c5ea35a01

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.
Files changed (87) hide show
  1. package/CHANGELOG.md +3 -1
  2. package/README.md +16 -11
  3. package/dist/ActionBar/ActionBar.js +308 -148
  4. package/dist/ActionList/Item.d.ts.map +1 -1
  5. package/dist/ActionList/Item.js +3 -1
  6. package/dist/ActionMenu/ActionMenu.js +1 -1
  7. package/dist/Autocomplete/AutocompleteInput.d.ts.map +1 -1
  8. package/dist/Autocomplete/AutocompleteInput.js +0 -1
  9. package/dist/Autocomplete/AutocompleteMenu.js +334 -124
  10. package/dist/Avatar/Avatar.js +31 -23
  11. package/dist/Banner/Banner.d.ts.map +1 -1
  12. package/dist/Banner/Banner.js +0 -1
  13. package/dist/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
  14. package/dist/Breadcrumbs/Breadcrumbs.js +1 -0
  15. package/dist/Button/ButtonBase.d.ts.map +1 -1
  16. package/dist/Button/ButtonBase.js +0 -1
  17. package/dist/Checkbox/Checkbox.d.ts.map +1 -1
  18. package/dist/DataTable/Pagination.js +296 -87
  19. package/dist/Dialog/Dialog.js +1 -1
  20. package/dist/FilteredActionList/useAnnouncements.d.ts.map +1 -1
  21. package/dist/FilteredActionList/useAnnouncements.js +1 -0
  22. package/dist/Heading/Heading.d.ts.map +1 -1
  23. package/dist/Heading/Heading.js +0 -1
  24. package/dist/LabelGroup/LabelGroup.d.ts.map +1 -1
  25. package/dist/LabelGroup/LabelGroup.js +1 -0
  26. package/dist/Link/Link.d.ts.map +1 -1
  27. package/dist/Link/Link.js +0 -1
  28. package/dist/Portal/Portal.d.ts.map +1 -1
  29. package/dist/Portal/Portal.js +0 -1
  30. package/dist/SelectPanel/SelectPanel.d.ts.map +1 -1
  31. package/dist/SelectPanel/SelectPanel.js +0 -1
  32. package/dist/SkeletonAvatar/SkeletonAvatar.js +31 -23
  33. package/dist/ThemeProvider.d.ts.map +1 -1
  34. package/dist/ThemeProvider.js +1 -0
  35. package/dist/Timeline/Timeline-116393ee.css +2 -0
  36. package/dist/Timeline/Timeline-116393ee.css.map +1 -0
  37. package/dist/Timeline/Timeline.module.css.js +1 -1
  38. package/dist/ToggleSwitch/ToggleSwitch.d.ts.map +1 -1
  39. package/dist/Token/IssueLabelToken.js +280 -57
  40. package/dist/Token/_RemoveTokenButton.d.ts +1 -1
  41. package/dist/Token/_RemoveTokenButton.d.ts.map +1 -1
  42. package/dist/Token/_RemoveTokenButton.js +4 -3
  43. package/dist/TooltipV2/Tooltip.d.ts.map +1 -1
  44. package/dist/TooltipV2/Tooltip.js +28 -25
  45. package/dist/TreeView/TreeView.d.ts.map +1 -1
  46. package/dist/TreeView/TreeView.js +5 -1
  47. package/dist/UnderlineNav/UnderlineNav.d.ts.map +1 -1
  48. package/dist/UnderlineNav/UnderlineNav.js +0 -1
  49. package/dist/deprecated/utils/create-slots.d.ts.map +1 -1
  50. package/dist/experimental/SelectPanel2/SelectPanel.d.ts.map +1 -1
  51. package/dist/experimental/SelectPanel2/SelectPanel.js +4 -2
  52. package/dist/hooks/useAnchoredPosition.d.ts.map +1 -1
  53. package/dist/hooks/useAnchoredPosition.js +0 -1
  54. package/dist/hooks/useControllableState.d.ts.map +1 -1
  55. package/dist/hooks/useControllableState.js +2 -0
  56. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  57. package/dist/hooks/useFocusTrap.js +0 -1
  58. package/dist/hooks/useFocusZone.d.ts.map +1 -1
  59. package/dist/hooks/useFocusZone.js +0 -1
  60. package/dist/hooks/useIsMacOS.d.ts.map +1 -1
  61. package/dist/hooks/useIsMacOS.js +3 -1
  62. package/dist/hooks/{useMediaUnsafeSSR.d.ts → useMedia.d.ts} +6 -9
  63. package/dist/hooks/useMedia.d.ts.map +1 -0
  64. package/dist/hooks/{useMediaUnsafeSSR.js → useMedia.js} +14 -29
  65. package/dist/hooks/useMenuInitialFocus.d.ts.map +1 -1
  66. package/dist/hooks/useMenuInitialFocus.js +0 -1
  67. package/dist/hooks/useOnEscapePress.d.ts.map +1 -1
  68. package/dist/hooks/useOnEscapePress.js +0 -1
  69. package/dist/hooks/useRenderForcingRef.d.ts.map +1 -1
  70. package/dist/hooks/useRenderForcingRef.js +37 -7
  71. package/dist/hooks/useResizeObserver.d.ts.map +1 -1
  72. package/dist/hooks/useResizeObserver.js +0 -1
  73. package/dist/hooks/useResponsiveValue.d.ts +0 -2
  74. package/dist/hooks/useResponsiveValue.d.ts.map +1 -1
  75. package/dist/hooks/useResponsiveValue.js +5 -9
  76. package/dist/hooks/useSafeTimeout.d.ts.map +1 -1
  77. package/dist/hooks/useSafeTimeout.js +0 -1
  78. package/dist/hooks/useScrollFlash.d.ts.map +1 -1
  79. package/dist/internal/components/ValidationAnimationContainer.d.ts.map +1 -1
  80. package/dist/internal/hooks/useFocus.d.ts.map +1 -1
  81. package/dist/internal/hooks/useMergedRefs.d.ts.map +1 -1
  82. package/dist/internal/hooks/useMergedRefs.js +0 -1
  83. package/generated/components.json +3 -3
  84. package/package.json +8 -8
  85. package/dist/Timeline/Timeline-e8e88a13.css +0 -2
  86. package/dist/Timeline/Timeline-e8e88a13.css.map +0 -1
  87. package/dist/hooks/useMediaUnsafeSSR.d.ts.map +0 -1
package/CHANGELOG.md CHANGED
@@ -8,10 +8,12 @@
8
8
 
9
9
  - [#7063](https://github.com/primer/react/pull/7063) [`247c66a`](https://github.com/primer/react/commit/247c66a3c297afba73c6e9e3842cc15ff8a845c1) Thanks [@francinelucca](https://github.com/francinelucca)! - Feat: popover implement click outside
10
10
 
11
- - [#7070](https://github.com/primer/react/pull/7070) [`f7dfa7d`](https://github.com/primer/react/commit/f7dfa7d5954961834d0ec360d6b218237e75bf96) Thanks [@hectahertz](https://github.com/hectahertz)! - Add SSR warnings to useMediaUnsafeSSR and useResponsiveValue.
11
+ - [#7109](https://github.com/primer/react/pull/7109) [`34e7108`](https://github.com/primer/react/commit/34e71089ea7668d7b0ab4572f125d13b998e8754) Thanks [@adierkens](https://github.com/adierkens)! - Add support to ActionList for 'tablist' and 'tab' roles
12
12
 
13
13
  ### Patch Changes
14
14
 
15
+ - [#7124](https://github.com/primer/react/pull/7124) [`a746a83`](https://github.com/primer/react/commit/a746a83e68da54a7f66161b0f1d68bfbdc071ce6) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Fixed Timeline.Break when followed by a condensed item and clip sidebar for condensed items.
16
+
15
17
  - [#7060](https://github.com/primer/react/pull/7060) [`3468793`](https://github.com/primer/react/commit/3468793e15269d6d9f226ee7844921e44bfc4622) Thanks [@francinelucca](https://github.com/francinelucca)! - @primer/react: chore(Dialog): allow direct children
16
18
 
17
19
  - [#7061](https://github.com/primer/react/pull/7061) [`e58e102`](https://github.com/primer/react/commit/e58e1027d7f3cdae5223c08d83f7b86918db370b) Thanks [@francinelucca](https://github.com/francinelucca)! - PageLayout: update wrapper dimensions to match PageLayout's root element
package/README.md CHANGED
@@ -28,20 +28,19 @@ To install `@primer/react` in your project, you will need to run the following
28
28
  command using [npm](https://www.npmjs.com/):
29
29
 
30
30
  ```bash
31
- npm install -S @primer/react @primer/primitives styled-components@5.x
31
+ npm install -S @primer/react @primer/primitives
32
32
  ```
33
33
 
34
34
  If you prefer [Yarn](https://yarnpkg.com/), use the following command instead:
35
35
 
36
36
  ```bash
37
- yarn add @primer/react @primer/primitives styled-components@5.x
37
+ yarn add @primer/react @primer/primitives
38
38
  ```
39
39
 
40
- This command will install three packages in your project:
40
+ This command will install two packages in your project:
41
41
 
42
42
  - `@primer/react`: used to import and use all the components from Primer
43
43
  - `@primer/primitives`: used to include the design tokens from Primer
44
- - `styled-components`: used to style components
45
44
 
46
45
  To learn more about how to use `@primer/react`, visit our documentation site at:
47
46
  [primer.style](https://primer.style).
@@ -59,26 +58,32 @@ function App() {
59
58
  ```
60
59
 
61
60
  At the root of your application, you'll also want to include our
62
- `ThemeProvider` and `BaseStyles` components along with styles from the
61
+ `BaseStyles` component along with styles from the
63
62
  `@primer/primitives` package. For example:
64
63
 
65
64
  ```tsx
66
65
  // Import each of the themes you would like to use, by default we are including
67
66
  // the light theme below
68
67
  import '@primer/primitives/dist/css/functional/themes/light.css'
69
- import {BaseStyles, ThemeProvider} from '@primer/react'
68
+ import {BaseStyles} from '@primer/react'
70
69
 
71
70
  function RootLayout() {
72
71
  return (
73
- <ThemeProvider>
74
- <BaseStyles>
75
- <App />
76
- </BaseStyles>
77
- </ThemeProvider>
72
+ <BaseStyles>
73
+ <App />
74
+ </BaseStyles>
78
75
  )
79
76
  }
80
77
  ```
81
78
 
79
+ In addition, you will need to add the following attributes to your `html` element:
80
+
81
+ ```html
82
+ <html data-light-theme="light" data-dark-theme="dark" data-color-mode="auto">
83
+ <!-- ... -->
84
+ </html>
85
+ ```
86
+
82
87
  ## 📖 Documentation
83
88
 
84
89
  The documentation for `@primer/react` lives at [primer.style](https://primer.style). There, you'll find detailed documentation on getting started, all of the components, our theme, our principles, and more.
package/dist/ActionBar/ActionBar.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { c } from 'react-compiler-runtime';
2
- import React, { forwardRef, useRef, useState, useCallback, useId } from 'react';
2
+ import React, { forwardRef, useRef, useState, useId } from 'react';
3
3
  import { KebabHorizontalIcon } from '@primer/octicons-react';
4
4
  import { ActionList } from '../ActionList/index.js';
5
5
  import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
@@ -10,7 +10,7 @@ import { IconButton } from '../Button/IconButton.js';
10
10
  import { useFocusZone } from '../hooks/useFocusZone.js';
11
11
  import styles from './ActionBar.module.css.js';
12
12
  import { clsx } from 'clsx';
13
- import { jsx, jsxs } from 'react/jsx-runtime';
13
+ import { jsxs, jsx } from 'react/jsx-runtime';
14
14
  import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
15
15
  import { FocusKeys } from '@primer/behaviors';
16
16
  import { ActionMenu } from '../ActionMenu/ActionMenu.js';
@@ -86,176 +86,330 @@ const getMenuItems = (navWidth, moreMenuWidth, childRegistry, hasActiveMenu, gap
86
86
  }
87
87
  };
88
88
  const ActionBar = props => {
89
+ const $ = c(43);
89
90
  const {
90
- size = 'medium',
91
+ size: t0,
91
92
  children,
92
- 'aria-label': ariaLabel,
93
- 'aria-labelledby': ariaLabelledBy,
94
- flush = false,
93
+ "aria-label": ariaLabel,
94
+ "aria-labelledby": ariaLabelledBy,
95
+ flush: t1,
95
96
  className,
96
- gap = 'condensed'
97
+ gap: t2
97
98
  } = props;
98
-
99
- // We derive the numeric gap from computed style so layout math stays in sync with CSS
99
+ const size = t0 === undefined ? "medium" : t0;
100
+ const flush = t1 === undefined ? false : t1;
101
+ const gap = t2 === undefined ? "condensed" : t2;
100
102
  const listRef = useRef(null);
101
103
  const [computedGap, setComputedGap] = useState(ACTIONBAR_ITEM_GAP);
102
- const [childRegistry, setChildRegistry] = useState(() => new Map());
103
- const registerChild = useCallback((id, childProps) => setChildRegistry(prev => new Map(prev).set(id, childProps)), []);
104
- const unregisterChild = useCallback(id_0 => setChildRegistry(prev_0 => new Map(prev_0).set(id_0, null)), []);
105
- const [menuItemIds, setMenuItemIds] = useState(() => new Set());
104
+ const [childRegistry, setChildRegistry] = useState(_temp);
105
+ let t3;
106
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
107
+ t3 = (id, childProps) => setChildRegistry(prev => new Map(prev).set(id, childProps));
108
+ $[0] = t3;
109
+ } else {
110
+ t3 = $[0];
111
+ }
112
+ const registerChild = t3;
113
+ let t4;
114
+ if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
115
+ t4 = id_0 => setChildRegistry(prev_0 => new Map(prev_0).set(id_0, null));
116
+ $[1] = t4;
117
+ } else {
118
+ t4 = $[1];
119
+ }
120
+ const unregisterChild = t4;
121
+ const [menuItemIds, setMenuItemIds] = useState(_temp2);
106
122
  const navRef = useRef(null);
107
- // measure gap after first render & whenever gap scale changes
108
- useIsomorphicLayoutEffect(() => {
109
- if (!listRef.current) return;
110
- const g = window.getComputedStyle(listRef.current).gap;
111
- const parsed = parseFloat(g);
112
- if (!Number.isNaN(parsed)) setComputedGap(parsed);
113
- }, [gap]);
123
+ let t5;
124
+ if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
125
+ t5 = () => {
126
+ if (!listRef.current) {
127
+ return;
128
+ }
129
+ const g = window.getComputedStyle(listRef.current).gap;
130
+ const parsed = parseFloat(g);
131
+ if (!Number.isNaN(parsed)) {
132
+ setComputedGap(parsed);
133
+ }
134
+ };
135
+ $[2] = t5;
136
+ } else {
137
+ t5 = $[2];
138
+ }
139
+ let t6;
140
+ if ($[3] !== gap) {
141
+ t6 = [gap];
142
+ $[3] = gap;
143
+ $[4] = t6;
144
+ } else {
145
+ t6 = $[4];
146
+ }
147
+ useIsomorphicLayoutEffect(t5, t6);
114
148
  const moreMenuRef = useRef(null);
115
149
  const moreMenuBtnRef = useRef(null);
116
150
  const containerRef = React.useRef(null);
117
- useResizeObserver(resizeObserverEntries => {
118
- var _moreMenuRef$current$, _moreMenuRef$current;
119
- const navWidth = resizeObserverEntries[0].contentRect.width;
120
- const moreMenuWidth = (_moreMenuRef$current$ = (_moreMenuRef$current = moreMenuRef.current) === null || _moreMenuRef$current === void 0 ? void 0 : _moreMenuRef$current.getBoundingClientRect().width) !== null && _moreMenuRef$current$ !== void 0 ? _moreMenuRef$current$ : 0;
121
- const hasActiveMenu = menuItemIds.size > 0;
122
- if (navWidth > 0) {
123
- const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap);
124
- if (newMenuItemIds) setMenuItemIds(newMenuItemIds);
125
- }
126
- }, navRef);
127
- const isVisibleChild = useCallback(id_1 => {
128
- return !menuItemIds.has(id_1);
129
- }, [menuItemIds]);
151
+ let t7;
152
+ if ($[5] !== childRegistry || $[6] !== computedGap || $[7] !== menuItemIds.size) {
153
+ t7 = resizeObserverEntries => {
154
+ var _moreMenuRef$current$, _moreMenuRef$current;
155
+ const navWidth = resizeObserverEntries[0].contentRect.width;
156
+ const moreMenuWidth = (_moreMenuRef$current$ = (_moreMenuRef$current = moreMenuRef.current) === null || _moreMenuRef$current === void 0 ? void 0 : _moreMenuRef$current.getBoundingClientRect().width) !== null && _moreMenuRef$current$ !== void 0 ? _moreMenuRef$current$ : 0;
157
+ const hasActiveMenu = menuItemIds.size > 0;
158
+ if (navWidth > 0) {
159
+ const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap);
160
+ if (newMenuItemIds) {
161
+ setMenuItemIds(newMenuItemIds);
162
+ }
163
+ }
164
+ };
165
+ $[5] = childRegistry;
166
+ $[6] = computedGap;
167
+ $[7] = menuItemIds.size;
168
+ $[8] = t7;
169
+ } else {
170
+ t7 = $[8];
171
+ }
172
+ useResizeObserver(t7, navRef);
173
+ let t8;
174
+ if ($[9] !== menuItemIds) {
175
+ t8 = id_1 => !menuItemIds.has(id_1);
176
+ $[9] = menuItemIds;
177
+ $[10] = t8;
178
+ } else {
179
+ t8 = $[10];
180
+ }
181
+ const isVisibleChild = t8;
130
182
  const [isWidgetOpen, setIsWidgetOpen] = useState(false);
131
- const closeOverlay = React.useCallback(() => {
132
- setIsWidgetOpen(false);
133
- }, [setIsWidgetOpen]);
134
- const focusOnMoreMenuBtn = React.useCallback(() => {
135
- var _moreMenuBtnRef$curre;
136
- (_moreMenuBtnRef$curre = moreMenuBtnRef.current) === null || _moreMenuBtnRef$curre === void 0 ? void 0 : _moreMenuBtnRef$curre.focus();
137
- }, []);
138
- useOnEscapePress(event => {
139
- if (isWidgetOpen) {
140
- event.preventDefault();
141
- closeOverlay();
142
- focusOnMoreMenuBtn();
143
- }
144
- }, [isWidgetOpen]);
145
- useOnOutsideClick({
146
- onClickOutside: closeOverlay,
147
- containerRef,
148
- ignoreClickRefs: [moreMenuBtnRef]
149
- });
150
- useFocusZone({
151
- containerRef: listRef,
152
- bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
153
- focusOutBehavior: 'wrap'
154
- });
155
- const groupedItems = React.useMemo(() => {
156
- const groupedItemsMap = new Map();
183
+ let t9;
184
+ if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
185
+ t9 = () => {
186
+ setIsWidgetOpen(false);
187
+ };
188
+ $[11] = t9;
189
+ } else {
190
+ t9 = $[11];
191
+ }
192
+ const closeOverlay = t9;
193
+ let t10;
194
+ if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
195
+ t10 = () => {
196
+ var _moreMenuBtnRef$curre;
197
+ (_moreMenuBtnRef$curre = moreMenuBtnRef.current) === null || _moreMenuBtnRef$curre === void 0 ? void 0 : _moreMenuBtnRef$curre.focus();
198
+ };
199
+ $[12] = t10;
200
+ } else {
201
+ t10 = $[12];
202
+ }
203
+ const focusOnMoreMenuBtn = t10;
204
+ let t11;
205
+ let t12;
206
+ if ($[13] !== isWidgetOpen) {
207
+ t11 = event => {
208
+ if (isWidgetOpen) {
209
+ event.preventDefault();
210
+ closeOverlay();
211
+ focusOnMoreMenuBtn();
212
+ }
213
+ };
214
+ t12 = [isWidgetOpen];
215
+ $[13] = isWidgetOpen;
216
+ $[14] = t11;
217
+ $[15] = t12;
218
+ } else {
219
+ t11 = $[14];
220
+ t12 = $[15];
221
+ }
222
+ useOnEscapePress(t11, t12);
223
+ let t13;
224
+ if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
225
+ t13 = {
226
+ onClickOutside: closeOverlay,
227
+ containerRef,
228
+ ignoreClickRefs: [moreMenuBtnRef]
229
+ };
230
+ $[16] = t13;
231
+ } else {
232
+ t13 = $[16];
233
+ }
234
+ useOnOutsideClick(t13);
235
+ let t14;
236
+ if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
237
+ t14 = {
238
+ containerRef: listRef,
239
+ bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
240
+ focusOutBehavior: "wrap"
241
+ };
242
+ $[17] = t14;
243
+ } else {
244
+ t14 = $[17];
245
+ }
246
+ useFocusZone(t14);
247
+ let groupedItemsMap;
248
+ if ($[18] !== childRegistry) {
249
+ groupedItemsMap = new Map();
157
250
  for (const [key, childProps_0] of childRegistry) {
158
- if ((childProps_0 === null || childProps_0 === void 0 ? void 0 : childProps_0.type) === 'action' && childProps_0.groupId) {
251
+ if ((childProps_0 === null || childProps_0 === void 0 ? void 0 : childProps_0.type) === "action" && childProps_0.groupId) {
159
252
  const existingGroup = groupedItemsMap.get(childProps_0.groupId) || [];
160
253
  existingGroup.push([key, childProps_0]);
161
254
  groupedItemsMap.set(childProps_0.groupId, existingGroup);
162
255
  }
163
256
  }
164
- return groupedItemsMap;
165
- }, [childRegistry]);
166
- return /*#__PURE__*/jsx(ActionBarContext.Provider, {
167
- value: {
257
+ $[18] = childRegistry;
258
+ $[19] = groupedItemsMap;
259
+ } else {
260
+ groupedItemsMap = $[19];
261
+ }
262
+ const groupedItems = groupedItemsMap;
263
+ let t15;
264
+ if ($[20] !== isVisibleChild || $[21] !== size) {
265
+ t15 = {
168
266
  size,
169
267
  registerChild,
170
268
  unregisterChild,
171
269
  isVisibleChild
172
- },
173
- children: /*#__PURE__*/jsx("div", {
270
+ };
271
+ $[20] = isVisibleChild;
272
+ $[21] = size;
273
+ $[22] = t15;
274
+ } else {
275
+ t15 = $[22];
276
+ }
277
+ let t16;
278
+ if ($[23] !== className) {
279
+ t16 = clsx(className, styles.Nav);
280
+ $[23] = className;
281
+ $[24] = t16;
282
+ } else {
283
+ t16 = $[24];
284
+ }
285
+ let t17;
286
+ if ($[25] !== ariaLabel || $[26] !== childRegistry || $[27] !== groupedItems || $[28] !== menuItemIds) {
287
+ t17 = menuItemIds.size > 0 && /*#__PURE__*/jsxs(ActionMenu, {
288
+ children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
289
+ children: /*#__PURE__*/jsx(IconButton, {
290
+ variant: "invisible",
291
+ "aria-label": `More ${ariaLabel} items`,
292
+ icon: KebabHorizontalIcon
293
+ })
294
+ }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
295
+ children: /*#__PURE__*/jsx(ActionList, {
296
+ children: Array.from(menuItemIds).map(id_2 => {
297
+ const menuItem = childRegistry.get(id_2);
298
+ if (!menuItem) {
299
+ return null;
300
+ }
301
+ if (menuItem.type === "divider") {
302
+ return /*#__PURE__*/jsx(ActionList.Divider, {}, id_2);
303
+ } else {
304
+ if (menuItem.type === "action") {
305
+ const {
306
+ onClick,
307
+ icon: Icon,
308
+ label,
309
+ disabled
310
+ } = menuItem;
311
+ return /*#__PURE__*/jsxs(ActionList.Item, {
312
+ onClick: event_0 => {
313
+ closeOverlay();
314
+ focusOnMoreMenuBtn();
315
+ typeof onClick === "function" && onClick(event_0);
316
+ },
317
+ disabled: disabled,
318
+ children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
319
+ children: /*#__PURE__*/jsx(Icon, {})
320
+ }), label]
321
+ }, label);
322
+ }
323
+ }
324
+ const groupedMenuItems = groupedItems.get(id_2) || [];
325
+ if (menuItem.type === "group") {
326
+ return /*#__PURE__*/jsx(React.Fragment, {
327
+ children: groupedMenuItems.map(t18 => {
328
+ const [key_0, childProps_1] = t18;
329
+ if (childProps_1.type === "action") {
330
+ const {
331
+ onClick: onClick_0,
332
+ icon: Icon_0,
333
+ label: label_0,
334
+ disabled: disabled_0
335
+ } = childProps_1;
336
+ return /*#__PURE__*/jsxs(ActionList.Item, {
337
+ onSelect: event_1 => {
338
+ closeOverlay();
339
+ focusOnMoreMenuBtn();
340
+ typeof onClick_0 === "function" && onClick_0(event_1);
341
+ },
342
+ disabled: disabled_0,
343
+ children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
344
+ children: /*#__PURE__*/jsx(Icon_0, {})
345
+ }), label_0]
346
+ }, key_0);
347
+ }
348
+ return null;
349
+ })
350
+ }, id_2);
351
+ }
352
+ })
353
+ })
354
+ })]
355
+ });
356
+ $[25] = ariaLabel;
357
+ $[26] = childRegistry;
358
+ $[27] = groupedItems;
359
+ $[28] = menuItemIds;
360
+ $[29] = t17;
361
+ } else {
362
+ t17 = $[29];
363
+ }
364
+ let t18;
365
+ if ($[30] !== ariaLabel || $[31] !== ariaLabelledBy || $[32] !== children || $[33] !== gap || $[34] !== t17) {
366
+ t18 = /*#__PURE__*/jsxs("div", {
367
+ ref: listRef,
368
+ role: "toolbar",
369
+ className: styles.List,
370
+ "aria-label": ariaLabel,
371
+ "aria-labelledby": ariaLabelledBy,
372
+ "data-gap": gap,
373
+ children: [children, t17]
374
+ });
375
+ $[30] = ariaLabel;
376
+ $[31] = ariaLabelledBy;
377
+ $[32] = children;
378
+ $[33] = gap;
379
+ $[34] = t17;
380
+ $[35] = t18;
381
+ } else {
382
+ t18 = $[35];
383
+ }
384
+ let t19;
385
+ if ($[36] !== flush || $[37] !== t16 || $[38] !== t18) {
386
+ t19 = /*#__PURE__*/jsx("div", {
174
387
  ref: navRef,
175
- className: clsx(className, styles.Nav),
388
+ className: t16,
176
389
  "data-flush": flush,
177
- children: /*#__PURE__*/jsxs("div", {
178
- ref: listRef,
179
- role: "toolbar",
180
- className: styles.List,
181
- "aria-label": ariaLabel,
182
- "aria-labelledby": ariaLabelledBy,
183
- "data-gap": gap,
184
- children: [children, menuItemIds.size > 0 && /*#__PURE__*/jsxs(ActionMenu, {
185
- children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
186
- children: /*#__PURE__*/jsx(IconButton, {
187
- variant: "invisible",
188
- "aria-label": `More ${ariaLabel} items`,
189
- icon: KebabHorizontalIcon
190
- })
191
- }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
192
- children: /*#__PURE__*/jsx(ActionList, {
193
- children: Array.from(menuItemIds).map(id_2 => {
194
- const menuItem = childRegistry.get(id_2);
195
- if (!menuItem) return null;
196
- if (menuItem.type === 'divider') {
197
- return /*#__PURE__*/jsx(ActionList.Divider, {}, id_2);
198
- } else if (menuItem.type === 'action') {
199
- const {
200
- onClick,
201
- icon: Icon,
202
- label,
203
- disabled
204
- } = menuItem;
205
- return /*#__PURE__*/jsxs(ActionList.Item, {
206
- // eslint-disable-next-line primer-react/prefer-action-list-item-onselect
207
- onClick: event_0 => {
208
- closeOverlay();
209
- focusOnMoreMenuBtn();
210
- typeof onClick === 'function' && onClick(event_0);
211
- },
212
- disabled: disabled,
213
- children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
214
- children: /*#__PURE__*/jsx(Icon, {})
215
- }), label]
216
- }, label);
217
- }
218
-
219
- // Use the memoized map instead of filtering each time
220
- const groupedMenuItems = groupedItems.get(id_2) || [];
221
-
222
- // If we ever add additional types, this condition will be necessary
223
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
224
- if (menuItem.type === 'group') {
225
- return /*#__PURE__*/jsx(React.Fragment, {
226
- children: groupedMenuItems.map(([key_0, childProps_1]) => {
227
- if (childProps_1.type === 'action') {
228
- const {
229
- onClick: onClick_0,
230
- icon: Icon_0,
231
- label: label_0,
232
- disabled: disabled_0
233
- } = childProps_1;
234
- return /*#__PURE__*/jsxs(ActionList.Item, {
235
- onSelect: event_1 => {
236
- closeOverlay();
237
- focusOnMoreMenuBtn();
238
- typeof onClick_0 === 'function' && onClick_0(event_1);
239
- },
240
- disabled: disabled_0,
241
- children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
242
- children: /*#__PURE__*/jsx(Icon_0, {})
243
- }), label_0]
244
- }, key_0);
245
- }
246
- return null;
247
- })
248
- }, id_2);
249
- }
250
- })
251
- })
252
- })]
253
- })]
254
- })
255
- })
256
- });
390
+ children: t18
391
+ });
392
+ $[36] = flush;
393
+ $[37] = t16;
394
+ $[38] = t18;
395
+ $[39] = t19;
396
+ } else {
397
+ t19 = $[39];
398
+ }
399
+ let t20;
400
+ if ($[40] !== t15 || $[41] !== t19) {
401
+ t20 = /*#__PURE__*/jsx(ActionBarContext.Provider, {
402
+ value: t15,
403
+ children: t19
404
+ });
405
+ $[40] = t15;
406
+ $[41] = t19;
407
+ $[42] = t20;
408
+ } else {
409
+ t20 = $[42];
410
+ }
411
+ return t20;
257
412
  };
258
- ActionBar.displayName = "ActionBar";
259
413
  const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
260
414
  const $ = c(28);
261
415
  let disabled;
@@ -531,5 +685,11 @@ const VerticalDivider = () => {
531
685
  }
532
686
  return t2;
533
687
  };
688
+ function _temp() {
689
+ return new Map();
690
+ }
691
+ function _temp2() {
692
+ return new Set();
693
+ }
534
694
 
535
695
  export { ActionBar, ActionBarGroup, ActionBarIconButton, VerticalDivider };
package/dist/ActionList/Item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/ActionList/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAmBzB,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAEpD,CAAA;AAmSD,QAAA,MAAM,IAAI,IA3Qa,EAAE,SAAS,KAAK,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QjD,CAAA;AAEF,OAAO,EAAC,IAAI,EAAC,CAAA"}
1
+ {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/ActionList/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAmBzB,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAEpD,CAAA;AAySD,QAAA,MAAM,IAAI,IAjRa,EAAE,SAAS,KAAK,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoRjD,CAAA;AAEF,OAAO,EAAC,IAAI,EAAC,CAAA"}
package/dist/ActionList/Item.js CHANGED
@@ -118,6 +118,8 @@ const UnwrappedItem = ({
118
118
  if (selectionVariant === 'single') inferredItemRole = 'menuitemradio';else if (selectionVariant === 'multiple') inferredItemRole = 'menuitemcheckbox';else inferredItemRole = 'menuitem';
119
119
  } else if (listRole === 'listbox') {
120
120
  if (selectionVariant !== undefined && !role) inferredItemRole = 'option';
121
+ } else if (listRole === 'tablist') {
122
+ inferredItemRole = 'tab';
121
123
  }
122
124
  const itemRole = role || inferredItemRole;
123
125
  if (slots.trailingAction) {
@@ -129,7 +131,7 @@ const UnwrappedItem = ({
129
131
  if (itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox') inferredSelectionAttribute = 'aria-checked';else if (itemRole === 'option') inferredSelectionAttribute = 'aria-selected';
130
132
  const itemSelectionAttribute = selectionAttribute || inferredSelectionAttribute;
131
133
  // Ensures ActionList.Item retains list item semantics if a valid ARIA role is applied, or if item is inactive
132
- const listItemSemantics = role === 'option' || role === 'menuitem' || role === 'menuitemradio' || role === 'menuitemcheckbox';
134
+ const listItemSemantics = itemRole === 'option' || itemRole === 'menuitem' || itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox' || itemRole === 'tab';
133
135
  const listRoleTypes = ['listbox', 'menu', 'list'];
134
136
  const listSemantics = listRole && listRoleTypes.includes(listRole) || inactive || listItemSemantics;
135
137
  const buttonSemantics = !listSemantics && !_PrivateItemWrapper;
package/dist/ActionMenu/ActionMenu.js CHANGED
@@ -83,7 +83,7 @@ const Menu = ({
83
83
  // tooltip trigger
84
84
  const anchorChildren = child.props.children;
85
85
  if (anchorChildren.type === MenuButton || isSlot(anchorChildren, MenuButton)) {
86
- // eslint-disable-next-line react-compiler/react-compiler
86
+ // eslint-disable-next-line react-hooks/immutability
87
87
  renderAnchor = anchorProps => {
88
88
  // We need to attach the anchor props to the tooltip trigger (ActionMenu.Button's grandchild) not the tooltip itself.
89
89
  const triggerButton = /*#__PURE__*/React.cloneElement(anchorChildren, mergeAnchorHandlers({
package/dist/Autocomplete/AutocompleteInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/AutocompleteInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqD,MAAM,OAAO,CAAA;AACzE,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAGlD,KAAK,8BAA8B,GAAG;IAEpC,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAA;IAEtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAID,QAAA,MAAM,iBAAiB,EAkKlB,8BAA8B,CAAC,OAAO,SAAS,EAAE,8BAA8B,CAAC,CAAA;AAIrF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAC7E,eAAe,iBAAiB,CAAA"}
1
+ {"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/AutocompleteInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqD,MAAM,OAAO,CAAA;AACzE,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAGlD,KAAK,8BAA8B,GAAG;IAEpC,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAA;IAEtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAID,QAAA,MAAM,iBAAiB,EAiKlB,8BAA8B,CAAC,OAAO,SAAS,EAAE,8BAA8B,CAAC,CAAA;AAIrF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAC7E,eAAe,iBAAiB,CAAA"}
package/dist/Autocomplete/AutocompleteInput.js CHANGED
@@ -115,7 +115,6 @@ const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
115
115
  }
116
116
 
117
117
  // calling this useEffect when `highlightRemainingText` changes breaks backspace functionality
118
- // eslint-disable-next-line react-compiler/react-compiler
119
118
  // eslint-disable-next-line react-hooks/exhaustive-deps
120
119
  }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated]);
121
120
  useEffect(() => {