@sanity/ui 1.0.0-beta.3 → 1.0.0-beta.30

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

@@ -0,0 +1,42 @@
+import {AddIcon} from '@sanity/icons'
+import {Box, Button, Menu, MenuButton, MenuItem, Stack} from '@sanity/ui'
+import {useRef} from 'react'
+
+export default function ClosableMenuButtonStory() {
+  const ref = useRef<HTMLButtonElement | null>(null)
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack>
+        <MenuButton
+          button={<Button text="Open" />}
+          id="closable-example"
+          menu={
+            <Menu padding={0} space={0}>
+              <Stack padding={1} space={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 var(--card-border-color)'}}>
+                <Button
+                  icon={AddIcon}
+                  onClick={() => {
+                    ref.current?.click()
+                    ref.current?.focus()
+                  }}
+                  mode="bleed"
+                  text="Add item"
+                  tone="primary"
+                />
+              </Stack>
+            </Menu>
+          }
+          popover={{constrainSize: true}}
+          ref={ref}
+        />
+      </Stack>
+    </Box>
+  )
+}

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

@@ -0,0 +1,139 @@
+import {ErrorOutlineIcon} from '@sanity/icons'
+import {
+  BoundaryElementProvider,
+  Box,
+  Button,
+  Card,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuItem,
+  SelectableTone,
+  Text,
+} from '@sanity/ui'
+import {useState} from 'react'
+import {MenuButtonProps} from '../menuButton'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+  placement: 'bottom',
+  portal: true,
+  // preventOverflow: true,
+  // width: 1,
+}
+
+const items: {tone: SelectableTone; 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() {
+  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) => {
+                          return (
+                            <MenuItem key={itemIndex} tone={item.tone}>
+                              <Box padding={3}>
+                                <Text>{item.message}</Text>
+                              </Box>
+                            </MenuItem>
+                          )
+                        })}
+                      </Menu>
+                    }
+                    popover={POPOVER_PROPS}
+                  />
+                </BoundaryElementProvider>
+              </Box>
+            </Flex>
+          </Card>
+        </Flex>
+      </Card>
+    </Box>
+  )
+}

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

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

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

@@ -0,0 +1,35 @@
+import {SelectIcon} from '@sanity/icons'
+import {Button, Flex, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+export default function DisableFocusOnCloseStory() {
+  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={SelectIcon}
+            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={{constrainSize: true, matchReferenceWidth: true}}
+      />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,143 @@
+import {
+  Box,
+  Button,
+  Card,
+  Inline,
+  LayerProvider,
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuGroup,
+  MenuItem,
+} from '@sanity/ui'
+import {useAction} from '@sanity/ui-workshop'
+
+export default function GroupsStory() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Card padding={1} radius={3} shadow={1}>
+        <Inline space={1}>
+          <LayerProvider>
+            <MenuButton
+              button={<Button fontSize={1} mode="bleed" padding={2} text="File" />}
+              id="example"
+              menu={
+                <Menu>
+                  <MenuItem
+                    fontSize={1}
+                    hotkeys={['⌘', 'T']}
+                    onClick={useAction('New tab')}
+                    padding={2}
+                    text="New tab"
+                  />
+                  <MenuItem
+                    fontSize={1}
+                    hotkeys={['⌘', 'N']}
+                    onClick={useAction('New window')}
+                    padding={2}
+                    text="New window"
+                  />
+                  <MenuItem
+                    fontSize={1}
+                    hotkeys={['⇧', '⌘', 'T']}
+                    onClick={useAction('Reopen closed tab')}
+                    padding={2}
+                    text="Reopen closed tab"
+                  />
+                  <MenuItem
+                    fontSize={1}
+                    hotkeys={['⌘', 'O']}
+                    onClick={useAction('Open file…')}
+                    padding={2}
+                    text="Open file…"
+                  />
+                  <MenuItem
+                    fontSize={1}
+                    hotkeys={['⌘', 'L']}
+                    onClick={useAction('Open location…')}
+                    padding={2}
+                    text="Open location…"
+                  />
+                  <MenuDivider />
+                  <MenuGroup
+                    fontSize={1}
+                    onClick={useAction('Share')}
+                    padding={2}
+                    popover={{placement: 'right-start', portal: true}}
+                    text="Share"
+                  >
+                    <MenuItem
+                      fontSize={1}
+                      onClick={useAction('Share / Email link')}
+                      padding={2}
+                      text="Email link"
+                    />
+                    <MenuItem
+                      fontSize={1}
+                      onClick={useAction('Share / Messages')}
+                      padding={2}
+                      text="Messages"
+                    />
+                    <MenuItem
+                      fontSize={1}
+                      onClick={useAction('Share / Airdrop')}
+                      padding={2}
+                      text="Airdrop"
+                    />
+                    <MenuItem fontSize={1} onClick={useAction('Notes')} padding={2} text="Notes" />
+                    <MenuGroup
+                      fontSize={1}
+                      onClick={useAction('Share / More')}
+                      padding={2}
+                      popover={{placement: 'right-start', portal: true}}
+                      text="More"
+                    >
+                      <MenuItem
+                        fontSize={1}
+                        onClick={useAction('Share / More / Email link')}
+                        padding={2}
+                        text="Email link"
+                      />
+                      <MenuItem
+                        fontSize={1}
+                        onClick={useAction('Share / More / Messages')}
+                        padding={2}
+                        text="Messages"
+                      />
+                      <MenuItem
+                        fontSize={1}
+                        onClick={useAction('Share / More / Airdrop')}
+                        padding={2}
+                        text="Airdrop"
+                      />
+                      <MenuItem
+                        fontSize={1}
+                        onClick={useAction('Share / More / Notes')}
+                        padding={2}
+                        text="Notes"
+                      />
+                    </MenuGroup>
+                  </MenuGroup>
+                  <MenuDivider />
+                  <MenuItem
+                    fontSize={1}
+                    hotkeys={['⌘', 'P']}
+                    onClick={useAction('Print…')}
+                    padding={2}
+                    text="Print…"
+                  />
+                </Menu>
+              }
+              // popover={{constrainSize: true, portal: true, preventOverflow: true}}
+            />
+          </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" />
+        </Inline>
+      </Card>
+    </Box>
+  )
+}

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

