@os-design/drag-sort 1.0.45 → 1.0.47

package/dist/Droppable.d.ts

@@ -5,12 +5,12 @@ export interface DroppableChildrenProps {
      * The reference to the list.
      * If a virtual list is used, pass it to the outerRef prop.
      */
-    ref: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement | null>;
     /**
      * The reference to the container inside the virtual list.
      * Pass it to the innerRef prop.
      */
-    innerRef: RefObject<HTMLDivElement>;
+    innerRef: RefObject<HTMLDivElement | null>;
 }
 export interface DroppableProps {
     /**

package/dist/Droppable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../src/Droppable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAiB,EAGf,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAK7B,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC/B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,iBAAiB,EAAE,iBAAiB,CAAC;IACrC;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuFvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../src/Droppable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAiB,EAGf,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAK7B,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACtC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC5C;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,iBAAiB,EAAE,iBAAiB,CAAC;IACrC;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA8EvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/Droppable.js

@@ -1,5 +1,5 @@
 import useMemoObject from '@os-design/use-memo-object';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import NodeList from './utils/NodeList.js';
 import useDragAndDrop from './utils/useDragAndDrop.js';
 import { DroppableContext } from './utils/useDroppable.js';
@@ -55,18 +55,18 @@ const Droppable = ({
     const listId = listRef.current.id;
     return () => deregisterList(listId);
   }, [deregisterList, registerList]);
-  const registerNode = useCallback(props => listRef.current.add(props), []);
-  const deregisterNode = useCallback(node => {
+  const registerNode = props => listRef.current.add(props);
+  const deregisterNode = node => {
     listRef.current.remove(node);
-  }, []);
+  };
 
   // Handlers that determine whether a user clicks on the node
-  const mouseDownHandler = useCallback((e, node) => {
+  const mouseDownHandler = (e, node) => {
     onMouseDown(e, listRef.current, node);
-  }, [onMouseDown]);
-  const touchStartHandler = useCallback((e, node) => {
+  };
+  const touchStartHandler = (e, node) => {
     onTouchStart(e, listRef.current, node);
-  }, [onTouchStart]);
+  };
   const droppableContext = useMemoObject({
     registerNode,
     deregisterNode,

package/dist/utils/NodeList.d.ts

@@ -2,7 +2,7 @@ import React, { type CSSProperties, type RefObject } from 'react';
 export type Node = [Node, Node, RefObject<any>, (style: CSSProperties) => void, number, string] | null;
 export type ExistingNode = Exclude<Node, null>;
 export interface NodeProps {
-    ref: React.MutableRefObject<any>;
+    ref: React.RefObject<any>;
     setStyle: (style: CSSProperties) => void;
     index: number;
     id: string;
@@ -24,8 +24,8 @@ interface RenderDraggedNodeProps {
 export type RenderDraggedNode = (props: RenderDraggedNodeProps) => React.ReactNode;
 interface InitProps {
     id: string;
-    ref: RefObject<HTMLDivElement>;
-    innerRef: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement | null>;
+    innerRef: RefObject<HTMLDivElement | null>;
     horizontal: boolean;
     renderDraggedNode: RenderDraggedNode;
 }
@@ -41,12 +41,12 @@ declare class NodeList {
     /**
      * The ref to the list.
      */
-    ref: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement | null>;
     /**
      * The inner ref to the list.
      * Used by the virtual list.
      */
-    innerRef: RefObject<HTMLDivElement>;
+    innerRef: RefObject<HTMLDivElement | null>;
     /**
      * Whether the list is horizontal.
      */

package/dist/utils/NodeList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeList.d.ts","sourceRoot":"","sources":["../../src/utils/NodeList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,MAAM,MAAM,IAAI,GACZ,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,GAC5E,IAAI,CAAC;AAET,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAE/C,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,sBAAsB;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,KAAK,EAAE,sBAAsB,KAC1B,KAAK,CAAC,SAAS,CAAC;AAErB,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED;;;GAGG;AACH,cAAM,QAAQ;IACZ;;OAEG;IACI,EAAE,EAAE,MAAM,CAAC;IAElB;;OAEG;IACI,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAEtC;;;OAGG;IACI,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAE3C;;OAEG;IACI,UAAU,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACI,iBAAiB,EAAE,iBAAiB,CAAC;IAE5C;;OAEG;IACH,OAAO,CAAC,IAAI,CAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,IAAI,CAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,SAAS,CAAoC;gBAElC,KAAK,EAAE,SAAS;IAW5B,OAAO;IAIP,OAAO;IAId;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAezB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAenB;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ;IAMvB;;;;OAIG;IACI,GAAG,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY;IA2C1C;;;;OAIG;IACI,MAAM,CAAC,IAAI,EAAE,YAAY;IAuBzB,WAAW,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI;IAIhD,cAAc,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI;CAI3D;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"NodeList.d.ts","sourceRoot":"","sources":["../../src/utils/NodeList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,MAAM,MAAM,IAAI,GACZ,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,GAC5E,IAAI,CAAC;AAET,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAE/C,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,sBAAsB;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,KAAK,EAAE,sBAAsB,KAC1B,KAAK,CAAC,SAAS,CAAC;AAErB,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACtC,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED;;;GAGG;AACH,cAAM,QAAQ;IACZ;;OAEG;IACI,EAAE,EAAE,MAAM,CAAC;IAElB;;OAEG;IACI,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAE7C;;;OAGG;IACI,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAElD;;OAEG;IACI,UAAU,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACI,iBAAiB,EAAE,iBAAiB,CAAC;IAE5C;;OAEG;IACH,OAAO,CAAC,IAAI,CAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,IAAI,CAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,SAAS,CAAoC;gBAElC,KAAK,EAAE,SAAS;IAW5B,OAAO;IAIP,OAAO;IAId;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAezB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAenB;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ;IAMvB;;;;OAIG;IACI,GAAG,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY;IA2C1C;;;;OAIG;IACI,MAAM,CAAC,IAAI,EAAE,YAAY;IAuBzB,WAAW,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI;IAIhD,cAAc,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI;CAI3D;AAED,eAAe,QAAQ,CAAC"}

package/dist/utils/useAppendClassName.d.ts

@@ -2,6 +2,6 @@ import { type RefObject } from 'react';
 /**
  * Adds a new class name to the element.
  */
-declare const useAppendClassName: (ref: RefObject<HTMLElement>, className: string) => void;
+declare const useAppendClassName: (ref: RefObject<HTMLElement | null>, className: string) => void;
 export default useAppendClassName;
 //# sourceMappingURL=useAppendClassName.d.ts.map

package/dist/utils/useAppendClassName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAppendClassName.d.ts","sourceRoot":"","sources":["../../src/utils/useAppendClassName.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAElD;;GAEG;AACH,QAAA,MAAM,kBAAkB,GAAI,KAAK,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,MAAM,SAYzE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"useAppendClassName.d.ts","sourceRoot":"","sources":["../../src/utils/useAppendClassName.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAElD;;GAEG;AACH,QAAA,MAAM,kBAAkB,GACtB,KAAK,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,WAAW,MAAM,SAalB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/utils/useGeneratedId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGeneratedId.d.ts","sourceRoot":"","sources":["../../src/utils/useGeneratedId.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,cAAc,cACoC,CAAC;AAEzD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"useGeneratedId.d.ts","sourceRoot":"","sources":["../../src/utils/useGeneratedId.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,cAAc,cAEoC,CAAC;AAEzD,eAAe,cAAc,CAAC"}

package/dist/utils/useGeneratedId.js

@@ -1,3 +1,5 @@
 import { useMemo } from 'react';
-const useGeneratedId = () => useMemo(() => Math.random().toString(16).slice(2), []);
+const useGeneratedId = () =>
+// eslint-disable-next-line react-hooks/purity
+useMemo(() => Math.random().toString(16).slice(2), []);
 export default useGeneratedId;

package/dist/utils/useInitRect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInitRect.d.ts","sourceRoot":"","sources":["../../src/utils/useInitRect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAEhD,QAAA,MAAM,WAAW,GAAI,MAAM,SAAS,CAAC,WAAW,CAAC;;;;;QAYtC,CAAC;AAEZ,eAAe,WAAW,CAAC"}
+{"version":3,"file":"useInitRect.d.ts","sourceRoot":"","sources":["../../src/utils/useInitRect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE5D,QAAA,MAAM,WAAW,GAAI,MAAM,SAAS,CAAC,WAAW,CAAC;WAEtC,MAAM;WACN,MAAM;eACF,MAAM;gBACL,MAAM;QAiBrB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/utils/useInitRect.js

@@ -1,12 +1,16 @@
-import { useMemo } from 'react';
-const useInitRect = ref => useMemo(() => {
-  if (!ref || !ref.current) return null;
-  const rect = ref.current.getBoundingClientRect();
-  return {
-    initX: rect.x,
-    initY: rect.y,
-    initWidth: rect.width,
-    initHeight: rect.height
-  };
-}, [ref]);
+import { useEffect, useState } from 'react';
+const useInitRect = ref => {
+  const [rect, setRect] = useState(null);
+  useEffect(() => {
+    if (!ref || !ref.current) return;
+    const domRect = ref.current.getBoundingClientRect();
+    setRect({
+      initX: domRect.x,
+      initY: domRect.y,
+      initWidth: domRect.width,
+      initHeight: domRect.height
+    });
+  }, [ref]);
+  return rect;
+};
 export default useInitRect;

package/dist/utils/useInitScrollOffset.d.ts

@@ -1,5 +1,5 @@
 import { type RefObject } from 'react';
-declare const useInitScrollOffset: (ref?: RefObject<HTMLElement>) => {
+declare const useInitScrollOffset: (ref?: RefObject<HTMLElement | null>) => {
     initScrollLeft: number;
     initScrollTop: number;
 } | null;

package/dist/utils/useInitScrollOffset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInitScrollOffset.d.ts","sourceRoot":"","sources":["../../src/utils/useInitScrollOffset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAGhD,QAAA,MAAM,mBAAmB,GAAI,MAAM,SAAS,CAAC,WAAW,CAAC;;;QAU9C,CAAC;AAEZ,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"useInitScrollOffset.d.ts","sourceRoot":"","sources":["../../src/utils/useInitScrollOffset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG5D,QAAA,MAAM,mBAAmB,GAAI,MAAM,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;oBAE5C,MAAM;mBACP,MAAM;QAexB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/utils/useInitScrollOffset.js

@@ -1,11 +1,15 @@
-import { useMemo } from 'react';
+import { useEffect, useState } from 'react';
 import getElementScroll from './getElementScroll.js';
-const useInitScrollOffset = ref => useMemo(() => {
-  if (!ref || !ref.current) return null;
-  const scrollOffset = getElementScroll(ref.current);
-  return {
-    initScrollLeft: scrollOffset.scrollLeft,
-    initScrollTop: scrollOffset.scrollTop
-  };
-}, [ref]);
+const useInitScrollOffset = ref => {
+  const [scrollOffset, setScrollOffset] = useState(null);
+  useEffect(() => {
+    if (!ref || !ref.current) return;
+    const offset = getElementScroll(ref.current);
+    setScrollOffset({
+      initScrollLeft: offset.scrollLeft,
+      initScrollTop: offset.scrollTop
+    });
+  }, [ref]);
+  return scrollOffset;
+};
 export default useInitScrollOffset;

package/dist/utils/useTargetList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTargetList.d.ts","sourceRoot":"","sources":["../../src/utils/useTargetList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAC;AACvE,OAAO,SAAS,MAAM,gBAAgB,CAAC;AAGvC,QAAA,MAAM,aAAa,GACjB,UAAU,QAAQ,GAAG,IAAI,EACzB,cAAc,SAAS,CAAC,SAAS,CAAC,2CAoBnC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"useTargetList.d.ts","sourceRoot":"","sources":["../../src/utils/useTargetList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;AACzE,OAAO,SAAS,MAAM,gBAAgB,CAAC;AAGvC,QAAA,MAAM,aAAa,GACjB,UAAU,QAAQ,GAAG,IAAI,EACzB,cAAc,SAAS,CAAC,SAAS,CAAC,2CA2BnC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/utils/useTargetList.js

@@ -1,18 +1,22 @@
 import useThrottle from '@os-design/use-throttle';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import useScrollEventByPoint from './useScrollEventByPoint.js';
 const useTargetList = (position, listStoreRef) => {
   const [number, setNumber] = useState(0);
-  const targetList = useMemo(() => {
-    if (!position || !listStoreRef.current) return null;
+  const [targetList, setTargetList] = useState(null);
+  useEffect(() => {
+    if (!position || !listStoreRef.current) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setTargetList(null);
+      return;
+    }
     const {
       x,
       y
     } = position;
     const list = listStoreRef.current.findByPosition(x, y);
-    return list || null;
-  }, [listStoreRef, position, number]); // eslint-disable-line react-hooks/exhaustive-deps
-
+    setTargetList(list || null);
+  }, [listStoreRef, position, number]);
   const forceUpdate = useCallback(() => {
     setNumber(n => n + 1);
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/drag-sort",
-  "version": "1.0.45",
+  "version": "1.0.47",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "type": "module",
@@ -19,32 +19,32 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "clean": "rimraf dist",
+    "clean": "rm -r dist",
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist",
     "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --declarationDir dist",
     "build": "yarn clean && npm-run-all 'build:*'",
-    "ncu": "ncu -u '/^(?!(react|@types/react|react-dom|@types/react-dom)$).*$/'"
+    "ncu": "ncu -u '/^(?!(react-window)$).*$/'"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@os-design/portal": "^1.0.27",
-    "@os-design/use-auto-scroll": "^1.0.31",
-    "@os-design/use-drag": "^1.0.30",
-    "@os-design/use-event": "^1.0.32",
-    "@os-design/use-memo-object": "^1.0.28",
-    "@os-design/use-prevent-default-event": "^1.0.29",
-    "@os-design/use-throttle": "^1.0.31"
+    "@os-design/portal": "^1.0.29",
+    "@os-design/use-auto-scroll": "^1.0.33",
+    "@os-design/use-drag": "^1.0.32",
+    "@os-design/use-event": "^1.0.34",
+    "@os-design/use-memo-object": "^1.0.30",
+    "@os-design/use-prevent-default-event": "^1.0.31",
+    "@os-design/use-throttle": "^1.0.33"
   },
   "devDependencies": {
-    "@os-design/omit-emotion-props": "^1.0.30",
-    "@os-design/use-size": "^1.0.33",
+    "@os-design/omit-emotion-props": "^1.0.32",
+    "@os-design/use-size": "^1.0.35",
     "react-window": "^1.8.11"
   },
   "peerDependencies": {
-    "react": "18",
-    "react-dom": "18"
+    "react": "19",
+    "react-dom": "19"
   },
-  "gitHead": "7a2aee283bdbdba8ba69a3212769ad321beaaed2"
+  "gitHead": "83ca5af2bb91d07d64440f87b7ab23f5100daa02"
 }

package/src/Droppable.tsx

@@ -3,7 +3,6 @@ import React, {
   type MouseEvent,
   type RefObject,
   type TouchEvent,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -22,12 +21,12 @@ export interface DroppableChildrenProps {
    * The reference to the list.
    * If a virtual list is used, pass it to the outerRef prop.
    */
-  ref: RefObject<HTMLDivElement>;
+  ref: RefObject<HTMLDivElement | null>;
   /**
    * The reference to the container inside the virtual list.
    * Pass it to the innerRef prop.
    */
-  innerRef: RefObject<HTMLDivElement>;
+  innerRef: RefObject<HTMLDivElement | null>;
 }
 
 export interface DroppableProps {
@@ -102,27 +101,18 @@ const Droppable: React.FC<DroppableProps> = ({
     return () => deregisterList(listId);
   }, [deregisterList, registerList]);
 
-  const registerNode = useCallback(
-    (props: NodeProps) => listRef.current.add(props),
-    []
-  );
-  const deregisterNode = useCallback((node: ExistingNode) => {
+  const registerNode = (props: NodeProps) => listRef.current.add(props);
+  const deregisterNode = (node: ExistingNode) => {
     listRef.current.remove(node);
-  }, []);
+  };
 
   // Handlers that determine whether a user clicks on the node
-  const mouseDownHandler = useCallback(
-    (e: MouseEvent, node: ExistingNode) => {
-      onMouseDown(e, listRef.current, node);
-    },
-    [onMouseDown]
-  );
-  const touchStartHandler = useCallback(
-    (e: TouchEvent, node: ExistingNode) => {
-      onTouchStart(e, listRef.current, node);
-    },
-    [onTouchStart]
-  );
+  const mouseDownHandler = (e: MouseEvent, node: ExistingNode) => {
+    onMouseDown(e, listRef.current, node);
+  };
+  const touchStartHandler = (e: TouchEvent, node: ExistingNode) => {
+    onTouchStart(e, listRef.current, node);
+  };
 
   const droppableContext = useMemoObject({
     registerNode,

package/src/utils/NodeList.ts

@@ -10,7 +10,7 @@ export type Node =
 export type ExistingNode = Exclude<Node, null>;
 
 export interface NodeProps {
-  ref: React.MutableRefObject<any>;
+  ref: React.RefObject<any>;
   setStyle: (style: CSSProperties) => void;
   index: number;
   id: string;
@@ -37,8 +37,8 @@ export type RenderDraggedNode = (
 
 interface InitProps {
   id: string;
-  ref: RefObject<HTMLDivElement>;
-  innerRef: RefObject<HTMLDivElement>;
+  ref: RefObject<HTMLDivElement | null>;
+  innerRef: RefObject<HTMLDivElement | null>;
   horizontal: boolean;
   renderDraggedNode: RenderDraggedNode;
 }
@@ -56,13 +56,13 @@ class NodeList {
   /**
    * The ref to the list.
    */
-  public ref: RefObject<HTMLDivElement>;
+  public ref: RefObject<HTMLDivElement | null>;
 
   /**
    * The inner ref to the list.
    * Used by the virtual list.
    */
-  public innerRef: RefObject<HTMLDivElement>;
+  public innerRef: RefObject<HTMLDivElement | null>;
 
   /**
    * Whether the list is horizontal.

package/src/utils/useAppendClassName.ts

@@ -3,7 +3,10 @@ import { type RefObject, useEffect } from 'react';
 /**
  * Adds a new class name to the element.
  */
-const useAppendClassName = (ref: RefObject<HTMLElement>, className: string) => {
+const useAppendClassName = (
+  ref: RefObject<HTMLElement | null>,
+  className: string
+) => {
   useEffect(() => {
     const element = ref.current;
     if (!element) return () => {};

package/src/utils/useGeneratedId.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 
 const useGeneratedId = () =>
+  // eslint-disable-next-line react-hooks/purity
   useMemo(() => Math.random().toString(16).slice(2), []);
 
 export default useGeneratedId;

package/src/utils/useInitRect.ts

@@ -1,17 +1,27 @@
-import { type RefObject, useMemo } from 'react';
+import { type RefObject, useEffect, useState } from 'react';
 
-const useInitRect = (ref?: RefObject<HTMLElement>) =>
-  useMemo(() => {
-    if (!ref || !ref.current) return null;
+const useInitRect = (ref?: RefObject<HTMLElement>) => {
+  const [rect, setRect] = useState<{
+    initX: number;
+    initY: number;
+    initWidth: number;
+    initHeight: number;
+  } | null>(null);
 
-    const rect = ref.current.getBoundingClientRect();
+  useEffect(() => {
+    if (!ref || !ref.current) return;
 
-    return {
-      initX: rect.x,
-      initY: rect.y,
-      initWidth: rect.width,
-      initHeight: rect.height,
-    };
+    const domRect = ref.current.getBoundingClientRect();
+
+    setRect({
+      initX: domRect.x,
+      initY: domRect.y,
+      initWidth: domRect.width,
+      initHeight: domRect.height,
+    });
   }, [ref]);
 
+  return rect;
+};
+
 export default useInitRect;

package/src/utils/useInitScrollOffset.ts

@@ -1,16 +1,24 @@
-import { type RefObject, useMemo } from 'react';
+import { type RefObject, useEffect, useState } from 'react';
 import getElementScroll from './getElementScroll.js';
 
-const useInitScrollOffset = (ref?: RefObject<HTMLElement>) =>
-  useMemo(() => {
-    if (!ref || !ref.current) return null;
+const useInitScrollOffset = (ref?: RefObject<HTMLElement | null>) => {
+  const [scrollOffset, setScrollOffset] = useState<{
+    initScrollLeft: number;
+    initScrollTop: number;
+  } | null>(null);
 
-    const scrollOffset = getElementScroll(ref.current);
+  useEffect(() => {
+    if (!ref || !ref.current) return;
 
-    return {
-      initScrollLeft: scrollOffset.scrollLeft,
-      initScrollTop: scrollOffset.scrollTop,
-    };
+    const offset = getElementScroll(ref.current);
+
+    setScrollOffset({
+      initScrollLeft: offset.scrollLeft,
+      initScrollTop: offset.scrollTop,
+    });
   }, [ref]);
 
+  return scrollOffset;
+};
+
 export default useInitScrollOffset;

package/src/utils/useTargetList.ts

@@ -1,6 +1,6 @@
 import type { Position } from '@os-design/use-drag';
 import useThrottle from '@os-design/use-throttle';
-import { type RefObject, useCallback, useMemo, useState } from 'react';
+import { type RefObject, useCallback, useEffect, useState } from 'react';
 import ListStore from './ListStore.js';
 import useScrollEventByPoint from './useScrollEventByPoint.js';
 
@@ -9,13 +9,20 @@ const useTargetList = (
   listStoreRef: RefObject<ListStore>
 ) => {
   const [number, setNumber] = useState(0);
+  const [targetList, setTargetList] = useState<NonNullable<
+    ReturnType<ListStore['findByPosition']>
+  > | null>(null);
 
-  const targetList = useMemo(() => {
-    if (!position || !listStoreRef.current) return null;
+  useEffect(() => {
+    if (!position || !listStoreRef.current) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setTargetList(null);
+      return;
+    }
     const { x, y } = position;
     const list = listStoreRef.current.findByPosition(x, y);
-    return list || null;
-  }, [listStoreRef, position, number]); // eslint-disable-line react-hooks/exhaustive-deps
+    setTargetList(list || null);
+  }, [listStoreRef, position, number]);
 
   const forceUpdate = useCallback(() => {
     setNumber((n) => n + 1);