@sanity/ui 0.37.21 → 0.38.0

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

@@ -1,101 +1,240 @@
-import {Box, Card, Container, Stack, Text, TextInput} from '@sanity/ui'
+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)
+  const primaryTone = useBoolean('Primary', true)
+  const positiveTone = useBoolean('Positive', true)
+  const cautionTone = useBoolean('Caution', true)
+  const criticalTone = useBoolean('Critical', true)
+
   return (
-    <Container width={1}>
-      <Stack padding={[3, 4, 5]} space={4}>
-        <Card padding={3}>
-          <TextInput
-            placeholder="default"
-            prefix={
-              <Box padding={3}>
-                <Text>prefix</Text>
-              </Box>
-            }
-            suffix={
-              <Box padding={3}>
-                <Text>suffix</Text>
-              </Box>
-            }
-          />
-        </Card>
-        <Card padding={3} tone="transparent">
-          <TextInput
-            placeholder="transparent"
-            prefix={
-              <Box padding={3}>
-                <Text>prefix</Text>
-              </Box>
-            }
-            suffix={
-              <Box padding={3}>
-                <Text>suffix</Text>
-              </Box>
-            }
-          />
-        </Card>
-        <Card padding={3} tone="primary">
-          <TextInput
-            placeholder="primary"
-            prefix={
-              <Box padding={3}>
-                <Text>prefix</Text>
-              </Box>
-            }
-            suffix={
-              <Box padding={3}>
-                <Text>suffix</Text>
-              </Box>
-            }
-          />
-        </Card>
-        <Card padding={3} tone="positive">
-          <TextInput
-            placeholder="positive"
-            prefix={
-              <Box padding={3}>
-                <Text>prefix</Text>
-              </Box>
-            }
-            suffix={
-              <Box padding={3}>
-                <Text>suffix</Text>
-              </Box>
-            }
-          />
-        </Card>
-        <Card padding={3} tone="caution">
-          <TextInput
-            placeholder="caution"
-            prefix={
-              <Box padding={3}>
-                <Text>prefix</Text>
-              </Box>
-            }
-            suffix={
-              <Box padding={3}>
-                <Text>suffix</Text>
-              </Box>
-            }
-          />
-        </Card>
-        <Card padding={3} tone="critical">
-          <TextInput
-            placeholder="critical"
-            prefix={
-              <Box padding={3}>
-                <Text>prefix</Text>
-              </Box>
-            }
-            suffix={
-              <Box padding={3}>
-                <Text>suffix</Text>
-              </Box>
-            }
-          />
-        </Card>
-      </Stack>
-    </Container>
+    <Card height="fill" tone="transparent">
+      <Flex align="center" height="fill" justify="center">
+        <Container width={1}>
+          <Flex>
+            <Card flex={1} scheme="light">
+              <Stack padding={[3, 4, 5]} space={4}>
+                <Card padding={3}>
+                  <TextInput
+                    placeholder="default"
+                    prefix={
+                      <Box padding={3}>
+                        <Text>prefix</Text>
+                      </Box>
+                    }
+                    suffix={
+                      <Box padding={3}>
+                        <Text>suffix</Text>
+                      </Box>
+                    }
+                  />
+                </Card>
+
+                {transparentTone && (
+                  <Card padding={3} tone="transparent">
+                    <TextInput
+                      placeholder="transparent"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
+                {primaryTone && (
+                  <Card padding={3} tone="primary">
+                    <TextInput
+                      placeholder="primary"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
+                {positiveTone && (
+                  <Card padding={3} tone="positive">
+                    <TextInput
+                      placeholder="positive"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
+                {cautionTone && (
+                  <Card padding={3} tone="caution">
+                    <TextInput
+                      placeholder="caution"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
+                {criticalTone && (
+                  <Card padding={3} tone="critical">
+                    <TextInput
+                      placeholder="critical"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+              </Stack>
+            </Card>
+            <Card flex={1} scheme="dark">
+              <Stack padding={[3, 4, 5]} space={4}>
+                <Card padding={3}>
+                  <TextInput
+                    placeholder="default"
+                    prefix={
+                      <Box padding={3}>
+                        <Text>prefix</Text>
+                      </Box>
+                    }
+                    suffix={
+                      <Box padding={3}>
+                        <Text>suffix</Text>
+                      </Box>
+                    }
+                  />
+                </Card>
+
+                {transparentTone && (
+                  <Card padding={3} tone="transparent">
+                    <TextInput
+                      placeholder="transparent"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
+                {primaryTone && (
+                  <Card padding={3} tone="primary">
+                    <TextInput
+                      placeholder="primary"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
+                {positiveTone && (
+                  <Card padding={3} tone="positive">
+                    <TextInput
+                      placeholder="positive"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
+                {cautionTone && (
+                  <Card padding={3} tone="caution">
+                    <TextInput
+                      placeholder="caution"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+
+                {criticalTone && (
+                  <Card padding={3} tone="critical">
+                    <TextInput
+                      placeholder="critical"
+                      prefix={
+                        <Box padding={3}>
+                          <Text>prefix</Text>
+                        </Box>
+                      }
+                      suffix={
+                        <Box padding={3}>
+                          <Text>suffix</Text>
+                        </Box>
+                      }
+                    />
+                  </Card>
+                )}
+              </Stack>
+            </Card>
+          </Flex>
+        </Container>
+      </Flex>
+    </Card>
   )
 }

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

@@ -1,4 +1,4 @@
-import {TextInput} from '@sanity/ui'
+import {Box, Container, TextInput} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
 import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '../../../__workshop__/constants'
@@ -12,5 +12,11 @@ export default function TypedStory() {
     setValue(event.currentTarget.value)
   }, [])
 
-  return <TextInput onChange={handleChange} type={type} value={value} />
+  return (
+    <Box padding={4}>
+      <Container width={1}>
+        <TextInput onChange={handleChange} type={type} value={value} />
+      </Container>
+    </Box>
+  )
 }

package/src/primitives/textInput/textInput.tsx

@@ -3,7 +3,7 @@ import React, {createElement, forwardRef, isValidElement, useCallback, useMemo}
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useForwardedRef, useCustomValidity, useResponsiveProp} from '../../hooks'
+import {useArrayProp, useForwardedRef, useCustomValidity} from '../../hooks'
 import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
@@ -16,7 +16,7 @@ import {
   textInputRepresentationStyle,
   textInputRootStyle,
 } from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
+import {ThemeFontWeightKey, useRootTheme} from '../../theme'
 import {Box} from '../box'
 import {Button, ButtonProps} from '../button'
 import {Card} from '../card'
@@ -72,7 +72,7 @@ export interface TextInputProps {
 
 const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}
 
-const Root = styled.span(textInputRootStyle)
+const Root = styled(Card).attrs({forwardedAs: 'span'})(textInputRootStyle)
 
 const InputRoot = styled.span`
   flex: 1;
@@ -118,6 +118,12 @@ const LeftBox = styled(Box)`
   left: 0;
 `
 
+const RightBox = styled(Box)`
+  position: absolute;
+  top: 0;
+  right: 0;
+`
+
 const RightCard = styled(Card)`
   background-color: transparent;
   position: absolute;
@@ -136,7 +142,7 @@ export const TextInput = forwardRef(function TextInput(
     border = true,
     clearButton,
     disabled = false,
-    fontSize = 2,
+    fontSize: fontSizeProp = 2,
     icon,
     iconRight,
     onClear,
@@ -144,16 +150,22 @@ export const TextInput = forwardRef(function TextInput(
     prefix,
     radius: radiusProp = 1,
     readOnly,
-    space = 3,
+    space: spaceProp = 3,
     suffix,
     customValidity,
     type = 'text',
+    weight,
     ...restProps
   } = props
 
   const ref = useForwardedRef(forwardedRef)
-  const padding = useResponsiveProp(paddingProp)
-  const radius = useResponsiveProp(radiusProp)
+
+  const rootTheme = useRootTheme()
+
+  const fontSize = useArrayProp(fontSizeProp)
+  const padding = useArrayProp(paddingProp)
+  const radius = useArrayProp(radiusProp)
+  const space = useArrayProp(spaceProp)
 
   // Transient properties
   const $hasClearButton = Boolean(clearButton)
@@ -202,6 +214,10 @@ export const TextInput = forwardRef(function TextInput(
         $hasPrefix={$hasPrefix}
         $hasSuffix={$hasSuffix}
         $radius={radius}
+        $scheme={rootTheme.scheme}
+        $tone={rootTheme.tone}
+        data-scheme={rootTheme.scheme}
+        data-tone={rootTheme.tone}
       >
         {icon && (
           <LeftBox padding={padding}>
@@ -213,16 +229,27 @@ export const TextInput = forwardRef(function TextInput(
         )}
 
         {!$hasClearButton && iconRight && (
-          <RightCard padding={padding}>
+          <RightBox padding={padding}>
             <Text size={fontSize}>
               {isValidElement(iconRight) && iconRight}
               {isValidElementType(iconRight) && createElement(iconRight)}
             </Text>
-          </RightCard>
+          </RightBox>
         )}
       </Presentation>
     ),
-    [border, fontSize, icon, iconRight, padding, radius, $hasClearButton, $hasPrefix, $hasSuffix]
+    [
+      border,
+      fontSize,
+      icon,
+      iconRight,
+      padding,
+      radius,
+      rootTheme,
+      $hasClearButton,
+      $hasPrefix,
+      $hasSuffix,
+    ]
   )
 
   // Render clear button (memoized)
@@ -303,25 +330,33 @@ export const TextInput = forwardRef(function TextInput(
   )
 
   return (
-    <Root data-ui="TextInput">
+    <Root data-ui="TextInput" tone={rootTheme.tone}>
       {prefixNode}
+
       <InputRoot>
         <Input
           data-as="input"
+          data-scheme={rootTheme.scheme}
+          data-tone={rootTheme.tone}
           {...restProps}
+          $fontSize={fontSize}
           $iconLeft={$hasIcon}
           $iconRight={$hasIconRight || $hasClearButton}
           $padding={padding}
+          $scheme={rootTheme.scheme}
           $space={space}
-          $fontSize={fontSize}
+          $tone={rootTheme.tone}
+          $weight={weight}
           disabled={disabled}
           readOnly={readOnly}
           ref={ref}
           type={type}
         />
+
         {presentationNode}
         {clearButtonNode}
       </InputRoot>
+
       {suffixNode}
     </Root>
   )

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

@@ -1,17 +1,22 @@
 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() {
+  const content = useText('Content', 'Tooltip content')
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+
   return (
     <Card height="fill">
       <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
         <Tooltip
           content={
             <Box padding={2}>
-              <Text size={1}>Tooltip content</Text>
+              <Text size={1}>{content}</Text>
             </Box>
           }
-          placement="top"
+          placement={placement}
           portal
         >
           <Button mode="bleed" text="Hover me" />

package/src/primitives/tooltip/tooltip.tsx

@@ -1,7 +1,7 @@
-import React, {cloneElement, forwardRef, useCallback, useEffect, useState} from 'react'
+import React, {cloneElement, forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import {usePopper} from 'react-popper'
 import styled from 'styled-components'
-import {useForwardedRef} from '../../hooks'
+import {useArrayProp, useForwardedRef} from '../../hooks'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {Placement} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement} from '../../utils'
@@ -42,13 +42,14 @@ export const Tooltip = forwardRef(function Tooltip(
     children,
     content,
     disabled,
-    fallbackPlacements,
+    fallbackPlacements: fallbackPlacementsProp,
     placement = 'bottom',
     portal,
     scheme,
     zOffset = theme.sanity.layer?.tooltip.zOffset,
     ...restProps
   } = props
+  const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
   const forwardedRef = useForwardedRef(ref)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
@@ -117,14 +118,23 @@ export const Tooltip = forwardRef(function Tooltip(
     }
   }, [isOpen, referenceElement])
 
+  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
   useEffect(() => {
-    if (forceUpdate) {
-      try {
-        forceUpdate()
-      } catch (_) {
-        // ignore caught error
-      }
+    if (updateTimeoutRef.current) {
+      clearTimeout(updateTimeoutRef.current)
+      updateTimeoutRef.current = null
     }
+
+    updateTimeoutRef.current = setTimeout(() => {
+      if (forceUpdate) {
+        try {
+          forceUpdate()
+        } catch (_) {
+          // ignore caught error
+        }
+      }
+    }, 0)
   }, [forceUpdate, content])
 
   // Close when `disabled` changes to `true`

package/src/primitives/types.ts

@@ -127,5 +127,5 @@ export interface ResponsiveShadowProps {
  * @public
  */
 export interface ResponsiveWidthProps {
-  width?: number | number[] | 'auto'
+  width?: number | 'auto' | (number | 'auto')[]
 }

package/src/styles/border/borderStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, responsive} from '../helpers'
+import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBorderStyleProps} from './types'
 
@@ -15,7 +15,7 @@ function border(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$border), (value) =>
+  return _responsive(media, props.$border, (value) =>
     value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}}
   )
 }
@@ -24,7 +24,7 @@ function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$borderTop), (value) =>
+  return _responsive(media, props.$borderTop, (value) =>
     value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}}
   )
 }
@@ -33,7 +33,7 @@ function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$borderRight), (value) =>
+  return _responsive(media, props.$borderRight, (value) =>
     value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}}
   )
 }
@@ -42,7 +42,7 @@ function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$borderBottom), (value) =>
+  return _responsive(media, props.$borderBottom, (value) =>
     value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}}
   )
 }
@@ -51,7 +51,7 @@ function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$borderLeft), (value) =>
+  return _responsive(media, props.$borderLeft, (value) =>
     value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}}
   )
 }

package/src/styles/border/types.ts

@@ -2,9 +2,9 @@
  * @internal
  */
 export interface ResponsiveBorderStyleProps {
-  $border?: boolean | boolean[]
-  $borderTop?: boolean | boolean[]
-  $borderRight?: boolean | boolean[]
-  $borderBottom?: boolean | boolean[]
-  $borderLeft?: boolean | boolean[]
+  $border: boolean[]
+  $borderTop: boolean[]
+  $borderRight: boolean[]
+  $borderBottom: boolean[]
+  $borderLeft: boolean[]
 }