{"bugs":{"url":"https://github.com/atlassian/react-beautiful-dnd/issues"},"dist":{"shasum":"c2ca7f3b8c8222d514ad02cfa7ee964ac73a25ce","tarball":"https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-12.0.0-beta.2.tgz","fileCount":238,"integrity":"sha512-H1zYHVeW26CbCFFEvN3pK3U6kF/7WcbAGwqm0kwUm60Z0pFQ6LHdRSlS3KTIGpH3xTDBsx2NW8pwrvMm1CU3uQ==","signatures":[{"sig":"MEQCID/Fx8b0pwDPEKBQDNISTt2hOuuMB1NjTUwe8bNz3YaGAiAWC91EvHPkil5C9rmGP7PnBcdRwuU08QGsePy33Xa4mQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1378562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdipQ9CRA9TVsSAnZWagAAxUIP/1cOpH1IcQgQkaKzY3N7\nwWzpde8OPN5aMh4NG1sY6GBOv2sgs2hPunEM3wLk7miwptqX9XnLw7u5l/at\nM1/A6SudS1dkwzXO5iRyZaC8eOxUtIK6JVrB2iln1tjc0wD/dkfPSxw9r90o\nnakQz0CanKEXmGmvviq+GRqd3oTnvg4H2HSCfPmsx/DKmSwCA4yGcNadXUmp\nPhRUXJONY8DRo0ZPcFjPPQRA1I8g1gkqxSWvttxBga1y00o2HeRJUSs6fwex\ni9pgeOafLWbMlBCDP20T8ceWwLXFUBgzOrg4Kohu8J0KBCsSKiziCGYXSdUX\nJJFmgflZOqyHGXxMP+S6XKx9zyzNXj4bdR3bXzabWJ0sOc6mSVSDR/je76lB\nmqLbRkRh1bdtxXN7RDnfiwntuiamAyz1iwN+kefDKGz6jjnsLCMuyACQf4O1\nHk3qBWlp9EmvKh5hM4p5XNP0vI40V94WPrb26f+aEIkLGsKsWFdw3zIZqNHy\nJCj7LFupVFPh6yewgb6nLQiXEaSdYafE2AYYtpRq0ZCPP8gwfxtBwWYLDDxs\n5lvQ2xX5AcYq2XXgoqDOD6UFu7nHAv2wwlw1gTWBStMygkwsehS4XF8w9P0w\nhvEyzhHuT9zRcb+q4bGhmRy3VT49eZCcIeVKNQ8mOCj1wdXUi4yY9Unyywbb\nZq4u\r\n=34y+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/react-beautiful-dnd.cjs.js","name":"react-beautiful-dnd","author":{"name":"Alex Reardon","email":"areardon@atlassian.com"},"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}"},"module":"dist/react-beautiful-dnd.esm.js","readme":"<p align=\"center\">\n  <img src=\"https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png\" alt=\"react beautiful dnd logo\" />\n</p>\n<h1 align=\"center\">react-beautiful-dnd</h1>\n\n<div align=\"center\">\n\n**Beautiful** and **accessible** drag and drop for lists with [`React`](https://facebook.github.io/react/)\n\n[![CircleCI branch](https://img.shields.io/circleci/project/github/atlassian/react-beautiful-dnd/master.svg)](https://circleci.com/gh/atlassian/react-beautiful-dnd/tree/master)\n[![npm](https://img.shields.io/npm/v/react-beautiful-dnd.svg)](https://www.npmjs.com/package/react-beautiful-dnd)\n\n![quote application example](https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif)\n\n[Play with this example if you want!](https://react-beautiful-dnd.netlify.com/iframe.html?selectedKind=board&selectedStory=simple)\n\n</div>\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[![course-logo](https://user-images.githubusercontent.com/2182637/43372837-8c72d3f8-93e8-11e8-9d92-a82adde7718f.png)](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- [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 `<table>` 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 `<Draggable />`](/docs/guides/reparenting.md)\n- Full [programmatic api 🎮](/docs/sensors/programmatic.md)\n- 🌲 Tree support through the [`@atlaskit/tree`](https://atlaskit.atlassian.com/packages/core/tree) package\n- A `<Droppable />` 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- [Programmatic dragging 🎮](/docs/sensors/programmatic.md)\n\n### API 🏋️‍\n\n![diagram](https://user-images.githubusercontent.com/2182637/53607406-c8f3a780-3c12-11e9-979c-7f3b5bd1bfbd.gif)\n\n- [`<DragDropContext />`](/docs/api/drag-drop-context.md) - _Wraps the part of your application you want to have drag and drop enabled for_\n- [`<Droppable />`](/docs/api/droppable.md) - _An area that can be dropped into. Contains `<Draggable />`s_\n- [`<Draggable />`](/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- [`<DragDropContext />` responders](/docs/guides/responders.md) - _`onDragStart`, `onDragUpdate`, `onDragEnd` and `onBeforeDragStart`_\n- [Combining `<Draggable />`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- [Developer warnings and how to disable them](/docs/guides/developer-warnings.md)\n- [Rules for `draggableId` and `droppableId`s](/docs/guides/identifiers.md)\n- [Focus management](/docs/guides/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`](/docs/guides/types.md)\n- [Dragging `<svg>`s](/docs/guides/dragging-svgs.md)\n- [Non-visible preset styles](/docs/guides/preset-styles.md)\n- [How we detect scroll containers](/docs/guides/how-we-detect-scroll-containers.md)\n- [How we use dom events](/docs/guides/how-we-use-dom-events.md) - _Useful if you need to build on top of `react-beautiful-dnd`_\n- [Adding `<Draggable />`s during a drag](/docs/guides/changes-while-dragging.md) - _⚠️ Advanced_\n\n### Patterns 👷‍\n\n- [Multi drag](/docs/patterns/multi-drag.md)\n- [Tables](/docs/patterns/tables.md)\n- [Reparenting a `<Draggable />`](/docs/guides/reparenting.md)\n\n### Support 👩‍⚕️\n\n- [Engineering health](/docs/support/engineering-health.md)\n- [Community and addons](/docs/support/community-and-addons.md)\n- [Release notes and changelog](https://github.com/atlassian/react-beautiful-dnd/releases)\n- [Upgrading](/docs/support/upgrading.md)\n- [Road map](https://github.com/atlassian/react-beautiful-dnd/issues)\n- [Media](/docs/support/media.md)\n\n## Read this in other languages 🌎\n\n- [![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **한글/Korean**](https://github.com/LeeHyungGeun/react-beautiful-dnd-kr)\n- [![china](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **中文/Chinese**](https://github.com/chinanf-boy/react-beautiful-dnd-zh)\n- [![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **На русском/Russian**](https://github.com/vtereshyn/react-beautiful-dnd-ru)\n- [![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)\n\n## Author ✍️\n\nAlex Reardon [@alexandereardon](https://twitter.com/alexandereardon)\n\n## Collaborators 🤝\n\n- Bogdan Chadkin [@IAmTrySound](https://twitter.com/IAmTrySound)\n- Luke Batchelor [@alukebatchelor](https://twitter.com/alukebatchelor)\n- Jared Crowe [@jaredjcrowe](https://twitter.com/jaredjcrowe)\n- Many other [@Atlassian](https://twitter.com/Atlassian)'s!\n","gitHead":"65985325b7161a69940a31b78225d51adc7e5a8a","license":"Apache-2.0","scripts":{"test":"jest --config ./jest.config.js","build":"yarn build:clean && yarn build:dist && yarn build:flow","test:ci":"jest test --maxWorkers=2","lint:css":"stylelint \"stories/**/*.{js,jsx}\"","validate":"yarn prettier:check && yarn lint:eslint && yarn lint:css && yarn typecheck","storybook":"start-storybook -p 9002","typecheck":"flow check --max-warnings=0","build:dist":"rollup -c","build:flow":"echo \"// @flow\n\nexport * from '../src';\" > dist/react-beautiful-dnd.cjs.js.flow","build:clean":"rimraf dist","lint:eslint":"yarn eslint \"./**/*.{js,jsx}\"","test:browser":"cypress open","test:coverage":"yarn test --coverage --coveragePathIgnorePatterns=/debug","prepublishOnly":"yarn build","prettier:check":"yarn prettier --debug-check $npm_package_config_prettier_target","prettier:write":"yarn prettier --write $npm_package_config_prettier_target","build-storybook":"build-storybook -c .storybook -o site","test:browser:ci":"cypress run","bundle-size:check":"cross-env SNAPSHOT=match yarn bundle-size:update","bundle-size:update":"yarn build:clean && yarn build:dist && yarn build:clean","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"},"_npmUser":{"name":"alexreardon","email":"alexreardon@gmail.com"},"homepage":"https://github.com/atlassian/react-beautiful-dnd#readme","keywords":["drag and drop","dnd","sortable","reorder","reorderable","react","react.js","natural","beautiful","accessible"],"jest-junit":{"output":"test-reports/junit/js-test-results.xml"},"repository":{"url":"git+https://github.com/atlassian/react-beautiful-dnd.git","type":"git"},"_npmVersion":"6.4.1","description":"Beautiful and accessible drag and drop for lists with React","directories":{},"maintainers":[{"name":"alexreardon","email":"alexreardon@gmail.com"},{"name":"jaredcrowe","email":"jared.j.crowe@gmail.com"}],"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"redux":"^4.0.4","raf-schd":"^4.0.2","memoize-one":"^5.1.1","react-redux":"^7.1.1","use-memo-one":"^1.1.1","css-box-model":"^1.2.0","tiny-invariant":"^1.0.6","@babel/runtime-corejs2":"^7.6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^16.9.0","enzyme":"^3.10.0","eslint":"^6.3.0","globby":"^10.0.1","rimraf":"^3.0.0","rollup":"^1.21.2","cypress":"^3.4.1","webpack":"^4.39.3","flow-bin":"0.107.0","fs-extra":"^8.0.1","prettier":"^1.18.2","raf-stub":"^3.0.0","cross-env":"^5.2.1","react-dom":"^16.9.0","stylelint":"^10.1.0","wait-port":"^0.2.2","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.9.0","jest-junit":"^8.0.0","lighthouse":"^5.2.0","url-loader":"^2.1.0","@babel/core":"^7.6.0","markdown-it":"^9.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","react-window":"^1.8.5","@emotion/core":"^10.0.17","@atlaskit/theme":"^9.2.2","@emotion/styled":"^10.0.17","emotion-theming":"^10.0.17","@storybook/react":"^5.1.11","@babel/preset-env":"^7.6.0","react-virtualized":"^9.21.1","styled-components":"4.3.2","@babel/preset-flow":"^7.0.0","@storybook/theming":"^5.1.11","eslint-plugin-jest":"^22.17.0","rollup-plugin-json":"^4.0.0","@atlaskit/css-reset":"^5.0.8","@babel/preset-react":"^7.0.0","eslint-plugin-react":"^7.14.3","react-test-renderer":"^16.9.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-strip":"^1.2.2","babel-plugin-emotion":"^10.0.17","eslint-config-airbnb":"^18.0.1","eslint-plugin-import":"^2.18.2","jest-watch-typeahead":"^0.4.0","rollup-plugin-terser":"^5.1.1","eslint-plugin-cypress":"^2.6.1","eslint-plugin-emotion":"^10.0.14","rollup-plugin-replace":"^2.2.0","@testing-library/react":"^9.1.4","eslint-config-prettier":"^6.2.0","eslint-plugin-flowtype":"^4.3.0","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-prettier":"^3.1.0","rollup-plugin-commonjs":"^10.1.0","enzyme-adapter-react-16":"^1.14.0","testcafe-reporter-xunit":"^2.1.0","eslint-plugin-react-hooks":"^2.0.1","stylelint-config-prettier":"^5.2.0","stylelint-config-standard":"^18.3.0","rollup-plugin-node-resolve":"^5.1.0","babel-plugin-dev-expression":"^0.2.2","rollup-plugin-size-snapshot":"^0.10.0","stylelint-config-recommended":"^2.2.0","@emotion/babel-preset-css-prop":"^10.0.17","@babel/plugin-transform-runtime":"^7.6.0","stylelint-config-styled-components":"^0.1.1","stylelint-processor-styled-components":"^1.8.0","@babel/plugin-proposal-class-properties":"^7.5.5","@babel/plugin-transform-modules-commonjs":"^7.6.0"},"peerDependencies":{"react":"^16.8.5"},"_npmOperationalInternal":{"tmp":"tmp/react-beautiful-dnd_12.0.0-beta.2_1569363004724_0.3361032320966584","host":"s3://npm-registry-packages"},"_id":"react-beautiful-dnd@12.0.0-beta.2","version":"12.0.0-beta.2"}