@sanity/ui 0.38.1-next.6 → 0.38.2-next.22

package/src/primitives/radio/__workshop__/plain.tsx

@@ -1,6 +1,5 @@
 import {Flex, Radio} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function PlainStory() {
   const checked = useBoolean('Checked?', false, 'Props')

package/src/primitives/radio/radio.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity} from '../../hooks'
 import {radioBaseStyle, inputElementStyle} from './styles'

package/src/primitives/select/__workshop__/plain.tsx

@@ -1,6 +1,5 @@
 import {Card, Container, Label, Select, Stack} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function PlainStory() {
   const disabled = useBoolean('Disabled', false, 'Props')

package/src/primitives/select/__workshop__/readOnly.tsx

@@ -1,5 +1,4 @@
 import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-import React from 'react'
 
 export default function ReadOnlyStory() {
   return (

package/src/primitives/select/select.tsx

@@ -1,5 +1,5 @@
 import {SelectIcon} from '@sanity/icons'
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {Box} from '../box'

package/src/primitives/spinner/__workshop__/Props.tsx

@@ -1,6 +1,5 @@
 import {Flex, Spinner} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function Props() {

package/src/primitives/spinner/spinner.tsx

@@ -1,5 +1,5 @@
 import {SpinnerIcon} from '@sanity/icons'
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled, {keyframes} from 'styled-components'
 import {Text} from '../text'
 

package/src/primitives/stack/__workshop__/plain.tsx

@@ -1,6 +1,5 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PlainStory() {

package/src/primitives/stack/stack.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'

package/src/primitives/switch/__workshop__/example.tsx

@@ -1,5 +1,5 @@
 import {Box, Flex, Switch, Text} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 
 export default function ExampleStory() {
   const [checked, setChecked] = useState<boolean | undefined>(undefined)

package/src/primitives/switch/__workshop__/props.tsx

@@ -1,6 +1,6 @@
 import {Flex, Switch, useTheme} from '@sanity/ui'
 import {useBoolean, useNumber} from '@sanity/ui-workshop'
-import React, {useCallback, useMemo} from 'react'
+import {useCallback, useMemo} from 'react'
 import {ThemeProvider} from 'styled-components'
 
 export default function PropsStory() {

package/src/primitives/switch/switch.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useEffect} from 'react'
+import {forwardRef, useEffect} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef} from '../../hooks'
 import {

package/src/primitives/text/__workshop__/colored.tsx

@@ -1,6 +1,5 @@
 import {Flex, Text, Theme, ThemeColorSpotKey, useTheme} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import styled, {css} from 'styled-components'
 import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
 

package/src/primitives/text/__workshop__/example.tsx

@@ -1,6 +1,5 @@
 import {Card, Container, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {
   WORKSHOP_TEXT_ALIGN_OPTIONS,
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,

package/src/primitives/text/__workshop__/opticalAlignment.tsx

@@ -1,6 +1,5 @@
 import {AddCircleIcon} from '@sanity/icons'
 import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
-import React from 'react'
 
 export default function OpticalAlignment() {
   return (

package/src/primitives/text/text.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {

package/src/primitives/textArea/__workshop__/plain.tsx

@@ -1,6 +1,5 @@
 import {Card, Container, Flex, Stack, Text, TextArea} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {
   WORKSHOP_CARD_TONE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,

package/src/primitives/textArea/textArea.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {

package/src/primitives/textInput/__workshop__/clearButton.tsx

@@ -1,6 +1,6 @@
 import {Box, TextInput} from '@sanity/ui'
 import {useText} from '@sanity/ui-workshop'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 
 export default function ClearButtonStory() {
   const customValidity = useText('Custom validitiy')

package/src/primitives/textInput/__workshop__/customValidity.tsx

@@ -1,6 +1,5 @@
 import {Button, Card, Container, Stack, TextInput} from '@sanity/ui'
 import {useText} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function CustomValidityStory() {
   const customValidity = useText('Custom validity', 'Invalid value', 'Props') || undefined

package/src/primitives/textInput/__workshop__/multipleTones.tsx

@@ -1,5 +1,4 @@
 import {Card, Stack, TextInput} from '@sanity/ui'
-import React from 'react'
 
 export default function MultipleTonesStory() {
   return (

package/src/primitives/textInput/__workshop__/plain.tsx

@@ -2,7 +2,7 @@ import {icons, IconSymbol} from '@sanity/icons'
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {PerfTestProps, useBoolean, usePerfTest, useSelect, useText} from '@sanity/ui-workshop'
 import {fireEvent} from '@testing-library/dom'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,

package/src/primitives/textInput/__workshop__/readOnly.tsx

@@ -1,5 +1,4 @@
 import {TextInput} from '@sanity/ui'
-import React from 'react'
 
 export default function ReadOnlyStory() {
   return <TextInput id="text-input-example" readOnly />

package/src/primitives/textInput/__workshop__/states.tsx

@@ -1,6 +1,5 @@
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function StatesStory() {
   const onChange = useAction('onChange')

package/src/primitives/textInput/__workshop__/tones.tsx

@@ -1,6 +1,5 @@
 import {Box, Card, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function TonesStory() {
   const transparentTone = useBoolean('Transparent', true)

package/src/primitives/textInput/__workshop__/typed.tsx

@@ -1,6 +1,6 @@
 import {Box, Container, TextInput} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function TypedStory() {

package/src/primitives/textInput/textInput.tsx

@@ -1,5 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
-import React, {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
+import {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'

package/src/primitives/tooltip/__workshop__/props.tsx

@@ -1,6 +1,5 @@
 import {Box, Button, Card, Flex, Text, Tooltip} from '@sanity/ui'
 import {useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PropsStory() {

package/src/primitives/tooltip/tooltip.tsx

@@ -1,4 +1,4 @@
-import React, {cloneElement, forwardRef, useCallback, useEffect, useRef, useState} from 'react'
+import {cloneElement, forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import {usePopper} from 'react-popper'
 import styled from 'styled-components'
 import {useArrayProp, useForwardedRef} from '../../hooks'

package/src/primitives/tooltip/tooltipArrow.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 
 const Root = styled.div`

package/src/styles/font/responsiveFont.ts

@@ -48,6 +48,19 @@ export function responsiveFont(
     },
   }
 
+  // @TODO fix the real condition that is causing $size to be undefined sometimes
+  if (!$size) {
+    // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it
+    if (!responsiveFont.warned) {
+      // eslint-disable-next-line no-console
+      console.warn('No size specified for responsive font', {fontKey, $size, props, base})
+      // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it
+      responsiveFont.warned = true
+    }
+
+    return [base]
+  }
+
   const resp = _responsive(media, $size, (sizeIndex) => fontSize(sizes[sizeIndex] || defaultSize))
 
   return [base, ...resp]

package/src/theme/__workshop__/canvas.tsx

@@ -22,7 +22,7 @@ import {
   useRootTheme,
 } from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React, {createContext, useContext} from 'react'
+import {createContext, useContext} from 'react'
 import {ThemeColorCard} from '../lib/theme'
 
 interface Features {

package/src/theme/__workshop__/color.tsx

@@ -1,5 +1,4 @@
 import {Box, Card, Tree, TreeItem, useRootTheme} from '@sanity/ui'
-import React from 'react'
 
 export default function ColorStory() {
   const {theme} = useRootTheme()

package/src/theme/__workshop__/layer.tsx

@@ -1,5 +1,5 @@
 import {Box, Button, Container, Dialog, Flex, Popover, Stack, Text, Tooltip} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 
 export default function LayerStory() {
   const [dialogOpen, setDialogOpen] = useState(false)

package/src/theme/__workshop__/nestedProvider.tsx

@@ -1,5 +1,4 @@
 import {Card, Flex, Text, ThemeProvider} from '@sanity/ui'
-import React from 'react'
 
 export default function NestedProviderStory() {
   return (

package/src/theme/lib/theme/color/button/types.ts

@@ -23,8 +23,8 @@ export interface ThemeColorButtonStates {
 }
 
 /**
+ * TODO: Rename to `ThemeColorButtonMode`.
  * @public
- * @todo Rename to `ThemeColorButtonMode`.
  */
 export interface ThemeColorButtonTones {
   default: ThemeColorButtonStates

package/src/theme/lib/theme/shadow.ts

@@ -1,6 +1,6 @@
 /**
+ * TODO: Rename to `ThemeBoxShadow`
  * @public
- * @todo Rename to `ThemeBoxShadow`
  */
 export type BoxShadow = [
   // offsetX, offsetY, blurRadius, spreadRadius

package/src/theme/theme.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../test'
 import {studioTheme} from './studioTheme'
 import {ThemeContext} from './themeContext'
@@ -8,7 +8,7 @@ import {useRootTheme} from './useRootTheme'
 describe('theme', () => {
   describe('useRootTheme', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootTheme = useRootTheme()
@@ -41,7 +41,7 @@ describe('theme', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -69,7 +69,7 @@ describe('theme', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

package/src/theme/themeColorProvider.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
 import {ThemeProvider} from './themeProvider'
 import {useRootTheme} from './useRootTheme'

package/src/theme/themeProvider.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useMemo} from 'react'
+import {useContext, useMemo} from 'react'
 import {ThemeProvider as StyledThemeProvider} from 'styled-components'
 import {DEFAULT_THEME_LAYER} from './defaults'
 import {ThemeColorSchemeKey, ThemeColorName} from './lib/theme'

package/src/theme/types.ts

@@ -7,7 +7,7 @@ import {BaseTheme, ThemeColor, ThemeColorName, ThemeColorSchemeKey} from './lib/
 export type RootTheme = BaseTheme<Styles>
 
 /**
- * @todo Rename to `ThemeStyles`
+ * TODO: Rename to `ThemeStyles`
  * @public
  */
 export interface Styles {

package/src/utils/boundaryElement/__workshop__/plain.tsx

@@ -1,5 +1,5 @@
 import {Box, BoundaryElementProvider, Button, Card, Text, Tooltip} from '@sanity/ui'
-import React, {useState} from 'react'
+import {useState} from 'react'
 
 export default function PlainStory() {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)

package/src/utils/boundaryElement/boundaryElement.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../../test'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'
@@ -7,7 +7,7 @@ import {useBoundaryElement} from './useBoundaryElement'
 describe('utils/boundaryElement', () => {
   describe('useBoundaryElement', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootBoundaryElement = useBoundaryElement()
@@ -37,7 +37,7 @@ describe('utils/boundaryElement', () => {
     })
 
     it('should provide default value when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootBoundaryElement = useBoundaryElement()
@@ -64,7 +64,7 @@ describe('utils/boundaryElement', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

package/src/utils/boundaryElement/boundaryElementProvider.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react'
+import {useMemo} from 'react'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'
 

package/src/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,5 +1,4 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import React from 'react'
 import styled from 'styled-components'
 
 const TestCard = styled(Card)`

package/src/utils/elementQuery/elementQuery.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useCallback, useMemo, useState} from 'react'
+import {forwardRef, useCallback, useMemo, useState} from 'react'
 import {useElementSize, useForwardedRef} from '../../hooks'
 import {useTheme} from '../../theme'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'

package/src/utils/errorBoundary.tsx

@@ -1,13 +1,13 @@
-import React from 'react'
+import {Component, PropsWithChildren} from 'react'
 import {Code} from '../primitives/code'
 
 /**
  * DO NOT USE IN PRODUCTION
  * @beta
  */
-export interface ErrorBoundaryProps {
+export type ErrorBoundaryProps = PropsWithChildren<{
   onCatch: (params: {error: Error; info: React.ErrorInfo}) => void
-}
+}>
 
 /**
  * DO NOT USE IN PRODUCTION
@@ -21,7 +21,7 @@ export interface ErrorBoundaryState {
  * DO NOT USE IN PRODUCTION
  * @beta
  */
-export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   state: ErrorBoundaryState = {error: null}
 
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {

package/src/utils/layer/__workshop__/_debug.tsx

@@ -1,5 +1,4 @@
 import {Code, useLayer} from '@sanity/ui'
-import React from 'react'
 
 export function LayerDebugInfo() {
   const layer = useLayer()

package/src/utils/layer/__workshop__/multipleRoots.tsx

@@ -1,5 +1,4 @@
 import {Card, Layer, LayerProvider, Stack} from '@sanity/ui'
-import React from 'react'
 import {LayerDebugInfo} from './_debug'
 
 export default function MultipleRootsStory() {

package/src/utils/layer/__workshop__/plain.tsx

@@ -1,6 +1,6 @@
 import {CloseIcon} from '@sanity/icons'
 import {Box, Button, Card, Flex, Layer, LayerProvider, Stack, Text} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {LayerDebugInfo} from './_debug'
 
 export default function PlainStory() {

package/src/utils/layer/__workshop__/responsiveZOffset.tsx

@@ -1,5 +1,4 @@
 import {Card, Layer} from '@sanity/ui'
-import React from 'react'
 import {LayerDebugInfo} from './_debug'
 
 export default function ResponsiveZOffsetStory() {

package/src/utils/layer/layer.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../../test'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
@@ -7,7 +7,7 @@ import {useLayer} from './useLayer'
 describe('utils/layer', () => {
   describe('useLayer', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootLayer = useLayer()
@@ -43,7 +43,7 @@ describe('utils/layer', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -71,7 +71,7 @@ describe('utils/layer', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

package/src/utils/layer/layer.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {LayerProvider} from './layerProvider'

package/src/utils/layer/layerProvider.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react'
+import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
 import {useMediaIndex, useArrayProp} from '../../hooks'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'

package/src/utils/portal/__workshop__/named.tsx

@@ -1,5 +1,5 @@
 import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
-import React, {useState} from 'react'
+import {useState} from 'react'
 
 export default function NamedStory() {
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)

package/src/utils/portal/portal.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../../test'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
@@ -7,7 +7,7 @@ import {usePortal} from './usePortal'
 describe('utils/portal', () => {
   describe('usePortal', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootPortal = usePortal()
@@ -39,7 +39,7 @@ describe('utils/portal', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -67,7 +67,7 @@ describe('utils/portal', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

package/src/utils/portal/portal.ts

@@ -1,5 +1,4 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import {createPortal} from 'react-dom'
 import {usePortal} from './usePortal'
 
 /**
@@ -26,5 +25,5 @@ export function Portal(props: PortalProps): React.ReactPortal | null {
     return null
   }
 
-  return ReactDOM.createPortal(children, portalElement)
+  return createPortal(children, portalElement)
 }

package/src/utils/portal/portalProvider.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react'
+import {useMemo} from 'react'
 import {useUnique} from '../../hooks/_internal'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'

package/src/utils/srOnly/srOnly.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 
 /**

package/src/utils/virtualList/__workshop__/changingProps.tsx

@@ -1,5 +1,5 @@
 import {Box, Card, Text, VirtualList} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 
 const data = Array.from(new Array(1000)).map((_, key) => ({key}))
 

package/src/utils/virtualList/__workshop__/elementScroll.tsx

@@ -1,5 +1,5 @@
 import {Box, Card, Container, Text, VirtualList} from '@sanity/ui'
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 
 const data = Array.from(new Array(1000)).map((_, key) => ({key}))