@primer/components 31.0.2-rc.c7dafefb → 31.2.0-rc.25d7c83f

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 (230) hide show
  1. package/.storybook/main.js +7 -9
  2. package/.storybook/preview.js +5 -1
  3. package/CHANGELOG.md +23 -1
  4. package/dist/browser.esm.js +623 -620
  5. package/dist/browser.esm.js.map +1 -1
  6. package/dist/browser.umd.js +164 -161
  7. package/dist/browser.umd.js.map +1 -1
  8. package/docs/content/ActionList2.mdx +354 -0
  9. package/docs/content/FilterList.md +2 -2
  10. package/docs/content/TextInputWithTokens.mdx +114 -0
  11. package/docs/content/getting-started.md +1 -1
  12. package/docs/content/theming.md +23 -0
  13. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +1 -3
  14. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +1 -1
  15. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +17 -0
  16. package/lib/ActionList/Header.js +1 -1
  17. package/lib/ActionList2/Description.d.ts +12 -0
  18. package/lib/ActionList2/Description.js +53 -0
  19. package/lib/ActionList2/Divider.d.ts +5 -0
  20. package/lib/ActionList2/Divider.js +35 -0
  21. package/lib/ActionList2/Group.d.ts +11 -0
  22. package/lib/ActionList2/Group.js +57 -0
  23. package/lib/ActionList2/Header.d.ts +26 -0
  24. package/lib/ActionList2/Header.js +55 -0
  25. package/lib/ActionList2/Item.d.ts +63 -0
  26. package/lib/ActionList2/Item.js +234 -0
  27. package/lib/ActionList2/LinkItem.d.ts +17 -0
  28. package/lib/ActionList2/LinkItem.js +57 -0
  29. package/lib/ActionList2/List.d.ts +26 -0
  30. package/lib/ActionList2/List.js +59 -0
  31. package/lib/ActionList2/Selection.d.ts +5 -0
  32. package/lib/ActionList2/Selection.js +70 -0
  33. package/lib/ActionList2/Visuals.d.ts +9 -0
  34. package/lib/ActionList2/Visuals.js +90 -0
  35. package/lib/ActionList2/index.d.ts +36 -0
  36. package/lib/ActionList2/index.js +47 -0
  37. package/lib/Autocomplete/Autocomplete.d.ts +4 -4
  38. package/lib/Autocomplete/AutocompleteInput.d.ts +4 -4
  39. package/lib/Button/Button.d.ts +5 -5
  40. package/lib/Button/ButtonBase.d.ts +1 -1
  41. package/lib/Button/ButtonClose.d.ts +3 -3
  42. package/lib/Button/ButtonDanger.d.ts +5 -5
  43. package/lib/Button/ButtonInvisible.d.ts +5 -5
  44. package/lib/Button/ButtonOutline.d.ts +5 -5
  45. package/lib/Button/ButtonPrimary.d.ts +5 -5
  46. package/lib/CircleBadge.d.ts +2 -2
  47. package/lib/CircleOcticon.d.ts +4 -4
  48. package/lib/Dialog.d.ts +4 -4
  49. package/lib/Dropdown.d.ts +16 -16
  50. package/lib/DropdownMenu/DropdownButton.d.ts +6 -6
  51. package/lib/FilterList.d.ts +3 -3
  52. package/lib/Flash.d.ts +1 -1
  53. package/lib/Label.d.ts +1 -1
  54. package/lib/Overlay.js +3 -1
  55. package/lib/Portal/Portal.js +3 -2
  56. package/lib/Position.d.ts +4 -4
  57. package/lib/ProgressBar.d.ts +1 -1
  58. package/lib/SelectMenu/SelectMenu.d.ts +24 -24
  59. package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
  60. package/lib/TextInputWithTokens.d.ts +8 -4
  61. package/lib/TextInputWithTokens.js +61 -8
  62. package/lib/Timeline.d.ts +4 -4
  63. package/lib/Token/AvatarToken.d.ts +1 -1
  64. package/lib/Token/IssueLabelToken.d.ts +1 -1
  65. package/lib/Token/Token.d.ts +1 -1
  66. package/lib/_TextInputWrapper.d.ts +1 -1
  67. package/lib/_TextInputWrapper.js +2 -2
  68. package/lib/__tests__/ActionList2.test.d.ts +1 -0
  69. package/lib/__tests__/ActionList2.test.js +53 -0
  70. package/lib/__tests__/AnchoredOverlay.test.js +4 -2
  71. package/lib/__tests__/KeyPaths.types.test.d.ts +11 -0
  72. package/lib/__tests__/KeyPaths.types.test.js +10 -0
  73. package/lib/__tests__/TextInputWithTokens.test.js +138 -7
  74. package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
  75. package/lib/__tests__/utils/createSlots.test.js +75 -0
  76. package/lib/hooks/useAnchoredPosition.js +3 -2
  77. package/lib/hooks/useCombinedRefs.d.ts +2 -2
  78. package/lib/hooks/useCombinedRefs.js +4 -6
  79. package/lib/hooks/useResizeObserver.js +2 -2
  80. package/lib/stories/ActionList2.stories.js +907 -0
  81. package/lib/stories/TextInput.stories.js +144 -0
  82. package/lib/stories/TextInputWithTokens.stories.js +18 -1
  83. package/lib/stories/Token.stories.js +19 -2
  84. package/lib/sx.d.ts +10 -2
  85. package/lib/sx.js +8 -0
  86. package/lib/theme-preval.js +81 -2
  87. package/lib/theme.d.ts +78 -0
  88. package/lib/theme.js +3 -1
  89. package/lib/unreleased.d.ts +7 -0
  90. package/lib/unreleased.js +18 -0
  91. package/lib/utils/create-slots.d.ts +17 -0
  92. package/lib/utils/create-slots.js +105 -0
  93. package/lib/utils/testing.d.ts +14 -1
  94. package/lib/utils/types/KeyPaths.d.ts +3 -0
  95. package/lib/utils/types/KeyPaths.js +1 -0
  96. package/lib/utils/use-force-update.d.ts +1 -0
  97. package/lib/utils/use-force-update.js +19 -0
  98. package/lib/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  99. package/lib/utils/useIsomorphicLayoutEffect.js +12 -0
  100. package/lib-esm/ActionList/Header.js +1 -1
  101. package/lib-esm/ActionList2/Description.d.ts +12 -0
  102. package/lib-esm/ActionList2/Description.js +37 -0
  103. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  104. package/lib-esm/ActionList2/Divider.js +23 -0
  105. package/lib-esm/ActionList2/Group.d.ts +11 -0
  106. package/lib-esm/ActionList2/Group.js +40 -0
  107. package/lib-esm/ActionList2/Header.d.ts +26 -0
  108. package/lib-esm/ActionList2/Header.js +44 -0
  109. package/lib-esm/ActionList2/Item.d.ts +63 -0
  110. package/lib-esm/ActionList2/Item.js +201 -0
  111. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  112. package/lib-esm/ActionList2/LinkItem.js +43 -0
  113. package/lib-esm/ActionList2/List.d.ts +26 -0
  114. package/lib-esm/ActionList2/List.js +37 -0
  115. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  116. package/lib-esm/ActionList2/Selection.js +52 -0
  117. package/lib-esm/ActionList2/Visuals.d.ts +9 -0
  118. package/lib-esm/ActionList2/Visuals.js +68 -0
  119. package/lib-esm/ActionList2/index.d.ts +36 -0
  120. package/lib-esm/ActionList2/index.js +33 -0
  121. package/lib-esm/Autocomplete/Autocomplete.d.ts +4 -4
  122. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +4 -4
  123. package/lib-esm/Button/Button.d.ts +5 -5
  124. package/lib-esm/Button/ButtonBase.d.ts +1 -1
  125. package/lib-esm/Button/ButtonClose.d.ts +3 -3
  126. package/lib-esm/Button/ButtonDanger.d.ts +5 -5
  127. package/lib-esm/Button/ButtonInvisible.d.ts +5 -5
  128. package/lib-esm/Button/ButtonOutline.d.ts +5 -5
  129. package/lib-esm/Button/ButtonPrimary.d.ts +5 -5
  130. package/lib-esm/CircleBadge.d.ts +2 -2
  131. package/lib-esm/CircleOcticon.d.ts +4 -4
  132. package/lib-esm/Dialog.d.ts +4 -4
  133. package/lib-esm/Dropdown.d.ts +16 -16
  134. package/lib-esm/DropdownMenu/DropdownButton.d.ts +6 -6
  135. package/lib-esm/FilterList.d.ts +3 -3
  136. package/lib-esm/Flash.d.ts +1 -1
  137. package/lib-esm/Label.d.ts +1 -1
  138. package/lib-esm/Overlay.js +2 -1
  139. package/lib-esm/Portal/Portal.js +2 -1
  140. package/lib-esm/Position.d.ts +4 -4
  141. package/lib-esm/ProgressBar.d.ts +1 -1
  142. package/lib-esm/SelectMenu/SelectMenu.d.ts +24 -24
  143. package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
  144. package/lib-esm/TextInputWithTokens.d.ts +8 -4
  145. package/lib-esm/TextInputWithTokens.js +60 -8
  146. package/lib-esm/Timeline.d.ts +4 -4
  147. package/lib-esm/Token/AvatarToken.d.ts +1 -1
  148. package/lib-esm/Token/IssueLabelToken.d.ts +1 -1
  149. package/lib-esm/Token/Token.d.ts +1 -1
  150. package/lib-esm/_TextInputWrapper.d.ts +1 -1
  151. package/lib-esm/_TextInputWrapper.js +2 -2
  152. package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
  153. package/lib-esm/__tests__/ActionList2.test.js +41 -0
  154. package/lib-esm/__tests__/AnchoredOverlay.test.js +4 -2
  155. package/lib-esm/__tests__/KeyPaths.types.test.d.ts +11 -0
  156. package/lib-esm/__tests__/KeyPaths.types.test.js +3 -0
  157. package/lib-esm/__tests__/TextInputWithTokens.test.js +132 -8
  158. package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
  159. package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
  160. package/lib-esm/hooks/useAnchoredPosition.js +2 -1
  161. package/lib-esm/hooks/useCombinedRefs.d.ts +2 -2
  162. package/lib-esm/hooks/useCombinedRefs.js +3 -2
  163. package/lib-esm/hooks/useResizeObserver.js +2 -2
  164. package/lib-esm/stories/ActionList2.stories.js +796 -0
  165. package/lib-esm/stories/TextInput.stories.js +117 -0
  166. package/lib-esm/stories/TextInputWithTokens.stories.js +14 -0
  167. package/lib-esm/stories/Token.stories.js +14 -1
  168. package/lib-esm/sx.d.ts +10 -2
  169. package/lib-esm/sx.js +3 -1
  170. package/lib-esm/theme-preval.js +81 -2
  171. package/lib-esm/theme.d.ts +78 -0
  172. package/lib-esm/theme.js +2 -1
  173. package/lib-esm/unreleased.d.ts +7 -0
  174. package/lib-esm/unreleased.js +8 -0
  175. package/lib-esm/utils/create-slots.d.ts +17 -0
  176. package/lib-esm/utils/create-slots.js +84 -0
  177. package/lib-esm/utils/testing.d.ts +14 -1
  178. package/lib-esm/utils/types/KeyPaths.d.ts +3 -0
  179. package/lib-esm/utils/types/KeyPaths.js +1 -0
  180. package/lib-esm/utils/use-force-update.d.ts +1 -0
  181. package/lib-esm/utils/use-force-update.js +6 -0
  182. package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  183. package/lib-esm/utils/useIsomorphicLayoutEffect.js +3 -0
  184. package/migrating.md +1 -1
  185. package/package-lock.json +38098 -45
  186. package/package.json +7 -3
  187. package/script/build +2 -0
  188. package/src/ActionList/Header.tsx +1 -1
  189. package/src/ActionList2/Description.tsx +49 -0
  190. package/src/ActionList2/Divider.tsx +24 -0
  191. package/src/ActionList2/Group.tsx +34 -0
  192. package/src/ActionList2/Header.tsx +58 -0
  193. package/src/ActionList2/Item.tsx +223 -0
  194. package/src/ActionList2/LinkItem.tsx +49 -0
  195. package/src/ActionList2/List.tsx +55 -0
  196. package/src/ActionList2/Selection.tsx +40 -0
  197. package/src/ActionList2/Visuals.tsx +76 -0
  198. package/src/ActionList2/index.ts +39 -0
  199. package/src/Overlay.tsx +2 -1
  200. package/src/Portal/Portal.tsx +2 -1
  201. package/src/TextInputWithTokens.tsx +64 -8
  202. package/src/_TextInputWrapper.tsx +8 -0
  203. package/src/__tests__/ActionList2.test.tsx +47 -0
  204. package/src/__tests__/AnchoredOverlay.test.tsx +2 -2
  205. package/src/__tests__/KeyPaths.types.test.ts +14 -0
  206. package/src/__tests__/TextInputWithTokens.test.tsx +123 -1
  207. package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
  208. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +35 -135
  209. package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +7 -0
  210. package/src/__tests__/__snapshots__/TextInput.test.tsx.snap +6 -0
  211. package/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +463 -0
  212. package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
  213. package/src/__tests__/utils/createSlots.test.tsx +74 -0
  214. package/src/hooks/useAnchoredPosition.ts +2 -1
  215. package/src/hooks/useCombinedRefs.ts +3 -3
  216. package/src/hooks/useResizeObserver.ts +2 -2
  217. package/src/stories/ActionList2.stories.tsx +1290 -0
  218. package/src/stories/Button.stories.tsx +1 -1
  219. package/src/stories/TextInput.stories.tsx +113 -0
  220. package/src/stories/TextInputWithTokens.stories.tsx +9 -0
  221. package/src/stories/Token.stories.tsx +12 -1
  222. package/src/sx.ts +17 -2
  223. package/src/theme-preval.js +1 -0
  224. package/src/theme.ts +86 -0
  225. package/src/unreleased.ts +9 -0
  226. package/src/utils/create-slots.tsx +96 -0
  227. package/src/utils/types/KeyPaths.ts +10 -0
  228. package/src/utils/use-force-update.ts +7 -0
  229. package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
  230. package/stats.html +1 -1
