@sanity/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/types/src/index.d.ts

@@ -8592,8 +8592,6 @@ export declare interface PopoverProps
    * @beta
    */
   __unstable_margins?: PopoverMargins
-  /** @deprecated Use `fallbackPlacements` instead. */
-  allowedAutoPlacements?: Placement[]
   arrow?: boolean
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
@@ -8610,10 +8608,6 @@ export declare interface PopoverProps
   referenceElement?: HTMLElement | null
   matchReferenceWidth?: boolean
   scheme?: ThemeColorSchemeKey
-  /** @deprecated No longer supported. */
-  tether?: boolean
-  /** @deprecated No longer supported. */
-  tetherOffset?: number | ((...args: any[]) => number)
   tone?: CardTone
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.0.0-beta.30",
+  "version": "1.0.0-beta.32",
   "sideEffects": false,
   "types": "./dist/types/src/index.d.ts",
   "source": "./src/index.ts",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.0",
-    "@sanity/color": "2.1.19-beta.1",
-    "@sanity/icons": "1.3.9-beta.1",
+    "@sanity/color": "2.1.19-beta.3",
+    "@sanity/icons": "1.3.9-beta.3",
     "framer-motion": "^7.5.3",
     "react-refractor": "^2.1.7"
   },
@@ -69,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9555be81dc9d9ad2997ab34ecb59c91ec0b27a49"
+  "gitHead": "4b884675a828c6aad24f80390a96af14e8084ddc"
 }

package/src/__workshop__/constants.ts

@@ -8,6 +8,7 @@ import {
   ButtonTone,
   CardTone,
   DialogPosition,
+  FlexAlign,
   FlexJustify,
   Placement,
   TextAlign,
@@ -105,14 +106,22 @@ export const WORKSHOP_FLEX_DIRECTION_OPTIONS: {[key: string]: 'row' | 'column'}
   Column: 'column',
 }
 
