@primer/components 31.2.0-rc.5ccefd7d → 31.2.0-rc.6afeaa37

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 (143) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/browser.esm.js +622 -620
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +163 -161
  5. package/dist/browser.umd.js.map +1 -1
  6. package/docs/content/ActionList2.mdx +354 -0
  7. package/docs/content/getting-started.md +1 -1
  8. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +1 -3
  9. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +1 -1
  10. package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +17 -0
  11. package/lib/ActionList2/Description.d.ts +12 -0
  12. package/lib/ActionList2/Description.js +53 -0
  13. package/lib/ActionList2/Divider.d.ts +5 -0
  14. package/lib/ActionList2/Divider.js +35 -0
  15. package/lib/ActionList2/Group.d.ts +11 -0
  16. package/lib/ActionList2/Group.js +57 -0
  17. package/lib/ActionList2/Header.d.ts +26 -0
  18. package/lib/ActionList2/Header.js +55 -0
  19. package/lib/ActionList2/Item.d.ts +63 -0
  20. package/lib/ActionList2/Item.js +244 -0
  21. package/lib/ActionList2/LinkItem.d.ts +17 -0
  22. package/lib/ActionList2/LinkItem.js +57 -0
  23. package/lib/ActionList2/List.d.ts +26 -0
  24. package/lib/ActionList2/List.js +59 -0
  25. package/lib/ActionList2/Selection.d.ts +5 -0
  26. package/lib/ActionList2/Selection.js +70 -0
  27. package/lib/ActionList2/Visuals.d.ts +9 -0
  28. package/lib/ActionList2/Visuals.js +90 -0
  29. package/lib/ActionList2/index.d.ts +36 -0
  30. package/lib/ActionList2/index.js +47 -0
  31. package/lib/Overlay.js +3 -1
  32. package/lib/Portal/Portal.js +3 -2
  33. package/lib/_TextInputWrapper.js +2 -2
  34. package/lib/__tests__/ActionList2.test.d.ts +1 -0
  35. package/lib/__tests__/ActionList2.test.js +53 -0
  36. package/lib/__tests__/AnchoredOverlay.test.js +4 -2
  37. package/lib/__tests__/TextInputWithTokens.test.js +1 -10
  38. package/lib/__tests__/utils/createSlots.test.d.ts +1 -0
  39. package/lib/__tests__/utils/createSlots.test.js +75 -0
  40. package/lib/hooks/useAnchoredPosition.js +3 -2
  41. package/lib/hooks/useCombinedRefs.d.ts +2 -2
  42. package/lib/hooks/useCombinedRefs.js +4 -6
  43. package/lib/hooks/useResizeObserver.js +2 -2
  44. package/lib/stories/ActionList2.stories.js +907 -0
  45. package/lib/stories/TextInput.stories.js +144 -0
  46. package/lib/stories/Token.stories.js +19 -2
  47. package/lib/sx.d.ts +2 -0
  48. package/lib/sx.js +8 -0
  49. package/lib/theme-preval.js +81 -2
  50. package/lib/unreleased.d.ts +7 -0
  51. package/lib/unreleased.js +18 -0
  52. package/lib/utils/create-slots.d.ts +17 -0
  53. package/lib/utils/create-slots.js +105 -0
  54. package/lib/utils/testing.d.ts +14 -1
  55. package/lib/utils/use-force-update.d.ts +1 -0
  56. package/lib/utils/use-force-update.js +19 -0
  57. package/lib/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  58. package/lib/utils/useIsomorphicLayoutEffect.js +12 -0
  59. package/lib-esm/ActionList2/Description.d.ts +12 -0
  60. package/lib-esm/ActionList2/Description.js +37 -0
  61. package/lib-esm/ActionList2/Divider.d.ts +5 -0
  62. package/lib-esm/ActionList2/Divider.js +23 -0
  63. package/lib-esm/ActionList2/Group.d.ts +11 -0
  64. package/lib-esm/ActionList2/Group.js +40 -0
  65. package/lib-esm/ActionList2/Header.d.ts +26 -0
  66. package/lib-esm/ActionList2/Header.js +44 -0
  67. package/lib-esm/ActionList2/Item.d.ts +63 -0
  68. package/lib-esm/ActionList2/Item.js +210 -0
  69. package/lib-esm/ActionList2/LinkItem.d.ts +17 -0
  70. package/lib-esm/ActionList2/LinkItem.js +43 -0
  71. package/lib-esm/ActionList2/List.d.ts +26 -0
  72. package/lib-esm/ActionList2/List.js +37 -0
  73. package/lib-esm/ActionList2/Selection.d.ts +5 -0
  74. package/lib-esm/ActionList2/Selection.js +52 -0
  75. package/lib-esm/ActionList2/Visuals.d.ts +9 -0
  76. package/lib-esm/ActionList2/Visuals.js +68 -0
  77. package/lib-esm/ActionList2/index.d.ts +36 -0
  78. package/lib-esm/ActionList2/index.js +33 -0
  79. package/lib-esm/Overlay.js +2 -1
  80. package/lib-esm/Portal/Portal.js +2 -1
  81. package/lib-esm/_TextInputWrapper.js +2 -2
  82. package/lib-esm/__tests__/ActionList2.test.d.ts +1 -0
  83. package/lib-esm/__tests__/ActionList2.test.js +41 -0
  84. package/lib-esm/__tests__/AnchoredOverlay.test.js +4 -2
  85. package/lib-esm/__tests__/TextInputWithTokens.test.js +1 -10
  86. package/lib-esm/__tests__/utils/createSlots.test.d.ts +1 -0
  87. package/lib-esm/__tests__/utils/createSlots.test.js +67 -0
  88. package/lib-esm/hooks/useAnchoredPosition.js +2 -1
  89. package/lib-esm/hooks/useCombinedRefs.d.ts +2 -2
  90. package/lib-esm/hooks/useCombinedRefs.js +3 -2
  91. package/lib-esm/hooks/useResizeObserver.js +2 -2
  92. package/lib-esm/stories/ActionList2.stories.js +796 -0
  93. package/lib-esm/stories/TextInput.stories.js +117 -0
  94. package/lib-esm/stories/Token.stories.js +14 -1
  95. package/lib-esm/sx.d.ts +2 -0
  96. package/lib-esm/sx.js +3 -1
  97. package/lib-esm/theme-preval.js +81 -2
  98. package/lib-esm/unreleased.d.ts +7 -0
  99. package/lib-esm/unreleased.js +8 -0
  100. package/lib-esm/utils/create-slots.d.ts +17 -0
  101. package/lib-esm/utils/create-slots.js +84 -0
  102. package/lib-esm/utils/testing.d.ts +14 -1
  103. package/lib-esm/utils/use-force-update.d.ts +1 -0
  104. package/lib-esm/utils/use-force-update.js +6 -0
  105. package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  106. package/lib-esm/utils/useIsomorphicLayoutEffect.js +3 -0
  107. package/migrating.md +1 -1
  108. package/package-lock.json +146 -7
  109. package/package.json +5 -3
  110. package/script/build +2 -0
  111. package/src/ActionList2/Description.tsx +49 -0
  112. package/src/ActionList2/Divider.tsx +24 -0
  113. package/src/ActionList2/Group.tsx +34 -0
  114. package/src/ActionList2/Header.tsx +58 -0
  115. package/src/ActionList2/Item.tsx +245 -0
  116. package/src/ActionList2/LinkItem.tsx +49 -0
  117. package/src/ActionList2/List.tsx +55 -0
  118. package/src/ActionList2/Selection.tsx +40 -0
  119. package/src/ActionList2/Visuals.tsx +76 -0
  120. package/src/ActionList2/index.ts +39 -0
  121. package/src/Overlay.tsx +2 -1
  122. package/src/Portal/Portal.tsx +2 -1
  123. package/src/_TextInputWrapper.tsx +7 -0
  124. package/src/__tests__/ActionList2.test.tsx +47 -0
  125. package/src/__tests__/AnchoredOverlay.test.tsx +2 -2
  126. package/src/__tests__/TextInputWithTokens.test.tsx +0 -10
  127. package/src/__tests__/__snapshots__/ActionList2.test.tsx.snap +14 -0
  128. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +35 -135
  129. package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap +55 -0
  130. package/src/__tests__/utils/createSlots.test.tsx +74 -0
  131. package/src/hooks/useAnchoredPosition.ts +2 -1
  132. package/src/hooks/useCombinedRefs.ts +3 -3
  133. package/src/hooks/useResizeObserver.ts +2 -2
  134. package/src/stories/ActionList2.stories.tsx +1288 -0
  135. package/src/stories/TextInput.stories.tsx +113 -0
  136. package/src/stories/Token.stories.tsx +12 -1
  137. package/src/sx.ts +3 -0
  138. package/src/theme-preval.js +1 -0
  139. package/src/unreleased.ts +9 -0
  140. package/src/utils/create-slots.tsx +96 -0
  141. package/src/utils/use-force-update.ts +7 -0
  142. package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
  143. package/stats.html +1 -1
