@estuary-solutions/rn-core-ui 0.0.3

package/dist/DraggableFlatList/DraggableFlatList.js

@@ -0,0 +1,282 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { InteractionManager, } from "react-native";
+import { FlatList, Gesture, GestureDetector, } from "react-native-gesture-handler";
+import Animated, { runOnJS, useAnimatedReaction, useAnimatedScrollHandler, useSharedValue, withSpring, } from "react-native-reanimated";
+import CellRendererComponent from "./CellRendererComponent";
+import PlaceholderItem from "./PlaceholderItem";
+import RowItem from "./RowItem";
+import ScrollOffsetListener from "./ScrollOffsetListener";
+import { typedMemo } from "../utils/DraggableFlatList/typedMemo";
+import { useStableCallback } from "../hooks/DraggableFlatList/useStableCallback";
+import { useAutoScroll } from "../hooks/DraggableFlatList/useAutoScroll";
+import DraggableFlatListProvider from "../context/DraggableFlatList/draggableFlatListContext";
+import { DEFAULT_PROPS } from "../constants/DraggableFlatList/constants";
+import PropsProvider from "../context/DraggableFlatList/propsContext";
+import AnimatedValueProvider, { useAnimatedValues, } from "../context/DraggableFlatList/animatedValueContext";
+import RefProvider, { useRefs } from "../context/DraggableFlatList/refContext";
+import { WEB } from "../utils";
+// Web version import
+let DraggableFlatListWeb = null;
+if (WEB) {
+    try {
+        DraggableFlatListWeb = require("./DraggableFlatList.web").default;
+    }
+    catch (e) {
+        // Web version not available or failed to load
+        console.warn("Web version of DraggableFlatList not available:", e);
+    }
+}
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+function DraggableFlatListInner(props) {
+    const { cellDataRef, containerRef, flatlistRef, keyToIndexRef, propsRef, animationConfigRef, } = useRefs();
+    const { activeCellOffset, activeCellSize, activeIndexAnim, containerSize, scrollOffset, scrollViewSize, spacerIndexAnim, horizontalAnim, placeholderOffset, touchTranslate, autoScrollDistance, panGestureState, isTouchActiveNative, viewableIndexMin, viewableIndexMax, disabled, } = useAnimatedValues();
+    const reset = useStableCallback(() => {
+        activeIndexAnim.value = -1;
+        spacerIndexAnim.value = -1;
+        touchTranslate.value = 0;
+        activeCellSize.value = -1;
+        activeCellOffset.value = -1;
+        setActiveKey(null);
+    });
+    const { dragHitSlop = DEFAULT_PROPS.dragHitSlop, scrollEnabled = DEFAULT_PROPS.scrollEnabled, activationDistance: activationDistanceProp = DEFAULT_PROPS.activationDistance, } = props;
+    let [activeKey, setActiveKey] = React.useState(null);
+    const [layoutAnimationDisabled, setLayoutAnimationDisabled] = React.useState(!propsRef.current.enableLayoutAnimationExperimental);
+    const keyExtractor = useStableCallback((item, index) => {
+        if (!props.keyExtractor) {
+            throw new Error("You must provide a keyExtractor to DraggableFlatList");
+        }
+        return props.keyExtractor(item, index);
+    });
+    const dataRef = React.useRef(props.data);
+    const dataHasChanged = dataRef.current.map(keyExtractor).join("") !==
+        props.data.map(keyExtractor).join("");
+    dataRef.current = props.data;
+    if (dataHasChanged) {
+        // When data changes make sure `activeKey` is nulled out in the same render pass
+        activeKey = null;
+        InteractionManager.runAfterInteractions(() => {
+            reset();
+        });
+    }
+    React.useEffect(() => {
+        if (!propsRef.current.enableLayoutAnimationExperimental)
+            return;
+        if (activeKey) {
+            setLayoutAnimationDisabled(true);
+        }
+        else {
+            // setTimeout result of trial-and-error to determine how long to wait before
+            // re-enabling layout animations so that a drag reorder does not trigger it.
+            setTimeout(() => {
+                setLayoutAnimationDisabled(false);
+            }, 100);
+        }
+    }, [activeKey]);
+    React.useLayoutEffect(() => {
+        props.data.forEach((d, i) => {
+            const key = keyExtractor(d, i);
+            keyToIndexRef.current.set(key, i);
+        });
+    }, [props.data, keyExtractor, keyToIndexRef]);
+    const drag = useStableCallback((activeKey) => {
+        if (disabled.value)
+            return;
+        const index = keyToIndexRef.current.get(activeKey);
+        const cellData = cellDataRef.current.get(activeKey);
+        if (cellData) {
+            activeCellOffset.value = cellData.measurements.offset;
+            activeCellSize.value = cellData.measurements.size;
+        }
+        const { onDragBegin } = propsRef.current;
+        if (index !== undefined) {
+            spacerIndexAnim.value = index;
+            activeIndexAnim.value = index;
+            setActiveKey(activeKey);
+            onDragBegin === null || onDragBegin === void 0 ? void 0 : onDragBegin(index);
+        }
+    });
+    const onContainerLayout = ({ nativeEvent: { layout }, }) => {
+        var _a;
+        const { width, height } = layout;
+        containerSize.value = props.horizontal ? width : height;
+        (_a = props.onContainerLayout) === null || _a === void 0 ? void 0 : _a.call(props, { layout, containerRef });
+    };
+    const onListContentSizeChange = (w, h) => {
+        var _a;
+        scrollViewSize.value = props.horizontal ? w : h;
+        (_a = props.onContentSizeChange) === null || _a === void 0 ? void 0 : _a.call(props, w, h);
+    };
+    const onContainerTouchStart = () => {
+        if (!disabled.value) {
+            isTouchActiveNative.value = true;
+        }
+        return false;
+    };
+    const onContainerTouchEnd = () => {
+        isTouchActiveNative.value = false;
+    };
+    const extraData = React.useMemo(() => ({
+        activeKey,
+        extraData: props.extraData,
+    }), [activeKey, props.extraData]);
+    const renderItem = React.useCallback(({ item, index }) => {
+        const key = keyExtractor(item, index);
+        if (index !== keyToIndexRef.current.get(key)) {
+            keyToIndexRef.current.set(key, index);
+        }
+        return (_jsx(RowItem, { item: item, itemKey: key, renderItem: props.renderItem, drag: drag, extraData: props.extraData }));
+    }, [props.renderItem, props.extraData, drag, keyExtractor]);
+    const onRelease = useStableCallback((index) => {
+        var _a;
+        (_a = props.onRelease) === null || _a === void 0 ? void 0 : _a.call(props, index);
+    });
+    const onDragEnd = useStableCallback(({ from, to }) => {
+        const { onDragEnd, data } = props;
+        const newData = [...data];
+        if (from !== to) {
+            newData.splice(from, 1);
+            newData.splice(to, 0, data[from]);
+        }
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd({ from, to, data: newData });
+        setActiveKey(null);
+    });
+    const onPlaceholderIndexChange = useStableCallback((index) => {
+        var _a;
+        (_a = props.onPlaceholderIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
+    });
+    // Handle case where user ends drag without moving their finger.
+    useAnimatedReaction(() => {
+        return isTouchActiveNative.value;
+    }, (cur, prev) => {
+        if (cur !== prev && !cur) {
+            const hasMoved = !!touchTranslate.value;
+            if (!hasMoved && activeIndexAnim.value >= 0 && !disabled.value) {
+                runOnJS(onRelease)(activeIndexAnim.value);
+                runOnJS(onDragEnd)({
+                    from: activeIndexAnim.value,
+                    to: spacerIndexAnim.value,
+                });
+            }
+        }
+    }, [isTouchActiveNative, onDragEnd, onRelease]);
+    useAnimatedReaction(() => {
+        return spacerIndexAnim.value;
+    }, (cur, prev) => {
+        if (prev !== null && cur !== prev && cur >= 0 && prev >= 0) {
+            runOnJS(onPlaceholderIndexChange)(cur);
+        }
+    }, [spacerIndexAnim]);
+    const gestureDisabled = useSharedValue(false);
+    const panGesture = Gesture.Pan()
+        .onBegin((evt) => {
+        gestureDisabled.value = disabled.value;
+        if (gestureDisabled.value)
+            return;
+        panGestureState.value = evt.state;
+    })
+        .onUpdate((evt) => {
+        if (gestureDisabled.value)
+            return;
+        panGestureState.value = evt.state;
+        const translation = horizontalAnim.value
+            ? evt.translationX
+            : evt.translationY;
+        touchTranslate.value = translation;
+    })
+        .onEnd((evt) => {
+        if (gestureDisabled.value)
+            return;
+        // Set touch val to current translate val
+        isTouchActiveNative.value = false;
+        const translation = horizontalAnim.value
+            ? evt.translationX
+            : evt.translationY;
+        touchTranslate.value = translation + autoScrollDistance.value;
+        panGestureState.value = evt.state;
+        // Only call onDragEnd if actually dragging a cell
+        if (activeIndexAnim.value === -1 || disabled.value)
+            return;
+        disabled.value = true;
+        runOnJS(onRelease)(activeIndexAnim.value);
+        const springTo = placeholderOffset.value - activeCellOffset.value;
+        touchTranslate.value = withSpring(springTo, animationConfigRef.value, () => {
+            runOnJS(onDragEnd)({
+                from: activeIndexAnim.value,
+                to: spacerIndexAnim.value,
+            });
+            disabled.value = false;
+        });
+    })
+        .onTouchesDown(() => {
+        runOnJS(onContainerTouchStart)();
+    })
+        .onTouchesUp(() => {
+        // Turning this into a worklet causes timing issues. We want it to run
+        // just after the finger lifts.
+        runOnJS(onContainerTouchEnd)();
+    });
+    if (dragHitSlop)
+        panGesture.hitSlop(dragHitSlop);
+    if (activationDistanceProp) {
+        const activeOffset = [
+            -activationDistanceProp,
+            activationDistanceProp,
+        ];
+        if (props.horizontal) {
+            panGesture.activeOffsetX(activeOffset);
+        }
+        else {
+            panGesture.activeOffsetY(activeOffset);
+        }
+    }
+    const onScroll = useStableCallback((scrollOffset) => {
+        var _a;
+        (_a = props.onScrollOffsetChange) === null || _a === void 0 ? void 0 : _a.call(props, scrollOffset);
+    });
+    const scrollHandler = useAnimatedScrollHandler({
+        onScroll: (evt) => {
+            scrollOffset.value = horizontalAnim.value
+                ? evt.contentOffset.x
+                : evt.contentOffset.y;
+            runOnJS(onScroll)(scrollOffset.value);
+        },
+    }, [horizontalAnim]);
+    useAutoScroll();
+    const onViewableItemsChanged = useStableCallback((info) => {
+        var _a;
+        const viewableIndices = info.viewableItems
+            .filter((item) => item.isViewable)
+            .map((item) => item.index)
+            .filter((index) => typeof index === "number");
+        const min = Math.min(...viewableIndices);
+        const max = Math.max(...viewableIndices);
+        viewableIndexMin.value = min;
+        viewableIndexMax.value = max;
+        (_a = props.onViewableItemsChanged) === null || _a === void 0 ? void 0 : _a.call(props, info);
+    });
+    return (_jsx(DraggableFlatListProvider, { activeKey: activeKey, keyExtractor: keyExtractor, horizontal: !!props.horizontal, layoutAnimationDisabled: layoutAnimationDisabled, children: _jsx(GestureDetector, { gesture: panGesture, children: _jsxs(Animated.View, { style: props.containerStyle, ref: containerRef, onLayout: onContainerLayout, children: [props.renderPlaceholder && (_jsx(PlaceholderItem, { renderPlaceholder: props.renderPlaceholder })), _jsx(AnimatedFlatList, Object.assign({}, props, { data: props.data, onViewableItemsChanged: onViewableItemsChanged, CellRendererComponent: CellRendererComponent, ref: flatlistRef, onContentSizeChange: onListContentSizeChange, scrollEnabled: !activeKey && scrollEnabled, renderItem: renderItem, extraData: extraData, keyExtractor: keyExtractor, onScroll: scrollHandler, scrollEventThrottle: 16, simultaneousHandlers: props.simultaneousHandlers, removeClippedSubviews: false })), !!props.onScrollOffsetChange && (_jsx(ScrollOffsetListener, { onScrollOffsetChange: props.onScrollOffsetChange, scrollOffset: scrollOffset }))] }) }) }));
+}
+function DraggableFlatList(props, ref) {
+    // Use web version if available and on web platform
+    if (WEB && DraggableFlatListWeb) {
+        const { data, renderItem, keyExtractor, onDragEnd, onDragBegin, onRelease, onPlaceholderIndexChange, activationDistance, containerStyle, horizontal } = props, otherProps = __rest(props, ["data", "renderItem", "keyExtractor", "onDragEnd", "onDragBegin", "onRelease", "onPlaceholderIndexChange", "activationDistance", "containerStyle", "horizontal"]);
+        return (_jsx(DraggableFlatListWeb, Object.assign({ data: data, renderItem: renderItem, keyExtractor: keyExtractor, onDragEnd: onDragEnd, onDragBegin: onDragBegin, onRelease: onRelease, onPlaceholderIndexChange: onPlaceholderIndexChange, activationDistance: activationDistance, containerStyle: containerStyle ? containerStyle : undefined, horizontal: horizontal }, otherProps)));
+    }
+    return (_jsx(PropsProvider, Object.assign({}, props, { children: _jsx(AnimatedValueProvider, { children: _jsx(RefProvider, { flatListRef: ref, children: _jsx(MemoizedInner, Object.assign({}, props)) }) }) })));
+}
+const MemoizedInner = typedMemo(DraggableFlatListInner);
+// Generic forwarded ref type assertion taken from:
+// https://fettblog.eu/typescript-react-generic-forward-refs/#option-1%3A-type-assertion
+export default React.forwardRef(DraggableFlatList);

package/dist/DraggableFlatList/DraggableFlatList.web.d.ts

@@ -0,0 +1,4 @@
+import { WebDraggableFlatListProps } from "../constants/DraggableFlatList/types.web";
+declare function DraggableFlatListWeb<T>({ data, renderItem, keyExtractor, onDragEnd, onDragBegin, onRelease, onPlaceholderIndexChange, activationDistance, containerStyle, horizontal, ...props }: WebDraggableFlatListProps<T>): import("react/jsx-runtime").JSX.Element;
+export default DraggableFlatListWeb;
+//# sourceMappingURL=DraggableFlatList.web.d.ts.map

package/dist/DraggableFlatList/DraggableFlatList.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableFlatList.web.d.ts","sourceRoot":"","sources":["../../src/DraggableFlatList/DraggableFlatList.web.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AAElF,iBAAS,oBAAoB,CAAC,CAAC,EAAE,EAC/B,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,SAAS,EACT,WAAW,EACX,SAAS,EACT,wBAAwB,EACxB,kBAAqD,EACrD,cAAc,EACd,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,yBAAyB,CAAC,CAAC,CAAC,2CAwW9B;AAED,eAAe,oBAAoB,CAAC"}

package/dist/DraggableFlatList/DraggableFlatList.web.js

@@ -0,0 +1,248 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference lib="dom" /> TODO: DO NOT REMOVE THIS LINE
+import React from "react";
+import { DEFAULT_PROPS } from "../constants/DraggableFlatList/constants";
+import { CellProvider } from "../context/DraggableFlatList/cellContext";
+import DraggableFlatListProvider from "../context/DraggableFlatList/draggableFlatListContext";
+function DraggableFlatListWeb(_a) {
+    var { data, renderItem, keyExtractor, onDragEnd, onDragBegin, onRelease, onPlaceholderIndexChange, activationDistance = DEFAULT_PROPS.activationDistance, containerStyle, horizontal = false } = _a, props = __rest(_a, ["data", "renderItem", "keyExtractor", "onDragEnd", "onDragBegin", "onRelease", "onPlaceholderIndexChange", "activationDistance", "containerStyle", "horizontal"]);
+    const [draggedIndex, setDraggedIndex] = React.useState(null);
+    const [tempData, setTempData] = React.useState(null);
+    const placeholderIndexRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const itemRefs = React.useRef(new Map());
+    const currentIndexRef = React.useRef(null);
+    const draggedKeyRef = React.useRef(null);
+    const positionsRef = React.useRef(new Map());
+    const lastReorderIndexRef = React.useRef(null);
+    const lastPointerRef = React.useRef(null);
+    const dragAnchorRef = React.useRef(null);
+    const containerRectRef = React.useRef(null);
+    const [dragGhost, setDragGhost] = React.useState(null);
+    const activeKey = draggedKeyRef.current;
+    const getKey = React.useCallback((item, index) => {
+        return keyExtractor(item, index);
+    }, [keyExtractor]);
+    const handleDragStart = React.useCallback((e, index) => {
+        var _a, _b;
+        setDraggedIndex(index);
+        const key = keyExtractor(data[index], index);
+        draggedKeyRef.current = key;
+        currentIndexRef.current = index;
+        setTempData([...data]);
+        placeholderIndexRef.current = index;
+        onDragBegin === null || onDragBegin === void 0 ? void 0 : onDragBegin(index);
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", index.toString());
+        const el = itemRefs.current.get(key);
+        if (el) {
+            const rect = el.getBoundingClientRect();
+            const container = containerRef.current;
+            if (container) {
+                containerRectRef.current = container.getBoundingClientRect();
+            }
+            const img = new Image();
+            img.src =
+                "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>";
+            e.dataTransfer.setDragImage(img, 0, 0);
+            const mouseY = e.clientY;
+            const mouseX = e.clientX;
+            const anchor = dragAnchorRef.current;
+            setDragGhost({
+                x: e.clientX,
+                y: e.clientY,
+                offsetX: (_a = anchor === null || anchor === void 0 ? void 0 : anchor.offsetX) !== null && _a !== void 0 ? _a : rect.width / 2,
+                offsetY: (_b = anchor === null || anchor === void 0 ? void 0 : anchor.offsetY) !== null && _b !== void 0 ? _b : rect.height / 2,
+                width: rect.width,
+                height: rect.height,
+                item: data[index],
+                index,
+                key,
+            });
+        }
+    }, [onDragBegin, data, keyExtractor]);
+    const handleDragEnd = React.useCallback(() => {
+        if (draggedIndex !== null) {
+            onRelease === null || onRelease === void 0 ? void 0 : onRelease(draggedIndex);
+        }
+        placeholderIndexRef.current = null;
+        lastPointerRef.current = null;
+        setDraggedIndex(null);
+        setDragGhost(null);
+        lastReorderIndexRef.current = null;
+    }, [draggedIndex, onRelease]);
+    const handleContainerDragOver = React.useCallback((e) => {
+        e.preventDefault();
+        setDragGhost((prev) => {
+            const rect = containerRectRef.current;
+            if (!prev || !rect)
+                return prev;
+            return Object.assign(Object.assign({}, prev), { x: e.clientX - rect.left, y: e.clientY - rect.top });
+        });
+        if (!tempData || !draggedKeyRef.current)
+            return;
+        const mouseY = e.clientY;
+        const mouseX = e.clientX;
+        let nextIndex = null;
+        if (lastPointerRef.current) {
+            const dx = Math.abs(mouseX - lastPointerRef.current.x);
+            const dy = Math.abs(mouseY - lastPointerRef.current.y);
+            if (dx < 2 && dy < 2) {
+                return;
+            }
+        }
+        lastPointerRef.current = { x: mouseX, y: mouseY };
+        for (let i = 0; i < tempData.length; i++) {
+            const key = keyExtractor(tempData[i], i);
+            const el = itemRefs.current.get(key);
+            if (!el)
+                continue;
+            const rect = el.getBoundingClientRect();
+            const isInside = horizontal
+                ? mouseX >= rect.left && mouseX <= rect.right
+                : mouseY >= rect.top && mouseY <= rect.bottom;
+            if (!isInside)
+                continue;
+            const isAfter = horizontal
+                ? mouseX > rect.left + rect.width / 1.5
+                : mouseY > rect.top + rect.height / 1.5;
+            nextIndex = isAfter ? i + 1 : i;
+            break;
+        }
+        if (nextIndex === null ||
+            placeholderIndexRef.current === nextIndex ||
+            lastReorderIndexRef.current === nextIndex) {
+            return;
+        }
+        positionsRef.current.clear();
+        tempData.forEach((item, index) => {
+            const key = keyExtractor(item, index);
+            const el = itemRefs.current.get(key);
+            if (el)
+                positionsRef.current.set(key, el.getBoundingClientRect());
+        });
+        placeholderIndexRef.current = nextIndex;
+        onPlaceholderIndexChange === null || onPlaceholderIndexChange === void 0 ? void 0 : onPlaceholderIndexChange(nextIndex);
+        setTempData((prev) => {
+            if (!prev || !draggedKeyRef.current)
+                return prev;
+            const from = prev.findIndex((item, index) => keyExtractor(item, index) === draggedKeyRef.current);
+            if (from === -1 || from === nextIndex)
+                return prev;
+            const arr = [...prev];
+            const [item] = arr.splice(from, 1);
+            arr.splice(nextIndex, 0, item);
+            return arr;
+        });
+        lastReorderIndexRef.current = nextIndex;
+        requestAnimationFrame(() => {
+            positionsRef.current.forEach((prevRect, key) => {
+                if (key === draggedKeyRef.current)
+                    return;
+                const el = itemRefs.current.get(key);
+                if (!el)
+                    return;
+                const nextRect = el.getBoundingClientRect();
+                const dx = prevRect.left - nextRect.left;
+                const dy = prevRect.top - nextRect.top;
+                if (!dx && !dy)
+                    return;
+                el.style.transform = `translate(${dx}px, ${dy}px)`;
+                el.style.transition = "none";
+                requestAnimationFrame(() => {
+                    el.style.transform = "";
+                    el.style.transition =
+                        "transform 220ms cubic-bezier(0.22, 1, 0.36, 1)";
+                });
+            });
+        });
+    }, [tempData, horizontal, keyExtractor, onPlaceholderIndexChange]);
+    const workingData = tempData !== null && tempData !== void 0 ? tempData : data;
+    const getItemStyle = (key) => key === draggedKeyRef.current ? { opacity: 0 } : {};
+    React.useLayoutEffect(() => {
+        if (draggedKeyRef.current !== null)
+            return;
+        itemRefs.current.forEach((el) => {
+            el.style.transform = "";
+            el.style.transition = "";
+        });
+    }, [workingData]);
+    return (_jsx(DraggableFlatListProvider, { activeKey: activeKey, keyExtractor: keyExtractor, horizontal: !!horizontal, layoutAnimationDisabled: false, children: _jsxs("div", Object.assign({ ref: containerRef, style: Object.assign({ display: horizontal ? "flex" : "block", overflow: horizontal ? "auto" : "visible", minHeight: horizontal ? "auto" : "100%" }, containerStyle), onDragOver: handleContainerDragOver, onDrop: (e) => {
+                e.preventDefault();
+                if (!tempData || !draggedKeyRef.current)
+                    return;
+                const from = data.findIndex((item) => keyExtractor(item, 0) === draggedKeyRef.current);
+                const to = placeholderIndexRef.current;
+                if (from === -1 || to == null)
+                    return;
+                const newData = [...data];
+                const [item] = newData.splice(from, 1);
+                newData.splice(to, 0, item);
+                onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd({ from, to, data: newData });
+                draggedKeyRef.current = null;
+                currentIndexRef.current = null;
+                placeholderIndexRef.current = null;
+                setDragGhost(null);
+                setDraggedIndex(null);
+                setTempData(null);
+                lastReorderIndexRef.current = null;
+                itemRefs.current.forEach((el) => {
+                    el.style.transform = "";
+                    el.style.transition = "";
+                });
+                lastPointerRef.current = null;
+                onRelease === null || onRelease === void 0 ? void 0 : onRelease(from);
+            } }, props, { children: [workingData.map((item, index) => {
+                    const key = getKey(item, index);
+                    const isActive = key === draggedKeyRef.current;
+                    return (_jsx(CellProvider, { isActive: isActive, children: _jsx("div", { ref: (el) => {
+                                if (el) {
+                                    itemRefs.current.set(key, el);
+                                }
+                                else {
+                                    itemRefs.current.delete(key);
+                                }
+                            }, draggable: draggedIndex === null, onMouseDown: (e) => {
+                                const el = itemRefs.current.get(key);
+                                if (!el)
+                                    return;
+                                const rect = el.getBoundingClientRect();
+                                dragAnchorRef.current = {
+                                    offsetX: e.clientX - rect.left,
+                                    offsetY: e.clientY - rect.top,
+                                };
+                            }, onDragStart: (e) => {
+                                handleDragStart(e, index);
+                            }, onDragEnd: handleDragEnd, style: Object.assign({ cursor: draggedIndex === null ? "grab" : "grabbing", userSelect: "none", position: "relative" }, getItemStyle(key)), children: renderItem({
+                                item,
+                                getIndex: () => index,
+                                drag: () => { },
+                                isActive,
+                            }) }) }, key));
+                }), dragGhost && (_jsx(CellProvider, { isActive: true, children: _jsx("div", { style: {
+                            position: "absolute",
+                            left: dragGhost.x - dragGhost.offsetX,
+                            top: dragGhost.y - dragGhost.offsetY,
+                            width: dragGhost.width,
+                            height: dragGhost.height,
+                            pointerEvents: "none",
+                            zIndex: 9999,
+                        }, children: renderItem({
+                            item: dragGhost.item,
+                            getIndex: () => dragGhost.index,
+                            drag: () => { },
+                            isActive: true,
+                        }) }) }))] })) }));
+}
+export default DraggableFlatListWeb;

package/dist/DraggableFlatList/NestableDraggableFlatList.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FlatList } from "react-native-gesture-handler";
+import { DraggableFlatListProps } from "../constants/DraggableFlatList/types";
+declare function NestableDraggableFlatListInner<T>(props: DraggableFlatListProps<T>, ref?: React.ForwardedRef<FlatList<T>>): import("react/jsx-runtime").JSX.Element;
+export declare const NestableDraggableFlatList: <T>(props: DraggableFlatListProps<T> & {
+    ref?: React.ForwardedRef<FlatList<T>>;
+}) => ReturnType<typeof NestableDraggableFlatListInner>;
+export {};
+//# sourceMappingURL=NestableDraggableFlatList.d.ts.map