package/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap CHANGED
@@ -36,6 +36,7 @@ Array [
36
36
  border-radius: 6px;
37
37
  outline: none;
38
38
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
39
+ cursor: text;
39
40
  padding: 6px 12px;
40
41
  }
41
42
 
@@ -148,6 +149,7 @@ Array [
148
149
  border-radius: 6px;
149
150
  outline: none;
150
151
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
152
+ cursor: text;
151
153
  padding: 6px 12px;
152
154
  }
153
155
 
@@ -295,6 +297,7 @@ Array [
295
297
  border-radius: 6px;
296
298
  outline: none;
297
299
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
300
+ cursor: text;
298
301
  padding: 6px 12px;
299
302
  }
300
303
 
@@ -1040,6 +1043,7 @@ Array [
1040
1043
  border-radius: 6px;
1041
1044
  outline: none;
1042
1045
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
1046
+ cursor: text;
1043
1047
  padding: 6px 12px;
1044
1048
  }
1045
1049
 
@@ -1708,6 +1712,7 @@ Array [
1708
1712
  border-radius: 6px;
1709
1713
  outline: none;
1710
1714
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
1715
+ cursor: text;
1711
1716
  padding: 6px 12px;
1712
1717
  }
1713
1718
 
@@ -2376,6 +2381,7 @@ Array [
2376
2381
  border-radius: 6px;
2377
2382
  outline: none;
2378
2383
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
2384
+ cursor: text;
2379
2385
  padding: 6px 12px;
2380
2386
  }
