An optional package for Pragmatic drag and drop that enables the attaching of interaction information to a drop target
yarn add @atlaskit/pragmatic-drag-and-drop-hitbox#83702 4d9e25ab4eaa - Updating the descriptions of Pragmatic drag and drop packages, so they each provide a consistent description to various consumers, and so they are consistently formed amongst each other.
package.json descriptionREADME.md#70616 42e57ea65fee - This is our first major release (1.0) for all Pragmatic drag and drop packages.
For a detailed explanation of these changes, and how to upgrade (automatically) to 1.0 please see our 1.0 upgrade guide
#42620 0b832b288e8 - Moving our tree exports that are used in Confluence from experimental to stable.
- @atlaskit/pragmatic-drag-and-drop-hitbox/experimental/tree-item
+ @atlaskit/pragmatic-drag-and-drop-hitbox/tree-item
9fd8556db17 - Internal folder name structure change#33262 34ed7b2ec63 - We have changed the name of our drag and drop packages to align on the single name of "Pragmatic drag and drop"
- @atlaskit/drag-and-drop
+ @atlaskit/pragmatic-drag-and-drop
- @atlaskit/drag-and-drop-autoscroll
+ @atlaskit/pragmatic-drag-and-drop-autoscroll
- @atlaskit/drag-and-drop-hitbox
+ @atlaskit/pragmatic-drag-and-drop-hitbox
- @atlaskit/drag-and-drop-indicator
+ @atlaskit/pragmatic-drag-and-drop-react-indicator
# Note: `react` was added to this package name as our indicator package is designed for usage with `react`.
- @atlaskit/drag-and-drop-live-region
+ @atlaskit/pragmatic-drag-and-drop-live-region
- @atlaskit/drag-and-drop-react-beautiful-dnd-migration
+ @atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration
- @atlaskit/drag-and-drop-docs
+ @atlaskit/pragmatic-drag-and-drop-docs
The new @atlaskit/pragmatic-drag-and-drop* packages will start their initial versions from where the ``@atlaskit/drag-and-drop*` packages left off. Doing this will make it easier to look back on changelogs and see how the packages have progressed.
56507598609 - Skip minor dependency bump2e01c9c74b5 - DUMMY remove before merging to master; dupe adf-schema via adf-utilsa7dc73c0a57 - Internal refactor: implemented a cheaper mechanism to enable memoization of tree item data#32051 00434d087d7 - Tree item hitbox data is now memoized. This is helpful to reduce work for consumers who may take actions based on object reference changes.
If you are using react and putting tree item hitbox instructions into state, react will now only re-render when the content of the instruction changes.
179d953be18 - [ux] Tweaking the hitbox of "expanded" tree items to improve the experience when expanding tree items during a drag. Note: our tree item hitbox is still experimental#30953 90901f5bbe0 - Replace default entry point of undefined with {}.
NOTE: Importing from the default entry point isn't supported. Please use individual entry points in order to always obtain minimum kbs.
fe6772a3719 - Dramatic update to experimental tree-item outputs. These outputs should only be used right now by Confluence Page Tree. Changes are being communicated face to face with Confluence team members#26934 f004dadb4fc - reorderWithEdge has changed API in order to more accurately reflect the values that are being passed in
function reorderWithEdge<Value>(args: {
list: Value[];
- edge: Edge | null;
+ // the reorder operation is based on what the closest edge of the target is
+ closestEdgeOfTarget: Edge | null;
startIndex: number;
- finalIndex: number
+ // we are reordering relative to the target
+ indexOfTarget: number;
axis: 'vertical' | 'horizontal';
}): Value[];
Adding new utility: getReorderDestinationIndex
When you are rendering drop indicators (eg lines) between items in a list, it can be difficult to know what the index the dropped item should go into. The final index will depend on what the closest Edge is. getReorderDestinationIndex can give you the final index for a reordering operation, taking into account which Edge is closest
import { getReorderDestinationIndex } from '@atlaskit/drag-and-drop-hitbox/util/get-reorder-destination-index';
// Dragging A on the left of B
// A should stay in the same spot
expect(
getReorderDestinationIndex({
// list: ['A', 'B', 'C'],
// move A to left of B
startIndex: 0,
indexOfTarget: 1,
closestEdgeOfTarget: 'left',
axis: 'horizontal',
}),
// results in no change: ['A', 'B', 'C']
).toEqual(0);
// Dragging A on the right of B
// A should go after B
expect(
getReorderDestinationIndex({
// list: ['A', 'B', 'C'],
// move A to right of B
startIndex: 0,
indexOfTarget: 1,
closestEdgeOfTarget: 'right',
axis: 'horizontal',
}),
// A moved forward ['B', 'A', 'C']
).toEqual(1);
#24613 dcebdf9404e - We have improved our naming consistency across our drag and drop packages.
@atlaskit/drag-and-drop-hitbox/closest-edge has been renamed to @atlaskit/drag-and-drop-hitbox/addon/closest-edge@atlaskit/drag-and-drop-hitbox/reorder-with-edge has been renamed to @atlaskit/drag-and-drop-hitbox/util/reorder-with-edge73427c38077 - Initial release of @atlaskit/drag-and-drop packages 🎉8d4228767b0 - Upgrade Typescript from 4.2.4 to 4.3.5.