@basic-ui/core 0.0.33 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/core",
-  "version": "0.0.33",
+  "version": "0.0.36",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -14,7 +14,7 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "concurrently \"yarn:build:*\"",
+    "build": "run -T concurrently \"yarn:build:*\"",
     "build:dts": "tsc -p ./tsconfig.json --isolatedModules false --declaration --emitDeclarationOnly",
     "build:cjs": "rollup -c ../../rollup.config.js",
     "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel --config-file ../../babel.config.js ./src --extensions \".ts,.tsx,.js,.jsx\" --source-maps --out-dir ./build/esm --ignore \"**/*.story.tsx,**/*.story.ts,**/*.test.tsx,**/*.test.ts\"",
@@ -33,8 +33,8 @@
   },
   "peerDependencies": {
     "@babel/runtime": "^7.0.0",
-    "react": ">=16.14.0 || >=17.0.0",
-    "react-dom": ">=16.14.0 || >=17.0.0"
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "5aa740f6686e8ed8b633d4e0d173a6dd91d28bef"
+  "gitHead": "255161ee895cdd62ff5de0a539562d593d215cdb"
 }

package/src/Tooltip/useTooltip.ts

@@ -1,4 +1,4 @@
-import React, { useRef, RefAttributes, useEffect, useState } from 'react';
+import { useRef, RefAttributes, useEffect, useState } from 'react';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils/wrapEvent';
 import { useId } from '../hooks/useId';

package/src/hooks/useGestureHandlers.ts

@@ -15,7 +15,9 @@ export interface GestureHandlersState {
   yInitial: number;
   yPrev: number;
   yVelocity: number;
+  startTime: number;
   down: boolean;
+  scrollLocked: boolean;
 }
 
 type SetStateFunc<S> = (
@@ -30,6 +32,7 @@ export interface GestureHandlersReturn {
 
 export interface GestureHandlerOptions {
   ensureTargetIsContainer?: boolean;
+  minTouchDelta?: number;
 }
 
 export const initialGestureHandlersState: GestureHandlersState = {
@@ -46,21 +49,33 @@ export const initialGestureHandlersState: GestureHandlersState = {
   yInitial: 0,
   yPrev: 0,
   yVelocity: 0,
+  startTime: 0,
   down: false,
+  scrollLocked: false,
 };
 
+const FRAMERATE_CONST = 1000 / 60; // 60 fps
+const VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;
+
 export function gestureHandlers(
   set: SetStateFunc<GestureHandlersState>,
   containerRef?: React.MutableRefObject<HTMLElement | null>,
   options: GestureHandlerOptions = {}
 ): GestureHandlersReturn {
-  const { ensureTargetIsContainer = false } = options;
+  const { ensureTargetIsContainer = false, minTouchDelta = 0 } = options;
 
   // Common handlers
   const handleUp = () => {
     set((state: GestureHandlersState) => {
+      const deltaTime = Date.now() - state.startTime;
+      const xDelta = state.x - state.xInitial;
+      const yDelta = state.y - state.yInitial;
+      const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
+      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
       const newState: GestureHandlersState = {
         ...state,
+        xVelocity,
+        yVelocity,
         target: null,
         down: false,
       };
@@ -88,28 +103,65 @@ export function gestureHandlers(
         yVelocity: 0,
         yInitial: pageY,
         yPrev: pageY,
+        startTime: Date.now(),
         down: true,
+        scrollLocked: false,
       };
 
       return newState;
     });
   };
 
+  function calcVelocity(
+    deltaSpace: number,
+    deltaTime: number,
+    prevVelocity: number
+  ) {
+    if (deltaTime < 1) {
+      deltaTime = 1;
+    }
+    const speed = deltaSpace / deltaTime;
+    const depr = 0.5 + Math.min(deltaTime / VELOCITY_DEPR_FACTOR, 0.5);
+    return speed * depr + prevVelocity * (1 - depr);
+  }
+
   function handleMove(e: MouseEvent) {
-    const { pageX, movementX, pageY, movementY } = e;
-    e.preventDefault && e.preventDefault(); // prevent drag & drop behaviour from browser
+    const { pageX, pageY } = e;
+    if (e.cancelable) {
+      // prevent drag & drop behaviour from browser
+      e.preventDefault && e.preventDefault();
+    }
 
     set((state: GestureHandlersState) => {
+      function getDeltaSum(
+        currentPos: number,
+        initialPos: number,
+        prevPos: number
+      ): number {
+        if (
+          state.scrollLocked ||
+          Math.abs(currentPos - initialPos) >= minTouchDelta
+        ) {
+          state.scrollLocked = true;
+          return currentPos - prevPos;
+        }
+        return 0;
+      }
+
       const target =
         (containerRef && containerRef.current) || (e as any).target;
 
+      const deltaTime = Date.now() - state.startTime;
+
       const width = target ? target.offsetWidth : NaN;
-      const xDelta = pageX - state.xInitial;
+      const xDelta = state.xDelta + getDeltaSum(pageX, state.xInitial, state.x);
       const xDeltaPercent = (xDelta * 100) / width;
+      const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
 
       const height = target ? target.offsetHeight : NaN;
-      const yDelta = pageY - state.yInitial;
+      const yDelta = state.yDelta + getDeltaSum(pageY, state.yInitial, state.y);
       const yDeltaPercent = (yDelta * 100) / height;
+      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
 
       const newState = {
         ...state,
@@ -117,12 +169,12 @@ export function gestureHandlers(
         xDeltaPercent,
         x: pageX,
         xPrev: state.x,
-        xVelocity: movementX,
+        xVelocity,
         yDelta,
         yDeltaPercent,
         y: pageY,
         yPrev: state.y,
-        yVelocity: movementY,
+        yVelocity,
       };
 
       return newState;
@@ -133,7 +185,10 @@ export function gestureHandlers(
 
   /* eslint-disable @typescript-eslint/no-use-before-define */
   function handleTouchMove(e: TouchEvent) {
-    e.preventDefault();
+    if (e.cancelable) {
+      // prevent drag & drop behaviour from browser
+      e.preventDefault();
+    }
     handleMove(e.touches.item(0) as any);
   }