@sanity/ui 0.38.2 → 0.38.3-next.5

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'
@@ -55,8 +55,8 @@ export interface TextInputProps {
   clearButton?: boolean | TextInputClearButtonProps
   customValidity?: string
   fontSize?: number | number[]
-  icon?: React.ComponentType | React.ReactNode
-  iconRight?: React.ComponentType | React.ReactNode
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
   /**
    * @beta
    */

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/theme.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {vi} from 'vitest'
 import {render} from '../../test'
 import {studioTheme} from './studioTheme'

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/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,3 @@
-import React from 'react'
 import {vi} from 'vitest'
 import {render} from '../../../test'
 import {BoundaryElementContext} from './boundaryElementContext'

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,3 @@
-import React from 'react'
 import {vi} from 'vitest'
 import {render} from '../../../test'
 import {LayerContext} from './layerContext'

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,3 @@
-import React from 'react'
 import {vi} from 'vitest'
 import {render} from '../../../test'
 import {PortalContext} from './portalContext'

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}))
 

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

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

package/src/utils/virtualList/virtualList.tsx

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