@basic-ui/core 0.0.32 → 0.0.35

package/build/esm/Tooltip/stateMachine.js

@@ -9,7 +9,7 @@ let restTimeout;
 function startRestTimer() {
   window.clearTimeout(restTimeout);
   restTimeout = window.setTimeout(() => {
-    send(TooltipEventTypes.Rest, undefined);
+    send(Rest, undefined);
   }, 200);
 }
 
@@ -22,7 +22,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() {
@@ -31,35 +31,31 @@ function clearLeavingVisibleTimer() {
 // State machine
 
 
-export let TooltipStates;
+// Nothing goin' on
+export 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 = {}));
+export const Focused = 'FOCUSED'; // It's on!
 
-export let TooltipEventTypes;
+export 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 = {}));
+export 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.
 
+export const Dismissed = 'DISMISSED';
+export const Blur = 'BLUR';
+export const Focus = 'FOCUS';
+export const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE';
+export const MouseDown = 'MOUSE_DOWN';
+export const MouseEnter = 'MOUSE_ENTER';
+export const MouseLeave = 'MOUSE_LEAVE';
+export const MouseMove = 'MOUSE_MOVE';
+export const Rest = 'REST';
+export const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD';
+export const TimeComplete = 'TIME_COMPLETE';
 export const subscription = createSubscription();
 export const state = {
   current: {
-    state: TooltipStates.Idle,
+    state: Idle,
     id: ''
   }
 };
@@ -69,40 +65,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();
       },
@@ -111,18 +107,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
       }
     }
   }

