-
-
Notifications
You must be signed in to change notification settings - Fork 639
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Version Packages #657
Merged
Merged
Version Packages #657
+543
−524
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
force-pushed
the
changeset-release/master
branch
2 times, most recently
from
March 17, 2022 02:39
508ba04
to
f93b11d
Compare
github-actions
bot
force-pushed
the
changeset-release/master
branch
2 times, most recently
from
March 21, 2022 16:24
e1fa006
to
f233cdb
Compare
github-actions
bot
force-pushed
the
changeset-release/master
branch
2 times, most recently
from
March 23, 2022 01:00
65441a0
to
43fcdee
Compare
github-actions
bot
force-pushed
the
changeset-release/master
branch
from
April 4, 2022 16:11
43fcdee
to
9c0249a
Compare
github-actions
bot
force-pushed
the
changeset-release/master
branch
from
April 14, 2022 01:04
9c0249a
to
7d27faa
Compare
github-actions
bot
force-pushed
the
changeset-release/master
branch
10 times, most recently
from
May 19, 2022 21:18
94133d5
to
d8d3344
Compare
This was
linked to
issues
May 20, 2022
github-actions
bot
force-pushed
the
changeset-release/master
branch
2 times, most recently
from
May 20, 2022 01:49
a565e28
to
dbfa4f1
Compare
github-actions
bot
force-pushed
the
changeset-release/master
branch
from
May 20, 2022 02:03
dbfa4f1
to
74e01a5
Compare
github-actions
bot
force-pushed
the
changeset-release/master
branch
2 times, most recently
from
May 20, 2022 02:18
d8fbb28
to
8b59c1c
Compare
github-actions
bot
force-pushed
the
changeset-release/master
branch
3 times, most recently
from
May 21, 2022 01:15
2da1138
to
dae74e9
Compare
github-actions
bot
force-pushed
the
changeset-release/master
branch
from
May 21, 2022 01:43
dae74e9
to
d5838e6
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.
Releases
@dnd-kit/core@6.0.0
Major Changes
#746
4173087
Thanks @clauderic! - Accessibility related changes.Regrouping accessibility-related props
Accessibility-related props have been regrouped under the
accessibility
prop of<DndContext>
:This is a breaking change that will allow easier addition of new accessibility-related features without overloading the props namespace of
<DndContext>
.Arguments object for announcements
The arguments passed to announcement callbacks have changed. They now receive an object that contains the
active
andover
properties that match the signature of those passed to the DragEvent handlers (onDragStart
,onDragMove
, etc.). This change allows consumers to read thedata
property of theactive
andover
node to customize the announcements based on the data.Example migration steps:
Accessibility-related DOM nodes are no longer portaled by default
The DOM nodes for the screen reader instructions and announcements are no longer portaled into the
document.body
element by default.This change is motivated by the fact that screen readers do not always announce ARIA live regions that are rendered on the
document.body
. Common examples of this include when rendering a<DndContext>
within a<dialog>
element or an element that hasrole="dialog"
, only ARIA live regions rendered within the dialog will be announced.Consumers can now opt to render announcements in the portal container of their choice using the
container
property of theaccessibility
prop:#733
035021a
Thanks @clauderic! - The<DragOverlay>
component's drop animation has been refactored, which fixes a number of bugs with the existing implementation and introduces new functionality.What's new?
Scrolling the draggable node into view if needed
The drop animation now ensures that the the draggable node that we are animating to is in the viewport before performing the drop animation and scrolls it into view if needed.
Changes to the
dropAnimation
propThe
dropAnimation
prop of<DragOverlay>
now accepts either a configuration object or a custom drop animation function.The configuration object adheres to the following shape:
The default drop animation options are:
The
keyframes
option allows consumers to override the keyframes of the drop animation. For example, here is how you would add a fade out transition to the drop animation using keyframes:The
dragSourceOpacity
option has been deprecated in favour of letting consumers define arbitrary side effects that should run before the animation starts. Side effects may return a cleanup function that should run when the drop animation has completed.Drop animation side effects are a powerful abstraction that provide a lot of flexibility. The
defaultDropAnimationSideEffects
function is exported by@dnd-kit/core
and aims to facilitate the types of side-effects we anticipate most consumers will want to use out of the box:For advanced side-effects, consumers may define a custom
sideEffects
function that may optionally return a cleanup function that will be executed when the drop animation completes:For even more advanced use-cases, consumers may also provide a function to the
dropAnimation
prop, which adheres to the following shape:Bug fixes
<DragOverlay>
now respects themeasuringConfiguration
specified for thedragOverlay
anddraggable
properties when measuring the rects to animate to and from.<DragOverlay>
component now supports rendering children while performing the drop animation. Previously, the drag overlay would be in a broken state when trying to pick up an item while a drop animation was in progress.Migration steps
For consumers that were relying on the
dragSourceOpacity
property in theirdropAnimation
configuration:#745
5f3c700
Thanks @clauderic! - The keyboard sensor now keeps track of the initial coordinates of the collision rect to provide a translate delta when move events are dispatched.This is a breaking change that may affect consumers that had created custom keyboard coordinate getters.
Previously the keyboard sensor would measure the initial rect of the active node and store its top and left properties as its initial coordinates it would then compare all subsequent move coordinates to calculate the delta.
This approach suffered from the following issues:
<DndContext>
for the draggable nodecurrentCoordinates
passed to the coordinate getter were often stale and not an accurate representation of the current position of the collision rect, which can be affected by a number of different variables, such as modifiers.#755
33e6dd2
Thanks @clauderic! - TheUniqueIdentifier
type has been updated to now accept eitherstring
ornumber
identifiers. As a result, theid
property ofuseDraggable
,useDroppable
anduseSortable
and theitems
prop of<SortableContext>
now all accept eitherstring
ornumber
identifiers.Migration steps
For consumers that are using TypeScript, import the
UniqueIdentifier
type to have strongly typed local state:Alternatively, consumers can cast or convert the
id
property to astring
when reading theid
property of interfaces such asActive
,Over
,DroppableContainer
andDraggableNode
.The
draggableNodes
object has also been converted to a map. Consumers that were reading from thedraggableNodes
property that is available on the public context of<DndContext>
should follow these migration steps:Minor Changes
#748
59ca82b
Thanks @clauderic! - Automatic focus management and activator node refs.Introducing activator node refs
Introducing the concept of activator node refs for
useDraggable
anduseSortable
. This allows @dnd-kit to handle common use-cases such as restoring focus on the activator node after dragging via the keyboard or only allowing the activator node to instantiate the keyboard sensor.Consumers of
useDraggable
anduseSortable
may now optionally set the activator node ref on the element that receives listeners:It's common for the activator element (the element that receives the sensor listeners) to differ from the draggable node. When this happens, @dnd-kit has no reliable way to get a reference to the activator node after dragging ends, as the original
event.target
that instantiated the sensor may no longer be mounted in the DOM or associated with the draggable node that was previously active.Automatically restoring focus
Focus management is now automatically handled by @dnd-kit. When the activator event is a Keyboard event, @dnd-kit will now attempt to automatically restore focus back to the first focusable node of the activator node or draggable node.
If no activator node is specified via the
setActivatorNodeRef
setter function ofuseDraggble
anduseSortable
, @dnd-kit will automatically restore focus on the first focusable node of the draggable node set via thesetNodeRef
setter function ofuseDraggable
anduseSortable
.If you were previously managing focus manually and would like to opt-out of automatic focus management, use the newly introduced
restoreFocus
property of theaccessibility
prop of<DndContext>
:<DndContext accessibility={{ + restoreFocus: false }}
#751
a52fba1
Thanks @clauderic! - Added thearia-disabled
attribute to theattribtues
object returned byuseDraggable
anduseSortable
. The value of thearia-disabled
attribute is populated based on whether or not thedisabled
argument is passed touseDraggble
oruseSortable
.#741
40707ce
Thanks @clauderic! - The auto scroller now keeps track of the drag direction to infer scroll intent. By default, auto-scrolling will now be disabled for a given direction if dragging in that direction hasn't occurred yet. This prevents accidental auto-scrolling when picking up a draggable item that is near the scroll boundary threshold.#660
a41e5b8
Thanks @clauderic! - Fixed a bug with thedelta
property returned inonDragMove
,onDragOver
,onDragEnd
andonDragCancel
. Thedelta
property represents thetransform
delta since dragging was initiated, along with the scroll delta. However, due to an oversight, thedelta
property was actually returning thetransform
delta and the current scroll offsets rather than the scroll delta.This same change has been made to the
scrollAdjustedTranslate
property that is exposed to sensors.#750
bf30718
Thanks @clauderic! - TheuseDndMonitor()
hook has been refactored to be synchronously invoked at the same time as the events dispatched by<DndContext>
(such asonDragStart
,onDragOver
,onDragEnd
).The new refactor uses the subscribe/notify pattern and no longer causes re-renders in consuming components of
useDndMonitor()
when events are dispatched.#660
a41e5b8
Thanks @clauderic! - TheactiveNodeRect
andcontainerNodeRect
are now observed by aResizeObserver
in case they resize while dragging.#660
a41e5b8
Thanks @clauderic! - ImproveduseDraggable
usage without<DragOverlay>
:<DragOverlay>
used.#660
77e3d44
Thanks @clauderic! - Fixed an issue withuseDroppable
hook needlessly dispatchingSetDroppableDisabled
actions even if thedisabled
property had not changed since registering the droppable.#749
188a450
Thanks @clauderic! - TheonDragStart
,onDragMove
,onDragOver
,onDragEnd
andonDragCancel
events of<DndContext>
anduseDndMonitor
now expose theactivatorEvent
event that instantiated the activated sensor.#733
035021a
Thanks @clauderic! - TheKeyboardSensor
now scrolls the focused activator draggable node into view if it is not within the viewport.#733
035021a
Thanks @clauderic! - By default, @dnd-kit now attempts to compensate for layout shifts that happen right after theonDragStart
event is dispatched by scrolling the first scrollable ancestor of the active draggable node.The
autoScroll
prop of<DndContext>
now optionally accepts alayoutShiftCompensation
property to control this new behavior:interface AutoScrollOptions { acceleration?: number; activator?: AutoScrollActivator; canScroll?: CanScroll; enabled?: boolean; interval?: number; + layoutShiftCompensation?: boolean | {x: boolean, y: boolean}; order?: TraversalOrder; threshold?: { x: number; y: number; }; }
To enable/disable layout shift scroll compensation for a single scroll axis, pass in the following autoscroll configuration to
<DndContext>
:To completely disable layout shift scroll compensation, pass in the following autoscroll configuration to
<DndContext>
:#672
10f6836
Thanks @clauderic! - ThemeasureDroppableContainers
method now properly respects the MeasuringStrategy defined on<DndContext />
and will not measure containers while measuring is disabled.#656
c1b3b5a
Thanks @clauderic! - Fixed an issue with collision detection using stale rects. ThedroppableRects
property has been added to theCollisionDetection
interface.All built-in collision detection algorithms have been updated to get the rect for a given droppable container from
droppableRects
rather than from therect.current
ref:The
rect.current
ref stored on DroppableContainers can be stale if measuring is scheduled but has not completed yet. Collision detection algorithms should use thedroppableRects
map instead to get the latest, most up-to-date measurement of a droppable container in order to avoid computing collisions against stale rects.This is not a breaking change. However, if you've forked any of the built-in collision detection algorithms or you've authored custom ones, we highly recommend you update your use-cases to avoid possibly computing collisions against stale rects.
Patch Changes
#742
7161f70
Thanks @clauderic! - Fallback to initial rect measured for the active draggable node if it unmounts during initialization (afteronDragStart
is dispatched).#749
5811986
Thanks @clauderic! - TheData
andDataRef
types are now exported by@dnd-kit/core
.#699
e302bd4
Thanks @JuAn-Kang! - ExportDragOverlayProps
for consumers.750d726
Thanks @clauderic! - Fixed a bug in theKeyboardSensor
where it would not move the draggable on the horizontal axis if it could fully scroll to the new vertical coordinates, and would not move the draggable on the vertical axis if it could fully scroll to the new horizontal coordinates.#660
e6e242c
Thanks @clauderic! - TheKeyboardSensor
was updated to usescrollTo
instead ofscrollBy
when it is able to fully scroll to the new coordinates returned by the coordinate getter function. This resolves issues that can happen withscrollBy
when called in rapid succession.Updated dependencies [
59ca82b
,035021a
]:@dnd-kit/sortable@7.0.0
Major Changes
#755
33e6dd2
Thanks @clauderic! - TheUniqueIdentifier
type has been updated to now accept eitherstring
ornumber
identifiers. As a result, theid
property ofuseDraggable
,useDroppable
anduseSortable
and theitems
prop of<SortableContext>
now all accept eitherstring
ornumber
identifiers.Migration steps
For consumers that are using TypeScript, import the
UniqueIdentifier
type to have strongly typed local state:Alternatively, consumers can cast or convert the
id
property to astring
when reading theid
property of interfaces such asActive
,Over
,DroppableContainer
andDraggableNode
.The
draggableNodes
object has also been converted to a map. Consumers that were reading from thedraggableNodes
property that is available on the public context of<DndContext>
should follow these migration steps:#660
30bbd12
Thanks @clauderic! - Changes to the defaultsortableKeyboardCoordinates
KeyboardSensor coordinate getter.Better handling of variable sizes
The default
sortableKeyboardCoordinates
function now has better handling of lists that have items of variable sizes. We recommend that consumers re-order listsonDragOver
instead ofonDragEnd
when sorting lists of variable sizes via the keyboard for optimal compatibility.Better handling of overlapping droppables
The default
sortableKeyboardCoordinates
function that is exported from the@dnd-kit/sortable
package has been updated to better handle cases where the collision rectangle is overlapping droppable rectangles. For example, fordown
arrow key, the default function had logic that would only consider collisions against droppables that were below thebottom
edge of the collision rect. This was problematic when the collision rect was overlapping droppable rects, because it meant that it's bottom edge was below the top edge of the droppable, and that resulted in that droppable being skipped.This change should be backwards compatible for most consumers, but may introduce regressions in some use-cases, especially for consumers that may have copied the multiple containers examples. There is now a custom sortable keyboard coordinate getter optimized for multiple containers that you can refer to.
Minor Changes
#748
59ca82b
Thanks @clauderic! - Automatic focus management and activator node refs.Introducing activator node refs
Introducing the concept of activator node refs for
useDraggable
anduseSortable
. This allows @dnd-kit to handle common use-cases such as restoring focus on the activator node after dragging via the keyboard or only allowing the activator node to instantiate the keyboard sensor.Consumers of
useDraggable
anduseSortable
may now optionally set the activator node ref on the element that receives listeners:It's common for the activator element (the element that receives the sensor listeners) to differ from the draggable node. When this happens, @dnd-kit has no reliable way to get a reference to the activator node after dragging ends, as the original
event.target
that instantiated the sensor may no longer be mounted in the DOM or associated with the draggable node that was previously active.Automatically restoring focus
Focus management is now automatically handled by @dnd-kit. When the activator event is a Keyboard event, @dnd-kit will now attempt to automatically restore focus back to the first focusable node of the activator node or draggable node.
If no activator node is specified via the
setActivatorNodeRef
setter function ofuseDraggble
anduseSortable
, @dnd-kit will automatically restore focus on the first focusable node of the draggable node set via thesetNodeRef
setter function ofuseDraggable
anduseSortable
.If you were previously managing focus manually and would like to opt-out of automatic focus management, use the newly introduced
restoreFocus
property of theaccessibility
prop of<DndContext>
:<DndContext accessibility={{ + restoreFocus: false }}
#672
10f6836
Thanks @clauderic! -SortableContext
now always requests measuring of droppable containers when itsitems
prop changes, regardless of whether or not dragging is in progress. Measuring will occur if the measuring configuration allows for it.#754
224201a
Thanks @clauderic! - The<SortableContext>
component now optionally accepts adisabled
prop to globally disableuseSortable
hooks rendered within it.The
disabled
prop accepts either a boolean or an object with the following shape:The
useSortable
hook has now been updated to also optionally accept thedisabled
configuration object to conditionally disable theuseDraggable
and/oruseDroppable
hooks used internally.Like the
strategy
prop, thedisabled
prop defined on theuseSortable
hook takes precedence over thedisabled
prop defined on the parent<SortableContext>
.Patch Changes
#757
e6d544f
Thanks @clauderic! - ThewasDragging
property ofanimateLayoutChanges
now remains true for longer than a single re-render. Before this change, it was possible for the component whereuseSortable
is used to re-render before @dnd-kit is ready to perform the layout animation, causing the animation to be skipped entirely.#749
188a450
Thanks @clauderic! - Faster (and safer) equal implementation.Updated dependencies [
4173087
,59ca82b
,7161f70
,a52fba1
,40707ce
,a41e5b8
,bf30718
,a41e5b8
,a41e5b8
,035021a
,77e3d44
,5811986
,e302bd4
,188a450
,59ca82b
,750d726
,5f3c700
,035021a
,e6e242c
,035021a
,33e6dd2
,10f6836
,c1b3b5a
,035021a
]:@dnd-kit/utilities@3.2.0
Minor Changes
#748
59ca82b
Thanks @clauderic! - Introduced thefindFirstFocusableNode
utility function that returns the first focusable node within a given HTMLElement, or the element itself if it is focusable.#733
035021a
Thanks @clauderic! - Introduced theuseEvent
hook based on implementation breakdown in the RFC. In the future, this hook will be used as a polyfill if the native React hook is unavailble.@dnd-kit/modifiers@6.0.0
Patch Changes
4173087
,59ca82b
,7161f70
,a52fba1
,40707ce
,a41e5b8
,bf30718
,a41e5b8
,a41e5b8
,035021a
,77e3d44
,5811986
,e302bd4
,188a450
,59ca82b
,750d726
,5f3c700
,035021a
,e6e242c
,035021a
,33e6dd2
,10f6836
,c1b3b5a
,035021a
]: