@primer/react 38.1.0-rc.430f77ae3 → 38.1.0-rc.5690a3098

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 (115) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +16 -11
  3. package/dist/ActionBar/ActionBar.js +308 -148
  4. package/dist/ActionList/ActionList-167cf6c7.css +1 -1
  5. package/dist/ActionList/ActionList-167cf6c7.css.map +1 -1
  6. package/dist/ActionList/Item.d.ts.map +1 -1
  7. package/dist/ActionList/Item.js +3 -1
  8. package/dist/ActionList/List.d.ts.map +1 -1
  9. package/dist/ActionMenu/ActionMenu.js +1 -1
  10. package/dist/AnchoredOverlay/AnchoredOverlay.d.ts +1 -0
  11. package/dist/AnchoredOverlay/AnchoredOverlay.d.ts.map +1 -1
  12. package/dist/Autocomplete/AutocompleteInput.d.ts.map +1 -1
  13. package/dist/Autocomplete/AutocompleteInput.js +0 -1
  14. package/dist/Autocomplete/AutocompleteMenu.js +334 -124
  15. package/dist/Avatar/Avatar.js +31 -23
  16. package/dist/Banner/Banner.d.ts.map +1 -1
  17. package/dist/Banner/Banner.js +0 -1
  18. package/dist/BaseStyles.d.ts +2 -2
  19. package/dist/BaseStyles.d.ts.map +1 -1
  20. package/dist/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
  21. package/dist/Breadcrumbs/Breadcrumbs.js +1 -0
  22. package/dist/Button/ButtonBase.d.ts.map +1 -1
  23. package/dist/Button/ButtonBase.js +0 -1
  24. package/dist/Checkbox/Checkbox.d.ts.map +1 -1
  25. package/dist/DataTable/Pagination.js +296 -87
  26. package/dist/DataTable/Table.d.ts +13 -13
  27. package/dist/DataTable/Table.d.ts.map +1 -1
  28. package/dist/Dialog/Dialog.js +1 -1
  29. package/dist/FilteredActionList/FilteredActionList-f6c2dc7a.css +1 -1
  30. package/dist/FilteredActionList/FilteredActionList-f6c2dc7a.css.map +1 -1
  31. package/dist/FilteredActionList/FilteredActionList.d.ts +1 -0
  32. package/dist/FilteredActionList/FilteredActionList.d.ts.map +1 -1
  33. package/dist/FilteredActionList/FilteredActionListLoaders.d.ts +1 -0
  34. package/dist/FilteredActionList/FilteredActionListLoaders.d.ts.map +1 -1
  35. package/dist/FilteredActionList/useAnnouncements.d.ts.map +1 -1
  36. package/dist/FilteredActionList/useAnnouncements.js +1 -0
  37. package/dist/Heading/Heading.d.ts.map +1 -1
  38. package/dist/Heading/Heading.js +0 -1
  39. package/dist/LabelGroup/LabelGroup.d.ts.map +1 -1
  40. package/dist/LabelGroup/LabelGroup.js +1 -0
  41. package/dist/Link/Link-968346ff.css +2 -0
  42. package/dist/Link/Link-968346ff.css.map +1 -0
  43. package/dist/Link/Link.d.ts +0 -2
  44. package/dist/Link/Link.d.ts.map +1 -1
  45. package/dist/Link/Link.js +0 -3
  46. package/dist/Link/Link.module.css.js +1 -1
  47. package/dist/Portal/Portal.d.ts.map +1 -1
  48. package/dist/Portal/Portal.js +0 -1
  49. package/dist/SelectPanel/SelectPanel.d.ts +1 -1
  50. package/dist/SelectPanel/SelectPanel.d.ts.map +1 -1
  51. package/dist/SelectPanel/SelectPanel.js +0 -1
  52. package/dist/SkeletonAvatar/SkeletonAvatar.js +31 -23
  53. package/dist/ThemeProvider.d.ts.map +1 -1
  54. package/dist/ThemeProvider.js +1 -0
  55. package/dist/Timeline/Timeline-116393ee.css +2 -0
  56. package/dist/Timeline/Timeline-116393ee.css.map +1 -0
  57. package/dist/Timeline/Timeline.module.css.js +1 -1
  58. package/dist/ToggleSwitch/ToggleSwitch.d.ts.map +1 -1
  59. package/dist/Token/IssueLabelToken.js +280 -57
  60. package/dist/Token/_RemoveTokenButton.d.ts +1 -1
  61. package/dist/Token/_RemoveTokenButton.d.ts.map +1 -1
  62. package/dist/Token/_RemoveTokenButton.js +4 -3
  63. package/dist/TooltipV2/Tooltip.d.ts.map +1 -1
  64. package/dist/TooltipV2/Tooltip.js +28 -25
  65. package/dist/TreeView/TreeView.d.ts.map +1 -1
  66. package/dist/TreeView/TreeView.js +5 -1
  67. package/dist/UnderlineNav/UnderlineNav.d.ts.map +1 -1
  68. package/dist/UnderlineNav/UnderlineNav.js +0 -1
  69. package/dist/deprecated/ActionList/Divider.d.ts +1 -0
  70. package/dist/deprecated/ActionList/Divider.d.ts.map +1 -1
  71. package/dist/deprecated/ActionList/Group.d.ts +1 -0
  72. package/dist/deprecated/ActionList/Group.d.ts.map +1 -1
  73. package/dist/deprecated/ActionList/Header.d.ts +1 -0
  74. package/dist/deprecated/ActionList/Header.d.ts.map +1 -1
  75. package/dist/deprecated/ActionList/List.d.ts.map +1 -1
  76. package/dist/deprecated/ActionMenu.d.ts +2 -1
  77. package/dist/deprecated/ActionMenu.d.ts.map +1 -1
  78. package/dist/deprecated/utils/create-slots.d.ts.map +1 -1
  79. package/dist/experimental/SelectPanel2/SelectPanel.d.ts.map +1 -1
  80. package/dist/experimental/SelectPanel2/SelectPanel.js +4 -2
  81. package/dist/hooks/useAnchoredPosition.d.ts.map +1 -1
  82. package/dist/hooks/useAnchoredPosition.js +0 -1
  83. package/dist/hooks/useControllableState.d.ts.map +1 -1
  84. package/dist/hooks/useControllableState.js +2 -0
  85. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  86. package/dist/hooks/useFocusTrap.js +0 -1
  87. package/dist/hooks/useFocusZone.d.ts.map +1 -1
  88. package/dist/hooks/useFocusZone.js +0 -1
  89. package/dist/hooks/useIsMacOS.d.ts.map +1 -1
  90. package/dist/hooks/useIsMacOS.js +3 -1
  91. package/dist/hooks/useMedia.d.ts.map +1 -1
  92. package/dist/hooks/useMedia.js +12 -27
  93. package/dist/hooks/useMenuInitialFocus.d.ts.map +1 -1
  94. package/dist/hooks/useMenuInitialFocus.js +0 -1
  95. package/dist/hooks/useOnEscapePress.d.ts.map +1 -1
  96. package/dist/hooks/useOnEscapePress.js +0 -1
  97. package/dist/hooks/useRenderForcingRef.d.ts.map +1 -1
  98. package/dist/hooks/useRenderForcingRef.js +37 -7
  99. package/dist/hooks/useResizeObserver.d.ts.map +1 -1
  100. package/dist/hooks/useResizeObserver.js +0 -1
  101. package/dist/hooks/useSafeTimeout.d.ts.map +1 -1
  102. package/dist/hooks/useSafeTimeout.js +0 -1
  103. package/dist/hooks/useScrollFlash.d.ts.map +1 -1
  104. package/dist/internal/components/ValidationAnimationContainer.d.ts.map +1 -1
  105. package/dist/internal/hooks/useFocus.d.ts.map +1 -1
  106. package/dist/internal/hooks/useMergedRefs.d.ts.map +1 -1
  107. package/dist/internal/hooks/useMergedRefs.js +0 -1
  108. package/dist/utils/polymorphic.d.ts +1 -0
  109. package/dist/utils/polymorphic.d.ts.map +1 -1
  110. package/generated/components.json +3 -7
  111. package/package.json +12 -11
  112. package/dist/Link/Link-e01bdaee.css +0 -2
  113. package/dist/Link/Link-e01bdaee.css.map +0 -1
  114. package/dist/Timeline/Timeline-e8e88a13.css +0 -2
  115. package/dist/Timeline/Timeline-e8e88a13.css.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"useSafeTimeout.d.ts","sourceRoot":"","sources":["../../src/hooks/useSafeTimeout.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,MAAM,CAAA;AACzF,KAAK,YAAY,GAAG,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;AAExC;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,IAAI;IAAC,cAAc,EAAE,UAAU,CAAC;IAAC,gBAAgB,EAAE,YAAY,CAAA;CAAC,CA4BrG"}