package/build/esm/Tooltip/stateMachine.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltip/stateMachine.ts"],"names":["createSubscription","restTimeout","startRestTimer","window","clearTimeout","setTimeout","send","TooltipEventTypes","Rest","undefined","clearRestTimer","leavingVisibleTimer","startLeavingVisibleTimer","TimeComplete","clearLeavingVisibleTimer","TooltipStates","subscription","state","current","Idle","id","clearContextId","chart","initial","states","enter","on","MouseEnter","Focused","Focus","Visible","leave","MouseMove","MouseLeave","MouseDown","Dismissed","Blur","LeavingVisible","SelectWithKeyboard","GlobalMouseMove","transition","currentState","event","payload","currentStateValue","stateDef","nextState","nextStateValue","nextDef","notify"],"mappings":"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","sourcesContent":["import { createSubscription } from '../utils/createSubscription';\nimport { StateChart as GenericStateChart } from '../hooks/useReducerMachine';\n\n////////////////////////////////////////////////////////////////////////////////\n// Timeouts:\n\n// Manages when the user \"rests\" on an element. Keeps the interface from being\n// flashing tooltips all the time as the user moves the mouse around the screen.\nlet restTimeout: number;\nfunction startRestTimer() {\n  window.clearTimeout(restTimeout);\n  restTimeout = window.setTimeout(() => {\n    send(TooltipEventTypes.Rest, undefined);\n  }, 200);\n}\n\nfunction clearRestTimer() {\n  window.clearTimeout(restTimeout);\n}\n\n// Manages the delay to hide the tooltip after rest leaves.\nlet leavingVisibleTimer: number;\n\nfunction startLeavingVisibleTimer() {\n  window.clearTimeout(leavingVisibleTimer);\n  leavingVisibleTimer = window.setTimeout(\n    () => send(TooltipEventTypes.TimeComplete, undefined),\n    100\n  );\n}\n\nfunction clearLeavingVisibleTimer() {\n  window.clearTimeout(leavingVisibleTimer);\n}\n\n////////////////////////////////////////////////////////////////////////////////\n// State machine\n\nexport enum TooltipStates {\n  // Nothing goin' on\n  Idle = 'IDLE',\n\n  // We're considering showing the tooltip, but we're gonna wait a sec\n  Focused = 'FOCUSED',\n\n  // It's on!\n  Visible = 'VISIBLE',\n\n  // Focus has left, but we want to keep it visible for a sec\n  LeavingVisible = 'LEAVING_VISIBLE',\n\n  // The user clicked the tool, so we want to hide the thing, we can't just use\n  // IDLE because we need to ignore mousemove, etc.\n  Dismissed = 'DISMISSED',\n}\n\nexport enum TooltipEventTypes {\n  Blur = 'BLUR',\n  Focus = 'FOCUS',\n  GlobalMouseMove = 'GLOBAL_MOUSE_MOVE',\n  MouseDown = 'MOUSE_DOWN',\n  MouseEnter = 'MOUSE_ENTER',\n  MouseLeave = 'MOUSE_LEAVE',\n  MouseMove = 'MOUSE_MOVE',\n  Rest = 'REST',\n  SelectWithKeyboard = 'SELECT_WITH_KEYBOARD',\n  TimeComplete = 'TIME_COMPLETE',\n}\n\nexport const subscription = createSubscription();\nexport const state = {\n  current: {\n    state: TooltipStates.Idle,\n    id: '',\n  },\n};\n\nfunction clearContextId() {\n  state.current.id = '';\n}\n\nconst chart: GenericStateChart<TooltipStates, TooltipEventTypes> = {\n  initial: TooltipStates.Idle,\n  states: {\n    [TooltipStates.Idle]: {\n      enter: () => {\n        clearContextId();\n      },\n      on: {\n        [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,\n        [TooltipEventTypes.Focus]: TooltipStates.Visible,\n      },\n    },\n    [TooltipStates.Focused]: {\n      enter: startRestTimer,\n      leave: clearRestTimer,\n      on: {\n        [TooltipEventTypes.MouseMove]: TooltipStates.Focused,\n        [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,\n        [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,\n        [TooltipEventTypes.Blur]: TooltipStates.Idle,\n        [TooltipEventTypes.Rest]: TooltipStates.Visible,\n      },\n    },\n    [TooltipStates.Visible]: {\n      on: {\n        [TooltipEventTypes.Focus]: TooltipStates.Focused,\n        [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,\n        [TooltipEventTypes.MouseLeave]: TooltipStates.LeavingVisible,\n        [TooltipEventTypes.Blur]: TooltipStates.LeavingVisible,\n        [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,\n        [TooltipEventTypes.SelectWithKeyboard]: TooltipStates.Dismissed,\n        [TooltipEventTypes.GlobalMouseMove]: TooltipStates.LeavingVisible,\n      },\n    },\n    [TooltipStates.LeavingVisible]: {\n      enter: () => {\n        startLeavingVisibleTimer();\n      },\n      leave: () => {\n        clearLeavingVisibleTimer();\n        clearContextId();\n      },\n      on: {\n        [TooltipEventTypes.MouseEnter]: TooltipStates.Visible,\n        [TooltipEventTypes.Focus]: TooltipStates.Visible,\n        [TooltipEventTypes.TimeComplete]: TooltipStates.Idle,\n      },\n    },\n    [TooltipStates.Dismissed]: {\n      leave: () => {\n        clearContextId();\n      },\n      on: {\n        [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,\n        [TooltipEventTypes.Blur]: TooltipStates.Idle,\n      },\n    },\n  },\n};\n\nfunction transition(\n  currentState: typeof state['current'],\n  event: TooltipEventTypes,\n  payload?: Omit<typeof state['current'], 'state'>\n): typeof state['current'] {\n  const currentStateValue = currentState.state;\n  const stateDef = chart.states[currentState.state];\n  const nextState = stateDef?.on?.[event];\n\n  // Really useful for debugging\n  // console.log({\n  //   event,\n  //   state: state.current.state,\n  //   id: state.current.id,\n  //   nextState,\n  // });\n\n  if (!nextState) {\n    return currentState;\n  }\n\n  if (stateDef && stateDef.leave) {\n    stateDef.leave(currentStateValue, payload);\n  }\n\n  const nextStateValue = nextState;\n  const nextDef = chart.states[nextStateValue];\n  if (nextDef && nextDef.enter) {\n    nextDef.enter(nextStateValue, payload);\n  }\n\n  return { ...currentState, ...payload, state: nextStateValue };\n}\n\nexport function send<T extends TooltipEventTypes>(\n  event: T,\n  payload?: Omit<typeof state['current'], 'state'>\n) {\n  const nextState = transition(state.current, event, payload);\n  if (state.current !== nextState) {\n    state.current = nextState;\n    subscription.notify();\n  }\n}\n"],"file":"stateMachine.js"}
+{"version":3,"sources":["../../../src/Tooltip/stateMachine.ts"],"names":["createSubscription","restTimeout","startRestTimer","window","clearTimeout","setTimeout","send","Rest","undefined","clearRestTimer","leavingVisibleTimer","startLeavingVisibleTimer","TimeComplete","clearLeavingVisibleTimer","Idle","Focused","Visible","LeavingVisible","Dismissed","Blur","Focus","GlobalMouseMove","MouseDown","MouseEnter","MouseLeave","MouseMove","SelectWithKeyboard","subscription","state","current","id","clearContextId","chart","initial","states","enter","on","leave","transition","currentState","event","payload","currentStateValue","stateDef","nextState","nextStateValue","nextDef","notify"],"mappings":"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","sourcesContent":["import { createSubscription } from '../utils/createSubscription';\nimport { StateChart as GenericStateChart } from '../hooks/useReducerMachine';\n\n////////////////////////////////////////////////////////////////////////////////\n// Timeouts:\n\n// Manages when the user \"rests\" on an element. Keeps the interface from being\n// flashing tooltips all the time as the user moves the mouse around the screen.\nlet restTimeout: number;\nfunction startRestTimer() {\n  window.clearTimeout(restTimeout);\n  restTimeout = window.setTimeout(() => {\n    send(Rest, undefined);\n  }, 200);\n}\n\nfunction clearRestTimer() {\n  window.clearTimeout(restTimeout);\n}\n\n// Manages the delay to hide the tooltip after rest leaves.\nlet leavingVisibleTimer: number;\n\nfunction startLeavingVisibleTimer() {\n  window.clearTimeout(leavingVisibleTimer);\n  leavingVisibleTimer = window.setTimeout(\n    () => send(TimeComplete, undefined),\n    100\n  );\n}\n\nfunction clearLeavingVisibleTimer() {\n  window.clearTimeout(leavingVisibleTimer);\n}\n\n////////////////////////////////////////////////////////////////////////////////\n// State machine\n\nexport type TooltipStates =\n  | 'IDLE'\n  | 'FOCUSED'\n  | 'VISIBLE'\n  | 'LEAVING_VISIBLE'\n  | 'DISMISSED';\n\n// Nothing goin' on\nexport const Idle = 'IDLE' as const;\n// We're considering showing the tooltip, but we're gonna wait a sec\nexport const Focused = 'FOCUSED' as const;\n// It's on!\nexport const Visible = 'VISIBLE' as const;\n// Focus has left, but we want to keep it visible for a sec\nexport const LeavingVisible = 'LEAVING_VISIBLE' as const;\n// The user clicked the tool, so we want to hide the thing, we can't just use\n// IDLE because we need to ignore mousemove, etc.\nexport const Dismissed = 'DISMISSED' as const;\n\nexport type TooltipEventTypes =\n  | 'BLUR'\n  | 'FOCUS'\n  | 'GLOBAL_MOUSE_MOVE'\n  | 'MOUSE_DOWN'\n  | 'MOUSE_ENTER'\n  | 'MOUSE_LEAVE'\n  | 'MOUSE_MOVE'\n  | 'REST'\n  | 'SELECT_WITH_KEYBOARD'\n  | 'TIME_COMPLETE';\n\nexport const Blur = 'BLUR' as const;\nexport const Focus = 'FOCUS' as const;\nexport const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE' as const;\nexport const MouseDown = 'MOUSE_DOWN' as const;\nexport const MouseEnter = 'MOUSE_ENTER' as const;\nexport const MouseLeave = 'MOUSE_LEAVE' as const;\nexport const MouseMove = 'MOUSE_MOVE' as const;\nexport const Rest = 'REST' as const;\nexport const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD' as const;\nexport const TimeComplete = 'TIME_COMPLETE' as const;\n\nexport const subscription = createSubscription();\nexport const state = {\n  current: {\n    state: Idle as TooltipStates,\n    id: '',\n  },\n};\n\nfunction clearContextId() {\n  state.current.id = '';\n}\n\nconst chart: GenericStateChart<TooltipStates, TooltipEventTypes> = {\n  initial: Idle,\n  states: {\n    [Idle]: {\n      enter: () => {\n        clearContextId();\n      },\n      on: {\n        [MouseEnter]: Focused,\n        [Focus]: Visible,\n      },\n    },\n    [Focused]: {\n      enter: startRestTimer,\n      leave: clearRestTimer,\n      on: {\n        [MouseMove]: Focused,\n        [MouseLeave]: Idle,\n        [MouseDown]: Dismissed,\n        [Blur]: Idle,\n        [Rest]: Visible,\n      },\n    },\n    [Visible]: {\n      on: {\n        [Focus]: Focused,\n        [MouseEnter]: Focused,\n        [MouseLeave]: LeavingVisible,\n        [Blur]: LeavingVisible,\n        [MouseDown]: Dismissed,\n        [SelectWithKeyboard]: Dismissed,\n        [GlobalMouseMove]: LeavingVisible,\n      },\n    },\n    [LeavingVisible]: {\n      enter: () => {\n        startLeavingVisibleTimer();\n      },\n      leave: () => {\n        clearLeavingVisibleTimer();\n        clearContextId();\n      },\n      on: {\n        [MouseEnter]: Visible,\n        [Focus]: Visible,\n        [TimeComplete]: Idle,\n      },\n    },\n    [Dismissed]: {\n      leave: () => {\n        clearContextId();\n      },\n      on: {\n        [MouseLeave]: Idle,\n        [Blur]: Idle,\n      },\n    },\n  },\n};\n\nfunction transition(\n  currentState: typeof state['current'],\n  event: TooltipEventTypes,\n  payload?: Omit<typeof state['current'], 'state'>\n): typeof state['current'] {\n  const currentStateValue = currentState.state;\n  const stateDef = chart.states[currentState.state];\n  const nextState = stateDef?.on?.[event];\n\n  // Really useful for debugging\n  // console.log({\n  //   event,\n  //   state: state.current.state,\n  //   id: state.current.id,\n  //   nextState,\n  // });\n\n  if (!nextState) {\n    return currentState;\n  }\n\n  if (stateDef && stateDef.leave) {\n    stateDef.leave(currentStateValue, payload);\n  }\n\n  const nextStateValue = nextState;\n  const nextDef = chart.states[nextStateValue];\n  if (nextDef && nextDef.enter) {\n    nextDef.enter(nextStateValue, payload);\n  }\n\n  return { ...currentState, ...payload, state: nextStateValue };\n}\n\nexport function send<T extends TooltipEventTypes>(\n  event: T,\n  payload?: Omit<typeof state['current'], 'state'>\n) {\n  const nextState = transition(state.current, event, payload);\n  if (state.current !== nextState) {\n    state.current = nextState;\n    subscription.notify();\n  }\n}\n"],"file":"stateMachine.js"}

