@sanity/ui 4.0.0-beta.8 → 4.0.0-next.2

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

@@ -1,164 +0,0 @@
-import {
-  Button,
-  Card,
-  LayerProvider,
-  Menu,
-  MenuButton,
-  type MenuButtonProps,
-  MenuDivider,
-  MenuGroup,
-  MenuItem,
-} from '@sanity/ui'
-import {useAction} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  fallbackPlacements: ['top-start'],
-  placement: 'bottom-start',
-  portal: true,
-  preventOverflow: true,
-}
-
-const NESTED_POPOVER_PROPS: MenuButtonProps['popover'] = {
-  placement: 'right-start',
-  portal: true,
-  preventOverflow: true,
-}
-
-export default function GroupsStory(): React.JSX.Element {
-  return (
-    <CardWrapper pattern="halftone" width={1}>
-      <Card
-        alignItems="flex-start"
-        display="flex"
-        flexWrap="wrap"
-        gap={1}
-        padding={1}
-        radius={4}
-        shadow={1}
-        style={{minHeight: 300}}
-      >
-        <LayerProvider>
-          <MenuButton
-            button={<Button fontSize={1} mode="bleed" padding={2} text="File" />}
-            id="example"
-            menu={
-              <Menu>
-                <MenuItem
-                  fontSize={1}
-                  hotkeys={['⌘', 'T']}
-                  padding={2}
-                  text="New tab"
-                  onClick={useAction('New tab')}
-                />
-                <MenuItem
-                  fontSize={1}
-                  hotkeys={['⌘', 'N']}
-                  padding={2}
-                  text="New window"
-                  onClick={useAction('New window')}
-                />
-                <MenuItem
-                  fontSize={1}
-                  hotkeys={['⇧', '⌘', 'T']}
-                  padding={2}
-                  text="Reopen closed tab"
-                  onClick={useAction('Reopen closed tab')}
-                />
-                <MenuItem
-                  fontSize={1}
-                  hotkeys={['⌘', 'O']}
-                  padding={2}
-                  text="Open file…"
-                  onClick={useAction('Open file…')}
-                />
-                <MenuItem
-                  fontSize={1}
-                  hotkeys={['⌘', 'L']}
-                  padding={2}
-                  text="Open location…"
-                  onClick={useAction('Open location…')}
-                />
-                <MenuDivider />
-                <MenuGroup
-                  fontSize={1}
-                  padding={2}
-                  popover={NESTED_POPOVER_PROPS}
-                  text="Share"
-                  onClick={useAction('Share')}
-                >
-                  <MenuItem
-                    fontSize={1}
-                    padding={2}
-                    text="Email link"
-                    onClick={useAction('Share / Email link')}
-                  />
-                  <MenuItem
-                    fontSize={1}
-                    padding={2}
-                    text="Messages"
-                    onClick={useAction('Share / Messages')}
-                  />
-                  <MenuItem
-                    fontSize={1}
-                    padding={2}
-                    text="Airdrop"
-                    onClick={useAction('Share / Airdrop')}
-                  />
-                  <MenuItem fontSize={1} padding={2} text="Notes" onClick={useAction('Notes')} />
-                  <MenuGroup
-                    fontSize={1}
-                    padding={2}
-                    popover={NESTED_POPOVER_PROPS}
-                    text="More"
-                    onClick={useAction('Share / More')}
-                  >
-                    <MenuItem
-                      fontSize={1}
-                      padding={2}
-                      text="Email link"
-                      onClick={useAction('Share / More / Email link')}
-                    />
-                    <MenuItem
-                      fontSize={1}
-                      padding={2}
-                      text="Messages"
-                      onClick={useAction('Share / More / Messages')}
-                    />
-                    <MenuItem
-                      fontSize={1}
-                      padding={2}
-                      text="Airdrop"
-                      onClick={useAction('Share / More / Airdrop')}
-                    />
-                    <MenuItem
-                      fontSize={1}
-                      padding={2}
-                      text="Notes"
-                      onClick={useAction('Share / More / Notes')}
-                    />
-                  </MenuGroup>
-                </MenuGroup>
-                <MenuDivider />
-                <MenuItem
-                  fontSize={1}
-                  hotkeys={['⌘', 'P']}
-                  padding={2}
-                  text="Print…"
-                  onClick={useAction('Print…')}
-                />
-              </Menu>
-            }
-            popover={POPOVER_PROPS}
-          />
-        </LayerProvider>
-
-        <Button disabled fontSize={1} mode="bleed" padding={2} text="Edit" />
-        <Button disabled fontSize={1} mode="bleed" padding={2} text="View" />
-        <Button disabled fontSize={1} mode="bleed" padding={2} text="Window" />
-        <Button disabled fontSize={1} mode="bleed" padding={2} text="Help" />
-      </Card>
-    </CardWrapper>
-  )
-}

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

