@basic-ui/core 0.0.54 → 0.0.56

package/src/hooks/useGestureHandlers.ts

@@ -1,286 +1,282 @@
-import type {
-  MutableRefObject,
-  MouseEvent as ReactMouseEvent,
-  TouchEvent as ReactTouchEvent,
-} from 'react';
-import { useRef } from 'react';
-
-import { getOwnerDocument } from '../utils';
-
-export interface GestureHandlersState {
-  target: null | EventTarget;
-  x: number;
-  xDelta: number;
-  xDeltaPercent: number;
-  xInitial: number;
-  xPrev: number;
-  xVelocity: number;
-  y: number;
-  yDelta: number;
-  yDeltaPercent: number;
-  yInitial: number;
-  yPrev: number;
-  yVelocity: number;
-  startTime: number;
-  down: boolean;
-  scrollLocked: boolean;
-}
-
-type SetStateFunc<S> = (
-  state: (prevState: Readonly<S>) => S,
-  callback?: () => void
-) => void;
-
-export interface GestureHandlersReturn {
-  onMouseDown: (e: ReactMouseEvent<HTMLElement>) => void;
-  onTouchStart: (e: ReactTouchEvent<HTMLElement>) => void;
-}
-
-export interface GestureHandlerOptions {
-  ensureTargetIsContainer?: boolean;
-  minTouchDelta?: number;
-}
-
-export const initialGestureHandlersState: GestureHandlersState = {
-  target: null,
-  x: 0,
-  xDelta: 0,
-  xDeltaPercent: 0,
-  xInitial: 0,
-  xPrev: 0,
-  xVelocity: 0,
-  y: 0,
-  yDelta: 0,
-  yDeltaPercent: 0,
-  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?: MutableRefObject<HTMLElement | null>,
-  options: GestureHandlerOptions = {}
-): GestureHandlersReturn {
-  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,
-      };
-
-      return newState;
-    });
-  };
-
-  const handleDown = (e: MouseEvent) => {
-    const { target, pageX, pageY } = e;
-
-    set((state: GestureHandlersState) => {
-      const newState = {
-        ...state,
-        target,
-        x: pageX,
-        xDelta: 0,
-        xDeltaPercent: 0,
-        xVelocity: 0,
-        xInitial: pageX,
-        xPrev: pageX,
-        y: pageY,
-        yDelta: 0,
-        yDeltaPercent: 0,
-        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, 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 = 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 = state.yDelta + getDeltaSum(pageY, state.yInitial, state.y);
-      const yDeltaPercent = (yDelta * 100) / height;
-      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
-
-      const newState = {
-        ...state,
-        xDelta,
-        xDeltaPercent,
-        x: pageX,
-        xPrev: state.x,
-        xVelocity,
-        yDelta,
-        yDeltaPercent,
-        y: pageY,
-        yPrev: state.y,
-        yVelocity,
-      };
-
-      return newState;
-    });
-  }
-
-  // Touch handlers
-
-  /* eslint-disable @typescript-eslint/no-use-before-define */
-  function handleTouchMove(e: TouchEvent) {
-    if (e.cancelable) {
-      // prevent drag & drop behaviour from browser
-      e.preventDefault();
-    }
-    handleMove(e.touches.item(0) as any);
-  }
-
-  function handleTouchStart(e: ReactTouchEvent<HTMLElement>) {
-    // making sure we're not dragging the element when more than one finger press the screen
-    const { touches } = e;
-    if (touches.length > 1) {
-      return;
-    }
-
-    if (
-      ensureTargetIsContainer &&
-      containerRef &&
-      e.target !== containerRef.current
-    ) {
-      return;
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const ownerDocument = getOwnerDocument(e.currentTarget)!;
-    const ownerWindow = ownerDocument.defaultView || window;
-    ownerWindow.addEventListener('touchmove', handleTouchMove, {
-      passive: false,
-    });
-    ownerWindow.addEventListener('touchend', handleTouchEnd);
-    ownerWindow.addEventListener('touchcancel', handleTouchEnd);
-    handleDown(e.touches.item(0) as any);
-  }
-
-  function handleTouchEnd(this: Window) {
-    this.removeEventListener('touchmove', handleTouchMove);
-    this.removeEventListener('touchend', handleTouchEnd);
-    this.removeEventListener('touchcancel', handleTouchEnd);
-    handleUp();
-  }
-
-  // Mouse handlers
-  function handleMouseDown(e: ReactMouseEvent<HTMLElement>) {
-    if (
-      ensureTargetIsContainer &&
-      containerRef &&
-      e.target !== containerRef.current
-    ) {
-      return;
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const ownerDocument = getOwnerDocument(e.currentTarget)!;
-    const ownerWindow = ownerDocument.defaultView || window;
-    if (e.button === 0) {
-      ownerWindow.addEventListener('mousemove', handleMove);
-      ownerWindow.addEventListener('mouseup', handleMouseUp);
-      handleDown(e as any);
-    }
-  }
-
-  function handleMouseUp(this: Window) {
-    this.removeEventListener('mousemove', handleMove);
-    this.removeEventListener('mouseup', handleMouseUp);
-    handleUp();
-  }
-  /* eslint-enable @typescript-eslint/no-use-before-define */
-
-  return {
-    onMouseDown: handleMouseDown,
-    onTouchStart: handleTouchStart,
-  };
-}
-
-export const useGestureHandlers = (
-  containerRef: MutableRefObject<HTMLElement | null> | undefined,
-  onGesture: (e: GestureHandlersState) => void,
-  options: GestureHandlerOptions = {}
-) => {
-  const state = useRef({ ...initialGestureHandlersState });
-
-  const set = (
-    cb: (prevState: GestureHandlersState) => GestureHandlersState
-  ) => {
-    state.current = cb(state.current);
-    onGesture && onGesture(state.current);
-
-    return state.current;
-  };
-
-  const handlers = gestureHandlers(set, containerRef, options);
-
-  return { state: state.current, handlers };
-};
+import type {
+  MutableRefObject,
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent,
+} from 'react';
+import { useRef } from 'react';
+
+import { getOwnerDocument } from '../utils';
+
+export interface GestureHandlersState {
+  target: null | EventTarget;
+  x: number;
+  xDelta: number;
+  xDeltaPercent: number;
+  xInitial: number;
+  xPrev: number;
+  xVelocity: number;
+  y: number;
+  yDelta: number;
+  yDeltaPercent: number;
+  yInitial: number;
+  yPrev: number;
+  yVelocity: number;
+  startTime: number;
+  down: boolean;
+  scrollLocked: boolean;
+}
+
+type SetStateFunc<S> = (
+  state: (prevState: Readonly<S>) => S,
+  callback?: () => void
+) => void;
+
+export interface GestureHandlersReturn {
+  onMouseDown: (e: ReactMouseEvent<HTMLElement>) => void;
+  onTouchStart: (e: ReactTouchEvent<HTMLElement>) => void;
+}
+
+export interface GestureHandlerOptions {
+  ensureTargetIsContainer?: boolean;
+  minTouchDelta?: number;
+}
+
+export const initialGestureHandlersState: GestureHandlersState = {
+  target: null,
+  x: 0,
+  xDelta: 0,
+  xDeltaPercent: 0,
+  xInitial: 0,
+  xPrev: 0,
+  xVelocity: 0,
+  y: 0,
+  yDelta: 0,
+  yDeltaPercent: 0,
+  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?: MutableRefObject<HTMLElement | null>,
+  options: GestureHandlerOptions = {}
+): GestureHandlersReturn {
+  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,
+      };
+
+      return newState;
+    });
+  };
+
+  const handleDown = (e: MouseEvent) => {
+    const { target, pageX, pageY } = e;
+
+    set((state: GestureHandlersState) => {
+      const newState = {
+        ...state,
+        target,
+        x: pageX,
+        xDelta: 0,
+        xDeltaPercent: 0,
+        xVelocity: 0,
+        xInitial: pageX,
+        xPrev: pageX,
+        y: pageY,
+        yDelta: 0,
+        yDeltaPercent: 0,
+        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, 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 = 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 = state.yDelta + getDeltaSum(pageY, state.yInitial, state.y);
+      const yDeltaPercent = (yDelta * 100) / height;
+      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
+
+      const newState = {
+        ...state,
+        xDelta,
+        xDeltaPercent,
+        x: pageX,
+        xPrev: state.x,
+        xVelocity,
+        yDelta,
+        yDeltaPercent,
+        y: pageY,
+        yPrev: state.y,
+        yVelocity,
+      };
+
+      return newState;
+    });
+  }
+
+  // Touch handlers
+
+  function handleTouchMove(e: TouchEvent) {
+    if (e.cancelable) {
+      // prevent drag & drop behaviour from browser
+      e.preventDefault();
+    }
+    handleMove(e.touches.item(0) as any);
+  }
+
+  function handleTouchStart(e: ReactTouchEvent<HTMLElement>) {
+    // making sure we're not dragging the element when more than one finger press the screen
+    const { touches } = e;
+    if (touches.length > 1) {
+      return;
+    }
+
+    if (
+      ensureTargetIsContainer &&
+      containerRef &&
+      e.target !== containerRef.current
+    ) {
+      return;
+    }
+
+    const ownerDocument = getOwnerDocument(e.currentTarget)!;
+    const ownerWindow = ownerDocument.defaultView || window;
+    ownerWindow.addEventListener('touchmove', handleTouchMove, {
+      passive: false,
+    });
+    ownerWindow.addEventListener('touchend', handleTouchEnd);
+    ownerWindow.addEventListener('touchcancel', handleTouchEnd);
+    handleDown(e.touches.item(0) as any);
+  }
+
+  function handleTouchEnd(this: Window) {
+    this.removeEventListener('touchmove', handleTouchMove);
+    this.removeEventListener('touchend', handleTouchEnd);
+    this.removeEventListener('touchcancel', handleTouchEnd);
+    handleUp();
+  }
+
+  // Mouse handlers
+  function handleMouseDown(e: ReactMouseEvent<HTMLElement>) {
+    if (
+      ensureTargetIsContainer &&
+      containerRef &&
+      e.target !== containerRef.current
+    ) {
+      return;
+    }
+
+    const ownerDocument = getOwnerDocument(e.currentTarget)!;
+    const ownerWindow = ownerDocument.defaultView || window;
+    if (e.button === 0) {
+      ownerWindow.addEventListener('mousemove', handleMove);
+      ownerWindow.addEventListener('mouseup', handleMouseUp);
+      handleDown(e as any);
+    }
+  }
+
+  function handleMouseUp(this: Window) {
+    this.removeEventListener('mousemove', handleMove);
+    this.removeEventListener('mouseup', handleMouseUp);
+    handleUp();
+  }
+
+  return {
+    onMouseDown: handleMouseDown,
+    onTouchStart: handleTouchStart,
+  };
+}
+
+export const useGestureHandlers = (
+  containerRef: MutableRefObject<HTMLElement | null> | undefined,
+  onGesture: (e: GestureHandlersState) => void,
+  options: GestureHandlerOptions = {}
+) => {
+  const state = useRef({ ...initialGestureHandlersState });
+
+  const set = (
+    cb: (prevState: GestureHandlersState) => GestureHandlersState
+  ) => {
+    state.current = cb(state.current);
+    onGesture && onGesture(state.current);
+
+    return state.current;
+  };
+
+  const handlers = gestureHandlers(set, containerRef, options);
+
+  return { state: state.current, handlers };
+};

