improve overlayscrollbars-react and repo setup

packages/overlayscrollbars-react/package.json

@@ -3,7 +3,6 @@
   "private": true,
   "version": "0.4.0",
   "files": [
-    "src",
     "dist",
     "README.md"
   ],
@@ -11,7 +10,8 @@
   "module": "./dist/overlayscrollbars-react.es.js",
   "types": "./dist/overlayscrollbars-react.d.ts",
   "peerDependencies": {
-    "react": ">=16.4.0"
+    "react": ">=16.4.0",
+    "overlayscrollbars": "^2.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^13.4.0",
@@ -19,6 +19,7 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",
+    "overlayscrollbars": "file:./../overlayscrollbars/dist",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.8.4"

packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx

@@ -28,7 +28,7 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
   useEffect(() => {
     const { current: target } = osTargetRef;
     if (target) {
-      const instance = OverlayScrollbars(target as any, options || {});
+      const instance = OverlayScrollbars(target as any, options || {}, events);
       osInstanceRef.current = instance;
 
       return () => instance.destroy();

packages/overlayscrollbars-react/test/OverlayScrollbarsComponent.test.tsx

@@ -1,9 +1,9 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vitest } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { OverlayScrollbars } from 'overlayscrollbars';
 import { OverlayScrollbarsComponent } from '~/overlayscrollbars-react';
-import type { OverlayScrollbarsComponentRef } from '~/overlayscrollbars-react';
 import type { RefObject } from 'react';
+import type { OverlayScrollbarsComponentRef } from '~/overlayscrollbars-react';
 
 describe('OverlayScrollbarsComponent', () => {
   describe('correct rendering', () => {
@@ -88,4 +88,38 @@ describe('OverlayScrollbarsComponent', () => {
     expect(newOpts.overflow.y).toBe('scroll'); //switches back to default because its not specified in the new options
     expect(newOpts.overflow.x).toBe('hidden');
   });
+
+  test('events', () => {
+    const ref: RefObject<OverlayScrollbarsComponentRef> = { current: null };
+    const onUpdatedInitial = vitest.fn();
+    const onUpdated = vitest.fn();
+    const { rerender } = render(
+      <OverlayScrollbarsComponent events={{ updated: onUpdatedInitial }} ref={ref} />
+    );
+
+    expect(onUpdatedInitial).toHaveBeenCalledTimes(1);
+
+    rerender(<OverlayScrollbarsComponent events={{ updated: onUpdated }} ref={ref} />);
+
+    expect(onUpdated).not.toHaveBeenCalled();
+
+    ref.current?.osInstance()?.update(true);
+    expect(onUpdatedInitial).toHaveBeenCalledTimes(1);
+    expect(onUpdated).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <OverlayScrollbarsComponent events={{ updated: [onUpdated, onUpdatedInitial] }} ref={ref} />
+    );
+
+    ref.current?.osInstance()?.update(true);
+    expect(onUpdatedInitial).toHaveBeenCalledTimes(2);
+    expect(onUpdated).toHaveBeenCalledTimes(2);
+
+    // unregister works with `[]`, `null` or `undefined`
+    rerender(<OverlayScrollbarsComponent events={{ updated: null }} ref={ref} />);
+
+    ref.current?.osInstance()?.update(true);
+    expect(onUpdatedInitial).toHaveBeenCalledTimes(2);
+    expect(onUpdated).toHaveBeenCalledTimes(2);
+  });
 });

packages/overlayscrollbars-react/vite.config.js

@@ -13,10 +13,11 @@ export default defineConfig({
       fileName: (format) => `overlayscrollbars-react.${format}.js`,
     },
     rollupOptions: {
-      external: ['react'],
+      external: ['react', 'overlayscrollbars'],
       output: {
         globals: {
           react: 'React',
+          overlayscrollbars: 'OverlayScrollbarsGlobal',
         },
       },
     },