From d5838e6e3106441408d4dfa96067e14ee11aa013 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sat, 21 May 2022 01:43:05 +0000 Subject: [PATCH] Version Packages --- .changeset/accessibility-related-props.md | 63 --- .changeset/activator-node-ref.md | 53 --- .changeset/active-rect-fallback.md | 5 - .changeset/always-request-measuring.md | 5 - .changeset/aria-disabled-attribute.md | 5 - .changeset/autoscroll-intent-tracking.md | 5 - .changeset/delta-scroll-offset.md | 7 - .changeset/dnd-monitor-refactor.md | 7 - .changeset/draggable-resize-observer.md | 5 - .changeset/dragging-without-overlay.md | 8 - .changeset/drop-animation-refactor.md | 153 -------- .changeset/droppable-disabled-dispatch.md | 5 - .changeset/export-data-types.md | 5 - .changeset/export-dragoverlayprops-type.md | 5 - .changeset/expose-activator-event.md | 5 - .changeset/first-focusable-node.md | 5 - .changeset/keyboard-sensor-bug.md | 5 - .changeset/keyboard-sensor-raceconditions.md | 16 - .changeset/keyboard-sensor-scrollintoview.md | 5 - .changeset/keyboard-sensor-scrollto.md | 5 - .changeset/layout-animation-bugfix.md | 5 - .changeset/layout-shift-compensation.md | 39 -- .changeset/number-unique-id.md | 28 -- .changeset/respect-measuring-config.md | 5 - .changeset/safer-equal-implementation.md | 5 - .changeset/sortable-disabled-prop.md | 18 - .changeset/sortable-keyboard-coordinates.md | 20 - .changeset/stale-collision-rects.md | 16 - .changeset/use-event-hook.md | 5 - packages/core/CHANGELOG.md | 393 +++++++++++++++++++ packages/core/package.json | 4 +- packages/modifiers/CHANGELOG.md | 8 + packages/modifiers/package.json | 8 +- packages/sortable/CHANGELOG.md | 123 ++++++ packages/sortable/package.json | 8 +- packages/utilities/CHANGELOG.md | 8 + packages/utilities/package.json | 2 +- 37 files changed, 543 insertions(+), 524 deletions(-) delete mode 100644 .changeset/accessibility-related-props.md delete mode 100644 .changeset/activator-node-ref.md delete mode 100644 .changeset/active-rect-fallback.md delete mode 100644 .changeset/always-request-measuring.md delete mode 100644 .changeset/aria-disabled-attribute.md delete mode 100644 .changeset/autoscroll-intent-tracking.md delete mode 100644 .changeset/delta-scroll-offset.md delete mode 100644 .changeset/dnd-monitor-refactor.md delete mode 100644 .changeset/draggable-resize-observer.md delete mode 100644 .changeset/dragging-without-overlay.md delete mode 100644 .changeset/drop-animation-refactor.md delete mode 100644 .changeset/droppable-disabled-dispatch.md delete mode 100644 .changeset/export-data-types.md delete mode 100644 .changeset/export-dragoverlayprops-type.md delete mode 100644 .changeset/expose-activator-event.md delete mode 100644 .changeset/first-focusable-node.md delete mode 100644 .changeset/keyboard-sensor-bug.md delete mode 100644 .changeset/keyboard-sensor-raceconditions.md delete mode 100644 .changeset/keyboard-sensor-scrollintoview.md delete mode 100644 .changeset/keyboard-sensor-scrollto.md delete mode 100644 .changeset/layout-animation-bugfix.md delete mode 100644 .changeset/layout-shift-compensation.md delete mode 100644 .changeset/number-unique-id.md delete mode 100644 .changeset/respect-measuring-config.md delete mode 100644 .changeset/safer-equal-implementation.md delete mode 100644 .changeset/sortable-disabled-prop.md delete mode 100644 .changeset/sortable-keyboard-coordinates.md delete mode 100644 .changeset/stale-collision-rects.md delete mode 100644 .changeset/use-event-hook.md diff --git a/.changeset/accessibility-related-props.md b/.changeset/accessibility-related-props.md deleted file mode 100644 index c03cb52c..00000000 --- a/.changeset/accessibility-related-props.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -'@dnd-kit/core': major ---- - -Accessibility related changes. - -#### Regrouping accessibility-related props - -Accessibility-related props have been regrouped under the `accessibility` prop of ``: - -```diff -`. - -#### Arguments object for announcements - -The arguments passed to announcement callbacks have changed. They now receive an object that contains the `active` and `over` properties that match the signature of those passed to the DragEvent handlers (`onDragStart`, `onDragMove`, etc.). This change allows consumers to read the `data` property of the `active` and `over` node to customize the announcements based on the data. - -Example migration steps: - -```diff -export const announcements: Announcements = { -- onDragStart(id) { -+ onDragStart({active}) { -- return `Picked up draggable item ${id}.`; -+ return `Picked up draggable item ${active.id}.`; - }, -- onDragOver(id, overId) { -+ onDragOver({active, over}) { -- if (overId) { -+ if (over) { -- return `Draggable item ${id} was moved over droppable area ${overId}.`; -+ return `Draggable item ${active.id} was moved over droppable area ${over.id}.`; - } - -- return `Draggable item ${id} is no longer over a droppable area.`; -+ return `Draggable item ${active.id} is no longer over a droppable area.`; - }, -}; -``` - -#### 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 `` within a `` element or an element that has `role="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 the `accessibility` prop: - -```diff - - Draggable element - - - ) -} -``` - -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 of `useDraggble` and `useSortable`, @dnd-kit will automatically restore focus on the first focusable node of the draggable node set via the `setNodeRef` setter function of `useDraggable` and `useSortable`. - -If you were previously managing focus manually and would like to opt-out of automatic focus management, use the newly introduced `restoreFocus` property of the `accessibility` prop of ``: - -```diff -` (such as `onDragStart`, `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. diff --git a/.changeset/draggable-resize-observer.md b/.changeset/draggable-resize-observer.md deleted file mode 100644 index d853096e..00000000 --- a/.changeset/draggable-resize-observer.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@dnd-kit/core': minor ---- - -The `activeNodeRect` and `containerNodeRect` are now observed by a `ResizeObserver` in case they resize while dragging. diff --git a/.changeset/dragging-without-overlay.md b/.changeset/dragging-without-overlay.md deleted file mode 100644 index 8c557b04..00000000 --- a/.changeset/dragging-without-overlay.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -'@dnd-kit/core': minor ---- - -Improved `useDraggable` usage without ``: - -- The active draggable now scrolls with the page even if there is no `` used. -- Fixed issues when re-ordering the active draggable node in the DOM while dragging. diff --git a/.changeset/drop-animation-refactor.md b/.changeset/drop-animation-refactor.md deleted file mode 100644 index 70d0f09c..00000000 --- a/.changeset/drop-animation-refactor.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -'@dnd-kit/core': major ---- - -The `` 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` prop - -The `dropAnimation` prop of `` now accepts either a configuration object or a custom drop animation function. - -The configuration object adheres to the following shape: - -```ts -interface DropAnimationOptions { - duration?: number; - easing?: string; - keyframes?: DropAnimationKeyframeResolver; - sideEffects?: DropAnimationSideEffects; -} -``` - -The default drop animation options are: - -```ts -const defaultDropAnimationConfiguration: DropAnimationOptions = { - duration: 250, - easing: 'ease', - keyframes: defaultDropAnimationKeyframes, - sideEffects: defaultDropAnimationSideEffects({ - styles: { - active: { - opacity: '0', - }, - }, - }), -}; -``` - -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: - -```ts -import {CSS} from '@dnd-kit/utilities'; - -const customDropAnimation = { - keyframes({transform}) { - return [ - {opacity: 1, transform: CSS.Transform.toString(transform.initial)}, - {opacity: 0, transform: CSS.Transform.toString(transform.final)}, - ]; - }, -}; -``` - -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. - -```ts -type CleanupFunction = () => void; - -export type DropAnimationSideEffects = ( - parameters: DropAnimationSideEffectsParameters -) => CleanupFunction | void; -``` - -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: - -```ts -interface DefaultDropAnimationSideEffectsOptions { - // Apply a className on the active draggable or drag overlay node during the drop animation - className?: { - active?: string; - dragOverlay?: string; - }; - // Apply temporary styles to the active draggable node or drag overlay during the drop animation - styles?: { - active?: Styles; - dragOverlay?: Styles; - }; -} -``` - -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: - -```ts -const customDropAnimation = { - sideEffects({active}) { - active.node.classList.add('dropAnimationInProgress'); - active.node.animate([{opacity: 0}, {opacity: 1}], { - easing: 'ease-in', - duration: 250, - }); - - return () => { - // Clean up when the drop animation is complete - active.node.classList.remove('dropAnimationInProgress'); - }; - }, -}; -``` - -For even more advanced use-cases, consumers may also provide a function to the `dropAnimation` prop, which adheres to the following shape: - -```ts -interface DropAnimationFunctionArguments { - active: { - id: UniqueIdentifier; - data: DataRef; - node: HTMLElement; - rect: ClientRect; - }; - draggableNodes: DraggableNodes; - dragOverlay: { - node: HTMLElement; - rect: ClientRect; - }; - droppableContainers: DroppableContainers; - measuringConfiguration: DeepRequired; - transform: Transform; -} - -type DropAnimationFunction = ( - args: DropAnimationFunctionArguments -) => Promise | void; -``` - -### Bug fixes - -- The `` now respects the `measuringConfiguration` specified for the `dragOverlay` and `draggable` properties when measuring the rects to animate to and from. -- The `` 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 their `dropAnimation` configuration: - -```diff -+ import {defaultDropAnimationSideEffects} from '@dnd-kit/core'; - -const dropAnimation = { -- dragSourceOpacity: 0.5, -+ sideEffects: defaultDropAnimationSideEffects({ -+ styles : { -+ active: { -+ opacity: '0.5', -+ }, -+ }, -+ ), -}; -``` diff --git a/.changeset/droppable-disabled-dispatch.md b/.changeset/droppable-disabled-dispatch.md deleted file mode 100644 index e0d9b145..00000000 --- a/.changeset/droppable-disabled-dispatch.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@dnd-kit/core': minor ---- - -Fixed an issue with `useDroppable` hook needlessly dispatching `SetDroppableDisabled` actions even if the `disabled` property had not changed since registering the droppable. diff --git a/.changeset/export-data-types.md b/.changeset/export-data-types.md deleted file mode 100644 index 2bf87ba8..00000000 --- a/.changeset/export-data-types.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@dnd-kit/core': patch ---- - -The `Data` and `DataRef` types are now exported by `@dnd-kit/core`. diff --git a/.changeset/export-dragoverlayprops-type.md b/.changeset/export-dragoverlayprops-type.md deleted file mode 100644 index 8876e627..00000000 --- a/.changeset/export-dragoverlayprops-type.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@dnd-kit/core": patch ---- - -Export `DragOverlayProps` for consumers. diff --git a/.changeset/expose-activator-event.md b/.changeset/expose-activator-event.md deleted file mode 100644 index 495f857c..00000000 --- a/.changeset/expose-activator-event.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@dnd-kit/core': minor ---- - -The `onDragStart`, `onDragMove`, `onDragOver`, `onDragEnd` and `onDragCancel` events of `` and `useDndMonitor` now expose the `activatorEvent` event that instantiated the activated sensor. diff --git a/.changeset/first-focusable-node.md b/.changeset/first-focusable-node.md deleted file mode 100644 index 502a282b..00000000 --- a/.changeset/first-focusable-node.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@dnd-kit/utilities': minor ---- - -Introduced the `findFirstFocusableNode` utility function that returns the first focusable node within a given HTMLElement, or the element itself if it is focusable. diff --git a/.changeset/keyboard-sensor-bug.md b/.changeset/keyboard-sensor-bug.md deleted file mode 100644 index 2fa24f9f..00000000 --- a/.changeset/keyboard-sensor-bug.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@dnd-kit/core': patch ---- - -Fixed a bug in the `KeyboardSensor` 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. diff --git a/.changeset/keyboard-sensor-raceconditions.md b/.changeset/keyboard-sensor-raceconditions.md deleted file mode 100644 index 3b50a253..00000000 --- a/.changeset/keyboard-sensor-raceconditions.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -'@dnd-kit/core': major ---- - -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: - -- It didn't respect the measuring configuration defined on the `` for the draggable node -- Some consumers re-render the active node after dragging begins, which would lead to stale measurements -- An error had to be thrown if there was no active node during the activation phase of the keyboard sensor. This shouldn't be a concern of the keyboard sensor. -- The `currentCoordinates` 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. diff --git a/.changeset/keyboard-sensor-scrollintoview.md b/.changeset/keyboard-sensor-scrollintoview.md deleted file mode 100644 index c6db8598..00000000 --- a/.changeset/keyboard-sensor-scrollintoview.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@dnd-kit/core': minor ---- - -The `KeyboardSensor` now scrolls the focused activator draggable node into view if it is not within the viewport. diff --git a/.changeset/keyboard-sensor-scrollto.md b/.changeset/keyboard-sensor-scrollto.md deleted file mode 100644 index 03b48950..00000000 --- a/.changeset/keyboard-sensor-scrollto.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@dnd-kit/core': patch ---- - -The `KeyboardSensor` was updated to use `scrollTo` instead of `scrollBy` when it is able to fully scroll to the new coordinates returned by the coordinate getter function. This resolves issues that can happen with `scrollBy` when called in rapid succession. diff --git a/.changeset/layout-animation-bugfix.md b/.changeset/layout-animation-bugfix.md deleted file mode 100644 index 3bc37441..00000000 --- a/.changeset/layout-animation-bugfix.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@dnd-kit/sortable': patch ---- - -The `wasDragging` property of `animateLayoutChanges` now remains true for longer than a single re-render. Before this change, it was possible for the component where `useSortable` is used to re-render before @dnd-kit is ready to perform the layout animation, causing the animation to be skipped entirely. diff --git a/.changeset/layout-shift-compensation.md b/.changeset/layout-shift-compensation.md deleted file mode 100644 index ff040023..00000000 --- a/.changeset/layout-shift-compensation.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -'@dnd-kit/core': minor ---- - -By default, @dnd-kit now attempts to compensate for layout shifts that happen right after the `onDragStart` event is dispatched by scrolling the first scrollable ancestor of the active draggable node. - -The `autoScroll` prop of `` now optionally accepts a `layoutShiftCompensation` property to control this new behavior: - -```diff -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 ``: - -```ts - -``` - -To completely disable layout shift scroll compensation, pass in the following autoscroll configuration to ``: - -```ts - -``` diff --git a/.changeset/number-unique-id.md b/.changeset/number-unique-id.md deleted file mode 100644 index dfbed9c0..00000000 --- a/.changeset/number-unique-id.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -'@dnd-kit/core': major -'@dnd-kit/sortable': major ---- - -The `UniqueIdentifier` type has been updated to now accept either `string` or `number` identifiers. As a result, the `id` property of `useDraggable`, `useDroppable` and `useSortable` and the `items` prop of `` now all accept either `string` or `number` identifiers. - -#### Migration steps - -For consumers that are using TypeScript, import the `UniqueIdentifier` type to have strongly typed local state: - -```diff -+ import type {UniqueIdentifier} from '@dnd-kit/core'; - -function MyComponent() { -- const [items, setItems] = useState(['A', 'B', 'C']); -+ const [items, setItems] = useState(['A', 'B', 'C']); -} -``` - -Alternatively, consumers can cast or convert the `id` property to a `string` when reading the `id` property of interfaces such as `Active`, `Over`, `DroppableContainer` and `DraggableNode`. - -The `draggableNodes` object has also been converted to a map. Consumers that were reading from the `draggableNodes` property that is available on the public context of `` should follow these migration steps: - -```diff -- draggableNodes[someId]; -+ draggableNodes.get(someId); -``` diff --git a/.changeset/respect-measuring-config.md b/.changeset/respect-measuring-config.md deleted file mode 100644 index 8082de0b..00000000 --- a/.changeset/respect-measuring-config.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@dnd-kit/core': minor ---- - -The `measureDroppableContainers` method now properly respects the MeasuringStrategy defined on `` and will not measure containers while measuring is disabled. diff --git a/.changeset/safer-equal-implementation.md b/.changeset/safer-equal-implementation.md deleted file mode 100644 index 7a01d07f..00000000 --- a/.changeset/safer-equal-implementation.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@dnd-kit/sortable": patch ---- - -Faster (and safer) equal implementation. diff --git a/.changeset/sortable-disabled-prop.md b/.changeset/sortable-disabled-prop.md deleted file mode 100644 index d381ca6d..00000000 --- a/.changeset/sortable-disabled-prop.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -'@dnd-kit/sortable': minor ---- - -The `` component now optionally accepts a `disabled` prop to globally disable `useSortable` hooks rendered within it. - -The `disabled` prop accepts either a boolean or an object with the following shape: - -```ts -interface Disabled { - draggable?: boolean; - droppable?: boolean; -} -``` - -The `useSortable` hook has now been updated to also optionally accept the `disabled` configuration object to conditionally disable the `useDraggable` and/or `useDroppable` hooks used internally. - -Like the `strategy` prop, the `disabled` prop defined on the `useSortable` hook takes precedence over the `disabled` prop defined on the parent ``. diff --git a/.changeset/sortable-keyboard-coordinates.md b/.changeset/sortable-keyboard-coordinates.md deleted file mode 100644 index 655f0c84..00000000 --- a/.changeset/sortable-keyboard-coordinates.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -'@dnd-kit/sortable': major ---- - -Changes to the default `sortableKeyboardCoordinates` 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 lists `onDragOver` instead of `onDragEnd` 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, for `down` arrow key, the default function had logic that would only consider collisions against droppables that were below the `bottom` 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. - -```diff -- collisionRect.bottom > droppableRect.top -+ collisionRect.top > droppableRect.top -``` - -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](https://github.com/clauderic/dnd-kit/tree/master/stories/2%20-%20Presets/Sortable/multipleContainersKeyboardCoordinates.ts). diff --git a/.changeset/stale-collision-rects.md b/.changeset/stale-collision-rects.md deleted file mode 100644 index ae359457..00000000 --- a/.changeset/stale-collision-rects.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -'@dnd-kit/core': minor ---- - -Fixed an issue with collision detection using stale rects. The `droppableRects` property has been added to the `CollisionDetection` interface. - -All built-in collision detection algorithms have been updated to get the rect for a given droppable container from `droppableRects` rather than from the `rect.current` ref: - -```diff -- const rect = droppableContainers.get(id).rect.current; -+ const rect = droppableRects.get(id); -``` - -The `rect.current` ref stored on DroppableContainers can be stale if measuring is scheduled but has not completed yet. Collision detection algorithms should use the `droppableRects` 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. diff --git a/.changeset/use-event-hook.md b/.changeset/use-event-hook.md deleted file mode 100644 index a98403ab..00000000 --- a/.changeset/use-event-hook.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@dnd-kit/utilities': minor ---- - -Introduced the `useEvent` hook based on [implementation breakdown in the RFC](https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md#internal-implementation). In the future, this hook will be used as a polyfill if the native React hook is unavailble. diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 8697a6b3..c8a42075 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,398 @@ # @dnd-kit/core +## 6.0.0 + +### Major Changes + +- [#746](https://github.com/clauderic/dnd-kit/pull/746) [`4173087`](https://github.com/clauderic/dnd-kit/commit/417308704454c50f88ab305ab450a99bde5034b0) Thanks [@clauderic](https://github.com/clauderic)! - Accessibility related changes. + + #### Regrouping accessibility-related props + + Accessibility-related props have been regrouped under the `accessibility` prop of ``: + + ```diff + `. + + #### Arguments object for announcements + + The arguments passed to announcement callbacks have changed. They now receive an object that contains the `active` and `over` properties that match the signature of those passed to the DragEvent handlers (`onDragStart`, `onDragMove`, etc.). This change allows consumers to read the `data` property of the `active` and `over` node to customize the announcements based on the data. + + Example migration steps: + + ```diff + export const announcements: Announcements = { + - onDragStart(id) { + + onDragStart({active}) { + - return `Picked up draggable item ${id}.`; + + return `Picked up draggable item ${active.id}.`; + }, + - onDragOver(id, overId) { + + onDragOver({active, over}) { + - if (overId) { + + if (over) { + - return `Draggable item ${id} was moved over droppable area ${overId}.`; + + return `Draggable item ${active.id} was moved over droppable area ${over.id}.`; + } + + - return `Draggable item ${id} is no longer over a droppable area.`; + + return `Draggable item ${active.id} is no longer over a droppable area.`; + }, + }; + ``` + + #### 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 `` within a `` element or an element that has `role="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 the `accessibility` prop: + + ```diff + ` 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` prop + + The `dropAnimation` prop of `` now accepts either a configuration object or a custom drop animation function. + + The configuration object adheres to the following shape: + + ```ts + interface DropAnimationOptions { + duration?: number; + easing?: string; + keyframes?: DropAnimationKeyframeResolver; + sideEffects?: DropAnimationSideEffects; + } + ``` + + The default drop animation options are: + + ```ts + const defaultDropAnimationConfiguration: DropAnimationOptions = { + duration: 250, + easing: 'ease', + keyframes: defaultDropAnimationKeyframes, + sideEffects: defaultDropAnimationSideEffects({ + styles: { + active: { + opacity: '0', + }, + }, + }), + }; + ``` + + 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: + + ```ts + import {CSS} from '@dnd-kit/utilities'; + + const customDropAnimation = { + keyframes({transform}) { + return [ + {opacity: 1, transform: CSS.Transform.toString(transform.initial)}, + {opacity: 0, transform: CSS.Transform.toString(transform.final)}, + ]; + }, + }; + ``` + + 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. + + ```ts + type CleanupFunction = () => void; + + export type DropAnimationSideEffects = ( + parameters: DropAnimationSideEffectsParameters + ) => CleanupFunction | void; + ``` + + 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: + + ```ts + interface DefaultDropAnimationSideEffectsOptions { + // Apply a className on the active draggable or drag overlay node during the drop animation + className?: { + active?: string; + dragOverlay?: string; + }; + // Apply temporary styles to the active draggable node or drag overlay during the drop animation + styles?: { + active?: Styles; + dragOverlay?: Styles; + }; + } + ``` + + 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: + + ```ts + const customDropAnimation = { + sideEffects({active}) { + active.node.classList.add('dropAnimationInProgress'); + active.node.animate([{opacity: 0}, {opacity: 1}], { + easing: 'ease-in', + duration: 250, + }); + + return () => { + // Clean up when the drop animation is complete + active.node.classList.remove('dropAnimationInProgress'); + }; + }, + }; + ``` + + For even more advanced use-cases, consumers may also provide a function to the `dropAnimation` prop, which adheres to the following shape: + + ```ts + interface DropAnimationFunctionArguments { + active: { + id: UniqueIdentifier; + data: DataRef; + node: HTMLElement; + rect: ClientRect; + }; + draggableNodes: DraggableNodes; + dragOverlay: { + node: HTMLElement; + rect: ClientRect; + }; + droppableContainers: DroppableContainers; + measuringConfiguration: DeepRequired; + transform: Transform; + } + + type DropAnimationFunction = ( + args: DropAnimationFunctionArguments + ) => Promise | void; + ``` + + ### Bug fixes + + - The `` now respects the `measuringConfiguration` specified for the `dragOverlay` and `draggable` properties when measuring the rects to animate to and from. + - The `` 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 their `dropAnimation` configuration: + + ```diff + + import {defaultDropAnimationSideEffects} from '@dnd-kit/core'; + + const dropAnimation = { + - dragSourceOpacity: 0.5, + + sideEffects: defaultDropAnimationSideEffects({ + + styles : { + + active: { + + opacity: '0.5', + + }, + + }, + + ), + }; + ``` + +- [#745](https://github.com/clauderic/dnd-kit/pull/745) [`5f3c700`](https://github.com/clauderic/dnd-kit/commit/5f3c7009698d15936fd20f30f11ad3b23cd7886f) Thanks [@clauderic](https://github.com/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: + + - It didn't respect the measuring configuration defined on the `` for the draggable node + - Some consumers re-render the active node after dragging begins, which would lead to stale measurements + - An error had to be thrown if there was no active node during the activation phase of the keyboard sensor. This shouldn't be a concern of the keyboard sensor. + - The `currentCoordinates` 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](https://github.com/clauderic/dnd-kit/pull/755) [`33e6dd2`](https://github.com/clauderic/dnd-kit/commit/33e6dd2dc954f1f2da90d8f8af995021031b6b41) Thanks [@clauderic](https://github.com/clauderic)! - The `UniqueIdentifier` type has been updated to now accept either `string` or `number` identifiers. As a result, the `id` property of `useDraggable`, `useDroppable` and `useSortable` and the `items` prop of `` now all accept either `string` or `number` identifiers. + + #### Migration steps + + For consumers that are using TypeScript, import the `UniqueIdentifier` type to have strongly typed local state: + + ```diff + + import type {UniqueIdentifier} from '@dnd-kit/core'; + + function MyComponent() { + - const [items, setItems] = useState(['A', 'B', 'C']); + + const [items, setItems] = useState(['A', 'B', 'C']); + } + ``` + + Alternatively, consumers can cast or convert the `id` property to a `string` when reading the `id` property of interfaces such as `Active`, `Over`, `DroppableContainer` and `DraggableNode`. + + The `draggableNodes` object has also been converted to a map. Consumers that were reading from the `draggableNodes` property that is available on the public context of `` should follow these migration steps: + + ```diff + - draggableNodes[someId]; + + draggableNodes.get(someId); + ``` + +### Minor Changes + +- [#748](https://github.com/clauderic/dnd-kit/pull/748) [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57) Thanks [@clauderic](https://github.com/clauderic)! - Automatic focus management and activator node refs. + + #### Introducing activator node refs + + Introducing the concept of activator node refs for `useDraggable` and `useSortable`. 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` and `useSortable` may now optionally set the activator node ref on the element that receives listeners: + + ```diff + import {useDraggable} from '@dnd-kit/core'; + + function Draggable(props) { + const { + listeners, + setNodeRef, + + setActivatorNodeRef, + } = useDraggable({id: props.id}); + + return ( +
+ Draggable element + +
+ ) + } + ``` + + 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 of `useDraggble` and `useSortable`, @dnd-kit will automatically restore focus on the first focusable node of the draggable node set via the `setNodeRef` setter function of `useDraggable` and `useSortable`. + + If you were previously managing focus manually and would like to opt-out of automatic focus management, use the newly introduced `restoreFocus` property of the `accessibility` prop of ``: + + ```diff + ` (such as `onDragStart`, `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](https://github.com/clauderic/dnd-kit/pull/660) [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9) Thanks [@clauderic](https://github.com/clauderic)! - The `activeNodeRect` and `containerNodeRect` are now observed by a `ResizeObserver` in case they resize while dragging. + +- [#660](https://github.com/clauderic/dnd-kit/pull/660) [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9) Thanks [@clauderic](https://github.com/clauderic)! - Improved `useDraggable` usage without ``: + + - The active draggable now scrolls with the page even if there is no `` used. + - Fixed issues when re-ordering the active draggable node in the DOM while dragging. + +- [#660](https://github.com/clauderic/dnd-kit/pull/660) [`77e3d44`](https://github.com/clauderic/dnd-kit/commit/77e3d44502383d2f9a9f9af014b053619b3e37b3) Thanks [@clauderic](https://github.com/clauderic)! - Fixed an issue with `useDroppable` hook needlessly dispatching `SetDroppableDisabled` actions even if the `disabled` property had not changed since registering the droppable. + +- [#749](https://github.com/clauderic/dnd-kit/pull/749) [`188a450`](https://github.com/clauderic/dnd-kit/commit/188a4507b99d8e8fdaa50bd26deb826c86608e18) Thanks [@clauderic](https://github.com/clauderic)! - The `onDragStart`, `onDragMove`, `onDragOver`, `onDragEnd` and `onDragCancel` events of `` and `useDndMonitor` now expose the `activatorEvent` event that instantiated the activated sensor. + +- [#733](https://github.com/clauderic/dnd-kit/pull/733) [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc) Thanks [@clauderic](https://github.com/clauderic)! - The `KeyboardSensor` now scrolls the focused activator draggable node into view if it is not within the viewport. + +- [#733](https://github.com/clauderic/dnd-kit/pull/733) [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc) Thanks [@clauderic](https://github.com/clauderic)! - By default, @dnd-kit now attempts to compensate for layout shifts that happen right after the `onDragStart` event is dispatched by scrolling the first scrollable ancestor of the active draggable node. + + The `autoScroll` prop of `` now optionally accepts a `layoutShiftCompensation` property to control this new behavior: + + ```diff + 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 ``: + + ```ts + + ``` + + To completely disable layout shift scroll compensation, pass in the following autoscroll configuration to ``: + + ```ts + + ``` + +- [#672](https://github.com/clauderic/dnd-kit/pull/672) [`10f6836`](https://github.com/clauderic/dnd-kit/commit/10f683631103b1d919f2fbca1177141b9369d2cf) Thanks [@clauderic](https://github.com/clauderic)! - The `measureDroppableContainers` method now properly respects the MeasuringStrategy defined on `` and will not measure containers while measuring is disabled. + +- [#656](https://github.com/clauderic/dnd-kit/pull/656) [`c1b3b5a`](https://github.com/clauderic/dnd-kit/commit/c1b3b5a0be5759b707e22c4e1b1236aaa82773a2) Thanks [@clauderic](https://github.com/clauderic)! - Fixed an issue with collision detection using stale rects. The `droppableRects` property has been added to the `CollisionDetection` interface. + + All built-in collision detection algorithms have been updated to get the rect for a given droppable container from `droppableRects` rather than from the `rect.current` ref: + + ```diff + - const rect = droppableContainers.get(id).rect.current; + + const rect = droppableRects.get(id); + ``` + + The `rect.current` ref stored on DroppableContainers can be stale if measuring is scheduled but has not completed yet. Collision detection algorithms should use the `droppableRects` 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](https://github.com/clauderic/dnd-kit/pull/742) [`7161f70`](https://github.com/clauderic/dnd-kit/commit/7161f702c9fe06f8dafa6449d48b918070ca46fb) Thanks [@clauderic](https://github.com/clauderic)! - Fallback to initial rect measured for the active draggable node if it unmounts during initialization (after `onDragStart` is dispatched). + +- [#749](https://github.com/clauderic/dnd-kit/pull/749) [`5811986`](https://github.com/clauderic/dnd-kit/commit/5811986e7544a5e80039870a015e38df805eaad1) Thanks [@clauderic](https://github.com/clauderic)! - The `Data` and `DataRef` types are now exported by `@dnd-kit/core`. + +- [#699](https://github.com/clauderic/dnd-kit/pull/699) [`e302bd4`](https://github.com/clauderic/dnd-kit/commit/e302bd4488bdfb6735c97ac42c1f4a0b1e8bfdf9) Thanks [@JuAn-Kang](https://github.com/JuAn-Kang)! - Export `DragOverlayProps` for consumers. + +- [`750d726`](https://github.com/clauderic/dnd-kit/commit/750d72655922363b2218d7b41e028f9dceaef013) Thanks [@clauderic](https://github.com/clauderic)! - Fixed a bug in the `KeyboardSensor` 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](https://github.com/clauderic/dnd-kit/pull/660) [`e6e242c`](https://github.com/clauderic/dnd-kit/commit/e6e242cbc718ed687a26f5c622eeed4dbd6c2425) Thanks [@clauderic](https://github.com/clauderic)! - The `KeyboardSensor` was updated to use `scrollTo` instead of `scrollBy` when it is able to fully scroll to the new coordinates returned by the coordinate getter function. This resolves issues that can happen with `scrollBy` when called in rapid succession. + +- Updated dependencies [[`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc)]: + - @dnd-kit/utilities@3.2.0 + ## 5.0.3 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 49915356..648aaecf 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@dnd-kit/core", - "version": "5.0.3", + "version": "6.0.0", "description": "dnd kit – a lightweight React library for building performant and accessible drag and drop experiences", "author": "Claudéric Demers", "license": "MIT", @@ -32,7 +32,7 @@ "dependencies": { "tslib": "^2.0.0", "@dnd-kit/accessibility": "^3.0.0", - "@dnd-kit/utilities": "^3.1.0" + "@dnd-kit/utilities": "^3.2.0" }, "publishConfig": { "access": "public" diff --git a/packages/modifiers/CHANGELOG.md b/packages/modifiers/CHANGELOG.md index e7b4323c..6cd686a5 100644 --- a/packages/modifiers/CHANGELOG.md +++ b/packages/modifiers/CHANGELOG.md @@ -1,5 +1,13 @@ # @dnd-kit/modifiers +## 6.0.0 + +### Patch Changes + +- Updated dependencies [[`4173087`](https://github.com/clauderic/dnd-kit/commit/417308704454c50f88ab305ab450a99bde5034b0), [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`7161f70`](https://github.com/clauderic/dnd-kit/commit/7161f702c9fe06f8dafa6449d48b918070ca46fb), [`a52fba1`](https://github.com/clauderic/dnd-kit/commit/a52fba1ccff8a8f40e2cb8dcc15236cfd9e8fbec), [`40707ce`](https://github.com/clauderic/dnd-kit/commit/40707ce6f388957203d6df4ccbeef460450ffd7d), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`bf30718`](https://github.com/clauderic/dnd-kit/commit/bf30718bc22584a47053c14f5920e317ac45cd50), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`77e3d44`](https://github.com/clauderic/dnd-kit/commit/77e3d44502383d2f9a9f9af014b053619b3e37b3), [`5811986`](https://github.com/clauderic/dnd-kit/commit/5811986e7544a5e80039870a015e38df805eaad1), [`e302bd4`](https://github.com/clauderic/dnd-kit/commit/e302bd4488bdfb6735c97ac42c1f4a0b1e8bfdf9), [`188a450`](https://github.com/clauderic/dnd-kit/commit/188a4507b99d8e8fdaa50bd26deb826c86608e18), [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`750d726`](https://github.com/clauderic/dnd-kit/commit/750d72655922363b2218d7b41e028f9dceaef013), [`5f3c700`](https://github.com/clauderic/dnd-kit/commit/5f3c7009698d15936fd20f30f11ad3b23cd7886f), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`e6e242c`](https://github.com/clauderic/dnd-kit/commit/e6e242cbc718ed687a26f5c622eeed4dbd6c2425), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`33e6dd2`](https://github.com/clauderic/dnd-kit/commit/33e6dd2dc954f1f2da90d8f8af995021031b6b41), [`10f6836`](https://github.com/clauderic/dnd-kit/commit/10f683631103b1d919f2fbca1177141b9369d2cf), [`c1b3b5a`](https://github.com/clauderic/dnd-kit/commit/c1b3b5a0be5759b707e22c4e1b1236aaa82773a2), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc)]: + - @dnd-kit/core@6.0.0 + - @dnd-kit/utilities@3.2.0 + ## 5.0.0 ### Minor Changes diff --git a/packages/modifiers/package.json b/packages/modifiers/package.json index d6cb7a87..7924eaff 100644 --- a/packages/modifiers/package.json +++ b/packages/modifiers/package.json @@ -1,6 +1,6 @@ { "name": "@dnd-kit/modifiers", - "version": "5.0.0", + "version": "6.0.0", "description": "Translate modifier presets for use with `@dnd-kit` packages.", "author": "Claudéric Demers", "license": "MIT", @@ -26,14 +26,14 @@ "dist" ], "dependencies": { - "@dnd-kit/utilities": "^3.1.0", + "@dnd-kit/utilities": "^3.2.0", "tslib": "^2.0.0" }, "peerDependencies": { - "@dnd-kit/core": "^5.0.0" + "@dnd-kit/core": "^6.0.0" }, "devDependencies": { - "@dnd-kit/core": "^5.0.0" + "@dnd-kit/core": "^6.0.0" }, "publishConfig": { "access": "public" diff --git a/packages/sortable/CHANGELOG.md b/packages/sortable/CHANGELOG.md index c99840cf..004192f2 100644 --- a/packages/sortable/CHANGELOG.md +++ b/packages/sortable/CHANGELOG.md @@ -1,5 +1,128 @@ # @dnd-kit/sortable +## 7.0.0 + +### Major Changes + +- [#755](https://github.com/clauderic/dnd-kit/pull/755) [`33e6dd2`](https://github.com/clauderic/dnd-kit/commit/33e6dd2dc954f1f2da90d8f8af995021031b6b41) Thanks [@clauderic](https://github.com/clauderic)! - The `UniqueIdentifier` type has been updated to now accept either `string` or `number` identifiers. As a result, the `id` property of `useDraggable`, `useDroppable` and `useSortable` and the `items` prop of `` now all accept either `string` or `number` identifiers. + + #### Migration steps + + For consumers that are using TypeScript, import the `UniqueIdentifier` type to have strongly typed local state: + + ```diff + + import type {UniqueIdentifier} from '@dnd-kit/core'; + + function MyComponent() { + - const [items, setItems] = useState(['A', 'B', 'C']); + + const [items, setItems] = useState(['A', 'B', 'C']); + } + ``` + + Alternatively, consumers can cast or convert the `id` property to a `string` when reading the `id` property of interfaces such as `Active`, `Over`, `DroppableContainer` and `DraggableNode`. + + The `draggableNodes` object has also been converted to a map. Consumers that were reading from the `draggableNodes` property that is available on the public context of `` should follow these migration steps: + + ```diff + - draggableNodes[someId]; + + draggableNodes.get(someId); + ``` + +- [#660](https://github.com/clauderic/dnd-kit/pull/660) [`30bbd12`](https://github.com/clauderic/dnd-kit/commit/30bbd12f9606c2e99523cb9ece465041cb37e916) Thanks [@clauderic](https://github.com/clauderic)! - Changes to the default `sortableKeyboardCoordinates` 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 lists `onDragOver` instead of `onDragEnd` 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, for `down` arrow key, the default function had logic that would only consider collisions against droppables that were below the `bottom` 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. + + ```diff + - collisionRect.bottom > droppableRect.top + + collisionRect.top > droppableRect.top + ``` + + 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](https://github.com/clauderic/dnd-kit/tree/master/stories/2%20-%20Presets/Sortable/multipleContainersKeyboardCoordinates.ts). + +### Minor Changes + +- [#748](https://github.com/clauderic/dnd-kit/pull/748) [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57) Thanks [@clauderic](https://github.com/clauderic)! - Automatic focus management and activator node refs. + + #### Introducing activator node refs + + Introducing the concept of activator node refs for `useDraggable` and `useSortable`. 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` and `useSortable` may now optionally set the activator node ref on the element that receives listeners: + + ```diff + import {useDraggable} from '@dnd-kit/core'; + + function Draggable(props) { + const { + listeners, + setNodeRef, + + setActivatorNodeRef, + } = useDraggable({id: props.id}); + + return ( +
+ Draggable element + +
+ ) + } + ``` + + 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 of `useDraggble` and `useSortable`, @dnd-kit will automatically restore focus on the first focusable node of the draggable node set via the `setNodeRef` setter function of `useDraggable` and `useSortable`. + + If you were previously managing focus manually and would like to opt-out of automatic focus management, use the newly introduced `restoreFocus` property of the `accessibility` prop of ``: + + ```diff + ` component now optionally accepts a `disabled` prop to globally disable `useSortable` hooks rendered within it. + + The `disabled` prop accepts either a boolean or an object with the following shape: + + ```ts + interface Disabled { + draggable?: boolean; + droppable?: boolean; + } + ``` + + The `useSortable` hook has now been updated to also optionally accept the `disabled` configuration object to conditionally disable the `useDraggable` and/or `useDroppable` hooks used internally. + + Like the `strategy` prop, the `disabled` prop defined on the `useSortable` hook takes precedence over the `disabled` prop defined on the parent ``. + +### Patch Changes + +- [#757](https://github.com/clauderic/dnd-kit/pull/757) [`e6d544f`](https://github.com/clauderic/dnd-kit/commit/e6d544f3f775e6a43de25d1aee67efeec0d5db58) Thanks [@clauderic](https://github.com/clauderic)! - The `wasDragging` property of `animateLayoutChanges` now remains true for longer than a single re-render. Before this change, it was possible for the component where `useSortable` is used to re-render before @dnd-kit is ready to perform the layout animation, causing the animation to be skipped entirely. + +- [#749](https://github.com/clauderic/dnd-kit/pull/749) [`188a450`](https://github.com/clauderic/dnd-kit/commit/188a4507b99d8e8fdaa50bd26deb826c86608e18) Thanks [@clauderic](https://github.com/clauderic)! - Faster (and safer) equal implementation. + +- Updated dependencies [[`4173087`](https://github.com/clauderic/dnd-kit/commit/417308704454c50f88ab305ab450a99bde5034b0), [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`7161f70`](https://github.com/clauderic/dnd-kit/commit/7161f702c9fe06f8dafa6449d48b918070ca46fb), [`a52fba1`](https://github.com/clauderic/dnd-kit/commit/a52fba1ccff8a8f40e2cb8dcc15236cfd9e8fbec), [`40707ce`](https://github.com/clauderic/dnd-kit/commit/40707ce6f388957203d6df4ccbeef460450ffd7d), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`bf30718`](https://github.com/clauderic/dnd-kit/commit/bf30718bc22584a47053c14f5920e317ac45cd50), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`77e3d44`](https://github.com/clauderic/dnd-kit/commit/77e3d44502383d2f9a9f9af014b053619b3e37b3), [`5811986`](https://github.com/clauderic/dnd-kit/commit/5811986e7544a5e80039870a015e38df805eaad1), [`e302bd4`](https://github.com/clauderic/dnd-kit/commit/e302bd4488bdfb6735c97ac42c1f4a0b1e8bfdf9), [`188a450`](https://github.com/clauderic/dnd-kit/commit/188a4507b99d8e8fdaa50bd26deb826c86608e18), [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`750d726`](https://github.com/clauderic/dnd-kit/commit/750d72655922363b2218d7b41e028f9dceaef013), [`5f3c700`](https://github.com/clauderic/dnd-kit/commit/5f3c7009698d15936fd20f30f11ad3b23cd7886f), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`e6e242c`](https://github.com/clauderic/dnd-kit/commit/e6e242cbc718ed687a26f5c622eeed4dbd6c2425), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`33e6dd2`](https://github.com/clauderic/dnd-kit/commit/33e6dd2dc954f1f2da90d8f8af995021031b6b41), [`10f6836`](https://github.com/clauderic/dnd-kit/commit/10f683631103b1d919f2fbca1177141b9369d2cf), [`c1b3b5a`](https://github.com/clauderic/dnd-kit/commit/c1b3b5a0be5759b707e22c4e1b1236aaa82773a2), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc)]: + - @dnd-kit/core@6.0.0 + - @dnd-kit/utilities@3.2.0 + ## 6.0.1 ### Patch Changes diff --git a/packages/sortable/package.json b/packages/sortable/package.json index 6ba53871..3095a4de 100644 --- a/packages/sortable/package.json +++ b/packages/sortable/package.json @@ -1,6 +1,6 @@ { "name": "@dnd-kit/sortable", - "version": "6.0.1", + "version": "7.0.0", "description": "Official sortable preset and sensors for dnd kit", "author": "Claudéric Demers", "license": "MIT", @@ -26,15 +26,15 @@ "dist" ], "dependencies": { - "@dnd-kit/utilities": "^3.1.0", + "@dnd-kit/utilities": "^3.2.0", "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0", - "@dnd-kit/core": "^5.0.2" + "@dnd-kit/core": "^6.0.0" }, "devDependencies": { - "@dnd-kit/core": "^5.0.2" + "@dnd-kit/core": "^6.0.0" }, "publishConfig": { "access": "public" diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md index 6a8a1f6f..01d38bf3 100644 --- a/packages/utilities/CHANGELOG.md +++ b/packages/utilities/CHANGELOG.md @@ -1,5 +1,13 @@ # @dnd-kit/utilities +## 3.2.0 + +### Minor Changes + +- [#748](https://github.com/clauderic/dnd-kit/pull/748) [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57) Thanks [@clauderic](https://github.com/clauderic)! - Introduced the `findFirstFocusableNode` utility function that returns the first focusable node within a given HTMLElement, or the element itself if it is focusable. + +- [#733](https://github.com/clauderic/dnd-kit/pull/733) [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc) Thanks [@clauderic](https://github.com/clauderic)! - Introduced the `useEvent` hook based on [implementation breakdown in the RFC](https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md#internal-implementation). In the future, this hook will be used as a polyfill if the native React hook is unavailble. + ## 3.1.0 ### Minor Changes diff --git a/packages/utilities/package.json b/packages/utilities/package.json index cff7c823..ac26f063 100644 --- a/packages/utilities/package.json +++ b/packages/utilities/package.json @@ -1,6 +1,6 @@ { "name": "@dnd-kit/utilities", - "version": "3.1.0", + "version": "3.2.0", "description": "Internal utilities to bee shared between `@dnd-kit` packages", "author": "Claudéric Demers", "license": "MIT",