react-native-drax 0.9.3 → 0.10.2

package/CHANGELOG.md

@@ -9,6 +9,30 @@ Changes marked as (BREAKING) may break your app logic. Changes marked as (BREAKI
 ## [Unreleased]
 - Nothing yet
 
+## [0.10.2] - 2022-06-10
+
+### Added
+- Allow overriding style of DraxProvider (#136)
+
+## [0.10.1] - 2022-06-10
+
+### Changed
+- Bump ansi-regex from 4.1.0 to 4.1.1 (dependabot)
+- Bump async from 2.6.3 to 2.6.4 (dependabot)
+- Bump cross-fetch from 3.1.4 to 3.1.5 (dependabot)
+- Bump minimist from 1.2.5 to 1.2.6 (dependabot)
+- Bump plist from 3.0.2 to 3.0.5 (dependabot)
+- Bump simple-plist from 1.1.1 to 1.3.1 (dependabot)
+
+## [0.10.0] - 2022-06-10
+
+### Changed
+- (BREAKING) Update requirement from RN 0.62 to RN 0.65
+- (BREAKING-TS) Remove Animated ViewStyle types which were needed as a workaround before
+
+### Fixed
+- (BREAKING) Stop using removeListener method which was deprecated in RN 0.65 (#125)
+
 ## [0.9.3] - 2021-12-14
 
 ### Fixed
@@ -209,9 +233,12 @@ Changes marked as (BREAKING) may break your app logic. Changes marked as (BREAKI
 ### Fixed
 - DraxProvider now respects parent padding (#10)
 
-*(More history to be added later)*
+*(More history to be added later?)*
 
-[Unreleased]: https://github.com/nuclearpasta/react-native-drax/compare/v0.9.3...HEAD
+[Unreleased]: https://github.com/nuclearpasta/react-native-drax/compare/v0.10.2...HEAD
+[0.10.2]: https://github.com/nuclearpasta/react-native-drax/compare/v0.10.1...v0.10.2
+[0.10.1]: https://github.com/nuclearpasta/react-native-drax/compare/v0.10.0...v0.10.1
+[0.10.0]: https://github.com/nuclearpasta/react-native-drax/compare/v0.9.3...v0.10.0
 [0.9.3]: https://github.com/nuclearpasta/react-native-drax/compare/v0.9.2...v0.9.3
 [0.9.2]: https://github.com/nuclearpasta/react-native-drax/compare/v0.9.1...v0.9.2
 [0.9.1]: https://github.com/nuclearpasta/react-native-drax/compare/v0.9.0...v0.9.1

package/README.md

@@ -11,7 +11,9 @@
 
 Drax is a declarative drag-and-drop system for React Native, written in TypeScript. It is designed to be flexible and powerful with the goal of supporting many use cases, while its stock components and default settings should cover the most common scenarios with minimal configuration.
 
-**Note: as of version 0.7.0, React Native 0.62 or higher is required. For RN 0.61 projects, you may be able to use 0.6.0, but it will no longer be supported.**
+**Note: as of version 0.10.0, React Native 0.65 or higher is required. For RN 0.62-0.64 projects, you may be able to use 0.9.3, but it will no longer be supported. For RN 0.61 projects, you may be able to use 0.6.0, but it will no longer be supported.**
+
+*Personal note from Joe: this project is in need of additional [contributors/shepherds](#contributing). I have not been focused on React Native over the past year, and the state of the library has fallen behind the times. At a minimum, it should be updated to use the latest RNGH and take advantage of any fixes and new features in that and RN. I apologize that I do not have the availability to maintain this project to my own high standards and thank everyone who has been understanding of that.*
 
 #### Contents
 
@@ -205,3 +207,5 @@ This software library is licensed under the [MIT License](LICENSE.md).
 ## Acknowledgments
 
 The initial version of this library was written by [Joe Lafiosca](https://github.com/lafiosca) over the course of December 2019. Joe would like to give thanks to Nuclear Pasta co-founder Mark Thomas for being patient with the development process. Joe would also like to give thanks to Lena Raine, Tom Jenkinson, Rollie Pemberton, David Minnick, Tim Smith, and Danny Baranowsky for providing most of the coding background music that inspired this work.
+
+Special thanks go to the folks who have contributed donations toward this project. (If you are a sponsor and would like your name listed here, please let me know! I do not want to make assumptions about people's privacy preferences.)

package/build/DraxContext.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DraxContext = void 0;
 const react_1 = require("react");
-exports.DraxContext = react_1.createContext(undefined);
+exports.DraxContext = (0, react_1.createContext)(undefined);
 exports.DraxContext.displayName = 'Drax';

package/build/DraxList.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -40,35 +44,35 @@ const DraxListUnforwarded = (props, forwardedRef) => {
     // Set a sensible default for reorderable prop.
     const reorderable = reorderableProp ?? (onItemReorder !== undefined);
     // The unique identifer for this list's Drax view.
-    const id = hooks_1.useDraxId(idProp);
+    const id = (0, hooks_1.useDraxId)(idProp);
     // FlatList, used for scrolling.
-    const flatListRef = react_1.useRef(null);
+    const flatListRef = (0, react_1.useRef)(null);
     // FlatList node handle, used for measuring children.
-    const nodeHandleRef = react_1.useRef(null);
+    const nodeHandleRef = (0, react_1.useRef)(null);
     // Container view measurements, for scrolling by percentage.
-    const containerMeasurementsRef = react_1.useRef(undefined);
+    const containerMeasurementsRef = (0, react_1.useRef)(undefined);
     // Content size, for scrolling by percentage.
-    const contentSizeRef = react_1.useRef(undefined);
+    const contentSizeRef = (0, react_1.useRef)(undefined);
     // Scroll position, for Drax bounds checking and auto-scrolling.
-    const scrollPositionRef = react_1.useRef({ x: 0, y: 0 });
+    const scrollPositionRef = (0, react_1.useRef)({ x: 0, y: 0 });
     // Original index of the currently dragged list item, if any.
-    const draggedItemRef = react_1.useRef(undefined);
+    const draggedItemRef = (0, react_1.useRef)(undefined);
     // Auto-scrolling state.
-    const scrollStateRef = react_1.useRef(types_1.AutoScrollDirection.None);
+    const scrollStateRef = (0, react_1.useRef)(types_1.AutoScrollDirection.None);
     // Auto-scrolling interval.
-    const scrollIntervalRef = react_1.useRef(undefined);
+    const scrollIntervalRef = (0, react_1.useRef)(undefined);
     // List item measurements, for determining shift.
-    const itemMeasurementsRef = react_1.useRef([]);
+    const itemMeasurementsRef = (0, react_1.useRef)([]);
     // Drax view registrations, for remeasuring after reorder.
-    const registrationsRef = react_1.useRef([]);
+    const registrationsRef = (0, react_1.useRef)([]);
     // Shift offsets.
-    const shiftsRef = react_1.useRef([]);
+    const shiftsRef = (0, react_1.useRef)([]);
     // Maintain cache of reordered list indexes until data updates.
-    const [originalIndexes, setOriginalIndexes] = react_1.useState([]);
+    const [originalIndexes, setOriginalIndexes] = (0, react_1.useState)([]);
     // Maintain the index the item is currently dragged to.
-    const draggedToIndex = react_1.useRef(undefined);
+    const draggedToIndex = (0, react_1.useRef)(undefined);
     // Adjust measurements, registrations, and shift value arrays as item count changes.
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const itemMeasurements = itemMeasurementsRef.current;
         const registrations = registrationsRef.current;
         const shifts = shiftsRef.current;
@@ -101,12 +105,12 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         }
     }, [itemCount]);
     // Clear reorders when data changes.
-    react_1.useLayoutEffect(() => {
+    (0, react_1.useLayoutEffect)(() => {
         // console.log('clear reorders');
         setOriginalIndexes(data ? [...Array(data.length).keys()] : []);
     }, [data]);
     // Apply the reorder cache to the data.
-    const reorderedData = react_1.useMemo(() => {
+    const reorderedData = (0, react_1.useMemo)(() => {
         // console.log('refresh sorted data');
         if (!id || !data) {
             return null;
@@ -117,26 +121,26 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         return originalIndexes.map((index) => data[index]);
     }, [id, data, originalIndexes]);
     // Get shift transform for list item at index.
-    const getShiftTransform = react_1.useCallback((index) => {
+    const getShiftTransform = (0, react_1.useCallback)((index) => {
         const shift = shiftsRef.current[index]?.animatedValue ?? 0;
         return horizontal
             ? [{ translateX: shift }]
             : [{ translateY: shift }];
     }, [horizontal]);
     // Set the currently dragged list item.
-    const setDraggedItem = react_1.useCallback((originalIndex) => {
+    const setDraggedItem = (0, react_1.useCallback)((originalIndex) => {
         draggedItemRef.current = originalIndex;
     }, []);
     // Clear the currently dragged list item.
-    const resetDraggedItem = react_1.useCallback(() => {
+    const resetDraggedItem = (0, react_1.useCallback)(() => {
         draggedItemRef.current = undefined;
     }, []);
     // Drax view renderItem wrapper.
-    const renderItem = react_1.useCallback((info) => {
+    const renderItem = (0, react_1.useCallback)((info) => {
         const { index, item } = info;
         const originalIndex = originalIndexes[index];
         const { style: itemStyle, draggingStyle = defaultStyles.draggingStyle, dragReleasedStyle = defaultStyles.dragReleasedStyle, ...otherStyleProps } = itemStyles ?? {};
-        return (react_1.default.createElement(DraxView_1.DraxView, Object.assign({ style: [itemStyle, { transform: getShiftTransform(originalIndex) }], draggingStyle: draggingStyle, dragReleasedStyle: dragReleasedStyle }, otherStyleProps, { longPressDelay: longPressDelay, lockDragXPosition: lockItemDragsToMainAxis && !horizontal, lockDragYPosition: lockItemDragsToMainAxis && horizontal, draggable: itemsDraggable, payload: { index, originalIndex } }, (viewPropsExtractor?.(item) ?? {}), { onDragEnd: resetDraggedItem, onDragDrop: resetDraggedItem, onMeasure: (measurements) => {
+        return (react_1.default.createElement(DraxView_1.DraxView, { style: [itemStyle, { transform: getShiftTransform(originalIndex) }], draggingStyle: draggingStyle, dragReleasedStyle: dragReleasedStyle, ...otherStyleProps, longPressDelay: longPressDelay, lockDragXPosition: lockItemDragsToMainAxis && !horizontal, lockDragYPosition: lockItemDragsToMainAxis && horizontal, draggable: itemsDraggable, payload: { index, originalIndex }, ...(viewPropsExtractor?.(item) ?? {}), onDragEnd: resetDraggedItem, onDragDrop: resetDraggedItem, onMeasure: (measurements) => {
                 if (originalIndex !== undefined) {
                     // console.log(`measuring [${index}, ${originalIndex}]: (${measurements?.x}, ${measurements?.y})`);
                     itemMeasurementsRef.current[originalIndex] = measurements;
@@ -148,7 +152,7 @@ const DraxListUnforwarded = (props, forwardedRef) => {
                     registration.measure();
                 }
             }, renderContent: (contentProps) => renderItemContent(info, contentProps), renderHoverContent: renderItemHoverContent
-                && ((hoverContentProps) => renderItemHoverContent(info, hoverContentProps)) })));
+                && ((hoverContentProps) => renderItemHoverContent(info, hoverContentProps)) }));
     }, [
         originalIndexes,
         itemStyles,
@@ -163,17 +167,17 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         horizontal,
     ]);
     // Track the size of the container view.
-    const onMeasureContainer = react_1.useCallback((measurements) => {
+    const onMeasureContainer = (0, react_1.useCallback)((measurements) => {
         containerMeasurementsRef.current = measurements;
     }, []);
     // Track the size of the content.
-    const onContentSizeChange = react_1.useCallback((width, height) => {
+    const onContentSizeChange = (0, react_1.useCallback)((width, height) => {
         contentSizeRef.current = { x: width, y: height };
     }, []);
     // Set FlatList and node handle refs.
-    const setFlatListRefs = react_1.useCallback((ref) => {
+    const setFlatListRefs = (0, react_1.useCallback)((ref) => {
         flatListRef.current = ref;
-        nodeHandleRef.current = ref && react_native_1.findNodeHandle(ref);
+        nodeHandleRef.current = ref && (0, react_native_1.findNodeHandle)(ref);
         if (forwardedRef) {
             if (typeof forwardedRef === 'function') {
                 forwardedRef(ref);
@@ -185,13 +189,13 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         }
     }, [forwardedRef]);
     // Update tracked scroll position when list is scrolled.
-    const onScroll = react_1.useCallback((event) => {
+    const onScroll = (0, react_1.useCallback)((event) => {
         const { nativeEvent: { contentOffset } } = event;
         scrollPositionRef.current = { ...contentOffset };
         onScrollProp?.(event);
     }, [onScrollProp]);
     // Handle auto-scrolling on interval.
-    const doScroll = react_1.useCallback(() => {
+    const doScroll = (0, react_1.useCallback)(() => {
         const flatList = flatListRef.current;
         const containerMeasurements = containerMeasurementsRef.current;
         const contentSize = contentSizeRef.current;
@@ -230,7 +234,7 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         }
     }, [horizontal]);
     // Start the auto-scrolling interval.
-    const startScroll = react_1.useCallback(() => {
+    const startScroll = (0, react_1.useCallback)(() => {
         if (scrollIntervalRef.current) {
             return;
         }
@@ -238,21 +242,21 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         scrollIntervalRef.current = setInterval(doScroll, 250);
     }, [doScroll]);
     // Stop the auto-scrolling interval.
-    const stopScroll = react_1.useCallback(() => {
+    const stopScroll = (0, react_1.useCallback)(() => {
         if (scrollIntervalRef.current) {
             clearInterval(scrollIntervalRef.current);
             scrollIntervalRef.current = undefined;
         }
     }, []);
     // If startScroll changes, refresh our interval.
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (scrollIntervalRef.current) {
             stopScroll();
             startScroll();
         }
     }, [stopScroll, startScroll]);
     // Reset all shift values.
-    const resetShifts = react_1.useCallback(() => {
+    const resetShifts = (0, react_1.useCallback)(() => {
         shiftsRef.current.forEach((shift) => {
             // eslint-disable-next-line no-param-reassign
             shift.targetValue = 0;
@@ -260,7 +264,7 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         });
     }, []);
     // Update shift values in response to a drag.
-    const updateShifts = react_1.useCallback(({ index: fromIndex, originalIndex: fromOriginalIndex }, { index: toIndex }) => {
+    const updateShifts = (0, react_1.useCallback)(({ index: fromIndex, originalIndex: fromOriginalIndex }, { index: toIndex }) => {
         const { width = 50, height = 50 } = itemMeasurementsRef.current[fromOriginalIndex] ?? {};
         const offset = horizontal ? width : height;
         originalIndexes.forEach((originalIndex, index) => {
@@ -283,7 +287,7 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         });
     }, [originalIndexes, horizontal]);
     // Calculate absolute position of list item for snapback.
-    const calculateSnapbackTarget = react_1.useCallback(({ index: fromIndex, originalIndex: fromOriginalIndex }, { index: toIndex, originalIndex: toOriginalIndex }) => {
+    const calculateSnapbackTarget = (0, react_1.useCallback)(({ index: fromIndex, originalIndex: fromOriginalIndex }, { index: toIndex, originalIndex: toOriginalIndex }) => {
         const containerMeasurements = containerMeasurementsRef.current;
         const itemMeasurements = itemMeasurementsRef.current;
         if (containerMeasurements) {
@@ -333,7 +337,7 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         return types_1.DraxSnapbackTargetPreset.None;
     }, [horizontal, itemCount, originalIndexes]);
     // Stop auto-scrolling, and potentially update shifts and reorder data.
-    const handleInternalDragEnd = react_1.useCallback((eventData, totalDragEnd) => {
+    const handleInternalDragEnd = (0, react_1.useCallback)((eventData, totalDragEnd) => {
         // Always stop auto-scroll on drag end.
         scrollStateRef.current = types_1.AutoScrollDirection.None;
         stopScroll();
@@ -355,7 +359,7 @@ const DraxListUnforwarded = (props, forwardedRef) => {
                     ...eventData,
                     toIndex,
                     toItem,
-                    cancelled: types_1.isWithCancelledFlag(eventData) ? eventData.cancelled : false,
+                    cancelled: (0, types_1.isWithCancelledFlag)(eventData) ? eventData.cancelled : false,
                     index: fromIndex,
                     item: data?.[fromOriginalIndex],
                 });
@@ -405,7 +409,7 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         onItemReorder,
     ]);
     // Monitor drag starts to handle callbacks.
-    const onMonitorDragStart = react_1.useCallback((eventData) => {
+    const onMonitorDragStart = (0, react_1.useCallback)((eventData) => {
         const { dragged } = eventData;
         // First, check if we need to do anything.
         if (reorderable && dragged.parentId === id) {
@@ -426,7 +430,7 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         onItemDragStart,
     ]);
     // Monitor drags to react with item shifts and auto-scrolling.
-    const onMonitorDragOver = react_1.useCallback((eventData) => {
+    const onMonitorDragOver = (0, react_1.useCallback)((eventData) => {
         const { dragged, receiver, monitorOffsetRatio } = eventData;
         // First, check if we need to shift items.
         if (reorderable && dragged.parentId === id) {
@@ -477,17 +481,17 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         onItemDragPositionChange,
     ]);
     // Monitor drag exits to stop scrolling, update shifts, and update draggedToIndex.
-    const onMonitorDragExit = react_1.useCallback((eventData) => handleInternalDragEnd(eventData, false), [handleInternalDragEnd]);
+    const onMonitorDragExit = (0, react_1.useCallback)((eventData) => handleInternalDragEnd(eventData, false), [handleInternalDragEnd]);
     /*
      * Monitor drag ends to stop scrolling, update shifts, and possibly reorder.
      * This addresses the Android case where if we drag a list item and auto-scroll
      * too far, the drag gets cancelled.
      */
-    const onMonitorDragEnd = react_1.useCallback((eventData) => handleInternalDragEnd(eventData, true), [handleInternalDragEnd]);
+    const onMonitorDragEnd = (0, react_1.useCallback)((eventData) => handleInternalDragEnd(eventData, true), [handleInternalDragEnd]);
     // Monitor drag drops to stop scrolling, update shifts, and possibly reorder.
-    const onMonitorDragDrop = react_1.useCallback((eventData) => handleInternalDragEnd(eventData, true), [handleInternalDragEnd]);
+    const onMonitorDragDrop = (0, react_1.useCallback)((eventData) => handleInternalDragEnd(eventData, true), [handleInternalDragEnd]);
     return (react_1.default.createElement(DraxView_1.DraxView, { id: id, style: style, scrollPositionRef: scrollPositionRef, onMeasure: onMeasureContainer, onMonitorDragStart: onMonitorDragStart, onMonitorDragOver: onMonitorDragOver, onMonitorDragExit: onMonitorDragExit, onMonitorDragEnd: onMonitorDragEnd, onMonitorDragDrop: onMonitorDragDrop },
         react_1.default.createElement(DraxSubprovider_1.DraxSubprovider, { parent: { id, nodeHandleRef } },
-            react_1.default.createElement(react_native_1.FlatList, Object.assign({}, flatListProps, { style: flatListStyle, ref: setFlatListRefs, renderItem: renderItem, onScroll: onScroll, onContentSizeChange: onContentSizeChange, data: reorderedData })))));
+            react_1.default.createElement(react_native_1.FlatList, { ...flatListProps, style: flatListStyle, ref: setFlatListRefs, renderItem: renderItem, onScroll: onScroll, onContentSizeChange: onContentSizeChange, data: reorderedData }))));
 };
-exports.DraxList = react_1.forwardRef(DraxListUnforwarded);
+exports.DraxList = (0, react_1.forwardRef)(DraxListUnforwarded);

package/build/DraxProvider.d.ts

@@ -1,3 +1,4 @@
-import { FunctionComponent } from 'react';
+/// <reference types="react" />
+/// <reference types="react" />
 import { DraxProviderProps } from './types';
-export declare const DraxProvider: FunctionComponent<DraxProviderProps>;
+export declare const DraxProvider: ({ debug, style, children, }: DraxProviderProps) => JSX.Element;

package/build/DraxProvider.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -27,11 +31,11 @@ const hooks_1 = require("./hooks");
 const DraxContext_1 = require("./DraxContext");
 const types_1 = require("./types");
 const math_1 = require("./math");
-const DraxProvider = ({ debug = false, children }) => {
-    const { getViewState, getTrackingStatus, dispatch, } = hooks_1.useDraxState();
-    const { getAbsoluteViewData, getTrackingDragged, getTrackingReceiver, getTrackingMonitorIds, getTrackingMonitors, getDragPositionData, findMonitorsAndReceiver, getHoverItems, registerView, updateViewProtocol, updateViewMeasurements, resetReceiver, resetDrag, startDrag, updateDragPosition, updateReceiver, setMonitorIds, unregisterView, } = hooks_1.useDraxRegistry(dispatch);
-    const rootNodeHandleRef = react_1.useRef(null);
-    const handleGestureStateChange = react_1.useCallback((id, event) => {
+const DraxProvider = ({ debug = false, style = styles.provider, children, }) => {
+    const { getViewState, getTrackingStatus, dispatch, } = (0, hooks_1.useDraxState)();
+    const { getAbsoluteViewData, getTrackingDragged, getTrackingReceiver, getTrackingMonitorIds, getTrackingMonitors, getDragPositionData, findMonitorsAndReceiver, getHoverItems, registerView, updateViewProtocol, updateViewMeasurements, resetReceiver, resetDrag, startDrag, updateDragPosition, updateReceiver, setMonitorIds, unregisterView, } = (0, hooks_1.useDraxRegistry)(dispatch);
+    const rootNodeHandleRef = (0, react_1.useRef)(null);
+    const handleGestureStateChange = (0, react_1.useCallback)((id, event) => {
         if (debug) {
             console.log(`handleGestureStateChange(${id}, ${JSON.stringify(event, null, 2)})`);
         }
@@ -199,7 +203,7 @@ const DraxProvider = ({ debug = false, children }) => {
                 if (monitors.length > 0) {
                     monitors.forEach(({ data: monitorData }) => {
                         if (monitorData) {
-                            const { relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio, } = math_1.getRelativePosition(dragAbsolutePosition, monitorData.absoluteMeasurements);
+                            const { relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio, } = (0, math_1.getRelativePosition)(dragAbsolutePosition, monitorData.absoluteMeasurements);
                             response = monitorData.protocol.onMonitorDragDrop?.({
                                 ...eventData,
                                 monitorOffset,
@@ -249,7 +253,7 @@ const DraxProvider = ({ debug = false, children }) => {
                         receiver: eventReceiverData,
                     };
                     monitors.forEach(({ data: monitorData }) => {
-                        const { relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio, } = math_1.getRelativePosition(dragAbsolutePosition, monitorData.absoluteMeasurements);
+                        const { relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio, } = (0, math_1.getRelativePosition)(dragAbsolutePosition, monitorData.absoluteMeasurements);
                         response = monitorData.protocol.onMonitorDragEnd?.({
                             ...monitorEventData,
                             monitorOffset,
@@ -373,7 +377,7 @@ const DraxProvider = ({ debug = false, children }) => {
         setMonitorIds,
         debug,
     ]);
-    const handleGestureEvent = react_1.useCallback((id, event) => {
+    const handleGestureEvent = (0, react_1.useCallback)((id, event) => {
         if (debug) {
             console.log(`handleGestureEvent(${id}, ${JSON.stringify(event, null, 2)})`);
         }
@@ -570,7 +574,7 @@ const DraxProvider = ({ debug = false, children }) => {
                 // Drag has exited monitor.
                 const monitorData = getAbsoluteViewData(monitorId);
                 if (monitorData) {
-                    const { relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio, } = math_1.getRelativePosition(dragAbsolutePosition, monitorData.absoluteMeasurements);
+                    const { relativePosition: monitorOffset, relativePositionRatio: monitorOffsetRatio, } = (0, math_1.getRelativePosition)(dragAbsolutePosition, monitorData.absoluteMeasurements);
                     monitorData.protocol.onMonitorDragExit?.({
                         ...monitorEventDataStub,
                         monitorOffset,
@@ -621,11 +625,11 @@ const DraxProvider = ({ debug = false, children }) => {
             }
         }
     });
-    const setRootNodeHandleRef = react_1.useCallback((ref) => {
-        rootNodeHandleRef.current = ref && react_native_1.findNodeHandle(ref);
+    const setRootNodeHandleRef = (0, react_1.useCallback)((ref) => {
+        rootNodeHandleRef.current = ref && (0, react_native_1.findNodeHandle)(ref);
     }, []);
     return (react_1.default.createElement(DraxContext_1.DraxContext.Provider, { value: contextValue },
-        react_1.default.createElement(react_native_1.View, { style: styles.provider, ref: setRootNodeHandleRef },
+        react_1.default.createElement(react_native_1.View, { style: style, ref: setRootNodeHandleRef },
             children,
             react_1.default.createElement(react_native_1.View, { style: react_native_1.StyleSheet.absoluteFill, pointerEvents: "none" }, hoverViews))));
 };

package/build/DraxScrollView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -30,26 +34,26 @@ const params_1 = require("./params");
 const DraxScrollViewUnforwarded = (props, forwardedRef) => {
     const { children, style, onScroll: onScrollProp, onContentSizeChange: onContentSizeChangeProp, scrollEventThrottle = params_1.defaultScrollEventThrottle, autoScrollIntervalLength = params_1.defaultAutoScrollIntervalLength, autoScrollJumpRatio = params_1.defaultAutoScrollJumpRatio, autoScrollBackThreshold = params_1.defaultAutoScrollBackThreshold, autoScrollForwardThreshold = params_1.defaultAutoScrollForwardThreshold, id: idProp, ...scrollViewProps } = props;
     // The unique identifer for this view.
-    const id = hooks_1.useDraxId(idProp);
+    const id = (0, hooks_1.useDraxId)(idProp);
     // Scrollable view, used for scrolling.
-    const scrollRef = react_1.useRef(null);
+    const scrollRef = (0, react_1.useRef)(null);
     // ScrollView node handle, used for measuring children.
-    const nodeHandleRef = react_1.useRef(null);
+    const nodeHandleRef = (0, react_1.useRef)(null);
     // Container view measurements, for scrolling by percentage.
-    const containerMeasurementsRef = react_1.useRef(undefined);
+    const containerMeasurementsRef = (0, react_1.useRef)(undefined);
     // Content size, for scrolling by percentage.
-    const contentSizeRef = react_1.useRef(undefined);
+    const contentSizeRef = (0, react_1.useRef)(undefined);
     // Scroll position, for Drax bounds checking and auto-scrolling.
-    const scrollPositionRef = react_1.useRef({ x: 0, y: 0 });
+    const scrollPositionRef = (0, react_1.useRef)({ x: 0, y: 0 });
     // Auto-scroll state.
-    const autoScrollStateRef = react_1.useRef({
+    const autoScrollStateRef = (0, react_1.useRef)({
         x: types_1.AutoScrollDirection.None,
         y: types_1.AutoScrollDirection.None,
     });
     // Auto-scroll interval.
-    const autoScrollIntervalRef = react_1.useRef(undefined);
+    const autoScrollIntervalRef = (0, react_1.useRef)(undefined);
     // Handle auto-scrolling on interval.
-    const doScroll = react_1.useCallback(() => {
+    const doScroll = (0, react_1.useCallback)(() => {
         const scroll = scrollRef.current;
         const containerMeasurements = containerMeasurementsRef.current;
         const contentSize = contentSizeRef.current;
@@ -95,7 +99,7 @@ const DraxScrollViewUnforwarded = (props, forwardedRef) => {
         }
     }, [autoScrollJumpRatio]);
     // Start the auto-scrolling interval.
-    const startScroll = react_1.useCallback(() => {
+    const startScroll = (0, react_1.useCallback)(() => {
         if (autoScrollIntervalRef.current) {
             return;
         }
@@ -103,32 +107,32 @@ const DraxScrollViewUnforwarded = (props, forwardedRef) => {
         autoScrollIntervalRef.current = setInterval(doScroll, autoScrollIntervalLength);
     }, [doScroll, autoScrollIntervalLength]);
     // Stop the auto-scrolling interval.
-    const stopScroll = react_1.useCallback(() => {
+    const stopScroll = (0, react_1.useCallback)(() => {
         if (autoScrollIntervalRef.current) {
             clearInterval(autoScrollIntervalRef.current);
             autoScrollIntervalRef.current = undefined;
         }
     }, []);
     // If startScroll changes, refresh our interval.
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (autoScrollIntervalRef.current) {
             stopScroll();
             startScroll();
         }
     }, [stopScroll, startScroll]);
     // Clear auto-scroll direction and stop the auto-scrolling interval.
-    const resetScroll = react_1.useCallback(() => {
+    const resetScroll = (0, react_1.useCallback)(() => {
         const autoScrollState = autoScrollStateRef.current;
         autoScrollState.x = types_1.AutoScrollDirection.None;
         autoScrollState.y = types_1.AutoScrollDirection.None;
         stopScroll();
     }, [stopScroll]);
     // Track the size of the container view.
-    const onMeasureContainer = react_1.useCallback((measurements) => {
+    const onMeasureContainer = (0, react_1.useCallback)((measurements) => {
         containerMeasurementsRef.current = measurements;
     }, []);
     // Monitor drag-over events to react with auto-scrolling.
-    const onMonitorDragOver = react_1.useCallback((event) => {
+    const onMonitorDragOver = (0, react_1.useCallback)((event) => {
         const { monitorOffsetRatio } = event;
         const autoScrollState = autoScrollStateRef.current;
         if (monitorOffsetRatio.x >= autoScrollForwardThreshold) {
@@ -162,9 +166,9 @@ const DraxScrollViewUnforwarded = (props, forwardedRef) => {
         autoScrollForwardThreshold,
     ]);
     // Set the ScrollView and node handle refs.
-    const setScrollViewRefs = react_1.useCallback((ref) => {
+    const setScrollViewRefs = (0, react_1.useCallback)((ref) => {
         scrollRef.current = ref;
-        nodeHandleRef.current = ref && react_native_1.findNodeHandle(ref);
+        nodeHandleRef.current = ref && (0, react_native_1.findNodeHandle)(ref);
         if (forwardedRef) {
             if (typeof forwardedRef === 'function') {
                 forwardedRef(ref);
@@ -176,18 +180,18 @@ const DraxScrollViewUnforwarded = (props, forwardedRef) => {
         }
     }, [forwardedRef]);
     // Track content size.
-    const onContentSizeChange = react_1.useCallback((width, height) => {
+    const onContentSizeChange = (0, react_1.useCallback)((width, height) => {
         contentSizeRef.current = { x: width, y: height };
         return onContentSizeChangeProp?.(width, height);
     }, [onContentSizeChangeProp]);
     // Update tracked scroll position when list is scrolled.
-    const onScroll = react_1.useCallback((event) => {
+    const onScroll = (0, react_1.useCallback)((event) => {
         const { nativeEvent: { contentOffset } } = event;
         scrollPositionRef.current = { ...contentOffset };
         return onScrollProp?.(event);
     }, [onScrollProp]);
     return id ? (react_1.default.createElement(DraxView_1.DraxView, { id: id, style: style, scrollPositionRef: scrollPositionRef, onMeasure: onMeasureContainer, onMonitorDragOver: onMonitorDragOver, onMonitorDragExit: resetScroll, onMonitorDragEnd: resetScroll, onMonitorDragDrop: resetScroll },
         react_1.default.createElement(DraxSubprovider_1.DraxSubprovider, { parent: { id, nodeHandleRef } },
-            react_1.default.createElement(react_native_1.ScrollView, Object.assign({}, scrollViewProps, { ref: setScrollViewRefs, onContentSizeChange: onContentSizeChange, onScroll: onScroll, scrollEventThrottle: scrollEventThrottle }), children)))) : null;
+            react_1.default.createElement(react_native_1.ScrollView, { ...scrollViewProps, ref: setScrollViewRefs, onContentSizeChange: onContentSizeChange, onScroll: onScroll, scrollEventThrottle: scrollEventThrottle }, children)))) : null;
 };
-exports.DraxScrollView = react_1.forwardRef(DraxScrollViewUnforwarded);
+exports.DraxScrollView = (0, react_1.forwardRef)(DraxScrollViewUnforwarded);

package/build/DraxSubprovider.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const DraxContext_1 = require("./DraxContext");
 const hooks_1 = require("./hooks");
 const DraxSubprovider = ({ parent, children }) => {
-    const contextValue = hooks_1.useDraxContext();
+    const contextValue = (0, hooks_1.useDraxContext)();
     const subContextValue = {
         ...contextValue,
         parent,

package/build/DraxView.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -57,22 +61,22 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
         || !!onMonitorDragEnd
         || !!onMonitorDragDrop);
     // The unique identifier for this view.
-    const id = hooks_1.useDraxId(idProp);
+    const id = (0, hooks_1.useDraxId)(idProp);
     // The underlying View, for measuring.
-    const viewRef = react_1.useRef(null);
+    const viewRef = (0, react_1.useRef)(null);
     // The underlying View node handle, used for subprovider nesting if this is a Drax parent view.
-    const nodeHandleRef = react_1.useRef(null);
+    const nodeHandleRef = (0, react_1.useRef)(null);
     // This view's measurements, for reference.
-    const measurementsRef = react_1.useRef(undefined);
+    const measurementsRef = (0, react_1.useRef)(undefined);
     // Connect with Drax.
-    const { getViewState, getTrackingStatus, registerView, unregisterView, updateViewProtocol, updateViewMeasurements, handleGestureEvent, handleGestureStateChange, rootNodeHandleRef, parent: contextParent, } = hooks_1.useDraxContext();
+    const { getViewState, getTrackingStatus, registerView, unregisterView, updateViewProtocol, updateViewMeasurements, handleGestureEvent, handleGestureStateChange, rootNodeHandleRef, parent: contextParent, } = (0, hooks_1.useDraxContext)();
     // Identify Drax parent view (if any) from context or prop override.
     const parent = parentProp ?? contextParent;
     const parentId = parent?.id;
     // Identify parent node handle ref.
     const parentNodeHandleRef = parent ? parent.nodeHandleRef : rootNodeHandleRef;
     // Register and unregister with Drax context when necessary.
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         // Register with Drax context after we have an id.
         registerView({ id, parentId, scrollPositionRef });
         // Unregister when we unmount or id changes.
@@ -85,7 +89,7 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
         unregisterView,
     ]);
     // Combine hover styles for given internal render props.
-    const getCombinedHoverStyle = react_1.useCallback(({ viewState: { dragStatus }, trackingStatus: { receiving: anyReceiving }, hoverPosition, dimensions, }) => {
+    const getCombinedHoverStyle = (0, react_1.useCallback)(({ viewState: { dragStatus }, trackingStatus: { receiving: anyReceiving }, hoverPosition, dimensions, }) => {
         // Start with base style, calculated dimensions, and hover base style.
         const hoverStyles = [
             style,
@@ -106,10 +110,10 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
             hoverStyles.push(hoverDragReleasedStyle);
         }
         // Remove any layout styles.
-        const flattenedHoverStyle = transform_1.flattenStylesWithoutLayout(hoverStyles);
+        const flattenedHoverStyle = (0, transform_1.flattenStylesWithoutLayout)(hoverStyles);
         // Apply hover transform.
         const transform = hoverPosition.getTranslateTransform();
-        return transform_1.mergeStyleTransform(flattenedHoverStyle, transform);
+        return (0, transform_1.mergeStyleTransform)(flattenedHoverStyle, transform);
     }, [
         style,
         hoverStyle,
@@ -119,7 +123,7 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
         hoverDragReleasedStyle,
     ]);
     // Internal render function for hover views, used in protocol by provider.
-    const internalRenderHoverView = react_1.useMemo(() => ((draggable && !noHover)
+    const internalRenderHoverView = (0, react_1.useMemo)(() => ((draggable && !noHover)
         ? (internalProps) => {
             let content;
             const render = renderHoverContent ?? renderContent;
@@ -136,7 +140,7 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
             else {
                 content = children;
             }
-            return (react_1.default.createElement(react_native_1.Animated.View, Object.assign({}, props, { key: internalProps.key, style: getCombinedHoverStyle(internalProps) }), content));
+            return (react_1.default.createElement(react_native_1.Animated.View, { ...props, key: internalProps.key, style: getCombinedHoverStyle(internalProps) }, content));
         }
         : undefined), [
         draggable,
@@ -148,7 +152,7 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
         children,
     ]);
     // Report updates to our protocol callbacks when we have an id and whenever the props change.
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         updateViewProtocol({
             id,
             protocol: {
@@ -221,17 +225,17 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
         internalRenderHoverView,
     ]);
     // Connect gesture state change handling into Drax context, tied to this id.
-    const onHandlerStateChange = react_1.useCallback(({ nativeEvent }) => handleGestureStateChange(id, nativeEvent), [id, handleGestureStateChange]);
+    const onHandlerStateChange = (0, react_1.useCallback)(({ nativeEvent }) => handleGestureStateChange(id, nativeEvent), [id, handleGestureStateChange]);
     // Create throttled gesture event handler, tied to this id.
-    const throttledHandleGestureEvent = react_1.useMemo(() => lodash_throttle_1.default((event) => {
+    const throttledHandleGestureEvent = (0, react_1.useMemo)(() => (0, lodash_throttle_1.default)((event) => {
         // Pass the event up to the Drax context.
         handleGestureEvent(id, event);
     }, 10), [id, handleGestureEvent]);
     // Connect gesture event handling into Drax context, extracting nativeEvent.
-    const onGestureEvent = react_1.useCallback(({ nativeEvent }) => throttledHandleGestureEvent(nativeEvent), [throttledHandleGestureEvent]);
+    const onGestureEvent = (0, react_1.useCallback)(({ nativeEvent }) => throttledHandleGestureEvent(nativeEvent), [throttledHandleGestureEvent]);
     // Build a callback which will report our measurements to Drax context,
     // onMeasure, and an optional measurement handler.
-    const buildMeasureCallback = react_1.useCallback((measurementHandler) => ((x, y, width, height) => {
+    const buildMeasureCallback = (0, react_1.useCallback)((measurementHandler) => ((x, y, width, height) => {
         /*
          * In certain cases (on Android), all of these values can be
          * undefined when the view is not on screen; This should not
@@ -253,10 +257,10 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
         measurementHandler?.(measurements);
     }), [id, updateViewMeasurements, onMeasure]);
     // Callback which will report our measurements to Drax context and onMeasure.
-    const updateMeasurements = react_1.useMemo(() => buildMeasureCallback(), [buildMeasureCallback]);
+    const updateMeasurements = (0, react_1.useMemo)(() => buildMeasureCallback(), [buildMeasureCallback]);
     // Measure and report our measurements to Drax context, onMeasure, and an
     // optional measurement handler on demand.
-    const measureWithHandler = react_1.useCallback((measurementHandler) => {
+    const measureWithHandler = (0, react_1.useCallback)((measurementHandler) => {
         const view = viewRef.current;
         if (view) {
             const nodeHandle = parentNodeHandleRef.current;
@@ -282,21 +286,21 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
         updateMeasurements,
     ]);
     // Measure and send our measurements to Drax context and onMeasure, used when this view finishes layout.
-    const onLayout = react_1.useCallback(() => {
+    const onLayout = (0, react_1.useCallback)(() => {
         // console.log(`onLayout ${id}`);
         measureWithHandler();
     }, [measureWithHandler]);
     // Establish dimensions/orientation change handler when necessary.
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const handler = ( /* { screen: { width, height } }: { screen: ScaledSize } */) => {
             // console.log(`Dimensions changed to ${width}/${height}`);
             setTimeout(measureWithHandler, 100);
         };
-        react_native_1.Dimensions.addEventListener('change', handler);
-        return () => react_native_1.Dimensions.removeEventListener('change', handler);
+        const listener = react_native_1.Dimensions.addEventListener('change', handler);
+        return () => listener.remove();
     }, [measureWithHandler]);
     // Register and unregister externally when necessary.
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (registration) { // Register externally when registration is set.
             registration({
                 id,
@@ -310,9 +314,9 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
     const viewState = getViewState(id);
     const trackingStatus = getTrackingStatus();
     // Get full render props for non-hovering view content.
-    const getRenderContentProps = react_1.useCallback(() => {
+    const getRenderContentProps = (0, react_1.useCallback)(() => {
         const measurements = measurementsRef.current;
-        const dimensions = measurements && math_1.extractDimensions(measurements);
+        const dimensions = measurements && (0, math_1.extractDimensions)(measurements);
         return {
             viewState,
             trackingStatus,
@@ -326,7 +330,7 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
         children,
     ]);
     // Combined style for current render-related state.
-    const combinedStyle = react_1.useMemo(() => {
+    const combinedStyle = (0, react_1.useMemo)(() => {
         const { dragStatus = types_1.DraxViewDragStatus.Inactive, receiveStatus = types_1.DraxViewReceiveStatus.Inactive, } = viewState ?? {};
         const { dragging: anyDragging, receiving: anyReceiving, } = trackingStatus;
         // Start with base style.
@@ -380,7 +384,7 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
         otherDraggingWithoutReceiverStyle,
     ]);
     // The rendered React children of this view.
-    const renderedChildren = react_1.useMemo(() => {
+    const renderedChildren = (0, react_1.useMemo)(() => {
         let content;
         if (renderContent) {
             const renderContentProps = getRenderContentProps();
@@ -402,11 +406,11 @@ const DraxView = ({ onDragStart, onDrag, onDragEnter, onDragOver, onDragExit, on
         id,
         nodeHandleRef,
     ]);
-    const setViewRefs = react_1.useCallback((ref) => {
+    const setViewRefs = (0, react_1.useCallback)((ref) => {
         viewRef.current = ref;
-        nodeHandleRef.current = ref && react_native_1.findNodeHandle(ref);
+        nodeHandleRef.current = ref && (0, react_native_1.findNodeHandle)(ref);
     }, []);
     return (react_1.default.createElement(react_native_gesture_handler_1.LongPressGestureHandler, { maxDist: Number.MAX_SAFE_INTEGER, shouldCancelWhenOutside: false, minDurationMs: longPressDelay, onHandlerStateChange: onHandlerStateChange, onGestureEvent: onGestureEvent /* Workaround incorrect typings. */, enabled: draggable },
-        react_1.default.createElement(react_native_1.Animated.View, Object.assign({}, props, { style: combinedStyle, ref: setViewRefs, onLayout: onLayout, collapsable: false }), renderedChildren)));
+        react_1.default.createElement(react_native_1.Animated.View, { ...props, style: combinedStyle, ref: setViewRefs, onLayout: onLayout, collapsable: false }, renderedChildren)));
 };
 exports.DraxView = DraxView;

package/build/hooks/useDraxContext.js

@@ -4,7 +4,7 @@ exports.useDraxContext = void 0;
 const react_1 = require("react");
 const DraxContext_1 = require("../DraxContext");
 const useDraxContext = () => {
-    const drax = react_1.useContext(DraxContext_1.DraxContext);
+    const drax = (0, react_1.useContext)(DraxContext_1.DraxContext);
     if (!drax) {
         throw Error('No DraxProvider found');
     }

package/build/hooks/useDraxId.d.ts

@@ -1 +1 @@
-export declare const useDraxId: (explicitId?: string | undefined) => string;
+export declare const useDraxId: (explicitId?: string) => string;

package/build/hooks/useDraxId.js

@@ -6,7 +6,7 @@ const math_1 = require("../math");
 // Return explicitId, or a consistent randomly generated identifier if explicitId is falsy.
 const useDraxId = (explicitId) => {
     // A generated unique identifier for this view, for use if id prop is not specified.
-    const [randomId] = react_1.useState(math_1.generateRandomId);
+    const [randomId] = (0, react_1.useState)(math_1.generateRandomId);
     // We use || rather than ?? for the return value in case explicitId is an empty string.
     return explicitId || randomId;
 };

package/build/hooks/useDraxRegistry.d.ts

@@ -55,7 +55,7 @@ export declare const useDraxRegistry: (stateDispatch: DraxStateDispatch) => {
     updateViewProtocol: (payload: UpdateViewProtocolPayload) => void;
     updateViewMeasurements: (payload: UpdateViewMeasurementsPayload) => void;
     resetReceiver: () => void;
-    resetDrag: (snapbackTarget?: DraxSnapbackTarget | undefined) => void;
+    resetDrag: (snapbackTarget?: DraxSnapbackTarget) => void;
     startDrag: (payload: StartDragPayload) => {
         dragAbsolutePosition: Position;
         dragTranslation: {

package/build/hooks/useDraxRegistry.js

@@ -57,7 +57,7 @@ const getAbsoluteMeasurementsForViewFromRegistry = (registry, { measurements, pa
         x: parentX + x - offsetX,
         y: parentY + y - offsetY,
     };
-    return clipped ? math_1.clipMeasurements(abs, parentMeasurements) : abs;
+    return clipped ? (0, math_1.clipMeasurements)(abs, parentMeasurements) : abs;
 };
 /** Get data, including absolute measurements, for a registered view by its id. */
 const getAbsoluteViewDataFromRegistry = (registry, id) => {
@@ -119,7 +119,7 @@ const findMonitorsAndReceiverInRegistry = (registry, absolutePosition, excludeVi
             return;
         }
         // console.log(`absolute measurements: ${JSON.stringify(absoluteMeasurements, null, 2)}`);
-        if (math_1.isPointInside(absolutePosition, absoluteMeasurements)) {
+        if ((0, math_1.isPointInside)(absolutePosition, absoluteMeasurements)) {
             // Drag point is within this target.
             const foundView = {
                 id: targetId,
@@ -128,7 +128,7 @@ const findMonitorsAndReceiverInRegistry = (registry, absolutePosition, excludeVi
                     measurements: target.measurements,
                     absoluteMeasurements,
                 },
-                ...math_1.getRelativePosition(absolutePosition, absoluteMeasurements),
+                ...(0, math_1.getRelativePosition)(absolutePosition, absoluteMeasurements),
             };
             if (monitoring) {
                 // Add it to the list of monitors.
@@ -199,7 +199,7 @@ const getHoverItemsFromRegistry = (registry) => {
                         internalRenderHoverView,
                         key: releaseId,
                         id: viewId,
-                        dimensions: math_1.extractDimensions(measurements),
+                        dimensions: (0, math_1.extractDimensions)(measurements),
                     });
                 }
             }
@@ -215,7 +215,7 @@ const getHoverItemsFromRegistry = (registry) => {
                 key: `dragged-hover-${draggedId}`,
                 id: draggedId,
                 hoverPosition: registry.drag.hoverPosition,
-                dimensions: math_1.extractDimensions(measurements),
+                dimensions: (0, math_1.extractDimensions)(measurements),
             });
         }
     }
@@ -317,7 +317,7 @@ const resetReceiverInRegistry = ({ drag, stateDispatch }) => {
 };
 /** Track a new release, returning its unique identifier. */
 const createReleaseInRegistry = (registry, release) => {
-    const releaseId = math_1.generateRandomId();
+    const releaseId = (0, math_1.generateRandomId)();
     registry.releaseIds.push(releaseId);
     registry.releaseById[releaseId] = release;
     return releaseId;
@@ -345,7 +345,7 @@ const resetDragInRegistry = (registry, snapbackTarget = types_1.DraxSnapbackTarg
         const { internalRenderHoverView, onSnapbackEnd, snapbackAnimator, animateSnapback = true, snapbackDelay = params_1.defaultSnapbackDelay, snapbackDuration = params_1.defaultSnapbackDuration, } = draggedData.protocol;
         if (internalRenderHoverView && animateSnapback) {
             let toValue;
-            if (types_1.isPosition(snapbackTarget)) {
+            if ((0, types_1.isPosition)(snapbackTarget)) {
                 // Snapback to specified target.
                 toValue = snapbackTarget;
             }
@@ -590,9 +590,9 @@ const unregisterViewInRegistry = (registry, { id }) => {
 /** Create a Drax registry and wire up all of the methods. */
 const useDraxRegistry = (stateDispatch) => {
     /** Registry for tracking views and drags. */
-    const registryRef = react_1.useRef(createInitialRegistry(stateDispatch));
+    const registryRef = (0, react_1.useRef)(createInitialRegistry(stateDispatch));
     /** Ensure that the registry has the latest version of state dispatch, although it should never change. */
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         registryRef.current.stateDispatch = stateDispatch;
     }, [stateDispatch]);
     /**
@@ -601,61 +601,61 @@ const useDraxRegistry = (stateDispatch) => {
      *
      */
     /** Get data for a registered view by its id. */
-    const getViewData = react_1.useCallback((id) => getViewDataFromRegistry(registryRef.current, id), []);
+    const getViewData = (0, react_1.useCallback)((id) => getViewDataFromRegistry(registryRef.current, id), []);
     /** Get data, including absolute measurements, for a registered view by its id. */
-    const getAbsoluteViewData = react_1.useCallback((id) => getAbsoluteViewDataFromRegistry(registryRef.current, id), []);
+    const getAbsoluteViewData = (0, react_1.useCallback)((id) => getAbsoluteViewDataFromRegistry(registryRef.current, id), []);
     /** Get id and data for the currently dragged view, if any. */
-    const getTrackingDragged = react_1.useCallback(() => getTrackingDraggedFromRegistry(registryRef.current), []);
+    const getTrackingDragged = (0, react_1.useCallback)(() => getTrackingDraggedFromRegistry(registryRef.current), []);
     /** Get id and data for the currently receiving view, if any. */
-    const getTrackingReceiver = react_1.useCallback(() => getTrackingReceiverFromRegistry(registryRef.current), []);
+    const getTrackingReceiver = (0, react_1.useCallback)(() => getTrackingReceiverFromRegistry(registryRef.current), []);
     /** Get ids for all currently monitoring views. */
-    const getTrackingMonitorIds = react_1.useCallback(() => getTrackingMonitorIdsFromRegistry(registryRef.current), []);
+    const getTrackingMonitorIds = (0, react_1.useCallback)(() => getTrackingMonitorIdsFromRegistry(registryRef.current), []);
     /** Get id and data for all currently monitoring views. */
-    const getTrackingMonitors = react_1.useCallback(() => getTrackingMonitorsFromRegistry(registryRef.current), []);
+    const getTrackingMonitors = (0, react_1.useCallback)(() => getTrackingMonitorsFromRegistry(registryRef.current), []);
     /**
      * Get the absolute position of a drag already in progress from touch
      * coordinates within the immediate parent view of the dragged view.
      */
-    const getDragPositionData = react_1.useCallback((params) => (getDragPositionDataFromRegistry(registryRef.current, params)), []);
+    const getDragPositionData = (0, react_1.useCallback)((params) => (getDragPositionDataFromRegistry(registryRef.current, params)), []);
     /**
      * Find all monitoring views and the latest receptive view that
      * contain the touch coordinates, excluding the specified view.
      */
-    const findMonitorsAndReceiver = react_1.useCallback((absolutePosition, excludeViewId) => (findMonitorsAndReceiverInRegistry(registryRef.current, absolutePosition, excludeViewId)), []);
+    const findMonitorsAndReceiver = (0, react_1.useCallback)((absolutePosition, excludeViewId) => (findMonitorsAndReceiverInRegistry(registryRef.current, absolutePosition, excludeViewId)), []);
     /** Get the array of hover items for dragged and released views */
-    const getHoverItems = react_1.useCallback(() => getHoverItemsFromRegistry(registryRef.current), []);
+    const getHoverItems = (0, react_1.useCallback)(() => getHoverItemsFromRegistry(registryRef.current), []);
     /**
      *
      * Imperative methods without state reactions (data management only).
      *
      */
     /** Update a view's protocol callbacks/data. */
-    const updateViewProtocol = react_1.useCallback((payload) => updateViewProtocolInRegistry(registryRef.current, payload), []);
+    const updateViewProtocol = (0, react_1.useCallback)((payload) => updateViewProtocolInRegistry(registryRef.current, payload), []);
     /** Update a view's measurements. */
-    const updateViewMeasurements = react_1.useCallback((payload) => updateViewMeasurementsInRegistry(registryRef.current, payload), []);
+    const updateViewMeasurements = (0, react_1.useCallback)((payload) => updateViewMeasurementsInRegistry(registryRef.current, payload), []);
     /**
      *
      * Imperative methods with potential state reactions.
      *
      */
     /** Register a Drax view. */
-    const registerView = react_1.useCallback((payload) => registerViewInRegistry(registryRef.current, payload), []);
+    const registerView = (0, react_1.useCallback)((payload) => registerViewInRegistry(registryRef.current, payload), []);
     /** Reset the receiver in drag tracking, if any. */
-    const resetReceiver = react_1.useCallback(() => resetReceiverInRegistry(registryRef.current), []);
+    const resetReceiver = (0, react_1.useCallback)(() => resetReceiverInRegistry(registryRef.current), []);
     /** Reset drag tracking, if any. */
-    const resetDrag = react_1.useCallback((snapbackTarget) => resetDragInRegistry(registryRef.current, snapbackTarget), []);
+    const resetDrag = (0, react_1.useCallback)((snapbackTarget) => resetDragInRegistry(registryRef.current, snapbackTarget), []);
     /** Start tracking a drag. */
-    const startDrag = react_1.useCallback((payload) => startDragInRegistry(registryRef.current, payload), []);
+    const startDrag = (0, react_1.useCallback)((payload) => startDragInRegistry(registryRef.current, payload), []);
     /** Update drag position. */
-    const updateDragPosition = react_1.useCallback((dragAbsolutePosition) => (updateDragPositionInRegistry(registryRef.current, dragAbsolutePosition)), []);
+    const updateDragPosition = (0, react_1.useCallback)((dragAbsolutePosition) => (updateDragPositionInRegistry(registryRef.current, dragAbsolutePosition)), []);
     /** Update the receiver for a drag. */
-    const updateReceiver = react_1.useCallback((receiver, dragged) => (updateReceiverInRegistry(registryRef.current, receiver, dragged)), []);
+    const updateReceiver = (0, react_1.useCallback)((receiver, dragged) => (updateReceiverInRegistry(registryRef.current, receiver, dragged)), []);
     /** Set the monitors for a drag. */
-    const setMonitorIds = react_1.useCallback((monitorIds) => setMonitorIdsInRegistry(registryRef.current, monitorIds), []);
+    const setMonitorIds = (0, react_1.useCallback)((monitorIds) => setMonitorIdsInRegistry(registryRef.current, monitorIds), []);
     /** Unregister a Drax view. */
-    const unregisterView = react_1.useCallback((payload) => unregisterViewInRegistry(registryRef.current, payload), []);
+    const unregisterView = (0, react_1.useCallback)((payload) => unregisterViewInRegistry(registryRef.current, payload), []);
     /** Create the Drax registry object for return, only replacing reference when necessary. */
-    const draxRegistry = react_1.useMemo(() => ({
+    const draxRegistry = (0, react_1.useMemo)(() => ({
         getViewData,
         getAbsoluteViewData,
         getTrackingDragged,

package/build/hooks/useDraxState.js

@@ -35,15 +35,15 @@ const selectViewState = (state, id) => (id === undefined ? undefined : state.vie
 const selectTrackingStatus = (state) => state.trackingStatus;
 /** Collection of Drax action creators */
 exports.actions = {
-    createViewState: typesafe_actions_1.createAction('createViewState')(),
-    updateViewState: typesafe_actions_1.createAction('updateViewState')(),
-    deleteViewState: typesafe_actions_1.createAction('deleteViewState')(),
-    updateTrackingStatus: typesafe_actions_1.createAction('updateTrackingStatus')(),
+    createViewState: (0, typesafe_actions_1.createAction)('createViewState')(),
+    updateViewState: (0, typesafe_actions_1.createAction)('updateViewState')(),
+    deleteViewState: (0, typesafe_actions_1.createAction)('deleteViewState')(),
+    updateTrackingStatus: (0, typesafe_actions_1.createAction)('updateTrackingStatus')(),
 };
 /** The DraxState reducer. */
 const reducer = (state, action) => {
     switch (action.type) {
-        case typesafe_actions_1.getType(exports.actions.createViewState): {
+        case (0, typesafe_actions_1.getType)(exports.actions.createViewState): {
             const { id } = action.payload;
             const viewState = selectViewState(state, id);
             if (viewState) {
@@ -57,7 +57,7 @@ const reducer = (state, action) => {
                 },
             };
         }
-        case typesafe_actions_1.getType(exports.actions.updateViewState): {
+        case (0, typesafe_actions_1.getType)(exports.actions.updateViewState): {
             const { id, viewStateUpdate } = action.payload;
             const viewState = selectViewState(state, id);
             if (viewState) {
@@ -65,7 +65,7 @@ const reducer = (state, action) => {
                     ...viewState,
                     ...viewStateUpdate,
                 };
-                if (lodash_isequal_1.default(viewState, newViewState)) {
+                if ((0, lodash_isequal_1.default)(viewState, newViewState)) {
                     return state;
                 }
                 return {
@@ -78,7 +78,7 @@ const reducer = (state, action) => {
             }
             return state;
         }
-        case typesafe_actions_1.getType(exports.actions.deleteViewState): {
+        case (0, typesafe_actions_1.getType)(exports.actions.deleteViewState): {
             const { id } = action.payload;
             const { [id]: removed, ...viewStateById } = state.viewStateById;
             if (removed) {
@@ -89,7 +89,7 @@ const reducer = (state, action) => {
             }
             return state;
         }
-        case typesafe_actions_1.getType(exports.actions.updateTrackingStatus): {
+        case (0, typesafe_actions_1.getType)(exports.actions.updateTrackingStatus): {
             return {
                 ...state,
                 trackingStatus: {
@@ -105,13 +105,13 @@ const reducer = (state, action) => {
 /** Create a Drax state and wire up its methods. */
 const useDraxState = () => {
     /** Reducer for storing view states and tracking status. */
-    const [state, dispatch] = react_1.useReducer(reducer, undefined, createInitialState);
+    const [state, dispatch] = (0, react_1.useReducer)(reducer, undefined, createInitialState);
     /** Get state for a view by its id. */
-    const getViewState = react_1.useCallback((id) => selectViewState(state, id), [state]);
+    const getViewState = (0, react_1.useCallback)((id) => selectViewState(state, id), [state]);
     /** Get the current tracking status. */
-    const getTrackingStatus = react_1.useCallback(() => selectTrackingStatus(state), [state]);
+    const getTrackingStatus = (0, react_1.useCallback)(() => selectTrackingStatus(state), [state]);
     /** Create the Drax state object for return, only replacing reference when necessary. */
-    const draxState = react_1.useMemo(() => ({
+    const draxState = (0, react_1.useMemo)(() => ({
         getViewState,
         getTrackingStatus,
         dispatch,

package/build/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/build/transform.d.ts

@@ -1,3 +1,4 @@
-import { AnimatedTransform, AnimatedViewStyleProp, AnimatedViewStyleWithoutLayout } from './types';
-export declare const flattenStylesWithoutLayout: (styles: AnimatedViewStyleProp[]) => AnimatedViewStyleWithoutLayout;
-export declare const mergeStyleTransform: (style: AnimatedViewStyleWithoutLayout, transform: AnimatedTransform) => AnimatedViewStyleWithoutLayout;
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+import { AnimatedViewStyleWithoutLayout } from './types';
+export declare const flattenStylesWithoutLayout: (styles: StyleProp<Animated.WithAnimatedValue<ViewStyle>>[]) => AnimatedViewStyleWithoutLayout;
+export declare const mergeStyleTransform: (style: AnimatedViewStyleWithoutLayout, transform: Animated.WithAnimatedValue<ViewStyle['transform']>) => AnimatedViewStyleWithoutLayout;

package/build/types.d.ts

@@ -463,7 +463,9 @@ export interface DraxContextValue {
 }
 /** Optional props that can be passed to a DraxProvider to modify its behavior */
 export interface DraxProviderProps {
+    style?: StyleProp<ViewStyle>;
     debug?: boolean;
+    children?: ReactNode;
 }
 /** Props that are passed to a DraxSubprovider, used internally for nesting views */
 export interface DraxSubproviderProps {
@@ -482,44 +484,30 @@ export interface DraxParentView {
     /** Ref to node handle of the parent, for measuring relative to */
     nodeHandleRef: RefObject<number | null>;
 }
-/** Type augmentation to allow an animated value */
-declare type MaybeAnimated<T> = T | Animated.Value;
-/** Scalar type that can be replaced by an animated value */
-declare type AnimatedScalar = string | number;
-/** Type augmentation to allow a style to support animated values */
-export declare type AnimatedStyle<T> = {
-    [Key in keyof T]: T[Key] extends AnimatedScalar ? MaybeAnimated<T[Key]> : T[Key] extends Array<infer U> ? Array<AnimatedStyle<U>> : AnimatedStyle<T[Key]>;
-};
-/** Style for an Animated.View */
-export declare type AnimatedViewStyle = AnimatedStyle<ViewStyle>;
-/** Style prop for an Animated.View */
-export declare type AnimatedViewStyleProp = StyleProp<AnimatedViewStyle>;
-/** Helper type for coercing the output of Animated.ValueXY.getTranslateTransform() */
-export declare type AnimatedTransform = AnimatedStyle<ViewStyle['transform']>;
 /** Function that receives a Drax view measurement */
 export interface DraxViewMeasurementHandler {
     (measurements: DraxViewMeasurements | undefined): void;
 }
 /** Layout-related style keys that are omitted from hover view styles */
 export declare type LayoutStyleKey = ('margin' | 'marginHorizontal' | 'marginVertical' | 'marginLeft' | 'marginRight' | 'marginTop' | 'marginBottom' | 'marginStart' | 'marginEnd' | 'left' | 'right' | 'top' | 'bottom' | 'flex' | 'flexBasis' | 'flexDirection' | 'flexGrow' | 'flexShrink');
-/** Style for an Animated.View used for a hover view */
-export declare type AnimatedViewStyleWithoutLayout = Omit<AnimatedViewStyle, LayoutStyleKey>;
-/** Style prop for an Animated.View used for a hover view */
+/** Style for a Animated.View used for a hover view */
+export declare type AnimatedViewStyleWithoutLayout = Omit<Animated.WithAnimatedValue<ViewStyle>, LayoutStyleKey>;
+/** Style prop for a Animated.View used for a hover view */
 export declare type AnimatedViewStylePropWithoutLayout = StyleProp<AnimatedViewStyleWithoutLayout>;
 /** Style-related props for a Drax view */
 export interface DraxViewStyleProps {
     /** Custom style prop to allow animated values */
-    style?: AnimatedViewStyleProp;
+    style?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
     /** Additional view style applied while this view is not being dragged or released */
-    dragInactiveStyle?: AnimatedViewStyleProp;
+    dragInactiveStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
     /** Additional view style applied while this view is being dragged */
-    draggingStyle?: AnimatedViewStyleProp;
+    draggingStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
     /** Additional view style applied while this view is being dragged over a receiver */
-    draggingWithReceiverStyle?: AnimatedViewStyleProp;
+    draggingWithReceiverStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
     /** Additional view style applied while this view is being dragged NOT over a receiver */
-    draggingWithoutReceiverStyle?: AnimatedViewStyleProp;
+    draggingWithoutReceiverStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
     /** Additional view style applied while this view has just been released from a drag */
-    dragReleasedStyle?: AnimatedViewStyleProp;
+    dragReleasedStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
     /** Additional view style applied to the hovering copy of this view during drag/release */
     hoverStyle?: AnimatedViewStylePropWithoutLayout;
     /** Additional view style applied to the hovering copy of this view while dragging */
@@ -531,15 +519,15 @@ export interface DraxViewStyleProps {
     /** Additional view style applied to the hovering copy of this view when just released */
     hoverDragReleasedStyle?: AnimatedViewStylePropWithoutLayout;
     /** Additional view style applied while this view is not receiving a drag */
-    receiverInactiveStyle?: AnimatedViewStyleProp;
+    receiverInactiveStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
     /** Additional view style applied while this view is receiving a drag */
-    receivingStyle?: AnimatedViewStyleProp;
+    receivingStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
     /** Additional view style applied to this view while any other view is being dragged */
-    otherDraggingStyle?: AnimatedViewStyleProp;
+    otherDraggingStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
     /** Additional view style applied to this view while any other view is being dragged over a receiver */
-    otherDraggingWithReceiverStyle?: AnimatedViewStyleProp;
+    otherDraggingWithReceiverStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
     /** Additional view style applied to this view while any other view is being dragged NOT over a receiver */
-    otherDraggingWithoutReceiverStyle?: AnimatedViewStyleProp;
+    otherDraggingWithoutReceiverStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
 }
 /** Custom render function for content of a DraxView */
 export interface DraxViewRenderContent {
@@ -666,4 +654,3 @@ export interface DraxListProps<TItem> extends Omit<FlatListProps<TItem>, 'render
     /** Function that receives an item and returns a list of DraxViewProps to apply to that item's DraxView */
     viewPropsExtractor?: (item: TItem) => Partial<DraxViewProps>;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-drax",
-	"version": "0.9.3",
+	"version": "0.10.2",
 	"description": "A drag-and-drop system for React Native",
 	"repository": {
 		"type": "git",
@@ -22,14 +22,14 @@
 	},
 	"peerDependencies": {
 		"react": "*",
-		"react-native": ">=0.62.0",
+		"react-native": ">=0.65.0",
 		"react-native-gesture-handler": ">=1.8.0"
 	},
 	"devDependencies": {
 		"@types/lodash.isequal": "^4.5.5",
 		"@types/lodash.throttle": "^4.1.6",
 		"@types/node": "^14.14.43",
-		"@types/react-native": "^0.64.4",
+		"@types/react-native": "^0.65.22",
 		"@typescript-eslint/eslint-plugin": "^4.22.0",
 		"@typescript-eslint/parser": "^4.22.0",
 		"eslint": "^7.25.0",
@@ -40,8 +40,8 @@
 		"eslint-plugin-react-hooks": "^4.2.0",
 		"eslint-plugin-react-native": "^3.10.0",
 		"react": "^17.0.2",
-		"react-native": "^0.64.1",
+		"react-native": "^0.65.2",
 		"react-native-gesture-handler": "^1.8.0",
-		"typescript": "^4.2.4"
+		"typescript": "^4.7.3"
 	}
 }