@sanity/ui 4.0.0-v4.1 → 4.0.0

package/src/core/components/menu/MenuItem.tsx

@@ -1,184 +0,0 @@
-import type {
-  GapStyleProps,
-  PaddingStyleProps,
-  RadiusStyleProps,
-  ResponsiveProp,
-} from '@sanity/ui/css'
-import type {ElementTone, FontTextSize} from '@sanity/ui/theme'
-import {
-  type ElementType,
-  isValidElement,
-  type MouseEvent,
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {Box} from '../../primitives/box/Box'
-import {Flex} from '../../primitives/flex/Flex'
-import {Selectable} from '../../primitives/selectable/Selectable'
-import {Text} from '../../primitives/text/Text'
-import type {ComponentType, Props} from '../../types'
-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 = 3,
-    gapX,
-    gapY,
-    hotkeys,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    onClick,
-    padding = 3,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    pressed,
-    radius = 2,
-    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 paddingProps = useMemo(
-    () => ({
-      padding,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingRight,
-      paddingBottom,
-      paddingLeft,
-    }),
-    [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
-  )
-
-  const setRef = useCallback((el: HTMLButtonElement | null) => {
-    ref.current = el
-    setRootElement(el)
-  }, [])
-
-  return (
-    <Selectable
-      data-ui="MenuItem"
-      {...rest}
-      as={as}
-      data-pressed={pressed ? '' : undefined}
-      data-selected={active ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
-      radius={radius}
-      disabled={disabled}
-      onClick={handleClick}
-      onMouseEnter={onItemMouseEnter}
-      onMouseLeave={onItemMouseLeave}
-      ref={setRef}
-      role={role}
-      tabIndex={-1}
-      tone={tone}
-      type={as === 'button' ? 'button' : undefined}
-    >
-      {(IconComponent || text || IconRightComponent) && (
-        <Flex as="span" gap={gap} gapX={gapX} gapY={gapY} align="center" {...paddingProps}>
-          {IconComponent && (
-            <Text muted size={fontSize}>
-              {isValidElement(IconComponent) && IconComponent}
-              {isValidElementType(IconComponent) && <IconComponent />}
-            </Text>
-          )}
-
-          {text && (
-            <Box flex={1}>
-              <Text size={fontSize} textOverflow="ellipsis" weight="medium">
-                {text}
-              </Text>
-            </Box>
-          )}
-
-          {hotkeys && <Hotkeys keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />}
-
-          {IconRightComponent && (
-            <Text muted size={fontSize}>
-              {isValidElement(IconRightComponent) && IconRightComponent}
-              {isValidElementType(IconRightComponent) && <IconRightComponent />}
-            </Text>
-          )}
-        </Flex>
-      )}
-
-      {children && (
-        <Box as="span" {...paddingProps}>
-          {children}
-        </Box>
-      )}
-    </Selectable>
-  )
-}

package/src/core/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} href="#" ref={ref}>
-      {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/core/components/menu/__workshop__/AvatarMenu.tsx

@@ -1,57 +0,0 @@
-import {UsersIcon} from '@sanity/icons'
-import {
-  Avatar,
-  Badge,
-  Box,
-  Button,
-  Flex,
-  Hotkeys,
-  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 padding={0}>
-              <Flex align="center" 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>
-                <Box padding={1}>
-                  <Hotkeys keys={['Cmd', '1']} />
-                </Box>
-              </Flex>
-            </MenuItem>
-            <MenuItem padding={0}>
-              <Flex align="center" padding={1}>
-                <Box flex="none">
-                  <Avatar color="magenta" initials="JS" />
-                </Box>
-                <Box flex={1} padding={2}>
-                  <Text size={1}>John Doe</Text>
-                </Box>
-                <Box padding={1}>
-                  <Hotkeys keys={['Cmd', '2']} />
-                </Box>
-              </Flex>
-            </MenuItem>
-          </Menu>
-        }
-      />
-    </Flex>
-  )
-}

package/src/core/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/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
-          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}
-                  onClick={() => {
-                    ref.current?.click()
-                    ref.current?.focus()
-                  }}
-                  mode="bleed"
-                  text="Add item"
-                  tone="primary"
-                />
-              </Stack>
-            </Menu>
-          }
-          popover={POPOVER_PROPS}
-          ref={ref}
-        />
-      </Stack>
-    </Box>
-  )
-}

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

@@ -1,133 +0,0 @@
-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/theme'
-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 borderLeft flex={1} padding={2} ref={setBoundaryElement}>
-            <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/core/components/menu/__workshop__/CustomMenuItem.tsx

@@ -1,45 +0,0 @@
-import {Box, Card, LayerProvider, Menu, MenuDivider, MenuItem, Stack, Text} from '@sanity/ui'
-
-export default function CustomMenuItemStory(): React.JSX.Element {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Card radius={3} shadow={2}>
-        <LayerProvider>
-          <Menu>
-            <MenuItem padding={3}>
-              <Stack gap={3}>
-                <Text weight="medium" size={1}>
-                  First option
-                </Text>
-                <Text muted size={1}>
-                  Description
-                </Text>
-              </Stack>
-            </MenuItem>
-            <MenuItem padding={3}>
-              <Stack gap={3}>
-                <Text weight="medium" size={1}>
-                  Second option
-                </Text>
-                <Text muted size={1}>
-                  Description
-                </Text>
-              </Stack>
-            </MenuItem>
-            <MenuDivider />
-            <MenuItem padding={3} tone="critical">
-              <Stack gap={3}>
-                <Text weight="medium" size={1}>
-                  Dangerous option
-                </Text>
-                <Text muted size={1}>
-                  Description
-                </Text>
-              </Stack>
-            </MenuItem>
-          </Menu>
-        </LayerProvider>
-      </Card>
-    </Box>
-  )
-}

package/src/core/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/core/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>
-  )
-}