@sanity/ui 0.37.12 → 0.37.14-next.6

package/src/primitives/popover/{arrow.tsx → popoverArrow.tsx}

@@ -17,11 +17,11 @@ const Root = styled.div`
     transform-origin: 13.5px 13.5px;
   }
 
-  [data-popper-placement^='top'] > div > & {
+  [data-placement^='top'] > & {
     bottom: -27px;
   }
 
-  [data-popper-placement^='right'] > div > & {
+  [data-placement^='right'] > & {
     left: -27px;
 
     & > svg {
@@ -29,7 +29,7 @@ const Root = styled.div`
     }
   }
 
-  [data-popper-placement^='left'] > div > & {
+  [data-placement^='left'] > & {
     right: -27px;
 
     & > svg {
@@ -37,7 +37,7 @@ const Root = styled.div`
     }
   }
 
-  [data-popper-placement^='bottom'] > div > & {
+  [data-placement^='bottom'] > & {
     top: -27px;
 
     & > svg {
@@ -59,7 +59,7 @@ export const PopoverArrow = forwardRef(function PopoverArrow(
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
   return (
-    <Root data-ui="PopoverArrow" {...props} ref={ref}>
+    <Root data-ui="Popover__arrow" {...props} ref={ref}>
       <svg
         width="27"
         height="11"

package/src/primitives/popover/popoverCard.tsx

@@ -0,0 +1,160 @@
+import {Strategy} from '@floating-ui/react-dom'
+import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
+import styled, {CSSObject} from 'styled-components'
+import {FLOATING_STATIC_SIDES} from '../../constants'
+import {ThemeColorSchemeKey} from '../../theme'
+import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
+import {useLayer} from '../../utils'
+import {Box} from '../box'
+import {Card} from '../card'
+import {PopoverArrow} from './popoverArrow'
+
+function popoverCardStyle(props: {$boundaryWidth?: number}): CSSObject {
+  const {$boundaryWidth} = props
+
+  return {
+    maxWidth: $boundaryWidth ? `${$boundaryWidth - 16}px` : 'calc(100% - 16px)',
+  }
+}
+
+const Root = memo(styled(Card)(popoverCardStyle))
+
+/**
+ * @internal
+ */
+export const PopoverCard = memo(
+  forwardRef(function PopoverCard(
+    props: {
+      /**
+       * @beta
+       */
+      __unstable_margins?: PopoverMargins
+      arrow: boolean
+      arrowRef: React.Ref<HTMLDivElement>
+      arrowX?: number
+      arrowY?: number
+      availableHeight?: number
+      availableWidth?: number
+      boundaryWidth?: number
+      overflow?: BoxOverflow
+      padding?: number | number[]
+      placement?: Placement
+      radius?: number | number[]
+      referenceWidth?: number
+      scheme?: ThemeColorSchemeKey
+      shadow?: number | number[]
+      strategy: Strategy
+      tone: CardTone
+      width?: number | 'auto' | (number | 'auto')[]
+      x: number | null
+      y: number | null
+    } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) {
+    const {
+      __unstable_margins: marginsProp,
+      arrow,
+      arrowRef,
+      arrowX,
+      arrowY,
+      availableHeight,
+      availableWidth,
+      boundaryWidth,
+      children,
+      padding,
+      placement,
+      overflow,
+      radius,
+      referenceWidth: referenceWidthProp,
+      scheme,
+      shadow,
+      strategy,
+      tone,
+      width,
+      x: xProp,
+      y: yProp,
+      ...restProps
+    } = props
+
+    const {zIndex} = useLayer()
+
+    // top right bottom left
+    const margins: PopoverMargins = useMemo(() => marginsProp || [0, 0, 0, 0], [marginsProp])
+
+    // translate according to margins
+    const referenceWidth = referenceWidthProp
+      ? referenceWidthProp - margins[1] - margins[3]
+      : undefined
+    const x = (xProp ?? 0) + margins[3]
+    const y = (yProp ?? 0) + margins[0]
+
+    const maxWidth = availableWidth
+      ? Math.min(availableWidth - 8, referenceWidth || Infinity)
+      : undefined
+
+    const rootStyle: CSSProperties = useMemo(
+      () => ({
+        position: strategy,
+        top: y,
+        left: x,
+        zIndex,
+        width: referenceWidth,
+        maxWidth: referenceWidth ? undefined : maxWidth,
+      }),
+      [referenceWidth, maxWidth, strategy, x, y, zIndex]
+    )
+
+    const wrapperStyle: CSSProperties = useMemo(
+      () => ({
+        minHeight: 25,
+        maxHeight: availableHeight ? availableHeight - 8 : undefined,
+      }),
+      [availableHeight]
+    )
+
+    const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
+
+    const arrowStyle: CSSProperties = useMemo(() => {
+      const style: CSSProperties = {
+        left: arrowX !== null ? arrowX : undefined,
+        top: arrowY !== null ? arrowY : undefined,
+        right: undefined,
+        bottom: undefined,
+      }
+
+      if (staticSide) style[staticSide] = -27
+
+      return style
+    }, [arrowX, arrowY, staticSide])
+
+    return (
+      <Root
+        {...restProps}
+        $boundaryWidth={boundaryWidth}
+        data-placement={placement}
+        data-ui="Popover"
+        radius={radius}
+        ref={ref}
+        scheme={scheme}
+        shadow={shadow}
+        style={rootStyle}
+        tone={tone}
+        $width={width}
+      >
+        <Box
+          data-ui="Popover__wrapper"
+          overflow={overflow}
+          padding={padding}
+          sizing="border"
+          style={wrapperStyle}
+        >
+          {children}
+        </Box>
+
+        {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
+      </Root>
+    )
+  })
+)
+
+PopoverCard.displayName = 'PopoverCard'

package/src/primitives/select/select.tsx

@@ -1,7 +1,7 @@
 import {SelectIcon} from '@sanity/icons'
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useForwardedRef, useCustomValidity} from '../../hooks'
+import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {Box} from '../box'
 import {Text} from '../text'
 import {selectStyle} from './styles'
@@ -20,10 +20,10 @@ export interface SelectProps {
 const Root = styled.div(selectStyle.root)
 
 const Input = styled.select<{
-  $fontSize?: number | number[]
-  $padding?: number | number[]
-  $radius?: number | number[]
-  $space?: number | number[]
+  $fontSize: number[]
+  $padding: number[]
+  $radius: number[]
+  $space: number[]
 }>(selectStyle.input)
 
 const IconBox = styled(Box)(selectStyle.iconBox)
@@ -57,10 +57,10 @@ export const Select = forwardRef(function Select(
         data-read-only={!disabled && readOnly ? '' : undefined}
         data-ui="Select"
         {...restProps}
-        $fontSize={fontSize}
-        $padding={padding}
-        $radius={radius}
-        $space={space}
+        $fontSize={useArrayProp(fontSize)}
+        $padding={useArrayProp(padding)}
+        $radius={useArrayProp(radius)}
+        $space={useArrayProp(space)}
         disabled={disabled || readOnly}
         ref={ref}
       >

package/src/primitives/select/styles.ts

@@ -1,5 +1,5 @@
 import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../styles'
 import {
   focusRingBorderStyle,
   focusRingStyle,
@@ -100,17 +100,23 @@ function textSize(size: ThemeFontSize) {
   return {fontSize: rem(size.fontSize), lineHeight: rem(size.lineHeight)}
 }
 
-function inputTextSizeStyle(props: {$fontSize?: number | number[]} & ThemeProps) {
+function inputTextSizeStyle(props: {$fontSize: number[]} & ThemeProps) {
   const {theme, $fontSize} = props
   const {sizes} = theme.sanity.fonts.text
 
-  return responsive(theme.sanity.media, getResponsiveProp($fontSize), (sizeIndex) =>
+  return _responsive(theme.sanity.media, $fontSize, (sizeIndex) =>
     textSize(sizes[sizeIndex] || sizes[2])
   )
 }
 
 function inputStyle(): Array<
-  | ((props: ResponsiveRadiusStyleProps & ThemeProps) => CSSObject[])
+  | ((
+      props: ResponsiveRadiusStyleProps & {
+        $fontSize: number[]
+        $padding: number[]
+        $space: number[]
+      } & ThemeProps
+    ) => CSSObject[])
   | ((props: ThemeProps) => FlattenSimpleInterpolation)
 > {
   return [

package/src/primitives/stack/stack.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'
 
@@ -27,7 +28,7 @@ export const Stack = forwardRef(function Stack(
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Stack"
       {...restProps}
-      $space={space}
+      $space={useArrayProp(space)}
       forwardedAs={as}
       ref={ref}
     />

package/src/primitives/stack/styles.ts

@@ -1,8 +1,8 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../styles'
 
 export interface ResponsiveStackSpaceStyleProps {
-  $space?: number | number[]
+  $space: number[]
 }
 
 const BASE_STYLE: CSSObject = {
@@ -26,7 +26,7 @@ export function responsiveStackSpaceStyle(
   const {theme} = props
   const {media, space} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$space), (spaceIndex) => ({
+  return _responsive(media, props.$space, (spaceIndex) => ({
     gridGap: rem(space[spaceIndex]),
   }))
 }

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

@@ -8,31 +8,41 @@ export default function OpticalAlignment() {
       <Stack space={1}>
         <Flex>
           <Card padding={0} scheme="dark">
-            <Text size={4}>Hamburgefonstiv M</Text>
+            <Text accent size={4}>
+              Hamburgefonstiv M
+            </Text>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Text size={3}>Hamburgefonstiv M</Text>
+            <Text accent size={3}>
+              Hamburgefonstiv M
+            </Text>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Text size={2}>Hamburgefonstiv M</Text>
+            <Text accent size={2}>
+              Hamburgefonstiv M
+            </Text>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Text size={1}>Hamburgefonstiv M</Text>
+            <Text accent size={1}>
+              Hamburgefonstiv M
+            </Text>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Text size={0}>Hamburgefonstiv M</Text>
+            <Text accent size={0}>
+              Hamburgefonstiv M
+            </Text>
           </Card>
         </Flex>
 

package/src/primitives/text/text.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,
   responsiveTextAlignStyle,
@@ -69,10 +70,10 @@ export const Text = forwardRef(function Text(
       data-ui="Text"
       {...restProps}
       $accent={accent}
-      $align={align}
+      $align={useArrayProp(align)}
       $muted={muted}
       ref={ref}
-      $size={size}
+      $size={useArrayProp(size)}
       $weight={weight}
     >
       <span>{children}</span>

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

@@ -1,7 +1,8 @@
-import {Container, Flex, Stack, Text, TextArea} from '@sanity/ui'
+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,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
@@ -9,6 +10,8 @@ import {
 } from '../../../__workshop__/constants'
 
 export default function PlainStory() {
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
+
   const border = useBoolean('Border', true, 'Props')
   const customValidity = useText('Custom validity', '', 'Props') || undefined
   const disabled = useBoolean('Disabled', false, 'Props')
@@ -22,23 +25,25 @@ export default function PlainStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Stack space={3}>
-          <Text as="label" htmlFor="text-area-example" size={1} weight="semibold">
-            TextArea
-          </Text>
-          <TextArea
-            border={border}
-            customValidity={customValidity}
-            disabled={disabled}
-            fontSize={fontSize}
-            id="text-area-example"
-            padding={padding}
-            placeholder={placeholder}
-            radius={radius}
-            readOnly={readOnly}
-            weight={weight}
-          />
-        </Stack>
+        <Card padding={3} tone={tone}>
+          <Stack space={3}>
+            <Text as="label" htmlFor="text-area-example" size={1} weight="semibold">
+              TextArea
+            </Text>
+            <TextArea
+              border={border}
+              customValidity={customValidity}
+              disabled={disabled}
+              fontSize={fontSize}
+              id="text-area-example"
+              padding={padding}
+              placeholder={placeholder}
+              radius={radius}
+              readOnly={readOnly}
+              weight={weight}
+            />
+          </Stack>
+        </Card>
       </Container>
     </Flex>
   )

package/src/primitives/textArea/textArea.tsx

@@ -1,6 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useForwardedRef, useCustomValidity} from '../../hooks'
+import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -13,7 +13,7 @@ import {
   textInputFontSizeStyle,
   textInputRepresentationStyle,
 } from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
+import {ThemeFontWeightKey, useRootTheme} from '../../theme'
 import {ResponsiveRadiusProps} from '../types'
 
 /**
@@ -61,11 +61,14 @@ export const TextArea = forwardRef(function TextArea(
     fontSize = 2,
     padding = 3,
     radius = 1,
+    weight,
     ...restProps
   } = props
 
   const ref = useForwardedRef(forwardedRef)
 
+  const rootTheme = useRootTheme()
+
   useCustomValidity(ref, customValidity)
 
   return (
@@ -73,13 +76,22 @@ export const TextArea = forwardRef(function TextArea(
       <InputRoot>
         <Input
           data-as="textarea"
+          data-tone={rootTheme.tone}
           {...restProps}
-          $fontSize={fontSize}
-          $padding={padding}
+          $fontSize={useArrayProp(fontSize)}
+          $padding={useArrayProp(padding)}
+          $space={useArrayProp(0)}
+          $tone={rootTheme.tone}
+          $weight={weight}
           disabled={disabled}
           ref={ref}
         />
-        <Presentation $border={border} $radius={radius} />
+        <Presentation
+          $border={border}
+          $radius={useArrayProp(radius)}
+          $tone={rootTheme.tone}
+          data-tone={rootTheme.tone}
+        />
       </InputRoot>
     </Root>
   )

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

@@ -1,7 +1,10 @@
-import {TextInput} from '@sanity/ui'
+import {Box, TextInput} from '@sanity/ui'
+import {useText} from '@sanity/ui-workshop'
 import React, {useCallback, useState} from 'react'
 
 export default function ClearButtonStory() {
+  const customValidity = useText('Custom validitiy')
+
   const [value, setValue] = useState('')
 
   const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
@@ -13,12 +16,15 @@ export default function ClearButtonStory() {
   }, [])
 
   return (
-    <TextInput
-      clearButton
-      onChange={handleChange}
-      onClear={handleClear}
-      placeholder="Enter text"
-      value={value}
-    />
+    <Box padding={4}>
+      <TextInput
+        clearButton
+        customValidity={customValidity}
+        onChange={handleChange}
+        onClear={handleClear}
+        placeholder="Enter text"
+        value={value}
+      />
+    </Box>
   )
 }

package/src/primitives/textInput/__workshop__/index.ts

@@ -13,8 +13,8 @@ export default defineScope('primitives/text-input', 'TextInput', [
     component: lazy(() => import('./customValidity')),
   },
   {
-    name: 'types',
-    title: 'Types',
+    name: 'typed',
+    title: 'Typed',
     component: lazy(() => import('./typed')),
   },
   {

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

@@ -30,15 +30,33 @@ const typingPerfTest: PerfTestProps<HTMLInputElement> = {
 export default function PlainStory() {
   const {ref, Wrapper} = usePerfTest(typingPerfTest)
 
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container width={0}>
+        <Stack space={3}>
+          <Text as="label" htmlFor="text-input-example" size={1} weight="semibold">
+            TextInput
+          </Text>
+          <Wrapper>
+            <TextInputTest inputRef={ref} />
+          </Wrapper>
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}
+
+function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
+  const {inputRef: ref} = props
   const border = useBoolean('Border', true, 'Props')
   const customValidity = useText('Custom validity', '', 'Props') || undefined
   const disabled = useBoolean('Disabled', false, 'Props')
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props') as IconSymbol
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search', 'Props') as IconSymbol
   const iconRight = useSelect(
     'Icon (right)',
     WORKSHOP_ICON_SYMBOL_OPTIONS,
-    'add-circle',
+    'close',
     'Props'
   ) as IconSymbol
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
@@ -56,35 +74,24 @@ export default function PlainStory() {
   )
 
   return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack space={3}>
-          <Text as="label" htmlFor="text-input-example" size={1} weight="semibold">
-            TextInput
-          </Text>
-          <Wrapper>
-            <TextInput
-              border={border}
-              customValidity={customValidity}
-              disabled={disabled}
-              fontSize={fontSize}
-              icon={icon && icons[icon]}
-              iconRight={iconRight && icons[iconRight]}
-              id="text-input-example"
-              name="email"
-              onChange={handleChange}
-              padding={padding}
-              placeholder={placeholder}
-              radius={radius}
-              readOnly={readOnly}
-              ref={ref}
-              space={space}
-              value={value}
-              weight={weight}
-            />
-          </Wrapper>
-        </Stack>
-      </Container>
-    </Flex>
+    <TextInput
+      border={border}
+      customValidity={customValidity}
+      disabled={disabled}
+      fontSize={fontSize}
+      icon={icon && icons[icon]}
+      iconRight={iconRight && icons[iconRight]}
+      id="text-input-example"
+      name="email"
+      onChange={handleChange}
+      padding={padding}
+      placeholder={placeholder}
+      radius={radius}
+      readOnly={readOnly}
+      ref={ref}
+      space={space}
+      value={value}
+      weight={weight}
+    />
   )
 }