initial migration for index.js

Author: sinansonmez

package.json

@@ -54,6 +54,7 @@
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.7.0",
     "@rollup/plugin-replace": "^2.2.1",
+    "@types/react": "^18.3.12",
     "bundlesize": "^0.18.0",
     "escape-html": "^1.0.3",
     "eslint": "^6.6.0",
@@ -76,6 +77,6 @@
     "rollup-plugin-terser": "^5.1.2"
   },
   "dependencies": {
-    "prop-types": "^15.7.2"
+    "typescript": "^5.7.2"
   }
 }

src/index.js renamed to src/index.tsx

@@ -1,40 +1,73 @@
 import React, {
+  CSSProperties,
+  MutableRefObject,
+  ReactElement,
+  ReactNode,
   useContext,
   useEffect,
   useMemo,
   useReducer,
   useRef
 } from 'react';
-import PropTypes from 'prop-types';
 
-const Context = React.createContext();
+enum Direction {
+  up = 'up',
+  left = 'left',
+  right = 'right',
+  down = 'down'
+};
+
+interface CanScroll {
+  [Direction.up]: boolean
+  [Direction.left]: boolean
+  [Direction.right]: boolean
+  [Direction.down]: boolean
+}
+
+interface Dispatch {
+  type: string
+  direction: keyof typeof Direction
+  canScroll: boolean
+}
+
+interface OverflowContext {
+  tolerance?: number | string
+  refs: { viewport: MutableRefObject<HTMLDivElement | null> }
+  canScroll?: CanScroll
+  state: {
+    canScroll: CanScroll
+  }
+  dispatch: ({type, direction, canScroll}: Dispatch) => void
+}
+
+const Context = React.createContext<OverflowContext>({});
 
 export function useOverflow() {
   return useContext(Context);
 }
 
-const containerStyle = {
+const containerStyle: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
   position: 'relative'
 };
 
