@chassis-ui/react 0.1.3 → 0.3.0

package/src/components/menu/MenuList.tsx

@@ -1,142 +0,0 @@
-import React, {
-  ElementType,
-  ForwardRefRenderFunction,
-  ReactElement,
-  ReactNode,
-  useContext,
-  useEffect
-} from 'react'
-import { createPortal } from 'react-dom'
-import classNames from 'classnames'
-
-import { useForkedRef } from '../../hooks'
-import { renderMenuItemContent } from '../../utils/renderMenuItemContent'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { MenuContext } from './Menu'
-import { MenuDivider } from './MenuDivider'
-import { MenuHeader } from './MenuHeader'
-import { MenuItem } from './MenuItem'
-import { MenuItemsDef } from './MenuItemDef'
-import { focusMenuItem, getMenuItems, handleMenuKeyDown } from './menuNavigation'
-import { SubmenuGroupContext, useSubmenuGroupProvider } from './submenuGroup'
-
-type MenuListOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * Array of item/header/divider definitions for data-driven rendering. When provided, children
-   * are ignored. Covers flat items, headers, and dividers only — for nested submenus, compose
-   * with `children` and `MenuSubmenu` instead.
-   */
-  items?: MenuItemsDef
-}
-
-export type MenuListProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  MenuListOwnProps<C>
->
-
-type MenuListComponent = (<C extends ElementType = 'div'>(
-  props: MenuListProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-const renderMenuItemDef = (def: MenuItemsDef[number]): ReactNode => {
-  if (def.type === 'header') {
-    return <MenuHeader key={def.id}>{def.label}</MenuHeader>
-  }
-  if (def.type === 'divider') {
-    return <MenuDivider key={def.id} />
-  }
-  return (
-    <MenuItem
-      key={def.id}
-      component={def.href ? 'a' : 'button'}
-      href={def.href}
-      disabled={def.disabled}
-      selected={def.selected}
-      onClick={def.onClick}
-    >
-      {renderMenuItemContent({
-        icon: def.icon,
-        label: def.label,
-        description: def.description,
-        selected: def.selected
-      })}
-    </MenuItem>
-  )
-}
-
-function MenuListRender<C extends ElementType = 'div'>(
-  { children, className, component, items, onKeyDown, ...rest }: MenuListProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const {
-    close,
-    container,
-    focusStrategy,
-    menuId,
-    menuStyle,
-    overlayRef,
-    placementAttr,
-    triggerId,
-    visible
-  } = useContext(MenuContext)
-  const forkedRef = useForkedRef(ref, overlayRef)
-  const submenuGroup = useSubmenuGroupProvider()
-
-  // ArrowDown/ArrowUp on the trigger opens the menu with a focus strategy (see `Menu`'s
-  // `useMenuTrigger` wiring) — this is where that intent actually lands, since we're not
-  // adopting `useMenu`'s own collection-aware auto-focus.
-  useEffect(() => {
-    if (!visible || !focusStrategy) return
-    focusMenuItem(getMenuItems(overlayRef.current), focusStrategy === 'last' ? 'last' : 'first')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible, focusStrategy])
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-    handleMenuKeyDown(event, { onEscape: close })
-    onKeyDown?.(event as React.KeyboardEvent<HTMLDivElement>)
-  }
-
-  const content = (
-    <Component
-      role="menu"
-      id={menuId}
-      aria-labelledby={triggerId}
-      className={classNames('menu', { show: visible }, className)}
-      style={menuStyle}
-      data-cx-placement={placementAttr}
-      aria-hidden={!visible}
-      {...rest}
-      onKeyDown={handleKeyDown}
-      ref={forkedRef}
-    >
-      <SubmenuGroupContext.Provider value={submenuGroup}>
-        {items ? items.map(renderMenuItemDef) : children}
-      </SubmenuGroupContext.Provider>
-    </Component>
-  )
-
-  if (container) {
-    if (typeof window === 'undefined') return null
-    return createPortal(content, container === true ? document.body : container)
-  }
-
-  return content
-}
-
-export const MenuList = createPolymorphicComponent<MenuListComponent>(
-  MenuListRender as ForwardRefRenderFunction<Element, MenuListProps<ElementType>>,
-  'MenuList'
-)

package/src/components/menu/MenuSubmenu.tsx

@@ -1,284 +0,0 @@
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useRef,
-  useState
-} from 'react'
-import { createPortal } from 'react-dom'
-import classNames from 'classnames'
-import { useLocale, useOverlayPosition } from 'react-aria'
-
-import { MenuContext } from './Menu'
-import {
-  Placement,
-  resolveMenuOverlayPositioning,
-  toAriaPlacement
-} from '../../utils/overlayPlacement'
-import { focusMenuItem, getMenuItems, handleMenuKeyDown } from './menuNavigation'
-import { SubmenuActionsContext, SubmenuGroupContext, useSubmenuGroupProvider } from './submenuGroup'
-
-export interface MenuSubmenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
-  /**
-   * MenuSubmenu activation mode on hover-capable devices. `'click'` activates on click only.
-   * `'hover'` activates on hover only. `'both'` (the default) activates on both. Touch
-   * devices always use tap regardless of this setting.
-   */
-  activation?: 'click' | 'hover' | 'both'
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Prevents the submenu from opening.
-   */
-  disabled?: boolean
-  /**
-   * Distance between the nested menu and the trigger, as `[skidding, distance]` in pixels.
-   */
-  offset?: [number, number]
-  /**
-   * Placement of the nested menu relative to the trigger. Defaults to cascading in the reading
-   * direction — `'right-start'` under LTR locales, `'left-start'` under RTL ones (see
-   * `useLocale`) — matching native OS/browser submenu behavior. An explicit value always wins
-   * over that locale-based default.
-   */
-  placement?: Placement
-  /**
-   * Switches to a view-replacement pattern below the `sm` breakpoint. Pair with a
-   * `MenuSubmenuBack` as the first item of the nested menu.
-   */
-  stacked?: boolean
-  /**
-   * Milliseconds before closing the submenu when the pointer leaves it.
-   */
-  submenuDelay?: number
-  /**
-   * Content of the `.menu-item` trigger that opens the submenu.
-   */
-  trigger: ReactNode
-}
-
-export const MenuSubmenu = forwardRef<HTMLDivElement, MenuSubmenuProps>(
-  (
-    {
-      children,
-      activation = 'both',
-      className,
-      disabled,
-      offset: offsetProp = [-4, 0],
-      placement,
-      stacked,
-      submenuDelay = 100,
-      trigger,
-      ...rest
-    },
-    ref
-  ) => {
-    const id = useId()
-    const triggerId = `${id}-trigger`
-    const menuId = `${id}-menu`
-    const [visible, setVisible] = useState(false)
-    // Portaling is only safe once mounted on the client: during SSR (and the initial client
-    // hydration pass, which must match the server-rendered markup) the panel renders inline next
-    // to its trigger, then moves to `document.body` on the next render once this flips to true.
-    const [mounted, setMounted] = useState(false)
-    const closeTimeoutRef = useRef<number | undefined>(undefined)
-    const focusFirstRafRef = useRef<number | undefined>(undefined)
-    const triggerRef = useRef<HTMLButtonElement | null>(null)
-    const overlayRef = useRef<HTMLElement | null>(null)
-    const parentGroup = useContext(SubmenuGroupContext)
-    const ownGroup = useSubmenuGroupProvider()
-    const { registerOverlay, visible: parentMenuVisible } = useContext(MenuContext)
-    const { direction } = useLocale()
-    const isRtl = direction === 'rtl'
-    const effectivePlacement = placement ?? (isRtl ? 'left-start' : 'right-start')
-
-    const { overlayProps, placement: resolvedPlacement } = useOverlayPosition({
-      targetRef: triggerRef,
-      overlayRef,
-      // Viewport-relative (matching the portal below): the trigger lives inside the parent
-      // menu's own floated panel, and `useOverlayPosition` measures against the overlay's real
-      // containing block — since the panel portals straight to `document.body`, that resolves
-      // the same way a `fixed`-strategy engine would.
-      placement: toAriaPlacement(effectivePlacement),
-      offset: offsetProp[1],
-      crossOffset: offsetProp[0],
-      containerPadding: 8,
-      isOpen: visible,
-      // See `useOverlayPlacement`'s comment for why this needs to be explicit `null`, not left
-      // unset — matches the same fix already applied to `Autocomplete`/`Combobox`/`Menu`/`Popover`.
-      onClose: null
-    })
-
-    const { menuStyle, placementAttr } = resolveMenuOverlayPositioning(
-      overlayProps.style,
-      effectivePlacement,
-      resolvedPlacement
-    )
-
-    const clearCloseTimeout = useCallback(() => {
-      if (closeTimeoutRef.current !== undefined) {
-        window.clearTimeout(closeTimeoutRef.current)
-        closeTimeoutRef.current = undefined
-      }
-    }, [])
-
-    const cancelFocusFirstRaf = useCallback(() => {
-      if (focusFirstRafRef.current !== undefined) {
-        cancelAnimationFrame(focusFirstRafRef.current)
-        focusFirstRafRef.current = undefined
-      }
-    }, [])
-
-    const close = useCallback(() => {
-      clearCloseTimeout()
-      cancelFocusFirstRaf()
-      setVisible(false)
-    }, [clearCloseTimeout, cancelFocusFirstRaf])
-
-    const open = () => {
-      if (disabled || visible) return
-      clearCloseTimeout()
-      parentGroup?.notifyOpen(id)
-      setVisible(true)
-    }
-
-    const scheduleClose = () => {
-      clearCloseTimeout()
-      closeTimeoutRef.current = window.setTimeout(close, submenuDelay)
-    }
-
-    useEffect(() => parentGroup?.register(id, close), [parentGroup, id, close])
-    useEffect(() => clearCloseTimeout, [clearCloseTimeout])
-    useEffect(() => cancelFocusFirstRaf, [cancelFocusFirstRaf])
-    useEffect(() => setMounted(true), [])
-
-    // The submenu's own open state is local and doesn't otherwise hear about its ancestor
-    // `Menu` closing (via Escape, outside click, etc.) — without this it's left open and
-    // fully visible (it's portaled to `document.body`, so nothing hides it for free) even
-    // after the menu it belongs to has disappeared.
-    useEffect(() => {
-      if (!parentMenuVisible) close()
-    }, [parentMenuVisible, close])
-
-    const supportsHover =
-      typeof window !== 'undefined' &&
-      !!window.matchMedia &&
-      window.matchMedia('(hover: hover)').matches
-    const hoverEnabled = supportsHover && (activation === 'hover' || activation === 'both')
-    const clickEnabled = activation === 'click' || activation === 'both'
-
-    const openAndFocusFirst = () => {
-      open()
-      cancelFocusFirstRaf()
-      focusFirstRafRef.current = requestAnimationFrame(() => {
-        focusFirstRafRef.current = undefined
-        focusMenuItem(getMenuItems(overlayRef.current), 'first')
-      })
-    }
-
-    const closeAndRefocusTrigger = () => {
-      close()
-      triggerRef.current?.focus()
-    }
-
-    const handleTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      if (!clickEnabled || disabled) return
-      event.preventDefault()
-      event.stopPropagation()
-      visible ? close() : openAndFocusFirst()
-    }
-
-    // A submenu cascades toward the reading direction, so the arrow key that opens it (and the
-    // one its own item list closes on, below) mirror too: ArrowRight/ArrowLeft under LTR,
-    // ArrowLeft/ArrowRight under RTL.
-    const openKey = isRtl ? 'ArrowLeft' : 'ArrowRight'
-
-    const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
-      if (disabled) return
-      if (event.key === 'Enter' || event.key === ' ' || event.key === openKey) {
-        event.preventDefault()
-        event.stopPropagation()
-        openAndFocusFirst()
-      }
-    }
-
-    const actionsValue = { close: closeAndRefocusTrigger }
-
-    return (
-      <div className={classNames('submenu', { show: visible }, className)} {...rest} ref={ref}>
-        <button
-          type="button"
-          id={triggerId}
-          role="menuitem"
-          className="menu-item"
-          aria-expanded={visible}
-          aria-haspopup="true"
-          aria-controls={visible ? menuId : undefined}
-          disabled={disabled}
-          onClick={handleTriggerClick}
-          onKeyDown={handleTriggerKeyDown}
-          onMouseEnter={hoverEnabled ? open : undefined}
-          onMouseLeave={hoverEnabled ? scheduleClose : undefined}
-          ref={(node) => {
-            triggerRef.current = node
-          }}
-        >
-          {trigger}
-        </button>
-        {(() => {
-          const panel = (
-            <div
-              role="menu"
-              id={menuId}
-              aria-labelledby={triggerId}
-              className={classNames('menu', { show: visible, 'submenu-stacked': stacked })}
-              style={menuStyle}
-              data-cx-placement={placementAttr}
-              aria-hidden={!visible}
-              onKeyDown={(event) =>
-                handleMenuKeyDown(event, {
-                  onEscape: closeAndRefocusTrigger,
-                  ...(isRtl
-                    ? { onArrowRight: closeAndRefocusTrigger }
-                    : { onArrowLeft: closeAndRefocusTrigger })
-                })
-              }
-              onMouseEnter={hoverEnabled ? clearCloseTimeout : undefined}
-              onMouseLeave={hoverEnabled ? scheduleClose : undefined}
-              // Registers this panel with the ancestor `Menu` (see `MenuContext.registerOverlay`)
-              // so its own click-dismiss logic recognizes clicks here as "inside" the menu — the
-              // panel portals straight to `document.body` when not `stacked`, so plain DOM
-              // containment against the top-level menu's own element wouldn't otherwise see it.
-              ref={(node) => {
-                overlayRef.current = node
-                registerOverlay(menuId, node)
-              }}
-            >
-              <SubmenuActionsContext.Provider value={actionsValue}>
-                <SubmenuGroupContext.Provider value={ownGroup}>
-                  {children}
-                </SubmenuGroupContext.Provider>
-              </SubmenuActionsContext.Provider>
-            </div>
-          )
-
-          // `stacked`'s sm-breakpoint CSS (`.menu:has(.submenu-stacked.show) ...`) needs the
-          // panel to be a real DOM descendant of `.menu`/`.submenu` to match — portaling would
-          // break that ancestor relationship, so it renders inline instead. Trade-off: above the
-          // `sm` breakpoint a `stacked` submenu no longer escapes ancestor overflow/stacking-
-          // context clipping the way a portaled one does; accepted since `stacked` targets mobile
-          // nav/drawer usage, not floating dropdowns.
-          return mounted && !stacked ? createPortal(panel, document.body) : panel
-        })()}
-      </div>
-    )
-  }
-)
-
-MenuSubmenu.displayName = 'MenuSubmenu'