@@ -1,79 +0,0 @@
-import {ClockIcon, CommentIcon, ExpandIcon, SearchIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Grid,
-  LayerProvider,
-  Menu,
-  MenuButton,
-  type MenuButtonProps,
-  MenuDivider,
-  MenuItem,
-} from '@sanity/ui'
-import {CARD_TONES} from '@sanity/ui'
-import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
-import {useMemo} from 'react'
-
-export default function MenuButtonStory(): React.JSX.Element {
-  const layoutTone = useSelect('Layout tone', CARD_TONES, 'default')
-  const portal = useBoolean('Portal', false)
-
-  const popover: MenuButtonProps['popover'] = useMemo(
-    () => ({
-      constrainSize: true,
-      portal,
-    }),
-    [portal],
-  )
-
-  return (
-    <Card height="fill" tone={layoutTone}>
-      <Box padding={[4, 5, 6]}>
-        <Grid gap={2} gridTemplateColumns={3}>
-          <Button id="prev-button" mode="ghost" text="Prev" />
-          <LayerProvider>
-            <MenuButton
-              button={<Button text="Open" />}
-              id="menu-button"
-              menu={
-                <Menu>
-                  <MenuItem
-                    icon={SearchIcon}
-                    id="menu-item-1"
-                    text="Search"
-                    onClick={useAction('Search')}
-                  />
-                  <MenuItem
-                    icon={ClockIcon}
-                    id="menu-item-2"
-                    text="Clock"
-                    onClick={useAction('Clock')}
-                  />
-                  <MenuItem
-                    disabled
-                    icon={CommentIcon}
-                    id="menu-item-3"
-                    text="Comment"
-                    onClick={useAction('Comment')}
-                  />
-                  <MenuDivider />
-                  <MenuItem
-                    icon={ExpandIcon}
-                    id="menu-item-4"
-                    text="Expand"
-                    onClick={useAction('Expand')}
-                  />
-                </Menu>
-              }
-              popover={popover}
-              onClose={useAction('onClose')}
-              onOpen={useAction('onOpen')}
-            />
-          </LayerProvider>
-          <Button id="next-button" mode="ghost" text="Next" />
-        </Grid>
-      </Box>
-    </Card>
-  )
-}

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