-export const WORKSHOP_FLEX_JUSTIFY_OPTIONS: FlexJustify[] = [
-  'flex-start',
-  'flex-end',
-  'center',
-  'space-between',
-  'space-around',
-  'space-evenly',
-]
+export const WORKSHOP_FLEX_ALIGN_OPTIONS: Record<FlexAlign, FlexAlign> = {
+  baseline: 'baseline',
+  center: 'center',
+  'flex-end': 'flex-end',
+  'flex-start': 'flex-start',
+  stretch: 'stretch',
+}
+
+export const WORKSHOP_FLEX_JUSTIFY_OPTIONS: Record<FlexJustify, FlexJustify> = {
+  center: 'center',
+  'flex-end': 'flex-end',
+  'flex-start': 'flex-start',
+  'space-around': 'space-around',
+  'space-between': 'space-between',
+  'space-evenly': 'space-evenly',
+}
 
 export const WORKSHOP_FONT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey} = {
   Regular: 'regular',
@@ -148,19 +157,19 @@ export const WORKSHOP_LABEL_FONT_SIZE_OPTIONS = {
   '4': 4,
 }
 
-export const WORKSHOP_PLACEMENT_OPTIONS: {[key: string]: Placement} = {
-  Top: 'top',
-  'Top start': 'top-start',
-  'Top end': 'top-end',
-  Right: 'right',
-  'Right start': 'right-start',
-  'Right end': 'right-end',
-  Left: 'left',
-  'Left start': 'left-start',
-  'Left end': 'left-end',
-  Bottom: 'bottom',
-  'Bottom start': 'bottom-start',
-  'Bottom end': 'bottom-end',
+export const WORKSHOP_PLACEMENT_OPTIONS: Record<Placement, Placement> = {
+  top: 'top',
+  'top-start': 'top-start',
+  'top-end': 'top-end',
+  right: 'right',
+  'right-start': 'right-start',
+  'right-end': 'right-end',
+  left: 'left',
+  'left-start': 'left-start',
+  'left-end': 'left-end',
+  bottom: 'bottom',
+  'bottom-start': 'bottom-start',
+  'bottom-end': 'bottom-end',
 }
 
 export const WORKSHOP_RADIUS_OPTIONS = {
@@ -278,11 +287,11 @@ export const WORKSHOP_TOAST_STATUS_OPTIONS: {
 }
 
 export const WORKSHOP_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
+  Auto: 'auto',
   '0': 0,
   '1': 1,
   '2': 2,
   '3': 3,
   '4': 4,
   '5': 5,
-  Auto: 'auto',
 }

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

@@ -1,6 +1,6 @@
 import {SpinnerIcon} from '@sanity/icons'
 import styled, {keyframes} from 'styled-components'
-import {Box, Popover} from '../../primitives'
+import {Box} from '../../primitives'
 
 /**
  * @internal
@@ -20,15 +20,6 @@ export const ListBox = styled(Box)`
   }
 `
 
-/**
- * @internal
- */
-export const ResultsPopover = styled(Popover)`
-  &[data-popper-reference-hidden='true'] {
-    display: none;
-  }
-`
-
 const rotate = keyframes`
   from {
     transform: rotate(0deg);

package/src/components/autocomplete/autocomplete.tsx

@@ -20,8 +20,18 @@ import {
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
 import {useArrayProp, useForwardedRef} from '../../hooks'
-import {Box, BoxProps, Button, Card, PopoverProps, Stack, Text, TextInput} from '../../primitives'
-import {AnimatedSpinnerIcon, ListBox, ResultsPopover, Root} from './autocomplete.styles'
+import {
+  Box,
+  BoxProps,
+  Button,
+  Card,
+  Popover,
+  PopoverProps,
+  Stack,
+  Text,
+  TextInput,
+} from '../../primitives'
+import {AnimatedSpinnerIcon, ListBox, Root} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
@@ -630,7 +640,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     }
 
     return (
-      <ResultsPopover
+      <Popover
         __unstable_margins={AUTOCOMPLETE_POPOVER_MARGINS}
         arrow={false}
         constrainSize

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

@@ -1,7 +1,11 @@
 import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuItem, Stack} from '@sanity/ui'
+import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
 import {useRef} from 'react'
 
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+}
+
 export default function ClosableMenuButtonStory() {
   const ref = useRef<HTMLButtonElement | null>(null)
 
@@ -33,7 +37,7 @@ export default function ClosableMenuButtonStory() {
               </Stack>
             </Menu>
           }
-          popover={{constrainSize: true}}
+          popover={POPOVER_PROPS}
           ref={ref}
         />
       </Stack>

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

@@ -18,8 +18,6 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
   placement: 'bottom',
   portal: true,
-  // preventOverflow: true,
-  // width: 1,
 }
 
 const items: {tone: SelectableTone; message: string}[] = [
@@ -115,15 +113,11 @@ export default function ConstrainedInBoundaryStory() {
                     id="validation-menu"
                     menu={
                       <Menu>
-                        {items.map((item, itemIndex) => {
-                          return (
-                            <MenuItem key={itemIndex} tone={item.tone}>
-                              <Box padding={3}>
-                                <Text>{item.message}</Text>
-                              </Box>
-                            </MenuItem>
-                          )
-                        })}
+                        {items.map((item, itemIndex) => (
+                          <MenuItem key={itemIndex} padding={5} tone={item.tone}>
+                            <Text>{item.message}</Text>
+                          </MenuItem>
+                        ))}
                       </Menu>
                     }
                     popover={POPOVER_PROPS}

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

@@ -1,7 +1,12 @@
 import {SelectIcon} from '@sanity/icons'
-import {Button, Flex, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {Button, Flex, Menu, MenuButton, MenuButtonProps, MenuItem} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+  matchReferenceWidth: true,
+}
+
 export default function DisableFocusOnCloseStory() {
   const disableRestoreFocusOnClose = useBoolean('Disable restore focus on close', false)
 
@@ -28,7 +33,7 @@ export default function DisableFocusOnCloseStory() {
             <MenuItem text="Test 3" />
           </Menu>
         }
-        popover={{constrainSize: true, matchReferenceWidth: true}}
+        popover={POPOVER_PROPS}
       />
     </Flex>
   )

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

@@ -6,12 +6,25 @@ import {
   LayerProvider,
   Menu,
   MenuButton,
+  MenuButtonProps,
   MenuDivider,
   MenuGroup,
   MenuItem,
 } from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
 
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  placement: 'bottom',
+  portal: true,
+  preventOverflow: true,
+}
+
+const NESTED_POPOVER_PROPS: MenuButtonProps['popover'] = {
+  placement: 'right-start',
+  portal: true,
+  preventOverflow: true,
+}
+
 export default function GroupsStory() {
   return (
     <Box padding={[4, 5, 6]}>
@@ -63,7 +76,7 @@ export default function GroupsStory() {
                     fontSize={1}
                     onClick={useAction('Share')}
                     padding={2}
-                    popover={{placement: 'right-start', portal: true}}
+                    popover={NESTED_POPOVER_PROPS}
                     text="Share"
                   >
                     <MenuItem
@@ -89,7 +102,7 @@ export default function GroupsStory() {
                       fontSize={1}
                       onClick={useAction('Share / More')}
                       padding={2}
-                      popover={{placement: 'right-start', portal: true}}
+                      popover={NESTED_POPOVER_PROPS}
                       text="More"
                     >
                       <MenuItem
@@ -128,7 +141,7 @@ export default function GroupsStory() {
                   />
                 </Menu>
               }
-              // popover={{constrainSize: true, portal: true, preventOverflow: true}}
+              popover={POPOVER_PROPS}
             />
           </LayerProvider>
 

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

@@ -7,16 +7,26 @@ import {
   LayerProvider,
   Menu,
   MenuButton,
+  MenuButtonProps,
   MenuDivider,
   MenuItem,
 } from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
+import {useMemo} from 'react'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function MenuButtonStory() {
   const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
   const portal = useBoolean('Portal', false, 'Props')
 
+  const popover: MenuButtonProps['popover'] = useMemo(
+    () => ({
+      constrainSize: true,
+      portal,
+    }),
+    [portal]
+  )
+
   return (
     <Card height="fill" tone={layoutTone}>
       <Box padding={[4, 5, 6]}>
@@ -56,7 +66,7 @@ export default function MenuButtonStory() {
                   />
                 </Menu>
               }
-              popover={{constrainSize: true, portal}}
+              popover={popover}
             />
           </LayerProvider>
           <Button mode="ghost" id="next-button" text="Next" />

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

@@ -14,11 +14,18 @@ import {
   Flex,
   Menu,
   MenuButton,
+  MenuButtonProps,
   MenuDivider,
   MenuGroup,
   MenuItem,
 } from '@sanity/ui'
 
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  placement: 'right',
+  portal: true,
+  preventOverflow: true,
+}
+
 export default function MenuGroupRightStory() {
   return (
     <Card height="fill" tone="transparent">
@@ -46,7 +53,7 @@ export default function MenuGroupRightStory() {
                       <MenuItem icon={TrashIcon} text="Remove" tone="critical" />
                     </Menu>
                   }
-                  popover={{placement: 'right', portal: true}}
+                  popover={POPOVER_PROPS}
                 />
               </Box>
             </Flex>

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

@@ -1,6 +1,10 @@
-import {Box, Button, Menu, MenuButton, MenuItem, Stack, useToast} from '@sanity/ui'
+import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack, useToast} from '@sanity/ui'
 import {useCallback} from 'react'
 
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+}
+
 export default function OnCloseMenuButton() {
   const {push} = useToast()
 
@@ -28,7 +32,7 @@ export default function OnCloseMenuButton() {
               </Stack>
             </Menu>
           }
-          popover={{constrainSize: true}}
+          popover={POPOVER_PROPS}
         />
         <Button text="Blur test button" mode="ghost" />
       </Stack>

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

@@ -1,7 +1,21 @@
 import {CheckmarkIcon, ClockIcon, ExpandIcon, SearchIcon} from '@sanity/icons'
-import {Box, Button, Code, Menu, MenuButton, MenuDivider, MenuItem, Stack} from '@sanity/ui'
+import {
+  Box,
+  Button,
+  Code,
+  Menu,
+  MenuButton,
+  MenuButtonProps,
+  MenuDivider,
+  MenuItem,
+  Stack,
+} from '@sanity/ui'
 import {useState} from 'react'
 
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  matchReferenceWidth: true,
+}
+
 export default function SelectedItemStory() {
   const [selectedIndex, setSelectedIndex] = useState(0)
 
@@ -42,7 +56,7 @@ export default function SelectedItemStory() {
               />
             </Menu>
           }
-          popover={{matchReferenceWidth: true}}
+          popover={POPOVER_PROPS}
         />
       </Stack>
     </Box>

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

@@ -1,4 +1,14 @@
-import {Box, Button, Menu, MenuButton, MenuItem, Stack} from '@sanity/ui'
+import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  __unstable_margins: [1, 1, 1, 1],
+  arrow: false,
+  constrainSize: true,
+  fallbackPlacements: ['top-start'],
+  matchReferenceWidth: true,
+  radius: 0,
+  placement: 'bottom-start',
+}
 
 export default function WithoutArrowStory() {
   return (
@@ -14,15 +24,7 @@ export default function WithoutArrowStory() {
               <MenuItem text="Item 3" />
             </Menu>
           }
-          popover={{
-            __unstable_margins: [1, 1, 1, 1],
-            arrow: false,
-            constrainSize: true,
-            fallbackPlacements: ['top-start'],
-            matchReferenceWidth: true,
-            radius: 0,
-            placement: 'bottom-start',
-          }}
+          popover={POPOVER_PROPS}
         />
       </Stack>
     </Box>

package/src/primitives/card/styles.ts

@@ -48,10 +48,12 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): FlattenSimple
 export function cardColorStyle(props: CardStyleProps & ThemeProps): FlattenSimpleInterpolation {
   const {$checkered, $focusRing, theme} = props
   const {focusRing} = theme.sanity
-  const {base, card} = theme.sanity.color
+  const {base, card, dark} = theme.sanity.color
   const border = {width: 0, color: 'var(--card-border-color)'}
 
   return css`
+    color-scheme: ${dark ? 'dark' : 'light'};
+
     ${_colorVarsStyle(base, card.enabled, $checkered)}
 
     background-color: var(--card-bg-color);

package/src/primitives/popover/__workshop__/{RightAlignedStory.tsx → AlignedStory.tsx}

@@ -1,10 +1,22 @@
 import {EllipsisVerticalIcon} from '@sanity/icons'
 import {Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
+import {
+  WORKSHOP_FLEX_ALIGN_OPTIONS,
+  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
+  WORKSHOP_PLACEMENT_OPTIONS,
+  WORKSHOP_WIDTH_OPTIONS,
+} from '../../../__workshop__/constants'
 
-export default function RightAlignedStory() {
+export default function AlignedStory() {
   const constrainSize = useBoolean('Constrain size', false)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const portal = useBoolean('Portal', true)
+  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 'auto')
+
+  const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS, 'flex-start')
+  const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'flex-end')
 
   const [open, setOpen] = useState(false)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
@@ -33,18 +45,18 @@ export default function RightAlignedStory() {
 
   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}>
+      <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1} sizing="border">
+        <Flex align={flexAlign} height="fill" justify={flexJustify}>
           <Popover
             boundaryElement={boundaryElement}
             constrainSize={constrainSize}
             content={content}
             open={open}
-            overflow="auto"
             padding={3}
-            portal
-            placement="bottom"
+            portal={portal}
+            placement={placement}
             ref={setPopoverElement}
+            width={width}
           >
             <Button
               icon={EllipsisVerticalIcon}

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

@@ -24,28 +24,31 @@ export default function PlainStory() {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
   return (
-    <PortalProvider element={portalElement}>
-      <Text muted size={1} style={{position: 'absolute', top: 40, left: 60}}>
-        Scroll this box to reveal the popover
-      </Text>
-      <div
-        ref={setBoundaryElement}
-        style={{
-          height: 'calc(100vh - 120px)',
-          position: 'relative',
-          margin: 60,
-          overflow: 'auto',
-          outline: '1px solid red',
-          width: 'calc(100vw - 120px)',
-        }}
-      >
-        <Card padding={4} style={{textAlign: 'center'}}>
-          <div style={{padding: '150vh 0'}}>
+    <Card height="fill" padding={3} sizing="border">
+      <PortalProvider element={portalElement}>
+        <Text align="center" muted size={1}>
+          Scroll this box to reveal the popover
+        </Text>
+        <div
+          ref={setBoundaryElement}
+          style={{
+            height: 'calc(100vh - 120px)',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            margin: 60,
+            overflow: 'auto',
+            outline: '1px solid red',
+            width: 'calc(100vw - 120px)',
+          }}
+        >
+          <div style={{padding: '150vh 0', textAlign: 'center'}}>
             <Popover
               __unstable_margins={[1, 1, 1, 1]}
               arrow={arrow}
               boundaryElement={boundaryElementFlag ? boundaryElement : undefined}
               constrainSize={constrainSize}
+              content={<Text>popover content</Text>}
               fallbackPlacements={['top', 'bottom']}
               matchReferenceWidth={matchReferenceWidth}
               open={open}
@@ -60,9 +63,9 @@ export default function PlainStory() {
               <Button text="This button is the popover reference" />
             </Popover>
           </div>
-        </Card>
-      </div>
-      <div ref={setPortalElement} />
-    </PortalProvider>
+        </div>
+        <div ref={setPortalElement} />
+      </PortalProvider>
+    </Card>
   )
 }

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

@@ -15,6 +15,7 @@ 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 constrainSize = useBoolean('Constrain size', true)
   const matchReferenceWidth = useBoolean('Match reference width', false)
   const open = useBoolean('Open', true)
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
@@ -58,6 +59,7 @@ export default function TestStory(): ReactElement {
               <Popover
                 arrow={arrow}
                 content={<Text size={1}>{text}</Text>}
+                constrainSize={constrainSize}
                 fallbackPlacements={['left', 'bottom', 'right', 'top']}
                 matchReferenceWidth={matchReferenceWidth}
                 open={open}

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

@@ -28,8 +28,8 @@ export default defineScope('primitives/popover', 'Popover', [
     component: lazy(() => import('./MarginsStory')),
   },
   {
-    name: 'right-aligned',
-    title: 'Right-aligned',
-    component: lazy(() => import('./RightAlignedStory')),
+    name: 'aligned',
+    title: 'Aligned',
+    component: lazy(() => import('./AlignedStory')),
   },
 ])

package/src/primitives/popover/constants.ts

@@ -0,0 +1,10 @@
+import {PopoverMargins} from '../../types'
+
+export const DEFAULT_POPOVER_DISTANCE = 4
+
+export const DEFAULT_POPOVER_PADDING = 4
+
+export const DEFAULT_POPOVER_ARROW_WIDTH = 27
+export const DEFAULT_POPOVER_ARROW_HEIGHT = 11
+
+export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]