refactor: explicitly set types for main component and use modern ts m…

…odule config

.eslintrc

@@ -28,6 +28,8 @@
     "no-constant-binary-expression": "error",
     "no-confusing-arrow": 0,
     "no-console": "error",
+    "no-unused-vars": 0,
+    "require-await": 0,
 
     "react/jsx-indent": 0,
     "react/jsx-indent-props": 0,

README.md

@@ -17,7 +17,7 @@
 <a href="https://github.com/nerdyman/react-compare-slider/actions?query=workflow%3Abuild">
   <img alt="GitHub CI status" src="https://img.shields.io/github/actions/workflow/status/nerdyman/react-compare-slider/ci.yml" />
 </a>
-<a href="https://codecov.io/github/nerdyman/react-compare-slider" > 
+<a href="https://codecov.io/github/nerdyman/react-compare-slider">
   <img alt="Code coverage" src="https://img.shields.io/codecov/c/github/nerdyman/react-compare-slider?token=yhvFTuC7bh" />
  </a>
 <a href="https://react-compare-slider.vercel.app">
@@ -92,6 +92,7 @@ See the [Images docs](https://react-compare-slider.vercel.app/?path=/docs/docs-i
 | [`onPositionChange`](https://react-compare-slider.vercel.app/?path=/story/demos--on-position-change)                | `function`  |              | `undefined`   | Callback on position change, returns current position percentage as argument `(position) => { ... }`. |
 | [`portrait`](https://react-compare-slider.vercel.app/?path=/story/demos--portrait)                                  | `boolean`   |              | `false`       | Whether to use portrait orientation.                                                                  |
 | [`position`](https://react-compare-slider.vercel.app/?path=/story/demos--position)                                  | `number`    |              | `50`          | Initial percentage position of divide (`0-100`).                                                      |
+| [`transition`](https://react-compare-slider.vercel.app/?path=/story/demos--transition)                                  | `string`    |              | `undefined`          | Shorthand CSS `transition` properties to apply to handle movement.                                                      |
 
 See the [API docs](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page) for more information.
 

src/Container.tsx

@@ -31,48 +31,41 @@ ContainerClip.displayName = 'ContainerClip';
 export const ContainerHandle = forwardRef<
   HTMLButtonElement,
   HTMLProps<HTMLButtonElement> & ReactCompareSliderCommonProps
->(
-  (
-    { children, disabled, portrait, position, transition, onSliderTransitionEnd },
-    ref,
-  ): ReactElement => {
-    const targetAxis = portrait ? 'top' : 'left';
+>(({ children, disabled, portrait, position, transition }, ref): ReactElement => {
+  const targetAxis = portrait ? 'top' : 'left';
 
-    const style: CSSProperties = {
-      position: 'absolute',
-      top: 0,
-      width: portrait ? '100%' : undefined,
-      height: portrait ? undefined : '100%',
-      background: 'none',
-      border: 0,
-      padding: 0,
-      pointerEvents: 'all',
-      appearance: 'none',
-      WebkitAppearance: 'none',
-      MozAppearance: 'none',
-      outline: 0,
-      transform: portrait ? `translate3d(0, -50% ,0)` : `translate3d(-50%, 0, 0)`,
-      transition: transition ? `${targetAxis} ${transition}` : undefined,
-      willChange: 'transform, ${targetAxis}',
-    };
+  const style: CSSProperties = {
+    position: 'absolute',
+    top: 0,
+    width: portrait ? '100%' : undefined,
+    height: portrait ? undefined : '100%',
+    background: 'none',
+    border: 0,
+    padding: 0,
+    pointerEvents: 'all',
+    appearance: 'none',
+    WebkitAppearance: 'none',
+    MozAppearance: 'none',
+    outline: 0,
+    transform: portrait ? `translate3d(0, -50% ,0)` : `translate3d(-50%, 0, 0)`,
+    transition: transition ? `${targetAxis} ${transition}` : undefined,
+  };
 
-    return (
-      <button
-        ref={ref}
-        aria-orientation={portrait ? 'vertical' : 'horizontal'}
-        aria-valuemin={0}
-        aria-valuemax={100}
-        aria-valuenow={position}
-        data-rcs="handle-container"
-        disabled={disabled}
-        role="slider"
-        style={style}
-        onTransitionEnd={onSliderTransitionEnd}
-      >
-        {children}
-      </button>
-    );
-  },
-);
+  return (
+    <button
+      ref={ref}
+      aria-orientation={portrait ? 'vertical' : 'horizontal'}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={position}
+      data-rcs="handle-container"
+      disabled={disabled}
+      role="slider"
+      style={style}
+    >
+      {children}
+    </button>
+  );
+});
 
 ContainerHandle.displayName = 'ThisHandleContainer';

src/ReactCompareSlider.tsx

@@ -6,7 +6,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import type { CSSProperties, ReactElement } from 'react';
+import type { CSSProperties, ForwardRefExoticComponent, ReactElement, RefAttributes } from 'react';
 
 import { ContainerClip, ContainerHandle } from './Container';
 import { ReactCompareSliderHandle } from './ReactCompareSliderHandle';
@@ -31,10 +31,9 @@ const EVENT_PASSIVE_PARAMS = { passive: true };
 const EVENT_CAPTURE_PARAMS = { capture: true, passive: false };
 
 /** Root Comparison slider. */
-export const ReactCompareSlider = forwardRef<
-  UseReactCompareSliderRefReturn,
-  ReactCompareSliderDetailedProps
->(
+export const ReactCompareSlider: ForwardRefExoticComponent<
+  ReactCompareSliderDetailedProps & RefAttributes<UseReactCompareSliderRefReturn>
+> = forwardRef(
   (
     {
       disabled = false,

src/ReactCompareSliderImage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { FC, ImgHTMLAttributes } from 'react';
+import type { CSSProperties, FC, ImgHTMLAttributes, ReactElement } from 'react';
 
 import { styleFitContainer } from './utils';
 
@@ -10,8 +10,8 @@ export type ReactCompareSliderImageProps = ImgHTMLAttributes<HTMLImageElement>;
 export const ReactCompareSliderImage: FC<ReactCompareSliderImageProps> = ({
   style,
   ...props
-}): React.ReactElement => {
-  const rootStyle: React.CSSProperties = styleFitContainer(style);
+}): ReactElement => {
+  const rootStyle: CSSProperties = styleFitContainer(style);
 
   return <img {...props} style={rootStyle} data-rcs="image" />;
 };

src/types.ts

@@ -1,4 +1,4 @@
-import type { HtmlHTMLAttributes, ReactNode, TransitionEventHandler } from 'react';
+import type { HtmlHTMLAttributes, ReactNode } from 'react';
 
 /** Slider position property. */
 export type ReactCompareSliderPropPosition = number;
@@ -11,10 +11,11 @@ export interface ReactCompareSliderCommonProps {
   portrait?: boolean;
   /** Divider position. */
   position: ReactCompareSliderPropPosition;
-  /** CSS transition properties to apply to handle movement. */
+  /**
+   * Shorthand CSS `transition` properties to apply to handle movement - does not need transition property.
+   * @example '.5s ease-in-out'
+   */
   transition?: string;
-  /** Callback fired when applied `transition` completes. */
-  onSliderTransitionEnd?: TransitionEventHandler<HTMLElement>;
 }
 
 /** Comparison slider properties. */

src/utils.ts

@@ -10,8 +10,7 @@ export enum KeyboardEventKeys {
 }
 
 /**
- * Stand-alone CSS utility to make replaced elements (`img`, `video`, etc.) fit their
- * container.
+ * Stand-alone CSS utility to make replaced elements (`img`, `video`, etc.) fit their container.
  */
 export const styleFitContainer = ({
   boxSizing = 'border-box',

tsconfig.json

@@ -1,8 +1,9 @@
 {
   "include": ["src"],
   "compilerOptions": {
-    "module": "esnext",
-    "lib": ["dom", "esnext"],
+    "lib": ["dom", "ESNext"],
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
     "importHelpers": true,
     "declaration": true,
     "sourceMap": true,
@@ -18,8 +19,7 @@
     "noUnusedParameters": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "node",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "esModuleInterop": true
   }
 }