{"_id":"@dajinchu/react-beautiful-dnd","_rev":"1-e5e980814c0f2650c2c77310683e9998","name":"@dajinchu/react-beautiful-dnd","dist-tags":{"latest":"13.0.0"},"versions":{"13.0.0":{"name":"@dajinchu/react-beautiful-dnd","version":"13.0.0","description":"Beautiful and accessible drag and drop for lists with React","author":{"name":"Alex Reardon","email":"areardon@atlassian.com"},"keywords":["drag and drop","dnd","sortable","reorder","reorderable","react","react.js","natural","beautiful","accessible"],"repository":{"type":"git","url":"git+https://github.com/dajinchu/react-beautiful-dnd.git"},"bugs":{"url":"https://github.com/atlassian/react-beautiful-dnd/issues"},"main":"dist/react-beautiful-dnd.cjs.js","module":"dist/react-beautiful-dnd.esm.js","types":"index.d.ts","sideEffects":false,"config":{"prettier_target":"*.{js,jsx,md,json} src/**/*.{js,jsx,md,json} test/**/*.{js,jsx,md,json} docs/**/*.{js,jsx,md,json} stories/**/*.{js,jsx,md,json} cypress/**/*.{js,jsx,md,json} csp-server/**/*.{js,jsx,md,json}"},"scripts":{"test:accessibility":"lighthouse http://localhost:9002/iframe.html?id=single-vertical-list--basic --chrome-flags='--headless' --output=json --output=html --output-path=./test-reports/lighthouse/a11y.json && node a11y-audit-parse.js","test":"jest --config ./jest.config.js","test:ci":"jest test --maxWorkers=2","test:browser":"cypress open","test:browser:ci":"cypress run","test:coverage":"yarn test --coverage --coveragePathIgnorePatterns=/debug","validate":"yarn prettier:check && yarn lint:eslint && yarn lint:css && yarn typecheck","prettier:check":"yarn prettier --debug-check $npm_package_config_prettier_target","prettier:write":"yarn prettier --write $npm_package_config_prettier_target","lint:eslint":"yarn eslint \"./**/*.{js,jsx}\"","lint:css":"stylelint \"stories/**/*.{js,jsx}\"","typecheck":"flow check --max-warnings=0","bundle-size:check":"cross-env SNAPSHOT=match yarn bundle-size:update","bundle-size:update":"yarn build:clean && yarn build:dist && yarn build:clean","build":"yarn build:clean && yarn build:dist && yarn build:flow","build:clean":"rimraf dist","build:dist":"rollup -c","build:flow":"echo \"// @flow\n\nexport * from '../src';\" > dist/react-beautiful-dnd.cjs.js.flow","storybook":"start-storybook -p 9002","build-storybook":"build-storybook -c .storybook -o site","prepublishOnly":"yarn build"},"dependencies":{"@babel/runtime":"^7.9.2","css-box-model":"^1.2.0","memoize-one":"^5.1.1","raf-schd":"^4.0.2","react-redux":"^7.2.0","redux":"^4.0.4","use-memo-one":"^1.1.1"},"devDependencies":{"@atlaskit/css-reset":"^5.0.10","@atlaskit/theme":"^9.5.2","@babel/core":"^7.9.0","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-transform-modules-commonjs":"^7.9.0","@babel/plugin-transform-object-assign":"^7.8.3","@babel/plugin-transform-runtime":"^7.9.0","@babel/preset-env":"^7.9.5","@babel/preset-flow":"^7.9.0","@babel/preset-react":"^7.9.4","@emotion/babel-preset-css-prop":"^10.0.27","@emotion/core":"^10.0.28","@emotion/styled":"^10.0.27","@storybook/addon-storysource":"5.3.18","@storybook/react":"^5.3.18","@storybook/theming":"^5.3.18","@testing-library/react":"^10.0.2","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.1.0","babel-jest":"^25.3.0","babel-loader":"^8.1.0","babel-plugin-dev-expression":"^0.2.2","babel-plugin-emotion":"^10.0.33","cross-env":"^7.0.2","cypress":"^4.4.0","emotion-theming":"^10.0.27","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","eslint":"6.8.0","eslint-config-airbnb":"^18.1.0","eslint-config-prettier":"^6.10.1","eslint-plugin-cypress":"^2.10.3","eslint-plugin-emotion":"^10.0.27","eslint-plugin-es5":"^1.5.0","eslint-plugin-flowtype":"^4.7.0","eslint-plugin-import":"^2.20.2","eslint-plugin-jest":"^23.8.2","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-prettier":"^3.1.3","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^3.0.0","flow-bin":"0.110.1","fs-extra":"^9.0.0","globby":"^11.0.0","jest":"^25.3.0","jest-axe":"^3.4.0","jest-junit":"^10.0.0","jest-watch-typeahead":"^0.5.0","lighthouse":"^5.6.0","markdown-it":"^10.0.0","prettier":"^2.0.4","raf-stub":"^3.0.0","react":"^16.13.1","react-dom":"^16.13.1","react-test-renderer":"^16.13.1","react-virtualized":"^9.21.2","react-window":"^1.8.5","require-from-string":"^2.0.2","rimraf":"^3.0.2","rollup":"^2.6.1","rollup-plugin-babel":"^4.4.0","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-json":"^4.0.0","rollup-plugin-node-resolve":"^5.1.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-size-snapshot":"^0.11.0","rollup-plugin-strip":"^1.2.2","rollup-plugin-terser":"^5.3.0","storybook-addon-performance":"0.9.0","styled-components":"5.1.0","stylelint":"^13.3.2","stylelint-config-prettier":"^8.0.1","stylelint-config-recommended":"^3.0.0","stylelint-config-standard":"^20.0.0","stylelint-config-styled-components":"^0.1.1","stylelint-processor-styled-components":"^1.10.0","wait-port":"^0.2.7","webpack":"^4.42.1"},"peerDependencies":{"react":"^16.8.5","react-dom":"^16.8.5"},"license":"Apache-2.0","jest-junit":{"output":"test-reports/junit/js-test-results.xml"},"gitHead":"7831857f25e0b7359f56337003731813e0f40710","homepage":"https://github.com/dajinchu/react-beautiful-dnd#readme","_id":"@dajinchu/react-beautiful-dnd@13.0.0","_nodeVersion":"12.20.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-y1X39yviWFDfZbCIq5E7LnzxY+LjDoS4CbKvQ1sHVyXmCSUsGtVNzA6cuz3ySVbm6qaVcdTYeMQd00hVGhAUGA==","shasum":"11516f84f1b962b28b8796d32614aa142f597208","tarball":"https://registry.npmjs.org/@dajinchu/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz","fileCount":240,"unpackedSize":1389740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTRlRCRA9TVsSAnZWagAAndgP/1cndW4AINg1202zKKzs\nxALq8hbSpiZc0Y+TB92zkSQnIqZC5pq4yP/gEfEy8/Cjgr3HT9+AK68IyWsW\nS3KAwifkPE8tt3x9Ap4i1h0LXyTK965AnnG2l+kKbxtDVpwQgc7I2kPBx7U6\nMFE3rDJv64T+P9wwnvnt6cNkez79YU+Sy1NI7XkWWu4vvc65rh5I2w7N7bLp\nxMtoLR5iejZ8epD2b9xiLhH9Pnk+4gSzSqXCptp04oWymEkss44ERqq/Btl/\n+Q8EOkE86eD9I2/ZDMfUL83QSKIf1AYx8s7PNOYAuVXLZA4vF979tbvZsiCX\nKPE7UH8toOhicOOohSOk1m1taz9Yo6ZowaqpJVWkcHLuM7uqVr5LbaTtHzwu\njG20vd7Q/R87VjDcrLAxzS421JW8aILnSbz7hDIpIJhD+A9X2xcp1W0G2+RS\n+4UuZCW8DYcv8vXJoGkRI3FCqQx4VZicfwYr9Ztj4cWT2WFdZhk/h3Mu9wr+\nF0zO3T+B3v43TI20limv892KysMwIBfam57xR1wyRamvF+Tmz9Vixwbsd206\nRdk1z9FN9fG7h3Pt57MJOl52kup3tMwb4BWQu3PLyElNP6J2hsLJphkzlhLs\nBCuBbJYaiECQU0/ptwvzWIEEm7HAyj0Rb/lZC4Ghju16pYFvP3lJ09wfy5SJ\nds+l\r\n=KIF6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCisoIQFOJGEibAA++6tKAgPltXaFN1/Ite/+Cl4paJBQIgOl3HHSJ/W21iRpC5Wvoy4rA48qEpF8viqRQHVWt4RMM="}]},"_npmUser":{"name":"dajinchu","email":"dajinchu@gmail.com"},"directories":{},"maintainers":[{"name":"dajinchu","email":"dajinchu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-beautiful-dnd_13.0.0_1615665489408_0.8029767721667695"},"_hasShrinkwrap":false}},"time":{"created":"2021-03-13T19:58:09.342Z","13.0.0":"2021-03-13T19:58:09.589Z","modified":"2022-04-05T02:37:21.306Z"},"maintainers":[{"name":"dajinchu","email":"dajinchu@gmail.com"}],"description":"Beautiful and accessible drag and drop for lists with React","homepage":"https://github.com/dajinchu/react-beautiful-dnd#readme","keywords":["drag and drop","dnd","sortable","reorder","reorderable","react","react.js","natural","beautiful","accessible"],"repository":{"type":"git","url":"git+https://github.com/dajinchu/react-beautiful-dnd.git"},"author":{"name":"Alex Reardon","email":"areardon@atlassian.com"},"bugs":{"url":"https://github.com/atlassian/react-beautiful-dnd/issues"},"license":"Apache-2.0","readme":"
\n \n
\n
react-beautiful-dnd (rbd)
\n\n
\n\n**Beautiful** and **accessible** drag and drop for lists with [`React`](https://facebook.github.io/react/)\n\n[](https://circleci.com/gh/atlassian/react-beautiful-dnd/tree/master)\n[](https://www.npmjs.com/package/react-beautiful-dnd)\n\n\n\n[Play with this example if you want!](https://react-beautiful-dnd.netlify.com/iframe.html?selectedKind=board&selectedStory=simple)\n\n
\n\n## Core characteristics\n\n- Beautiful and [natural movement](/docs/about/animations.md) of items ๐\n- [Accessible](/docs/about/accessibility.md): powerful keyboard and screen reader support โฟ๏ธ\n- [Extremely performant](/docs/support/media.md) ๐\n- Clean and powerful api which is simple to get started with\n- Plays extremely well with standard browser interactions\n- [Unopinionated styling](/docs/guides/preset-styles.md)\n- No creation of additional wrapper dom nodes - flexbox and focus management friendly!\n\n## Get started ๐ฉโ๐ซ\n\nWe have created [a free course on `egghead.io` ๐ฅ](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd) to help you get started with `react-beautiful-dnd` as quickly as possible.\n\n[](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd)\n\n## Currently supported feature set โ \n\n- Vertical lists โ\n- Horizontal lists โ\n- Movement between lists (โค โ โค)\n- [Virtual list support ๐พ](/docs/patterns/virtual-lists.md) - unlocking 10,000 items @ 60fps\n- [Combining items](/docs/guides/combining.md)\n- Mouse ๐ญ, keyboard ๐นโฟ๏ธ and touch ๐๐ฑ (mobile, tablet and so on) support\n- [Multi drag support](/docs/patterns/multi-drag.md)\n- Incredible screen reader support โฟ๏ธ - we provide an amazing experience for english screen readers out of the box ๐ฆ. We also provide complete customisation control and internationalisation support for those who need it ๐\n- [Conditional dragging](/docs/api/draggable.md#optional-props) and [conditional dropping](/docs/api/droppable.md#conditionally-dropping)\n- Multiple independent lists on the one page\n- Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)\n- [Add and remove items during a drag](/docs/guides/changes-while-dragging.md)\n- Compatible with semantic `
` reordering - [table pattern](/docs/patterns/tables.md)\n- [Auto scrolling](/docs/guides/auto-scrolling.md) - automatically scroll containers and the window as required during a drag (even with keyboard ๐ฅ)\n- Custom drag handles - you can drag a whole item by just a part of it\n- Able to move the dragging item to another element while dragging (clone, portal) - [Reparenting your ``](/docs/guides/reparenting.md)\n- [Create scripted drag and drop experiences ๐ฎ](/docs/sensors/sensor-api.md)\n- Allows extensions to support for [any input type you like ๐น](/docs/sensors/sensor-api.md)\n- ๐ฒ Tree support through the [`@atlaskit/tree`](https://atlaskit.atlassian.com/packages/confluence/tree) package\n- A `` list can be a scroll container (without a scrollable parent) or be the child of a scroll container (that also does not have a scrollable parent)\n- 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\n- Server side rendering (SSR) compatible - see [resetServerContext()](/docs/api/reset-server-context.md)\n- Plays well with [nested interactive elements](/docs/api/draggable.md#interactive-child-elements-within-a-draggable-) by default\n\n## Motivation ๐ค\n\n`react-beautiful-dnd` exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:\n\n- ๐ [Rethinking drag and drop](https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b)\n- ๐ง [React podcast: fast, accessible and beautiful drag and drop](https://reactpodcast.simplecast.fm/17)\n\n## Not for everyone โ๏ธ\n\nThere are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing [`react-dnd`](https://github.com/react-dnd/react-dnd). It does an incredible job at providing a great set of drag and drop primitives which work especially well with the [wildly inconsistent](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html) html5 drag and drop feature. `react-beautiful-dnd` is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality `react-beautiful-dnd` offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by `react-dnd`. So `react-beautiful-dnd` might not be for you depending on what your use case is.\n\n## Documentation ๐\n\n### About ๐\n\n- [Installation](/docs/about/installation.md)\n- [Examples and samples](/docs/about/examples.md)\n- [Get started](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd)\n- [Design principles](/docs/about/design-principles.md)\n- [Animations](/docs/about/animations.md)\n- [Accessibility](/docs/about/accessibility.md)\n- [Browser support](/docs/about/browser-support.md)\n\n### Sensors ๐\n\n> The ways in which somebody can start and control a drag\n\n- [Mouse dragging ๐ญ](/docs/sensors/mouse.md)\n- [Touch dragging ๐๐ฑ](/docs/sensors/touch.md)\n- [Keyboard dragging ๐นโฟ๏ธ](/docs/sensors/keyboard.md)\n- [Create your own sensor](/docs/sensors/sensor-api.md) (allows for any input type as well as scripted experiences)\n\n### API ๐๏ธโ\n\n\n\n- [``](/docs/api/drag-drop-context.md) - _Wraps the part of your application you want to have drag and drop enabled for_\n- [``](/docs/api/droppable.md) - _An area that can be dropped into. Contains ``s_\n- [``](/docs/api/draggable.md) - _What can be dragged around_\n- [`resetServerContext()`](/docs/api/reset-server-context.md) - _Utility for server side rendering (SSR)_\n\n### Guides ๐บ\n\n- [`` responders](/docs/guides/responders.md) - _`onDragStart`, `onDragUpdate`, `onDragEnd` and `onBeforeDragStart`_\n- [Combining ``s](/docs/guides/combining.md)\n- [Common setup issues](/docs/guides/common-setup-issues.md)\n- [Using `innerRef`](/docs/guides/using-inner-ref.md)\n- [Setup problem detection and error recovery](/docs/guides/setup-problem-detection-and-error-recovery.md)\n- [Rules for `draggableId` and `droppableId`s](/docs/guides/identifiers.md)\n- [Browser focus retention](/docs/guides/browser-focus.md)\n- [Customising or skipping the drop animation](/docs/guides/drop-animation.md)\n- [Auto scrolling](/docs/guides/auto-scrolling.md)\n- [Controlling the screen reader](/docs/guides/screen-reader.md)\n- [Use the html5 `doctype`](/docs/guides/doctype.md)\n- [`TypeScript` and `flow`: type information](/docs/guides/types.md)\n- [Dragging `
![\"react](\"https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png\")
\n