refactor(flyout): migrate Flyout from Flow to TypeScript

[bonchevskyi]

Convert Flyout component to TypeScript

This PR converts src/components/flyout from JavaScript with Flow to TypeScript.

Changes

• Converted Flyout.js to Flyout.tsx with exported FlyoutProps interface
• Converted Overlay.js to Overlay.tsx with exported OverlayProps interface
• Converted FlyoutContext.js to FlyoutContext.ts with exported FlyoutContextValues interface
• Converted index.js to index.ts, re-exporting the components and their types
• Converted __tests__/Flyout.test.js, Overlay.test.js, and OverlayHeader.test.js to .test.tsx
• Created .js.flow files for backward compatibility
• Removed stale @ts-ignores from OverlayHeader.tsx and Flyout.stories.tsx now that sibling modules are TypeScript

Contract

• Declared Flow props contract preserved (requiredness, accepted values, defaults, exports)

Testing

• Ran tests for src/components/flyout; all 78 pass
• yarn lint:ts and flow check pass
• Manually verified in Storybook (Components/Flyout) that behavior is unchanged

Summary by CodeRabbit

• New Features

  • Added flyout components for displaying positioned overlays from buttons or other triggers.
  • Supports click, hover, keyboard, focus, outside-click, and window-blur interactions.
  • Added configurable placement, offsets, responsive behavior, and viewport constraints.
  • Added focus trapping, Escape-key dismissal, accessibility attributes, and overlay close controls.
  • Added exports for Flyout, Overlay, OverlayHeader, and supporting context types.

• Tests

  • Expanded coverage for flyout interactions, keyboard behavior, focus handling, and overlay header actions.

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 14e1a753-6323-4b45-9f60-53d1042386c0

📥 Commits

Reviewing files that changed from the base of the PR and between 5d273fe and 9497ac3.

📒 Files selected for processing (13)

• src/components/flyout/Flyout.js.flow
• src/components/flyout/Flyout.stories.tsx
• src/components/flyout/Flyout.tsx
• src/components/flyout/FlyoutContext.js.flow
• src/components/flyout/FlyoutContext.ts
• src/components/flyout/Overlay.js.flow
• src/components/flyout/Overlay.tsx
• src/components/flyout/OverlayHeader.tsx
• src/components/flyout/__tests__/Flyout.test.tsx
• src/components/flyout/__tests__/Overlay.test.tsx
• src/components/flyout/__tests__/OverlayHeader.test.tsx
• src/components/flyout/index.js.flow
• src/components/flyout/index.ts

 _____________________________________________________________________
< RabbitShergill is my Punjabi cousin. He's a bit musically inclined. >
 ---------------------------------------------------------------------
  \
   \   \
        \ /\
        ( )
      .( o ).

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Caution

CodeRabbit couldn't update its existing comment. The review summary may be out of date.

Error details

putComment timed out

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/flyout/__tests__/Flyout.test.tsx (1)

378-428: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Make the hover tests observe the handler calls.

The tests register Sinon expectations inside timers after they invoke the handler. openOverlay() runs at the configured delay before the expectation at 310 ms. A synchronous Jest test can finish before either timer executes.

The positive custom-delay and hover-leave cases also use openOnHover: false. Flyout returns without scheduling open or close work in that state.

Register each expectation before invoking the handler. Set openOnHover: true for positive paths. Advance the controlled timer through the configured delay before verification.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/flyout/__tests__/Flyout.test.tsx` around lines 378 - 428,
Update the handleButtonHover() and handleButtonHoverLeave() tests to set Sinon
expectations before invoking the handlers, use openOnHover: true for positive
open/close paths, and advance the controlled timer through each configured delay
before asserting. Ensure the tests synchronously observe the scheduled handler
calls rather than registering expectations inside delayed callbacks, while
retaining never expectations for negative paths.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/flyout/Overlay.tsx`:
- Around line 7-16: Prevent Overlay’s caller-provided onKeyDown from overriding
FocusTrap’s internal keyboard handling. Update the Overlay keyboard flow around
handleOverlayKeyDown to extract or otherwise exclude onKeyDown from rest, then
invoke the supplied handler alongside the existing Escape-close and Tab-trapping
behavior; alternatively, make FocusTrap compose both handlers.

---

Outside diff comments:
In `@src/components/flyout/__tests__/Flyout.test.tsx`:
- Around line 378-428: Update the handleButtonHover() and
handleButtonHoverLeave() tests to set Sinon expectations before invoking the
handlers, use openOnHover: true for positive open/close paths, and advance the
controlled timer through each configured delay before asserting. Ensure the
tests synchronously observe the scheduled handler calls rather than registering
expectations inside delayed callbacks, while retaining never expectations for
negative paths.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 14e1a753-6323-4b45-9f60-53d1042386c0

📥 Commits

Reviewing files that changed from the base of the PR and between 5d273fe and 9497ac3.

📒 Files selected for processing (13)

• src/components/flyout/Flyout.js.flow
• src/components/flyout/Flyout.stories.tsx
• src/components/flyout/Flyout.tsx
• src/components/flyout/FlyoutContext.js.flow
• src/components/flyout/FlyoutContext.ts
• src/components/flyout/Overlay.js.flow
• src/components/flyout/Overlay.tsx
• src/components/flyout/OverlayHeader.tsx
• src/components/flyout/__tests__/Flyout.test.tsx
• src/components/flyout/__tests__/Overlay.test.tsx
• src/components/flyout/__tests__/OverlayHeader.test.tsx
• src/components/flyout/index.js.flow
• src/components/flyout/index.ts

💤 Files with no reviewable changes (2)

• src/components/flyout/Flyout.stories.tsx
• src/components/flyout/OverlayHeader.tsx