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

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

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

@@ -1,40 +0,0 @@
-import {SelectIcon} 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={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={POPOVER_PROPS}
-      />
-    </Flex>
-  )
-}

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

@@ -1,79 +0,0 @@
-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')),
-    },
-  ],
-})

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,
-  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 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>
-              }
-              onClose={useAction('onClose')}
-              onOpen={useAction('onOpen')}
-              popover={popover}
-            />
-          </LayerProvider>
-          <Button mode="ghost" id="next-button" text="Next" />
-        </Grid>
-      </Box>
-    </Card>
-  )
-}

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

@@ -1,64 +0,0 @@
-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,
-}
-
-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={POPOVER_PROPS}
-        />
-      </Stack>
-    </Box>
-  )
-}

package/src/components/menu/menu.test.tsx

@@ -1,129 +0,0 @@
-/** @jest-environment jsdom */
-
-/* eslint-disable no-console */
-
-import React, {useCallback, useMemo} from 'react'
-import {render} from '../../../test'
-import {MenuContext, MenuContextValue} from './menuContext'
-import {useMenu} from './useMenu'
-
-describe('components/menu', () => {
-  describe('useMenu', () => {
-    it('should get context value', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        const rootMenu = useMenu()
-
-        log(rootMenu)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const handleItemMouseEnter = useCallback(
-          (event: React.MouseEvent<HTMLElement>) => console.log(event),
-          [],
-        )
-
-        const handleItemMouseLeave = useCallback(
-          (event: React.MouseEvent<HTMLElement>) => console.log(event),
-          [],
-        )
-
-        const value: MenuContextValue = useMemo(
-          () => ({
-            version: 0.0,
-            activeElement: null,
-            activeIndex: 0,
-            mount: (element: HTMLElement | null) => () => console.log(element),
-            onItemClick: () => undefined,
-            onItemMouseEnter: handleItemMouseEnter,
-            onItemMouseLeave: handleItemMouseLeave,
-            onMouseEnter: handleItemMouseEnter,
-            onMouseLeave: handleItemMouseLeave,
-          }),
-          [handleItemMouseEnter, handleItemMouseLeave],
-        )
-
-        return (
-          <MenuContext.Provider value={value}>
-            <Debug />
-          </MenuContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      const contextValue = log.mock.calls[0][0]
-
-      expect(contextValue.version).toBe(0.0)
-      expect(contextValue.activeIndex).toBe(0)
-      expect(typeof contextValue.mount).toBe('function')
-      expect(typeof contextValue.onItemClick).toBe('function')
-      expect(typeof contextValue.onItemMouseEnter).toBe('function')
-      expect(typeof contextValue.onItemMouseEnter).toBe('function')
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useMenu()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const value: any = undefined
-
-        return (
-          <MenuContext.Provider value={value}>
-            <Debug />
-          </MenuContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useMenu(): missing context value')
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useMenu()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const value: any = () => {
-          return {version: 1}
-        }
-
-        return (
-          <MenuContext.Provider value={value}>
-            <Debug />
-          </MenuContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useMenu(): the context value is not compatible')
-    })
-  })
-})

package/src/components/menu/menu.tsx

@@ -1,167 +0,0 @@
-import {forwardRef, useCallback, useEffect, useMemo} from 'react'
-import styled from 'styled-components'
-import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
-import {Box, Stack} from '../../primitives'
-import {ResponsivePaddingProps} from '../../primitives/types'
-import {useLayer} from '../../utils'
-import {MenuContext, MenuContextValue} from './menuContext'
-import {useMenuController} from './useMenuController'
-
-/**
- * @public
- */
-export interface MenuProps extends ResponsivePaddingProps {
-  /**
-   * @deprecated Use `shouldFocus="first"` instead.
-   */
-  focusFirst?: boolean
-  /**
-   * @deprecated Use `shouldFocus="last"` instead.
-   */
-  focusLast?: boolean
-  onClickOutside?: (event: MouseEvent) => void
-  onEscape?: () => void
-  onItemClick?: () => void
-  onItemSelect?: (index: number) => void
-  originElement?: HTMLElement | null
-  registerElement?: (el: HTMLElement) => () => void
-  shouldFocus?: 'first' | 'last' | null
-  space?: number | number[]
-}
-
-const Root = styled(Box)`
-  outline: none;
-  overflow: auto;
-`
-
-/**
- * @public
- */
-export const Menu = forwardRef(function Menu(
-  props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    children,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusFirst,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusLast,
-    onClickOutside,
-    onEscape,
-    onItemClick,
-    onItemSelect,
-    onKeyDown,
-    originElement,
-    padding = 1,
-    registerElement,
-    shouldFocus = (props.focusFirst && 'first') || (props.focusLast && 'last') || null,
-    space = 1,
-    ...restProps
-  } = props
-
-  const forwardedRef = useForwardedRef(ref)
-
-  const {isTopLayer} = useLayer()
-
-  const {
-    activeElement,
-    activeIndex,
-    handleItemMouseEnter,
-    handleItemMouseLeave,
-    handleKeyDown,
-    mount,
-    rootElement,
-    setRootElement,
-  } = useMenuController({onKeyDown, originElement, shouldFocus})
-
-  const handleRefChange = useCallback(
-    (el: HTMLDivElement | null) => {
-      setRootElement(el)
-      forwardedRef.current = el
-    },
-    [forwardedRef, setRootElement],
-  )
-
-  // Trigger `onItemSelect` when active index changes
-  useEffect(() => {
-    if (onItemSelect) onItemSelect(activeIndex)
-  }, [activeIndex, onItemSelect])
-
-  // Close menu when clicking outside
-  useClickOutside(
-    useCallback(
-      (event) => isTopLayer && onClickOutside && onClickOutside(event),
-      [isTopLayer, onClickOutside],
-    ),
-    [rootElement],
-  )
-
-  // Close menu when pressing Escape
-  useGlobalKeyDown(
-    useCallback(
-      (event) => {
-        if (!isTopLayer) return
-
-        if (event.key === 'Escape') {
-          event.stopPropagation()
-          if (onEscape) onEscape()
-        }
-      },
-      [isTopLayer, onEscape],
-    ),
-  )
-
-  // Register root element (for nested menus)
-  useEffect(() => {
-    if (!rootElement || !registerElement) return
-
-    return registerElement(rootElement)
-  }, [registerElement, rootElement])
-
-  const value: MenuContextValue = useMemo(
-    () => ({
-      version: 0.0,
-      activeElement,
-      activeIndex,
-      mount,
-      onClickOutside,
-      onEscape,
-      onItemClick,
-      onItemMouseEnter: handleItemMouseEnter,
-      onItemMouseLeave: handleItemMouseLeave,
-      registerElement,
-
-      // deprecated
-      onMouseEnter: handleItemMouseEnter,
-      onMouseLeave: handleItemMouseLeave,
-    }),
-    [
-      activeElement,
-      activeIndex,
-      mount,
-      handleItemMouseEnter,
-      handleItemMouseLeave,
-      onClickOutside,
-      onEscape,
-      onItemClick,
-      registerElement,
-    ],
-  )
-
-  return (
-    <MenuContext.Provider value={value}>
-      <Root
-        data-ui="Menu"
-        {...restProps}
-        onKeyDown={handleKeyDown}
-        padding={padding}
-        ref={handleRefChange}
-        role="menu"
-        tabIndex={-1}
-      >
-        <Stack space={space}>{children}</Stack>
-      </Root>
-    </MenuContext.Provider>
-  )
-})