@bettercms-ai/kit 0.1.0

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

@@ -0,0 +1,89 @@
+import {defineScope} from '@bettercms-ai/kit-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')),
+    },
+    {
+      name: 'custom-selected-state',
+      title: 'Custom selected state',
+      component: lazy(() => import('./customSelectedState')),
+    },
+  ],
+})

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

@@ -0,0 +1,80 @@
+import {ClockIcon, CommentIcon, ExpandIcon, SearchIcon} from '@bettercms-ai/icons'
+import {
+  Box,
+  Button,
+  Card,
+  Grid,
+  LayerProvider,
+  Menu,
+  MenuButton,
+  MenuButtonProps,
+  MenuDivider,
+  MenuItem,
+} from '@bettercms-ai/kit'
+import {useAction, useBoolean, useSelect} from '@bettercms-ai/kit-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__/menuGroupRight.tsx

@@ -0,0 +1,58 @@
+import {AddIcon, BookIcon, CopyIcon, EllipsisVerticalIcon, ImageIcon, TrashIcon} from '@bettercms-ai/icons'
+import {
+  Box,
+  Button,
+  Card,
+  Container,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuButtonProps,
+  MenuDivider,
+  MenuGroup,
+  MenuItem,
+} from '@bettercms-ai/kit'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  placement: 'right',
+  portal: true,
+  preventOverflow: true,
+}
+
+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={POPOVER_PROPS}
+                />
+              </Box>
+            </Flex>
+          </Card>
+        </Container>
+      </Flex>
+    </Card>
+  )
+}

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

@@ -0,0 +1,22 @@
+import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem, Stack} from '@bettercms-ai/kit'
+
+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/core/components/menu/__workshop__/onCloseMenuButton.tsx

@@ -0,0 +1,41 @@
+import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack, useToast} from '@bettercms-ai/kit'
+import {useCallback} from 'react'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+}
+
+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={POPOVER_PROPS}
+        />
+        <Button text="Blur test button" mode="ghost" />
+      </Stack>
+    </Box>
+  )
+}

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

@@ -0,0 +1,69 @@
+import {CheckmarkIcon, ClockIcon, ExpandIcon, SearchIcon} from '@bettercms-ai/icons'
+import {
+  Box,
+  Button,
+  Code,
+  Menu,
+  MenuButton,
+  MenuButtonProps,
+  MenuDivider,
+  MenuItem,
+  Stack,
+} from '@bettercms-ai/kit'
+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>
+  )
+}

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

@@ -0,0 +1,47 @@
+import {useSelect} from '@bettercms-ai/kit-workshop'
+import {Fragment, useCallback, useState} from 'react'
+
+import {Button, Flex, Popover} from '../../../primitives'
+import {LayerProvider} from '../../../utils'
+import {Menu} from '../menu'
+import {MenuDivider} from '../menuDivider'
+import {MenuItem} from '../menuItem'
+
+const ITEMS = [...Array(8).keys()].map((num) => ({
+  title: `Item ${num + 1}`,
+  divider: num === 3,
+}))
+
+const OPTIONS = {first: 'first', last: 'last'}
+
+export default function ShouldFocusStory() {
+  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/core/components/menu/__workshop__/tones.tsx

@@ -0,0 +1,25 @@
+import {CubeIcon} from '@bettercms-ai/icons'
+import {Box, Card, LayerProvider, Menu, MenuItem} from '@bettercms-ai/kit'
+import {THEME_COLOR_STATE_TONES} from '@bettercms-ai/kit/theme'
+import {useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function TonesStory() {
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
+
+  return (
+    <LayerProvider>
+      <Box padding={[4, 5, 6]}>
+        <Card radius={3} shadow={3} tone={parentTone}>
+          <Menu>
+            {THEME_COLOR_STATE_TONES.map((tone) => (
+              <MenuItem disabled={disabled} icon={CubeIcon} key={tone} text={tone} tone={tone} />
+            ))}
+          </Menu>
+        </Card>
+      </Box>
+    </LayerProvider>
+  )
+}

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

@@ -0,0 +1,32 @@
+import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@bettercms-ai/kit'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  __unstable_margins: [1, 1, 1, 1],
+  arrow: false,
+  constrainSize: true,
+  fallbackPlacements: ['top-start'],
+  matchReferenceWidth: true,
+  radius: 0,
+  placement: 'bottom-start',
+}
+
+export default function WithoutArrowStory() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack>
+        <MenuButton
+          button={<Button mode="ghost" text="Open menu" />}
+          id="without-arrow-example"
+          menu={
+            <Menu>
+              <MenuItem text="Item 1" />
+              <MenuItem text="Item 2" />
+              <MenuItem text="Item 3" />
+            </Menu>
+          }
+          popover={POPOVER_PROPS}
+        />
+      </Stack>
+    </Box>
+  )
+}

package/src/core/components/menu/helpers.ts

@@ -0,0 +1,82 @@
+import {isHTMLAnchorElement, isHTMLButtonElement} from '../../helpers'
+
+/**
+ * @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)
+}

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

@@ -0,0 +1,5 @@
+export * from './menu'
+export * from './menuButton'
+export * from './menuDivider'
+export * from './menuGroup'
+export * from './menuItem'

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

@@ -0,0 +1,63 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Stack} from '../../primitives'
+import {Menu} from './menu'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../primitives')
+
+  return {
+    ...actual,
+    Stack: jest.fn((props: Record<string, unknown>) => (actual.Stack as any).render(props, null)),
+  }
+})
+
+jest.mock('../../utils', () => {
+  const actual = jest.requireActual('../../utils')
+
+  return {
+    ...actual,
+    useLayer: () => ({isTopLayer: true}),
+  }
+})
+
+describe('components/menu spacing', () => {
+  const mockedStack = jest.mocked(Stack)
+
+  beforeEach(() => {
+    mockedStack.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(
+      <Menu space={2}>
+        <div>Item</div>
+      </Menu>,
+    )
+    expect(mockedStack.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+
+    mockedStack.mockClear()
+    render(
+      <Menu gap={2}>
+        <div>Item</div>
+      </Menu>,
+    )
+    expect(mockedStack.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(
+      <Menu gap={3} space={1}>
+        <div>Item</div>
+      </Menu>,
+    )
+    const propsList = mockedStack.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: 3}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({gap: 1}))
+  })
+})