package/build/esm/Tooltip/useTooltip.js

@@ -4,7 +4,7 @@ import { useRef, useEffect, useState } from 'react';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils/wrapEvent';
 import { useId } from '../hooks/useId';
-import { send, state, subscription, TooltipEventTypes, TooltipStates } from './stateMachine';
+import { send, state, subscription, Blur, Focus, LeavingVisible, MouseDown, MouseEnter, MouseLeave, MouseMove, SelectWithKeyboard, Visible } from './stateMachine';
 export function useTooltip(childProps, childRef, tooltipProps) {
   const {
     onMouseEnter,
@@ -20,35 +20,35 @@ export function useTooltip(childProps, childRef, tooltipProps) {
   const id = useId('');
   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
     });
   }
@@ -56,13 +56,13 @@ export 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);
     }
   }
 

package/build/esm/Tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltip/useTooltip.ts"],"names":["useRef","useEffect","useState","assignMultipleRefs","wrapEvent","useId","send","state","subscription","TooltipEventTypes","TooltipStates","useTooltip","childProps","childRef","tooltipProps","onMouseEnter","onMouseLeave","onMouseMove","onMouseDown","onKeyDown","onFocus","onBlur","anchorEl","visible","setVisible","id","subscribe","current","Visible","LeavingVisible","handleMouseEnter","MouseEnter","handleMouseMove","MouseMove","handleMouseLeave","MouseLeave","handleMouseDown","MouseDown","handleFocus","Focus","handleBlur","Blur","undefined","handleKeyDown","event","key","SelectWithKeyboard","label","children","tooltipOnMouseEnter","tooltipOnMouseLeave","tooltipOnMouseMove","otherTooltipProps","tooltipId","ref","role"],"mappings":"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","sourcesContent":["import React, { useRef, RefAttributes, useEffect, useState } from 'react';\nimport { assignMultipleRefs } from '../utils/assignRef';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { useId } from '../hooks/useId';\nimport {\n  send,\n  state,\n  subscription,\n  TooltipEventTypes,\n  TooltipStates,\n} from './stateMachine';\n\nexport type ChildProps = React.HTMLAttributes<HTMLElement> &\n  RefAttributes<HTMLElement>;\n\nexport interface InjectedTooltipProps\n  extends React.HTMLAttributes<HTMLElement> {\n  anchorEl: React.RefObject<HTMLElement>;\n  visible: boolean;\n  children?: React.ReactNode;\n}\n\nexport function useTooltip(\n  childProps: ChildProps,\n  childRef: React.Ref<HTMLElement> | undefined,\n  tooltipProps: React.HTMLAttributes<HTMLElement> & { label?: React.ReactNode }\n): [ChildProps, InjectedTooltipProps] {\n  const {\n    onMouseEnter,\n    onMouseLeave,\n    onMouseMove,\n    onMouseDown,\n    onKeyDown,\n    onFocus,\n    onBlur,\n  } = childProps;\n  const anchorEl = useRef<HTMLElement>(null);\n  const [visible, setVisible] = useState(false);\n  const id = useId('');\n\n  useEffect(() => {\n    subscription.subscribe(() => {\n      setVisible(\n        (state.current.state === TooltipStates.Visible ||\n          state.current.state === TooltipStates.LeavingVisible) &&\n          state.current.id === id\n      );\n    });\n  }, [id]);\n\n  function handleMouseEnter() {\n    send(TooltipEventTypes.MouseEnter, { id });\n  }\n\n  function handleMouseMove() {\n    send(TooltipEventTypes.MouseMove, { id });\n  }\n\n  function handleMouseLeave() {\n    send(TooltipEventTypes.MouseLeave);\n  }\n\n  function handleMouseDown() {\n    // Allow quick click from one tool to another\n    if (state.current.id === id) {\n      send(TooltipEventTypes.MouseDown);\n    }\n  }\n\n  function handleFocus() {\n    send(TooltipEventTypes.Focus, { id });\n  }\n\n  function handleBlur() {\n    // Allow quick click from one tool to another\n    if (state.current.id === id) {\n      send(TooltipEventTypes.Blur, undefined);\n    }\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      send(TooltipEventTypes.SelectWithKeyboard);\n    }\n  }\n\n  const {\n    label: children,\n    onMouseEnter: tooltipOnMouseEnter,\n    onMouseLeave: tooltipOnMouseLeave,\n    onMouseMove: tooltipOnMouseMove,\n    ...otherTooltipProps\n  } = tooltipProps;\n\n  const tooltipId = `tooltip-${id}`;\n  return [\n    {\n      ...childProps,\n      ref: assignMultipleRefs(childRef, anchorEl),\n      ...(visible && { 'aria-describedby': tooltipId }),\n      onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),\n      onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),\n      onMouseMove: wrapEvent(onMouseMove, handleMouseMove),\n      onMouseDown: wrapEvent(onMouseDown, handleMouseDown),\n      onFocus: wrapEvent(onFocus, handleFocus),\n      onBlur: wrapEvent(onBlur, handleBlur),\n      onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\n    },\n    {\n      id: tooltipId,\n      anchorEl,\n      visible,\n      children,\n      onMouseEnter: wrapEvent(tooltipOnMouseEnter, handleMouseEnter),\n      onMouseLeave: wrapEvent(tooltipOnMouseLeave, handleMouseLeave),\n      onMouseMove: wrapEvent(tooltipOnMouseMove, handleMouseMove),\n      role: 'tooltip',\n      ...otherTooltipProps,\n    },\n  ];\n}\n"],"file":"useTooltip.js"}
+{"version":3,"sources":["../../../src/Tooltip/useTooltip.ts"],"names":["useRef","useEffect","useState","assignMultipleRefs","wrapEvent","useId","send","state","subscription","Blur","Focus","LeavingVisible","MouseDown","MouseEnter","MouseLeave","MouseMove","SelectWithKeyboard","Visible","useTooltip","childProps","childRef","tooltipProps","onMouseEnter","onMouseLeave","onMouseMove","onMouseDown","onKeyDown","onFocus","onBlur","anchorEl","visible","setVisible","id","subscribe","current","handleMouseEnter","handleMouseMove","handleMouseLeave","handleMouseDown","handleFocus","handleBlur","undefined","handleKeyDown","event","key","label","children","tooltipOnMouseEnter","tooltipOnMouseLeave","tooltipOnMouseMove","otherTooltipProps","tooltipId","ref","role"],"mappings":"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","sourcesContent":["import React, { useRef, RefAttributes, useEffect, useState } from 'react';\nimport { assignMultipleRefs } from '../utils/assignRef';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { useId } from '../hooks/useId';\nimport {\n  send,\n  state,\n  subscription,\n  Blur,\n  Focus,\n  LeavingVisible,\n  MouseDown,\n  MouseEnter,\n  MouseLeave,\n  MouseMove,\n  SelectWithKeyboard,\n  Visible,\n} from './stateMachine';\n\nexport type ChildProps = React.HTMLAttributes<HTMLElement> &\n  RefAttributes<HTMLElement>;\n\nexport interface InjectedTooltipProps\n  extends React.HTMLAttributes<HTMLElement> {\n  anchorEl: React.RefObject<HTMLElement>;\n  visible: boolean;\n  children?: React.ReactNode;\n}\n\nexport function useTooltip(\n  childProps: ChildProps,\n  childRef: React.Ref<HTMLElement> | undefined,\n  tooltipProps: React.HTMLAttributes<HTMLElement> & { label?: React.ReactNode }\n): [ChildProps, InjectedTooltipProps] {\n  const {\n    onMouseEnter,\n    onMouseLeave,\n    onMouseMove,\n    onMouseDown,\n    onKeyDown,\n    onFocus,\n    onBlur,\n  } = childProps;\n  const anchorEl = useRef<HTMLElement>(null);\n  const [visible, setVisible] = useState(false);\n  const id = useId('');\n\n  useEffect(() => {\n    subscription.subscribe(() => {\n      setVisible(\n        (state.current.state === Visible ||\n          state.current.state === LeavingVisible) &&\n          state.current.id === id\n      );\n    });\n  }, [id]);\n\n  function handleMouseEnter() {\n    send(MouseEnter, { id });\n  }\n\n  function handleMouseMove() {\n    send(MouseMove, { id });\n  }\n\n  function handleMouseLeave() {\n    send(MouseLeave);\n  }\n\n  function handleMouseDown() {\n    // Allow quick click from one tool to another\n    if (state.current.id === id) {\n      send(MouseDown);\n    }\n  }\n\n  function handleFocus() {\n    send(Focus, { id });\n  }\n\n  function handleBlur() {\n    // Allow quick click from one tool to another\n    if (state.current.id === id) {\n      send(Blur, undefined);\n    }\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      send(SelectWithKeyboard);\n    }\n  }\n\n  const {\n    label: children,\n    onMouseEnter: tooltipOnMouseEnter,\n    onMouseLeave: tooltipOnMouseLeave,\n    onMouseMove: tooltipOnMouseMove,\n    ...otherTooltipProps\n  } = tooltipProps;\n\n  const tooltipId = `tooltip-${id}`;\n  return [\n    {\n      ...childProps,\n      ref: assignMultipleRefs(childRef, anchorEl),\n      ...(visible && { 'aria-describedby': tooltipId }),\n      onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),\n      onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),\n      onMouseMove: wrapEvent(onMouseMove, handleMouseMove),\n      onMouseDown: wrapEvent(onMouseDown, handleMouseDown),\n      onFocus: wrapEvent(onFocus, handleFocus),\n      onBlur: wrapEvent(onBlur, handleBlur),\n      onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\n    },\n    {\n      id: tooltipId,\n      anchorEl,\n      visible,\n      children,\n      onMouseEnter: wrapEvent(tooltipOnMouseEnter, handleMouseEnter),\n      onMouseLeave: wrapEvent(tooltipOnMouseLeave, handleMouseLeave),\n      onMouseMove: wrapEvent(tooltipOnMouseMove, handleMouseMove),\n      role: 'tooltip',\n      ...otherTooltipProps,\n    },\n  ];\n}\n"],"file":"useTooltip.js"}

package/build/esm/hooks/useGestureHandlers.d.ts

@@ -13,7 +13,9 @@ export interface GestureHandlersState {
     yInitial: number;
     yPrev: number;
     yVelocity: number;
+    startTime: number;
     down: boolean;
+    scrollLocked: boolean;
 }
 declare type SetStateFunc<S> = (state: (prevState: Readonly<S>) => S, callback?: () => void) => void;
 export interface GestureHandlersReturn {
@@ -22,6 +24,7 @@ export interface GestureHandlersReturn {
 }
 export interface GestureHandlerOptions {
     ensureTargetIsContainer?: boolean;
+    minTouchDelta?: number;
 }
 export declare const initialGestureHandlersState: GestureHandlersState;
 export declare function gestureHandlers(set: SetStateFunc<GestureHandlersState>, containerRef?: React.MutableRefObject<HTMLElement | null>, options?: GestureHandlerOptions): GestureHandlersReturn;
@@ -40,7 +43,9 @@ export declare const useGestureHandlers: (containerRef: React.MutableRefObject<H
         yInitial: number;
         yPrev: number;
         yVelocity: number;
+        startTime: number;
         down: boolean;
+        scrollLocked: boolean;
     };
     handlers: GestureHandlersReturn;
 };

package/build/esm/hooks/useGestureHandlers.js

@@ -14,16 +14,30 @@ export const initialGestureHandlersState = {
   yInitial: 0,
   yPrev: 0,
   yVelocity: 0,
-  down: false
+  startTime: 0,
+  down: false,
+  scrollLocked: false
 };
+const FRAMERATE_CONST = 1000 / 60; // 60 fps
+
+const VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;
 export function gestureHandlers(set, containerRef, options = {}) {
   const {
-    ensureTargetIsContainer = false
+    ensureTargetIsContainer = false,
+    minTouchDelta = 0
   } = options; // Common handlers
 
   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({}, state, {
+        xVelocity,
+        yVelocity,
         target: null,
         down: false
       });
@@ -53,42 +67,68 @@ export function gestureHandlers(set, containerRef, options = {}) {
         yVelocity: 0,
         yInitial: pageY,
         yPrev: pageY,
-        down: true
+        startTime: Date.now(),
+        down: true,
+        scrollLocked: false
       });
 
       return newState;
     });
   };
 