@@ -1,73 +0,0 @@
-import {
-  AddIcon,
-  BookIcon,
-  CopyIcon,
-  EllipsisVerticalIcon,
-  ImageIcon,
-  TrashIcon,
-} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Container,
-  Flex,
-  Menu,
-  MenuButton,
-  type MenuButtonProps,
-  MenuDivider,
-  MenuGroup,
-  MenuItem,
-} from '@sanity/ui'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  placement: 'bottom-end',
-  portal: true,
-  preventOverflow: true,
-}
-
-export default function MenuGroupRightStory(): React.JSX.Element {
-  return (
-    <Card height="fill" tone="transparent">
-      <Flex align="center" height="fill" padding={4} sizing="border">
-        <Container width={1}>
-          <Card padding={2} radius={5} shadow={2}>
-            <Flex>
-              <Box flex={1} />
-              <Box>
-                <MenuButton
-                  button={<Button icon={EllipsisVerticalIcon} mode="bleed" />}
-                  id="right-menu"
-                  menu={
-                    <Menu>
-                      <MenuGroup
-                        icon={AddIcon}
-                        popover={{placement: 'right-start'}}
-                        text="Add above"
-                      >
-                        <MenuItem icon={ImageIcon} text="Image" />
-                        <MenuItem icon={BookIcon} text="Book" />
-                      </MenuGroup>
-                      <MenuGroup
-                        icon={AddIcon}
-                        popover={{placement: 'right-start'}}
-                        text="Add below"
-                      >
-                        <MenuItem icon={ImageIcon} text="Image" />
-                        <MenuItem icon={BookIcon} text="Book" />
-                      </MenuGroup>
-                      <MenuDivider />
-                      <MenuItem icon={CopyIcon} text="Duplicate" />
-                      <MenuItem icon={TrashIcon} text="Remove" tone="critical" />
-                    </Menu>
-                  }
-                  popover={POPOVER_PROPS}
-                />
-              </Box>
-            </Flex>
-          </Card>
-        </Container>
-      </Flex>
-    </Card>
-  )
-}

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

@@ -1,22 +0,0 @@
-import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem, Stack} from '@sanity/ui'
-
-export default function NestedMenuItems(): React.JSX.Element {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <MenuButton
-        button={<Button text="Open" />}
-        id="nested-example"
-        menu={
-          <Menu>
-            <Stack gap={1}>
-              <MenuItem text="Item 1" />
-              <MenuItem text="Item 2" />
-            </Stack>
-            <MenuDivider />
-            <MenuItem text="Item 3" />
-          </Menu>
-        }
-      />
-    </Box>
-  )
-}

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

@@ -1,50 +0,0 @@
-import {
-  Box,
-  Button,
-  Menu,
-  MenuButton,
-  type MenuButtonProps,
-  MenuItem,
-  Stack,
-  useToast,
-} from '@sanity/ui'
-import {useCallback} from 'react'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  constrainSize: true,
-}
-
-export default function OnCloseMenuButton(): React.JSX.Element {
-  const {push} = useToast()
-
-  const handleClose = useCallback(() => {
-    push({
-      title: 'Menu closed',
-      status: 'success',
-    })
-  }, [push])
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack gap={2}>
-        <MenuButton
-          button={<Button text="With onClose callback" />}
-          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>
-            </Menu>
-          }
-          popover={POPOVER_PROPS}
-          onClose={handleClose}
-        />
-        <Button mode="ghost" text="Blur test button" />
-      </Stack>
-    </Box>
-  )
-}

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

@@ -1,69 +0,0 @@
-import {CheckmarkIcon, ClockIcon, ExpandIcon, SearchIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Code,
-  Menu,
-  MenuButton,
-  type MenuButtonProps,
-  MenuDivider,
-  MenuItem,
-  Stack,
-} from '@sanity/ui'
-import {useState} from 'react'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  matchReferenceWidth: true,
-}
-
-const INITIAL_INDEX = 1
-
-export default function SelectedItemStory(): React.JSX.Element {
-  const [selectedIndex, setSelectedIndex] = useState(INITIAL_INDEX)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack gap={4}>
-        <Code>selectedIndex={selectedIndex}</Code>
-
-        <MenuButton
-          button={<Button text="Open menu" />}
-          id="menu-button"
-          menu={
-            <Menu>
-              <MenuItem
-                icon={SearchIcon}
-                iconRight={selectedIndex === 0 ? CheckmarkIcon : undefined}
-                id="menu-item-1"
-                pressed={selectedIndex === 0}
-                selected={selectedIndex === 0}
-                text="Show search"
-                onClick={() => setSelectedIndex(0)}
-              />
-              <MenuItem
-                icon={ClockIcon}
-                iconRight={selectedIndex === 1 ? CheckmarkIcon : undefined}
-                id="menu-item-2"
-                pressed={selectedIndex === 1}
-                selected={selectedIndex === 1}
-                text="Show clock"
-                onClick={() => setSelectedIndex(1)}
-              />
-              <MenuDivider />
-              <MenuItem
-                icon={ExpandIcon}
-                iconRight={selectedIndex === 2 ? CheckmarkIcon : undefined}
-                id="menu-item-3"
-                pressed={selectedIndex === 2}
-                selected={selectedIndex === 2}
-                text="Expanded"
-                onClick={() => setSelectedIndex(2)}
-              />
-            </Menu>
-          }
-          popover={POPOVER_PROPS}
-        />
-      </Stack>
-    </Box>
-  )
-}

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

