@sanity/ui 4.0.0-beta.7 → 4.0.0-next.0

package/src/components/menu/MenuItem.tsx

@@ -1,153 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,47 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, type MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
-import {vars} from '@sanity/ui'
-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

@@ -1,133 +0,0 @@
-import {ErrorOutlineIcon} from '@sanity/icons'
-import {
-  BoundaryElementProvider,
-  Box,
-  Button,
-  Card,
-  type ElementTone,
-  Flex,
-  Menu,
-  MenuButton,
-  type MenuButtonProps,
-  MenuItem,
-  Text,
-} from '@sanity/ui'
-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

@@ -1,47 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,27 +0,0 @@
-import {ELEMENT_TONES, Menu, MenuItem, Text} from '@sanity/ui'
-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

@@ -1,40 +0,0 @@
-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>
-  )
-}