elastic / elastic/eui

[EuiContextMenu] Migrate from class to function component

Open
#9,488 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 15h
Merged PRs (30d)
69

Description

`EuiContextMenu` orchestrates multi-panel navigation within a context menu, managing panel transitions and breadcrumb-style navigation.

- **File:** `components/context_menu/context_menu.tsx`
- **Class size:** 193 lines
- **State:** 12+ fields (`idToPanelMap`, `idToPreviousPanelIdMap`, `idAndItemIndexToPanelIdMap`, `idToRenderedItemsMap`, `height`, `outgoingPanelId`, `incomingPanelId`, `transitionDirection`, `isOutgoingPanelVisible`, `focusedItemIndex`, `isUsingKeyboardToNavigate`)
- **Lifecycle:** `getDerivedStateFromProps`, `componentDidUpdate`

**Migration notes:**

Complex state object with `getDerivedStateFromProps` building panel maps from props. The transition/animation state machine is non-trivial. Should be migrated together with `EuiContextMenuPanel`.

**Acceptance criteria:**

- [ ] Convert to function component with hooks
- [ ] Migrate together with `EuiContextMenuPanel`
- [ ] Maintain panel transition animations and navigation
- [ ] Handle `getDerivedStateFromProps` → state derivation carefully
- [ ] All existing tests pass

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.