@sanity/ui 0.38.2-next.14 → 0.38.2-next.16

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

@@ -1,5 +1,6 @@
 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 {forwardRef} from 'react'
+import React, {forwardRef} from 'react'
 import styled, {keyframes} from 'styled-components'
 import {Text} from '../text'
 

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

@@ -1,5 +1,6 @@
 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 {forwardRef} from 'react'
+import React, {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 {useCallback, useState} from 'react'
+import React, {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 {useCallback, useMemo} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {ThemeProvider} from 'styled-components'
 
 export default function PropsStory() {

package/src/primitives/switch/switch.tsx

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

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

@@ -1,5 +1,6 @@
 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,5 +1,6 @@
 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,5 +1,6 @@
 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 {forwardRef} from 'react'
+import React, {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {

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

@@ -1,5 +1,6 @@
 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 {forwardRef} from 'react'
+import React, {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 {useCallback, useState} from 'react'
+import React, {useCallback, useState} from 'react'
 
 export default function ClearButtonStory() {
   const customValidity = useText('Custom validitiy')

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

@@ -1,5 +1,6 @@
 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,4 +1,5 @@
 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 {useCallback, useState} from 'react'
+import React, {useCallback, useState} from 'react'
 import {
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,

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

@@ -1,4 +1,5 @@
 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,5 +1,6 @@
 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,5 +1,6 @@
 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 {useCallback, useState} from 'react'
+import React, {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 {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
+import React, {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,5 +1,6 @@
 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 {cloneElement, forwardRef, useCallback, useEffect, useRef, useState} from 'react'
+import React, {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 {forwardRef} from 'react'
+import React, {forwardRef} from 'react'
 import styled from 'styled-components'
 
 const Root = styled.div`

package/src/styles/font/responsiveFont.ts

@@ -48,19 +48,6 @@ 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/styles/helpers.ts

@@ -30,7 +30,7 @@ export function _responsive<T>(
   values: T[],
   callback: (value: T, index: number, array: T[]) => CSSObject
 ): CSSObject[] {
-  const statements = values.map(callback)
+  const statements = values?.map(callback) || []
 
   return statements.map((statement, mediaIndex) => {
     if (mediaIndex === 0) return statement

package/src/theme/__workshop__/canvas.tsx

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

package/src/theme/__workshop__/color.tsx

@@ -1,4 +1,5 @@
 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 {useCallback, useState} from 'react'
+import React, {useCallback, useState} from 'react'
 
 export default function LayerStory() {
   const [dialogOpen, setDialogOpen] = useState(false)

package/src/theme/__workshop__/nestedProvider.tsx

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

package/src/theme/theme.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../test'
 import {studioTheme} from './studioTheme'
 import {ThemeContext} from './themeContext'
@@ -7,7 +9,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()
@@ -40,7 +42,7 @@ describe('theme', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -68,7 +70,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,3 +1,4 @@
+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 {useContext, useMemo} from 'react'
+import React, {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/utils/boundaryElement/__workshop__/plain.tsx

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

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

@@ -1,3 +1,5 @@
+import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../../test'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'
@@ -6,7 +8,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()
@@ -36,7 +38,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()
@@ -63,7 +65,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 {useMemo} from 'react'
+import React, {useMemo} from 'react'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'
 

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

@@ -1,4 +1,5 @@
 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 {forwardRef, useCallback, useMemo, useState} from 'react'
+import React, {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 {Component, PropsWithChildren} from 'react'
+import React from 'react'
 import {Code} from '../primitives/code'
 
 /**
  * DO NOT USE IN PRODUCTION
  * @beta
  */
-export type ErrorBoundaryProps = PropsWithChildren<{
+export interface ErrorBoundaryProps {
   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 Component<ErrorBoundaryProps, ErrorBoundaryState> {
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
   state: ErrorBoundaryState = {error: null}
 
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {

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

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

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

@@ -1,4 +1,5 @@
 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 {useCallback, useState} from 'react'
+import React, {useCallback, useState} from 'react'
 import {LayerDebugInfo} from './_debug'
 
 export default function PlainStory() {

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

@@ -1,4 +1,5 @@
 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,3 +1,5 @@
+import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../../test'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
@@ -6,7 +8,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()
@@ -42,7 +44,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 {
@@ -70,7 +72,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 {forwardRef} from 'react'
+import React, {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 {useCallback, useContext, useEffect, useMemo, useState} from 'react'
+import React, {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 {useState} from 'react'
+import React, {useState} from 'react'
 
 export default function NamedStory() {
   const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)

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

@@ -1,3 +1,5 @@
+import React from 'react'
+import {vi} from 'vitest'
 import {render} from '../../../test'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
@@ -6,7 +8,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()
@@ -38,7 +40,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 {
@@ -66,7 +68,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,4 +1,5 @@
-import {createPortal} from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom'
 import {usePortal} from './usePortal'
 
 /**
@@ -25,5 +26,5 @@ export function Portal(props: PortalProps): React.ReactPortal | null {
     return null
   }
 
-  return createPortal(children, portalElement)
+  return ReactDOM.createPortal(children, portalElement)
 }

package/src/utils/portal/portalProvider.tsx

@@ -1,4 +1,4 @@
-import {useMemo} from 'react'
+import React, {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 {forwardRef} from 'react'
+import React, {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 {useCallback, useState} from 'react'
+import React, {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 {useCallback} from 'react'
+import React, {useCallback} from 'react'
 
 const data = Array.from(new Array(1000)).map((_, key) => ({key}))
 

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

@@ -1,5 +1,5 @@
 import {Box, Card, Text, VirtualList, VirtualListChangeOpts} from '@sanity/ui'
-import {useCallback, useRef, useState} from 'react'
+import React, {useCallback, useRef, useState} from 'react'
 
 interface Item {
   key: string

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

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

package/src/utils/virtualList/virtualList.tsx

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

package/src/primitives/badge/badge.test.tsx

@@ -1,13 +0,0 @@
-import {axe} from 'jest-axe'
-import {render} from '../../../test'
-import {Badge} from './badge'
-
-describe('atoms/badge', () => {
-  it('should have no violations (axe)', async () => {
-    const lightResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'light'})
-    const darkResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'dark'})
-
-    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
-    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
-  })
-})