package/src/hooks/useMeasure.ts

@@ -1,33 +1,33 @@
-import type { MutableRefObject } from 'react';
-import { useRef, useState, useEffect } from 'react';
-
-export function useMeasure(ref: MutableRefObject<HTMLElement | null>) {
-  const ro = useRef<ResizeObserver | null>(null);
-  const [bounds, setBounds] = useState({
-    left: 0,
-    top: 0,
-    width: 0,
-    height: 0,
-  });
-
-  useEffect(() => {
-    if (ro.current === null) {
-      ro.current = new ResizeObserver((entries: any) => {
-        const entry = entries[0];
-        setBounds(entry.contentRect);
-      });
-    }
-
-    if (ref.current) {
-      ro.current.observe(ref.current);
-    }
-
-    return () => {
-      if (ro.current) {
-        ro.current.disconnect();
-      }
-    };
-  }, [ref]);
-
-  return bounds;
-}
+import type { MutableRefObject } from 'react';
+import { useRef, useState, useEffect } from 'react';
+
+export function useMeasure(ref: MutableRefObject<HTMLElement | null>) {
+  const ro = useRef<ResizeObserver | null>(null);
+  const [bounds, setBounds] = useState({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    if (ro.current === null) {
+      ro.current = new ResizeObserver((entries: any) => {
+        const entry = entries[0];
+        setBounds(entry.contentRect);
+      });
+    }
+
+    if (ref.current) {
+      ro.current.observe(ref.current);
+    }
+
+    return () => {
+      if (ro.current) {
+        ro.current.disconnect();
+      }
+    };
+  }, [ref]);
+
+  return bounds;
+}