@primer/components 31.2.0-rc.5ccefd7d → 31.2.0-rc.b718ff50

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 (43) hide show
  1. package/CHANGELOG.md +3 -1
  2. package/dist/browser.esm.js +178 -178
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +179 -179
  5. package/dist/browser.umd.js.map +1 -1
  6. package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +1 -3
  7. package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +1 -1
  8. package/lib/Overlay.js +3 -1
  9. package/lib/Portal/Portal.js +3 -2
  10. package/lib/__tests__/AnchoredOverlay.test.js +4 -2
  11. package/lib/__tests__/TextInputWithTokens.test.js +1 -10
  12. package/lib/hooks/useAnchoredPosition.js +3 -2
  13. package/lib/hooks/useCombinedRefs.d.ts +2 -2
  14. package/lib/hooks/useCombinedRefs.js +4 -6
  15. package/lib/hooks/useResizeObserver.js +2 -2
  16. package/lib/stories/Token.stories.js +19 -2
  17. package/lib/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  18. package/lib/utils/useIsomorphicLayoutEffect.js +12 -0
  19. package/lib-esm/Overlay.js +2 -1
  20. package/lib-esm/Portal/Portal.js +2 -1
  21. package/lib-esm/__tests__/AnchoredOverlay.test.js +4 -2
  22. package/lib-esm/__tests__/TextInputWithTokens.test.js +1 -10
  23. package/lib-esm/hooks/useAnchoredPosition.js +2 -1
  24. package/lib-esm/hooks/useCombinedRefs.d.ts +2 -2
  25. package/lib-esm/hooks/useCombinedRefs.js +3 -2
  26. package/lib-esm/hooks/useResizeObserver.js +2 -2
  27. package/lib-esm/stories/Token.stories.js +14 -1
  28. package/lib-esm/utils/useIsomorphicLayoutEffect.d.ts +3 -0
  29. package/lib-esm/utils/useIsomorphicLayoutEffect.js +3 -0
  30. package/migrating.md +1 -1
  31. package/package.json +2 -2
  32. package/script/build +2 -0
  33. package/src/Overlay.tsx +2 -1
  34. package/src/Portal/Portal.tsx +2 -1
  35. package/src/__tests__/AnchoredOverlay.test.tsx +2 -2
  36. package/src/__tests__/TextInputWithTokens.test.tsx +0 -10
  37. package/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +35 -135
  38. package/src/hooks/useAnchoredPosition.ts +2 -1
  39. package/src/hooks/useCombinedRefs.ts +3 -3
  40. package/src/hooks/useResizeObserver.ts +2 -2
  41. package/src/stories/Token.stories.tsx +12 -1
  42. package/src/utils/useIsomorphicLayoutEffect.ts +10 -0
  43. 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/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 () => {
package/src/stories/Token.stories.tsx CHANGED
@@ -7,6 +7,7 @@ import {BaseStyles, ThemeProvider} from '..'
7
7
  import Box from '../Box'
8
8
  import Token, {TokenProps} from '../Token/Token'
9
9
  import Text from '../Text'
10
+ import {GitBranchIcon} from '@primer/octicons-react'
10
11
 
11
12
  export default {
12
13
  title: 'Tokens/Default',
@@ -29,7 +30,7 @@ export default {
29
30
  ]
30
31
  } as Meta
31
32
 
32
- const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove']
33
+ const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove', 'leadingVisual']
33
34
 
34
35
  const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) => (
35
36
  <Box
@@ -94,6 +95,16 @@ export const Interactive = (args: Omit<TokenProps, 'ref' | 'text'>) => {
94
95
  }
95
96
  Interactive.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']}}
96
97
 
98
+ export const WithLeadingVisual = (args: Omit<TokenProps, 'ref'>) => {
99
+ return (
100
+ <ExampleCollectionContainer>
101
+ <Token {...args} leadingVisual={() => <GitBranchIcon />} />
102
+ </ExampleCollectionContainer>
103
+ )
104
+ }
105
+ WithLeadingVisual.storyName = 'with leadingVisual'
106
+ WithLeadingVisual.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton']}}
107
+
97
108
  export const WithOnRemoveFn = (args: Omit<TokenProps, 'ref'>) => {
98
109
  return (
99
110
  <ExampleCollectionContainer>
package/src/utils/useIsomorphicLayoutEffect.ts ADDED
@@ -0,0 +1,10 @@
1
+ import {useEffect, useLayoutEffect} from 'react'
2
+
3
+ const useIsomorphicLayoutEffect =
4
+ typeof window !== 'undefined' &&
5
+ typeof window.document !== 'undefined' &&
6
+ typeof window.document.createElement !== 'undefined'
7
+ ? useLayoutEffect
8
+ : useEffect
9
+
10
+ export default useIsomorphicLayoutEffect