Reshaped UI Documentation

The Flyout class handles complex positioning logic, collision detection, and automatic adjustments for floating elements like dropdowns, popovers, or tooltips. You provide a content element and a trigger element, and the Flyout ensures the content is visible and properly aligned relative to the trigger.

Usage

1. Create a new Flyout instance with content and trigger (or triggerCoordinates).
2. Call .activate() to position and show the content.
3. Call .deactivate() to clean up behavior when closing.
4. Use .update(options) to adjust position based on viewport changes or new options.

Options

• content: The HTMLElement to be positioned (must be rendered when instantiated).
• trigger: The HTMLElement to position against.
• triggerCoordinates: { x: number; y: number } used if no trigger element exists (e.g., for context menus).
• container: An HTMLElement to act as the positioning boundary instead of the viewport.
• position: The default position (e.g., top, bottom-start, end-top).
• fallbackPositions: An array of Position values to use if the default position causes a collision.
• fallbackAdjustLayout: If true, tries shifting/resizing content before changing position.
• onDeactivate: Callback triggered when the flyout deactivates itself (e.g., due to scrolling).

import { Flyout } from "@reshaped/utilities";

const flyout = new Flyout({
	content: contentElement,
	trigger: triggerElement,
	position: "bottom-start",
});

// Position the flyout content based on the trigger element
flyout.activate();

// Clean-up the flyout behavior on closing the content
flyout.deactivate();

// Update flyout position based on updated options and the current viewport position
flyout.update(options);

After performing a migration, you must create a report file in the workspace root named reshaped-v3-v4-migration-report.md. This report provides an audit trail of applied changes, manual review requirements, and overall migration status.

Report Structure

The report must include:

• Scope: Target folders/packages and the migration date.
• Migration Results: A section for every file in changes/*.md containing:
  • Status: completed | partial | not-applicable | blocked
  • Components updated: Count of components modified.
  • Confidence: high | medium | low
  • Medium/low review locations: Exact <path>:<line> for items requiring human review.
  • Notes: Key decisions or caveats.
  • Manual steps: Required human follow-up.
• Summary: Aggregated totals for processed migrations, completion status, and total components updated.

# Reshaped v3 -> v4 Migration Report

## Scope

- Target: <folders/packages migrated>
- Date: <YYYY-MM-DD>

## Migration Results

### <migration name from file>

- Status: `completed` | `partial` | `not-applicable` | `blocked`
- Components updated: <number>
- Confidence: `high` | `medium` | `low`
- Medium/low review locations:
  - `<path>:<line>` - <why review is needed>
- Notes: <key decisions, caveats>
- Manual steps (if any):
  - <required human follow-up>

<!-- Repeat for every changes/*.md file -->

## Summary

- Total migrations processed: <number>
- Completed: <number>
- Partial: <number>
- Not applicable: <number>
- Blocked: <number>
- Total components updated: <number>

In Reshaped v4, the Tabs component no longer automatically detects a defaultValue based on its children. To maintain existing behavior, you must explicitly provide a defaultValue prop to the Tabs component.

Migration Logic:

• Controlled Components: If your Tabs component is already controlled via the value prop, no changes are required.
• Existing Default Values: If you have already explicitly defined a defaultValue, no changes are required.
• Uncontrolled Components: If neither value nor defaultValue is present, you must manually add the defaultValue prop. The value should match the value prop of the Tabs.Item you want selected by default (typically the first item).

// Before (v3)
<Tabs>
	<Tabs.Item value="overview">Overview</Tabs.Item>
	<Tabs.Item value="activity">Activity</Tabs.Item>
</Tabs>

// After (v4)
<Tabs defaultValue="overview">
	<Tabs.Item value="overview">Overview</Tabs.Item>
	<Tabs.Item value="activity">Activity</Tabs.Item>
</Tabs>