@@ -1,42 +0,0 @@
-import {Button, Flex, LayerProvider, Menu, MenuDivider, MenuItem, Popover} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import {Fragment, useCallback, useState} from 'react'
-
-const ITEMS = [...Array(8).keys()].map((num) => ({
-  title: `Item ${num + 1}`,
-  divider: num === 3,
-}))
-
-const OPTIONS = {first: 'first', last: 'last'}
-
-export default function ShouldFocusStory(): React.JSX.Element {
-  const shouldFocus = useSelect<keyof typeof OPTIONS>('Should focus', OPTIONS, 'first')
-
-  const [popoverOpen, setPopoverOpen] = useState<boolean>(false)
-  const handleToggleOpen = useCallback(() => setPopoverOpen((v) => !v), [])
-
-  return (
-    <LayerProvider>
-      <Flex align="center" justify="center" padding={4}>
-        <Popover
-          content={
-            <Menu shouldFocus={shouldFocus}>
-              {ITEMS.map((item) => {
-                return (
-                  <Fragment key={item.title}>
-                    <MenuItem text={item.title} />
-                    {item.divider && <MenuDivider />}
-                  </Fragment>
-                )
-              })}
-            </Menu>
-          }
-          open={popoverOpen}
-          portal
-        >
-          <Button text="Open menu" onClick={handleToggleOpen} />
-        </Popover>
-      </Flex>
-    </LayerProvider>
-  )
-}

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

@@ -1,19 +0,0 @@
-import {CubeIcon} from '@sanity/icons'
-import {ELEMENT_TONES, Menu, MenuItem} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-import {CardWrapper} from '$workshop'
-
-export default function TonesStory(): React.JSX.Element {
-  const disabled = useBoolean('Disabled', false)
-
-  return (
-    <CardWrapper pattern="halftone" width={0}>
-      <Menu>
-        {ELEMENT_TONES.map((tone) => (
-          <MenuItem key={tone} disabled={disabled} icon={CubeIcon} text={tone} tone={tone} />
-        ))}
-      </Menu>
-    </CardWrapper>
-  )
-}

package/src/components/menu/__workshop__/index.ts

