diff --git a/.changeset/metal-mice-develop.md b/.changeset/metal-mice-develop.md index bfc2bd45..bebca028 100644 --- a/.changeset/metal-mice-develop.md +++ b/.changeset/metal-mice-develop.md @@ -1,5 +1,5 @@ --- -'@dnd-kit/core': patch +'@dnd-kit/core': minor --- Make it possible to add visual cues when using activation constraints. diff --git a/packages/accessibility/CHANGELOG.md b/packages/accessibility/CHANGELOG.md index 1198ff9f..bce4236a 100644 --- a/packages/accessibility/CHANGELOG.md +++ b/packages/accessibility/CHANGELOG.md @@ -1,5 +1,15 @@ # @dnd-kit/accessibility +## 3.1.1 + +### Patch Changes + +- [#1534](https://github.com/clauderic/dnd-kit/pull/1534) [`93602df`](https://github.com/clauderic/dnd-kit/commit/93602df08498b28749e8146e0f6143ab987bc178) Thanks [@duvallj](https://github.com/duvallj)! - Workaround `` layout bug by adding explicit `top` and `left` + attributes. Under sufficiently complex CSS conditions, the element would + overflow containers that it's not supposed to. See [this + post](https://blog.duvallj.pw/posts/2024-11-19-chrome-heisenbug-uncovered.html) + for a complete explanation. + ## 3.1.0 ### Minor Changes diff --git a/packages/accessibility/package.json b/packages/accessibility/package.json index ed4bd5f2..a3a66061 100644 --- a/packages/accessibility/package.json +++ b/packages/accessibility/package.json @@ -1,6 +1,6 @@ { "name": "@dnd-kit/accessibility", - "version": "3.1.0", + "version": "3.1.1", "description": "A generic toolkit to help with accessibility", "author": "Claudéric Demers", "license": "MIT", diff --git a/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx b/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx index 7caf2bb1..15c88aa0 100644 --- a/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx +++ b/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx @@ -10,6 +10,8 @@ export function LiveRegion({id, announcement, ariaLiveType = "assertive"}: Props // Hide element visually but keep it readable by screen readers const visuallyHidden: React.CSSProperties = { position: 'fixed', + top: 0, + left: 0, width: 1, height: 1, margin: -1, diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index bbf3d7b6..b0140061 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,28 @@ # @dnd-kit/core +## 6.2.0 + +### Minor Changes + +- [#1140](https://github.com/clauderic/dnd-kit/pull/1140) [`545a41c`](https://github.com/clauderic/dnd-kit/commit/545a41c27c6919e4ca22a58a67f3fa02a7caab8a) Thanks [@anilanar](https://github.com/anilanar)! - Add `activatorEvent` to `DragStartEvent` + +### Patch Changes + +- [#1494](https://github.com/clauderic/dnd-kit/pull/1494) [`00ec286`](https://github.com/clauderic/dnd-kit/commit/00ec286ab2fc7969549a4b19ffd42a09b5171dbe) Thanks [@dinkinflickaa](https://github.com/dinkinflickaa)! - Improves performance by eliminating wasteful re-renders on every child item on click + +- [#1400](https://github.com/clauderic/dnd-kit/pull/1400) [`995dc23`](https://github.com/clauderic/dnd-kit/commit/995dc23b7cd9019f3a920676cbe4e141e917e82c) Thanks [@12joan](https://github.com/12joan)! - Export `defaultKeyboardCoordinateGetter` + +- [#1542](https://github.com/clauderic/dnd-kit/pull/1542) [`f629ec6`](https://github.com/clauderic/dnd-kit/commit/f629ec6a9c3c25b749561fac31741046d96c28dc) Thanks [@clauderic](https://github.com/clauderic)! - Fix bug with draggable and sortable elements with an `id` equal to `0`. + +- [#1541](https://github.com/clauderic/dnd-kit/pull/1541) [`99643f6`](https://github.com/clauderic/dnd-kit/commit/99643f634cd55fa0bf0898365883507b28637659) Thanks [@clauderic](https://github.com/clauderic)! - Handle `touchcancel` and `pointercancel` events. + +- [#1435](https://github.com/clauderic/dnd-kit/pull/1435) [`6bbe39b`](https://github.com/clauderic/dnd-kit/commit/6bbe39bba6ad9afd0bc6db1c345ad4e6b58f5e5e) Thanks [@knaveenkumar3576](https://github.com/knaveenkumar3576)! - Faster Paint with delayed flush of Effects + +- [#1543](https://github.com/clauderic/dnd-kit/pull/1543) [`bcaf7c4`](https://github.com/clauderic/dnd-kit/commit/bcaf7c4e57b34dfc8ff9c4eea7a01c6e525e7874) Thanks [@clauderic](https://github.com/clauderic)! - Fix a bug with auto-scroller continuing to observe stale elements, causing them to be considered as scrollable. + +- Updated dependencies [[`93602df`](https://github.com/clauderic/dnd-kit/commit/93602df08498b28749e8146e0f6143ab987bc178)]: + - @dnd-kit/accessibility@3.1.1 + ## 6.1.0 ### Minor Changes diff --git a/packages/core/package.json b/packages/core/package.json index c52c1d4f..5d133aa7 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@dnd-kit/core", - "version": "6.1.0", + "version": "6.2.0", "description": "dnd kit – a lightweight React library for building performant and accessible drag and drop experiences", "author": "Claudéric Demers", "license": "MIT", @@ -31,7 +31,7 @@ }, "dependencies": { "tslib": "^2.0.0", - "@dnd-kit/accessibility": "^3.1.0", + "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2" }, "publishConfig": { diff --git a/packages/core/src/components/DndContext/DndContext.tsx b/packages/core/src/components/DndContext/DndContext.tsx index fe62b0e2..2dc06d23 100644 --- a/packages/core/src/components/DndContext/DndContext.tsx +++ b/packages/core/src/components/DndContext/DndContext.tsx @@ -156,7 +156,7 @@ export const DndContext = memo(function DndContext({ draggable: {active: activeId, nodes: draggableNodes, translate}, droppable: {containers: droppableContainers}, } = state; - const node = activeId ? draggableNodes.get(activeId) : null; + const node = activeId != null ? draggableNodes.get(activeId) : null; const activeRects = useRef({ initial: null, translated: null, @@ -201,7 +201,7 @@ export const DndContext = memo(function DndContext({ ); useLayoutShiftScrollCompensation({ - activeNode: activeId ? draggableNodes.get(activeId) : null, + activeNode: activeId != null ? draggableNodes.get(activeId) : null, config: autoScrollOptions.layoutShiftCompensation, initialRect: initialActiveNodeRect, measure: measuringConfiguration.draggable.measure, @@ -323,6 +323,7 @@ export const DndContext = memo(function DndContext({ activeNodeRect ); + const activeSensorRef = useRef(null); const instantiateSensor = useCallback( ( event: React.SyntheticEvent, @@ -393,6 +394,7 @@ export const DndContext = memo(function DndContext({ const {onDragStart} = latestProps.current; const event: DragStartEvent = { + activatorEvent, active: {id, data: draggableNode.data, rect: activeRects}, }; @@ -405,6 +407,8 @@ export const DndContext = memo(function DndContext({ active: id, }); dispatchMonitorEvent({type: 'onDragStart', event}); + setActiveSensor(activeSensorRef.current); + setActivatorEvent(activatorEvent); }); }, onMove(coordinates) { @@ -417,10 +421,7 @@ export const DndContext = memo(function DndContext({ onCancel: createHandler(Action.DragCancel), }); - unstable_batchedUpdates(() => { - setActiveSensor(sensorInstance); - setActivatorEvent(event.nativeEvent); - }); + activeSensorRef.current = sensorInstance; function createHandler(type: Action.DragEnd | Action.DragCancel) { return async function handler() { @@ -456,6 +457,7 @@ export const DndContext = memo(function DndContext({ setOver(null); setActiveSensor(null); setActivatorEvent(null); + activeSensorRef.current = null; const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel'; diff --git a/packages/core/src/hooks/useDraggable.ts b/packages/core/src/hooks/useDraggable.ts index 48fb19b0..5a580129 100644 --- a/packages/core/src/hooks/useDraggable.ts +++ b/packages/core/src/hooks/useDraggable.ts @@ -38,7 +38,7 @@ const NullContext = createContext(null); const defaultRole = 'button'; -const ID_PREFIX = 'Droppable'; +const ID_PREFIX = 'Draggable'; export function useDraggable({ id, diff --git a/packages/core/src/hooks/useDroppable.ts b/packages/core/src/hooks/useDroppable.ts index 7939f15d..849e798d 100644 --- a/packages/core/src/hooks/useDroppable.ts +++ b/packages/core/src/hooks/useDroppable.ts @@ -1,10 +1,5 @@ import {useCallback, useContext, useEffect, useRef} from 'react'; -import { - useIsomorphicLayoutEffect, - useLatestValue, - useNodeRef, - useUniqueId, -} from '@dnd-kit/utilities'; +import {useLatestValue, useNodeRef, useUniqueId} from '@dnd-kit/utilities'; import {InternalContext, Action, Data} from '../store'; import type {ClientRect, UniqueIdentifier} from '../types'; @@ -43,9 +38,8 @@ export function useDroppable({ resizeObserverConfig, }: UseDroppableArguments) { const key = useUniqueId(ID_PREFIX); - const {active, dispatch, over, measureDroppableContainers} = useContext( - InternalContext - ); + const {active, dispatch, over, measureDroppableContainers} = + useContext(InternalContext); const previous = useRef({disabled}); const resizeObserverConnected = useRef(false); const rect = useRef(null); @@ -116,7 +110,7 @@ export function useDroppable({ resizeObserver.observe(nodeRef.current); }, [nodeRef, resizeObserver]); - useIsomorphicLayoutEffect( + useEffect( () => { dispatch({ type: Action.RegisterDroppable, diff --git a/packages/core/src/hooks/utilities/useCachedNode.ts b/packages/core/src/hooks/utilities/useCachedNode.ts index c010d551..ebf1062e 100644 --- a/packages/core/src/hooks/utilities/useCachedNode.ts +++ b/packages/core/src/hooks/utilities/useCachedNode.ts @@ -7,12 +7,12 @@ export function useCachedNode( draggableNodes: DraggableNodes, id: UniqueIdentifier | null ): DraggableNode['node']['current'] { - const draggableNode = id !== null ? draggableNodes.get(id) : undefined; + const draggableNode = id != null ? draggableNodes.get(id) : undefined; const node = draggableNode ? draggableNode.node.current : null; return useLazyMemo( (cachedNode) => { - if (id === null) { + if (id == null) { return null; } diff --git a/packages/core/src/hooks/utilities/useRect.ts b/packages/core/src/hooks/utilities/useRect.ts index a5faac82..a2818782 100644 --- a/packages/core/src/hooks/utilities/useRect.ts +++ b/packages/core/src/hooks/utilities/useRect.ts @@ -1,4 +1,4 @@ -import {useReducer} from 'react'; +import {useState} from 'react'; import {useIsomorphicLayoutEffect} from '@dnd-kit/utilities'; import type {ClientRect} from '../../types'; @@ -16,8 +16,30 @@ export function useRect( measure: (element: HTMLElement) => ClientRect = defaultMeasure, fallbackRect?: ClientRect | null ) { - const [rect, measureRect] = useReducer(reducer, null); + const [rect, setRect] = useState(null); + function measureRect() { + setRect((currentRect): ClientRect | null => { + if (!element) { + return null; + } + + if (element.isConnected === false) { + // Fall back to last rect we measured if the element is + // no longer connected to the DOM. + return currentRect ?? fallbackRect ?? null; + } + + const newRect = measure(element); + + if (JSON.stringify(currentRect) === JSON.stringify(newRect)) { + return currentRect; + } + + return newRect; + }); + } + const mutationObserver = useMutationObserver({ callback(records) { if (!element) { @@ -56,24 +78,4 @@ export function useRect( }, [element]); return rect; - - function reducer(currentRect: ClientRect | null) { - if (!element) { - return null; - } - - if (element.isConnected === false) { - // Fall back to last rect we measured if the element is - // no longer connected to the DOM. - return currentRect ?? fallbackRect ?? null; - } - - const newRect = measure(element); - - if (JSON.stringify(currentRect) === JSON.stringify(newRect)) { - return currentRect; - } - - return newRect; - } } diff --git a/packages/core/src/hooks/utilities/useRects.ts b/packages/core/src/hooks/utilities/useRects.ts index 97a56e2f..9eb23620 100644 --- a/packages/core/src/hooks/utilities/useRects.ts +++ b/packages/core/src/hooks/utilities/useRects.ts @@ -1,4 +1,4 @@ -import {useReducer} from 'react'; +import {useState} from 'react'; import {getWindow, useIsomorphicLayoutEffect} from '@dnd-kit/utilities'; import type {ClientRect} from '../../types'; @@ -18,33 +18,29 @@ export function useRects( const windowRect = useWindowRect( firstElement ? getWindow(firstElement) : null ); - const [rects, measureRects] = useReducer(reducer, defaultValue); - const resizeObserver = useResizeObserver({callback: measureRects}); - - if (elements.length > 0 && rects === defaultValue) { - measureRects(); + const [rects, setRects] = useState(defaultValue); + + function measureRects() { + setRects(() => { + if (!elements.length) { + return defaultValue; + } + + return elements.map((element) => + isDocumentScrollingElement(element) + ? (windowRect as ClientRect) + : new Rect(measure(element), element) + ); + }); } + const resizeObserver = useResizeObserver({callback: measureRects}); + useIsomorphicLayoutEffect(() => { - if (elements.length) { - elements.forEach((element) => resizeObserver?.observe(element)); - } else { - resizeObserver?.disconnect(); - measureRects(); - } + resizeObserver?.disconnect(); + measureRects(); + elements.forEach((element) => resizeObserver?.observe(element)); }, [elements]); return rects; - - function reducer() { - if (!elements.length) { - return defaultValue; - } - - return elements.map((element) => - isDocumentScrollingElement(element) - ? (windowRect as ClientRect) - : new Rect(measure(element), element) - ); - } } diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 857f0da0..e759d9ff 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -52,6 +52,7 @@ export { MouseSensor, PointerSensor, TouchSensor, + defaultKeyboardCoordinateGetter, useSensors, useSensor, } from './sensors'; diff --git a/packages/core/src/sensors/index.ts b/packages/core/src/sensors/index.ts index 854cf591..831a2ff7 100644 --- a/packages/core/src/sensors/index.ts +++ b/packages/core/src/sensors/index.ts @@ -18,7 +18,11 @@ export type {MouseSensorOptions, MouseSensorProps} from './mouse'; export {TouchSensor} from './touch'; export type {TouchSensorOptions, TouchSensorProps} from './touch'; -export {KeyboardSensor, KeyboardCode} from './keyboard'; +export { + KeyboardSensor, + KeyboardCode, + defaultKeyboardCoordinateGetter, +} from './keyboard'; export type { KeyboardCoordinateGetter, KeyboardSensorOptions, diff --git a/packages/core/src/sensors/keyboard/index.ts b/packages/core/src/sensors/keyboard/index.ts index a36d740a..d8bfe1fd 100644 --- a/packages/core/src/sensors/keyboard/index.ts +++ b/packages/core/src/sensors/keyboard/index.ts @@ -5,3 +5,4 @@ export type { } from './KeyboardSensor'; export type {KeyboardCoordinateGetter, KeyboardCodes} from './types'; export {KeyboardCode} from './types'; +export {defaultKeyboardCoordinateGetter} from './defaults'; diff --git a/packages/core/src/sensors/pointer/AbstractPointerSensor.ts b/packages/core/src/sensors/pointer/AbstractPointerSensor.ts index 30afb814..528c8cd5 100644 --- a/packages/core/src/sensors/pointer/AbstractPointerSensor.ts +++ b/packages/core/src/sensors/pointer/AbstractPointerSensor.ts @@ -32,6 +32,7 @@ interface EventDescriptor { } export interface PointerEventHandlers { + cancel?: EventDescriptor; move: EventDescriptor; end: EventDescriptor; } @@ -109,6 +110,11 @@ export class AbstractPointerSensor implements SensorInstance { this.listeners.add(events.move.name, this.handleMove, {passive: false}); this.listeners.add(events.end.name, this.handleEnd); + + if (events.cancel) { + this.listeners.add(events.cancel.name, this.handleCancel); + } + this.windowListeners.add(EventName.Resize, this.handleCancel); this.windowListeners.add(EventName.DragStart, preventDefault); this.windowListeners.add(EventName.VisibilityChange, this.handleCancel); diff --git a/packages/core/src/sensors/pointer/PointerSensor.ts b/packages/core/src/sensors/pointer/PointerSensor.ts index a415c55a..6faa6aae 100644 --- a/packages/core/src/sensors/pointer/PointerSensor.ts +++ b/packages/core/src/sensors/pointer/PointerSensor.ts @@ -9,6 +9,7 @@ import { } from './AbstractPointerSensor'; const events: PointerEventHandlers = { + cancel: {name: 'pointercancel'}, move: {name: 'pointermove'}, end: {name: 'pointerup'}, }; diff --git a/packages/core/src/sensors/touch/TouchSensor.ts b/packages/core/src/sensors/touch/TouchSensor.ts index 57a10bfd..3812955f 100644 --- a/packages/core/src/sensors/touch/TouchSensor.ts +++ b/packages/core/src/sensors/touch/TouchSensor.ts @@ -9,6 +9,7 @@ import { import type {SensorProps} from '../types'; const events: PointerEventHandlers = { + cancel: {name: 'touchcancel'}, move: {name: 'touchmove'}, end: {name: 'touchend'}, }; diff --git a/packages/core/src/store/reducer.ts b/packages/core/src/store/reducer.ts index fa34ba9e..8606c2d9 100644 --- a/packages/core/src/store/reducer.ts +++ b/packages/core/src/store/reducer.ts @@ -28,7 +28,7 @@ export function reducer(state: State, action: Actions): State { }, }; case Action.DragMove: - if (!state.draggable.active) { + if (state.draggable.active == null) { return state; } diff --git a/packages/core/src/types/events.ts b/packages/core/src/types/events.ts index e96e6e24..7e30f044 100644 --- a/packages/core/src/types/events.ts +++ b/packages/core/src/types/events.ts @@ -33,7 +33,8 @@ export interface DragPendingEvent { offset?: Coordinates | undefined; } -export interface DragStartEvent extends Pick {} +export interface DragStartEvent + extends Pick {} export interface DragMoveEvent extends DragEvent {} diff --git a/packages/modifiers/CHANGELOG.md b/packages/modifiers/CHANGELOG.md index 2b7ca0fa..611b3b48 100644 --- a/packages/modifiers/CHANGELOG.md +++ b/packages/modifiers/CHANGELOG.md @@ -1,5 +1,12 @@ # @dnd-kit/modifiers +## 8.0.0 + +### Patch Changes + +- Updated dependencies [[`00ec286`](https://github.com/clauderic/dnd-kit/commit/00ec286ab2fc7969549a4b19ffd42a09b5171dbe), [`995dc23`](https://github.com/clauderic/dnd-kit/commit/995dc23b7cd9019f3a920676cbe4e141e917e82c), [`f629ec6`](https://github.com/clauderic/dnd-kit/commit/f629ec6a9c3c25b749561fac31741046d96c28dc), [`99643f6`](https://github.com/clauderic/dnd-kit/commit/99643f634cd55fa0bf0898365883507b28637659), [`6bbe39b`](https://github.com/clauderic/dnd-kit/commit/6bbe39bba6ad9afd0bc6db1c345ad4e6b58f5e5e), [`545a41c`](https://github.com/clauderic/dnd-kit/commit/545a41c27c6919e4ca22a58a67f3fa02a7caab8a), [`bcaf7c4`](https://github.com/clauderic/dnd-kit/commit/bcaf7c4e57b34dfc8ff9c4eea7a01c6e525e7874)]: + - @dnd-kit/core@6.2.0 + ## 7.0.0 ### Patch Changes diff --git a/packages/modifiers/package.json b/packages/modifiers/package.json index 9a937d7d..a86b6232 100644 --- a/packages/modifiers/package.json +++ b/packages/modifiers/package.json @@ -1,6 +1,6 @@ { "name": "@dnd-kit/modifiers", - "version": "7.0.0", + "version": "8.0.0", "description": "Translate modifier presets for use with `@dnd-kit` packages.", "author": "Claudéric Demers", "license": "MIT", @@ -30,11 +30,11 @@ "tslib": "^2.0.0" }, "peerDependencies": { - "@dnd-kit/core": "^6.1.0", + "@dnd-kit/core": "^6.2.0", "react": ">=16.8.0" }, "devDependencies": { - "@dnd-kit/core": "^6.1.0" + "@dnd-kit/core": "^6.2.0" }, "publishConfig": { "access": "public" diff --git a/packages/sortable/CHANGELOG.md b/packages/sortable/CHANGELOG.md index 2eebb783..bc430cd3 100644 --- a/packages/sortable/CHANGELOG.md +++ b/packages/sortable/CHANGELOG.md @@ -1,5 +1,14 @@ # @dnd-kit/sortable +## 9.0.0 + +### Patch Changes + +- [#1542](https://github.com/clauderic/dnd-kit/pull/1542) [`f629ec6`](https://github.com/clauderic/dnd-kit/commit/f629ec6a9c3c25b749561fac31741046d96c28dc) Thanks [@clauderic](https://github.com/clauderic)! - Fix bug with draggable and sortable elements with an `id` equal to `0`. + +- Updated dependencies [[`00ec286`](https://github.com/clauderic/dnd-kit/commit/00ec286ab2fc7969549a4b19ffd42a09b5171dbe), [`995dc23`](https://github.com/clauderic/dnd-kit/commit/995dc23b7cd9019f3a920676cbe4e141e917e82c), [`f629ec6`](https://github.com/clauderic/dnd-kit/commit/f629ec6a9c3c25b749561fac31741046d96c28dc), [`99643f6`](https://github.com/clauderic/dnd-kit/commit/99643f634cd55fa0bf0898365883507b28637659), [`6bbe39b`](https://github.com/clauderic/dnd-kit/commit/6bbe39bba6ad9afd0bc6db1c345ad4e6b58f5e5e), [`545a41c`](https://github.com/clauderic/dnd-kit/commit/545a41c27c6919e4ca22a58a67f3fa02a7caab8a), [`bcaf7c4`](https://github.com/clauderic/dnd-kit/commit/bcaf7c4e57b34dfc8ff9c4eea7a01c6e525e7874)]: + - @dnd-kit/core@6.2.0 + ## 8.0.0 ### Patch Changes diff --git a/packages/sortable/package.json b/packages/sortable/package.json index 8644f774..0253af98 100644 --- a/packages/sortable/package.json +++ b/packages/sortable/package.json @@ -1,6 +1,6 @@ { "name": "@dnd-kit/sortable", - "version": "8.0.0", + "version": "9.0.0", "description": "Official sortable preset and sensors for dnd kit", "author": "Claudéric Demers", "license": "MIT", @@ -31,10 +31,10 @@ }, "peerDependencies": { "react": ">=16.8.0", - "@dnd-kit/core": "^6.1.0" + "@dnd-kit/core": "^6.2.0" }, "devDependencies": { - "@dnd-kit/core": "^6.1.0" + "@dnd-kit/core": "^6.2.0" }, "publishConfig": { "access": "public" diff --git a/packages/sortable/src/hooks/useSortable.ts b/packages/sortable/src/hooks/useSortable.ts index 6560b8a6..7df81f31 100644 --- a/packages/sortable/src/hooks/useSortable.ts +++ b/packages/sortable/src/hooks/useSortable.ts @@ -179,7 +179,7 @@ export function useSortable({ return; } - if (activeId && !previous.current.activeId) { + if (activeId != null && previous.current.activeId == null) { previous.current.activeId = activeId; return; } diff --git a/stories/2 - Presets/Sortable/5-Virtualized.story.tsx b/stories/2 - Presets/Sortable/5-Virtualized.story.tsx index 89bd8126..2c206462 100644 --- a/stories/2 - Presets/Sortable/5-Virtualized.story.tsx +++ b/stories/2 - Presets/Sortable/5-Virtualized.story.tsx @@ -50,7 +50,7 @@ function Sortable({ }) ); const getIndex = (id: UniqueIdentifier) => items.indexOf(id); - const activeIndex = activeId ? getIndex(activeId) : -1; + const activeIndex = activeId != null ? getIndex(activeId) : -1; return ( { const id = items[index]; @@ -104,7 +106,7 @@ function Sortable({ {createPortal( - {activeId ? ( + {activeId != null ? ( (null); const lastOverId = useRef(null); const recentlyMovedToNewContainer = useRef(false); - const isSortingContainer = activeId ? containers.includes(activeId) : false; + const isSortingContainer = + activeId != null ? containers.includes(activeId) : false; /** * Custom collision detection strategy optimized for multiple containers diff --git a/stories/2 - Presets/Sortable/Sortable.tsx b/stories/2 - Presets/Sortable/Sortable.tsx index b96a13f5..c5eaf780 100644 --- a/stories/2 - Presets/Sortable/Sortable.tsx +++ b/stories/2 - Presets/Sortable/Sortable.tsx @@ -117,8 +117,7 @@ export function Sortable({ }: Props) { const [items, setItems] = useState( () => - initialItems ?? - createRange(itemCount, (index) => index + 1) + initialItems ?? createRange(itemCount, (index) => index) ); const [activeId, setActiveId] = useState(null); const sensors = useSensors( @@ -137,7 +136,7 @@ export function Sortable({ const isFirstAnnouncement = useRef(true); const getIndex = (id: UniqueIdentifier) => items.indexOf(id); const getPosition = (id: UniqueIdentifier) => getIndex(id) + 1; - const activeIndex = activeId ? getIndex(activeId) : -1; + const activeIndex = activeId != null ? getIndex(activeId) : -1; const handleRemove = removable ? (id: UniqueIdentifier) => setItems((items) => items.filter((item) => item !== id)) @@ -184,7 +183,7 @@ export function Sortable({ }; useEffect(() => { - if (!activeId) { + if (activeId == null) { isFirstAnnouncement.current = true; } }, [activeId]); @@ -246,7 +245,7 @@ export function Sortable({ adjustScale={adjustScale} dropAnimation={dropAnimation} > - {activeId ? ( + {activeId != null ? ( createRange(20, (index) => `${index + 1}`) ); - const activeIndex = activeId ? items.indexOf(activeId) : -1; + const activeIndex = activeId != null ? items.indexOf(activeId) : -1; const sensors = useSensors( useSensor(PointerSensor), useSensor(KeyboardSensor, {coordinateGetter: sortableKeyboardCoordinates}) @@ -102,7 +102,7 @@ export function Pages({layout}: Props) { - {activeId ? ( + {activeId != null ? ( ) : null} diff --git a/stories/3 - Examples/Tree/SortableTree.tsx b/stories/3 - Examples/Tree/SortableTree.tsx index 32d4bd12..a40436c0 100644 --- a/stories/3 - Examples/Tree/SortableTree.tsx +++ b/stories/3 - Examples/Tree/SortableTree.tsx @@ -129,7 +129,7 @@ export function SortableTree({ return removeChildrenOf( flattenedTree, - activeId ? [activeId, ...collapsedItems] : collapsedItems + activeId != null ? [activeId, ...collapsedItems] : collapsedItems ); }, [activeId, items]); const projected = @@ -156,9 +156,10 @@ export function SortableTree({ }) ); - const sortedIds = useMemo(() => flattenedItems.map(({id}) => id), [ - flattenedItems, - ]); + const sortedIds = useMemo( + () => flattenedItems.map(({id}) => id), + [flattenedItems] + ); const activeItem = activeId ? flattenedItems.find(({id}) => id === activeId) : null;