@purpurds/drawer 7.6.0 → 7.7.0

package/dist/use-swipe-to-dismiss.hook.d.ts

@@ -1,13 +1,13 @@
-import { default as React } from 'react';
+import { AnimationEvent, RefObject } from 'react';
 import { SwipeEvent } from './types';
 
 type UseSwipeToDismiss = {
-    onAnimationEnd(event: React.AnimationEvent<HTMLDivElement>): void;
+    onAnimationEnd(event: AnimationEvent<HTMLDivElement>): void;
     onSwipeStart(): void;
     onSwipeMove(event: SwipeEvent): void;
     onSwipeCancel(): void;
     onSwipeEnd(event: SwipeEvent): void;
 };
-export declare const useSwipeToDismiss: <T extends HTMLElement>(containerRef: React.MutableRefObject<T | null>, handleOpenChange: (open: boolean) => void) => UseSwipeToDismiss;
+export declare const useSwipeToDismiss: <T extends HTMLElement>(containerRef: RefObject<T | null>, handleOpenChange: (open: boolean) => void) => UseSwipeToDismiss;
 export {};
 //# sourceMappingURL=use-swipe-to-dismiss.hook.d.ts.map

package/dist/use-swipe-to-dismiss.hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-swipe-to-dismiss.hook.d.ts","sourceRoot":"","sources":["../src/use-swipe-to-dismiss.hook.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,KAAK,iBAAiB,GAAG;IACvB,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAClE,YAAY,IAAI,IAAI,CAAC;IACrB,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACrC,aAAa,IAAI,IAAI,CAAC;IACtB,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,gBACvC,KAAK,CAAC,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,oBAC5B,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,KACxC,iBA4CF,CAAC"}
+{"version":3,"file":"use-swipe-to-dismiss.hook.d.ts","sourceRoot":"","sources":["../src/use-swipe-to-dismiss.hook.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,KAAK,iBAAiB,GAAG;IACvB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IAC5D,YAAY,IAAI,IAAI,CAAC;IACrB,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACrC,aAAa,IAAI,IAAI,CAAC;IACtB,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,gBACvC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,oBACf,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,KACxC,iBA4CF,CAAC"}

package/dist/use-swipe-tracking.hook.d.ts

@@ -1,14 +1,14 @@
-import { default as React } from 'react';
+import { PointerEvent, RefObject } from 'react';
 import { SwipeEvent } from './types';
 
 type UseSwipeTracking = {
-    onPointerDown(event: React.PointerEvent): void;
-    onPointerMove(event: React.PointerEvent): void;
-    onPointerUp(event: React.PointerEvent): void;
+    onPointerDown(event: PointerEvent): void;
+    onPointerMove(event: PointerEvent): void;
+    onPointerUp(event: PointerEvent): void;
 };
-export declare const useSwipeTracking: (pointerStartRef: React.MutableRefObject<{
+export declare const useSwipeTracking: (pointerStartRef: RefObject<{
     y: number;
-} | null>, swipeDeltaRef: React.MutableRefObject<{
+} | null>, swipeDeltaRef: RefObject<{
     y: number;
 } | null>, onSwipeStart: () => void, onSwipeMove: (event: SwipeEvent) => void, onSwipeCancel: () => void, onSwipeEnd: (event: SwipeEvent) => void) => UseSwipeTracking;
 export {};

package/dist/use-swipe-tracking.hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-swipe-tracking.hook.d.ts","sourceRoot":"","sources":["../src/use-swipe-tracking.hook.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,KAAK,gBAAgB,GAAG;IACtB,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC/C,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC/C,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,oBACV,KAAK,CAAC,gBAAgB,CAAC;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,iBAC9C,KAAK,CAAC,gBAAgB,CAAC;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,gBAC7C,MAAM,IAAI,eACX,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,iBACzB,MAAM,IAAI,cACb,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,KACtC,gBAuDF,CAAC"}
+{"version":3,"file":"use-swipe-tracking.hook.d.ts","sourceRoot":"","sources":["../src/use-swipe-tracking.hook.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,KAAK,gBAAgB,GAAG;IACtB,aAAa,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACzC,aAAa,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACzC,WAAW,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oBACV,SAAS,CAAC;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,iBACjC,SAAS,CAAC;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,gBAChC,MAAM,IAAI,eACX,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,iBACzB,MAAM,IAAI,cACb,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,KACtC,gBAuDF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/drawer",
-  "version": "7.6.0",
+  "version": "7.7.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/drawer.cjs.js",
   "types": "./dist/drawer.d.ts",
@@ -18,12 +18,13 @@
     "@radix-ui/react-dialog": "~1.1.6",
     "@radix-ui/react-scroll-area": "~1.2.3",
     "classnames": "~2.5.0",
-    "@purpurds/button": "7.6.0",
-    "@purpurds/visually-hidden": "7.6.0",
-    "@purpurds/icon": "7.6.0",
-    "@purpurds/tokens": "7.6.0",
-    "@purpurds/heading": "7.6.0",
-    "@purpurds/paragraph": "7.6.0"
+    "@purpurds/button": "7.7.0",
+    "@purpurds/icon": "7.7.0",
+    "@purpurds/paragraph": "7.7.0",
+    "@purpurds/visually-hidden": "7.7.0",
+    "@purpurds/tokens": "7.7.0",
+    "@purpurds/common-types": "7.7.0",
+    "@purpurds/heading": "7.7.0"
   },
   "devDependencies": {
     "eslint": "9.24.0",

package/src/drawer-container.tsx

@@ -1,11 +1,12 @@
-import React, { type ForwardedRef, forwardRef, type ReactNode } from "react";
+import React, { forwardRef, type ReactNode } from "react";
+import type { BaseProps } from "@purpurds/common-types";
 import c from "classnames/bind";
 
 import styles from "./drawer-container.module.scss";
+
 const cx = c.bind(styles);
 
-export type DrawerContainerProps = React.HTMLAttributes<HTMLDivElement> & {
-  ["data-testid"]?: string;
+export type DrawerContainerProps = Omit<BaseProps, "children"> & {
   children: ReactNode;
   stickyFooter: boolean;
   variant?: "header" | "body" | "footer";
@@ -13,7 +14,7 @@ export type DrawerContainerProps = React.HTMLAttributes<HTMLDivElement> & {
 
 const rootClassName = "purpur-drawer-container";
 
-export const DrawerContainer = forwardRef(
+export const DrawerContainer = forwardRef<HTMLDivElement, DrawerContainerProps>(
   (
     {
       ["data-testid"]: dataTestId = "purpur-drawer-container",
@@ -22,8 +23,8 @@ export const DrawerContainer = forwardRef(
       variant = "body",
       stickyFooter,
       ...props
-    }: DrawerContainerProps,
-    ref: ForwardedRef<HTMLDivElement>
+    },
+    ref
   ) => {
     const classes = cx([
       className,

package/src/drawer-content.tsx

@@ -1,4 +1,5 @@
-import React, { type ForwardedRef, forwardRef, type ReactNode, useContext, useRef } from "react";
+import React, { forwardRef, type ReactNode, useContext, useRef } from "react";
+import type { BaseProps } from "@purpurds/common-types";
 import * as RadixDialog from "@radix-ui/react-dialog";
 import c from "classnames/bind";
 
@@ -7,6 +8,7 @@ import styles from "./drawer-content.module.scss";
 import { DrawerFrame } from "./drawer-frame";
 import { type OpenHandlerFunction } from "./types";
 import { useSwipeToDismiss } from "./use-swipe-to-dismiss.hook";
+
 const cx = c.bind(styles);
 
 export type WithBackButton = {
@@ -23,8 +25,7 @@ export type WithoutBackButton = {
   onBackButtonClick?: never;
 };
 
-export type DrawerContentProps = React.HTMLAttributes<HTMLElement> & {
-  ["data-testid"]?: string;
+export type DrawerContentProps = Omit<BaseProps, "children"> & {
   bodyText?: string;
   children: ReactNode;
   closeButtonAriaLabel: string;
@@ -42,7 +43,7 @@ export type DrawerContentProps = React.HTMLAttributes<HTMLElement> & {
 
 const rootClassName = "purpur-drawer-content";
 
-export const DrawerContent = forwardRef(
+export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
   (
     {
       ["data-testid"]: dataTestId = "purpur-drawer-content",
@@ -62,8 +63,8 @@ export const DrawerContent = forwardRef(
       title,
       zIndex,
       ...props
-    }: DrawerContentProps,
-    ref: ForwardedRef<HTMLDivElement>
+    },
+    ref
   ) => {
     const classes = cx([
       className,
@@ -82,6 +83,18 @@ export const DrawerContent = forwardRef(
       }
     };
 
+    const handleInitialFocus = () => {
+      const frame = drawerFrameRef.current;
+      if (frame) {
+        const heading = frame.querySelector("h2");
+
+        heading &&
+          setTimeout(() => {
+            heading.focus();
+          });
+      }
+    };
+
     return (
       <RadixDialog.Portal>
         <RadixDialog.Overlay
@@ -91,6 +104,7 @@ export const DrawerContent = forwardRef(
         >
           <RadixDialog.Content
             onPointerDownOutside={handlePointerDownOutside}
+            onOpenAutoFocus={handleInitialFocus}
             className={classes}
             data-testid={dataTestId}
             ref={ref}

package/src/drawer-frame.tsx

@@ -1,4 +1,5 @@
-import React, { type ForwardedRef, forwardRef, type ReactNode } from "react";
+import React, { forwardRef, type ReactNode } from "react";
+import type { BaseProps } from "@purpurds/common-types";
 import c from "classnames/bind";
 
 import { DrawerContainer } from "./drawer-container";
@@ -7,10 +8,10 @@ import { DrawerHandle } from "./drawer-handle";
 import { DrawerHeader } from "./drawer-header";
 import { DrawerScrollArea } from "./drawer-scroll-area";
 import { type SwipeEvent } from "./types";
+
 const cx = c.bind(styles);
 
-export type DrawerFrameProps = React.HTMLAttributes<HTMLDivElement> & {
-  ["data-testid"]?: string;
+export type DrawerFrameProps = Omit<BaseProps, "children"> & {
   backButton: boolean;
   backButtonText?: string;
   backButtonOnlyIcon: boolean;
@@ -31,7 +32,7 @@ export type DrawerFrameProps = React.HTMLAttributes<HTMLDivElement> & {
 
 const rootClassName = "purpur-drawer-frame";
 
-export const DrawerFrame = forwardRef(
+export const DrawerFrame = forwardRef<HTMLDivElement, DrawerFrameProps>(
   (
     {
       ["data-testid"]: dataTestId = "purpur-drawer-frame",
@@ -53,8 +54,8 @@ export const DrawerFrame = forwardRef(
       title,
       stickyFooter,
       ...props
-    }: DrawerFrameProps,
-    ref: ForwardedRef<HTMLDivElement>
+    },
+    ref
   ) => {
     const classes = cx([
       className,

package/src/drawer-handle.tsx

@@ -1,13 +1,14 @@
-import React, { type ForwardedRef, forwardRef } from "react";
+import React, { forwardRef } from "react";
+import type { BaseProps } from "@purpurds/common-types";
 import c from "classnames/bind";
 
 import styles from "./drawer-handle.module.scss";
 import { type SwipeEvent } from "./types";
 import { useSwipeTracking } from "./use-swipe-tracking.hook";
+
 const cx = c.bind(styles);
 
-export type DrawerHandleProps = React.HTMLAttributes<HTMLDivElement> & {
-  ["data-testid"]?: string;
+export type DrawerHandleProps = Omit<BaseProps, "children"> & {
   onSwipeStart(): void;
   onSwipeMove(event: SwipeEvent): void;
   onSwipeCancel(): void;
@@ -16,7 +17,7 @@ export type DrawerHandleProps = React.HTMLAttributes<HTMLDivElement> & {
 
 const rootClassName = "purpur-drawer-handle";
 
-export const DrawerHandle = forwardRef(
+export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>(
   (
     {
       ["data-testid"]: dataTestId = "purpur-drawer-handle",
@@ -26,8 +27,8 @@ export const DrawerHandle = forwardRef(
       onSwipeCancel,
       onSwipeEnd,
       ...props
-    }: DrawerHandleProps,
-    ref: ForwardedRef<HTMLDivElement>
+    },
+    ref
   ) => {
     const classes = cx([className, rootClassName]);
     const pointerStartRef = React.useRef<{ y: number } | null>(null);

package/src/drawer-header.tsx

@@ -1,5 +1,6 @@
-import React, { type ForwardedRef, forwardRef } from "react";
+import React, { forwardRef } from "react";
 import { Button, BUTTON_VARIANT } from "@purpurds/button";
+import type { BaseProps } from "@purpurds/common-types";
 import { Heading, TitleVariant } from "@purpurds/heading";
 import { IconArrowLeft } from "@purpurds/icon/arrow-left";
 import { IconClose } from "@purpurds/icon/close";
@@ -11,8 +12,7 @@ import styles from "./drawer-header.module.scss";
 
 const cx = c.bind(styles);
 
-export type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-  ["data-testid"]?: string;
+export type DrawerHeaderProps = Omit<BaseProps, "children"> & {
   backButton: boolean;
   backButtonText?: string;
   backButtonOnlyIcon: boolean;
@@ -24,7 +24,7 @@ export type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
 
 const rootClassName = "purpur-drawer-header";
 
-export const DrawerHeader = forwardRef(
+export const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
   (
     {
       ["data-testid"]: dataTestId = "purpur-drawer-header",
@@ -37,8 +37,8 @@ export const DrawerHeader = forwardRef(
       onBackButtonClick,
       title,
       ...props
-    }: DrawerHeaderProps,
-    ref: ForwardedRef<HTMLDivElement>
+    },
+    ref
   ) => {
     const classes = cx([className, rootClassName]);
 
@@ -77,7 +77,7 @@ export const DrawerHeader = forwardRef(
               <>
                 {headerContent}
                 <VisuallyHidden asChild>
-                  <RadixDialog.Title asChild>{title}</RadixDialog.Title>
+                  <RadixDialog.Title>{title}</RadixDialog.Title>
                 </VisuallyHidden>
               </>
             ) : (
@@ -86,6 +86,7 @@ export const DrawerHeader = forwardRef(
                   data-testid={`${dataTestId}-title`}
                   tag="h2"
                   variant={TitleVariant.TITLE200}
+                  tabIndex={-1}
                 >
                   {title}
                 </Heading>
@@ -114,7 +115,7 @@ export const DrawerHeader = forwardRef(
             <>
               {headerContent}
               <VisuallyHidden asChild>
-                <RadixDialog.Title asChild>{title}</RadixDialog.Title>
+                <RadixDialog.Title>{title}</RadixDialog.Title>
               </VisuallyHidden>
             </>
           ) : (
@@ -122,6 +123,7 @@ export const DrawerHeader = forwardRef(
               <Heading
                 data-testid={`${dataTestId}-title-with-back-button`}
                 tag="h2"
+                tabIndex={-1}
                 variant={TitleVariant.TITLE200}
               >
                 {title}

package/src/drawer-scroll-area.tsx

@@ -1,19 +1,20 @@
-import React, { type ForwardedRef, forwardRef, type ReactNode } from "react";
+import React, { forwardRef, type ReactNode } from "react";
+import type { BaseProps } from "@purpurds/common-types";
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
 import c from "classnames/bind";
 
 import styles from "./drawer-scroll-area.module.scss";
+
 const cx = c.bind(styles);
 
-export type DrawerScrollAreaProps = React.HTMLAttributes<HTMLDivElement> & {
-  ["data-testid"]?: string;
+export type DrawerScrollAreaProps = Omit<BaseProps, "children"> & {
   children: ReactNode;
   fitToContent?: boolean;
 };
 
 const rootClassName = "purpur-drawer-scroll-area";
 
-export const DrawerScrollArea = forwardRef(
+export const DrawerScrollArea = forwardRef<HTMLDivElement, DrawerScrollAreaProps>(
   (
     {
       ["data-testid"]: dataTestId = "purpur-drawer-scroll-area",
@@ -21,8 +22,8 @@ export const DrawerScrollArea = forwardRef(
       className,
       fitToContent = false,
       ...props
-    }: DrawerScrollAreaProps,
-    ref: ForwardedRef<HTMLDivElement>
+    },
+    ref
   ) => {
     const classes = cx([className, rootClassName]);
     return (

package/src/drawer-trigger.tsx

@@ -1,29 +1,15 @@
-import React, { type ForwardedRef, forwardRef, type ReactNode } from "react";
+import React, { forwardRef, type ReactNode } from "react";
+import type { BaseProps } from "@purpurds/common-types";
 import * as RadixDialog from "@radix-ui/react-dialog";
 
-export type DrawerTriggerProps = React.HTMLAttributes<HTMLElement> & {
-  ["data-testid"]?: string;
+export type DrawerTriggerProps = Omit<BaseProps<"button">, "children"> & {
   children: ReactNode;
 };
 
-export const DrawerTrigger = forwardRef(
-  (
-    {
-      ["data-testid"]: dataTestId = "purpur-drawer-trigger",
-      children,
-      className,
-      ...props
-    }: DrawerTriggerProps,
-    ref: ForwardedRef<HTMLButtonElement>
-  ) => {
+export const DrawerTrigger = forwardRef<HTMLButtonElement, DrawerTriggerProps>(
+  ({ ["data-testid"]: dataTestId = "purpur-drawer-trigger", children, ...props }, ref) => {
     return (
-      <RadixDialog.Trigger
-        asChild
-        className={className}
-        data-testid={dataTestId}
-        ref={ref}
-        {...props}
-      >
+      <RadixDialog.Trigger asChild data-testid={dataTestId} ref={ref} {...props}>
         {children}
       </RadixDialog.Trigger>
     );

package/src/drawer.stories.tsx

@@ -257,7 +257,7 @@ export const ShowcaseForDrawerContent: DrawerContentStory = {
 
     return (
       <div>
-        <Drawer {...props} onOpenChange={handler}>
+        <Drawer open={props.open} onOpenChange={handler}>
           <Drawer.Trigger>
             <Button variant="primary">Open drawer</Button>
           </Drawer.Trigger>

package/src/drawer.tsx

@@ -1,4 +1,5 @@
 import React, { type ReactNode, useEffect } from "react";
+import type { BaseProps } from "@purpurds/common-types";
 import * as RadixDialog from "@radix-ui/react-dialog";
 import c from "classnames/bind";
 
@@ -6,10 +7,10 @@ import { DrawerContext } from "./drawer.context";
 import styles from "./drawer.module.scss";
 import { DrawerContent } from "./drawer-content";
 import { DrawerTrigger } from "./drawer-trigger";
+
 const cx = c.bind(styles);
 
-export type DrawerProps = React.HTMLAttributes<HTMLDivElement> & {
-  ["data-testid"]?: string;
+export type DrawerProps = Omit<BaseProps, "children"> & {
   children: ReactNode;
   onOpenChange?: (open: boolean) => void;
   open: boolean;

package/src/use-swipe-to-dismiss.hook.ts

@@ -1,9 +1,9 @@
-import type React from "react";
+import type { AnimationEvent, RefObject } from "react";
 
 import { type SwipeEvent } from "./types";
 
 type UseSwipeToDismiss = {
-  onAnimationEnd(event: React.AnimationEvent<HTMLDivElement>): void;
+  onAnimationEnd(event: AnimationEvent<HTMLDivElement>): void;
   onSwipeStart(): void;
   onSwipeMove(event: SwipeEvent): void;
   onSwipeCancel(): void;
@@ -11,7 +11,7 @@ type UseSwipeToDismiss = {
 };
 
 export const useSwipeToDismiss = <T extends HTMLElement>(
-  containerRef: React.MutableRefObject<T | null>,
+  containerRef: RefObject<T | null>,
   handleOpenChange: (open: boolean) => void
 ): UseSwipeToDismiss => {
   const onSwipeStart = () => {
@@ -45,7 +45,7 @@ export const useSwipeToDismiss = <T extends HTMLElement>(
     containerRef.current.style.removeProperty("--purpur-drawer-swipe-move-y");
     containerRef.current.style.setProperty("--purpur-drawer-swipe-end-y", `${y}px`);
   };
-  const onAnimationEnd = (event: React.AnimationEvent<HTMLDivElement>) => {
+  const onAnimationEnd = (event: AnimationEvent<HTMLDivElement>) => {
     if (event.currentTarget.getAttribute("data-swipe") === "end") {
       handleOpenChange(false);
     }

package/src/use-swipe-tracking.hook.ts

@@ -1,25 +1,25 @@
-import type React from "react";
+import type { PointerEvent, RefObject } from "react";
 
 import { type SwipeEvent } from "./types";
 
 type UseSwipeTracking = {
-  onPointerDown(event: React.PointerEvent): void;
-  onPointerMove(event: React.PointerEvent): void;
-  onPointerUp(event: React.PointerEvent): void;
+  onPointerDown(event: PointerEvent): void;
+  onPointerMove(event: PointerEvent): void;
+  onPointerUp(event: PointerEvent): void;
 };
 
 export const useSwipeTracking = (
-  pointerStartRef: React.MutableRefObject<{ y: number } | null>,
-  swipeDeltaRef: React.MutableRefObject<{ y: number } | null>,
+  pointerStartRef: RefObject<{ y: number } | null>,
+  swipeDeltaRef: RefObject<{ y: number } | null>,
   onSwipeStart: () => void,
   onSwipeMove: (event: SwipeEvent) => void,
   onSwipeCancel: () => void,
   onSwipeEnd: (event: SwipeEvent) => void
 ): UseSwipeTracking => {
-  const onPointerDown = (event: React.PointerEvent) => {
+  const onPointerDown = (event: PointerEvent) => {
     pointerStartRef.current = { y: event.clientY };
   };
-  const onPointerMove = (event: React.PointerEvent) => {
+  const onPointerMove = (event: PointerEvent) => {
     if (!pointerStartRef.current) {
       return;
     }
@@ -42,7 +42,7 @@ export const useSwipeTracking = (
       pointerStartRef.current = null;
     }
   };
-  const onPointerUp = (event: React.PointerEvent) => {
+  const onPointerUp = (event: PointerEvent) => {
     const delta = swipeDeltaRef.current;
     const target = event.target as HTMLElement;
     if (target.hasPointerCapture(event.pointerId)) {