@sanity/ui 0.37.12 → 0.37.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "0.37.12",
+  "version": "0.37.13",
   "sideEffects": false,
   "source": "./src/index.ts",
   "exports": {
@@ -19,7 +19,7 @@
   "license": "MIT",
   "scripts": {
     "build": "run-s build:microbundle",
-    "build:microbundle": "microbundle --format modern,esm,cjs --jsx React.createElement --jsxImportSource react --no-compress --tsconfig tsconfig.lib.json",
+    "build:microbundle": "microbundle --format modern,esm,cjs --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --no-compress --tsconfig tsconfig.lib.json",
     "clean": "rimraf lib",
     "lint": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx --quiet",
     "prebuild": "yarn clean",
@@ -30,20 +30,20 @@
     "watch:es": "tsc --preserveWatchOutput -w --module ES6 --outDir lib/esm --project tsconfig.lib.json --rootDir src --target ES6"
   },
   "dependencies": {
-    "@juggle/resize-observer": "^3.3.1",
-    "@popperjs/core": "^2.11.5",
-    "@reach/auto-id": "^0.16.0",
-    "@sanity/color": "^2.1.11",
-    "@sanity/icons": "^1.3.1",
+    "@juggle/resize-observer": "^3.4.0",
+    "@popperjs/core": "^2.11.6",
+    "@reach/auto-id": "^0.17.0",
+    "@sanity/color": "^2.1.12",
+    "@sanity/icons": "^1.3.2",
     "framer-motion": "6.3.0",
     "popper-max-size-modifier": "^0.2.0",
     "react-is": "^17.0.2",
-    "react-popper": "^2.2.5",
+    "react-popper": "^2.3.0",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@testing-library/dom": "^8.13.0",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@types/refractor": "^3.0.2",
     "react": "^17.0.2",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "804bf73dffb1c0ecb1c2e6758135784502768bfe"
+  "gitHead": "de7619d53b2635f9bb667564cafb7110945c1ed2"
 }

package/src/__workshop__/color/overview.tsx

@@ -19,7 +19,7 @@ const clipboard = {
 
 export default function ColorOverviewStory(): React.ReactElement {
   return (
-    <Grid columns={[1, 1, 2, 3]} gapX={[3, 4, 5]} gapY={[4, 5, 6]} padding={[3, 4, 5]}>
+    <Grid columns={[1, 1, 2, 3]} gapX={[4, 4, 5]} gapY={[5, 5, 6]} padding={[4, 5, 6]}>
       {COLOR_HUES.map((hueKey) => (
         <ColorHuePreview tints={hues[hueKey]} hueKey={hueKey} key={hueKey} />
       ))}
@@ -32,7 +32,7 @@ function ColorHuePreview(props: {hueKey: string; tints: ColorTints}) {
 
   return (
     <Box>
-      <Heading as="h2" size={[1, 1, 2]}>
+      <Heading as="h2" size={1}>
         {ucfirst(hueKey)}
       </Heading>
 
@@ -78,22 +78,20 @@ function ColorTintPreview(props: {tint: ColorValue}) {
       as="button"
       onClick={handleClick}
       radius={2}
-      style={
-        {
-          '--card-bg-color': tint.hex,
-          '--card-fg-color': hsl.l < 50 ? white.hex : black.hex,
-          cursor: 'pointer',
-        } as any
-      }
+      style={{
+        ['--card-bg-color' as any]: tint.hex,
+        ['--card-fg-color' as any]: hsl.l < 50 ? white.hex : black.hex,
+        cursor: 'pointer',
+      }}
     >
       <Flex padding={3}>
         <Box flex={1}>
-          <Code size={[1, 1, 2]} style={{color: 'inherit'}}>
+          <Code size={1} style={{color: 'inherit'}}>
             {tint.title}
           </Code>
         </Box>
         <Box>
-          <Code size={[1, 1, 2]} style={{color: 'inherit'}}>
+          <Code size={1} style={{color: 'inherit'}}>
             {tint.hex}
           </Code>
         </Box>

package/src/components/autocomplete/__workshop__/async.tsx

@@ -1,11 +1,11 @@
-import {LinkIcon} from '@sanity/icons'
+import {EarthAmericasIcon, SearchIcon} from '@sanity/icons'
 import {
   Autocomplete,
   BaseAutocompleteOption,
   Box,
-  Button,
   Card,
   Code,
+  Flex,
   LayerProvider,
   Stack,
   Text,
@@ -88,6 +88,7 @@ export default function AsyncStory() {
           <Autocomplete
             disabled={loadingCurrentRef}
             filterOption={filterOption}
+            icon={value ? EarthAmericasIcon : SearchIcon}
             id="async"
             loading={loading}
             onChange={setValue}
@@ -95,11 +96,6 @@ export default function AsyncStory() {
             openButton={{onClick: handleOpenButtonClick}}
             options={options}
             placeholder="Search"
-            prefix={
-              <Box padding={1}>
-                <Button disabled={!value} icon={LinkIcon} mode="bleed" padding={2} />
-              </Box>
-            }
             radius={1}
             renderOption={renderOption}
             renderValue={renderValue}
@@ -140,13 +136,19 @@ function AsyncOption(props: {
       selected={selected}
       tabIndex={tabIndex}
     >
-      {loading && (
-        <Text muted>
-          <>Loading…</>
+      <Flex gap={3}>
+        <Text>
+          <EarthAmericasIcon />
         </Text>
-      )}
 
-      {!loading && <Text muted={!data}>{data ? data.title : <>Untitled</>}</Text>}
+        {loading && (
+          <Text muted>
+            <>Loading…</>
+          </Text>
+        )}
+
+        {!loading && <Text muted={!data}>{data ? data.title : <>Untitled</>}</Text>}
+      </Flex>
     </Card>
   )
 }

package/src/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -8,7 +8,9 @@ import {
   Text,
 } from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
+import {Popover} from '../../../primitives'
 import countries from '../__fixtures__/countries'
+import {AutocompleteProps} from '../autocomplete'
 import {ExampleOption} from './types'
 
 export default function ConstrainedHeightStory() {
@@ -71,6 +73,38 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
 
   const options = countries.map((item) => ({value: item.code, title: item.name}))
 
+  const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
+    (
+      popoverProps: {
+        content: React.ReactElement | null
+        hidden: boolean
+        inputElement: HTMLInputElement | null
+        onMouseEnter: () => void
+        onMouseLeave: () => void
+      },
+      popoverRef: React.Ref<HTMLDivElement>
+    ) => {
+      const {hidden, inputElement, ...restProps} = popoverProps
+
+      if (hidden) return null
+
+      return (
+        <Popover
+          {...restProps}
+          arrow={false}
+          constrainSize
+          matchReferenceWidth
+          open
+          placement="bottom"
+          radius={1}
+          ref={popoverRef}
+          referenceElement={inputElement}
+        />
+      )
+    },
+    []
+  )
+
   return (
     <Stack space={3}>
       <Text size={1} weight="medium">
@@ -84,8 +118,10 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
           openButton
           options={options}
           placeholder="Search"
+          // popover={{allowedAutoPlacements: ['bottom-start', 'top-start']}}
           radius={1}
           renderOption={renderOption}
+          renderPopover={renderPopover}
           renderValue={renderValue}
           value={value}
         />

package/src/components/autocomplete/autocomplete.styles.tsx

@@ -6,7 +6,6 @@ import {Box, Popover} from '../../primitives'
  * @internal
  */
 export const Root = styled.div`
-  /* position: relative; */
   line-height: 0;
 `
 

package/src/components/autocomplete/autocomplete.tsx

@@ -9,15 +9,14 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import {EMPTY_ARRAY} from '../../constants'
+import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useForwardedRef, useResponsiveProp} from '../../hooks'
+import {useForwardedRef, useArrayProp} from '../../hooks'
 import {Box, BoxProps, Button, Card, PopoverProps, Stack, Text, TextInput} from '../../primitives'
 import {AnimatedSpinnerIcon, ListBox, ResultsPopover, Root} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
-  EMPTY_RECORD,
   AUTOCOMPLETE_LISTBOX_IGNORE_KEYS,
   AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS,
   AUTOCOMPLETE_POPOVER_MARGINS,
@@ -28,7 +27,7 @@ import {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'
 /**
  * @public
  */
-export interface AutocompleteProps<Option extends BaseAutocompleteOption> {
+export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {
   border?: boolean
   customValidity?: string
   filterOption?: (query: string, option: Option) => boolean
@@ -49,7 +48,8 @@ export interface AutocompleteProps<Option extends BaseAutocompleteOption> {
   openButton?: boolean | AutocompleteOpenButtonProps
   options?: Option[]
   padding?: number | number[]
-  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
+  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
   prefix?: React.ReactNode
   radius?: number | number[]
   /**
@@ -175,7 +175,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const popoverMouseWithinRef = useRef(false)
   const listBoxId = `${id}-listbox`
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
-  const padding = useResponsiveProp(paddingProp)
+  const padding = useArrayProp(paddingProp)
   const currentOption = useMemo(
     () => (value !== null ? options.find((o) => o.value === value) : undefined),
     [options, value]
@@ -560,10 +560,17 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     if (filteredOptions.length === 0) return null
 
     return (
-      <ListBox onKeyDown={handleListBoxKeyDown} padding={1} {...listBox} tabIndex={-1}>
+      <ListBox
+        data-ui="AutoComplete__results"
+        onKeyDown={handleListBoxKeyDown}
+        padding={1}
+        {...listBox}
+        tabIndex={-1}
+      >
         <Stack
           as="ul"
           aria-multiselectable={false}
+          data-ui="AutoComplete__resultsList"
           id={listBoxId}
           ref={listBoxElementRef}
           role="listbox"

package/src/components/autocomplete/constants.ts

@@ -1,10 +1,5 @@
 import {Placement, PopoverMargins} from '../../types'
 
-/**
- * @internal
- */
-export const EMPTY_RECORD = {}
-
 /**
  * @internal
  */

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -7,7 +7,7 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import {useClickOutside} from '../../hooks'
+import {useArrayProp, useClickOutside} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
 import {ExpandButton, Root} from './breadcrumbs.styles'
 
@@ -27,7 +27,8 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
   ref: React.ForwardedRef<HTMLOListElement>
 ) {
-  const {children, maxLength, separator, space = 2, ...restProps} = props
+  const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
+  const space = useArrayProp(spaceRaw)
   const [open, setOpen] = useState(false)
   const [expandElement, setExpandElement] = useState<HTMLButtonElement | null>(null)
   const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)

package/src/components/dialog/dialog.tsx

@@ -2,7 +2,7 @@ import {CloseIcon} from '@sanity/icons'
 import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {focusFirstDescendant, focusLastDescendant} from '../../helpers'
-import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
+import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
@@ -138,11 +138,14 @@ const DialogCard = forwardRef(function DialogCard(
     id,
     onClickOutside,
     onClose,
-    radius,
+    radius: radiusProp,
     scheme,
-    shadow,
-    width,
+    shadow: shadowProp,
+    width: widthProp,
   } = props
+  const radius = useArrayProp(radiusProp)
+  const shadow = useArrayProp(shadowProp)
+  const width = useArrayProp(widthProp)
   const forwardedRef = useForwardedRef(ref)
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const localContentRef = useRef<HTMLDivElement | null>(null)
@@ -255,7 +258,7 @@ export const Dialog = forwardRef(function Dialog(
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
-    cardRadius = 3,
+    cardRadius: cardRadiusProp = 3,
     cardShadow = 4,
     children,
     contentRef,
@@ -264,14 +267,19 @@ export const Dialog = forwardRef(function Dialog(
     id,
     onClickOutside,
     onClose,
-    padding = 4,
+    padding: paddingProp = 4,
     portal,
-    position = dialog.position || 'fixed',
+    position: positionProp = dialog.position || 'fixed',
     scheme,
-    width = 0,
-    zOffset = dialog.zOffset || theme.sanity.layer?.dialog.zOffset,
+    width: widthProp = 0,
+    zOffset: zOffsetProp = dialog.zOffset || theme.sanity.layer?.dialog.zOffset,
     ...restProps
   } = props
+  const cardRadius = useArrayProp(cardRadiusProp)
+  const padding = useArrayProp(paddingProp)
+  const position = useArrayProp(positionProp)
+  const width = useArrayProp(widthProp)
+  const zOffset = useArrayProp(zOffsetProp)
   const preDivRef = useRef<HTMLDivElement | null>(null)
   const postDivRef = useRef<HTMLDivElement | null>(null)
   const cardRef = useRef<HTMLDivElement | null>(null)

package/src/components/dialog/styles.ts

@@ -1,12 +1,12 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, responsive, ThemeProps} from '../../styles'
+import {_responsive, ThemeProps} from '../../styles'
 import {DialogPosition} from '../../types'
 
 /**
  * @internal
  */
 export interface ResponsiveDialogPositionStyleProps {
-  $position: DialogPosition | DialogPosition[]
+  $position: DialogPosition[]
 }
 
 export function dialogStyle({theme}: ThemeProps): CSSObject {
@@ -34,5 +34,5 @@ export function responsiveDialogPositionStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$position), (position) => ({'&&': {position}}))
+  return _responsive(media, props.$position, (position) => ({'&&': {position}}))
 }

package/src/components/hotkeys/hotkeys.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {Inline, KBD} from '../../primitives'
 
 /**
@@ -33,7 +34,8 @@ export const Hotkeys = forwardRef(function Hotkeys(
   props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
   ref: React.Ref<HTMLElement>
 ) {
-  const {fontSize, keys, padding, radius, space = 1, ...restProps} = props
+  const {fontSize, keys, padding, radius, space: spaceProp = 1, ...restProps} = props
+  const space = useArrayProp(spaceProp)
 
   if (!keys || keys.length === 0) {
     return <></>

package/src/components/menu/__workshop__/constrainedInBoundary.tsx

@@ -8,11 +8,19 @@ import {
   Menu,
   MenuButton,
   MenuItem,
-  PopoverProps,
   SelectableTone,
   Text,
 } from '@sanity/ui'
-import React, {useMemo, useState} from 'react'
+import React, {useState} from 'react'
+import {MenuButtonProps} from '../menuButton'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+  placement: 'bottom',
+  portal: true,
+  // preventOverflow: true,
+  // width: 1,
+}
 
 const items: {tone: SelectableTone; message: string}[] = [
   {
@@ -88,17 +96,6 @@ const items: {tone: SelectableTone; message: string}[] = [
 export default function ConstrainedInBoundaryStory() {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
-  const popoverProps: PopoverProps = useMemo(
-    () => ({
-      constrainSize: true,
-      placement: 'bottom',
-      portal: true,
-      preventOverflow: true,
-      width: 1,
-    }),
-    []
-  )
-
   return (
     <Box height="fill" padding={[4, 5, 6]} sizing="border">
       <Card height="fill" shadow={1}>
@@ -129,7 +126,7 @@ export default function ConstrainedInBoundaryStory() {
                         })}
                       </Menu>
                     }
-                    popover={popoverProps}
+                    popover={POPOVER_PROPS}
                   />
                 </BoundaryElementProvider>
               </Box>

package/src/components/menu/__workshop__/groups.tsx

@@ -129,7 +129,7 @@ export default function GroupsStory() {
                   />
                 </Menu>
               }
-              popover={{constrainSize: true, portal: true, preventOverflow: true}}
+              // popover={{constrainSize: true, portal: true, preventOverflow: true}}
             />
           </LayerProvider>
 

package/src/components/menu/menuButton.tsx

@@ -62,17 +62,17 @@ export const MenuButton = forwardRef(function MenuButton(
 ) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
-    boundaryElement,
+    boundaryElement: deprecated_boundaryElement,
     button: buttonProp,
     id,
     menu: menuProp,
     onClose,
-    placement,
-    popoverScheme,
-    portal,
+    placement: deprecated_placement,
+    popoverScheme: deprecated_popoverScheme,
+    portal: deprecated_portal = true,
     popover,
-    popoverRadius,
-    preventOverflow,
+    popoverRadius: deprecated_popoverRadius,
+    preventOverflow: deprecated_preventOverflow,
   } = props
   const [open, setOpen] = useState(false)
   const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)
@@ -238,15 +238,23 @@ export const MenuButton = forwardRef(function MenuButton(
 
   const popoverProps: PopoverProps = useMemo(() => {
     return {
-      boundaryElement,
-      placement,
-      portal,
-      radius: popoverRadius,
-      overflow: preventOverflow,
-      scheme: popoverScheme,
+      boundaryElement: deprecated_boundaryElement,
+      placement: deprecated_placement,
+      portal: deprecated_portal,
+      radius: deprecated_popoverRadius,
+      preventOverflow: deprecated_preventOverflow,
+      scheme: deprecated_popoverScheme,
       ...(popover || {}),
     }
-  }, [boundaryElement, placement, popover, popoverRadius, portal, preventOverflow, popoverScheme])
+  }, [
+    deprecated_boundaryElement,
+    deprecated_preventOverflow,
+    deprecated_placement,
+    popover,
+    deprecated_popoverRadius,
+    deprecated_portal,
+    deprecated_popoverScheme,
+  ])
 
   return (
     <Popover {...popoverProps} content={menu} data-ui="MenuButton__popover" open={open}>

package/src/components/menu/menuGroup.tsx

@@ -1,6 +1,7 @@
 import {ChevronRightIcon} from '@sanity/icons'
 import React, {createElement, isValidElement, useCallback, useEffect, useRef, useState} from 'react'
 import {isValidElementType} from 'react-is'
+import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {SelectableTone} from '../../types/selectable'
@@ -36,7 +37,7 @@ export function MenuGroup(
     icon,
     onClick,
     padding = 3,
-    popover = {},
+    popover,
     radius = 2,
     space = 3,
     text,
@@ -163,7 +164,7 @@ export function MenuGroup(
         aria-pressed={as === 'button' ? withinMenu : undefined}
         data-pressed={as !== 'button' ? withinMenu : undefined}
         data-selected={!withinMenu && active ? '' : undefined}
-        $radius={radius}
+        $radius={useArrayProp(radius)}
         $tone={tone}
         onClick={handleClick}
         onKeyDown={handleKeyDown}

package/src/components/menu/menuItem.tsx

@@ -8,7 +8,7 @@ import React, {
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
-import {useForwardedRef} from '../../hooks'
+import {useArrayProp, useForwardedRef} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
@@ -111,21 +111,20 @@ export const MenuItem = forwardRef(function MenuItem(
 
   return (
     <Selectable
-      data-as={as}
       data-ui="MenuItem"
-      forwardedAs={as}
       {...restProps}
       aria-pressed={as === 'button' && pressed}
       data-pressed={as !== 'button' && pressed ? '' : undefined}
       data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
-      $radius={radius}
+      forwardedAs={as}
+      $radius={useArrayProp(radius)}
+      $padding={useArrayProp(0)}
       $tone={tone}
       disabled={disabled}
       onClick={handleClick}
       onMouseEnter={onItemMouseEnter}
       onMouseLeave={onItemMouseLeave}
-      padding={0}
       ref={setRef}
       role="menuitem"
       tabIndex={-1}

package/src/components/skeleton/skeleton.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef, useEffect, useState} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {Box} from '../../primitives'
 import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
@@ -44,5 +45,13 @@ export const Skeleton = forwardRef(function Skeleton(
     }
   }, [delay])
 
-  return <Root {...restProps} $animated={animated} $radius={radius} $visible={visible} ref={ref} />
+  return (
+    <Root
+      {...restProps}
+      $animated={animated}
+      $radius={useArrayProp(radius)}
+      $visible={visible}
+      ref={ref}
+    />
+  )
 })