fix: Change to allow each overlay provider to have a unique ID

[jungpaeng]

Description

This change ensures that each overlay provider is assigned a unique event ID.

Previously, event IDs were shared or reused across overlay providers, which led to potential collisions and ambiguity during event handling.

Related Issue: Fixes #160

Changes

• Introduced a mechanism to generate and assign unique event IDs per overlay provider.
• Updated the overlay manager logic to utilize the provider-scoped event ID.

Motivation and Context

Event IDs are used for tracking and managing overlay-related events. When multiple providers share the same ID space, there is a risk of event handling conflicts or incorrect state transitions.

This update eliminates such risks by scoping event IDs to the specific provider, enabling more reliable and maintainable event processing in systems with multiple overlays.

How Has This Been Tested?

• Manually tested multiple overlay providers by triggering event flows concurrently to verify isolation.

const { OverlayProvider: CustomOverlayProvider, overlay: customOverlay } = experimental_createOverlayContext();

export function Demo() {
  return (
    <CustomOverlayProvider>
      <button
        onClick={() => {
          overlay.open(() => <div>OVERLAY</div>);
        }}
      >
        overlay.open
      </button>
      <button
        onClick={() => {
          customOverlay.open(() => <div>CUSTOM_OVERLAY</div>);
        }}
      >
        customOverlay.open
      </button>
    </CustomOverlayProvider>
  );
}

...

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <OverlayProvider>
      <Demo />
    </OverlayProvider>
  </React.StrictMode>
);

Screenshots (if appropriate):

2025-05-08.12.53.11.mov

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update

Checklist

• I have performed a self-review of my own code.
• My code is commented, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have added tests that prove my fix is effective or that my feature works.
• New and existing unit tests pass locally with my changes.
• Any dependent changes have been merged and published in downstream modules.

Further Comments

[changeset-bot]

🦋 Changeset detected

Latest commit: df6ad8a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
overlay-kit	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
overlay-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 4:00am

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.87%. Comparing base (07f42a5) to head (df6ad8a).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #161      +/-   ##
==========================================
- Coverage   94.44%   93.87%   -0.57%     
==========================================
  Files          12       12              
  Lines         342      343       +1     
  Branches       86       85       -1     
==========================================
- Hits          323      322       -1     
- Misses         18       20       +2     
  Partials        1        1              

Components	Coverage Δ
overlay-kit	93.87% <100.00%> (-0.57%)	⬇️

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.