fix: update dependencies, use react 18 types in tests

.github/workflows/ci.yaml

@@ -24,7 +24,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: bahmutov/npm-install@v1
         with:
@@ -45,7 +45,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: bahmutov/npm-install@v1
         with:
@@ -73,7 +73,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: bahmutov/npm-install@v1
         with:
@@ -101,7 +101,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: bahmutov/npm-install@v1
         with:

package.json

@@ -45,32 +45,32 @@
     "zoom-level": "^2.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/preset-env": "^7.18.10",
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
     "@jamesacarr/eslint-formatter-github-actions": "^0.2.0",
-    "@react-hookz/eslint-config": "^1.7.1",
-    "@semantic-release/changelog": "^6.0.1",
+    "@react-hookz/eslint-config": "^1.7.7",
+    "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^8.0.5",
-    "@types/jasmine": "^4.0.3",
+    "@semantic-release/github": "^8.0.7",
+    "@types/jasmine": "^4.3.1",
     "@types/karma": "^6.3.3",
-    "@types/react": "^17",
-    "@types/react-dom": "^17",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
     "cross-env": "^7.0.3",
-    "jasmine-core": "^4.3.0",
-    "karma": "^6.4.0",
-    "karma-chrome-launcher": "^3.1.1",
+    "jasmine-core": "^4.6.0",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.0",
     "karma-jasmine": "^5.1.0",
-    "karma-typescript": "^5.5.3",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
-    "react": "^17",
-    "react-dom": "^17",
+    "karma-typescript": "^5.5.4",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^5.0.0",
-    "rollup": "^2.77.0",
+    "rollup": "^2.79.1",
     "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-typescript2": "^0.34.0",
+    "rollup-plugin-typescript2": "^0.34.1",
     "semantic-release": "^19.0.3",
     "simulant": "^0.2.2",
     "tslib": "^2.4.0",

rollup.config.js

@@ -1,13 +1,13 @@
-import babel from 'rollup-plugin-babel';
-import ts from 'rollup-plugin-typescript2';
-import pkg from './package.json';
+const babelPlugin = require('rollup-plugin-babel');
+const tsPlugin = require('rollup-plugin-typescript2');
+const pkg = require('./package.json');
 
 const ownKeys = Object.getOwnPropertyNames;
 const externalDependencies = [
   ...new Set([...ownKeys(pkg.peerDependencies), ...ownKeys(pkg.dependencies)]),
 ];
 