+  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 => {
+      function getDeltaSum(currentPos, initialPos, prevPos) {
+        if (state.scrollLocked || Math.abs(currentPos - initialPos) >= minTouchDelta) {
+          state.scrollLocked = true;
+          return currentPos - prevPos;
+        }
+
+        return 0;
+      }
+
       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 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 = _extends({}, state, {
         xDelta,
         xDeltaPercent,
         x: pageX,
         xPrev: state.x,
-        xVelocity: movementX,
+        xVelocity,
         yDelta,
         yDeltaPercent,
         y: pageY,
         yPrev: state.y,
-        yVelocity: movementY
+        yVelocity
       });
 
       return newState;
@@ -99,7 +139,11 @@ export 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));
   }
 

package/build/esm/hooks/useGestureHandlers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useGestureHandlers.ts"],"names":["useRef","initialGestureHandlersState","target","x","xDelta","xDeltaPercent","xInitial","xPrev","xVelocity","y","yDelta","yDeltaPercent","yInitial","yPrev","yVelocity","down","gestureHandlers","set","containerRef","options","ensureTargetIsContainer","handleUp","state","newState","handleDown","e","pageX","pageY","handleMove","movementX","movementY","preventDefault","current","width","offsetWidth","NaN","height","offsetHeight","handleTouchMove","touches","item","handleTouchStart","length","window","addEventListener","passive","handleTouchEnd","removeEventListener","handleMouseDown","button","handleMouseUp","onMouseDown","onTouchStart","useGestureHandlers","onGesture","cb","handlers"],"mappings":"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","sourcesContent":["import { useRef } from 'react';\nimport type * as React from 'react';\n\nexport interface GestureHandlersState {\n  target: null | EventTarget;\n  x: number;\n  xDelta: number;\n  xDeltaPercent: number;\n  xInitial: number;\n  xPrev: number;\n  xVelocity: number;\n  y: number;\n  yDelta: number;\n  yDeltaPercent: number;\n  yInitial: number;\n  yPrev: number;\n  yVelocity: number;\n  down: boolean;\n}\n\ntype SetStateFunc<S> = (\n  state: (prevState: Readonly<S>) => S,\n  callback?: () => void\n) => void;\n\nexport interface GestureHandlersReturn {\n  onMouseDown: (e: React.MouseEvent<HTMLElement>) => void;\n  onTouchStart: (e: React.TouchEvent<HTMLElement>) => void;\n}\n\nexport interface GestureHandlerOptions {\n  ensureTargetIsContainer?: boolean;\n}\n\nexport const initialGestureHandlersState: GestureHandlersState = {\n  target: null,\n  x: 0,\n  xDelta: 0,\n  xDeltaPercent: 0,\n  xInitial: 0,\n  xPrev: 0,\n  xVelocity: 0,\n  y: 0,\n  yDelta: 0,\n  yDeltaPercent: 0,\n  yInitial: 0,\n  yPrev: 0,\n  yVelocity: 0,\n  down: false,\n};\n\nexport function gestureHandlers(\n  set: SetStateFunc<GestureHandlersState>,\n  containerRef?: React.MutableRefObject<HTMLElement | null>,\n  options: GestureHandlerOptions = {}\n): GestureHandlersReturn {\n  const { ensureTargetIsContainer = false } = options;\n\n  // Common handlers\n  const handleUp = () => {\n    set((state: GestureHandlersState) => {\n      const newState: GestureHandlersState = {\n        ...state,\n        target: null,\n        down: false,\n      };\n\n      return newState;\n    });\n  };\n\n  const handleDown = (e: MouseEvent) => {\n    const { target, pageX, pageY } = e;\n\n    set((state: GestureHandlersState) => {\n      const newState = {\n        ...state,\n        target,\n        x: pageX,\n        xDelta: 0,\n        xDeltaPercent: 0,\n        xVelocity: 0,\n        xInitial: pageX,\n        xPrev: pageX,\n        y: pageY,\n        yDelta: 0,\n        yDeltaPercent: 0,\n        yVelocity: 0,\n        yInitial: pageY,\n        yPrev: pageY,\n        down: true,\n      };\n\n      return newState;\n    });\n  };\n\n  function handleMove(e: MouseEvent) {\n    const { pageX, movementX, pageY, movementY } = e;\n    e.preventDefault && e.preventDefault(); // prevent drag & drop behaviour from browser\n\n    set((state: GestureHandlersState) => {\n      const target =\n        (containerRef && containerRef.current) || (e as any).target;\n\n      const width = target ? target.offsetWidth : NaN;\n      const xDelta = pageX - state.xInitial;\n      const xDeltaPercent = (xDelta * 100) / width;\n\n      const height = target ? target.offsetHeight : NaN;\n      const yDelta = pageY - state.yInitial;\n      const yDeltaPercent = (yDelta * 100) / height;\n\n      const newState = {\n        ...state,\n        xDelta,\n        xDeltaPercent,\n        x: pageX,\n        xPrev: state.x,\n        xVelocity: movementX,\n        yDelta,\n        yDeltaPercent,\n        y: pageY,\n        yPrev: state.y,\n        yVelocity: movementY,\n      };\n\n      return newState;\n    });\n  }\n\n  // Touch handlers\n\n  /* eslint-disable @typescript-eslint/no-use-before-define */\n  function handleTouchMove(e: TouchEvent) {\n    e.preventDefault();\n    handleMove(e.touches.item(0) as any);\n  }\n\n  function handleTouchStart(e: React.TouchEvent<HTMLElement>) {\n    // making sure we're not dragging the element when more than one finger press the screen\n    const { touches } = e;\n    if (touches.length > 1) {\n      return;\n    }\n\n    if (\n      ensureTargetIsContainer &&\n      containerRef &&\n      e.target !== containerRef.current\n    ) {\n      return;\n    }\n\n    window.addEventListener('touchmove', handleTouchMove, { passive: false });\n    window.addEventListener('touchend', handleTouchEnd);\n    window.addEventListener('touchcancel', handleTouchEnd);\n    handleDown(e.touches.item(0) as any);\n  }\n\n  function handleTouchEnd() {\n    window.removeEventListener('touchmove', handleTouchMove);\n    window.removeEventListener('touchend', handleTouchEnd);\n    window.removeEventListener('touchcancel', handleTouchEnd);\n    handleUp();\n  }\n\n  // Mouse handlers\n  function handleMouseDown(e: React.MouseEvent<HTMLElement>) {\n    if (\n      ensureTargetIsContainer &&\n      containerRef &&\n      e.target !== containerRef.current\n    ) {\n      return;\n    }\n\n    if (e.button === 0) {\n      window.addEventListener('mousemove', handleMove);\n      window.addEventListener('mouseup', handleMouseUp);\n      handleDown(e as any);\n    }\n  }\n\n  function handleMouseUp() {\n    window.removeEventListener('mousemove', handleMove);\n    window.removeEventListener('mouseup', handleMouseUp);\n    handleUp();\n  }\n  /* eslint-enable @typescript-eslint/no-use-before-define */\n\n  return {\n    onMouseDown: handleMouseDown,\n    onTouchStart: handleTouchStart,\n  };\n}\n\nexport const useGestureHandlers = (\n  containerRef: React.MutableRefObject<HTMLElement | null> | undefined,\n  onGesture: (e: GestureHandlersState) => void,\n  options: GestureHandlerOptions = {}\n) => {\n  const state = useRef({ ...initialGestureHandlersState });\n\n  const set = (\n    cb: (prevState: GestureHandlersState) => GestureHandlersState\n  ) => {\n    state.current = cb(state.current);\n    onGesture && onGesture(state.current);\n\n    return state.current;\n  };\n\n  const handlers = gestureHandlers(set, containerRef, options);\n\n  return { state: state.current, handlers };\n};\n"],"file":"useGestureHandlers.js"}
+{"version":3,"sources":["../../../src/hooks/useGestureHandlers.ts"],"names":["useRef","initialGestureHandlersState","target","x","xDelta","xDeltaPercent","xInitial","xPrev","xVelocity","y","yDelta","yDeltaPercent","yInitial","yPrev","yVelocity","startTime","down","scrollLocked","FRAMERATE_CONST","VELOCITY_DEPR_FACTOR","gestureHandlers","set","containerRef","options","ensureTargetIsContainer","minTouchDelta","handleUp","state","deltaTime","Date","now","calcVelocity","newState","handleDown","e","pageX","pageY","deltaSpace","prevVelocity","speed","depr","Math","min","handleMove","cancelable","preventDefault","getDeltaSum","currentPos","initialPos","prevPos","abs","current","width","offsetWidth","NaN","height","offsetHeight","handleTouchMove","touches","item","handleTouchStart","length","window","addEventListener","passive","handleTouchEnd","removeEventListener","handleMouseDown","button","handleMouseUp","onMouseDown","onTouchStart","useGestureHandlers","onGesture","cb","handlers"],"mappings":"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","sourcesContent":["import { useRef } from 'react';\nimport type * as React from 'react';\n\nexport interface GestureHandlersState {\n  target: null | EventTarget;\n  x: number;\n  xDelta: number;\n  xDeltaPercent: number;\n  xInitial: number;\n  xPrev: number;\n  xVelocity: number;\n  y: number;\n  yDelta: number;\n  yDeltaPercent: number;\n  yInitial: number;\n  yPrev: number;\n  yVelocity: number;\n  startTime: number;\n  down: boolean;\n  scrollLocked: boolean;\n}\n\ntype SetStateFunc<S> = (\n  state: (prevState: Readonly<S>) => S,\n  callback?: () => void\n) => void;\n\nexport interface GestureHandlersReturn {\n  onMouseDown: (e: React.MouseEvent<HTMLElement>) => void;\n  onTouchStart: (e: React.TouchEvent<HTMLElement>) => void;\n}\n\nexport interface GestureHandlerOptions {\n  ensureTargetIsContainer?: boolean;\n  minTouchDelta?: number;\n}\n\nexport const initialGestureHandlersState: GestureHandlersState = {\n  target: null,\n  x: 0,\n  xDelta: 0,\n  xDeltaPercent: 0,\n  xInitial: 0,\n  xPrev: 0,\n  xVelocity: 0,\n  y: 0,\n  yDelta: 0,\n  yDeltaPercent: 0,\n  yInitial: 0,\n  yPrev: 0,\n  yVelocity: 0,\n  startTime: 0,\n  down: false,\n  scrollLocked: false,\n};\n\nconst FRAMERATE_CONST = 1000 / 60; // 60 fps\nconst VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;\n\nexport function gestureHandlers(\n  set: SetStateFunc<GestureHandlersState>,\n  containerRef?: React.MutableRefObject<HTMLElement | null>,\n  options: GestureHandlerOptions = {}\n): GestureHandlersReturn {\n  const { ensureTargetIsContainer = false, minTouchDelta = 0 } = options;\n\n  // Common handlers\n  const handleUp = () => {\n    set((state: GestureHandlersState) => {\n      const deltaTime = Date.now() - state.startTime;\n      const xDelta = state.x - state.xInitial;\n      const yDelta = state.y - state.yInitial;\n      const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);\n      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);\n      const newState: GestureHandlersState = {\n        ...state,\n        xVelocity,\n        yVelocity,\n        target: null,\n        down: false,\n      };\n\n      return newState;\n    });\n  };\n\n  const handleDown = (e: MouseEvent) => {\n    const { target, pageX, pageY } = e;\n\n    set((state: GestureHandlersState) => {\n      const newState = {\n        ...state,\n        target,\n        x: pageX,\n        xDelta: 0,\n        xDeltaPercent: 0,\n        xVelocity: 0,\n        xInitial: pageX,\n        xPrev: pageX,\n        y: pageY,\n        yDelta: 0,\n        yDeltaPercent: 0,\n        yVelocity: 0,\n        yInitial: pageY,\n        yPrev: pageY,\n        startTime: Date.now(),\n        down: true,\n        scrollLocked: false,\n      };\n\n      return newState;\n    });\n  };\n\n  function calcVelocity(\n    deltaSpace: number,\n    deltaTime: number,\n    prevVelocity: number\n  ) {\n    if (deltaTime < 1) {\n      deltaTime = 1;\n    }\n    const speed = deltaSpace / deltaTime;\n    const depr = 0.5 + Math.min(deltaTime / VELOCITY_DEPR_FACTOR, 0.5);\n    return speed * depr + prevVelocity * (1 - depr);\n  }\n\n  function handleMove(e: MouseEvent) {\n    const { pageX, pageY } = e;\n    if (e.cancelable) {\n      // prevent drag & drop behaviour from browser\n      e.preventDefault && e.preventDefault();\n    }\n\n    set((state: GestureHandlersState) => {\n      function getDeltaSum(\n        currentPos: number,\n        initialPos: number,\n        prevPos: number\n      ): number {\n        if (\n          state.scrollLocked ||\n          Math.abs(currentPos - initialPos) >= minTouchDelta\n        ) {\n          state.scrollLocked = true;\n          return currentPos - prevPos;\n        }\n        return 0;\n      }\n\n      const target =\n        (containerRef && containerRef.current) || (e as any).target;\n\n      const deltaTime = Date.now() - state.startTime;\n\n      const width = target ? target.offsetWidth : NaN;\n      const xDelta = state.xDelta + getDeltaSum(pageX, state.xInitial, state.x);\n      const xDeltaPercent = (xDelta * 100) / width;\n      const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);\n\n      const height = target ? target.offsetHeight : NaN;\n      const yDelta = state.yDelta + getDeltaSum(pageY, state.yInitial, state.y);\n      const yDeltaPercent = (yDelta * 100) / height;\n      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);\n\n      const newState = {\n        ...state,\n        xDelta,\n        xDeltaPercent,\n        x: pageX,\n        xPrev: state.x,\n        xVelocity,\n        yDelta,\n        yDeltaPercent,\n        y: pageY,\n        yPrev: state.y,\n        yVelocity,\n      };\n\n      return newState;\n    });\n  }\n\n  // Touch handlers\n\n  /* eslint-disable @typescript-eslint/no-use-before-define */\n  function handleTouchMove(e: TouchEvent) {\n    if (e.cancelable) {\n      // prevent drag & drop behaviour from browser\n      e.preventDefault();\n    }\n    handleMove(e.touches.item(0) as any);\n  }\n\n  function handleTouchStart(e: React.TouchEvent<HTMLElement>) {\n    // making sure we're not dragging the element when more than one finger press the screen\n    const { touches } = e;\n    if (touches.length > 1) {\n      return;\n    }\n\n    if (\n      ensureTargetIsContainer &&\n      containerRef &&\n      e.target !== containerRef.current\n    ) {\n      return;\n    }\n\n    window.addEventListener('touchmove', handleTouchMove, { passive: false });\n    window.addEventListener('touchend', handleTouchEnd);\n    window.addEventListener('touchcancel', handleTouchEnd);\n    handleDown(e.touches.item(0) as any);\n  }\n\n  function handleTouchEnd() {\n    window.removeEventListener('touchmove', handleTouchMove);\n    window.removeEventListener('touchend', handleTouchEnd);\n    window.removeEventListener('touchcancel', handleTouchEnd);\n    handleUp();\n  }\n\n  // Mouse handlers\n  function handleMouseDown(e: React.MouseEvent<HTMLElement>) {\n    if (\n      ensureTargetIsContainer &&\n      containerRef &&\n      e.target !== containerRef.current\n    ) {\n      return;\n    }\n\n    if (e.button === 0) {\n      window.addEventListener('mousemove', handleMove);\n      window.addEventListener('mouseup', handleMouseUp);\n      handleDown(e as any);\n    }\n  }\n\n  function handleMouseUp() {\n    window.removeEventListener('mousemove', handleMove);\n    window.removeEventListener('mouseup', handleMouseUp);\n    handleUp();\n  }\n  /* eslint-enable @typescript-eslint/no-use-before-define */\n\n  return {\n    onMouseDown: handleMouseDown,\n    onTouchStart: handleTouchStart,\n  };\n}\n\nexport const useGestureHandlers = (\n  containerRef: React.MutableRefObject<HTMLElement | null> | undefined,\n  onGesture: (e: GestureHandlersState) => void,\n  options: GestureHandlerOptions = {}\n) => {\n  const state = useRef({ ...initialGestureHandlersState });\n\n  const set = (\n    cb: (prevState: GestureHandlersState) => GestureHandlersState\n  ) => {\n    state.current = cb(state.current);\n    onGesture && onGesture(state.current);\n\n    return state.current;\n  };\n\n  const handlers = gestureHandlers(set, containerRef, options);\n\n  return { state: state.current, handlers };\n};\n"],"file":"useGestureHandlers.js"}