fix: Change to allow each overlay provider to have a unique ID (#161)

* feat: Change to allow each overlay provider to have a unique event ID

* Create quick-humans-bathe.md

* Update quick-humans-bathe.md

Author: jungpaeng

.changeset/quick-humans-bathe.md

@@ -0,0 +1,10 @@
+---
+"overlay-kit": patch
+---
+
+feat: Change to allow each overlay provider to have a unique event ID
+
+Each overlay provider now uses a unique event ID instead of relying on shared global identifiers.
+
+This change improves event handling accuracy and avoids potential collisions when managing multiple overlays from different providers.
+It is backward-compatible for existing overlays that do not explicitly set a provider-specific ID.

packages/src/context/provider/index.tsx

@@ -1,11 +1,13 @@
 import { useCallback, useEffect, useReducer, type PropsWithChildren } from 'react';
 import { ContentOverlayController } from './content-overlay-controller';
 import { type OverlayEvent, createOverlay } from '../../event';
+import { randomId } from '../../utils/random-id';
 import { createOverlaySafeContext } from '../context';
 import { overlayReducer } from '../reducer';
 
 export function createOverlayProvider() {
-  const { useOverlayEvent, ...overlay } = createOverlay();
+  const overlayId = randomId();
+  const { useOverlayEvent, ...overlay } = createOverlay(overlayId);
   const { OverlayContextProvider, useCurrentOverlay, useOverlayData } = createOverlaySafeContext();
 
   function OverlayProvider({ children }: PropsWithChildren) {

packages/src/event.ts

@@ -17,8 +17,8 @@ type OpenOverlayOptions = {
   overlayId?: string;
 };
 
-export function createOverlay() {
-  const [useOverlayEvent, createEvent] = createUseExternalEvents<OverlayEvent>('overlay-kit');
+export function createOverlay(overlayId: string) {
+  const [useOverlayEvent, createEvent] = createUseExternalEvents<OverlayEvent>(`${overlayId}/overlay-kit`);
 
   const open = (controller: OverlayControllerComponent, options?: OpenOverlayOptions) => {
     const overlayId = options?.overlayId ?? randomId();

packages/src/utils/create-overlay-context.tsx

@@ -1,6 +1,6 @@
 import { createOverlayProvider } from '../context/provider';
 
-export const { overlay, OverlayProvider, useCurrentOverlay, useOverlayData } = experimental_createOverlayContext();
+export const { overlay, OverlayProvider, useCurrentOverlay, useOverlayData } = createOverlayProvider();
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function experimental_createOverlayContext() {