@sanity/ui 0.37.12 → 0.37.13

package/src/primitives/popover/__workshop__/RightAlignedStory.tsx

@@ -0,0 +1,60 @@
+import {EllipsisVerticalIcon} from '@sanity/icons'
+import {Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+import React, {useCallback, useState} from 'react'
+
+export default function RightAlignedStory() {
+  const constrainSize = useBoolean('Constrain size', false)
+
+  const [open, setOpen] = useState(false)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
+
+  const content = (
+    <Text>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
+      hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi imperdiet
+      quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis, ex quam luctus
+      felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at rhoncus a, tempus vel
+      neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+      Sed id mauris quam. Nam finibus sapien non lacinia ultricies. Integer fermentum tortor at
+      pellentesque faucibus. In venenatis commodo placerat. Curabitur commodo tortor libero, vel
+      pellentesque elit luctus sodales. Donec mattis tristique nunc ac lacinia. Vestibulum non
+      pulvinar turpis, posuere consequat arcu. Fusce ut urna blandit, finibus nisi a, molestie elit.
+      Nulla sed eleifend mi.
+    </Text>
+  )
+
+  const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  useClickOutside(handleClose, [buttonElement, popoverElement])
+
+  return (
+    <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
+      <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1}>
+        <Flex justify="flex-end" padding={0}>
+          <Popover
+            boundaryElement={boundaryElement}
+            constrainSize={constrainSize}
+            content={content}
+            open={open}
+            padding={3}
+            portal
+            placement="bottom"
+            ref={setPopoverElement}
+          >
+            <Button
+              icon={EllipsisVerticalIcon}
+              mode="bleed"
+              onClick={handleToggleOpen}
+              ref={setButtonElement}
+              selected={open}
+            />
+          </Popover>
+        </Flex>
+      </Card>
+    </Card>
+  )
+}

package/src/primitives/popover/__workshop__/TestStory.tsx

@@ -0,0 +1,79 @@
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import React, {ReactElement, useState} from 'react'
+import {
+  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
+  WORKSHOP_PLACEMENT_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+} from '../../../__workshop__/constants'
+import {BoundaryElementProvider, PortalProvider} from '../../../utils'
+import {Button} from '../../button'
+import {Card} from '../../card'
+import {Text} from '../../text'
+import {Popover} from '../popover'
+
+export default function TestStory(): ReactElement {
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const arrow = useBoolean('Arrow', true)
+  const matchReferenceWidth = useBoolean('Match reference width', false)
+  const open = useBoolean('Open', true)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const preventOverflow = useBoolean('Prevent overflow', true)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const referenceWide = useBoolean('Reference wide?', false)
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
+
+  const text = useText('Text', 'Test')
+
+  return (
+    <Card
+      ref={setBoundaryElement}
+      shadow={2}
+      style={{
+        position: 'absolute',
+        top: 50,
+        right: 50,
+        bottom: 50,
+        left: 50,
+      }}
+    >
+      <div
+        data-portal=""
+        ref={setPortalElement}
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          overflow: 'hidden',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <div style={{width: '100%', height: '100%', overflow: 'auto'}}>
+        <div style={{padding: '150vh'}}>
+          <PortalProvider element={portalElement}>
+            <BoundaryElementProvider element={boundaryElement}>
+              <Popover
+                arrow={arrow}
+                content={<Text size={1}>{text}</Text>}
+                fallbackPlacements={['left', 'bottom', 'right', 'top']}
+                matchReferenceWidth={matchReferenceWidth}
+                open={open}
+                padding={3}
+                placement={placement}
+                portal
+                preventOverflow={preventOverflow}
+                radius={radius}
+                width={width}
+              >
+                <Button text="reference" style={{width: referenceWide ? 300 : undefined}} />
+              </Popover>
+            </BoundaryElementProvider>
+          </PortalProvider>
+        </div>
+      </div>
+    </Card>
+  )
+}

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

@@ -2,29 +2,34 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope('primitives/popover', 'Popover', [
+  {
+    name: 'test',
+    title: 'Test',
+    component: lazy(() => import('./TestStory')),
+  },
   {
     name: 'plain',
     title: 'Plain',
-    component: lazy(() => import('./plain')),
+    component: lazy(() => import('./PlainStory')),
   },
   {
     name: 'recursive',
     title: 'Recursive',
-    component: lazy(() => import('./recursive')),
+    component: lazy(() => import('./RecursiveStory')),
   },
   {
     name: 'match-ref-width',
     title: 'Match reference width',
-    component: lazy(() => import('./matchReferenceWidth')),
+    component: lazy(() => import('./MatchReferenceWidthStory')),
   },
   {
     name: 'margins',
     title: 'Margins',
-    component: lazy(() => import('./margins')),
+    component: lazy(() => import('./MarginsStory')),
   },
   {
     name: 'right-aligned',
     title: 'Right-aligned',
-    component: lazy(() => import('./rightAligned')),
+    component: lazy(() => import('./RightAlignedStory')),
   },
 ])

package/src/primitives/popover/popover.tsx

@@ -2,7 +2,7 @@ import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useSta
 import {usePopper} from 'react-popper'
 import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useForwardedRef} from '../../hooks'
+import {useArrayProp, useForwardedRef} from '../../hooks'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {CardTone, Placement, PopoverMargins} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
@@ -71,6 +71,7 @@ const PopoverCard = styled(Card)<
   ResponsiveWidthStyleProps & {
     $constrainSize?: boolean
     $preventOverflow?: boolean
+    $width: (number | 'auto')[]
   }
 >(
   ({$constrainSize}) => css`
@@ -126,7 +127,7 @@ export const Popover = forwardRef(function Popover(
     tether,
     tetherOffset,
     tone = 'inherit',
-    width = 0,
+    width: widthProp = 0,
     zOffset = theme.sanity.layer?.popover.zOffset,
     ...restProps
   } = props
@@ -136,6 +137,7 @@ export const Popover = forwardRef(function Popover(
   const [popperElement, setPopperElement] = useState<HTMLElement | null>(null)
   const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null)
   const popperReferenceElement = referenceElementProp || referenceElement
+  const width = useArrayProp(widthProp)
 
   const modifiers = usePopoverModifiers({
     allowedAutoPlacements,
@@ -212,13 +214,13 @@ export const Popover = forwardRef(function Popover(
     >
       <PopoverCard
         $constrainSize={constrainSize}
+        $width={width}
         data-ui="PopoverCard"
         padding={padding}
         radius={radius}
         scheme={scheme}
         shadow={shadow}
         tone={tone}
-        width={width as any}
       >
         {arrow && <PopoverArrow ref={setArrowElement} style={styles.arrow} />}
         {content}

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