package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap CHANGED
@@ -94,9 +94,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
94
94
  `;
95
95
 
96
96
  exports[`AnchoredOverlay should render consistently when open 1`] = `
97
- Object {
98
- "asFragment": [Function],
99
- "baseElement": .c0 {
97
+ .c0 {
100
98
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
101
99
  line-height: 1.5;
102
100
  color: #24292f;
@@ -187,146 +185,48 @@ Object {
187
185
  outline: none;
188
186
  }
189
187
 
190
- <body>
191
- <div>
192
- <div
193
- class="c0"
194
- color="fg.default"
195
- data-portal-root="true"
196
- font-family="normal"
197
- >
198
- <button
199
- aria-haspopup="true"
200
- aria-labelledby="react-aria-1"
201
- class="c1"
202
- id="react-aria-1"
203
- tabindex="0"
204
- >
205
- Anchor Button
206
- </button>
207
- <div
208
- id="__primerPortalRoot__"
209
- style="position: absolute; top: 0px; left: 0px;"
210
- >
211
- <div
212
- style="position: relative; z-index: 1;"
213
- >
214
- <div
215
- class="c2"
216
- data-focus-trap="active"
217
- height="auto"
218
- role="none"
219
- style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
220
- width="auto"
221
- >
222
- <button
223
- class="focus-visible"
224
- data-focus-visible-added=""
225
- tabindex="0"
226
- type="button"
227
- >
228
- Focusable Child
229
- </button>
230
- </div>
231
- </div>
232
- </div>
233
- </div>
234
- </div>
235
- </body>,
236
- "container": <div>
188
+ <div>
189
+ <div
190
+ class="c0"
191
+ color="fg.default"
192
+ data-portal-root="true"
193
+ font-family="normal"
194
+ >
195
+ <button
196
+ aria-haspopup="true"
197
+ aria-labelledby="react-aria-1"
198
+ class="c1"
199
+ id="react-aria-1"
200
+ tabindex="0"
201
+ >
202
+ Anchor Button
203
+ </button>
237
204
  <div
238
- class="BaseStyles__Base-qvuaww-0 ihFkAM"
239
- color="fg.default"
240
- data-portal-root="true"
241
- font-family="normal"
205
+ id="__primerPortalRoot__"
206
+ style="position: absolute; top: 0px; left: 0px;"
242
207
  >
243
- <button
244
- aria-haspopup="true"
245
- aria-labelledby="react-aria-1"
246
- class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 iRqJHc"
247
- id="react-aria-1"
248
- tabindex="0"
249
- >
250
- Anchor Button
251
- </button>
252
208
  <div
253
- id="__primerPortalRoot__"
254
- style="position: absolute; top: 0px; left: 0px;"
209
+ style="position: relative; z-index: 1;"
255
210
  >
256
211
  <div
257
- style="position: relative; z-index: 1;"
212
+ class="c2"
213
+ data-focus-trap="active"
214
+ height="auto"
215
+ role="none"
216
+ style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
217
+ width="auto"
258
218
  >
259
- <div
260
- class="Overlay__StyledOverlay-jhwkzw-0 jFTKwM"
261
- data-focus-trap="active"
262
- height="auto"
263
- role="none"
264
- style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
265
- width="auto"
219
+ <button
220
+ class="focus-visible"
221
+ data-focus-visible-added=""
222
+ tabindex="0"
223
+ type="button"
266
224
  >
267
- <button
268
- class="focus-visible"
269
- data-focus-visible-added=""
270
- tabindex="0"
271
- type="button"
272
- >
273
- Focusable Child
274
- </button>
275
- </div>
225
+ Focusable Child
226
+ </button>
276
227
  </div>
277
228
  </div>
278
229
  </div>
279
- </div>,
280
- "debug": [Function],
281
- "findAllByAltText": [Function],
282
- "findAllByDisplayValue": [Function],
283
- "findAllByLabelText": [Function],
284
- "findAllByPlaceholderText": [Function],
285
- "findAllByRole": [Function],
286
- "findAllByTestId": [Function],
287
- "findAllByText": [Function],
288
- "findAllByTitle": [Function],
289
- "findByAltText": [Function],
290
- "findByDisplayValue": [Function],
291
- "findByLabelText": [Function],
292
- "findByPlaceholderText": [Function],
293
- "findByRole": [Function],
294
- "findByTestId": [Function],
295
- "findByText": [Function],
296
- "findByTitle": [Function],
297
- "getAllByAltText": [Function],
298
- "getAllByDisplayValue": [Function],
299
- "getAllByLabelText": [Function],
300
- "getAllByPlaceholderText": [Function],
301
- "getAllByRole": [Function],
302
- "getAllByTestId": [Function],
303
- "getAllByText": [Function],
304
- "getAllByTitle": [Function],
305
- "getByAltText": [Function],
306
- "getByDisplayValue": [Function],
307
- "getByLabelText": [Function],
308
- "getByPlaceholderText": [Function],
309
- "getByRole": [Function],
310
- "getByTestId": [Function],
311
- "getByText": [Function],
312
- "getByTitle": [Function],
313
- "queryAllByAltText": [Function],
314
- "queryAllByDisplayValue": [Function],
315
- "queryAllByLabelText": [Function],
316
- "queryAllByPlaceholderText": [Function],
317
- "queryAllByRole": [Function],
318
- "queryAllByTestId": [Function],
319
- "queryAllByText": [Function],
320
- "queryAllByTitle": [Function],
321
- "queryByAltText": [Function],
322
- "queryByDisplayValue": [Function],
323
- "queryByLabelText": [Function],
324
- "queryByPlaceholderText": [Function],
325
- "queryByRole": [Function],
326
- "queryByTestId": [Function],
327
- "queryByText": [Function],
328
- "queryByTitle": [Function],
329
- "rerender": [Function],
330
- "unmount": [Function],
331
- }
230
+ </div>
231
+ </div>
332
232
  `;
package/src/__tests__/utils/__snapshots__/createSlots.test.tsx.snap ADDED
@@ -0,0 +1,55 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`ComponentWithSlots renders all slots 1`] = `
4
+ <div>
5
+ <div>
6
+ first
7
+ <span>
8
+ free form
9
+
10
+ second
11
+
12
+ </span>
13
+ </div>
14
+ </div>
15
+ `;
16
+
17
+ exports[`ComponentWithSlots renders with context passed to children 1`] = `
18
+ <div>
19
+ <div>
20
+ <span>
21
+ free form
22
+
23
+
24
+ hi
25
+
26
+ third
27
+ </span>
28
+ </div>
29
+ </div>
30
+ `;
31
+
32
+ exports[`ComponentWithSlots renders with just one slot 1`] = `
33
+ <div>
34
+ <div>
35
+ first
36
+ <span>
37
+ free form
38
+
39
+
40
+ </span>
41
+ </div>
42
+ </div>
43
+ `;
44
+
45
+ exports[`ComponentWithSlots renders without any slots 1`] = `
46
+ <div>
47
+ <div>
48
+ <span>
49
+ free form
50
+
51
+
52
+ </span>
53
+ </div>
54
+ </div>
55
+ `;
package/src/__tests__/utils/createSlots.test.tsx ADDED
@@ -0,0 +1,74 @@
1
+ import React from 'react'
2
+ import 'babel-polyfill'
3
+ import {render, waitFor} from '@testing-library/react'
4
+ import createSlots from '../../utils/create-slots'
5
+
6
+ // setup a component with slots
7
+ const {Slots, Slot} = createSlots(['One', 'Two', 'Three'])
8
+ type ContextTypes = {salutation?: string}
9
+
10
+ const ComponentWithSlots: React.FC<ContextTypes> = ({salutation, children}) => {
11
+ return (
12
+ <Slots context={{salutation}}>
13
+ {slots => (
14
+ <div>
15
+ {slots.One}
16
+ <span>
17
+ {children} {slots.Two} {slots.Three}
18
+ </span>
19
+ </div>
20
+ )}
21
+ </Slots>
22
+ )
23
+ }
24
+ const SlotItem1: React.FC = ({children}) => <Slot name="One">{children}</Slot>
25
+ const SlotItem2: React.FC = ({children}) => <Slot name="Two">{children}</Slot>
26
+ const SlotItem3: React.FC = ({children}) => (
27
+ <Slot name="Three">
28
+ {(context: ContextTypes) => (
29
+ <>
30
+ {context.salutation} {children}
31
+ </>
32
+ )}
33
+ </Slot>
34
+ )
35
+
36
+ describe('ComponentWithSlots', () => {
37
+ it('renders all slots', async () => {
38
+ const component = render(
39
+ <ComponentWithSlots>
40
+ <SlotItem1>first</SlotItem1>
41
+ <SlotItem2>second</SlotItem2>
42
+ free form
43
+ </ComponentWithSlots>
44
+ )
45
+
46
+ await waitFor(() => component.getByText('first'))
47
+ expect(component.container).toMatchSnapshot()
48
+ })
49
+
50
+ it('renders without any slots', async () => {
51
+ const component = render(<ComponentWithSlots>free form</ComponentWithSlots>)
52
+ expect(component.container).toMatchSnapshot()
53
+ })
54
+
55
+ it('renders with just one slot', async () => {
56
+ const component = render(
57
+ <ComponentWithSlots>
58
+ <SlotItem1>first</SlotItem1>
59
+ free form
60
+ </ComponentWithSlots>
61
+ )
62
+ expect(component.container).toMatchSnapshot()
63
+ })
64
+
65
+ it('renders with context passed to children', async () => {
66
+ const component = render(
67
+ <ComponentWithSlots salutation="hi">
68
+ <SlotItem3>third</SlotItem3>
69
+ free form
70
+ </ComponentWithSlots>
71
+ )
72
+ expect(component.container).toMatchSnapshot()
73
+ })
74
+ })
package/src/hooks/useAnchoredPosition.ts CHANGED
@@ -2,6 +2,7 @@ import React from 'react'
2
2
  import {PositionSettings, getAnchoredPosition, AnchorPosition} from '../behaviors/anchoredPosition'
3
3
  import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
4
4
  import {useResizeObserver} from './useResizeObserver'
5
+ import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
5
6
 
6
7
  export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
7
8
  floatingElementRef?: React.RefObject<Element>
@@ -41,7 +42,7 @@ export function useAnchoredPosition(
41
42
  [floatingElementRef, anchorElementRef, ...dependencies]
42
43
  )
43
44
 
44
- React.useLayoutEffect(updatePosition, [updatePosition])
45
+ useLayoutEffect(updatePosition, [updatePosition])
45
46
 
46
47
  useResizeObserver(updatePosition)
47
48
 
package/src/hooks/useCombinedRefs.ts CHANGED
@@ -1,4 +1,5 @@
1
- import React, {ForwardedRef, useRef} from 'react'
1
+ import {ForwardedRef, useRef} from 'react'
2
+ import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
2
3
 
3
4
  /**
4
5
  * Creates a ref by combining multiple constituent refs. The ref returned by this hook
@@ -11,7 +12,7 @@ import React, {ForwardedRef, useRef} from 'react'
11
12
  export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]) {
12
13
  const combinedRef = useRef<T | null>(null)
13
14
 
14
- React.useLayoutEffect(() => {
15
+ useLayoutEffect(() => {
15
16
  function setRefs(current: T | null = null) {
16
17
  for (const ref of refs) {
17
18
  if (!ref) {
@@ -32,7 +33,6 @@ export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)
32
33
  // eslint-disable-next-line react-hooks/exhaustive-deps
33
34
  setRefs(combinedRef.current)
34
35
  }
35
-
36
36
  // eslint-disable-next-line react-hooks/exhaustive-deps
37
37
  }, [...refs, combinedRef.current])
38
38
 
package/src/hooks/useResizeObserver.ts CHANGED
@@ -1,7 +1,7 @@
1
- import React from 'react'
1
+ import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
2
2
 
3
3
  export function useResizeObserver(callback: () => void) {
4
- React.useLayoutEffect(() => {
4
+ useLayoutEffect(() => {
5
5
  const observer = new window.ResizeObserver(() => callback())
6
6
  observer.observe(document.documentElement)
7
7
  return () => {