-export default [
+module.exports = [
   {
     input: './src/index.ts',
     external: externalDependencies,
@@ -21,14 +21,12 @@ export default [
     ],
 
     plugins: [
-      ts({
+      tsPlugin({
         clean: true,
         useTsconfigDeclarationDir: true,
         tsconfigOverride: {
           compilerOptions: {
             module: 'esnext',
-            // ToDo: FIXME! sadly rollup do not handle optional chaining yet
-            target: 'es2019',
             declaration: true,
             declarationDir: `${__dirname}/dist/types`,
           },
@@ -55,7 +53,7 @@ export default [
     ],
 
     plugins: [
-      ts({
+      tsPlugin({
         clean: true,
         tsconfigOverride: {
           compilerOptions: {
@@ -65,7 +63,7 @@ export default [
           },
         },
       }),
-      babel({
+      babelPlugin({
         babelrc: false,
         exclude: 'node_modules/**',
         extensions: ['.ts', '.tsx', '.js', '.jsx'],

src/Scrollbar.tsx

@@ -109,7 +109,10 @@ export const ScrollbarContext: React.Context<ScrollbarContextValue> = React.crea
   parentScrollbar: null,
 } as ScrollbarContextValue);
 
-export default class Scrollbar extends React.Component<ScrollbarProps, ScrollbarState> {
+export default class Scrollbar extends React.Component<
+  React.PropsWithChildren<ScrollbarProps>,
+  ScrollbarState
+> {
   // eslint-disable-next-line react/static-property-placement
   static contextType = ScrollbarContext;
 
@@ -649,7 +652,9 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
 
     let bitmask = 0;
 
-    if (!force) {
+    if (force) {
+      bitmask = 0b111_1111_1111_1111;
+    } else {
       if (prevScrollState.clientHeight !== scrollState.clientHeight) bitmask |= Math.trunc(1);
       if (prevScrollState.clientWidth !== scrollState.clientWidth) bitmask |= 1 << 1;
       if (prevScrollState.scrollHeight !== scrollState.scrollHeight) bitmask |= 1 << 2;
@@ -674,8 +679,6 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
       if (bitmask === 0) {
         return prevScrollState;
       }
-    } else {
-      bitmask = 0b111_1111_1111_1111;
     }
 
     if (!props.native && this.holderElement) {
@@ -839,9 +842,9 @@ export default class Scrollbar extends React.Component<ScrollbarProps, Scrollbar
       ...propsHolderProps
     } = this.props as ScrollbarProps;
 
-    const scrollbarWidth = !util.isUndef(propsScrollbarWidth)
-      ? propsScrollbarWidth
-      : util.getScrollbarWidth() || 0;
+    const scrollbarWidth = util.isUndef(propsScrollbarWidth)
+      ? util.getScrollbarWidth() || 0
+      : propsScrollbarWidth;
 
     if (native || (!scrollbarWidth && mobileNative)) {
       this.elementRefHolder(null);

src/ScrollbarThumb.tsx

@@ -152,17 +152,17 @@ export default class ScrollbarThumb extends React.Component<ScrollbarThumbProps,
     ev.preventDefault();
     ev.stopPropagation();
 
-    if (!isUndef(ev.offsetX)) {
-      /* istanbul ignore next */
-      this.initialOffsetX = ev.offsetX;
-      /* istanbul ignore next */
-      this.initialOffsetY = ev.offsetY;
-    } else {
+    if (isUndef(ev.offsetX)) {
       const rect: ClientRect = this.element.getBoundingClientRect();
       this.initialOffsetX =
         (ev.clientX || (ev as unknown as TouchEvent).touches[0].clientX) - rect.left;
       this.initialOffsetY =
         (ev.clientY || (ev as unknown as TouchEvent).touches[0].clientY) - rect.top;
+    } else {
+      /* istanbul ignore next */
+      this.initialOffsetX = ev.offsetX;
+      /* istanbul ignore next */
+      this.initialOffsetY = ev.offsetY;
     }
   };
 

src/ScrollbarTrack.tsx

@@ -16,7 +16,10 @@ export type ScrollbarTrackProps = ElementPropsWithElementRefAndRenderer & {
   ref?: (ref: ScrollbarTrack | null) => void;
 };
 
-export default class ScrollbarTrack extends React.Component<ScrollbarTrackProps, unknown> {
+export default class ScrollbarTrack extends React.Component<
+  React.PropsWithChildren<ScrollbarTrackProps>,
+  unknown
+> {
   public element: HTMLDivElement | null = null;
 
   public componentDidMount(): void {
@@ -52,12 +55,7 @@ export default class ScrollbarTrack extends React.Component<ScrollbarTrackProps,
     }
 
     if (isFun(this.props.onClick) && ev.target === this.element) {
-      if (!isUndef(ev.offsetX)) {
-        this.props.onClick(ev, {
-          axis: this.props.axis,
-          offset: this.props.axis === AXIS_DIRECTION.X ? ev.offsetX : ev.offsetY,
-        });
-      } else {
+      if (isUndef(ev.offsetX)) {
         // support for old browsers
         /* istanbul ignore next */
         const rect: ClientRect = this.element.getBoundingClientRect();
@@ -69,6 +67,11 @@ export default class ScrollbarTrack extends React.Component<ScrollbarTrackProps,
               ? (ev.clientX || (ev as unknown as TouchEvent).touches[0].clientX) - rect.left
               : (ev.clientY || (ev as unknown as TouchEvent).touches[0].clientY) - rect.top,
         });
+      } else {
+        this.props.onClick(ev, {
+          axis: this.props.axis,
+          offset: this.props.axis === AXIS_DIRECTION.X ? ev.offsetX : ev.offsetY,
+        });
       }
     }
 

src/util.tsx

@@ -9,7 +9,7 @@ export const isBrowser =
   typeof document !== 'undefined';
 
 export const isUndef = (v: any): v is Exclude<typeof v, undefined> => {
-  return typeof v === 'undefined';
+  return v === undefined;
 };
 
 export const isFun = (v: any): v is CallableFunction => {

tests/Scrollbar.spec.tsx

@@ -1,6 +1,7 @@
 // eslint-disable-next-line max-classes-per-file
 import { cnb } from 'cnbuilder';
 import * as React from 'react';
+import { Context, PropsWithChildren } from 'react';
 import * as ReactDOM from 'react-dom';
 import * as simulant from 'simulant';
 import { Scrollbar, ScrollbarContext, ScrollbarProps, ScrollbarState } from '../src';
@@ -9,7 +10,7 @@ import { ScrollState, TRACK_CLICK_BEHAVIOR } from '../src/types';
 import { getScrollbarWidth, shouldReverseRtlScroll } from '../src/util';
 
 class ScrollbarPropsUpdater extends React.Component<
-  { scrollbarProps: ScrollbarProps },
+  React.PropsWithChildren & { scrollbarProps: ScrollbarProps },
   { scrollbarProps: ScrollbarProps }
 > {
   scrollbar: Scrollbar;
@@ -338,7 +339,7 @@ describe('Scrollbar', () => {
         );
       };
 
-      class ErrorBoundary extends React.Component<unknown, { [key: string]: any }> {
+      class ErrorBoundary extends React.Component<PropsWithChildren, { [key: string]: any }> {
         constructor(props) {
           super(props);
           this.state = { error: null, errorInfo: null };
@@ -1129,12 +1130,12 @@ describe('Scrollbar', () => {
     it('should create context if createContext is passed', (done) => {
       let consumedContext: ScrollbarContextValue;
 
-      class ScrollbarContextConsumer extends React.Component<unknown, unknown> {
+      class ScrollbarContextConsumer extends React.Component<PropsWithChildren, unknown> {
         // eslint-disable-next-line react/static-property-placement
         static contextType = ScrollbarContext;
 
         public componentDidMount(): void {
-          consumedContext = this.context;
+          consumedContext = this.context as ScrollbarContextValue;
         }
 
         render() {

tests/ScrollbarThumb.spec.tsx

@@ -1,3 +1,4 @@
+import { PropsWithChildren } from 'react';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as simulant from 'simulant';
@@ -111,7 +112,7 @@ describe('ScrollbarThumb', () => {
       );
     };
 
-    class ErrorBoundary extends React.Component<Record<string, unknown>, { [key: string]: any }> {
+    class ErrorBoundary extends React.Component<PropsWithChildren, { [key: string]: any }> {
       constructor(props) {
         super(props);
         this.state = { error: null, errorInfo: null };

tests/ScrollbarTrack.spec.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { PropsWithChildren } from 'react';
 import * as ReactDOM from 'react-dom';
 import * as simulant from 'simulant';
 import ScrollbarTrack from '../src/ScrollbarTrack';
@@ -111,7 +112,7 @@ describe('ScrollbarTrack', () => {
       );
     };
 
-    class ErrorBoundary extends React.Component<unknown, { [key: string]: any }> {
+    class ErrorBoundary extends React.Component<PropsWithChildren, { [key: string]: any }> {
       constructor(props) {
         super(props);
         this.state = { error: null, errorInfo: null };

tests/util.spec.tsx

@@ -419,14 +419,10 @@ describe('util', () => {
 
     it('should pass elementRef as ref if renderer not presented', (done) => {
       const ref = jasmine.createSpy();
-      ReactDOM.render(
-        renderDivWithRenderer({ elementRef: undefined, className: 'tests' }, ref),
-        node,
-        () => {
-          expect(ref).toHaveBeenCalled();
-          done();
-        }
-      );
+      ReactDOM.render(renderDivWithRenderer({ className: 'tests' }, ref)!, node, () => {
+        expect(ref).toHaveBeenCalled();
+        done();
+      });
     });
 
     it("should not leak renderer prop if it's passed", () => {