@helpdice/draggable 0.0.1 → 0.0.3

package/README.md

@@ -10,9 +10,9 @@ We recommend that you don’t raise issues or pull requests, as they will not be
 ---
 
 <p align="center">
-  <img src="https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png" alt="react beautiful dnd logo" />
+  <img src="https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png" alt="draggable logo" />
 </p>
-<h1 align="center">react-beautiful-dnd <small><sup>(rbd)</sup></small></h1>
+<h1 align="center">draggable <small><sup>(rbd)</sup></small></h1>
 
 <div align="center">
 
@@ -32,9 +32,9 @@ We recommend that you don’t raise issues or pull requests, as they will not be
 
 ## Get started 👩‍🏫
 
-We have created [a free course on `egghead.io` 🥚](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd) to help you get started with `react-beautiful-dnd` as quickly as possible.
+We have created [a free course on `egghead.io` 🥚](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-@helpdice/draggable) to help you get started with `@helpdice/draggable` as quickly as possible.
 
-[![course-logo](https://user-images.githubusercontent.com/2182637/43372837-8c72d3f8-93e8-11e8-9d92-a82adde7718f.png)](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd)
+[![course-logo](https://user-images.githubusercontent.com/2182637/43372837-8c72d3f8-93e8-11e8-9d92-a82adde7718f.png)](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-@helpdice/draggable)
 
 ## Currently supported feature set ✅
 
@@ -64,14 +64,14 @@ We have created [a free course on `egghead.io` 🥚](https://egghead.io/courses/
 
 ## Motivation 🤔
 
-`react-beautiful-dnd` exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:
+`@helpdice/draggable` exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:
 
 - 📖 [Rethinking drag and drop](https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b)
 - 🎧 [React podcast: fast, accessible and beautiful drag and drop](https://reactpodcast.simplecast.fm/17)
 
 ## Not for everyone ✌️
 
-There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing [`react-dnd`](https://github.com/react-dnd/react-dnd). It does an incredible job at providing a great set of drag and drop primitives which work especially well with the [wildly inconsistent](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html) html5 drag and drop feature. `react-beautiful-dnd` is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality `react-beautiful-dnd` offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by `react-dnd`. So `react-beautiful-dnd` might not be for you depending on what your use case is.
+There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing [`react-dnd`](https://github.com/react-dnd/react-dnd). It does an incredible job at providing a great set of drag and drop primitives which work especially well with the [wildly inconsistent](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html) html5 drag and drop feature. `@helpdice/draggable` is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality `@helpdice/draggable` offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by `react-dnd`. So `@helpdice/draggable` might not be for you depending on what your use case is.
 
 ## Documentation 📖
 
@@ -79,7 +79,7 @@ There are a lot of libraries out there that allow for drag and drop interactions
 
 - [Installation](/docs/about/installation.md)
 - [Examples and samples](/docs/about/examples.md)
-- [Get started](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd)
+- [Get started](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-draggable)
 - [Design principles](/docs/about/design-principles.md)
 - [Animations](/docs/about/animations.md)
 - [Accessibility](/docs/about/accessibility.md)
@@ -121,7 +121,7 @@ There are a lot of libraries out there that allow for drag and drop interactions
 - [Avoiding image flickering](/docs/guides/avoiding-image-flickering.md)
 - [Non-visible preset styles](/docs/guides/preset-styles.md)
 - [How we detect scroll containers](/docs/guides/how-we-detect-scroll-containers.md)
-- [How we use dom events](/docs/guides/how-we-use-dom-events.md) - _Useful if you need to build on top of `react-beautiful-dnd`_
+- [How we use dom events](/docs/guides/how-we-use-dom-events.md) - _Useful if you need to build on top of `@helpdice/draggable`_
 - [Adding `<Draggable />`s during a drag (11.x behaviour)](/docs/guides/changes-while-dragging.md) - _⚠️ Advanced_
 - [Setting up Content Security Policy](/docs/guides/content-security-policy.md)
 
@@ -136,18 +136,18 @@ There are a lot of libraries out there that allow for drag and drop interactions
 
 - [Engineering health](/docs/support/engineering-health.md)
 - [Community and addons](/docs/support/community-and-addons.md)
-- [Release notes and changelog](https://github.com/atlassian/react-beautiful-dnd/releases)
+- [Release notes and changelog](https://github.com/atlassian/@helpdice/draggable/releases)
 - [Upgrading](/docs/support/upgrading.md)
-- [Road map](https://github.com/atlassian/react-beautiful-dnd/issues)
+- [Road map](https://github.com/atlassian/@helpdice/draggable/issues)
 - [Media](/docs/support/media.md)
 
 ## Read this in other languages 🌎
 
-- [![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **한글/Korean**](https://github.com/LeeHyungGeun/react-beautiful-dnd-kr)
-- [![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **На русском/Russian**](https://github.com/vtereshyn/react-beautiful-dnd-ru)
-- [![pt](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Português/Portuguese**](https://github.com/dudestein/react-beautiful-dnd-pt)
-- [![gr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Greece.png) **Ελληνικά/Greek**](https://github.com/milvard/react-beautiful-dnd-gr)
-- [![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **日本語/Japanese**](https://github.com/eltociear/react-beautiful-dnd-ja)
+- [![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **한글/Korean**](https://github.com/LeeHyungGeun/@helpdice/draggable-kr)
+- [![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **На русском/Russian**](https://github.com/vtereshyn/@helpdice/draggable-ru)
+- [![pt](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Português/Portuguese**](https://github.com/dudestein/@helpdice/draggable-pt)
+- [![gr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Greece.png) **Ελληνικά/Greek**](https://github.com/milvard/@helpdice/draggable-gr)
+- [![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **日本語/Japanese**](https://github.com/eltociear/@helpdice/draggable-ja)
 
 ## Creator ✍️
 

package/dist/draggable.cjs.js

@@ -4857,7 +4857,10 @@ var getPublisher = (getResponders, announce) => {
         };
         // we will flush this frame if we receive any responder updates
         asyncMarshal.add(() => {
-            withTimings('onDragStart', () => execute(getResponders().onDragStart, data, announce, preset.onDragStart));
+            withTimings('onDragStart', () => {
+                var _a;
+                return execute((_a = getResponders().onDragStart) !== null && _a !== void 0 ? _a : null, data, announce, preset.onDragStart);
+            });
         });
     };
     // Passing in the critical location again as it can change during a drag
@@ -4885,7 +4888,10 @@ var getPublisher = (getResponders, announce) => {
         }
         const data = Object.assign(Object.assign({}, getDragStart(critical, dragging.mode)), { combine, destination: location });
         asyncMarshal.add(() => {
-            withTimings('onDragUpdate', () => execute(getResponders().onDragUpdate, data, announce, preset.onDragUpdate));
+            withTimings('onDragUpdate', () => {
+                var _a;
+                return execute((_a = getResponders().onDragUpdate) !== null && _a !== void 0 ? _a : null, data, announce, preset.onDragUpdate);
+            });
         });
     };
     const flush = () => {
@@ -8704,11 +8710,14 @@ function useDroppablePublisher(args) {
     const uniqueId = useUniqueId("droppable");
     const { registry, marshal } = appContext;
     const previousRef = usePrevious(args);
-    const descriptor = useMemo(() => ({
-        id: args.droppableId,
-        type: args.type,
-        mode: args.mode,
-    }), [args.droppableId, args.mode, args.type]);
+    const descriptor = useMemo(() => {
+        var _a, _b;
+        return ({
+            id: args.droppableId,
+            type: (_a = args.type) !== null && _a !== void 0 ? _a : "",
+            mode: (_b = args.mode) !== null && _b !== void 0 ? _b : "standard", // By default
+        });
+    }, [args.droppableId, args.mode, args.type]);
     const publishedDescriptorRef = React.useRef(descriptor);
     const memoizedUpdateScroll = useMemo(() => memoizeOne((x, y) => {
         invariant$1(whileDraggingRef.current, "Can only update scroll when dragging");
@@ -8742,7 +8751,7 @@ function useDroppablePublisher(args) {
     const getDimensionAndWatchScroll = useCallback((windowScroll, options) => {
         invariant$1(!whileDraggingRef.current, "Cannot collect a droppable while a drag is occurring");
         const previous = previousRef.current;
-        const ref = previous.getDroppableRef();
+        const ref = previous.getDroppableRef ? previous.getDroppableRef() : null;
         invariant$1(ref, "Cannot collect without a droppable ref");
         const env = getEnv(ref);
         const dragging = {
@@ -8844,10 +8853,11 @@ function useDroppablePublisher(args) {
     // update is combine enabled with the marshal
     // only need to update when there is a drag
     useIsomorphicLayoutEffect(() => {
+        var _a;
         if (!whileDraggingRef.current) {
             return;
         }
-        marshal.updateDroppableIsCombineEnabled(publishedDescriptorRef.current.id, args.isCombineEnabled);
+        marshal.updateDroppableIsCombineEnabled(publishedDescriptorRef.current.id, (_a = args.isCombineEnabled) !== null && _a !== void 0 ? _a : false);
     }, [args.isCombineEnabled, marshal]);
 }
 
@@ -9299,7 +9309,7 @@ function Draggable(props) {
     const descriptor = useMemo(() => ({
         id: props.draggableId,
         index: props.index,
-        type,
+        type: type !== null && type !== void 0 ? type : "", // Empty by default Marked for review
         droppableId,
     }), [props.draggableId, props.index, type, droppableId]);
     // props
@@ -9833,7 +9843,7 @@ const makeMapStateToProps = () => {
         const renderClone = ownProps.renderClone;
         if (isDragging(state)) {
             const critical = state.critical;
-            if (!isMatchingType(type, critical)) {
+            if (type && !isMatchingType(type, critical)) {
                 return idleWithoutAnimation;
             }
             const dragging = getDraggable(critical, state.dimensions);
@@ -9842,7 +9852,7 @@ const makeMapStateToProps = () => {
         }
         if (state.phase === 'DROP_ANIMATING') {
             const completed = state.completed;
-            if (!isMatchingType(type, completed.critical)) {
+            if (type && !isMatchingType(type, completed.critical)) {
                 return idleWithoutAnimation;
             }
             const dragging = getDraggable(completed.critical, state.dimensions);
@@ -9852,7 +9862,7 @@ const makeMapStateToProps = () => {
             state.completed &&
             !state.shouldFlush) {
             const completed = state.completed;
-            if (!isMatchingType(type, completed.critical)) {
+            if (type && !isMatchingType(type, completed.critical)) {
                 return idleWithoutAnimation;
             }
             const wasOver = whatIsDraggedOver(completed.impact) === id;