-const viewportStyle = {
+const viewportStyle: CSSProperties = {
   position: 'relative',
   flexBasis: '100%',
   flexShrink: 1,
   flexGrow: 0,
   overflow: 'auto'
 };
 
-const contentStyle = {
+const contentStyle: CSSProperties = {
   display: 'inline-block',
   position: 'relative',
   minWidth: '100%',
   boxSizing: 'border-box'
 };
 
-function reducer(state, action) {
+function reducer(state, action: PayloadAction<>) {
   switch (action.type) {
     case 'CHANGE': {
       const currentValue = state.canScroll[action.direction];
@@ -104,10 +137,10 @@ export default function Overflow({
   style: styleProp,
   tolerance = 0,
   ...rest
-}) {
+}: Overflow) {
   const [state, dispatch] = useReducer(reducer, null, getInitialState);
   const hidden = rest.hidden;
-  const viewportRef = useRef();
+  const viewportRef = useRef<HTMLDivElement>(null);
 
   const style = useMemo(
     () => ({
@@ -151,26 +184,28 @@ export default function Overflow({
   );
 }
 
-Overflow.propTypes = {
+interface Overflow {
   /**
    * Elements to render inside the outer container. This should include an
    * `<Overflow.Content>` element at a minimum, but should also include your
    * scroll indicators if you’d like to overlay them on the scrollable viewport.
    */
-  children: PropTypes.node,
+  children: ReactNode,
   /**
    * Callback that receives the latest overflow state and an object of refs, if
    * you’d like to react to overflow in a custom way.
    */
-  onStateChange: PropTypes.func,
+  onStateChange: (state: string, refs: {viewport: MutableRefObject<HTMLDivElement | null>}) => void,
   /**
    * Distance (number of pixels or CSS length unit like `1em`) to the edge of
    * the content at which to consider the viewport fully scrolled. For example,
    * if set to 10, then it will consider scrolling to have reached the end as
    * long as it’s within 10 pixels of the border. You can use this when your
    * content has padding and scrolling close to the edge should be good enough.
    */
-  tolerance: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  tolerance: number | string
+  style: CSSProperties
+  hidden: boolean
 };
 
 // For Firefox, update on a threshold of 0 in addition to any intersection at
@@ -188,20 +223,20 @@ const threshold = [0, 1e-12];
  * own element inside `<Overflow.Content>` instead – otherwise you risk
  * interfering with the styles this component needs to function.
  */
-function OverflowContent({ children, style: styleProp, ...rest }) {
+function OverflowContent({ children, style: styleProp, ...rest }: OverflowContent) {
   const { dispatch, tolerance, refs } = useOverflow();
   const { viewport: viewportRef } = refs;
-  const contentRef = useRef();
-  const toleranceRef = useRef();
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const toleranceRef = useRef<HTMLDivElement | null>(null);
   const watchRef = tolerance ? toleranceRef : contentRef;
-  const observersRef = useRef();
+  const observersRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     let ignore = false;
 
     const root = viewportRef.current;
 
-    const createObserver = (direction, rootMargin) => {
+    const createObserver = (direction: Direction, rootMargin: string) => {
       return new IntersectionObserver(
         ([entry]) => {
           if (ignore) {
@@ -230,10 +265,10 @@ function OverflowContent({ children, style: styleProp, ...rest }) {
     };
 
     const observers = {
-      up: createObserver('up', '100% 0px -100% 0px'),
-      left: createObserver('left', '0px -100% 0px 100%'),
-      right: createObserver('right', '0px 100% 0px -100%'),
-      down: createObserver('down', '-100% 0px 100% 0px')
+      up: createObserver(Direction.up, '100% 0px -100% 0px'),
+      left: createObserver(Direction.left, '0px -100% 0px 100%'),
+      right: createObserver(Direction.right, '0px 100% 0px -100%'),
+      down: createObserver(Direction.down, '-100% 0px 100% 0px')
     };
 
     observersRef.current = observers;
@@ -251,7 +286,7 @@ function OverflowContent({ children, style: styleProp, ...rest }) {
     const observers = observersRef.current;
     const watchNode = watchRef.current;
 
-    observers.up.observe(watchNode);
+    observers?.up.observe(watchNode);
     observers.left.observe(watchNode);
     observers.right.observe(watchNode);
     observers.down.observe(watchNode);
@@ -304,11 +339,12 @@ function OverflowContent({ children, style: styleProp, ...rest }) {
 
 OverflowContent.displayName = 'Overflow.Content';
 
-OverflowContent.propTypes = {
+interface OverflowContent {
   /**
    * Content to render inside the scrollable viewport.
    */
-  children: PropTypes.node
+  children: ReactNode
+  style: CSSProperties
 };
 
 /**
@@ -352,7 +388,7 @@ OverflowContent.propTypes = {
  * </Overflow>
  * ```
  */
-function OverflowIndicator({ children, direction }) {
+function OverflowIndicator({ children, direction } : OverflowIndicator) {
   const { state, refs } = useOverflow();
   const { canScroll } = state;
   const isActive = direction
@@ -372,19 +408,19 @@ function OverflowIndicator({ children, direction }) {
 
 OverflowIndicator.displayName = 'Overflow.Indicator';
 
-OverflowIndicator.propTypes = {
+interface OverflowIndicator {
   /**
    * Indicator to render when scrolling is allowed in the requested direction.
    * If given a function, it will be passed the overflow state and an object
    * containing the `viewport` ref. You can use this `refs` parameter to render
    * an indicator that is also a button that scrolls the viewport (for example).
    */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  children: ReactElement | ((stateArg: boolean | CanScroll, refs: OverflowContext['refs']) => ReactElement)
   /**
    * The scrollabe direction to watch for. If not supplied, the indicator will
    * be active when scrolling is allowed in any direction.
    */
-  direction: PropTypes.oneOf(['up', 'down', 'left', 'right'])
+  direction: keyof typeof Direction
 };
 
 Overflow.Indicator = OverflowIndicator;

tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "es2020",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "jsx": "preserve",
+    "baseUrl": "./src",
+    "useUnknownInCatchVariables": false,
+    "composite": true,
+    "incremental": true
+  },
+  "include": [
+    "./src/**/*",
+    "./src/**/*.json"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}