@hello-pangea/dnd - npm Package Compare versions

Comparing version 17.0.0 to 18.0.0-beta.0

package.json

 {
   "name": "@hello-pangea/dnd",
-  "version": "17.0.0",
+  "version": "18.0.0-beta.0",
   "private": false,
@@ -52,2 +52,4 @@ "description": "Beautiful and accessible drag and drop for lists with React",
     "test": "jest --config ./jest.config.ts",
+    "test:react-18": "cross-env REACT_MAJOR_VERSION=18 pnpm test",
+    "test:react-19": "cross-env REACT_MAJOR_VERSION=19 pnpm test",
     "test:browser": "cypress open",
@@ -77,28 +79,26 @@ "test:browser:ci": "cypress run",
     "css-box-model": "^1.2.1",
-    "memoize-one": "^6.0.0",
     "raf-schd": "^4.0.3",
-    "react-redux": "^9.1.2",
-    "redux": "^5.0.1",
-    "use-memo-one": "^1.1.3"
+    "react-redux": "^9.2.0",
+    "redux": "^5.0.1"
   },
   "devDependencies": {
-    "@atlaskit/css-reset": "6.10.1",
-    "@atlaskit/theme": "13.0.0",
-    "@babel/core": "7.25.2",
-    "@babel/eslint-parser": "7.25.1",
-    "@babel/plugin-transform-class-properties": "7.25.4",
-    "@babel/plugin-transform-modules-commonjs": "7.24.8",
-    "@babel/plugin-transform-object-assign": "7.24.7",
-    "@babel/plugin-transform-private-methods": "7.25.4",
-    "@babel/plugin-transform-private-property-in-object": "7.24.7",
-    "@babel/plugin-transform-runtime": "7.25.4",
-    "@babel/preset-env": "7.25.4",
-    "@babel/preset-react": "7.24.7",
-    "@babel/preset-typescript": "7.24.7",
-    "@commitlint/cli": "19.5.0",
-    "@commitlint/config-conventional": "19.5.0",
-    "@commitlint/cz-commitlint": "19.5.0",
+    "@atlaskit/css-reset": "6.11.2",
+    "@atlaskit/theme": "13.1.0",
+    "@babel/core": "7.26.0",
+    "@babel/eslint-parser": "7.25.9",
+    "@babel/plugin-transform-class-properties": "7.25.9",
+    "@babel/plugin-transform-modules-commonjs": "7.26.3",
+    "@babel/plugin-transform-object-assign": "7.25.9",
+    "@babel/plugin-transform-private-methods": "7.25.9",
+    "@babel/plugin-transform-private-property-in-object": "7.25.9",
+    "@babel/plugin-transform-runtime": "7.25.9",
+    "@babel/preset-env": "7.26.0",
+    "@babel/preset-react": "7.26.3",
+    "@babel/preset-typescript": "7.26.0",
+    "@commitlint/cli": "19.6.1",
+    "@commitlint/config-conventional": "19.6.0",
+    "@commitlint/cz-commitlint": "19.6.1",
     "@emotion/eslint-plugin": "11.12.0",
-    "@emotion/react": "11.13.3",
-    "@emotion/styled": "11.13.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
     "@jest/environment": "29.7.0",
@@ -109,29 +109,29 @@ "@release-it/conventional-changelog": "8.0.2",
     "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-node-resolve": "15.3.1",
     "@rollup/plugin-replace": "5.0.7",
     "@rollup/plugin-strip": "3.0.4",
     "@rollup/plugin-terser": "0.4.4",
-    "@storybook/addon-docs": "8.3.0",
-    "@storybook/addon-essentials": "8.3.0",
-    "@storybook/addon-storysource": "8.3.0",
-    "@storybook/addon-webpack5-compiler-swc": "1.0.5",
-    "@storybook/manager-api": "8.3.0",
-    "@storybook/react": "8.3.0",
-    "@storybook/react-webpack5": "8.3.0",
-    "@storybook/theming": "8.3.0",
-    "@swc/core": "1.7.26",
-    "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.5.0",
-    "@testing-library/react": "14.3.1",
+    "@storybook/addon-docs": "8.4.7",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-storysource": "8.4.7",
+    "@storybook/addon-webpack5-compiler-swc": "1.0.6",
+    "@storybook/manager-api": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/react-webpack5": "8.4.7",
+    "@storybook/theming": "8.4.7",
+    "@swc/core": "1.10.4",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.2.0",
     "@types/express": "4.17.21",
     "@types/fs-extra": "11.0.4",
-    "@types/jest": "29.5.13",
+    "@types/jest": "29.5.14",
     "@types/jest-axe": "3.5.9",
     "@types/jsdom": "21.1.7",
-    "@types/markdown-it": "13.0.9",
-    "@types/node": "20.16.5",
+    "@types/lodash.isequal": "4.5.8",
+    "@types/markdown-it": "14.1.2",
+    "@types/node": "22.10.5",
     "@types/raf-schd": "4.0.3",
-    "@types/react": "18.3.5",
-    "@types/react-dom": "18.3.0",
-    "@types/react-virtualized": "9.21.30",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
     "@types/react-window": "1.8.8",
@@ -142,29 +142,29 @@ "@types/seedrandom": "3.0.8",
     "babel-jest": "29.7.0",
-    "babel-loader": "9.1.3",
+    "babel-loader": "9.2.1",
     "babel-plugin-dev-expression": "0.2.3",
     "babel-plugin-module-resolver": "5.0.2",
-    "browserslist": "4.23.3",
-    "commitizen": "4.3.0",
+    "browserslist": "4.24.3",
+    "commitizen": "4.3.1",
     "cross-env": "7.0.3",
     "csstype": "3.1.3",
-    "cypress": "13.14.2",
-    "dotenv": "16.4.5",
-    "eslint": "8.57.0",
+    "cypress": "13.17.0",
+    "dotenv": "16.4.7",
+    "eslint": "8.57.1",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
-    "eslint-import-resolver-typescript": "3.6.3",
+    "eslint-import-resolver-typescript": "3.7.0",
     "eslint-plugin-cypress": "2.15.2",
     "eslint-plugin-es5": "1.5.0",
-    "eslint-plugin-import": "2.30.0",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jest": "27.9.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
-    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-n": "17.15.1",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.36.1",
+    "eslint-plugin-react": "7.37.3",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-storybook": "0.8.0",
-    "express": "4.20.0",
+    "eslint-plugin-storybook": "0.11.2",
+    "express": "4.21.2",
     "fast-glob": "3.3.2",
     "fs-extra": "11.2.0",
-    "husky": "9.1.6",
+    "husky": "9.1.7",
     "jest": "29.7.0",
@@ -175,14 +175,16 @@ "jest-axe": "9.0.0",
     "jest-watch-typeahead": "2.2.2",
-    "jsdom": "25.0.0",
-    "lighthouse": "11.7.1",
+    "jsdom": "25.0.1",
+    "lighthouse": "12.3.0",
+    "lodash.isequal": "4.5.0",
     "markdown-it": "14.1.0",
     "memory-fs": "0.5.0",
-    "postcss-styled-syntax": "0.6.4",
-    "prettier": "3.3.3",
+    "postcss-styled-syntax": "0.7.0",
+    "prettier": "3.4.2",
     "raf-stub": "3.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-virtualized": "9.22.5",
-    "react-window": "1.8.10",
-    "release-it": "17.6.0",
+    "react": "19.0.0",
+    "react-18": "npm:react@18.3.0",
+    "react-dom": "19.0.0",
+    "react-dom-18": "npm:react-dom@18.3.0",
+    "react-window": "1.8.11",
+    "release-it": "17.11.0",
     "require-from-string": "2.0.2",
@@ -193,15 +195,15 @@ "rimraf": "6.0.1",
     "seedrandom": "3.0.5",
-    "storybook": "8.3.0",
+    "storybook": "8.4.7",
     "styled-components": "6.1.13",
-    "stylelint": "16.9.0",
+    "stylelint": "16.12.0",
     "stylelint-config-recommended": "14.0.1",
     "stylelint-config-standard": "36.0.1",
-    "ts-node": "^10.9.2",
-    "typescript": "5.6.2",
+    "ts-node": "10.9.2",
+    "typescript": "5.7.2",
     "wait-on": "8.0.1",
-    "webpack": "5.94.0"
+    "webpack": "5.97.1"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -212,3 +214,3 @@ "license": "Apache-2.0",
   },
