@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/core/components/dialog/styles.ts

@@ -0,0 +1,76 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+import {_responsive, ThemeProps} from '../../styles'
+import {DialogPosition} from '../../types'
+
+/**
+ * @internal
+ */
+export interface ResponsiveDialogPositionStyleProps {
+  $position: DialogPosition[]
+}
+
+export function dialogStyle({theme}: ThemeProps): CSSObject {
+  const {color} = getTheme_v2(theme)
+
+  return {
+    '&:not([hidden])': {
+      display: 'flex',
+    },
+
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    outline: 'none',
+    background: color.backdrop,
+  }
+}
+
+export function responsiveDialogPositionStyle(
+  props: ResponsiveDialogPositionStyleProps & ThemeProps,
+): CSSObject[] {
+  const {media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$position, (position) => ({'&&': {position}}))
+}
+
+/**
+ * @internal
+ */
+export interface AnimationDialogStyleProps {
+  animate: boolean
+}
+
+export function animationDialogStyle(props: AnimationDialogStyleProps): ReturnType<typeof css> {
+  if (!props.animate) return css``
+
+  return css`
+    @keyframes zoomIn {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    animation: fadeIn 200ms ease-out;
+    // Animates the dialog card.
+    & > [data-ui='DialogCard'] {
+      animation: zoomIn 200ms ease-out;
+    }
+  `
+}

package/src/core/components/hotkeys/hotkeys.tsx

@@ -0,0 +1,60 @@
+import {forwardRef} from 'react'
+import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
+import {Inline, KBD} from '../../primitives'
+import {Radius} from '../../types'
+
+/**
+ * @public
+ */
+export interface HotkeysProps {
+  fontSize?: number | number[]
+  padding?: number | number[]
+  radius?: Radius | Radius[]
+  space?: number | number[]
+  keys?: string[]
+}
+
+const Root = styled.kbd`
+  font: inherit;
+  padding: 1px;
+
+  &:not([hidden]) {
+    display: block;
+  }
+`
+
+const Key = styled(KBD)`
+  &:not([hidden]) {
+    display: block;
+  }
+`
+
+/**
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
+ * @public
+ */
+export const Hotkeys = forwardRef(function Hotkeys(
+  props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
+  ref: React.Ref<HTMLElement>,
+) {
+  const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
+  const space = useArrayProp(spaceProp)
+
+  if (!keys || keys.length === 0) {
+    return <></>
+  }
+
+  return (
+    <Root data-ui="Hotkeys" {...restProps} ref={ref}>
+      <Inline as="span" space={space}>
+        {keys.map((key, i) => (
+          <Key fontSize={fontSize} key={i} padding={padding} radius={radius}>
+            {key}
+          </Key>
+        ))}
+      </Inline>
+    </Root>
+  )
+})

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

@@ -0,0 +1,44 @@
+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.ReactElement {
+  const {children, req, ...restProps} = props
+
+  return (
+    <a data-required={req} {...restProps} href="#" ref={ref}>
+      {children}
+    </a>
+  )
+})
+
+export default function AsComponentStory() {
+  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}>
+              <Text>Component 1</Text>
+            </MenuItem>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+              <Text>Component 2</Text>
+            </MenuItem>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+              <Text>Component 3</Text>
+            </MenuItem>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+              <Text>Component 3</Text>
+            </MenuItem>
+          </Menu>
+        }
+      />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,50 @@
+import {UsersIcon} from '@sanity/icons'
+import {Avatar, Badge, Box, Button, Flex, Text} from '../../../primitives'
+import {Hotkeys} from '../../hotkeys'
+import {Menu} from '../menu'
+import {MenuButton} from '../menuButton'
+import {MenuItem} from '../menuItem'
+
+export default function AvatarMenuStory() {
+  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

@@ -0,0 +1,46 @@
+import {AddIcon} from '@sanity/icons'
+import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
+import {useRef} from 'react'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+}
+
+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={POPOVER_PROPS}
+          ref={ref}
+        />
+      </Stack>
+    </Box>
+  )
+}

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

@@ -0,0 +1,45 @@
+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="medium" size={1}>
+                  First option
+                </Text>
+                <Text muted size={1}>
+                  Description
+                </Text>
+              </Stack>
+            </MenuItem>
+            <MenuItem padding={3}>
+              <Stack space={3}>
+                <Text weight="medium" size={1}>
+                  Second option
+                </Text>
+                <Text muted size={1}>
+                  Description
+                </Text>
+              </Stack>
+            </MenuItem>
+            <MenuDivider />
+            <MenuItem padding={3} tone="critical">
+              <Stack space={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__/disableFocusOnClose.tsx

@@ -0,0 +1,40 @@
+import {ChevronDownIcon} from '@sanity/icons'
+import {Button, Flex, Menu, MenuButton, MenuButtonProps, MenuItem} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+  matchReferenceWidth: true,
+}
+
+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={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>
+  )
+}

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

@@ -0,0 +1,84 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  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: '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')),
+    },
+    {
+      name: 'shouldFocus',
+      title: 'Menu with shouldFocus',
+      component: lazy(() => import('./shouldFocus')),
+    },
+    {
+      name: 'avatar',
+      title: 'Avatar menu',
+      component: lazy(() => import('./avatarMenu')),
+    },
+  ],
+})

package/src/core/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,
+  MenuButtonProps,
+  MenuDivider,
+  MenuItem,
+} from '@sanity/ui'
+import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
+import {useMemo} 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')
+
+  const popover: MenuButtonProps['popover'] = useMemo(
+    () => ({
+      constrainSize: true,
+      portal,
+    }),
+    [portal],
+  )
+
+  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 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>
+              }
+              onClose={useAction('onClose')}
+              onOpen={useAction('onOpen')}
+              popover={popover}
+            />
+          </LayerProvider>
+          <Button mode="ghost" id="next-button" text="Next" />
+        </Grid>
+      </Box>
+    </Card>
+  )
+}

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

@@ -0,0 +1,69 @@
+import {CheckmarkIcon, ClockIcon, ExpandIcon, SearchIcon} from '@sanity/icons'
+import {
+  Box,
+  Button,
+  Code,
+  Menu,
+  MenuButton,
+  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() {
+  const [selectedIndex, setSelectedIndex] = useState(INITIAL_INDEX)
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack space={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"
+                onClick={() => setSelectedIndex(0)}
+                pressed={selectedIndex === 0}
+                selected={selectedIndex === 0}
+                text="Show search"
+              />
+              <MenuItem
+                icon={ClockIcon}
+                iconRight={selectedIndex === 1 ? CheckmarkIcon : undefined}
+                id="menu-item-2"
+                onClick={() => setSelectedIndex(1)}
+                pressed={selectedIndex === 1}
+                selected={selectedIndex === 1}
+                text="Show clock"
+              />
+              <MenuDivider />
+              <MenuItem
+                icon={ExpandIcon}
+                iconRight={selectedIndex === 2 ? CheckmarkIcon : undefined}
+                id="menu-item-3"
+                onClick={() => setSelectedIndex(2)}
+                pressed={selectedIndex === 2}
+                selected={selectedIndex === 2}
+                text="Expanded"
+              />
+            </Menu>
+          }
+          popover={POPOVER_PROPS}
+        />
+      </Stack>
+    </Box>
+  )
+}