@sanity/ui 3.1.13 → 4.0.0-beta.0

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

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

@@ -0,0 +1,79 @@
+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/tokens'
+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

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

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

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

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

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

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

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

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