-  "packageManager": "pnpm@9.10.0"
+  "packageManager": "pnpm@9.15.2"
 }

README.md

@@ -32,2 +32,12 @@ <p align="center">
 
+## Star History
+
+<a href="https://star-history.com/#hello-pangea/dnd&Date">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=hello-pangea/dnd&type=Date&theme=dark" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=hello-pangea/dnd&type=Date" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=hello-pangea/dnd&type=Date" />
+ </picture>
+</a>
+
 ## Get started 👩‍🏫
@@ -62,3 +72,3 @@
 - Independent nested lists - a list can be a child of another list, but you cannot drag items from the parent list into a child list
-- Server side rendering (SSR) compatible - see [resetServerContext()](/docs/api/reset-server-context.md)
+- Server side rendering (SSR) compatible
 - Plays well with [nested interactive elements](/docs/api/draggable.md#interactive-child-elements-within-a-draggable-) by default
@@ -105,3 +115,2 @@
 - [`<Draggable />`](/docs/api/draggable.md) - _What can be dragged around_
-- [`resetServerContext()`](/docs/api/reset-server-context.md) - _Utility for server side rendering (SSR)_
 
@@ -146,11 +155,2 @@ ### Guides 🗺
 
-## Read this in other languages 🌎
-
-⚠️ These following translations are based on [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd).
-
-- [![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **한글/Korean**](https://github.com/LeeHyungGeun/react-beautiful-dnd-kr)
-- [![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **На русском/Russian**](https://github.com/vtereshyn/react-beautiful-dnd-ru)
-- [![pt](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Português/Portuguese**](https://github.com/dudestein/react-beautiful-dnd-pt)
-- [![gr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Greece.png) **Ελληνικά/Greek**](https://github.com/milvard/react-beautiful-dnd-gr)
-
 ## Creator ✍️
@@ -157,0 +157,0 @@

src/state/auto-scroller/fluid-scroller/get-best-scrollable-droppable.ts

@@ -1,3 +0,3 @@
-import memoizeOne from 'memoize-one';
 import type { Position } from 'css-box-model';
+import { memoizeOne } from '../../../memoize-one';
 import type {
@@ -4,0 +4,0 @@ DroppableDimension,

src/state/dimension-structures.ts

@@ -1,2 +0,2 @@
-import memoizeOne from 'memoize-one';
+import { memoizeOne } from '../memoize-one';
 import type {
@@ -3,0 +3,0 @@ DroppableDimension,

src/state/get-displaced-by.ts

@@ -1,3 +0,3 @@
-import memoizeOne from 'memoize-one';
 import type { Position } from 'css-box-model';
+import { memoizeOne } from '../memoize-one';
 import type { Axis, DisplacedBy } from '../types';
@@ -4,0 +4,0 @@ import { patch } from './position';

src/state/get-draggables-inside-droppable.ts

@@ -1,2 +0,2 @@
-import memoizeOne from 'memoize-one';
+import { memoizeOne } from '../memoize-one';
 import { toDraggableList } from './dimension-structures';
@@ -3,0 +3,0 @@ import type {

src/state/registry/use-registry.ts

 import { useEffect } from 'react';
-import { useMemo } from 'use-memo-one';
+import { useMemo } from '../../use-memo-one';
 import type { Registry } from './registry-types';
@@ -4,0 +4,0 @@ import createRegistry from './create-registry';

src/state/remove-draggable-from-list.ts

@@ -1,2 +0,2 @@
-import memoizeOne from 'memoize-one';
+import { memoizeOne } from '../memoize-one';
 import type { DraggableDimension } from '../types';
@@ -3,0 +3,0 @@

src/view/draggable/connected-draggable.ts

 import type { Position } from 'css-box-model';
-import memoizeOne from 'memoize-one';
 import type { FunctionComponent } from 'react';
 import { connect } from 'react-redux';
+import { memoizeOne } from '../../memoize-one';
 import Draggable from './draggable';
@@ -6,0 +6,0 @@ import isDragging from '../../state/is-dragging';

src/view/droppable/connected-droppable.ts

 import { connect } from 'react-redux';
-import memoizeOne from 'memoize-one';
 import { FunctionComponent } from 'react';
+import { memoizeOne } from '../../memoize-one';
 import { invariant } from '../../invariant';
@@ -5,0 +5,0 @@ import type {

src/view/use-announcer/use-announcer.ts

 import { useRef, useEffect } from 'react';
-import { useMemo, useCallback } from 'use-memo-one';
+import { useMemo, useCallback } from '../../use-memo-one';
 import type { Announce, ContextId } from '../../types';
@@ -4,0 +4,0 @@ import { warning } from '../../dev-warning';

src/view/use-draggable-publisher/use-draggable-publisher.ts

 import type { Position } from 'css-box-model';
-import { useMemo, useCallback } from 'use-memo-one';
 import { useRef } from 'react';
+import { useMemo, useCallback } from '../../use-memo-one';
 import { invariant } from '../../invariant';
@@ -5,0 +5,0 @@ import type {

src/view/use-droppable-publisher/use-droppable-publisher.ts

 import { useRef } from 'react';
 import type { Position } from 'css-box-model';
 import rafSchedule from 'raf-schd';
-import { useMemo, useCallback } from 'use-memo-one';
-import memoizeOne from 'memoize-one';
+import { useMemo, useCallback } from '../../use-memo-one';
+import { memoizeOne } from '../../memoize-one';
 import { invariant } from '../../invariant';
@@ -7,0 +7,0 @@ import checkForNestedScrollContainers from './check-for-nested-scroll-container';

src/view/use-focus-marshal/use-focus-marshal.ts

 import { useRef } from 'react';
-import { useMemo, useCallback } from 'use-memo-one';
+import { useMemo, useCallback } from '../../use-memo-one';
 import type { DraggableId, ContextId } from '../../types';
@@ -4,0 +4,0 @@ import type { FocusMarshal, Unregister } from './focus-marshal-types';

src/view/use-hidden-text-element/use-hidden-text-element.ts

 import { useEffect } from 'react';
-import { useMemo } from 'use-memo-one';
+import { useMemo } from '../../use-memo-one';
 import type { ContextId, ElementId } from '../../types';
@@ -4,0 +4,0 @@ import getBodyElement from '../get-body-element';

src/view/use-sensor-marshal/sensors/use-keyboard-sensor.ts

 import { useRef } from 'react';
-import { useMemo, useCallback } from 'use-memo-one';
+import { useMemo, useCallback } from '../../../use-memo-one';
 import { invariant } from '../../../invariant';
@@ -4,0 +4,0 @@ import type {

src/view/use-sensor-marshal/sensors/use-mouse-sensor.ts

 import { useRef } from 'react';
-import { useCallback, useMemo } from 'use-memo-one';
 import type { Position } from 'css-box-model';
+import { useCallback, useMemo } from '../../../use-memo-one';
 import { invariant } from '../../../invariant';
@@ -5,0 +5,0 @@ import type {

src/view/use-sensor-marshal/sensors/use-touch-sensor.ts

 import { useRef } from 'react';
-import { useCallback, useMemo } from 'use-memo-one';
 import type { Position } from 'css-box-model';
+import { useCallback, useMemo } from '../../../use-memo-one';
 import { invariant } from '../../../invariant';
@@ -5,0 +5,0 @@ import type {

src/view/use-sensor-marshal/use-sensor-marshal.ts

 import rafSchd from 'raf-schd';
 import { useState } from 'react';
-import { useCallback, useMemo } from 'use-memo-one';
 import type { Position } from 'css-box-model';
+import { useCallback, useMemo } from '../../use-memo-one';
 import { invariant } from '../../invariant';
@@ -6,0 +6,0 @@ import type {

src/view/use-style-marshal/use-style-marshal.ts

 import { useRef, MutableRefObject } from 'react';
-import memoizeOne from 'memoize-one';
-import { useMemo, useCallback } from 'use-memo-one';
+import { useMemo, useCallback } from '../../use-memo-one';
+import { memoizeOne } from '../../memoize-one';
 import { invariant } from '../../invariant';
@@ -5,0 +5,0 @@ import type { StyleMarshal } from './style-marshal-types';

src/view/use-unique-id.ts

 import React from 'react';
-import { useMemo } from 'use-memo-one';
+import { useMemo } from '../use-memo-one';
 import type { Id } from '../types';
@@ -4,0 +4,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1264005

increased by0.2%

Dependency count

7

decreased by-22.22%

Number of package files

245

increased by1.24%

Lines of code

37660

increased by0.42%

Worsened metrics

Dev dependency count

116

increased by1.75%

Number of low quality alerts

3

increased by50%

Dependency changes

• + Addedreact@19.0.0(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedscheduler@0.25.0(transitive)

• - Removedmemoize-one@^6.0.0

• - Removeduse-memo-one@^1.1.3

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedmemoize-one@6.0.0(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-dom@18.3.1(transitive)

• - Removedscheduler@0.23.2(transitive)

• - Removeduse-memo-one@1.1.3(transitive)

• Updatedreact-redux@^9.2.0