@sanity/ui 0.37.2 → 0.37.3

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

@@ -1,142 +0,0 @@
-import {ErrorOutlineIcon} from '@sanity/icons'
-import {
-  BoundaryElementProvider,
-  Box,
-  Button,
-  Card,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  PopoverProps,
-  SelectableTone,
-  Text,
-} from '@sanity/ui'
-import React, {useMemo, useState} from 'react'
-
-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)
-
-  const popoverProps: PopoverProps = useMemo(
-    () => ({
-      constrainSize: true,
-      placement: 'bottom',
-      portal: true,
-      preventOverflow: true,
-      width: 1,
-    }),
-    []
-  )
-
-  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={popoverProps}
-                  />
-                </BoundaryElementProvider>
-              </Box>
-            </Flex>
-          </Card>
-        </Flex>
-      </Card>
-    </Box>
-  )
-}

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

@@ -1,40 +0,0 @@
-import {Box, Card, LayerProvider, Menu, MenuDivider, MenuItem, Stack, Text} from '@sanity/ui'
-import React from 'react'
-
-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

@@ -1,36 +0,0 @@
-import {SelectIcon} from '@sanity/icons'
-import {Button, Flex, Menu, MenuButton, MenuItem} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
-
-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

@@ -1,144 +0,0 @@
-import {
-  Box,
-  Button,
-  Card,
-  Inline,
-  LayerProvider,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuGroup,
-  MenuItem,
-} from '@sanity/ui'
-import {useAction} from '@sanity/ui-workshop'
-import React from 'react'
-
-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

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

@@ -1,68 +0,0 @@
-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 React from 'react'
-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

@@ -1,59 +0,0 @@
-import {
-  AddIcon,
-  BookIcon,
-  CopyIcon,
-  EllipsisVerticalIcon,
-  ImageIcon,
-  TrashIcon,
-} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Container,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuGroup,
-  MenuItem,
-} from '@sanity/ui'
-import React from 'react'
-
-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

@@ -1,23 +0,0 @@
-import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem, Stack} from '@sanity/ui'
-import React from 'react'
-
-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

@@ -1,37 +0,0 @@
-import {Box, Button, Menu, MenuButton, MenuItem, Stack, useToast} from '@sanity/ui'
-import React, {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>
-  )
-}

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

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