@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/components/menu/MenuItem.tsx

@@ -0,0 +1,153 @@
+import {
+  type GapStyleProps,
+  type PaddingStyleProps,
+  type RadiusStyleProps,
+  type ResponsiveProp,
+  selectable_hotkeys,
+} from '@sanity/ui-css'
+import type {ElementTone, FontTextSize} from '@sanity/ui-tokens'
+import {
+  type ElementType,
+  isValidElement,
+  type MouseEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import {isValidElementType} from 'react-is'
+
+import type {ComponentType, Props} from '../../core/types'
+import {Selectable} from '../../primitives/selectable/Selectable'
+import {Text} from '../../primitives/text/Text'
+import {Hotkeys} from '../hotkeys/Hotkeys'
+import {useMenu} from './useMenu'
+
+/** @public */
+export const DEFAULT_MENU_ITEM_ELEMENT = 'button'
+
+/** @public */
+export type MenuItemOwnProps = GapStyleProps &
+  PaddingStyleProps &
+  RadiusStyleProps & {
+    disabled?: boolean
+    fontSize?: ResponsiveProp<FontTextSize>
+    hotkeys?: string[]
+    icon?: ElementType | ReactNode
+    iconRight?: ElementType | ReactNode
+    pressed?: boolean
+    selected?: boolean
+    text?: ReactNode
+    tone?: ElementTone
+  }
+
+/** @public */
+export type MenuItemElementType = 'button' | 'a' | ComponentType
+
+/** @public */
+export type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Props<
+  MenuItemOwnProps,
+  E
+>
+
+/** @public */
+export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(
+  props: MenuItemProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_MENU_ITEM_ELEMENT,
+    children,
+    disabled,
+    fontSize = 1,
+    gap,
+    hotkeys,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
+    onClick,
+    padding = 3,
+    pressed,
+    radius = 3,
+    ref: forwardedRef,
+    role = 'menuitem',
+    selected: selectedProp,
+    text,
+    tone = 'default',
+    ...rest
+  } = props as MenuItemProps<typeof DEFAULT_MENU_ITEM_ELEMENT>
+
+  const menu = useMenu()
+  const {activeElement, mount, onItemClick, onItemMouseEnter, onItemMouseLeave} = menu
+  const [rootElement, setRootElement] = useState<HTMLButtonElement | null>(null)
+  const active = Boolean(activeElement) && activeElement === rootElement
+  const ref = useRef<HTMLButtonElement | null>(null)
+
+  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
+
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      if (disabled) return
+      if (onClick) onClick(event)
+      if (onItemClick) onItemClick(event)
+    },
+    [disabled, onClick, onItemClick],
+  )
+
+  const setRef = useCallback((el: HTMLButtonElement | null) => {
+    ref.current = el
+    setRootElement(el)
+  }, [])
+
+  return (
+    <Selectable
+      data-pressed={pressed ? '' : undefined}
+      data-ui="MenuItem"
+      {...rest}
+      ref={setRef}
+      as={as}
+      disabled={disabled}
+      display="flex"
+      gap={gap ?? padding}
+      padding={padding}
+      radius={radius}
+      role={role}
+      selected={active}
+      tabIndex={-1}
+      tone={tone}
+      type={as === 'button' ? 'button' : undefined}
+      onClick={handleClick}
+      onMouseEnter={onItemMouseEnter}
+      onMouseLeave={onItemMouseLeave}
+    >
+      {IconComponent && (
+        <Text flex="none" muted size={fontSize}>
+          {isValidElement(IconComponent) && IconComponent}
+          {isValidElementType(IconComponent) && <IconComponent />}
+        </Text>
+      )}
+
+      {text && (
+        <Text flex={1} size={fontSize} textOverflow="ellipsis" weight="medium">
+          {text}
+        </Text>
+      )}
+
+      {children}
+
+      {hotkeys && <Hotkeys className={selectable_hotkeys()} keys={hotkeys} />}
+
+      {IconRightComponent && (
+        <Text flex="none" muted size={fontSize}>
+          {isValidElement(IconRightComponent) && IconRightComponent}
+          {isValidElementType(IconRightComponent) && <IconRightComponent />}
+        </Text>
+      )}
+    </Selectable>
+  )
+}

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