2381
2387
 
@@ -3337,6 +3343,7 @@ Array [
3337
3343
  border-radius: 6px;
3338
3344
  outline: none;
3339
3345
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
3346
+ cursor: text;
3340
3347
  padding: 6px 12px;
3341
3348
  }
3342
3349
 
package/src/__tests__/__snapshots__/TextInput.test.tsx.snap CHANGED
@@ -35,6 +35,7 @@ exports[`TextInput renders 1`] = `
35
35
  border-radius: 6px;
36
36
  outline: none;
37
37
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
38
+ cursor: text;
38
39
  padding: 6px 12px;
39
40
  }
40
41
 
@@ -106,6 +107,7 @@ exports[`TextInput renders block 1`] = `
106
107
  border-radius: 6px;
107
108
  outline: none;
108
109
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
110
+ cursor: text;
109
111
  padding: 6px 12px;
110
112
  display: block;
111
113
  width: 100%;
@@ -179,6 +181,7 @@ exports[`TextInput renders consistently 1`] = `
179
181
  border-radius: 6px;
180
182
  outline: none;
181
183
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
184
+ cursor: text;
182
185
  padding: 6px 12px;
183
186
  }
184
187
 
@@ -249,6 +252,7 @@ exports[`TextInput renders large 1`] = `
249
252
  border-radius: 6px;
250
253
  outline: none;
251
254
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
255
+ cursor: text;
252
256
  padding: 6px 12px;
253
257
  padding-left: 8px;
254
258
  padding-right: 8px;
@@ -325,6 +329,7 @@ exports[`TextInput renders small 1`] = `
325
329
  border-radius: 6px;
326
330
  outline: none;
327
331
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
332
+ cursor: text;
328
333
  padding: 6px 12px;
329
334
  min-height: 28px;
330
335
  padding-left: 8px;
@@ -403,6 +408,7 @@ exports[`TextInput should render a password input 1`] = `
403
408
  border-radius: 6px;
404
409
  outline: none;
405
410
  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
411
+ cursor: text;
406
412
  padding: 6px 12px;
407
413
  }
408
414