package/src/components/menu/MenuSubmenuBack.tsx

@@ -1,39 +0,0 @@
-import React, { ButtonHTMLAttributes, forwardRef, useContext } from 'react'
-import classNames from 'classnames'
-
-import { SubmenuActionsContext } from './submenuGroup'
-
-export interface MenuSubmenuBackProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-// First item of a stacked submenu's nested menu (see `MenuSubmenu`'s `stacked` prop). Closes
-// the submenu and returns focus to its trigger — visible only below the `sm` breakpoint.
-export const MenuSubmenuBack = forwardRef<HTMLButtonElement, MenuSubmenuBackProps>(
-  ({ children, className, onClick, type = 'button', ...rest }, ref) => {
-    const actions = useContext(SubmenuActionsContext)
-
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      onClick?.(event)
-      actions?.close()
-    }
-
-    return (
-      <button
-        type={type}
-        role="menuitem"
-        className={classNames('submenu-back', 'menu-item', className)}
-        {...rest}
-        onClick={handleClick}
-        ref={ref}
-      >
-        {children}
-      </button>
-    )
-  }
-)
-
-MenuSubmenuBack.displayName = 'MenuSubmenuBack'

package/src/components/menu/MenuText.tsx

@@ -1,47 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type MenuTextOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-}
-
-export type MenuTextProps<C extends ElementType = 'span'> = PolymorphicComponentProps<
-  C,
-  MenuTextOwnProps<C>
->
-
-type MenuTextComponent = (<C extends ElementType = 'span'>(
-  props: MenuTextProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function MenuTextRender<C extends ElementType = 'span'>(
-  { children, className, component, ...rest }: MenuTextProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'span'
-  const _className = classNames('menu-text', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const MenuText = createPolymorphicComponent<MenuTextComponent>(
-  MenuTextRender as ForwardRefRenderFunction<Element, MenuTextProps<ElementType>>,
-  'MenuText'
-)

package/src/components/menu/MenuToggle.tsx

@@ -1,148 +0,0 @@
-import React, {
-  ElementType,
-  ForwardRefRenderFunction,
-  ReactElement,
-  useContext,
-  useRef
-} from 'react'
-import classNames from 'classnames'
-import { mergeProps, useButton } from 'react-aria'
-
-import { Button } from '../button/Button'
-import { MenuContext } from './Menu'
-import { ContextColor, ContextStyle, Shapes } from '../../types'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { useForkedRef } from '../../hooks'
-
-type MenuToggleOwnProps<C extends ElementType> = {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors. Only applies to the
-   * default `Button` root.
-   */
-  color?: ContextColor
-  /**
-   * Component used for the root node — the trigger element the menu opens from. Defaults to
-   * `Button`; swap for e.g. `NavLink` to render a nav-item-style trigger (`.nav-link.caret`)
-   * instead of a `.button.caret`. Its own props are type-checked at the call site once passed
-   * here.
-   */
-  component?: C
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * The href attribute specifies the URL of the page the link goes to.
-   */
-  href?: string
-  /**
-   * Select the shape of the component. Only applies to the default `Button` root.
-   */
-  shape?: Shapes
-  /**
-   * Size the component sm or lg. Only applies to the default `Button` root.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Sets the context style of the component. Only applies to the default `Button` root.
-   */
-  variant?: ContextStyle
-}
-
-export type MenuToggleProps<C extends ElementType = typeof Button> = PolymorphicComponentProps<
-  C,
-  MenuToggleOwnProps<C>
->
-
-type MenuToggleComponent = (<C extends ElementType = typeof Button>(
-  props: MenuToggleProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function MenuToggleRender<C extends ElementType = typeof Button>(
-  { children, className, component, onClick, onKeyDown, ...rest }: MenuToggleProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const { hide, menuTriggerProps, reference, targetRef, toggleNodeRef, visible } =
-    useContext(MenuContext)
-  const Component = component ?? Button
-  const buttonRef = useRef<HTMLButtonElement | null>(null)
-  // `elementType` tells react-aria whether the rendered root already has native button
-  // semantics (`Button`, defaulting to `<button>`) or needs them emulated (`role="button"`,
-  // keyboard activation) — anything else swapped in via `component` (e.g. `NavLink`, which
-  // defaults to `<a>`) falls into the latter case.
-  const { buttonProps } = useButton(
-    { ...menuTriggerProps, elementType: Component === Button ? 'button' : 'a' },
-    buttonRef
-  )
-  const wasOpenRef = useRef(false)
-
-  const setRefs = (node: HTMLButtonElement | null) => {
-    buttonRef.current = node
-    toggleNodeRef.current = node
-    if (reference !== 'parent') {
-      targetRef.current = node
-    }
-  }
-
-  const forkedRef = useForkedRef(ref, setRefs)
-
-  // react-aria's `useMenuTrigger` opens (rather than toggles) on mouse/pen press start, so
-  // re-clicking an already-open trigger would otherwise re-open it right back instead of
-  // closing it. Capture whether it was open before that happens — ours has to run ahead of
-  // `buttonProps`' own `onPointerDown` in the `mergeProps` chain below — then close it back
-  // down on click. Touch is exempt: react-aria's `onPress` already toggles it correctly there.
-  const handlePointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {
-    wasOpenRef.current = event.pointerType !== 'touch' && visible
-  }
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault()
-    event.stopPropagation()
-    if (wasOpenRef.current) {
-      wasOpenRef.current = false
-      hide()
-    }
-    onClick?.(event)
-  }
-
-  return (
-    <Component
-      // Only the default `Button` root needs an explicit `type` to avoid an implicit form
-      // submit — other roots (e.g. `NavLink`, a raw `'button'` string) either don't render a
-      // `<button>` at all or already accept `type` as one of their own passthrough props.
-      {...(Component === Button ? { type: 'button' } : {})}
-      // The `.caret` utility (rather than styling off `[data-cx-toggle="menu"]`, as the vanilla
-      // CSS docs show) keeps this element from also matching Chassis CSS's own vanilla menu.js
-      // selectors on a page that happens to load both — this component reimplements all of that
-      // behavior itself, so there's nothing for the vanilla plugin to usefully do with it anyway.
-      // `show` mirrors `MenuList`'s own `{ show: visible }` and vanilla menu.js's
-      // `this._element.classList.add('show')` — it's what puts the trigger itself into a
-      // pressed look while its menu is open (`.button.show`/`.nav-item.show .nav-link`).
-      className={classNames('caret', { show: visible }, className)}
-      {...(mergeProps({ onPointerDown: handlePointerDown }, rest, buttonProps, {
-        onClick: handleClick,
-        onKeyDown
-      }) as Record<string, unknown>)}
-      ref={forkedRef}
-    >
-      {children}
-    </Component>
-  )
-}
-
-export const MenuToggle = createPolymorphicComponent<MenuToggleComponent>(
-  MenuToggleRender as ForwardRefRenderFunction<Element, MenuToggleProps<ElementType>>,
-  'MenuToggle'
-)

package/src/components/menu/index.ts

@@ -1,19 +0,0 @@
-export { Menu } from './Menu'
-export type { MenuProps, MenuFocusStrategy, MenuAutoClose } from './Menu'
-export { MenuDivider } from './MenuDivider'
-export type { MenuDividerProps } from './MenuDivider'
-export { MenuHeader } from './MenuHeader'
-export type { MenuHeaderProps } from './MenuHeader'
-export { MenuItem } from './MenuItem'
-export type { MenuItemProps } from './MenuItem'
-export { MenuList } from './MenuList'
-export type { MenuListProps } from './MenuList'
-export { MenuText } from './MenuText'
-export type { MenuTextProps } from './MenuText'
-export { MenuToggle } from './MenuToggle'
-export type { MenuToggleProps } from './MenuToggle'
-export { MenuSubmenu } from './MenuSubmenu'
-export type { MenuSubmenuProps } from './MenuSubmenu'
-export { MenuSubmenuBack } from './MenuSubmenuBack'
-export type { MenuSubmenuBackProps } from './MenuSubmenuBack'
-export type { MenuItemDef, MenuHeaderDef, MenuDividerDef, MenuItemsDef } from './MenuItemDef'