@@ -0,0 +1,45 @@
+import {Button, Flex, Menu, MenuButton, MenuItem, Text} from '@sanity/ui'
+import {forwardRef} from 'react'
+
+const CustomLink = forwardRef(function CustomLink(
+  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+): React.JSX.Element {
+  const {children, req, ...rest} = props
+
+  return (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    <a data-required={req} {...rest} ref={ref} href="#">
+      {children}
+    </a>
+  )
+})
+
+export default function AsComponentStory(): React.JSX.Element {
+  const props = {href: '#'}
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <MenuButton
+        button={<Button text="Menu with components" />}
+        id="test"
+        menu={
+          <Menu>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="1">
+              <Text>Component 1</Text>
+            </MenuItem>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="2">
+              <Text>Component 2</Text>
+            </MenuItem>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="3">
+              <Text>Component 3</Text>
+            </MenuItem>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="4">
+              <Text>Component 3</Text>
+            </MenuItem>
+          </Menu>
+        }
+      />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,36 @@
+import {UsersIcon} from '@sanity/icons'
+import {Avatar, Badge, Box, Button, Flex, Menu, MenuButton, MenuItem, Text} from '@sanity/ui'
+
+export default function AvatarMenuStory(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <MenuButton
+        button={<Button icon={UsersIcon} />}
+        id="avatar-menu"
+        menu={
+          <Menu>
+            <MenuItem hotkeys={['Cmd', '1']} padding={1}>
+              <Box flex="none">
+                <Avatar color="purple" initials="JS" />
+              </Box>
+              <Box flex={1} padding={2}>
+                <Text size={1}>Jane Smith</Text>
+              </Box>
+              <Box padding={1}>
+                <Badge>Me</Badge>
+              </Box>
+            </MenuItem>
+            <MenuItem hotkeys={['Cmd', '2']} padding={1}>
+              <Box flex="none">
+                <Avatar color="magenta" initials="JS" />
+              </Box>
+              <Box flex={1} padding={2}>
+                <Text size={1}>John Doe</Text>
+              </Box>
+            </MenuItem>
+          </Menu>
+        }
+      />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,47 @@
+import {AddIcon} from '@sanity/icons'
+import {Box, Button, Menu, MenuButton, type MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
+import {useRef} from 'react'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+}
+
+export default function ClosableMenuButtonStory(): React.JSX.Element {
+  const ref = useRef<HTMLButtonElement | null>(null)
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack>
+        <MenuButton
+          ref={ref}
+          button={<Button text="Open" />}
+          id="closable-example"
+          menu={
+            <Menu gap={0} padding={0}>
+              <Stack gap={1} padding={1}>
+                <MenuItem text="Item 1" />
+                <MenuItem text="Item 2" />
+                <MenuItem text="Item 3" />
+                <MenuItem text="Item 4" />
+              </Stack>
+              <Stack padding={1} style={{borderTop: `1px solid ${vars.color.border}`}}>
+                <Button
+                  icon={AddIcon}
+                  mode="bleed"
+                  text="Add item"
+                  tone="primary"
+                  onClick={() => {
+                    ref.current?.click()
+                    ref.current?.focus()
+                  }}
+                />
+              </Stack>
+            </Menu>
+          }
+          popover={POPOVER_PROPS}
+        />
+      </Stack>
+    </Box>
+  )
+}

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

@@ -0,0 +1,133 @@
+import {ErrorOutlineIcon} from '@sanity/icons'
+import {
+  BoundaryElementProvider,
+  Box,
+  Button,
+  Card,
+  Flex,
+  Menu,
+  MenuButton,
+  type MenuButtonProps,
+  MenuItem,
+  Text,
+} from '@sanity/ui'
+import type {ElementTone} from '@sanity/ui/tokens'
+import {useState} from 'react'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+  placement: 'bottom',
+  portal: true,
+}
+
+const items: {tone: ElementTone; message: string}[] = [
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+]
+
+export default function ConstrainedInBoundaryStory(): React.JSX.Element {
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <Box height="fill" padding={[4, 5, 6]} sizing="border">
+      <Card height="fill" shadow={1}>
+        <Flex height="fill">
+          <Card flex={1} padding={4}>
+            <Text>Pane</Text>
+          </Card>
+          <Card ref={setBoundaryElement} borderLeft flex={1} padding={2}>
+            <Flex>
+              <Box flex={1} padding={3}>
+                <Text>Pane</Text>
+              </Box>
+              <Box>
+                <BoundaryElementProvider element={boundaryElement}>
+                  <MenuButton
+                    button={<Button icon={ErrorOutlineIcon} mode="bleed" tone="critical" />}
+                    id="validation-menu"
+                    menu={
+                      <Menu>
+                        {items.map((item, itemIndex) => (
+                          <MenuItem key={itemIndex} padding={5} tone={item.tone}>
+                            <Text>{item.message}</Text>
+                          </MenuItem>
+                        ))}
+                      </Menu>
+                    }
+                    popover={POPOVER_PROPS}
+                  />
+                </BoundaryElementProvider>
+              </Box>
+            </Flex>
+          </Card>
+        </Flex>
+      </Card>
+    </Box>
+  )
+}

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

