@sanity/ui 0.37.20 → 0.37.21

package/src/primitives/inline/inline.tsx

@@ -1,6 +1,5 @@
-import React, {forwardRef, useMemo} from 'react'
+import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {childrenToElementArray} from '../helpers'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
@@ -23,18 +22,13 @@ export const Inline = forwardRef(function Inline(
   ref
 ) {
   const {as, children: childrenProp, space, ...restProps} = props
-
-  const children = useMemo(
-    () =>
-      childrenToElementArray(childrenProp)
-        .filter(Boolean)
-        .map((child, idx) => <div key={idx}>{child}</div>),
-    [childrenProp]
-  )
+  const children = childrenToElementArray(childrenProp).filter(Boolean)
 
   return (
-    <Root data-ui="Inline" {...restProps} $space={useArrayProp(space)} forwardedAs={as} ref={ref}>
-      {children}
+    <Root data-ui="Inline" {...restProps} $space={space} forwardedAs={as} ref={ref}>
+      {children.map((child, idx) => (
+        <div key={idx}>{child}</div>
+      ))}
     </Root>
   )
 })

package/src/primitives/inline/styles.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {
@@ -20,7 +20,7 @@ export function inlineBaseStyle(): CSSObject {
 export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {
   const {theme} = props
 
-  return _responsive(theme.sanity.media, props.$space, (spaceIndex) => {
+  return responsive(theme.sanity.media, getResponsiveProp(props.$space), (spaceIndex) => {
     const space = rem(theme.sanity.space[spaceIndex])
 
     return {

package/src/primitives/inline/types.ts

@@ -2,5 +2,5 @@
  * @internal
  */
 export interface ResponsiveInlineSpaceStyleProps {
-  $space: number[]
+  $space?: number | number[]
 }

package/src/primitives/kbd/kbd.tsx

@@ -1,6 +1,5 @@
 import React, {forwardRef} from 'react'
 import styled, {css} from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Box} from '../box'
 import {Code} from '../code'
@@ -39,7 +38,7 @@ export const KBD = forwardRef(function KBD(
   const {children, fontSize = 1, padding = 1, radius = 2, ...restProps} = props
 
   return (
-    <Root data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
+    <Root data-ui="KBD" {...restProps} $radius={radius} ref={ref}>
       <Box as="span" padding={padding}>
         <Code as="span" muted size={fontSize}>
           {children}

package/src/primitives/label/label.tsx

@@ -1,6 +1,5 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
@@ -26,7 +25,7 @@ export interface LabelProps {
 
 const Root = styled.div<{
   $accent?: boolean
-  $align: TextAlign[]
+  $align?: TextAlign | TextAlign[]
   $muted: boolean
   $size: number[]
 }>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
@@ -69,9 +68,9 @@ export const Label = forwardRef(function Label(
       data-ui="Label"
       {...restProps}
       $accent={accent}
-      $align={useArrayProp(align)}
+      $align={align}
       $muted={muted}
-      $size={useArrayProp(size)}
+      $size={size}
       $weight={weight}
       ref={ref}
     >

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

@@ -2,34 +2,29 @@ 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('./PlainStory')),
+    component: lazy(() => import('./plain')),
   },
   {
     name: 'recursive',
     title: 'Recursive',
-    component: lazy(() => import('./RecursiveStory')),
+    component: lazy(() => import('./recursive')),
   },
   {
     name: 'match-ref-width',
     title: 'Match reference width',
-    component: lazy(() => import('./MatchReferenceWidthStory')),
+    component: lazy(() => import('./matchReferenceWidth')),
   },
   {
     name: 'margins',
     title: 'Margins',
-    component: lazy(() => import('./MarginsStory')),
+    component: lazy(() => import('./margins')),
   },
   {
     name: 'right-aligned',
     title: 'Right-aligned',
-    component: lazy(() => import('./RightAlignedStory')),
+    component: lazy(() => import('./rightAligned')),
   },
 ])

package/src/primitives/popover/__workshop__/{MarginsStory.tsx → margins.tsx}

@@ -5,7 +5,7 @@ export default function MarginsStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Popover
-        __unstable_margins={[-8, 8, -8, 8]}
+        __unstable_margins={[-5, -5, -5, -5]}
         arrow={false}
         content={
           <Box padding={2}>

package/src/primitives/popover/__workshop__/{PlainStory.tsx → plain.tsx}

@@ -1,5 +1,5 @@
 import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import React, {useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
@@ -9,17 +9,18 @@ import {
 } from '../../../__workshop__/constants'
 
 export default function PlainStory() {
-  const arrow = useBoolean('Arrow', true)
-  const boundaryElementFlag = useBoolean('Boundary element', true)
-  const constrainSize = useBoolean('Constrain size', true)
-  const matchReferenceWidth = useBoolean('Match reference width', false)
-  const open = useBoolean('Open', true)
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
-  const portal = useBoolean('Portal', true)
-  const preventOverflow = useBoolean('Prevent overflow', true)
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
+  const arrow = useBoolean('Arrow', true, 'Props')
+  const boundaryElementFlag = useBoolean('Boundary element', true, 'Props')
+  const content = useText('Content', 'Hello, world', 'Props')
+  const constrainSize = useBoolean('Constrain size', true, 'Props')
+  const matchReferenceWidth = useBoolean('Match reference width', false, 'Props')
+  const open = useBoolean('Open', true, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom', 'Props')
+  const portal = useBoolean('Portal', true, 'Props')
+  const preventOverflow = useBoolean('Prevent overflow', true, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto', 'Props')
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
@@ -45,6 +46,7 @@ export default function PlainStory() {
               __unstable_margins={[1, 1, 1, 1]}
               arrow={arrow}
               boundaryElement={boundaryElementFlag ? boundaryElement : undefined}
+              content={<Text>{content}</Text>}
               constrainSize={constrainSize}
               fallbackPlacements={['top', 'bottom']}
               matchReferenceWidth={matchReferenceWidth}

package/src/primitives/popover/__workshop__/{RecursiveStory.tsx → recursive.tsx}

@@ -39,9 +39,7 @@ function RecursiveExample({onClose}: {onClose?: () => void}) {
   }, [open])
 
   useEffect(() => {
-    setTimeout(() => {
-      buttonRef.current?.focus()
-    }, 0)
+    buttonRef.current?.focus()
   }, [])
 
   const handleOpen = useCallback(() => setOpen(true), [])
@@ -60,7 +58,6 @@ function RecursiveExample({onClose}: {onClose?: () => void}) {
       fallbackPlacements={fallbackPlacements}
       content={<RecursiveExample onClose={handleClose} />}
       open={open}
-      padding={1}
       placement={fallbackPlacements[3]}
       portal
       tone={tones[seed]}

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

@@ -0,0 +1,57 @@
+import {EllipsisVerticalIcon} from '@sanity/icons'
+import {Box, Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
+import React, {useCallback, useState} from 'react'
+
+export default function RightAlignedStory() {
+  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 = (
+    <Box overflow="auto" padding={3}>
+      <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>
+    </Box>
+  )
+
+  const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  useClickOutside(handleClose, [buttonElement, popoverElement])
+
+  return (
+    <Box height="fill" padding={[4, 5, 6]} sizing="border">
+      <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1}>
+        <Flex justify="flex-end" padding={0}>
+          <Popover
+            boundaryElement={boundaryElement}
+            constrainSize
+            content={content}
+            open={open}
+            portal
+            preventOverflow
+            ref={setPopoverElement}
+          >
+            <Button
+              icon={EllipsisVerticalIcon}
+              mode="bleed"
+              onClick={handleToggleOpen}
+              ref={setButtonElement}
+              selected={open}
+            />
+          </Popover>
+        </Flex>
+      </Card>
+    </Box>
+  )
+}

package/src/primitives/popover/popover.tsx

@@ -1,16 +1,8 @@
-import React, {
-  cloneElement,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
 import {usePopper} from 'react-popper'
 import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp, useForwardedRef} from '../../hooks'
+import {useForwardedRef} from '../../hooks'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {CardTone, Placement, PopoverMargins} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
@@ -79,7 +71,6 @@ const PopoverCard = styled(Card)<
   ResponsiveWidthStyleProps & {
     $constrainSize?: boolean
     $preventOverflow?: boolean
-    $width: (number | 'auto')[]
   }
 >(
   ({$constrainSize}) => css`
@@ -135,7 +126,7 @@ export const Popover = forwardRef(function Popover(
     tether,
     tetherOffset,
     tone = 'inherit',
-    width: widthProp = 0,
+    width = 0,
     zOffset = theme.sanity.layer?.popover.zOffset,
     ...restProps
   } = props
@@ -145,7 +136,6 @@ 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(matchReferenceWidth ? 'auto' : widthProp)
 
   const modifiers = usePopoverModifiers({
     allowedAutoPlacements,
@@ -196,23 +186,14 @@ export const Popover = forwardRef(function Popover(
 
   const popoverStyle = useMemo(() => ({...style, ...styles.popper}), [style, styles])
 
-  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
   useEffect(() => {
-    if (updateTimeoutRef.current) {
-      clearTimeout(updateTimeoutRef.current)
-      updateTimeoutRef.current = null
-    }
-
-    updateTimeoutRef.current = setTimeout(() => {
-      if (forceUpdate) {
-        try {
-          forceUpdate()
-        } catch (_) {
-          // ignore caught error
-        }
+    if (forceUpdate) {
+      try {
+        forceUpdate()
+      } catch (_) {
+        // ignore caught error
       }
-    }, 0)
+    }
   }, [content, forceUpdate, open, popperReferenceElement])
 
   if (disabled) {
@@ -231,13 +212,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, useArrayProp} from '../../hooks'
+import {useForwardedRef, useCustomValidity} 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[]
-  $padding: number[]
-  $radius: number[]
-  $space: number[]
+  $fontSize?: number | number[]
+  $padding?: number | number[]
+  $radius?: number | number[]
+  $space?: number | 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={useArrayProp(fontSize)}
-        $padding={useArrayProp(padding)}
-        $radius={useArrayProp(radius)}
-        $space={useArrayProp(space)}
+        $fontSize={fontSize}
+        $padding={padding}
+        $radius={radius}
+        $space={space}
         disabled={disabled || readOnly}
         ref={ref}
       >

package/src/primitives/select/styles.ts

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

package/src/primitives/stack/stack.tsx

@@ -1,6 +1,5 @@
 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'
 
@@ -28,7 +27,7 @@ export const Stack = forwardRef(function Stack(
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Stack"
       {...restProps}
-      $space={useArrayProp(space)}
+      $space={space}
       forwardedAs={as}
       ref={ref}
     />

package/src/primitives/stack/styles.ts

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

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

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

package/src/primitives/text/text.tsx

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

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

@@ -1,8 +1,7 @@
-import {Card, Container, Flex, Stack, Text, TextArea} from '@sanity/ui'
+import {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,
@@ -10,8 +9,6 @@ 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')
@@ -25,25 +22,23 @@ export default function PlainStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <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>
+        <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>
       </Container>
     </Flex>
   )