@etus/ui 0.1.0 → 0.1.2

package/src/components/navigation/ContextMenu/README.md

@@ -1,660 +0,0 @@
-# ContextMenu
-
-## Visão Geral
-
-O ContextMenu exibe um menu de opcoes acionado por clique com botao direito (ou long-press em touch). E ideal para acoes contextuais especificas ao elemento clicado, como operacoes de arquivo, edicao de texto ou acoes rapidas em listas.
-
-### Classificacao Atomica
-- **Categoria**: Molecules
-- **Subcategoria**: Navigation / Overlay
-
-### Casos de Uso Comuns
-- Acoes em arquivos e pastas (copiar, colar, renomear, excluir)
-- Edicao de texto (copiar, colar, formatar)
-- Acoes em itens de lista ou tabela
-- Menus de opcoes em canvas ou editores graficos
-- Acoes rapidas em cards ou elementos interativos
-
-### Relacao com Outros Componentes
-- **DropdownMenu**: Similar, mas acionado por clique esquerdo em um trigger
-- **Menu**: Versao base para menus genericos
-- **Popover**: Compartilha logica de posicionamento
-- **Tooltip**: Pode ser combinado para explicar opcoes do menu
-
-## Design Specs
-
-### Subcomponentes
-
-- **ContextMenu**: Root que gerencia estado do menu
-- **ContextMenuTrigger**: Elemento que recebe o clique direito
-- **ContextMenuContent**: Container do conteudo do menu
-- **ContextMenuItem**: Item clicavel padrao
-- **ContextMenuCheckboxItem**: Item com checkbox
-- **ContextMenuRadioGroup/RadioItem**: Grupo de opcoes exclusivas
-- **ContextMenuLabel**: Label para grupos de itens
-- **ContextMenuSeparator**: Divisor visual
-- **ContextMenuShortcut**: Exibe atalho de teclado
-- **ContextMenuSub/SubTrigger/SubContent**: Submenus aninhados
-- **ContextMenuGroup**: Agrupa itens semanticamente
-- **ContextMenuPortal**: Renderiza em portal
-
-### Variantes de MenuItem
-
-| Variante | Descricao | Classes |
-|----------|-----------|---------|
-| `default` | Estilo padrao | `focus:bg-accent focus:text-accent-foreground` |
-| `destructive` | Acoes destrutivas | `text-destructive focus:bg-destructive/10` |
-
-### Estados
-
-- **Default**: Background transparente, texto `text-foreground`
-- **Hover/Focus**: `bg-accent text-accent-foreground`
-- **Open (Sub)**: `bg-accent text-accent-foreground`
-- **Disabled**: `pointer-events-none opacity-50`
-- **Checked**: Icone de check visivel
-
-### Tokens de Design
-
-#### Cores
-- Background: `bg-popover`
-- Text: `text-popover-foreground`
-- Border: `border` (usa border color padrao)
-- Separator: `bg-border`
-- Muted text: `text-muted-foreground`
-- Destructive: `text-destructive`
-
-#### Espacamento
-- Content padding: `p-1`
-- Item padding: `px-2 py-1.5`
-- Checkbox/Radio item: `py-1.5 pr-2 pl-8`
-- Inset padding: `pl-8`
-- Separator margin: `-mx-1 my-1`
-
-#### Tipografia
-- Font size: `text-sm` (14px)
-- Label: `text-sm font-medium`
-- Shortcut: `text-xs tracking-widest`
-
-#### Bordas e Arredondamento
-- Content: `rounded-md`
-- Items: `rounded-sm`
-
-#### Icones
-- Check: `size-4`
-- Radio circle: `size-2`
-- Chevron (submenu): auto via ml-auto
-- Icones gerais: `size-4` via `[&_svg:not([class*='size-'])]:size-4`
-
-#### Motion e Transicoes
-- Entry: `animate-in fade-in-0 zoom-in-95`
-- Exit: `animate-out fade-out-0 zoom-out-95`
-- Slide variations: `slide-in-from-{side}-2`
-
-### Consideracoes de Responsividade
-- **Mobile**: Long-press para ativar (handled pelo Radix)
-- **Touch**: Menu posiciona-se proximo ao ponto de toque
-- **Max Height**: `max-h-(--radix-context-menu-content-available-height)`
-- **Overflow**: `overflow-x-hidden overflow-y-auto`
-
-## API
-
-### Componentes Exportados
-
-#### ContextMenu
-Root component que gerencia o estado do menu.
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `onOpenChange` | `(open: boolean) => void` | - | Callback quando abre/fecha |
-| `modal` | `boolean` | `true` | Se deve travar foco no menu |
-
-#### ContextMenuTrigger
-Area que responde ao clique direito.
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `disabled` | `boolean` | `false` | Desabilita o trigger |
-| `asChild` | `boolean` | `false` | Merge props no filho |
-
-#### ContextMenuContent
-Container do conteudo do menu.
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `className` | `string` | `''` | Classes adicionais |
-| `alignOffset` | `number` | `0` | Offset de alinhamento |
-| `avoidCollisions` | `boolean` | `true` | Evita colisao com viewport |
-| `collisionPadding` | `number` | `0` | Padding para colisao |
-
-#### ContextMenuItem
-Item clicavel do menu.
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `inset` | `boolean` | `false` | Adiciona padding esquerdo |
-| `variant` | `"default" \| "destructive"` | `"default"` | Variante visual |
-| `disabled` | `boolean` | `false` | Desabilita o item |
-| `onSelect` | `(event) => void` | - | Callback na selecao |
-
-#### ContextMenuCheckboxItem
-Item com estado de checkbox.
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `checked` | `boolean \| "indeterminate"` | - | Estado do checkbox |
-| `onCheckedChange` | `(checked: boolean) => void` | - | Callback de mudanca |
-| `disabled` | `boolean` | `false` | Desabilita o item |
-
-#### ContextMenuRadioGroup / ContextMenuRadioItem
-Grupo de opcoes mutuamente exclusivas.
-
-| Prop (RadioGroup) | Tipo | Padrao | Descricao |
-|-------------------|------|--------|-----------|
-| `value` | `string` | - | Valor selecionado |
-| `onValueChange` | `(value: string) => void` | - | Callback de mudanca |
-
-| Prop (RadioItem) | Tipo | Padrao | Descricao |
-|------------------|------|--------|-----------|
-| `value` | `string` | - | Valor do item |
-| `disabled` | `boolean` | `false` | Desabilita o item |
-
-#### ContextMenuLabel
-Label para grupos de itens.
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `inset` | `boolean` | `false` | Adiciona padding esquerdo |
-| `className` | `string` | `''` | Classes adicionais |
-
-#### ContextMenuSeparator
-Divisor visual entre grupos.
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `className` | `string` | `''` | Classes adicionais |
-
-#### ContextMenuShortcut
-Exibe atalho de teclado.
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `className` | `string` | `''` | Classes adicionais |
-| `children` | `ReactNode` | - | Texto do atalho (ex: "Ctrl+C") |
-
-#### ContextMenuSub / ContextMenuSubTrigger / ContextMenuSubContent
-Componentes para submenus aninhados.
-
-### Interfaces TypeScript
-
-```typescript
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-
-// MenuItem com variantes
-interface ContextMenuItemProps
-  extends React.ComponentProps<typeof ContextMenuPrimitive.Item> {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}
-
-// SubTrigger com inset
-interface ContextMenuSubTriggerProps
-  extends React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> {
-  inset?: boolean
-}
-
-// Label com inset
-interface ContextMenuLabelProps
-  extends React.ComponentProps<typeof ContextMenuPrimitive.Label> {
-  inset?: boolean
-}
-```
-
-### Comparacao com Referencias
-
-| Feature | ETUS | Radix | MUI | Ant Design | Chakra |
-|---------|------|-------|-----|------------|--------|
-| Submenus | Sim | Sim | Sim | Sim | Nao |
-| Checkbox Items | Sim | Sim | Nao | Nao | Nao |
-| Radio Items | Sim | Sim | Nao | Nao | Nao |
-| Keyboard Nav | Sim | Sim | Sim | Sim | Sim |
-| Collision Detection | Sim | Sim | Sim | Sim | Nao |
-| Touch Support | Sim | Sim | Parcial | Parcial | Nao |
-| Destructive Variant | Sim | Nao | Nao | Sim | Nao |
-
-## Acessibilidade (A11y)
-
-### Atributos ARIA
-- `role="menu"`: No ContextMenuContent
-- `role="menuitem"`: Nos items
-- `role="menuitemcheckbox"`: Nos checkbox items
-- `role="menuitemradio"`: Nos radio items
-- `aria-checked`: Estado de checkbox/radio items
-- `aria-disabled`: Em items desabilitados
-- `aria-haspopup="menu"`: Em sub triggers
-- `aria-expanded`: Estado de submenus
-
-### Navegacao por Teclado
-- `Arrow Down/Up`: Navega entre items
-- `Arrow Right`: Abre submenu
-- `Arrow Left`: Fecha submenu
-- `Enter/Space`: Seleciona item
-- `Escape`: Fecha menu (cascata em submenus)
-- `Home/End`: Vai para primeiro/ultimo item
-- `A-Z`: Navega por typing (type-ahead)
-
-### Contraste e Legibilidade
-- Contraste minimo WCAG AA em todos os estados
-- Focus ring visivel: `focus-visible:ring-2`
-- Hover state claramente distinguivel
-
-### Tecnologias Assistivas
-- Menu anunciado como "menu" ou "context menu"
-- Items anunciados com seu papel e estado
-- Submenus anunciados como "submenu"
-- Atalhos de teclado sao lidos
-
-### Conformidade WCAG
-- **Nivel alvo**: WCAG 2.1 AA
-- **Criterios atendidos**:
-  - 1.4.3 Contrast (Minimum)
-  - 2.1.1 Keyboard
-  - 2.4.3 Focus Order
-  - 4.1.2 Name, Role, Value
-
-## Exemplos
-
-### Uso Basico
-
-```tsx
-import {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-} from "@etus/ui"
-
-function BasicContextMenu() {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger className="flex h-32 w-64 items-center justify-center rounded-md border border-dashed">
-        Right click here
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>Edit</ContextMenuItem>
-        <ContextMenuItem>Duplicate</ContextMenuItem>
-        <ContextMenuItem>Delete</ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  )
-}
-```
-
-### Com Atalhos de Teclado
-
-```tsx
-import {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuShortcut,
-  ContextMenuSeparator,
-} from "@etus/ui"
-
-function ContextMenuWithShortcuts() {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger className="w-64 h-32 border border-dashed rounded-md flex items-center justify-center">
-        Right click here
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>
-          Cut
-          <ContextMenuShortcut>Ctrl+X</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuItem>
-          Copy
-          <ContextMenuShortcut>Ctrl+C</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuItem>
-          Paste
-          <ContextMenuShortcut>Ctrl+V</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem variant="destructive">
-          Delete
-          <ContextMenuShortcut>Del</ContextMenuShortcut>
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  )
-}
-```
-
-### Com Checkbox e Radio Items
-
-```tsx
-import { useState } from "react"
-import {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-} from "@etus/ui"
-
-function ContextMenuWithSelections() {
-  const [showGrid, setShowGrid] = useState(true)
-  const [showRulers, setShowRulers] = useState(false)
-  const [zoom, setZoom] = useState("100")
-
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger className="w-64 h-32 border border-dashed rounded-md flex items-center justify-center">
-        Right click here
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuLabel>View Options</ContextMenuLabel>
-        <ContextMenuCheckboxItem
-          checked={showGrid}
-          onCheckedChange={setShowGrid}
-        >
-          Show Grid
-        </ContextMenuCheckboxItem>
-        <ContextMenuCheckboxItem
-          checked={showRulers}
-          onCheckedChange={setShowRulers}
-        >
-          Show Rulers
-        </ContextMenuCheckboxItem>
-        <ContextMenuSeparator />
-        <ContextMenuLabel>Zoom Level</ContextMenuLabel>
-        <ContextMenuRadioGroup value={zoom} onValueChange={setZoom}>
-          <ContextMenuRadioItem value="50">50%</ContextMenuRadioItem>
-          <ContextMenuRadioItem value="100">100%</ContextMenuRadioItem>
-          <ContextMenuRadioItem value="150">150%</ContextMenuRadioItem>
-          <ContextMenuRadioItem value="200">200%</ContextMenuRadioItem>
-        </ContextMenuRadioGroup>
-      </ContextMenuContent>
-    </ContextMenu>
-  )
-}
-```
-
-### Com Submenus
-
-```tsx
-import {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSub,
-  ContextMenuSubTrigger,
-  ContextMenuSubContent,
-  ContextMenuSeparator,
-} from "@etus/ui"
-
-function ContextMenuWithSubmenus() {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger className="w-64 h-32 border border-dashed rounded-md flex items-center justify-center">
-        Right click here
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>New File</ContextMenuItem>
-        <ContextMenuItem>New Folder</ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuSub>
-          <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
-          <ContextMenuSubContent>
-            <ContextMenuItem>Email</ContextMenuItem>
-            <ContextMenuItem>Slack</ContextMenuItem>
-            <ContextMenuItem>Copy Link</ContextMenuItem>
-          </ContextMenuSubContent>
-        </ContextMenuSub>
-        <ContextMenuSub>
-          <ContextMenuSubTrigger>Export As</ContextMenuSubTrigger>
-          <ContextMenuSubContent>
-            <ContextMenuItem>PDF</ContextMenuItem>
-            <ContextMenuItem>PNG</ContextMenuItem>
-            <ContextMenuItem>SVG</ContextMenuItem>
-          </ContextMenuSubContent>
-        </ContextMenuSub>
-      </ContextMenuContent>
-    </ContextMenu>
-  )
-}
-```
-
-### Com Icones
-
-```tsx
-import { Copy, Scissors, Clipboard, Trash2, Share2, Download } from "lucide-react"
-import {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-} from "@etus/ui"
-
-function ContextMenuWithIcons() {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger className="w-64 h-32 border border-dashed rounded-md flex items-center justify-center">
-        Right click here
-      </ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>
-          <Scissors className="mr-2" />
-          Cut
-        </ContextMenuItem>
-        <ContextMenuItem>
-          <Copy className="mr-2" />
-          Copy
-        </ContextMenuItem>
-        <ContextMenuItem>
-          <Clipboard className="mr-2" />
-          Paste
-        </ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem>
-          <Share2 className="mr-2" />
-          Share
-        </ContextMenuItem>
-        <ContextMenuItem>
-          <Download className="mr-2" />
-          Download
-        </ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem variant="destructive">
-          <Trash2 className="mr-2" />
-          Delete
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  )
-}
-```
-
-### Em Lista de Arquivos
-
-```tsx
-import { File, Folder, MoreHorizontal } from "lucide-react"
-import {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-} from "@etus/ui"
-
-interface FileItem {
-  id: string
-  name: string
-  type: "file" | "folder"
-}
-
-function FileListContextMenu({ files }: { files: FileItem[] }) {
-  return (
-    <div className="space-y-1">
-      {files.map((file) => (
-        <ContextMenu key={file.id}>
-          <ContextMenuTrigger asChild>
-            <div className="flex items-center gap-2 p-2 rounded hover:bg-muted cursor-default">
-              {file.type === "folder" ? (
-                <Folder className="size-4 text-muted-foreground" />
-              ) : (
-                <File className="size-4 text-muted-foreground" />
-              )}
-              <span>{file.name}</span>
-            </div>
-          </ContextMenuTrigger>
-          <ContextMenuContent>
-            <ContextMenuItem>Open</ContextMenuItem>
-            <ContextMenuItem>Rename</ContextMenuItem>
-            <ContextMenuItem>Move to...</ContextMenuItem>
-            <ContextMenuSeparator />
-            <ContextMenuItem>Share</ContextMenuItem>
-            <ContextMenuItem>Get Info</ContextMenuItem>
-            <ContextMenuSeparator />
-            <ContextMenuItem variant="destructive">
-              Move to Trash
-            </ContextMenuItem>
-          </ContextMenuContent>
-        </ContextMenu>
-      ))}
-    </div>
-  )
-}
-```
-
-## Testes
-
-### Estrategias de Teste
-
-#### Testes Unitarios
-- Renderizacao do trigger e content
-- Abertura com clique direito simulado
-- Selecao de items
-- Estados de checkbox e radio
-
-#### Testes de Integracao
-- Navegacao em submenus
-- Fechamento ao selecionar item
-- Interacao com outros menus
-
-#### Testes de Acessibilidade
-- Roles ARIA corretos
-- Navegacao por teclado
-- Estados anunciados
-
-### Exemplos de Codigo
-
-```typescript
-import { describe, it, expect, vi } from "vitest"
-import { render, screen, fireEvent } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-} from "./ContextMenu"
-
-describe("ContextMenu", () => {
-  it("opens on right click", async () => {
-    render(
-      <ContextMenu>
-        <ContextMenuTrigger>Trigger</ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem>Item 1</ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>
-    )
-
-    const trigger = screen.getByText("Trigger")
-    fireEvent.contextMenu(trigger)
-
-    expect(await screen.findByRole("menu")).toBeInTheDocument()
-    expect(screen.getByText("Item 1")).toBeInTheDocument()
-  })
-
-  it("calls onSelect when item is clicked", async () => {
-    const onSelect = vi.fn()
-
-    render(
-      <ContextMenu>
-        <ContextMenuTrigger>Trigger</ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem onSelect={onSelect}>Item 1</ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>
-    )
-
-    fireEvent.contextMenu(screen.getByText("Trigger"))
-    await userEvent.click(await screen.findByText("Item 1"))
-
-    expect(onSelect).toHaveBeenCalled()
-  })
-
-  it("supports keyboard navigation", async () => {
-    render(
-      <ContextMenu>
-        <ContextMenuTrigger>Trigger</ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem>Item 1</ContextMenuItem>
-          <ContextMenuItem>Item 2</ContextMenuItem>
-          <ContextMenuItem>Item 3</ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>
-    )
-
-    fireEvent.contextMenu(screen.getByText("Trigger"))
-    await screen.findByRole("menu")
-
-    await userEvent.keyboard("{ArrowDown}")
-    expect(screen.getByText("Item 1")).toHaveFocus()
-
-    await userEvent.keyboard("{ArrowDown}")
-    expect(screen.getByText("Item 2")).toHaveFocus()
-  })
-
-  it("closes on Escape", async () => {
-    render(
-      <ContextMenu>
-        <ContextMenuTrigger>Trigger</ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem>Item 1</ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>
-    )
-
-    fireEvent.contextMenu(screen.getByText("Trigger"))
-    await screen.findByRole("menu")
-
-    await userEvent.keyboard("{Escape}")
-
-    expect(screen.queryByRole("menu")).not.toBeInTheDocument()
-  })
-})
-```
-
----
-
-## Roadmap / Features Futuras
-
-- Construido sobre `@radix-ui/react-context-menu`
-- Utiliza portal para renderizar fora da hierarquia DOM
-- Suporta touch via long-press automaticamente
-- Animacoes via Tailwind CSS + data attributes
-
-## Referências
-
-- [Radix UI Context Menu](https://www.radix-ui.com/primitives/docs/components/context-menu)
-- [WAI-ARIA Menu Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu/)
-- [Shadcn/ui Context Menu](https://ui.shadcn.com/docs/components/context-menu)

package/src/components/navigation/ContextMenu/index.ts

@@ -1,34 +0,0 @@
-export * from './ContextMenu'
-export {
-  contextMenuCheckboxItemVariants,
-  contextMenuContentVariants,
-  contextMenuIndicatorWrapperVariants,
-  type ContextMenuItemVariantProps,
-  contextMenuItemVariants,
-  type ContextMenuLabelVariantProps,
-  contextMenuLabelVariants,
-  contextMenuRadioItemVariants,
-  contextMenuSeparatorVariants,
-  contextMenuShortcutVariants,
-  contextMenuSubContentVariants,
-  type ContextMenuSubTriggerVariantProps,
-  contextMenuSubTriggerVariants,
-} from './ContextMenu.variants'
-export type {
-  ContextMenuCheckboxItemProps,
-  ContextMenuContentProps,
-  ContextMenuGroupProps,
-  ContextMenuItemProps,
-  ContextMenuItemVariant,
-  ContextMenuLabelProps,
-  ContextMenuPortalProps,
-  ContextMenuProps,
-  ContextMenuRadioGroupProps,
-  ContextMenuRadioItemProps,
-  ContextMenuSeparatorProps,
-  ContextMenuShortcutProps,
-  ContextMenuSubContentProps,
-  ContextMenuSubProps,
-  ContextMenuSubTriggerProps,
-  ContextMenuTriggerProps,
-} from './ContextMenu.types'