@os-design/drag-sort 1.0.2 → 1.0.3

package/dist/cjs/Draggable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Draggable.tsx"],"names":["Draggable","index","children","ref","nodeRef","style","setStyle","nodeClassName","registerNode","deregisterNode","onMouseDown","onTouchStart","current","mouseDownHandler","e","touchStartHandler","handlers"],"mappings":";;;;;;;;;AAAA;;AAUA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAuCA,IAAMA,SAAmC,GAAG,SAAtCA,SAAsC,OAAyB;AAAA,MAAtBC,KAAsB,QAAtBA,KAAsB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnE;AACA,MAAMC,GAAG,GAAG,mBAA8B,IAA9B,CAAZ,CAFmE,CAGnE;;AACA,MAAMC,OAAO,GAAG,mBAAa,IAAb,CAAhB,CAJmE,CAKnE;;AACA,kBAA0B,qBAAwB,EAAxB,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AAEA,wBAA0B,kCAA1B;AAAA,MAAQC,aAAR,mBAAQA,aAAR;;AACA,sBACE,gCADF;AAAA,MAAQC,YAAR,iBAAQA,YAAR;AAAA,MAAsBC,cAAtB,iBAAsBA,cAAtB;AAAA,MAAsCC,WAAtC,iBAAsCA,WAAtC;AAAA,MAAmDC,YAAnD,iBAAmDA,YAAnD,CATmE,CAYnE;;;AACA,wBAAU,YAAM;AACdP,IAAAA,OAAO,CAACQ,OAAR,GAAkBJ,YAAY,CAAC;AAAEL,MAAAA,GAAG,EAAHA,GAAF;AAAOG,MAAAA,QAAQ,EAARA,QAAP;AAAiBL,MAAAA,KAAK,EAALA;AAAjB,KAAD,CAA9B;AACA,WAAO,YAAM;AACX,UAAI,CAACG,OAAO,CAACQ,OAAb,EAAsB;AACtBH,MAAAA,cAAc,CAACL,OAAO,CAACQ,OAAT,CAAd;AACAR,MAAAA,OAAO,CAACQ,OAAR,GAAkB,IAAlB;AACD,KAJD;AAKD,GAPD,EAOG,CAACH,cAAD,EAAiBR,KAAjB,EAAwBO,YAAxB,CAPH,EAbmE,CAsBnE;;AACA,sCAAmBL,GAAnB,EAAwBI,aAAxB,EAvBmE,CAyBnE;;AACA,MAAMM,gBAAgB,GAAG,wBACvB,UAACC,CAAD,EAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBF,IAAAA,WAAW,CAACI,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAX;AACD,GAJsB,EAKvB,CAACF,WAAD,CALuB,CAAzB;AAOA,MAAMK,iBAAiB,GAAG,wBACxB,UAACD,CAAD,EAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBD,IAAAA,YAAY,CAACG,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAZ;AACD,GAJuB,EAKxB,CAACD,YAAD,CALwB,CAA1B;AAQA,MAAMK,QAAQ,GAAG,+BAAc;AAC7BN,IAAAA,WAAW,EAAEG,gBADgB;AAE7BF,IAAAA,YAAY,EAAEI;AAFe,GAAd,CAAjB;AAKA,sBAAO,kEAAGb,QAAQ,CAAC;AAAEC,IAAAA,GAAG,EAAHA,GAAF;AAAOE,IAAAA,KAAK,EAALA,KAAP;AAAcW,IAAAA,QAAQ,EAARA;AAAd,GAAD,CAAX,CAAP;AACD,CA/CD;;eAiDehB,S","sourcesContent":["import React, {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport useMemoObject from '@os-design/use-memo-object';\nimport { Node } from './utils/NodeList';\nimport useDroppable from './utils/useDroppable';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useAppendClassName from './utils/useAppendClassName';\n\nexport interface DraggableHandlers {\n  /**\n   * The handler that should be called when the mouse down event occurs.\n   */\n  onMouseDown: (e: MouseEvent) => void;\n  /**\n   * The handler that should be called when the touch start event occurs.\n   */\n  onTouchStart: (e: TouchEvent) => void;\n}\n\nexport interface DraggableChildrenProps {\n  /**\n   * The reference to the draggable list item.\n   */\n  ref: RefObject<HTMLDivElement>;\n  /**\n   * Additional styles for moving the list item.\n   */\n  style: CSSProperties;\n  /**\n   * The handlers to catch events when the user starts dragging the list item.\n   */\n  handlers: DraggableHandlers;\n}\n\nexport interface DraggableProps {\n  /**\n   * The index of the draggable node.\n   */\n  index: number;\n  /**\n   * The function that renders the draggable node.\n   */\n  children: (props: DraggableChildrenProps) => React.ReactNode;\n}\n\nconst Draggable: React.FC<DraggableProps> = ({ index, children }) => {\n  // The reference to the list item\n  const ref = useRef<HTMLDivElement | null>(null);\n  // The reference to the node containing the refs to the prev and next nodes\n  const nodeRef = useRef<Node>(null);\n  // Additional styles for moving the list item\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  const { nodeClassName } = useDragAndDrop();\n  const { registerNode, deregisterNode, onMouseDown, onTouchStart } =\n    useDroppable();\n\n  // Register the node in the list\n  useEffect(() => {\n    nodeRef.current = registerNode({ ref, setStyle, index });\n    return () => {\n      if (!nodeRef.current) return;\n      deregisterNode(nodeRef.current);\n      nodeRef.current = null;\n    };\n  }, [deregisterNode, index, registerNode]);\n\n  // Set the class name for the node to apply the transition style (see the DragAndDrop container)\n  useAppendClassName(ref, nodeClassName);\n\n  // Handlers that determine whether a user clicks on the node\n  const mouseDownHandler = useCallback(\n    (e: MouseEvent) => {\n      if (!nodeRef.current) return;\n      onMouseDown(e, nodeRef.current);\n    },\n    [onMouseDown]\n  );\n  const touchStartHandler = useCallback(\n    (e: TouchEvent) => {\n      if (!nodeRef.current) return;\n      onTouchStart(e, nodeRef.current);\n    },\n    [onTouchStart]\n  );\n\n  const handlers = useMemoObject({\n    onMouseDown: mouseDownHandler,\n    onTouchStart: touchStartHandler,\n  });\n\n  return <>{children({ ref, style, handlers })}</>;\n};\n\nexport default Draggable;\n"],"file":"Draggable.js"}
+{"version":3,"sources":["../../src/Draggable.tsx"],"names":["Draggable","index","children","ref","nodeRef","style","setStyle","nodeClassName","registerNode","deregisterNode","onMouseDown","onTouchStart","current","mouseDownHandler","e","touchStartHandler","handlers"],"mappings":";;;;;;;;;AAAA;;AAUA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAuCA,IAAMA,SAAmC,GAAG,SAAtCA,SAAsC,OAAyB;AAAA,MAAtBC,KAAsB,QAAtBA,KAAsB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACnE;AACA,MAAMC,GAAG,GAAG,mBAA8B,IAA9B,CAAZ,CAFmE,CAGnE;;AACA,MAAMC,OAAO,GAAG,mBAAa,IAAb,CAAhB,CAJmE,CAKnE;;AACA,kBAA0B,qBAAwB,EAAxB,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AAEA,wBAA0B,kCAA1B;AAAA,MAAQC,aAAR,mBAAQA,aAAR;;AACA,sBACE,gCADF;AAAA,MAAQC,YAAR,iBAAQA,YAAR;AAAA,MAAsBC,cAAtB,iBAAsBA,cAAtB;AAAA,MAAsCC,WAAtC,iBAAsCA,WAAtC;AAAA,MAAmDC,YAAnD,iBAAmDA,YAAnD,CATmE,CAYnE;;;AACA,wBAAU,YAAM;AACdP,IAAAA,OAAO,CAACQ,OAAR,GAAkBJ,YAAY,CAAC;AAAEL,MAAAA,GAAG,EAAHA,GAAF;AAAOG,MAAAA,QAAQ,EAARA,QAAP;AAAiBL,MAAAA,KAAK,EAALA;AAAjB,KAAD,CAA9B;AACA,WAAO,YAAM;AACX,UAAI,CAACG,OAAO,CAACQ,OAAb,EAAsB;AACtBH,MAAAA,cAAc,CAACL,OAAO,CAACQ,OAAT,CAAd;AACAR,MAAAA,OAAO,CAACQ,OAAR,GAAkB,IAAlB;AACD,KAJD;AAKD,GAPD,EAOG,CAACH,cAAD,EAAiBR,KAAjB,EAAwBO,YAAxB,CAPH,EAbmE,CAsBnE;;AACA,sCAAmBL,GAAnB,EAAwBI,aAAxB,EAvBmE,CAyBnE;;AACA,MAAMM,gBAAgB,GAAG,wBACvB,UAACC,CAAD,EAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBF,IAAAA,WAAW,CAACI,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAX;AACD,GAJsB,EAKvB,CAACF,WAAD,CALuB,CAAzB;AAOA,MAAMK,iBAAiB,GAAG,wBACxB,UAACD,CAAD,EAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBD,IAAAA,YAAY,CAACG,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAZ;AACD,GAJuB,EAKxB,CAACD,YAAD,CALwB,CAA1B;AAQA,MAAMK,QAAQ,GAAG,+BAAc;AAC7BN,IAAAA,WAAW,EAAEG,gBADgB;AAE7BF,IAAAA,YAAY,EAAEI;AAFe,GAAd,CAAjB;AAKA,sBAAO,kEAAGb,QAAQ,CAAC;AAAEC,IAAAA,GAAG,EAAHA,GAAF;AAAOE,IAAAA,KAAK,EAALA,KAAP;AAAcW,IAAAA,QAAQ,EAARA;AAAd,GAAD,CAAX,CAAP;AACD,CA/CD;;eAiDehB,S","sourcesContent":["import React, {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport useMemoObject from '@os-design/use-memo-object';\nimport { Node } from './utils/NodeList';\nimport useDroppable from './utils/useDroppable';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useAppendClassName from './utils/useAppendClassName';\n\nexport interface DraggableHandlers {\n  /**\n   * The handler that should be called when the mouse down event occurs.\n   */\n  onMouseDown: (e: MouseEvent) => void;\n  /**\n   * The handler that should be called when the touch start event occurs.\n   */\n  onTouchStart: (e: TouchEvent) => void;\n}\n\nexport interface DraggableChildrenProps {\n  /**\n   * The reference to the draggable list item.\n   */\n  ref: RefObject<any>; // eslint-disable-line @typescript-eslint/no-explicit-any\n  /**\n   * Additional styles for moving the list item.\n   */\n  style: CSSProperties;\n  /**\n   * The handlers to catch events when the user starts dragging the list item.\n   */\n  handlers: DraggableHandlers;\n}\n\nexport interface DraggableProps {\n  /**\n   * The index of the draggable node.\n   */\n  index: number;\n  /**\n   * The function that renders the draggable node.\n   */\n  children: (props: DraggableChildrenProps) => React.ReactNode;\n}\n\nconst Draggable: React.FC<DraggableProps> = ({ index, children }) => {\n  // The reference to the list item\n  const ref = useRef<HTMLDivElement | null>(null);\n  // The reference to the node containing the refs to the prev and next nodes\n  const nodeRef = useRef<Node>(null);\n  // Additional styles for moving the list item\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  const { nodeClassName } = useDragAndDrop();\n  const { registerNode, deregisterNode, onMouseDown, onTouchStart } =\n    useDroppable();\n\n  // Register the node in the list\n  useEffect(() => {\n    nodeRef.current = registerNode({ ref, setStyle, index });\n    return () => {\n      if (!nodeRef.current) return;\n      deregisterNode(nodeRef.current);\n      nodeRef.current = null;\n    };\n  }, [deregisterNode, index, registerNode]);\n\n  // Set the class name for the node to apply the transition style (see the DragAndDrop container)\n  useAppendClassName(ref, nodeClassName);\n\n  // Handlers that determine whether a user clicks on the node\n  const mouseDownHandler = useCallback(\n    (e: MouseEvent) => {\n      if (!nodeRef.current) return;\n      onMouseDown(e, nodeRef.current);\n    },\n    [onMouseDown]\n  );\n  const touchStartHandler = useCallback(\n    (e: TouchEvent) => {\n      if (!nodeRef.current) return;\n      onTouchStart(e, nodeRef.current);\n    },\n    [onTouchStart]\n  );\n\n  const handlers = useMemoObject({\n    onMouseDown: mouseDownHandler,\n    onTouchStart: touchStartHandler,\n  });\n\n  return <>{children({ ref, style, handlers })}</>;\n};\n\nexport default Draggable;\n"],"file":"Draggable.js"}

package/dist/esm/Draggable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Draggable.tsx"],"names":["React","useCallback","useEffect","useRef","useState","useMemoObject","useDroppable","useDragAndDrop","useAppendClassName","Draggable","index","children","ref","nodeRef","style","setStyle","nodeClassName","registerNode","deregisterNode","onMouseDown","onTouchStart","current","mouseDownHandler","e","touchStartHandler","handlers"],"mappings":"AAAA,OAAOA,KAAP,IAGEC,WAHF,EAIEC,SAJF,EAKEC,MALF,EAMEC,QANF,QASO,OATP;AAUA,OAAOC,aAAP,MAA0B,4BAA1B;AAEA,OAAOC,YAAP,MAAyB,sBAAzB;AACA,OAAOC,cAAP,MAA2B,wBAA3B;AACA,OAAOC,kBAAP,MAA+B,4BAA/B;;AAuCA,MAAMC,SAAmC,GAAG,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KAAyB;AACnE;AACA,QAAMC,GAAG,GAAGT,MAAM,CAAwB,IAAxB,CAAlB,CAFmE,CAGnE;;AACA,QAAMU,OAAO,GAAGV,MAAM,CAAO,IAAP,CAAtB,CAJmE,CAKnE;;AACA,QAAM,CAACW,KAAD,EAAQC,QAAR,IAAoBX,QAAQ,CAAgB,EAAhB,CAAlC;AAEA,QAAM;AAAEY,IAAAA;AAAF,MAAoBT,cAAc,EAAxC;AACA,QAAM;AAAEU,IAAAA,YAAF;AAAgBC,IAAAA,cAAhB;AAAgCC,IAAAA,WAAhC;AAA6CC,IAAAA;AAA7C,MACJd,YAAY,EADd,CATmE,CAYnE;;AACAJ,EAAAA,SAAS,CAAC,MAAM;AACdW,IAAAA,OAAO,CAACQ,OAAR,GAAkBJ,YAAY,CAAC;AAAEL,MAAAA,GAAF;AAAOG,MAAAA,QAAP;AAAiBL,MAAAA;AAAjB,KAAD,CAA9B;AACA,WAAO,MAAM;AACX,UAAI,CAACG,OAAO,CAACQ,OAAb,EAAsB;AACtBH,MAAAA,cAAc,CAACL,OAAO,CAACQ,OAAT,CAAd;AACAR,MAAAA,OAAO,CAACQ,OAAR,GAAkB,IAAlB;AACD,KAJD;AAKD,GAPQ,EAON,CAACH,cAAD,EAAiBR,KAAjB,EAAwBO,YAAxB,CAPM,CAAT,CAbmE,CAsBnE;;AACAT,EAAAA,kBAAkB,CAACI,GAAD,EAAMI,aAAN,CAAlB,CAvBmE,CAyBnE;;AACA,QAAMM,gBAAgB,GAAGrB,WAAW,CACjCsB,CAAD,IAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBF,IAAAA,WAAW,CAACI,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAX;AACD,GAJiC,EAKlC,CAACF,WAAD,CALkC,CAApC;AAOA,QAAMK,iBAAiB,GAAGvB,WAAW,CAClCsB,CAAD,IAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBD,IAAAA,YAAY,CAACG,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAZ;AACD,GAJkC,EAKnC,CAACD,YAAD,CALmC,CAArC;AAQA,QAAMK,QAAQ,GAAGpB,aAAa,CAAC;AAC7Bc,IAAAA,WAAW,EAAEG,gBADgB;AAE7BF,IAAAA,YAAY,EAAEI;AAFe,GAAD,CAA9B;AAKA,sBAAO,0CAAGb,QAAQ,CAAC;AAAEC,IAAAA,GAAF;AAAOE,IAAAA,KAAP;AAAcW,IAAAA;AAAd,GAAD,CAAX,CAAP;AACD,CA/CD;;AAiDA,eAAehB,SAAf","sourcesContent":["import React, {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport useMemoObject from '@os-design/use-memo-object';\nimport { Node } from './utils/NodeList';\nimport useDroppable from './utils/useDroppable';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useAppendClassName from './utils/useAppendClassName';\n\nexport interface DraggableHandlers {\n  /**\n   * The handler that should be called when the mouse down event occurs.\n   */\n  onMouseDown: (e: MouseEvent) => void;\n  /**\n   * The handler that should be called when the touch start event occurs.\n   */\n  onTouchStart: (e: TouchEvent) => void;\n}\n\nexport interface DraggableChildrenProps {\n  /**\n   * The reference to the draggable list item.\n   */\n  ref: RefObject<HTMLDivElement>;\n  /**\n   * Additional styles for moving the list item.\n   */\n  style: CSSProperties;\n  /**\n   * The handlers to catch events when the user starts dragging the list item.\n   */\n  handlers: DraggableHandlers;\n}\n\nexport interface DraggableProps {\n  /**\n   * The index of the draggable node.\n   */\n  index: number;\n  /**\n   * The function that renders the draggable node.\n   */\n  children: (props: DraggableChildrenProps) => React.ReactNode;\n}\n\nconst Draggable: React.FC<DraggableProps> = ({ index, children }) => {\n  // The reference to the list item\n  const ref = useRef<HTMLDivElement | null>(null);\n  // The reference to the node containing the refs to the prev and next nodes\n  const nodeRef = useRef<Node>(null);\n  // Additional styles for moving the list item\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  const { nodeClassName } = useDragAndDrop();\n  const { registerNode, deregisterNode, onMouseDown, onTouchStart } =\n    useDroppable();\n\n  // Register the node in the list\n  useEffect(() => {\n    nodeRef.current = registerNode({ ref, setStyle, index });\n    return () => {\n      if (!nodeRef.current) return;\n      deregisterNode(nodeRef.current);\n      nodeRef.current = null;\n    };\n  }, [deregisterNode, index, registerNode]);\n\n  // Set the class name for the node to apply the transition style (see the DragAndDrop container)\n  useAppendClassName(ref, nodeClassName);\n\n  // Handlers that determine whether a user clicks on the node\n  const mouseDownHandler = useCallback(\n    (e: MouseEvent) => {\n      if (!nodeRef.current) return;\n      onMouseDown(e, nodeRef.current);\n    },\n    [onMouseDown]\n  );\n  const touchStartHandler = useCallback(\n    (e: TouchEvent) => {\n      if (!nodeRef.current) return;\n      onTouchStart(e, nodeRef.current);\n    },\n    [onTouchStart]\n  );\n\n  const handlers = useMemoObject({\n    onMouseDown: mouseDownHandler,\n    onTouchStart: touchStartHandler,\n  });\n\n  return <>{children({ ref, style, handlers })}</>;\n};\n\nexport default Draggable;\n"],"file":"Draggable.js"}
+{"version":3,"sources":["../../src/Draggable.tsx"],"names":["React","useCallback","useEffect","useRef","useState","useMemoObject","useDroppable","useDragAndDrop","useAppendClassName","Draggable","index","children","ref","nodeRef","style","setStyle","nodeClassName","registerNode","deregisterNode","onMouseDown","onTouchStart","current","mouseDownHandler","e","touchStartHandler","handlers"],"mappings":"AAAA,OAAOA,KAAP,IAGEC,WAHF,EAIEC,SAJF,EAKEC,MALF,EAMEC,QANF,QASO,OATP;AAUA,OAAOC,aAAP,MAA0B,4BAA1B;AAEA,OAAOC,YAAP,MAAyB,sBAAzB;AACA,OAAOC,cAAP,MAA2B,wBAA3B;AACA,OAAOC,kBAAP,MAA+B,4BAA/B;;AAuCA,MAAMC,SAAmC,GAAG,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KAAyB;AACnE;AACA,QAAMC,GAAG,GAAGT,MAAM,CAAwB,IAAxB,CAAlB,CAFmE,CAGnE;;AACA,QAAMU,OAAO,GAAGV,MAAM,CAAO,IAAP,CAAtB,CAJmE,CAKnE;;AACA,QAAM,CAACW,KAAD,EAAQC,QAAR,IAAoBX,QAAQ,CAAgB,EAAhB,CAAlC;AAEA,QAAM;AAAEY,IAAAA;AAAF,MAAoBT,cAAc,EAAxC;AACA,QAAM;AAAEU,IAAAA,YAAF;AAAgBC,IAAAA,cAAhB;AAAgCC,IAAAA,WAAhC;AAA6CC,IAAAA;AAA7C,MACJd,YAAY,EADd,CATmE,CAYnE;;AACAJ,EAAAA,SAAS,CAAC,MAAM;AACdW,IAAAA,OAAO,CAACQ,OAAR,GAAkBJ,YAAY,CAAC;AAAEL,MAAAA,GAAF;AAAOG,MAAAA,QAAP;AAAiBL,MAAAA;AAAjB,KAAD,CAA9B;AACA,WAAO,MAAM;AACX,UAAI,CAACG,OAAO,CAACQ,OAAb,EAAsB;AACtBH,MAAAA,cAAc,CAACL,OAAO,CAACQ,OAAT,CAAd;AACAR,MAAAA,OAAO,CAACQ,OAAR,GAAkB,IAAlB;AACD,KAJD;AAKD,GAPQ,EAON,CAACH,cAAD,EAAiBR,KAAjB,EAAwBO,YAAxB,CAPM,CAAT,CAbmE,CAsBnE;;AACAT,EAAAA,kBAAkB,CAACI,GAAD,EAAMI,aAAN,CAAlB,CAvBmE,CAyBnE;;AACA,QAAMM,gBAAgB,GAAGrB,WAAW,CACjCsB,CAAD,IAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBF,IAAAA,WAAW,CAACI,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAX;AACD,GAJiC,EAKlC,CAACF,WAAD,CALkC,CAApC;AAOA,QAAMK,iBAAiB,GAAGvB,WAAW,CAClCsB,CAAD,IAAmB;AACjB,QAAI,CAACV,OAAO,CAACQ,OAAb,EAAsB;AACtBD,IAAAA,YAAY,CAACG,CAAD,EAAIV,OAAO,CAACQ,OAAZ,CAAZ;AACD,GAJkC,EAKnC,CAACD,YAAD,CALmC,CAArC;AAQA,QAAMK,QAAQ,GAAGpB,aAAa,CAAC;AAC7Bc,IAAAA,WAAW,EAAEG,gBADgB;AAE7BF,IAAAA,YAAY,EAAEI;AAFe,GAAD,CAA9B;AAKA,sBAAO,0CAAGb,QAAQ,CAAC;AAAEC,IAAAA,GAAF;AAAOE,IAAAA,KAAP;AAAcW,IAAAA;AAAd,GAAD,CAAX,CAAP;AACD,CA/CD;;AAiDA,eAAehB,SAAf","sourcesContent":["import React, {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  MouseEvent,\n  TouchEvent,\n} from 'react';\nimport useMemoObject from '@os-design/use-memo-object';\nimport { Node } from './utils/NodeList';\nimport useDroppable from './utils/useDroppable';\nimport useDragAndDrop from './utils/useDragAndDrop';\nimport useAppendClassName from './utils/useAppendClassName';\n\nexport interface DraggableHandlers {\n  /**\n   * The handler that should be called when the mouse down event occurs.\n   */\n  onMouseDown: (e: MouseEvent) => void;\n  /**\n   * The handler that should be called when the touch start event occurs.\n   */\n  onTouchStart: (e: TouchEvent) => void;\n}\n\nexport interface DraggableChildrenProps {\n  /**\n   * The reference to the draggable list item.\n   */\n  ref: RefObject<any>; // eslint-disable-line @typescript-eslint/no-explicit-any\n  /**\n   * Additional styles for moving the list item.\n   */\n  style: CSSProperties;\n  /**\n   * The handlers to catch events when the user starts dragging the list item.\n   */\n  handlers: DraggableHandlers;\n}\n\nexport interface DraggableProps {\n  /**\n   * The index of the draggable node.\n   */\n  index: number;\n  /**\n   * The function that renders the draggable node.\n   */\n  children: (props: DraggableChildrenProps) => React.ReactNode;\n}\n\nconst Draggable: React.FC<DraggableProps> = ({ index, children }) => {\n  // The reference to the list item\n  const ref = useRef<HTMLDivElement | null>(null);\n  // The reference to the node containing the refs to the prev and next nodes\n  const nodeRef = useRef<Node>(null);\n  // Additional styles for moving the list item\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  const { nodeClassName } = useDragAndDrop();\n  const { registerNode, deregisterNode, onMouseDown, onTouchStart } =\n    useDroppable();\n\n  // Register the node in the list\n  useEffect(() => {\n    nodeRef.current = registerNode({ ref, setStyle, index });\n    return () => {\n      if (!nodeRef.current) return;\n      deregisterNode(nodeRef.current);\n      nodeRef.current = null;\n    };\n  }, [deregisterNode, index, registerNode]);\n\n  // Set the class name for the node to apply the transition style (see the DragAndDrop container)\n  useAppendClassName(ref, nodeClassName);\n\n  // Handlers that determine whether a user clicks on the node\n  const mouseDownHandler = useCallback(\n    (e: MouseEvent) => {\n      if (!nodeRef.current) return;\n      onMouseDown(e, nodeRef.current);\n    },\n    [onMouseDown]\n  );\n  const touchStartHandler = useCallback(\n    (e: TouchEvent) => {\n      if (!nodeRef.current) return;\n      onTouchStart(e, nodeRef.current);\n    },\n    [onTouchStart]\n  );\n\n  const handlers = useMemoObject({\n    onMouseDown: mouseDownHandler,\n    onTouchStart: touchStartHandler,\n  });\n\n  return <>{children({ ref, style, handlers })}</>;\n};\n\nexport default Draggable;\n"],"file":"Draggable.js"}

package/dist/types/Draggable.d.ts

@@ -4,7 +4,7 @@ export interface DraggableHandlers {
     onTouchStart: (e: TouchEvent) => void;
 }
 export interface DraggableChildrenProps {
-    ref: RefObject<HTMLDivElement>;
+    ref: RefObject<any>;
     style: CSSProperties;
     handlers: DraggableHandlers;
 }

package/dist/types/Draggable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../src/Draggable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,SAAS,EAKT,UAAU,EACV,UAAU,EACX,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,iBAAiB;IAIhC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAIrC,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,sBAAsB;IAIrC,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAI/B,KAAK,EAAE,aAAa,CAAC;IAIrB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAI7B,KAAK,EAAE,MAAM,CAAC;IAId,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+CvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Draggable.d.ts","sourceRoot":"","sources":["../../src/Draggable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,SAAS,EAKT,UAAU,EACV,UAAU,EACX,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,iBAAiB;IAIhC,WAAW,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAIrC,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,sBAAsB;IAIrC,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAIpB,KAAK,EAAE,aAAa,CAAC;IAIrB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAI7B,KAAK,EAAE,MAAM,CAAC;IAId,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+CvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/drag-sort",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -45,5 +45,5 @@
     "react": ">=17",
     "react-dom": ">=17"
   },
-  "gitHead": "218555e8ae76d6ff1a6013672f3192a516b24cb4"
+  "gitHead": "dcf8b998828c61b71e1ab3d25e24c6fe0856f6aa"
 }