@@ -1,91 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'components/menu',
-  title: 'Menu',
-  stories: [
-    {
-      name: 'menu-button',
-      title: 'MenuButton',
-      component: lazy(() => import('./MenuButton')),
-    },
-    {
-      name: 'nested-menu-items',
-      title: 'Nested MenuItems',
-      component: lazy(() => import('./NestedMenu')),
-    },
-    {
-      name: 'custom-menu-item',
-      title: 'Custom MenuItem',
-      component: lazy(() => import('./CustomMenuItem')),
-    },
-    {
-      name: 'groups',
-      title: 'Groups',
-      component: lazy(() => import('./Groups')),
-    },
-    {
-      name: 'menu-group-right',
-      title: 'Menu group (right)',
-      component: lazy(() => import('./MenuGroupRight')),
-    },
-    {
-      name: 'tones',
-      title: 'Tones',
-      component: lazy(() => import('./Tones')),
-    },
-    {
-      name: 'selected-item',
-      title: 'Selected item',
-      component: lazy(() => import('./SelectedItem')),
-    },
-    {
-      name: 'closable',
-      title: 'Closeable',
-      component: lazy(() => import('./ClosableMenuButton')),
-    },
-    {
-      name: 'constrained-in-boundary',
-      title: 'Constrained in boundary',
-      component: lazy(() => import('./ConstrainedInBoundary')),
-    },
-    {
-      name: 'as-component',
-      title: 'As component',
-      component: lazy(() => import('./AsComponent')),
-    },
-    {
-      name: 'disable-focus-on-close',
-      title: 'Disable focus on close',
-      component: lazy(() => import('./DisableFocusOnClose')),
-    },
-    {
-      name: 'menu-button-with-on-close',
-      title: 'MenuButton with on close',
-      component: lazy(() => import('./OnCloseMenuButton')),
-    },
-    {
-      name: 'should-focus',
-      title: 'Menu with shouldFocus',
-      component: lazy(() => import('./ShouldFocus')),
-    },
-    {
-      name: 'avatar',
-      title: 'Avatar menu',
-      component: lazy(() => import('./AvatarMenu')),
-    },
-    {
-      name: 'custom-selected-state',
-      title: 'Custom selected state',
-      component: lazy(() => import('./CustomSelectedState')),
-    },
-    {
-      name: 'data-props',
-      title: 'Data props',
-      component: lazy(() => import('./DataProps')),
-    },
-  ],
-}
-
-export default scope

package/src/components/menu/helpers.ts

@@ -1,82 +0,0 @@
-import {isHTMLAnchorElement, isHTMLButtonElement} from '../../core/helpers/element'
-
-/**
- * @internal
- */
-function _isFocusable(element: HTMLElement) {
-  return (
-    (isHTMLAnchorElement(element) && element.getAttribute('data-disabled') !== 'true') ||
-    (isHTMLButtonElement(element) && !element.disabled)
-  )
-}
-
-/**
- * @internal
- */
-export function _getFocusableElements(elements: HTMLElement[]): HTMLElement[] {
-  return elements.filter(_isFocusable)
-}
-
-/**
- * @internal
- */
-export function _getDOMPath(rootElement: HTMLElement, el: HTMLElement): number[] {
-  const path: number[] = []
-
-  let e = el
-
-  while (e !== rootElement) {
-    const parentElement = e.parentElement
-
-    if (!parentElement) return path
-
-    const children = Array.from(parentElement.childNodes)
-    const index = children.indexOf(e)
-
-    path.unshift(index)
-
-    if (parentElement === rootElement) {
-      return path
-    }
-
-    e = parentElement
-  }
-
-  return path
-}
-
-const EMPTY_PATH: number[] = []
-
-/**
- * @internal
- */
-export function _sortElements(rootElement: HTMLElement | null, elements: HTMLElement[]): void {
-  if (!rootElement) return
-
-  const map = new WeakMap<HTMLElement, number[]>()
-
-  for (const el of elements) {
-    map.set(el, _getDOMPath(rootElement, el))
-  }
-
-  const _sort = (a: HTMLElement, b: HTMLElement) => {
-    const _a = map.get(a) || EMPTY_PATH
-    const _b = map.get(b) || EMPTY_PATH
-
-    const len = Math.max(_a.length, _b.length)
-
-    // Loop until there are different indexes
-    for (let i = 0; i < len; i += 1) {
-      const aIndex = _a[i] || -1
-      const bIndex = _b[i] || -1
-
-      if (aIndex !== bIndex) {
-        return aIndex - bIndex
-      }
-    }
-
-    return 0
-  }
-
-  elements.sort(_sort)
-}