Nested horizontal and vertical in same list

package.json

@@ -25,8 +25,6 @@
     "README.md"
   ],
   "main": "lib/index.js",
-  "bin": "",
-  "man": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/jagaapple/react-sortful.git"
@@ -48,7 +46,7 @@
   },
   "config": {},
   "dependencies": {
-    "react-use-gesture": "^7.0.4"
+    "react-use-gesture": "^7.0.15"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",

src/drag-handle.component.tsx

@@ -2,41 +2,64 @@ import * as React from "react";
 import { useGesture } from "react-use-gesture";
 
 import { ItemContext } from "./item";
+import { UseGestureConfig, UseGestureEvent } from "react-use-gesture/dist/types";
 
 type Props = {
   className?: string;
   children: React.ReactNode;
+  /**
+   * Specify a react-use-gesture config object to use for specifying the drag.
+   */
+  useGestureConfig?: UseGestureConfig;
+  /**
+   * If you want to do something on click or on tap, specify this option.
+   */
+  onTap?: (event: UseGestureEvent) => void;
 };
 
 export const DragHandleComponent = (props: Props) => {
   const itemContext = React.useContext(ItemContext);
 
+  const useGestureConfig: UseGestureConfig = { ...(props.useGestureConfig || {}) };
+  if (props.onTap) {
+    useGestureConfig.drag = useGestureConfig.drag || {};
+    useGestureConfig.drag.filterTaps = true;
+  }
+
   // Checks `props.children` has one React node.
   React.useEffect(() => {
     React.Children.only(props.children);
   }, [props.children]);
 
-  const draggableBinder = useGesture({
-    onDragStart: (state: any) => {
-      if (itemContext.isLocked) return;
+  const draggableBinder = useGesture(
+    {
+      onDragStart: (state: any) => {
+        if (itemContext.isLocked) return;
 
-      const event: React.SyntheticEvent = state.event;
-      event.persist();
-      event.stopPropagation();
+        const event: React.SyntheticEvent = state.event;
+        event?.persist?.();
+        event?.stopPropagation?.();
 
-      itemContext.dragHandlers.onDragStart();
-    },
-    onDrag: ({ down, movement }) => {
-      if (itemContext.isLocked) return;
+        itemContext.dragHandlers.onDragStart();
+      },
+      onDrag: ({ down, movement, tap, event }) => {
+        if (tap && props.onTap) {
+          props.onTap(event as any);
+          return;
+        }
 
-      itemContext.dragHandlers.onDrag(down, movement);
-    },
-    onDragEnd: () => {
-      if (itemContext.isLocked) return;
+        if (itemContext.isLocked) return;
 
-      itemContext.dragHandlers.onDragEnd();
+        itemContext.dragHandlers.onDrag(down, movement);
+      },
+      onDragEnd: () => {
+        if (itemContext.isLocked) return;
+
+        itemContext.dragHandlers.onDragEnd();
+      },
     },
-  });
+    useGestureConfig,
+  );
 
   return (
     <div className={props.className} {...draggableBinder()}>