elastic / elastic/eui

[EuiPopover] Migrate from class to function component

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

Description

`EuiPopover` is the foundational overlay positioning component in EUI. Used by combo boxes, context menus, date pickers, tooltips, selects, and many other components. Extremely widely used.

- **File:** `components/popover/popover.tsx`
- **Class size:** 268 lines
- **State:** Constructor-initialized (position, visibility, transition state)
- **Lifecycle:** `getDerivedStateFromProps`, `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`

**Migration notes:**

Full lifecycle suite with complex positioning logic, focus trapping, and open/close transitions. `getDerivedStateFromProps` manages open state sync. Positioning recalculations happen in `componentDidUpdate`. Foundational component — any regression here cascades widely.

**Acceptance criteria:**

- [ ] Convert to function component with hooks
- [ ] Maintain positioning logic and dynamic repositioning
- [ ] Maintain focus trap and return-focus behavior
- [ ] Maintain open/close animation transitions
- [ ] All existing tests pass
- [ ] Extensive manual verification across popover consumers

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.