1
+ {"version":3,"file":"useSafeTimeout.d.ts","sourceRoot":"","sources":["../../src/hooks/useSafeTimeout.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,MAAM,CAAA;AACzF,KAAK,YAAY,GAAG,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;AAExC;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,IAAI;IAAC,cAAc,EAAE,UAAU,CAAC;IAAC,gBAAgB,EAAE,YAAY,CAAA;CAAC,CA2BrG"}
@@ -18,7 +18,6 @@ function useSafeTimeout() {
18
18
  }, []);
19
19
  useEffect(() => {
20
20
  return () => {
21
- // eslint-disable-next-line react-compiler/react-compiler
22
21
  // eslint-disable-next-line react-hooks/exhaustive-deps
23
22
  for (const id of timers.current) {
24
23
  clearTimeout(id);
@@ -1 +1 @@
1
- {"version":3,"file":"useScrollFlash.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollFlash.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,QAgBtF"}
1
+ {"version":3,"file":"useScrollFlash.d.ts","sourceRoot":"","sources":["../../src/hooks/useScrollFlash.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,QAetF"}
@@ -1 +1 @@
1
- {"version":3,"file":"ValidationAnimationContainer.d.ts","sourceRoot":"","sources":["../../../src/internal/components/ValidationAnimationContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,KAAM,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AACD,QAAA,MAAM,4BAA4B,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAkB1E,CAAA;AAED,eAAe,4BAA4B,CAAA"}
1
+ {"version":3,"file":"ValidationAnimationContainer.d.ts","sourceRoot":"","sources":["../../../src/internal/components/ValidationAnimationContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,KAAM,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AACD,QAAA,MAAM,4BAA4B,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAmB1E,CAAA;AAED,eAAe,4BAA4B,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"useFocus.d.ts","sourceRoot":"","sources":["../../../src/internal/hooks/useFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAA;AAEzD,wBAAgB,QAAQ,0GAkBvB"}
1
+ {"version":3,"file":"useFocus.d.ts","sourceRoot":"","sources":["../../../src/internal/hooks/useFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAA;AAEzD,wBAAgB,QAAQ,0GAmBvB"}
@@ -1 +1 @@
1
- {"version":3,"file":"useMergedRefs.d.ts","sourceRoot":"","sources":["../../../src/internal/hooks/useMergedRefs.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,CAAC,EAC7B,GAAG,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GACvF,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAYtB"}
1
+ {"version":3,"file":"useMergedRefs.d.ts","sourceRoot":"","sources":["../../../src/internal/hooks/useMergedRefs.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,CAAC,EAC7B,GAAG,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GACvF,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAWtB"}
@@ -9,7 +9,6 @@ function useMergedRefs(...refs) {
9
9
  ref.current = instance;
10
10
  }
11
11
  }
12
- // eslint-disable-next-line react-compiler/react-compiler
13
12
  // eslint-disable-next-line react-hooks/exhaustive-deps
14
13
  }, refs);
15
14
  }
@@ -5,6 +5,7 @@
5
5
  * @see https://github.com/radix-ui/primitives/blob/17ffcb7aaa42cbd36b3c210ba86d7d73d218e5be/packages/react/polymorphic/src/polymorphic.ts
6
6
  */
7
7
  import * as React from 'react';
8
+ import type { JSX } from 'react';
8
9
  import type { SlotMarker } from './types/Slots';
9
10
  type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
10
11
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"polymorphic.d.ts","sourceRoot":"","sources":["../../src/utils/polymorphic.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AAK7C,KAAK,KAAK,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAA;AAEtD;;GAEG;AACH,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,mBAAmB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;AAEvE;;GAEG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,mBAAmB,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;AAElF,KAAK,yBAAyB,CAAC,CAAC,EAAE,QAAQ,IAAI,KAAK,CAAC,yBAAyB,CAC3E,KAAK,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,QAAQ,GAAG;IAAC,EAAE,CAAC,EAAE,CAAC,CAAA;CAAC,CAAC,CACjG,CAAA;AAMD,UAAU,mBAAmB,CAC3B,sBAAsB,EACtB,QAAQ,GAAG,EAAE,CAKb,SAAQ,yBAAyB,CAAC,sBAAsB,EAAE,QAAQ,CAAC,EACjE,UAAU;IACZ;;;;;;;OAOG;IACH,CAAC,EAAE,GAAG,sBAAsB,EAC1B,KAAK,EAAE,EAAE,SAAS,EAAE,GAChB;QAAC,EAAE,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAA;KAAC,GACjC,EAAE,SAAS,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GACrC,KAAK,CAAC,CAAC,EAAE,QAAQ,GAAG;QAAC,EAAE,EAAE,EAAE,CAAA;KAAC,CAAC,GAC7B,EAAE,SAAS,MAAM,GAAG,CAAC,iBAAiB,GACpC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,QAAQ,GAAG;QAAC,EAAE,EAAE,EAAE,CAAA;KAAC,CAAC,GACrD,KAAK,GACZ,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;CAC7B;AAED,YAAY,EAAC,mBAAmB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAC,CAAA"}
1
+ {"version":3,"file":"polymorphic.d.ts","sourceRoot":"","sources":["../../src/utils/polymorphic.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AAK7C,KAAK,KAAK,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAA;AAEtD;;GAEG;AACH,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,mBAAmB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;AAEvE;;GAEG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,mBAAmB,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;AAElF,KAAK,yBAAyB,CAAC,CAAC,EAAE,QAAQ,IAAI,KAAK,CAAC,yBAAyB,CAC3E,KAAK,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,QAAQ,GAAG;IAAC,EAAE,CAAC,EAAE,CAAC,CAAA;CAAC,CAAC,CACjG,CAAA;AAMD,UAAU,mBAAmB,CAC3B,sBAAsB,EACtB,QAAQ,GAAG,EAAE,CAKb,SAAQ,yBAAyB,CAAC,sBAAsB,EAAE,QAAQ,CAAC,EACjE,UAAU;IACZ;;;;;;;OAOG;IACH,CAAC,EAAE,GAAG,sBAAsB,EAC1B,KAAK,EAAE,EAAE,SAAS,EAAE,GAChB;QAAC,EAAE,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAA;KAAC,GACjC,EAAE,SAAS,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GACrC,KAAK,CAAC,CAAC,EAAE,QAAQ,GAAG;QAAC,EAAE,EAAE,EAAE,CAAA;KAAC,CAAC,GAC7B,EAAE,SAAS,MAAM,GAAG,CAAC,iBAAiB,GACpC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,QAAQ,GAAG;QAAC,EAAE,EAAE,EAAE,CAAA;KAAC,CAAC,GACrD,KAAK,GACZ,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;CAC7B;AAED,YAAY,EAAC,mBAAmB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAC,CAAA"}
@@ -227,7 +227,7 @@
227
227
  },
228
228
  {
229
229
  "id": "components-actionlist-features--child-with-side-effects",
230
- "code": "() => {\n const user = users[0]\n const [selected, setSelected] = React.useState(true)\n const SideEffectDescription = () => {\n // eslint-disable-next-line react-compiler/react-compiler\n const [seconds, setSeconds] = React.useState(0)\n\n // eslint-disable-next-line react-compiler/react-compiler\n React.useEffect(() => {\n const fn = () => setSeconds((s) => s + 1)\n const interval = window.setInterval(fn, 1000)\n return () => window.clearInterval(interval)\n }, [])\n return <>{seconds} seconds passed</>\n }\n return (\n <ActionList\n selectionVariant=\"multiple\"\n role=\"listbox\"\n aria-label=\"Assignees\"\n >\n <ActionList.Item\n selected={selected}\n onSelect={() => setSelected(!selected)}\n role=\"option\"\n >\n <ActionList.LeadingVisual>\n <Avatar src={`https://avatars.githubusercontent.com/${user.login}`} />\n </ActionList.LeadingVisual>\n {user.login}\n <ActionList.Description>\n <SideEffectDescription />\n </ActionList.Description>\n </ActionList.Item>\n </ActionList>\n )\n}"
230
+ "code": "() => {\n const user = users[0]\n const [selected, setSelected] = React.useState(true)\n const SideEffectDescription = () => {\n const [seconds, setSeconds] = React.useState(0)\n React.useEffect(() => {\n const fn = () => setSeconds((s) => s + 1)\n const interval = window.setInterval(fn, 1000)\n return () => window.clearInterval(interval)\n }, [])\n return <>{seconds} seconds passed</>\n }\n return (\n <ActionList\n selectionVariant=\"multiple\"\n role=\"listbox\"\n aria-label=\"Assignees\"\n >\n <ActionList.Item\n selected={selected}\n onSelect={() => setSelected(!selected)}\n role=\"option\"\n >\n <ActionList.LeadingVisual>\n <Avatar src={`https://avatars.githubusercontent.com/${user.login}`} />\n </ActionList.LeadingVisual>\n {user.login}\n <ActionList.Description>\n <SideEffectDescription />\n </ActionList.Description>\n </ActionList.Item>\n </ActionList>\n )\n}"
231
231
  },
232
232
  {
233
233
  "id": "components-actionlist-features--inside-overlay",
@@ -988,7 +988,7 @@
988
988
  },
989
989
  {
990
990
  "id": "components-autocomplete-features--in-a-dialog",
991
- "code": "() => {\n const outerContainerRef = useRef<HTMLDivElement>(null)\n const [mounted, setMounted] = useState(false)\n const [isDialogOpen, setIsDialogOpen] = useState(false)\n useEffect(() => {\n if (outerContainerRef.current instanceof HTMLElement) {\n registerPortalRoot(outerContainerRef.current, 'outerContainer')\n setMounted(true)\n }\n }, [isDialogOpen])\n return (\n <>\n <Button onClick={() => setIsDialogOpen(true)}>Show dialog</Button>\n <Dialog\n aria-label=\"Dialog with autocomplete\"\n id=\"dialog-with-autocomplete\"\n isOpen={isDialogOpen}\n onDismiss={() => setIsDialogOpen(false)}\n >\n <div ref={outerContainerRef}>\n <form className={classes.FormPadding}>\n {mounted ? (\n <FormControl>\n <FormControl.Label id=\"autocompleteLabel\">\n Default label\n </FormControl.Label>\n <Autocomplete>\n <Autocomplete.Input data-testid=\"autocompleteInput\" />\n <Autocomplete.Overlay portalContainerName=\"outerContainer\">\n <Autocomplete.Menu\n items={items}\n selectedItemIds={[]}\n aria-labelledby=\"autocompleteLabel\"\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n </FormControl>\n ) : null}\n </form>\n </div>\n </Dialog>\n <p>\n The Autocomplete.Overlay is portalled to a div inside the Dialog to\n ensure it appears above the dialog in the stacking context.\n </p>\n </>\n )\n}"
991
+ "code": "() => {\n const outerContainerRef = useRef<HTMLDivElement>(null)\n const [mounted, setMounted] = useState(false)\n const [isDialogOpen, setIsDialogOpen] = useState(false)\n useEffect(() => {\n if (outerContainerRef.current instanceof HTMLElement) {\n registerPortalRoot(outerContainerRef.current, 'outerContainer')\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setMounted(true)\n }\n }, [isDialogOpen])\n return (\n <>\n <Button onClick={() => setIsDialogOpen(true)}>Show dialog</Button>\n <Dialog\n aria-label=\"Dialog with autocomplete\"\n id=\"dialog-with-autocomplete\"\n isOpen={isDialogOpen}\n onDismiss={() => setIsDialogOpen(false)}\n >\n <div ref={outerContainerRef}>\n <form className={classes.FormPadding}>\n {mounted ? (\n <FormControl>\n <FormControl.Label id=\"autocompleteLabel\">\n Default label\n </FormControl.Label>\n <Autocomplete>\n <Autocomplete.Input data-testid=\"autocompleteInput\" />\n <Autocomplete.Overlay portalContainerName=\"outerContainer\">\n <Autocomplete.Menu\n items={items}\n selectedItemIds={[]}\n aria-labelledby=\"autocompleteLabel\"\n />\n </Autocomplete.Overlay>\n </Autocomplete>\n </FormControl>\n ) : null}\n </form>\n </div>\n </Dialog>\n <p>\n The Autocomplete.Overlay is portalled to a div inside the Dialog to\n ensure it appears above the dialog in the stacking context.\n </p>\n </>\n )\n}"
992
992
  }
993
993
  ],
994
994
  "importPath": "@primer/react",
@@ -3757,10 +3757,6 @@
3757
3757
  "id": "components-link-features--muted",
3758
3758
  "code": "() => (\n <Link href=\"#\" muted>\n Link\n </Link>\n)"
3759
3759
  },
3760
- {
3761
- "id": "components-link-features--underline",
3762
- "code": "() => (\n <Link href=\"#\" underline>\n Link\n </Link>\n)"
3763
- },
3764
3760
  {
3765
3761
  "id": "components-link-features--inline",
3766
3762
  "code": "() => (\n <div data-a11y-link-underlines=\"true\">\n <Link inline={true} href=\"#\">\n Link\n </Link>\n </div>\n)"
@@ -7434,7 +7430,7 @@
7434
7430
  },
7435
7431
  {
7436
7432
  "id": "components-timeline-features--condensed-items",
7437
- "code": "() => (\n <Timeline>\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n </Timeline>\n)"
7433
+ "code": "() => (\n <Timeline>\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n <Timeline.Break />\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n <Timeline.Item condensed>\n <Timeline.Badge>\n <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n </Timeline.Badge>\n <Timeline.Body>This is a message</Timeline.Body>\n </Timeline.Item>\n </Timeline>\n)"
7438
7434
  },
7439
7435
  {
7440
7436
  "id": "components-timeline-features--timeline-break",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.1.0-rc.430f77ae3",
4
+ "version": "38.1.0-rc.5690a3098",
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",
@@ -51,7 +51,10 @@
51
51
  "type-check": "tsc --noEmit",
52
52
  "type-css-modules": "tcm -p src/**/*.module.css"
53
53
  },
54
- "repository": "primer/react",
54
+ "repository": {
55
+ "type": "git",
56
+ "url": "git+https://github.com/primer/react.git"
57
+ },
55
58
  "keywords": [
56
59
  "react",
57
60
  "components",
@@ -87,19 +90,19 @@
87
90
  "hsluv": "1.0.1",
88
91
  "lodash.isempty": "^4.4.0",
89
92
  "lodash.isobject": "^3.0.2",
90
- "react-compiler-runtime": "^19.1.0-rc.2",
93
+ "react-compiler-runtime": "^1.0.0",
91
94
  "react-intersection-observer": "^9.16.0"
92
95
  },
93
96
  "devDependencies": {
94
97
  "@actions/core": "1.11.1",
95
98
  "@babel/cli": "7.28.3",
96
- "@babel/core": "7.28.4",
97
- "@babel/parser": "7.28.4",
99
+ "@babel/core": "7.28.5",
100
+ "@babel/parser": "7.28.5",
98
101
  "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
99
102
  "@babel/plugin-proposal-optional-chaining": "7.21.0",
100
103
  "@babel/plugin-transform-modules-commonjs": "7.27.1",
101
- "@babel/preset-react": "7.27.1",
102
- "@babel/preset-typescript": "7.27.1",
104
+ "@babel/preset-react": "7.28.5",
105
+ "@babel/preset-typescript": "7.28.5",
103
106
  "@figma/code-connect": "1.3.2",
104
107
  "@primer/css": "^21.5.1",
105
108
  "@primer/doc-gen": "^0.0.1",
@@ -129,7 +132,6 @@
129
132
  "@types/react": "18.3.11",
130
133
  "@types/react-dom": "18.3.1",
131
134
  "@types/react-is": "18.3.1",
132
- "@types/react-test-renderer": "18.3.1",
133
135
  "@vitejs/plugin-react": "^4.3.3",
134
136
  "afterframe": "^1.0.2",
135
137
  "ajv": "8.16.0",
@@ -139,7 +141,7 @@
139
141
  "babel-plugin-dev-expression": "0.2.3",
140
142
  "babel-plugin-macros": "3.1.0",
141
143
  "babel-plugin-open-source": "1.3.4",
142
- "babel-plugin-react-compiler": "^19.1.0-rc.3",
144
+ "babel-plugin-react-compiler": "^1.0.0",
143
145
  "babel-plugin-transform-replace-expressions": "0.2.0",
144
146
  "babel-polyfill": "6.26.0",
145
147
  "chalk": "^5.4.1",
@@ -162,11 +164,10 @@
162
164
  "micromark-extension-frontmatter": "2.0.0",
163
165
  "micromark-extension-mdxjs": "3.0.0",
164
166
  "postcss-preset-primer": "^0.0.0",
165
- "publint": "^0.3.12",
167
+ "publint": "^0.3.15",
166
168
  "react": "18.3.1",
167
169
  "react-dom": "18.3.1",
168
170
  "react-is": "18.3.1",
169
- "react-test-renderer": "18.3.1",
170
171
  "recast": "0.23.7",
171
172
  "rimraf": "5.0.5",
172
173
  "rollup": "4.52.5",
@@ -1,2 +0,0 @@
1
- :where(.prc-Link-Link-85e08){color:var(--fgColor-accent,var(--color-accent-fg));-webkit-text-decoration:none;text-decoration:none;text-underline-offset:.05rem}:where(.prc-Link-Link-85e08):is(button){appearance:none;background-color:transparent;border:0;cursor:pointer;display:inline-block;font-size:inherit;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}:where(.prc-Link-Link-85e08):hover{-webkit-text-decoration:underline;text-decoration:underline}:where(.prc-Link-Link-85e08):where([data-underline=true]),[data-a11y-link-underlines=true] :where(.prc-Link-Link-85e08):where([data-inline=true]){-webkit-text-decoration:underline;text-decoration:underline}:where(.prc-Link-Link-85e08):where([data-muted=true]){color:var(--fgColor-muted,var(--color-fg-muted))}:where(.prc-Link-Link-85e08):where([data-muted=true]):hover{color:var(--fgColor-accent,var(--color-accent-fg));-webkit-text-decoration:none;text-decoration:none}
2
- /*# sourceMappingURL=Link-e01bdaee.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Link/Link.module.css"],"names":[],"mappings":"AAAA,6BACE,kDAA4B,CAC5B,4BAAqB,CAArB,oBAAqB,CACrB,4BAqCF,CAlCE,wCASE,eAAgB,CAFhB,4BAA6B,CAC7B,QAAS,CAHT,cAAe,CAJf,oBAAqB,CAErB,iBAAkB,CADlB,SAAU,CAIV,wBAAiB,CAAjB,gBAAiB,CAFjB,kBAMF,CAEA,mCACE,iCAA0B,CAA1B,yBACF,CAGA,kJAME,iCAA0B,CAA1B,yBACF,CAEA,sDACE,gDAMF,CAJE,4DACE,kDAA4B,CAC5B,4BAAqB,CAArB,oBACF","file":"Link-e01bdaee.css","sourcesContent":[":where(.Link) {\n color: var(--fgColor-accent);\n text-decoration: none;\n text-underline-offset: 0.05rem;\n\n /* Reset for button tags */\n &:is(button) {\n display: inline-block;\n padding: 0;\n font-size: inherit;\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: 0;\n appearance: none;\n }\n\n &:hover {\n text-decoration: underline;\n }\n\n /* Deprecated: but need to support backwards compatibility */\n &:where([data-underline='true']),\n /*\n Inline links (inside a text block), however, should have underline based on accessibility setting set in data-attribute\n Note: setting underline={false} does not override this\n */\n [data-a11y-link-underlines='true'] &:where([data-inline='true']) {\n text-decoration: underline;\n }\n\n &:where([data-muted='true']) {\n color: var(--fgColor-muted);\n\n &:hover {\n color: var(--fgColor-accent);\n text-decoration: none;\n }\n }\n}\n"]}
@@ -1,2 +0,0 @@
1
- .prc-Timeline-Timeline-iQjcc{display:flex;flex-direction:column}.prc-Timeline-Timeline-iQjcc:where([data-clip-sidebar]) .prc-Timeline-TimelineItem-Sd-t-:first-child{padding-top:0}.prc-Timeline-Timeline-iQjcc:where([data-clip-sidebar]) .prc-Timeline-TimelineItem-Sd-t-:last-child{padding-bottom:0}.prc-Timeline-TimelineItem-Sd-t-{display:flex;margin-left:var(--base-size-16,1rem);padding:var(--base-size-16,1rem) 0;position:relative}.prc-Timeline-TimelineItem-Sd-t-:before{background-color:var(--borderColor-muted,var(--color-border-muted));bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:2px}.prc-Timeline-TimelineItem-Sd-t-:where([data-condensed]){padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.prc-Timeline-TimelineItem-Sd-t-:where([data-condensed]):last-child{padding-bottom:var(--base-size-16,1rem)}.prc-Timeline-TimelineItem-Sd-t-:where([data-condensed]) .prc-Timeline-TimelineBadge-BqMiN{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;color:var(--fgColor-muted,var(--color-fg-muted));height:16px;margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}.prc-Timeline-TimelineBadgeWrapper-75vYD{position:relative;z-index:1}.prc-Timeline-TimelineBadge-BqMiN{align-items:center;background-color:var(--timelineBadge-bgColor,var(--color-timeline-badge-bg));border-color:var(--bgColor-default,var(--color-canvas-default));border-radius:50%;border-style:solid;border-width:var(--borderWidth-thick,.125rem);display:flex;flex-shrink:0;height:32px;justify-content:center;margin-left:-15px;margin-right:var(--base-size-8,.5rem);overflow:hidden;width:32px}.prc-Timeline-TimelineBadge-BqMiN,.prc-Timeline-TimelineBody-WWZY0{color:var(--fgColor-muted,var(--color-fg-muted))}.prc-Timeline-TimelineBody-WWZY0{flex:auto;font-size:var(--text-body-size-medium,.875rem);margin-top:var(--base-size-4,.25rem);max-width:100%;min-width:0}.prc-Timeline-TimelineBreak-dPnDJ{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;border-top:var(--borderWidth-thicker,.25rem) solid var(--borderColor-default,var(--color-border-default));height:var(--base-size-24,1.5rem);margin:0;margin-bottom:calc(var(--base-size-16,1rem)*-1);margin-left:0;position:relative;z-index:1}
2
- /*# sourceMappingURL=Timeline-e8e88a13.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Timeline/Timeline.module.css"],"names":[],"mappings":"AAAA,6BACE,YAAa,CACb,qBAWF,CARI,qGACE,aACF,CAEA,oGACE,gBACF,CAIJ,iCAEE,YAAa,CAEb,oCAAgC,CADhC,kCAA8B,CAF9B,iBAkCF,CA7BE,wCASE,mEAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,SAIF,CAEA,yDAEE,gBAAiB,CADjB,qCAeF,CAZE,oEACE,uCACF,CAEA,2FAKE,mEAAwC,CACxC,QAAS,CAFT,gDAA2B,CAH3B,WAAY,CAEZ,sCAAiC,CADjC,mCAKF,CAIJ,yCACE,iBAAkB,CAClB,SACF,CAEA,kCAkBE,kBAAmB,CANnB,4EAA8C,CAE9C,+DAAoC,CAGpC,iBAAkB,CAFlB,kBAAmB,CACnB,6CAAsC,CAftC,YAAa,CAMb,aAAc,CAJd,WAAY,CAgBZ,sBAAuB,CAbvB,iBAAkB,CAFlB,qCAAgC,CAIhC,eAAgB,CANhB,UAkBF,CAEA,mEAbE,gDAoBF,CAPA,iCAME,SAAU,CAFV,8CAAuC,CADvC,oCAA8B,CAD9B,cAAe,CADf,WAMF,CAEA,kCAOE,mEAAwC,CACxC,QAAS,CACT,yGAAuE,CANvE,iCAA2B,CAC3B,QAAS,CACT,+CAA6C,CAC7C,aAAc,CALd,iBAAkB,CAClB,SAQF","file":"Timeline-e8e88a13.css","sourcesContent":[".Timeline {\n display: flex;\n flex-direction: column;\n\n &:where([data-clip-sidebar]) {\n .TimelineItem:first-child {\n padding-top: 0;\n }\n\n .TimelineItem:last-child {\n padding-bottom: 0;\n }\n }\n}\n\n.TimelineItem {\n position: relative;\n display: flex;\n padding: var(--base-size-16) 0;\n margin-left: var(--base-size-16);\n\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n display: block;\n width: 2px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-muted);\n }\n\n &:where([data-condensed]) {\n padding-top: var(--base-size-4);\n padding-bottom: 0;\n\n &:last-child {\n padding-bottom: var(--base-size-16);\n }\n\n .TimelineBadge {\n height: 16px;\n margin-top: var(--base-size-8);\n margin-bottom: var(--base-size-8);\n color: var(--fgColor-muted);\n background-color: var(--bgColor-default);\n border: 0;\n }\n }\n}\n\n.TimelineBadgeWrapper {\n position: relative;\n z-index: 1;\n}\n\n.TimelineBadge {\n display: flex;\n width: 32px;\n height: 32px;\n margin-right: var(--base-size-8);\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -15px;\n flex-shrink: 0;\n overflow: hidden;\n color: var(--fgColor-muted);\n\n /* TODOl not quite sure if this is the correct migration for this line */\n background-color: var(--timelineBadge-bgColor);\n /* stylelint-disable-next-line primer/colors */\n border-color: var(--bgColor-default);\n border-style: solid;\n border-width: var(--borderWidth-thick);\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n}\n\n.TimelineBody {\n min-width: 0;\n max-width: 100%;\n margin-top: var(--base-size-4);\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex: auto;\n}\n\n.TimelineBreak {\n position: relative;\n z-index: 1;\n height: var(--base-size-24);\n margin: 0;\n margin-bottom: calc(-1 * var(--base-size-16));\n margin-left: 0;\n background-color: var(--bgColor-default);\n border: 0;\n border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n"]}