@sanity/ui 0.37.12 → 0.37.13

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

@@ -1,7 +1,14 @@
 import {Box, Card, Container, 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}>
@@ -20,81 +27,96 @@ export default function TonesStory() {
             }
           />
         </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>
+
+        {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>
     </Container>
   )

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,8 @@ export const TextInput = forwardRef(function TextInput(
         $hasPrefix={$hasPrefix}
         $hasSuffix={$hasSuffix}
         $radius={radius}
+        $tone={rootTheme.tone}
+        data-tone={rootTheme.tone}
       >
         {icon && (
           <LeftBox padding={padding}>
@@ -213,16 +227,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.tone,
+      $hasClearButton,
+      $hasPrefix,
+      $hasSuffix,
+    ]
   )
 
   // Render clear button (memoized)
@@ -303,25 +328,31 @@ 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-tone={rootTheme.tone}
           {...restProps}
+          $fontSize={fontSize}
           $iconLeft={$hasIcon}
           $iconRight={$hasIconRight || $hasClearButton}
           $padding={padding}
           $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,7 +1,11 @@
 import {Box, Button, Card, Flex, Text, Tooltip} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
 import React from 'react'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PropsStory() {
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+
   return (
     <Card height="fill">
       <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
@@ -11,7 +15,7 @@ export default function PropsStory() {
               <Text size={1}>Tooltip 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 {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)

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[]
 }

package/src/styles/box/boxStyle.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype'
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, responsive} from '../helpers'
+import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBoxStyleProps} from './types'
 
@@ -39,7 +39,7 @@ function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps)
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$display), (display) => ({
+  return _responsive(media, props.$display, (display) => ({
     '&:not([hidden])': {display},
   }))
 }
@@ -48,7 +48,7 @@ function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$sizing), (sizing) => ({
+  return _responsive(media, props.$sizing, (sizing) => ({
     boxSizing: BOX_SIZING[sizing],
   }))
 }
@@ -57,7 +57,7 @@ function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$height), (height) => ({
+  return _responsive(media, props.$height, (height) => ({
     height: BOX_HEIGHT[height],
   }))
 }
@@ -66,7 +66,7 @@ function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps)
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$overflow), (overflow) => ({
+  return _responsive(media, props.$overflow, (overflow) => ({
     overflow,
   }))
 }

package/src/styles/box/types.ts

@@ -4,8 +4,8 @@ import {BoxDisplay, BoxHeight, BoxOverflow, BoxSizing} from '../../types'
  * @internal
  */
 export interface ResponsiveBoxStyleProps {
-  $display?: BoxDisplay | BoxDisplay[]
-  $height?: BoxHeight | BoxHeight[]
-  $overflow?: BoxOverflow | BoxOverflow[]
-  $sizing?: BoxSizing | BoxSizing[]
+  $display: BoxDisplay[]
+  $height: BoxHeight[]
+  $overflow: BoxOverflow[]
+  $sizing: BoxSizing[]
 }

package/src/styles/flex/flexItemStyle.ts

@@ -1,5 +1,6 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, responsive} from '../helpers'
+import {EMPTY_ARRAY} from '../../constants'
+import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexItemStyleProps} from './types'
 
@@ -20,7 +21,7 @@ export function responsiveFlexItemStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$flex), (flex) => {
-    return {flex}
-  })
+  if (!props.$flex) return EMPTY_ARRAY
+
+  return _responsive(media, props.$flex, (flex) => ({flex}))
 }

package/src/styles/flex/flexStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive} from '../helpers'
+import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexStyleProps} from './types'
 
@@ -28,7 +28,7 @@ export function responsiveFlexAlignStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$align), (align) => {
+  return _responsive(media, props.$align, (align) => {
     return {alignItems: align}
   })
 }
@@ -37,7 +37,7 @@ function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$gap), (gap) => ({
+  return _responsive(media, props.$gap, (gap) => ({
     gap: gap ? rem(space[gap]) : undefined,
   }))
 }
@@ -46,7 +46,7 @@ export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeP
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$wrap), (wrap) => {
+  return _responsive(media, props.$wrap, (wrap) => {
     return {flexWrap: wrap}
   })
 }
@@ -57,7 +57,7 @@ export function responsiveFlexJustifyStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$justify), (justify) => {
+  return _responsive(media, props.$justify, (justify) => {
     return {justifyContent: justify}
   })
 }
@@ -68,7 +68,7 @@ export function responsiveFlexDirectionStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$direction), (direction) => {
+  return _responsive(media, props.$direction, (direction) => {
     return {flexDirection: direction}
   })
 }

package/src/styles/flex/types.ts

@@ -4,18 +4,18 @@ import {FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap} from '../../
  * @internal
  */
 export interface ResponsiveFlexStyleProps {
-  $align?: FlexAlign | FlexAlign[]
-  $direction?: FlexDirection | FlexDirection[]
-  $gap?: number | number[]
-  $justify?: FlexJustify | FlexJustify[]
-  $wrap?: FlexWrap | FlexWrap[]
+  $align: FlexAlign[]
+  $direction: FlexDirection[]
+  $gap: number[]
+  $justify: FlexJustify[]
+  $wrap: FlexWrap[]
 }
 
 /**
  * @internal
  */
 export interface ResponsiveFlexItemStyleProps {
-  $flex?: FlexValue | FlexValue[]
+  $flex: FlexValue[]
 }
 
 /**