package/dist/DraggableFlatList/NestableDraggableFlatList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NestableDraggableFlatList.d.ts","sourceRoot":"","sources":["../../src/DraggableFlatList/NestableDraggableFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAKxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAG3E,iBAAS,8BAA8B,CAAC,CAAC,EACvC,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAChC,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,2CAiFtC;AAED,eAAO,MAAM,yBAAyB,EAEjC,CAAC,CAAC,EACL,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KACzE,UAAU,CAAC,OAAO,8BAA8B,CAAC,CAAC"}

package/dist/DraggableFlatList/NestableDraggableFlatList.js

@@ -0,0 +1,66 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { findNodeHandle, LogBox } from "react-native";
+import { useDerivedValue, useSharedValue } from "react-native-reanimated";
+import { useStableCallback } from "../hooks/DraggableFlatList/useStableCallback";
+import { useNestedAutoScroll } from "../hooks/DraggableFlatList/useNestedAutoScroll";
+import { useSafeNestableScrollContainerContext } from "../context/DraggableFlatList/nestableScrollContainerContext";
+import DraggableFlatList from "./DraggableFlatList";
+function NestableDraggableFlatListInner(props, ref) {
+    const hasSuppressedWarnings = React.useRef(false);
+    if (!hasSuppressedWarnings.current) {
+        LogBox.ignoreLogs([
+            "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing",
+        ]); // Ignore log notification by message
+        //@ts-ignore
+        console.reportErrorsAsExceptions = false;
+        hasSuppressedWarnings.current = true;
+    }
+    const { scrollableRef, outerScrollOffset, setOuterScrollEnabled } = useSafeNestableScrollContainerContext();
+    const listVerticalOffset = useSharedValue(0);
+    const [animVals, setAnimVals] = React.useState({});
+    const defaultHoverOffset = useSharedValue(0);
+    const [listHoverOffset, setListHoverOffset] = React.useState(defaultHoverOffset);
+    const hoverOffset = useDerivedValue(() => {
+        return listHoverOffset.value + listVerticalOffset.value;
+    }, [listHoverOffset]);
+    useNestedAutoScroll(Object.assign(Object.assign({}, animVals), { hoverOffset }));
+    const onListContainerLayout = useStableCallback((_a) => __awaiter(this, [_a], void 0, function* ({ containerRef }) {
+        const nodeHandle = findNodeHandle(scrollableRef.current);
+        const onSuccess = (_x, y) => {
+            listVerticalOffset.value = y;
+        };
+        const onFail = () => {
+            console.log("## nested draggable list measure fail");
+        };
+        //@ts-ignore
+        containerRef.current.measureLayout(nodeHandle, onSuccess, onFail);
+    }));
+    const onDragBegin = useStableCallback((params) => {
+        var _a;
+        setOuterScrollEnabled(false);
+        (_a = props.onDragBegin) === null || _a === void 0 ? void 0 : _a.call(props, params);
+    });
+    const onDragEnd = useStableCallback((params) => {
+        var _a;
+        setOuterScrollEnabled(true);
+        (_a = props.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(props, params);
+    });
+    const onAnimValInit = useStableCallback((params) => {
+        var _a;
+        setListHoverOffset(params.hoverOffset);
+        setAnimVals(Object.assign(Object.assign({}, params), { hoverOffset }));
+        (_a = props.onAnimValInit) === null || _a === void 0 ? void 0 : _a.call(props, params);
+    });
+    return (_jsx(DraggableFlatList, Object.assign({ ref: ref, onContainerLayout: onListContainerLayout, activationDistance: props.activationDistance || 20, scrollEnabled: false }, props, { outerScrollOffset: outerScrollOffset, onDragBegin: onDragBegin, onDragEnd: onDragEnd, onAnimValInit: onAnimValInit })));
+}
+export const NestableDraggableFlatList = React.forwardRef(NestableDraggableFlatListInner);

package/dist/DraggableFlatList/NestableScrollContainer.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ScrollViewProps } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+export declare const NestableScrollContainer: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<ScrollView>>;
+//# sourceMappingURL=NestableScrollContainer.d.ts.map

