@basic-ui/core 0.0.31 → 0.0.34

package/build/cjs/index.js

@@ -372,8 +372,12 @@ const initialGestureHandlersState = {
   yInitial: 0,
   yPrev: 0,
   yVelocity: 0,
+  startTime: 0,
   down: false
 };
+const FRAMERATE_CONST = 1000 / 60; // 60 fps
+
+const VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;
 function gestureHandlers(set, containerRef, options = {}) {
   const {
     ensureTargetIsContainer = false
@@ -381,7 +385,15 @@ function gestureHandlers(set, containerRef, options = {}) {
 
   const handleUp = () => {
     set(state => {
+      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 = _extends__default['default']({}, state, {
+        xVelocity,
+        yVelocity,
         target: null,
         down: false
       });
@@ -411,6 +423,7 @@ function gestureHandlers(set, containerRef, options = {}) {
         yVelocity: 0,
         yInitial: pageY,
         yPrev: pageY,
+        startTime: Date.now(),
         down: true
       });
 
@@ -418,35 +431,50 @@ function gestureHandlers(set, containerRef, options = {}) {
     });
   };
 
+  function calcVelocity(deltaSpace, deltaTime, prevVelocity) {
+    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) {
     const {
       pageX,
-      movementX,
-      pageY,
-      movementY
+      pageY
     } = e;
-    e.preventDefault && e.preventDefault(); // prevent drag & drop behaviour from browser
+
+    if (e.cancelable) {
+      // prevent drag & drop behaviour from browser
+      e.preventDefault && e.preventDefault();
+    }
 
     set(state => {
       const target = containerRef && containerRef.current || e.target;
+      const deltaTime = Date.now() - state.startTime;
       const width = target ? target.offsetWidth : NaN;
       const xDelta = pageX - state.xInitial;
       const xDeltaPercent = xDelta * 100 / width;
+      const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
       const height = target ? target.offsetHeight : NaN;
       const yDelta = pageY - state.yInitial;
       const yDeltaPercent = yDelta * 100 / height;
+      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
 
       const newState = _extends__default['default']({}, state, {
         xDelta,
         xDeltaPercent,
         x: pageX,
         xPrev: state.x,
-        xVelocity: movementX,
+        xVelocity,
         yDelta,
         yDeltaPercent,
         y: pageY,
         yPrev: state.y,
-        yVelocity: movementY
+        yVelocity
       });
 
       return newState;
@@ -457,7 +485,11 @@ function gestureHandlers(set, containerRef, options = {}) {
 
 
   function handleTouchMove(e) {
-    e.preventDefault();
+    if (e.cancelable) {
+      // prevent drag & drop behaviour from browser
+      e.preventDefault();
+    }
+
     handleMove(e.touches.item(0));
   }
 
@@ -1634,6 +1666,7 @@ const getTabblableNodes = parentNode => {
   return Array.from(parentNode.querySelectorAll(tabblable));
 };
 
+const focusLockStack = [];
 function useFocusLock(ref, opts) {
   const {
     enabled = true,
@@ -1641,28 +1674,41 @@ function useFocusLock(ref, opts) {
     lockEndRef
   } = opts;
   react.useEffect(() => {
-    if (enabled) {
+    const rootEl = ref.current;
+
+    if (enabled && rootEl) {
+      focusLockStack.push(rootEl);
+
       const listener = event => {
+        const isActiveFocusLock = focusLockStack[focusLockStack.length - 1] === rootEl;
+
+        if (!isActiveFocusLock) {
+          // Not the currently focused lock. Forget about it.
+          return;
+        }
+
         if (event.target === lockEndRef.current) {
-          ref.current && ref.current.focus();
+          rootEl.focus();
         } else if (event.target === lockStartRef.current) {
-          const nodes = getTabblableNodes(ref.current);
+          const nodes = getTabblableNodes(rootEl);
 
           if (nodes.length > 0) {
             const nodeToFocus = nodes.length - 1;
             nodes[nodeToFocus].focus();
           } else {
-            ref.current && ref.current.focus();
+            rootEl.focus();
           }
-        } else if (document !== event.target && ref.current && ref.current !== event.target && !ref.current.contains(event.target)) {
+        } else if (document !== event.target && rootEl !== event.target && !rootEl.contains(event.target)) {
           event.preventDefault();
-          ref.current.focus();
+          rootEl.focus();
         }
       };
 
       document.addEventListener('focusin', listener);
       return () => {
-        document.removeEventListener('focusin', listener);
+        document.removeEventListener('focusin', listener); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+        focusLockStack.pop();
       };
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -2741,7 +2787,7 @@ let restTimeout;
 function startRestTimer() {
   window.clearTimeout(restTimeout);
   restTimeout = window.setTimeout(() => {
-    send(TooltipEventTypes.Rest, undefined);
+    send(Rest, undefined);
   }, 200);
 }
 
@@ -2754,7 +2800,7 @@ let leavingVisibleTimer;
 
 function startLeavingVisibleTimer() {
   window.clearTimeout(leavingVisibleTimer);
-  leavingVisibleTimer = window.setTimeout(() => send(TooltipEventTypes.TimeComplete, undefined), 100);
+  leavingVisibleTimer = window.setTimeout(() => send(TimeComplete, undefined), 100);
 }
 
 function clearLeavingVisibleTimer() {
@@ -2763,35 +2809,31 @@ function clearLeavingVisibleTimer() {
 // State machine
 
 
-let TooltipStates;
+// Nothing goin' on
+const Idle = 'IDLE'; // We're considering showing the tooltip, but we're gonna wait a sec
 
-(function (TooltipStates) {
-  TooltipStates["Idle"] = "IDLE";
-  TooltipStates["Focused"] = "FOCUSED";
-  TooltipStates["Visible"] = "VISIBLE";
-  TooltipStates["LeavingVisible"] = "LEAVING_VISIBLE";
-  TooltipStates["Dismissed"] = "DISMISSED";
-})(TooltipStates || (TooltipStates = {}));
+const Focused = 'FOCUSED'; // It's on!
 
-let TooltipEventTypes;
+const Visible = 'VISIBLE'; // Focus has left, but we want to keep it visible for a sec
 
-(function (TooltipEventTypes) {
-  TooltipEventTypes["Blur"] = "BLUR";
-  TooltipEventTypes["Focus"] = "FOCUS";
-  TooltipEventTypes["GlobalMouseMove"] = "GLOBAL_MOUSE_MOVE";
-  TooltipEventTypes["MouseDown"] = "MOUSE_DOWN";
-  TooltipEventTypes["MouseEnter"] = "MOUSE_ENTER";
-  TooltipEventTypes["MouseLeave"] = "MOUSE_LEAVE";
-  TooltipEventTypes["MouseMove"] = "MOUSE_MOVE";
-  TooltipEventTypes["Rest"] = "REST";
-  TooltipEventTypes["SelectWithKeyboard"] = "SELECT_WITH_KEYBOARD";
-  TooltipEventTypes["TimeComplete"] = "TIME_COMPLETE";
-})(TooltipEventTypes || (TooltipEventTypes = {}));
+const LeavingVisible = 'LEAVING_VISIBLE'; // The user clicked the tool, so we want to hide the thing, we can't just use
+// IDLE because we need to ignore mousemove, etc.
 
+const Dismissed = 'DISMISSED';
+const Blur = 'BLUR';
+const Focus = 'FOCUS';
+const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE';
+const MouseDown = 'MOUSE_DOWN';
+const MouseEnter = 'MOUSE_ENTER';
+const MouseLeave = 'MOUSE_LEAVE';
+const MouseMove = 'MOUSE_MOVE';
+const Rest = 'REST';
+const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD';
+const TimeComplete = 'TIME_COMPLETE';
 const subscription = createSubscription();
 const state = {
   current: {
-    state: TooltipStates.Idle,
+    state: Idle,
     id: ''
   }
 };
@@ -2801,40 +2843,40 @@ function clearContextId() {
 }
 
 const chart = {
-  initial: TooltipStates.Idle,
+  initial: Idle,
   states: {
-    [TooltipStates.Idle]: {
+    [Idle]: {
       enter: () => {
         clearContextId();
       },
       on: {
-        [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,
-        [TooltipEventTypes.Focus]: TooltipStates.Visible
+        [MouseEnter]: Focused,
+        [Focus]: Visible
       }
     },
-    [TooltipStates.Focused]: {
+    [Focused]: {
       enter: startRestTimer,
       leave: clearRestTimer,
       on: {
-        [TooltipEventTypes.MouseMove]: TooltipStates.Focused,
-        [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,
-        [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,
-        [TooltipEventTypes.Blur]: TooltipStates.Idle,
-        [TooltipEventTypes.Rest]: TooltipStates.Visible
+        [MouseMove]: Focused,
+        [MouseLeave]: Idle,
+        [MouseDown]: Dismissed,
+        [Blur]: Idle,
+        [Rest]: Visible
       }
     },
-    [TooltipStates.Visible]: {
+    [Visible]: {
       on: {
-        [TooltipEventTypes.Focus]: TooltipStates.Focused,
-        [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,
-        [TooltipEventTypes.MouseLeave]: TooltipStates.LeavingVisible,
-        [TooltipEventTypes.Blur]: TooltipStates.LeavingVisible,
-        [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,
-        [TooltipEventTypes.SelectWithKeyboard]: TooltipStates.Dismissed,
-        [TooltipEventTypes.GlobalMouseMove]: TooltipStates.LeavingVisible
+        [Focus]: Focused,
+        [MouseEnter]: Focused,
+        [MouseLeave]: LeavingVisible,
+        [Blur]: LeavingVisible,
+        [MouseDown]: Dismissed,
+        [SelectWithKeyboard]: Dismissed,
+        [GlobalMouseMove]: LeavingVisible
       }
     },
-    [TooltipStates.LeavingVisible]: {
+    [LeavingVisible]: {
       enter: () => {
         startLeavingVisibleTimer();
       },
@@ -2843,18 +2885,18 @@ const chart = {
         clearContextId();
       },
       on: {
-        [TooltipEventTypes.MouseEnter]: TooltipStates.Visible,
-        [TooltipEventTypes.Focus]: TooltipStates.Visible,
-        [TooltipEventTypes.TimeComplete]: TooltipStates.Idle
+        [MouseEnter]: Visible,
+        [Focus]: Visible,
+        [TimeComplete]: Idle
       }
     },
-    [TooltipStates.Dismissed]: {
+    [Dismissed]: {
       leave: () => {
         clearContextId();
       },
       on: {
-        [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,
-        [TooltipEventTypes.Blur]: TooltipStates.Idle
+        [MouseLeave]: Idle,
+        [Blur]: Idle
       }
     }
   }
@@ -2917,35 +2959,35 @@ function useTooltip(childProps, childRef, tooltipProps) {
   const id = useId('');
   react.useEffect(() => {
     subscription.subscribe(() => {
-      setVisible((state.current.state === TooltipStates.Visible || state.current.state === TooltipStates.LeavingVisible) && state.current.id === id);
+      setVisible((state.current.state === Visible || state.current.state === LeavingVisible) && state.current.id === id);
     });
   }, [id]);
 
   function handleMouseEnter() {
-    send(TooltipEventTypes.MouseEnter, {
+    send(MouseEnter, {
       id
     });
   }
 
   function handleMouseMove() {
-    send(TooltipEventTypes.MouseMove, {
+    send(MouseMove, {
       id
     });
   }
 
   function handleMouseLeave() {
-    send(TooltipEventTypes.MouseLeave);
+    send(MouseLeave);
   }
 
   function handleMouseDown() {
     // Allow quick click from one tool to another
     if (state.current.id === id) {
-      send(TooltipEventTypes.MouseDown);
+      send(MouseDown);
     }
   }
 
   function handleFocus() {
-    send(TooltipEventTypes.Focus, {
+    send(Focus, {
       id
     });
   }
@@ -2953,13 +2995,13 @@ function useTooltip(childProps, childRef, tooltipProps) {
   function handleBlur() {
     // Allow quick click from one tool to another
     if (state.current.id === id) {
-      send(TooltipEventTypes.Blur, undefined);
+      send(Blur, undefined);
     }
   }
 
   function handleKeyDown(event) {
     if (event.key === 'Enter' || event.key === ' ') {
-      send(TooltipEventTypes.SelectWithKeyboard);
+      send(SelectWithKeyboard);
     }
   }