@@ -0,0 +1,70 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('components/menu', 'Menu', [
+  {
+    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: 'without-arrow',
+    title: 'Without arrow',
+    component: lazy(() => import('./withoutArrow')),
+  },
+  {
+    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')),
+  },
+])

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

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

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

@@ -0,0 +1,58 @@
+import {
+  AddIcon,
+  BookIcon,
+  CopyIcon,
+  EllipsisVerticalIcon,
+  ImageIcon,
+  TrashIcon,
+} from '@sanity/icons'
+import {
+  Box,
+  Button,
+  Card,
+  Container,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuGroup,
+  MenuItem,
+} from '@sanity/ui'
+
+export default function MenuGroupRightStory() {
+  return (
+    <Card height="fill" tone="transparent">
+      <Flex align="center" height="fill" padding={4} sizing="border">
+        <Container width={1}>
+          <Card padding={2} radius={2} shadow={2}>
+            <Flex>
+              <Box flex={1} />
+              <Box>
+                <MenuButton
+                  button={<Button icon={EllipsisVerticalIcon} mode="bleed" />}
+                  id="right-menu"
+                  menu={
+                    <Menu>
+                      <MenuGroup icon={AddIcon} popover={{placement: 'left'}} text="Add above">
+                        <MenuItem icon={ImageIcon} text="Image" />
+                        <MenuItem icon={BookIcon} text="Book" />
+                      </MenuGroup>
+                      <MenuGroup icon={AddIcon} popover={{placement: 'left'}} 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={{placement: 'right', portal: true}}
+                />
+              </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() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <MenuButton
+        button={<Button text="Open" />}
+        id="nested-example"
+        menu={
+          <Menu>
+            <Stack space={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,37 @@
+import {Box, Button, Menu, MenuButton, MenuItem, Stack, useToast} from '@sanity/ui'
+import {useCallback} from 'react'
+
+export default function OnCloseMenuButton() {
+  const {push} = useToast()
+
+  const handleClose = useCallback(() => {
+    push({
+      title: 'Menu closed',
+      status: 'success',
+    })
+  }, [push])
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack space={2}>
+        <MenuButton
+          button={<Button text="With onClose callback" />}
+          id="closable-example"
+          onClose={handleClose}
+          menu={
+            <Menu padding={0} space={0}>
+              <Stack padding={1} space={1}>
+                <MenuItem text="Item 1" />
+                <MenuItem text="Item 2" />
+                <MenuItem text="Item 3" />
+                <MenuItem text="Item 4" />
+              </Stack>
+            </Menu>
+          }
+          popover={{constrainSize: true}}
+        />
+        <Button text="Blur test button" mode="ghost" />
+      </Stack>
+    </Box>
+  )
+}