package/dist/DraggableFlatList/NestableScrollContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NestableScrollContainer.d.ts","sourceRoot":"","sources":["../../src/DraggableFlatList/NestableScrollContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqB,eAAe,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAmD1D,eAAO,MAAM,uBAAuB,oFAYnC,CAAC"}

package/dist/DraggableFlatList/NestableScrollContainer.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { ScrollView } from "react-native-gesture-handler";
+import Animated, { useAnimatedScrollHandler } from "react-native-reanimated";
+import { useStableCallback } from "../hooks/DraggableFlatList/useStableCallback";
+import { NestableScrollContainerProvider, useSafeNestableScrollContainerContext, } from "../context/DraggableFlatList/nestableScrollContainerContext";
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
+function NestableScrollContainerInner(props) {
+    const { outerScrollOffset, containerSize, scrollViewSize, scrollableRef, outerScrollEnabled, } = useSafeNestableScrollContainerContext();
+    const onScroll = useAnimatedScrollHandler({
+        onScroll: ({ contentOffset }) => {
+            outerScrollOffset.value = contentOffset.y;
+        },
+    });
+    const onLayout = useStableCallback((event) => {
+        const { nativeEvent: { layout }, } = event;
+        containerSize.value = layout.height;
+    });
+    const onContentSizeChange = useStableCallback((w, h) => {
+        var _a;
+        scrollViewSize.value = h;
+        (_a = props.onContentSizeChange) === null || _a === void 0 ? void 0 : _a.call(props, w, h);
+    });
+    return (_jsx(AnimatedScrollView, Object.assign({}, props, { onLayout: onLayout, onContentSizeChange: onContentSizeChange, scrollEnabled: outerScrollEnabled, ref: scrollableRef, scrollEventThrottle: 1, onScroll: onScroll })));
+}
+export const NestableScrollContainer = React.forwardRef((props, forwardedRef) => {
+    return (_jsx(NestableScrollContainerProvider, { forwardedRef: forwardedRef || undefined, children: _jsx(NestableScrollContainerInner, Object.assign({}, props)) }));
+});