@@ -0,0 +1,47 @@
+import {Card, LayerProvider, Menu, MenuDivider, MenuItem, Stack, Text} from '@sanity/ui'
+
+import {CardWrapper} from '$workshop'
+
+export default function CustomMenuItemStory(): React.JSX.Element {
+  return (
+    <CardWrapper pattern="halftone" tone="transparent" width={0}>
+      <Card radius={4} shadow={2}>
+        <LayerProvider>
+          <Menu>
+            <MenuItem padding={3}>
+              <Stack gap={3}>
+                <Text size={1} weight="medium">
+                  First option
+                </Text>
+                <Text muted size={1}>
+                  Description
+                </Text>
+              </Stack>
+            </MenuItem>
+            <MenuItem padding={3}>
+              <Stack gap={3}>
+                <Text size={1} weight="medium">
+                  Second option
+                </Text>
+                <Text muted size={1}>
+                  Description
+                </Text>
+              </Stack>
+            </MenuItem>
+            <MenuDivider />
+            <MenuItem padding={3} tone="critical">
+              <Stack gap={3}>
+                <Text size={1} weight="medium">
+                  Dangerous option
+                </Text>
+                <Text muted size={1}>
+                  Description
+                </Text>
+              </Stack>
+            </MenuItem>
+          </Menu>
+        </LayerProvider>
+      </Card>
+    </CardWrapper>
+  )
+}

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

@@ -0,0 +1,35 @@
+import {ChevronDownIcon} from '@sanity/icons'
+import {Box, Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+
+const selectedOptions = {
+  undefined: 'undefined',
+  true: true,
+  false: false,
+} as const
+
+export default function CustomSelectedStateStory(): React.JSX.Element {
+  const selected = useSelect('Selected', selectedOptions, false)
+
+  return (
+    <Box padding={4}>
+      <MenuButton
+        button={
+          <Button
+            icon={ChevronDownIcon}
+            mode="bleed"
+            selected={selected === 'undefined' ? undefined : selected}
+            text="Menu"
+          />
+        }
+        id="test-menu"
+        menu={
+          <Menu>
+            <MenuItem text="Item 1" />
+            <MenuItem text="Item 2" />
+          </Menu>
+        }
+      />
+    </Box>
+  )
+}

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

@@ -0,0 +1,28 @@
+import {Menu, MenuItem, Text} from '@sanity/ui'
+import {ELEMENT_TONES} from '@sanity/ui/tokens'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {CardWrapper} from '$workshop'
+
+export default function DataPropsStory(): React.JSX.Element {
+  const tone = useSelect('Tone', ELEMENT_TONES, 'default')
+
+  return (
+    <CardWrapper width={0}>
+      <Menu gap={1} padding={4}>
+        <MenuItem data-enabled="" padding={3} tone={tone}>
+          <Text size={1}>MenuItem</Text>
+        </MenuItem>
+        <MenuItem data-hovered="" padding={3} tone={tone}>
+          <Text size={1}>MenuItem</Text>
+        </MenuItem>
+        <MenuItem data-pressed="" padding={3} tone={tone}>
+          <Text size={1}>MenuItem</Text>
+        </MenuItem>
+        <MenuItem data-selected="" padding={3} tone={tone}>
+          <Text size={1}>MenuItem</Text>
+        </MenuItem>
+      </Menu>
+    </CardWrapper>
+  )
+}

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

@@ -0,0 +1,40 @@
+import {ChevronDownIcon} from '@sanity/icons'
+import {Button, Flex, Menu, MenuButton, type MenuButtonProps, MenuItem} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+  matchReferenceWidth: true,
+}
+
+export default function DisableFocusOnCloseStory(): React.JSX.Element {
+  const disableRestoreFocusOnClose = useBoolean('Disable restore focus on close', false)
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <MenuButton
+        __unstable_disableRestoreFocusOnClose={disableRestoreFocusOnClose}
+        button={
+          <Button
+            iconRight={ChevronDownIcon}
+            mode="ghost"
+            text={
+              disableRestoreFocusOnClose
+                ? 'Should not focus after close'
+                : 'Should focus after close'
+            }
+          />
+        }
+        id="example"
+        menu={
+          <Menu>
+            <MenuItem text="Test 1" />
+            <MenuItem text="Test 2" />
+            <MenuItem text="Test 3" />
+          </Menu>
+        }
+        popover={POPOVER_PROPS}
+      />
+    </Flex>
+  )
+}