[ { "path": ".browserlistrc", "content": "ie >= 11\nlast 1 Edge version\nlast 1 Firefox version\nlast 1 Chrome version\nlast 1 Safari version\nlast 1 iOS version\nlast 1 Android version\nlast 1 ChromeAndroid version\n" }, { "path": ".circleci/config.yml", "content": "version: 2\njobs:\n install:\n docker:\n - image: circleci/node:10.24.0-browsers\n working_directory: ~/repo\n steps:\n # Fetch Code\n - checkout\n\n - restore_cache:\n keys:\n # Restore cached node_modules\n - v12-dependencies-{{ checksum \"yarn.lock\" }}\n # fallback to using the latest cache if no exact match is found\n - v12-dependencies-\n\n - run:\n name: Add CI global modules\n command: yarn global add greenkeeper-lockfile@1\n\n - run:\n name: Install Dependencies\n command: yarn\n\n - run:\n name: Update Lockfile\n command: $(yarn global bin)/greenkeeper-lockfile-update\n\n - run:\n name: Upload Lockfile\n command: $(yarn global bin)/greenkeeper-lockfile-upload\n\n - run:\n name: Validate Yarn Lock File\n command: |\n if [[ \"$(git status -s)\" != \"\" ]] && [[ \"$CIRCLE_BRANCH\" != greenkeeper/* ]]; then\n echo \"Your yarn.lock was modified during install, please check in any changes to the yarn.lock file\"\n exit 1\n fi\n\n # Save the node_modules cache\n - save_cache:\n paths:\n - node_modules\n key: v12-dependencies-{{ checksum \"yarn.lock\" }}\n validate:\n docker:\n - image: circleci/node:10.24.0-browsers\n working_directory: ~/repo\n steps:\n - checkout\n\n - restore_cache:\n keys:\n - v12-dependencies-{{ checksum \"yarn.lock\" }}\n\n - run:\n # PR's from forks cannot use the dependency cache for performance reasons\n name: 'Forked PR dependency install'\n command: yarn\n\n - run:\n name: Lint + Typecheck\n command: yarn validate\n test-unit:\n docker:\n - image: circleci/node:10.24.0-browsers\n working_directory: ~/repo\n steps:\n - checkout\n\n - restore_cache:\n keys:\n - v12-dependencies-{{ checksum \"yarn.lock\" }}\n\n - run:\n # PR's from forks cannot use the dependency cache for performance reasons\n name: 'Forked PR dependency install'\n command: yarn\n\n - run:\n name: Jest Suite\n command: yarn test:ci\n environment:\n JEST_JUNIT_OUTPUT: 'test-reports/junit/js-test-results.xml'\n\n - store_test_results:\n path: test-reports/junit\n test-bundle:\n docker:\n - image: circleci/node:10.24.0-browsers\n working_directory: ~/repo\n steps:\n - checkout\n\n - restore_cache:\n keys:\n - v12-dependencies-{{ checksum \"yarn.lock\" }}\n\n # PR's from forks cannot use the dependency cache for performance reasons\n - run:\n name: 'Forked PR dependency install'\n command: yarn\n\n - run:\n name: Check Bundle Size\n command: yarn run bundle-size:check\n test-browser:\n docker:\n # Single Docker container with Node 10 and Cypress dependencies\n # https://github.com/cypress-io/circleci-orb/blob/master/src/orb.yml\n - image: cypress/base:10.22.0\n working_directory: ~/repo\n steps:\n - checkout\n\n - restore_cache:\n keys:\n - v12-dependencies-{{ checksum \"yarn.lock\" }}\n\n # PR's from forks cannot use the dependency cache for performance reasons\n - run:\n name: 'Forked PR dependency install'\n command: yarn\n\n - run:\n name: 'Run cypress'\n command: node browser-test-harness.js yarn test:browser:ci\n\n # store videos and screenshots (if any) as CI artifacts\n - store_artifacts:\n path: cypress/videos\n - store_artifacts:\n path: cypress/screenshots\n test-a11y:\n docker:\n - image: circleci/node:10.24.0-browsers\n working_directory: ~/repo\n steps:\n - checkout\n\n - restore_cache:\n keys:\n - v12-dependencies-{{ checksum \"yarn.lock\" }}\n\n # PR's from forks cannot use the dependency cache for performance reasons\n - run:\n name: 'Forked PR dependency install'\n command: yarn\n\n - run:\n name: Accessibility Audit\n command: node browser-test-harness.js yarn test:accessibility\n\n - store_artifacts:\n path: test-reports/lighthouse\n\n - store_test_results:\n path: test-reports/lighthouse\nworkflows:\n version: 2\n build:\n jobs:\n - install\n - validate:\n requires:\n - install\n - test-unit:\n requires:\n - install\n - test-bundle:\n requires:\n - install\n - test-browser:\n requires:\n - install\n# disabling ally test due to issue with lighthouse\n# not sure why lighthouse starting breaking, but could\n# be worth looking into upgrading browsers (docker) + lighthouse\n# - test-a11y:\n# requires:\n# - install\n" }, { "path": ".eslintignore", "content": "# Generated files\ndist/\nflow-typed/\nsite/\ncoverage/\nbabel.config.js\n" }, { "path": ".eslintrc.js", "content": "module.exports = {\n extends: [\n 'prettier',\n 'airbnb',\n 'plugin:flowtype/recommended',\n 'prettier/react',\n 'prettier/flowtype',\n 'plugin:jest/recommended',\n 'plugin:prettier/recommended',\n ],\n parser: 'babel-eslint',\n plugins: [\n 'prettier',\n 'flowtype',\n 'emotion',\n 'react',\n 'react-hooks',\n 'import',\n 'jest',\n 'es5',\n ],\n env: {\n es6: true,\n browser: true,\n node: true,\n 'jest/globals': true,\n },\n globals: {\n // flow globals\n TimeoutID: true,\n IntervalID: true,\n AnimationFrameID: true,\n },\n rules: {\n // Error on prettier violations\n 'prettier/prettier': 'error',\n\n // New eslint style rules that is not disabled by prettier:\n 'lines-between-class-members': 'off',\n\n // Allowing warning and error console logging\n // use `invariant` and `warning`\n 'no-console': ['error'],\n\n // Opting out of prefer destructuring (nicer with flow in lots of cases)\n 'prefer-destructuring': 'off',\n\n // Disallowing the use of variables starting with `_` unless it called on `this`.\n // Allowed: `this._secret = Symbol()`\n // Not allowed: `const _secret = Symbol()`\n 'no-underscore-dangle': ['error', { allowAfterThis: true }],\n\n // Cannot reassign function parameters but allowing modification\n 'no-param-reassign': ['error', { props: false }],\n\n // Named exports are kewl\n 'import/prefer-default-export': 'off',\n\n // Don't tell me what to do!\n 'max-classes-per-file': 'off',\n\n // Allowing ++ on numbers\n 'no-plusplus': 'off',\n\n // Always enforcing the use of curly braces for if statements\n curly: ['error', 'all'],\n\n 'no-restricted-syntax': [\n // Nicer booleans #1\n // Disabling the use of !! to cast to boolean\n 'error',\n {\n selector:\n 'UnaryExpression[operator=\"!\"] > UnaryExpression[operator=\"!\"]',\n message:\n '!! to cast to boolean relies on a double negative. Use Boolean() instead',\n },\n // Nicer booleans #2\n // Avoiding accidental `new Boolean()` calls\n // (also covered by `no-new-wrappers` but i am having fun)\n {\n selector: 'NewExpression[callee.name=\"Boolean\"]',\n message:\n 'Avoid using constructor: `new Boolean(value)` as it creates a Boolean object. Did you mean `Boolean(value)`?',\n },\n // We are using a useLayoutEffect / useEffect switch to avoid SSR warnings for useLayoutEffect\n // We want to ensure we use `import useEffect from '*use-isomorphic-layout-effect'`\n // to ensure we still get the benefits of `eslint-plugin-react-hooks`\n {\n selector:\n 'ImportDeclaration[source.value=/use-isomorphic-layout-effect/] > ImportDefaultSpecifier[local.name!=\"useLayoutEffect\"]',\n message:\n 'Must use `useLayoutEffect` as the name of the import from `*use-isomorphic-layout-effect` to leverage `eslint-plugin-react-hooks`',\n },\n\n // No Array.from as it pulls in a large amount of babel helpers\n {\n selector: 'MemberExpression[object.name=\"Array\"][property.name=\"from\"]',\n message:\n 'Not allowing using of Array.from to save kbs. Please use native-with-fallback/from',\n },\n\n // No usage of `tiny-invariant`. Must use our own invariant for error flow\n {\n selector: 'ImportDeclaration[source.value=\"tiny-invariant\"]',\n message:\n 'Please use our own invariant function (src/invariant.js) to ensure correct error flow',\n },\n\n // Must use invariant to throw\n {\n selector: 'ThrowStatement',\n message:\n 'Please use invariant (src/invariant.js) for throwing. This is to ensure correct error flows',\n },\n ],\n\n // Allowing Math.pow rather than forcing `**`\n 'no-restricted-properties': [\n 'off',\n {\n object: 'Math',\n property: 'pow',\n },\n ],\n\n 'no-restricted-imports': [\n 'error',\n {\n paths: [\n // Forcing use of useMemoOne\n {\n name: 'react',\n importNames: ['useMemo', 'useCallback'],\n message:\n '`useMemo` and `useCallback` are subject to cache busting. Please use `useMemoOne`',\n },\n // Forcing use aliased imports from useMemoOne\n {\n name: 'use-memo-one',\n importNames: ['useMemoOne', 'useCallbackOne'],\n message:\n 'use-memo-one exports `useMemo` and `useCallback` which work nicer with `eslint-plugin-react-hooks`',\n },\n // Disabling using of useLayoutEffect from react\n {\n name: 'react',\n importNames: ['useLayoutEffect'],\n message:\n '`useLayoutEffect` causes a warning in SSR. Use `useIsomorphicLayoutEffect`',\n },\n ],\n },\n ],\n\n // Allowing jsx in files with any file extension (old components have jsx but not the extension)\n 'react/jsx-filename-extension': 'off',\n\n // Not requiring default prop declarations all the time\n 'react/require-default-props': 'off',\n\n // Opt out of preferring stateless functions\n 'react/prefer-stateless-function': 'off',\n\n // Allowing files to have multiple components in it\n 'react/no-multi-comp': 'off',\n\n // Sometimes we use the PropTypes.object PropType for simplicity\n 'react/forbid-prop-types': 'off',\n\n // Allowing the non function setState approach\n 'react/no-access-state-in-setstate': 'off',\n\n // Opting out of this\n 'react/destructuring-assignment': 'off',\n\n // Adding 'skipShapeProps' as the rule has issues with correctly handling PropTypes.shape\n 'react/no-unused-prop-types': ['error', { skipShapeProps: true }],\n\n // Having issues with this rule not working correctly\n 'react/default-props-match-prop-types': 'off',\n\n // Allowing functions to be passed as props\n 'react/jsx-no-bind': 'off',\n\n // Require // @flow at the top of files\n 'flowtype/require-valid-file-annotation': [\n 'error',\n 'always',\n { annotationStyle: 'line' },\n ],\n\n // Allowing importing from dev deps (for stories and tests)\n 'import/no-extraneous-dependencies': 'off',\n\n // Enforce rules of hooks\n 'react-hooks/rules-of-hooks': 'error',\n // Second argument to hook functions\n 'react-hooks/exhaustive-deps': 'error',\n\n 'react/jsx-props-no-spreading': 'off',\n\n // using is fine\n 'react/jsx-fragments': 'off',\n\n // all good to declare static class members in the class\n 'react/static-property-placement': 'off',\n\n // don't need to initialize state in a constructor\n 'react/state-in-constructor': 'off',\n\n 'jest/expect-expect': [\n 'error',\n {\n assertFunctionNames: [\n 'expect',\n // these functions will run expect internally\n 'withWarn',\n 'withError',\n 'withoutError',\n 'withoutWarn',\n ],\n },\n ],\n },\n overrides: [\n // Forbid using not es5 methods\n {\n files: 'src/**/*.js',\n rules: {\n 'es5/no-es6-methods': 'error',\n 'es5/no-es6-static-methods': [\n 'error',\n { exceptMethods: ['Object.assign'] },\n ],\n },\n },\n ],\n};\n" }, { "path": ".flowconfig", "content": "[untyped]\n# Issue with atlaskit/theme typing\n.*/node_modules/@atlaskit/theme\n\n[ignore]\n# Creating lots of invalid files\n.*/node_modules/jsonlint-mod/.*\n\n[libs]\n./flow-typed/custom/\n\n[options]\n\n# Provides a way to suppress flow errors in the following line.\n# Example: // $FlowFixMe: This following line is borked because of reasons.\n# Example: // $ExpectError: This following line is correctly ignored by flow.\nsuppress_comment= \\\\(.\\\\|\\n\\\\)*\\\\$FlowFixMe\nsuppress_comment= \\\\(.\\\\|\\n\\\\)*\\\\$ExpectError\ninclude_warnings=true\n# Fixing issue with CircleCI where flow would hang\n# I suspect this is caused by incorrect advertisement of virtual cores\nserver.max_workers=1\n" }, { "path": ".github/ISSUE_TEMPLATE/bug-report.md", "content": "---\nname: ๐Ÿ› Bug Report\nabout: Bugs, missing documentation, or unexpected behavior ๐Ÿค”.\nlabels: \"unconfirmed-bug, untriaged\"\n---\n\n\n\n### Expected behavior\n\n### Actual behavior\n\n### Steps to reproduce\n\n### Suggested solution?\n\n\n\n### What version of `React` are you using?\n\n\n\n### What version of `react-beautiful-dnd` are you running?\n\n\n\n### What browser are you using?\n\n\n\n### Demo\n\n\n\n\n" }, { "path": ".github/ISSUE_TEMPLATE/feature-request.md", "content": "---\nname: ๐Ÿ’กFeature request\nabout: Ideas and suggestions\nlabels: \"idea \\U0001F914, untriaged\"\n---\n\n\n\n### Description\n\n\n" }, { "path": ".github/ISSUE_TEMPLATE/tree-issue.md", "content": "---\nname: ๐ŸŒฒ@atlaskit/tree\nabout: Bugs and feature requests for @atlaskit/tree\nlabels: 'wontfix โ˜ ๏ธ'\n---\n\nPlease head to the [`@atlaskit/tree` issue tracker](https://ecosystem.atlassian.net/servicedesk/customer/portal/24/create/236).\n\nWe do not track `@atlaskit/tree` issues in the `react-beautiful-dnd` project\n" }, { "path": ".gitignore", "content": "# editors\n.idea\n.vscode\n\n# library\nnode_modules/\n\n# MacOS\n.DS_Store\n\n# generated files\ndist/\n\n# generated site\nsite/\n\n# coverage reports\ncoverage/\n\n# test reports\ntest-reports/\n\n# test outputs\ncypress/videos/\ncypress/screenshots/\n\n# storybook\n.storybook.out\n.cache/\n\n# logs\nyarn-error.log\nnpm-debug.log\nnpm-debug.log.*\n" }, { "path": ".nvmrc", "content": "10.24.0" }, { "path": ".prettierignore", "content": "/node_modules/*" }, { "path": ".prettierrc", "content": "{\n \"trailingComma\": \"all\",\n \"semi\": true,\n \"tabWidth\": 2,\n \"useTabs\": false,\n \"singleQuote\": true\n}\n" }, { "path": ".size-snapshot.json", "content": "{\n \"dist/react-beautiful-dnd.js\": {\n \"bundled\": 364998,\n \"minified\": 133574,\n \"gzipped\": 39437\n },\n \"dist/react-beautiful-dnd.min.js\": {\n \"bundled\": 306810,\n \"minified\": 108365,\n \"gzipped\": 31340\n },\n \"dist/react-beautiful-dnd.esm.js\": {\n \"bundled\": 240910,\n \"minified\": 125371,\n \"gzipped\": 32650,\n \"treeshaked\": {\n \"rollup\": {\n \"code\": 21121,\n \"import_statements\": 503\n },\n \"webpack\": {\n \"code\": 24005\n }\n }\n }\n}\n" }, { "path": ".storybook/.babelrc", "content": "{\n \"presets\": [\n \"@babel/react\",\n \"@babel/flow\",\n [\"@babel/env\", { \"modules\": false, \"loose\": true }],\n \"@emotion/babel-preset-css-prop\"\n ],\n \"plugins\": [\n \"emotion\",\n [\"@babel/proposal-class-properties\", { \"loose\": true }],\n [\"@babel/proposal-object-rest-spread\", { \"loose\": true }]\n ],\n \"comments\": false\n}\n" }, { "path": ".storybook/babel-setup.md", "content": "# Babel\n\nstorybook looks for a root `.babelrc` in the project for its babel config. However, we are using `.babelrc.js` which is not supported. Rather than putting effort into this we are just having a custom `.babelrc` in this folder which is the same as `.babelrc.js`. This is lame, but we are looking to move away from storybook in the short term anyway.\n\n- [Storybook babel docs](https://storybook.js.org/configurations/custom-babel-config/)\n- [Storybook issue for supporting `babelrc.js`](https://github.com/storybooks/storybook/issues/2582)\n" }, { "path": ".storybook/config.js", "content": "import React from 'react';\nimport { addParameters, configure, addDecorator } from '@storybook/react';\nimport { create } from '@storybook/theming';\nimport { withPerformance } from 'storybook-addon-performance';\nimport GlobalStylesDecorator from './custom-decorators/global-styles';\n// adding css reset - storybook includes a css loader\nimport '@atlaskit/css-reset';\nimport { colors } from '@atlaskit/theme';\nimport logo from './compressed-logo-rbd.svg';\nimport { version } from '../package.json';\n\nconst theme = create({\n brandImage: logo,\n brandName: 'react-beautiful-dnd',\n brandUrl: 'https://github.com/atlassian/react-beautiful-dnd',\n});\n\naddParameters({\n options: {\n // currently not using any addons\n showPanel: false,\n theme,\n },\n});\n\n// Using theme would be good for this, but it looks like theme is just for the chrome around the story\naddDecorator(GlobalStylesDecorator);\naddDecorator(withPerformance);\n\n// automatically import all files ending in *.stories.js\nconst req = require.context('../stories/', true, /.stories.js$/);\n\nfunction loadStories() {\n req.keys().forEach(filename => req(filename));\n}\n\nconfigure(loadStories, module);\n\n// Doing this more complex check as console.table || console.log makes CI cry\nconst table = Object.prototype.hasOwnProperty.call(console, 'table')\n ? console.table\n : console.log;\n\n// Generated by: http://patorjk.com/software/taag/#p=display&f=ANSI%20Shadow&t=rbd\nconsole.log(\n `%c\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—\nโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘\nโ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•\nโ•šโ•โ• โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ•\n\n%cBeautiful and accessible drag and drop\n`,\n `color: ${colors.G200}; font-size: 1.2em; font-weight: bold;`,\n `color: ${colors.P200}; font-size: 1.2em; font-weight: bold;`,\n);\n\ntable([\n ['react-beautiful-dnd version', version],\n ['react version', React.version],\n ['process.env.NODE_ENV', process.env.NODE_ENV],\n]);\n" }, { "path": ".storybook/custom-decorators/global-styles.jsx", "content": "// @flow\nimport React from 'react';\nimport styled from '@emotion/styled';\nimport { colors } from '@atlaskit/theme';\nimport { grid } from '../../stories/src/constants';\n\n// $ExpectError - not sure why\nconst GlobalStyles = styled.div`\n min-height: 100vh;\n color: ${colors.N900};\n`;\n\nconst GlobalStylesDecorator = (storyFn: Function) => (\n {storyFn()}\n);\n\nexport default GlobalStylesDecorator;\n" }, { "path": ".storybook/main.js", "content": "module.exports = {\n addons: ['storybook-addon-performance/register','@storybook/addon-storysource'],\n};\n" }, { "path": ".storybook/preview-head.html", "content": "\n\n" }, { "path": ".stylelintrc.json", "content": "{\n \"processors\": [\n [\n \"stylelint-processor-styled-components\",\n {\n \"moduleName\": \"@emotion/styled\"\n }\n ]\n ],\n \"extends\": [\n \"stylelint-config-standard\",\n \"stylelint-config-styled-components\",\n \"stylelint-config-prettier\"\n ],\n \"rules\": {\n \"declaration-empty-line-before\": null,\n \"comment-empty-line-before\": null,\n \"block-no-empty\": null,\n \"value-keyword-case\": null\n }\n}\n" }, { "path": "CHANGELOG.md", "content": "# Changelog\n\nThis project adheres to [Semantic Versioning 2.0](http://semver.org/).\nAll release notes and upgrade notes can be found on our [Github Releases](https://github.com/atlassian/react-beautiful-dnd/releases) page.\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at areardon@atlassian.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]\n\n[homepage]: http://contributor-covenant.org\n[version]: http://contributor-covenant.org/version/1/4/\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing\n\nThanks for considering contributing to `react-beautiful-dnd`! โค๏ธ\n\nThere are a few categories of contribution so we'll go through them individually.\n\n## Documentation\n\nIf you think the docs could be improved - please feel free to raise a pull request!\n\n## Bug\n\nIf you spot a bug you are welcome to raise it on our issue page. You are also welcome to take a crack at fixing it if you like! When you create an issue you will be prompted with the details we would like you to provide.\n\n## Feature request\n\nIf you would like to see a feature added to the library, here is what you do:\n\n1. Have a read of `README.md` to understand the motivations of this library. It is fairly opinionated and is not intended to be a universal drag and drop library. As such, it will not support every drag and drop interaction.\n2. Have a search through the [open and closed issues](https://github.com/atlassian/react-beautiful-dnd/issues?utf8=%E2%9C%93&q=is%3Aissue) to see if the feature you are requesting as already been requested.\n3. Have a clear and general purpose keyboard story for any feature request\n4. Please [create an issue](https://github.com/atlassian/react-beautiful-dnd/issues/new) to discuss it.\n\n**Please do not raise a pull request directly**. There may be reasons why we will not add every feature to this library.\n\n## Large contributions\n\nIf you are interested in making a large contribution to this library there is some recommended reading / training we suggest. There is a large amount of different libraries, techniques and tools used in `react-beautiful-dnd` and we have created a list with resources about them. Not everything in the list will be applicable to everyone. But it is a great reference and starting point for those who do not know where to start.\n\nThe online courses listed are no free - feel free to seek out alternatives if you want to. We recommend the egghead.io courses because they are quite comprehensive.\n\n### General knowledge\n\n- [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS): This is an amazing resource that I recommend all the time. It is great for having a deeper understanding of the JavaScript language.\n\n### Technologies\n\n#### `React`\n\nThis is a `React` project so getting familiar with `React` is a must!\n\n- [`react`](https://facebook.github.io/react/)\n- [An intro to using React](https://egghead.io/courses/start-using-react-to-build-web-applications)\n\n#### `Redux`\n\nThis project uses `redux` for its state management. If you have not used `redux` before it is worth getting familiar with it.\n\n- [`redux`](http://redux.js.org/docs/introduction/): the library itself has really great docs\n- [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux): the whole course\n- [Building React Applications with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux): no need to do the lessons on react router or data fetching\n- [`react-redux`](https://github.com/reactjs/react-redux): `react` bindings for `redux`\n- [`reselect`](https://github.com/reactjs/reselect): we use `reselect` heavily to ensure that state selectors are as fast as they can be. Please have a read of its main page, especially the [sharing Selectors with Props Across Multiple Components](https://github.com/reactjs/reselect#sharing-selectors-with-props-across-multiple-components) section.\n\n#### Testing\n\nWe test our application very thoroughly. Changes will not be accepted without tests\n\n- [`jest`](https://facebook.github.io/jest/): We use the jest test runner. It is worth getting familiar with it\n- [Test JavaScript with Jest](https://egghead.io/lessons/javascript-test-javascript-with-jest)\n- [React Testing Cookbook](https://egghead.io/courses/react-testing-cookbook)\n\n#### Performance\n\nPerformance is **critical** to this project. Please get familiar with React performance considerations. Changes that break core performance characteristics will not be accepted.\n\n- [Performance optimisations for React applications](https://medium.com/@alexandereardon/performance-optimisations-for-react-applications-b453c597b191)\n- [Performance optimisations for React applications round 2](https://medium.com/@alexandereardon/performance-optimisations-for-react-applications-round-2-2042e5c9af97)\n- [React performance tools](https://facebook.github.io/react/docs/perf.html)\n- [React performance documentation](https://facebook.github.io/react/docs/optimizing-performance.html)\n- [React is slow, React is fast](https://marmelab.com/blog/2017/02/06/react-is-slow-react-is-fast.html)\n\n#### Flow\n\nThis codebase is typed with [`flow`](https://flow.org/). Changes will not be merged without correct flow typing. If you are not sure about a particular use case let flow break the build and it can be discussed in the pull request.\n\n- [`flow`](https://flow.org/en/docs/getting-started/): the `flow` docs are great\n- [Up and Running with Facebook Flow for Typed JavaScript](https://egghead.io/lessons/javascript-up-and-running-with-facebook-flow-for-typed-javascript): a small primer for running flow\n\n### Drag and drop problem space\n\n#### HTML5 drag and drop\n\nHow this library performs dragging is an implementation detail. The api is what users interact with. That said, this library does not use the html5 drag and drop api. The main reason is that html5 drag and drop does not allow the level of control we need to create our powerful and beautiful experiences. I could go into detail but this is not the right forum.\n\nHere is some general reading about html5 drag and drop. It is worth having a read to get familiar with its ideas and api\n\n- [HTML5 drag and drop api](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)\n- [HTML5 Rocks - dnd basics](https://www.html5rocks.com/en/tutorials/dnd/basics/)\n- [The HTML5 drag and drop disaster](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html)\n- [HTML5 drag and drop browser inconsistencies](http://mereskin.github.io/dnd/)\n\n#### Prior work\n\nIt is worth looking at other libraries out there to see how they do drag and drop. Things to look at is their philosophy and api. `react-beautiful-dnd` is an opinionated, higher level abstraction than most drag and drop libraries. We do not need to support every use case. We need to find the right level of control while still maintaining a beautiful experience for the user, flexibility of use and a clean, powerful api.\n\n- [`react-dnd`](https://react-dnd.github.io/react-dnd/) - `react-beautiful-dnd` draws a fair amount of inspiration from `react-dnd`. Something to keep in mind is that `react-dnd` is designed to provide a set of drag and drop primitives which is a different set of goals to this project.\n- [`react-sortable-hoc`](https://github.com/clauderic/react-sortable-hoc/) - on the surface this library looks similar to `react-beautiful-dnd`. I created a [comparison blog](https://medium.com/@alexandereardon/thanks-for-reaching-out-dimitar-nestorov-8c0bf9abe19) that explains the differences\n- [`jQuery sortable`](http://jqueryui.com/sortable/) - the king of drag and drop for a long time\n" }, { "path": "LICENSE", "content": "Copyright 2019 Atlassian Pty Ltd\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n" }, { "path": "README.md", "content": "## ๐Ÿ”’ Archived\n\nThis project is now [archived](https://docs.github.com/en/repositories/archiving-a-github-repository/archiving-repositories) and is [deprecated on `npm`](https://www.npmjs.com/package/react-beautiful-dnd). If you are still using `react-beautiful-dnd`, we have put together some [resources to help you move forward](https://github.com/atlassian/react-beautiful-dnd/issues/2672). To see our ongoing work in the drag and drop problem space, head to [Pragmatic drag and drop](https://github.com/atlassian/pragmatic-drag-and-drop).\n\nWe are so grateful to everybody who contributed in big and small ways to this project.\n\nCheers\n\n
\n\n---\n\n

\n \"react\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[![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.app/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[![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- [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![diagram](https://user-images.githubusercontent.com/2182637/53607406-c8f3a780-3c12-11e9-979c-7f3b5bd1bfbd.gif)\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 ``s](/docs/guides/dragging-svgs.md)\n- [Avoiding image flickering](/docs/guides/avoiding-image-flickering.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 ``s during a drag (11.x behaviour)](/docs/guides/changes-while-dragging.md) - _โš ๏ธ Advanced_\n- [Setting up Content Security Policy](/docs/guides/content-security-policy.md)\n\n### Patterns ๐Ÿ‘ทโ€\n\n- [Virtual lists ๐Ÿ‘พ](/docs/patterns/virtual-lists.md)\n- [Multi drag](/docs/patterns/multi-drag.md)\n- [Tables](/docs/patterns/tables.md)\n- [Reparenting a ``](/docs/guides/reparenting.md) - _Using our cloning API or your own portal_\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- [![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- [![gr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Greece.png) **ฮ•ฮปฮปฮทฮฝฮนฮบฮฌ/Greek**](https://github.com/milvard/react-beautiful-dnd-gr)\n- [![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **ๆ—ฅๆœฌ่ชž/Japanese**](https://github.com/eltociear/react-beautiful-dnd-ja)\n\n## Creator โœ๏ธ\n\nAlex Reardon [@alexandereardon](https://x.com/alexandereardon)\n\n> Alex is no longer personally maintaining this project. The other wonderful maintainers are carrying this project forward.\n\n## Maintainers\n\n- [Daniel Del Core](https://x.com/danieldelcore)\n- Many other [@Atlassian](https://x.com/Atlassian)'s!\n\n## Collaborators ๐Ÿค\n\n- Bogdan Chadkin [@IAmTrySound](https://x.com/IAmTrySound)\n" }, { "path": "a11y-audit-parse.js", "content": "/* eslint-disable flowtype/require-valid-file-annotation */\n/* eslint-disable import/no-unresolved */\n/* eslint-disable global-require */\n/* eslint-disable no-console */\ntry {\n // I disabled flow for this file because of this line.\n // Sometimes the file exists, sometimes it doesn't.\n // It depends on if you have run the accessibility test or not.\n // Given this conditional I thought it best to simply disable flow for the file\n const a11yReport = require('./test-reports/lighthouse/a11y.report.json');\n const a11yScore = a11yReport.categories.accessibility.score;\n const a11yScoreFormatted = `${a11yScore ? a11yScore * 100 : 0}%`;\n\n console.log('*************************');\n console.log('Lighthouse accessibility score: ', a11yScoreFormatted);\n console.log('*************************');\n\n if (a11yScore === 1) {\n // success!\n process.exit(0);\n } else {\n // fail build\n console.log(\n '\\nNOTE: Lighthouse accessibility audit score must be 100% to pass this build step.\\n\\n',\n );\n process.exit(1);\n }\n} catch (e) {\n console.error(e);\n process.exit(1);\n}\n" }, { "path": "babel.config.js", "content": "module.exports = {\n presets: ['@babel/react', '@babel/flow', ['@babel/env', { loose: true }]],\n plugins: [\n '@babel/transform-object-assign',\n ['@babel/proposal-class-properties', { loose: true }],\n // used for stripping out the `invariant` messages in production builds\n 'dev-expression',\n ],\n comments: false,\n};\n" }, { "path": "browser-test-harness.js", "content": "// @flow\nconst childProcess = require('child_process');\nconst path = require('path');\nconst waitPort = require('wait-port');\nconst ports = require('./server-ports');\n\nconst storybook = childProcess.spawn(process.execPath, [\n path.join('node_modules', '.bin', 'start-storybook'),\n '-p',\n `${ports.storybook}`,\n]);\n\nconst cspServer = childProcess.spawn(process.execPath, [\n path.join('csp-server', 'start.sh'),\n `${ports.cspServer}`,\n]);\n\nprocess.on('exit', () => {\n storybook.kill();\n cspServer.kill();\n});\n\nPromise.all([\n waitPort({\n host: 'localhost',\n port: ports.storybook,\n timeout: 60000,\n }),\n waitPort({\n host: 'localhost',\n port: ports.cspServer,\n timeout: 60000,\n }),\n])\n .then(() => {\n if (!process.argv[2]) {\n // eslint-disable-next-line no-console\n console.warn('Started servers but no command supplied to run after');\n process.exit();\n }\n\n const child = childProcess.spawn(process.argv[2], process.argv.slice(3), {\n stdio: 'inherit',\n });\n process.on('exit', () => {\n child.kill();\n });\n child.on('exit', (code) => {\n process.exit(code);\n });\n })\n .catch((error) => {\n // eslint-disable-next-line no-console\n console.error('Unable to spin up standalone servers');\n // eslint-disable-next-line no-console\n console.error(error);\n storybook.kill();\n cspServer.kill();\n process.exit(1);\n });\n" }, { "path": "csp-server/.eslintrc.js", "content": "module.exports = {\n rules: {\n // allowing console.warn / console.error\n // this is because we often mock console.warn and console.error and adding this rul\n // avoids needing to constantly be opting out of the rule\n 'no-console': ['error', { allow: ['warn', 'error'] }],\n\n // allowing useMemo and useCallback in tests\n 'no-restricted-imports': 'off',\n\n // Allowing Array.from\n 'no-restricted-syntax': 'off',\n },\n};\n" }, { "path": "csp-server/app.jsx", "content": "// disabling flowtype to keep this example super simple\n// It matches\n/* eslint-disable flowtype/require-valid-file-annotation */\n\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { DragDropContext, Droppable, Draggable } from '../src';\n\n// fake data generator\nconst getItems = (count) =>\n Array.from({ length: count }, (v, k) => k).map((k) => ({\n id: `item-${k}`,\n content: `item ${k}`,\n }));\n\n// a little function to help us with reordering the result\nconst reorder = (list, startIndex, endIndex) => {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n\n return result;\n};\n\nexport default class App extends Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n items: getItems(10),\n cspErrors: [],\n };\n this.onDragEnd = this.onDragEnd.bind(this);\n }\n\n componentDidMount() {\n document.addEventListener(\n 'securitypolicyviolation',\n this.onSecurityPolicyViolation,\n );\n }\n\n componentWillUnmount() {\n document.removeEventListener(\n 'securitypolicyviolation',\n this.onSecurityPolicyViolation,\n );\n }\n\n onDragEnd(result) {\n // dropped outside the list\n if (!result.destination) {\n return;\n }\n\n const items = reorder(\n this.state.items,\n result.source.index,\n result.destination.index,\n );\n\n this.setState({\n items,\n });\n }\n\n onSecurityPolicyViolation = (e) => {\n this.setState((state) => {\n return { cspErrors: [...state.cspErrors, e] };\n });\n };\n\n // Normally you would want to split things out into separate components.\n // But in this example everything is just done in one place for simplicity\n render() {\n return (\n \n

\n Content-Security-Policy error count:{' '}\n {this.state.cspErrors.length}\n

\n \n {(droppableProvided) => (\n
\n {this.state.items.map((item, index) => (\n \n {(draggableProvided) => (\n \n {item.content}\n
\n )}\n \n ))}\n {droppableProvided.placeholder}\n \n )}\n \n \n );\n }\n}\n\nApp.propTypes = {\n nonce: PropTypes.string,\n};\n" }, { "path": "csp-server/client.js", "content": "// @flow\n/* eslint-env browser */\n\nimport React from 'react';\nimport { hydrate } from 'react-dom';\nimport Sample from './app';\n\nconst root: Element | null = document.getElementById('root');\n\nlet nonce = null;\n\nconst cspEl = document.getElementById('csp-nonce');\nif (cspEl) {\n nonce = cspEl.getAttribute('content');\n}\n\nif (root) {\n hydrate(, root);\n}\n" }, { "path": "csp-server/main.js", "content": "/* eslint-disable id-length */\n// @flow\n\nconst webpack = require('webpack');\nconst requireFromString = require('require-from-string');\nconst MemoryFS = require('memory-fs');\nconst path = require('path');\nconst config = require('./webpack.config');\nconst ports = require('../server-ports');\n\nconst fs = new MemoryFS();\nconst compiler = webpack(config);\n\n// $ExpectError\ncompiler.outputFileSystem = fs;\n// $ExpectError\nconst outputPath = compiler.compilers.find((cfg) => cfg.name === 'client')\n .outputPath;\n\ncompiler.run(() => {\n const content = fs.readFileSync(path.resolve(outputPath, 'server.js'));\n const server = requireFromString(content.toString()).default;\n server(process.argv[2] || ports.cspServer, outputPath, fs);\n});\n" }, { "path": "csp-server/server.js", "content": "// @flow\nimport express from 'express';\nimport React from 'react';\nimport { renderToString } from 'react-dom/server';\nimport { resolve } from 'path';\nimport App from './app';\nimport { resetServerContext } from '../src';\n\nlet count = 0;\nfunction getNonce(): string {\n return `ThisShouldBeACryptographicallySecurePseudoRandomNumber-${count++}`;\n}\n\nfunction renderHtml(policy?: string, nonce?: string) {\n resetServerContext();\n let meta = '';\n if (nonce) {\n meta += ``;\n }\n if (policy) {\n meta += ``;\n }\n return `${meta}
${renderToString(\n ,\n )}
`;\n}\n\nexport default (port: string, outputPath: string, fs: any) => {\n const server = express();\n\n server.get('/client.js', (req, res) => {\n res.header('content-type', 'text/javascript');\n res.end(fs.readFileSync(resolve(outputPath, 'client.js')));\n });\n\n function render(res: any, policy?: string, nonce?: string) {\n if (policy) {\n res.header('Content-Security-Policy', policy);\n }\n res.header('content-type', 'text/html');\n res.end(renderHtml(policy, nonce));\n }\n\n server.get('/', (req, res) => {\n render(res);\n });\n\n server.get('/unsafe-inline', (req, res) => {\n render(res, \"style-src 'unsafe-inline'\");\n });\n\n server.get('/nonce', (req, res) => {\n const nonce = getNonce();\n render(res, `style-src 'nonce-${nonce}'`, nonce);\n });\n\n server.get('/wrong-nonce', (req, res) => {\n const nonce = getNonce();\n const wrongNonce = getNonce();\n render(res, `style-src 'nonce-${nonce}'`, wrongNonce);\n });\n\n server.listen(port, () => {\n // eslint-disable-next-line no-console\n console.log('csp server listening on port', port);\n });\n};\n" }, { "path": "csp-server/start.sh", "content": "#!/usr/bin/env node\n\nrequire('./main');\n" }, { "path": "csp-server/webpack.config.js", "content": "// @flow\nconst path = require('path');\n\nconst common = {\n context: path.resolve(__dirname, '..'),\n mode: 'development',\n entry: path.resolve(__dirname, 'main.js'),\n target: 'web',\n output: {\n filename: 'client.js',\n path: path.resolve(__dirname, 'dist'),\n },\n resolve: {\n extensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs'],\n },\n module: {\n rules: [\n {\n test: /\\.(png|jpg|gif)$/i,\n use: [\n {\n loader: 'url-loader',\n },\n ],\n },\n {\n test: /jsx?$/,\n exclude: [/node_modules/],\n use: [\n {\n loader: 'babel-loader',\n },\n ],\n },\n ],\n },\n externals: [\n {\n express: 'express',\n fs: 'fs',\n 'convert-source-map': 'convert-source-map',\n },\n ],\n};\n\nmodule.exports = [\n { ...common, entry: path.resolve(__dirname, 'client.js'), name: 'client' },\n {\n ...common,\n entry: path.resolve(__dirname, 'server.js'),\n name: 'server',\n target: 'node',\n output: {\n filename: 'server.js',\n path: path.resolve(__dirname, 'dist'),\n libraryTarget: 'commonjs2',\n },\n },\n];\n" }, { "path": "cypress/.eslintrc.js", "content": "module.exports = {\n plugins: ['cypress'],\n env: {\n 'cypress/globals': true,\n },\n extends: ['plugin:cypress/recommended'],\n rules: {\n // Allowing Array.from\n 'no-restricted-syntax': 'off',\n\n // not using jest expects\n 'jest/expect-expect': 'off',\n },\n};\n" }, { "path": "cypress/fixtures/.gitkeep", "content": "" }, { "path": "cypress/integration/content-security-policy.spec.js", "content": "// @flow\nimport * as keyCodes from '../../src/view/key-codes';\nimport { timings } from '../../src/animation';\nimport { getHandleSelector } from './util';\nimport ports from '../../server-ports';\n\nfunction commonTest(url: string, cspTest: string) {\n cy.visit(url);\n\n cy.get(getHandleSelector()).eq(0).as('first').should('contain', 'item 0');\n cy.get(getHandleSelector()).eq(1).should('contain', 'item 1');\n\n // reorder operation\n cy.get('@first')\n .focus()\n .trigger('keydown', { keyCode: keyCodes.space })\n // need to re-query for a clone\n .get('@first')\n .trigger('keydown', { keyCode: keyCodes.arrowDown, force: true })\n // finishing before the movement time is fine - but this looks nice\n .wait(timings.outOfTheWay * 1000)\n .trigger('keydown', { keyCode: keyCodes.space, force: true });\n\n // order now 2, 1\n // note: not using get aliases as they where returning incorrect results\n cy.get(getHandleSelector()).eq(0).should('contain', 'item 1');\n\n cy.get(getHandleSelector()).eq(1).should('contain', 'item 0');\n\n // element should maintain focus post drag\n cy.focused().should('contain', 'item 0');\n\n cy.get('#cspErrors').should(cspTest, '0');\n}\n\ndescribe('content security policy', () => {\n it('should reorder a list without a nonce', () => {\n commonTest(`http://localhost:${ports.cspServer}`, 'contain');\n });\n\n it('should reorder a list with a nonce', () => {\n commonTest(`http://localhost:${ports.cspServer}/nonce`, 'contain');\n });\n\n it('should reorder a list with a wrong nonce', () => {\n commonTest(\n `http://localhost:${ports.cspServer}/wrong-nonce`,\n 'not.contain',\n );\n });\n});\n" }, { "path": "cypress/integration/focus.spec.js", "content": "// @flow\nimport * as keyCodes from '../../src/view/key-codes';\nimport { getHandleSelector, getDraggableSelector } from './util';\n\ndescribe('focus', () => {\n it('should not steal focus if not already focused when lifting', () => {\n cy.visit('/iframe.html?id=board--dragging-a-clone');\n // focusing on another handle\n cy.get(getHandleSelector('1')).focus();\n cy.focused().should('contain', 'id:1');\n\n cy.get(getHandleSelector('2'))\n .as('id:2')\n .trigger('mousedown', { button: 0 })\n .trigger('mousemove', {\n button: 0,\n clientX: 200,\n clientY: 300,\n force: true,\n });\n\n // asserting id:2 is now dragging\n cy.get(getHandleSelector('2')).should(\n 'have.attr',\n 'data-is-dragging',\n 'true',\n );\n\n // focus not stolen\n cy.focused().should('contain', 'id:1');\n\n cy.get(getHandleSelector('2'))\n .trigger('mouseup', { force: true })\n // clone will be unmounting during drop\n .should('not.exist');\n\n // getting post clone handle\n cy.get(getHandleSelector('2')).should(\n 'have.attr',\n 'data-is-dragging',\n 'false',\n );\n\n // focus not stolen\n cy.focused().should('contain', 'id:1');\n });\n\n it('should maintain focus if dragging a clone', () => {\n cy.visit('/iframe.html?id=board--dragging-a-clone');\n // focusing on another handle\n cy.get(getHandleSelector('2')).focus();\n cy.focused().should('contain', 'id:2');\n\n cy.get(getHandleSelector('2')).trigger('keydown', {\n keyCode: keyCodes.space,\n });\n\n // asserting id:2 is now dragging\n cy.get(getHandleSelector('2')).should(\n 'have.attr',\n 'data-is-dragging',\n 'true',\n );\n\n // focus maintained\n cy.focused().should('contain', 'id:2');\n\n cy.get(getHandleSelector('2'))\n .trigger('keydown', { keyCode: keyCodes.arrowRight, force: true })\n .trigger('keydown', { keyCode: keyCodes.space, force: true })\n // clone will be unmounting during drop\n .should('not.exist');\n\n // getting post clone handle\n cy.get(getHandleSelector('2'))\n // no longer dragging\n .should('have.attr', 'data-is-dragging', 'false')\n // is in the second column (normally would loose focus moving between lists)\n .closest(getDraggableSelector('BMO'));\n\n // focus maintained\n cy.focused().should('contain', 'id:2');\n });\n\n it('should give focus to a combine target', () => {\n cy.visit('/iframe.html?id=board--with-combining-and-cloning');\n cy.get(getHandleSelector('2')).focus();\n cy.focused().should('contain', 'id:2');\n\n cy.get(getHandleSelector('2')).trigger('keydown', {\n keyCode: keyCodes.space,\n });\n\n // asserting id:2 is now dragging\n cy.get(getHandleSelector('2')).should(\n 'have.attr',\n 'data-is-dragging',\n 'true',\n );\n\n // focus maintained\n cy.focused().should('contain', 'id:2');\n\n cy.get(getHandleSelector('2'))\n .trigger('keydown', { keyCode: keyCodes.arrowRight, force: true })\n // combining with item:1\n .trigger('keydown', { keyCode: keyCodes.arrowUp, force: true })\n // dropping\n .trigger('keydown', { keyCode: keyCodes.space, force: true })\n // clone will be unmounting during drop\n .should('not.exist');\n\n // focus giving to item:1 the combine target\n cy.focused().should('contain', 'id:1');\n });\n\n it('should not give focus to a combine target if source did not have focus at start of drag', () => {\n cy.visit('/iframe.html?id=board--with-combining-and-cloning');\n // focusing on something unrelated to the drag\n cy.get(getHandleSelector('3')).focus();\n\n cy.get(getHandleSelector('2')).trigger('keydown', {\n keyCode: keyCodes.space,\n });\n\n // asserting id:2 is now dragging\n cy.get(getHandleSelector('2')).should(\n 'have.attr',\n 'data-is-dragging',\n 'true',\n );\n\n // focus not stolen\n cy.focused().should('contain', 'id:3');\n\n cy.get(getHandleSelector('2'))\n .trigger('keydown', { keyCode: keyCodes.arrowRight, force: true })\n // combining with item:1\n .trigger('keydown', { keyCode: keyCodes.arrowUp, force: true })\n // dropping\n .trigger('keydown', { keyCode: keyCodes.space, force: true })\n // clone will be unmounting during drop\n .should('not.exist');\n\n // focus not given to the combine target\n cy.focused().should('contain', 'id:3');\n });\n});\n" }, { "path": "cypress/integration/move-between-lists.spec.js", "content": "// @flow\nimport * as keyCodes from '../../src/view/key-codes';\nimport { timings } from '../../src/animation';\nimport { getDroppableSelector, getHandleSelector } from './util';\n\ndescribe('move between lists', () => {\n beforeEach(() => {\n cy.visit('/iframe.html?id=board--simple');\n });\n\n it('should move between lists', () => {\n // first list has item with id:2\n cy.get(getDroppableSelector())\n .eq(1)\n .as('first-list')\n .should('contain', 'id:2');\n\n // second list does not have item with id:2\n cy.get(getDroppableSelector())\n .eq(2)\n .as('second-list')\n .should('not.contain', 'id:2');\n\n cy.get('@first-list')\n .find(getHandleSelector())\n .first()\n .should('contain', 'id:2')\n .focus()\n .trigger('keydown', { keyCode: keyCodes.space })\n .trigger('keydown', { keyCode: keyCodes.arrowRight, force: true })\n // finishing before the movement time is fine - but this looks nice\n .wait(timings.outOfTheWay * 1000)\n .trigger('keydown', { keyCode: keyCodes.space, force: true });\n\n // no longer in the first list\n cy.get('@first-list').should('not.contain', 'id:2');\n\n // now in the second list\n cy.get('@second-list').should('contain', 'id:2');\n });\n});\n" }, { "path": "cypress/integration/reorder-lists.spec.js", "content": "// @flow\nimport * as keyCodes from '../../src/view/key-codes';\nimport { timings } from '../../src/animation';\nimport { getHandleSelector } from './util';\n\ndescribe('reorder lists', () => {\n beforeEach(() => {\n cy.visit('/iframe.html?id=board--simple');\n });\n\n it('should reorder lists', () => {\n // order: Jake, BMO\n cy.get('h4').eq(0).as('first').should('contain', 'Jake');\n\n cy.get('h4').eq(1).should('contain', 'BMO');\n\n // reorder operation\n cy.get('@first')\n .closest(getHandleSelector())\n .focus()\n .trigger('keydown', { keyCode: keyCodes.space })\n .trigger('keydown', { keyCode: keyCodes.arrowRight, force: true })\n // finishing before the movement time is fine - but this looks nice\n .wait(timings.outOfTheWay * 1000)\n .trigger('keydown', { keyCode: keyCodes.space, force: true });\n\n // order now 2, 1\n // note: not using get aliases as they where returning incorrect results\n cy.get('h4').eq(0).should('contain', 'BMO');\n\n // index of the drag handle has changed\n cy.get('h4').eq(1).should('contain', 'Jake');\n });\n});\n" }, { "path": "cypress/integration/reorder-virtual.spec.js", "content": "// @flow\nimport * as keyCodes from '../../src/view/key-codes';\nimport { timings } from '../../src/animation';\nimport { getHandleSelector } from './util';\n\ndescribe('reorder: virtual', () => {\n beforeEach(() => {\n cy.visit('/iframe.html?id=virtual-react-window--list');\n });\n\n it('should reorder within a list', () => {\n const movements: number = 12;\n\n cy.get(getHandleSelector()).first().as('item');\n\n cy.get('@item').invoke('attr', 'data-testid').as('item-id');\n\n cy.get('@item')\n .invoke('attr', 'data-index')\n .as('item-index')\n .should('equal', '0');\n\n // lift\n cy.get('@item')\n .focus()\n .trigger('keydown', { keyCode: keyCodes.space })\n // need to re-query for a clone\n .get('@item');\n\n cy.wrap(Array.from({ length: movements })).each(() => {\n cy.get('@item')\n .trigger('keydown', { keyCode: keyCodes.arrowDown, force: true })\n // finishing before the movement time is fine - but this looks nice\n // waiting longer than we should (timings.outOfTheWay * 1000) as electron is being strange\n .wait(timings.outOfTheWay * 1000 * 2);\n });\n\n // drop\n cy.get('@item').trigger('keydown', {\n keyCode: keyCodes.space,\n force: true,\n });\n\n // This is setting up a chain of commands and this test will not wait\n // for a 'promise' to resolve. Linting is getting confused by .then\n // eslint-disable-next-line jest/valid-expect-in-promise\n cy.get('@item-id').then((id) => {\n cy.get(getHandleSelector(id))\n .invoke('attr', 'data-index')\n .should('equal', `${movements}`);\n });\n });\n});\n" }, { "path": "cypress/integration/reorder.spec.js", "content": "// @flow\nimport * as keyCodes from '../../src/view/key-codes';\nimport { timings } from '../../src/animation';\nimport { getHandleSelector } from './util';\n\ndescribe('reorder', () => {\n beforeEach(() => {\n cy.visit('/iframe.html?id=single-vertical-list--basic');\n });\n\n it('should reorder within a list', () => {\n // order: 1, 2\n cy.get(getHandleSelector()).eq(0).as('first').should('contain', 'id:1');\n cy.get(getHandleSelector()).eq(1).should('contain', 'id:2');\n\n // reorder operation\n cy.get('@first')\n .focus()\n .trigger('keydown', { keyCode: keyCodes.space })\n // need to re-query for a clone\n .get('@first')\n .trigger('keydown', { keyCode: keyCodes.arrowDown, force: true })\n // finishing before the movement time is fine - but this looks nice\n .wait(timings.outOfTheWay * 1000)\n .trigger('keydown', { keyCode: keyCodes.space, force: true });\n\n // order now 2, 1\n // note: not using get aliases as they where returning incorrect results\n cy.get(getHandleSelector()).eq(0).should('contain', 'id:2');\n\n cy.get(getHandleSelector()).eq(1).should('contain', 'id:1');\n\n // element should maintain focus post drag\n cy.focused().should('contain', 'id:1');\n });\n});\n" }, { "path": "cypress/integration/util.js", "content": "// @flow\nimport * as dataAttr from '../../src/view/data-attributes';\n\nexport function getDroppableSelector(droppableId?: string) {\n if (droppableId) {\n return `[${dataAttr.droppable.id}=\"${droppableId}\"]`;\n }\n return `[${dataAttr.droppable.id}]`;\n}\n\nexport function getHandleSelector(draggableId?: string) {\n if (draggableId) {\n return `[${dataAttr.dragHandle.draggableId}=\"${draggableId}\"]`;\n }\n return `[${dataAttr.dragHandle.draggableId}]`;\n}\n\nexport function getDraggableSelector(draggableId?: string) {\n if (draggableId) {\n return `[${dataAttr.draggable.id}=\"${draggableId}\"]`;\n }\n return `[${dataAttr.draggable.id}]`;\n}\n" }, { "path": "cypress/plugins/index.js", "content": "/* eslint-disable no-unused-vars */\n/* eslint-disable flowtype/require-valid-file-annotation */\n// ***********************************************************\n// This example plugins/index.js can be used to load plugins\n//\n// You can change the location of this file or turn off loading\n// the plugins file with the 'pluginsFile' configuration option.\n//\n// You can read more here:\n// https://on.cypress.io/plugins-guide\n// ***********************************************************\n\n// This function is called when a project is opened or re-opened (e.g. due to\n// the project's config changing)\n\nmodule.exports = (on, config) => {\n // `on` is used to hook into various events Cypress emits\n // `config` is the resolved Cypress config\n};\n" }, { "path": "cypress/support/commands.js", "content": "// @flow\n// ***********************************************\n// This example commands.js shows you how to\n// create various custom commands and overwrite\n// existing commands.\n//\n// For more comprehensive examples of custom\n// commands please read more here:\n// https://on.cypress.io/custom-commands\n// ***********************************************\n//\n//\n// -- This is a parent command --\n// Cypress.Commands.add(\"login\", (email, password) => { ... })\n//\n//\n// -- This is a child command --\n// Cypress.Commands.add(\"drag\", { prevSubject: 'element'}, (subject, options) => { ... })\n//\n//\n// -- This is a dual command --\n// Cypress.Commands.add(\"dismiss\", { prevSubject: 'optional'}, (subject, options) => { ... })\n//\n//\n// -- This is will overwrite an existing command --\n// Cypress.Commands.overwrite(\"visit\", (originalFn, url, options) => { ... })// @flow\n" }, { "path": "cypress/support/index.js", "content": "// @flow\n// ***********************************************************\n// This example support/index.js is processed and\n// loaded automatically before your test files.\n//\n// This is a great place to put global configuration and\n// behavior that modifies Cypress.\n//\n// You can change the location of this file or turn off\n// automatically serving support files with the\n// 'supportFile' configuration option.\n//\n// You can read more here:\n// https://on.cypress.io/configuration\n// ***********************************************************\n\n// Import commands.js using ES2015 syntax:\nimport './commands';\n\n// Alternatively you can use CommonJS syntax:\n// require('./commands')\n" }, { "path": "cypress.json", "content": "{\n \"baseUrl\": \"http://localhost:9002\"\n}\n" }, { "path": "docs/about/accessibility.md", "content": "# Accessibility โ™ฟ๏ธ\n\nTraditionally drag and drop interactions have been exclusively a mouse or touch interaction. This library has invested a huge amount of effort to ensure that everybody has access to drag and drop interactions\n\n## What we do to include everyone\n\n- [Full keyboard support](/docs/sensors/keyboard.md) (reordering, combining, moving between lists)\n- [Keyboard multi drag support](/docs/patterns/multi-drag.md)\n- Keyboard [auto scrolling](/docs/guides/auto-scrolling.md)\n- Fantastic [screen reader support](/docs/guides/screen-reader.md) - _We ship with english messaging out of the box ๐Ÿ“ฆ_\n- Smart management of [browser focus](/docs/guides/browser-focus.md)\n- A [Google lighthouse](https://developers.google.com/web/tools/lighthouse) automated build to ensure perfect accessibility scores (at least according to [Google](https://developers.google.com/web/tools/lighthouse/v3/scoring#a11y))\n\n![screen-reader-text](https://user-images.githubusercontent.com/2182637/36571009-d326d82a-1888-11e8-9a1d-e44f8b969c2f.gif)\n\n> Example screen reader announcement\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/about/animations.md", "content": "# Carefully designed animations\n\nWith things moving a lot it would be easy for the user to become distracted by the animations or for them to get in the way. We have tweaked the various animations to ensure the right balance of guidance, performance and interactivity.\n\n## Dropping\n\nWe have designed a drop animation that feels weighted and physical. It is based on a [`spring`](https://developer.android.com/guide/topics/graphics/spring-animation) and uses a CSS animation with a dynamic duration to achieve the effect.\n\n![result-curve](https://user-images.githubusercontent.com/2182637/48235467-1ce34200-e412-11e8-8c69-2060a0c2f61a.png)\n\n> Animation curve used when dropping. Duration is dynamic based on distance to travel\n\nYou can tweak the drop animation if you would like to. We have created a guide: [drop animation](/docs/guides/drop-animation.md)\n\n## Moving out of the way\n\nItems that are moving out of the way of a dragging item do so with a CSS transition rather than physics. This is to maximise performance by allowing the GPU to handle the movement. The CSS animation curve has been designed to communicate getting out of the way.\n\nHow it is composed:\n\n1. A warm up period to mimic a natural response time\n2. A small phase to quickly move out of the way\n3. A long tail so that people can read any text that is being animated in the second half of the animation\n\n![animation curve](https://raw.githubusercontent.com/alexreardon/files/master/resources/dnd-ease-in-out-small.png?raw=true)\n\n> Animation curve used when moving out of the way\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/about/browser-support.md", "content": "# Browser support ๐ŸŒ\n\nThis library supports the standard [Atlassian supported browsers](https://confluence.atlassian.com/cloud/supported-browsers-744721663.html) for desktop:\n\n| Desktop | Version |\n| ------------------------------------ | ---------------------------------------------------- |\n| Microsoft Internet Explorer(Windows) | Version 11 |\n| Microsoft Edge | Latest stable version supported |\n| Mozilla Firefox (all platforms) | Latest stable version supported |\n| Google Chrome (Windows and Mac) | Latest stable version supported |\n| Safari (Mac) | Latest stable version on latest OS release supported |\n\n| Mobile | Version |\n| ------------------------ | --------------------------------------------------------- |\n| Chrome (Android and iOS) | Latest stable version supported |\n| Mobile Safari (iOS) | Latest stable version supported |\n| Android (Android) | The default browser on Android 4.0.3 (Ice Cream Sandwich) |\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/about/design-principles.md", "content": "# Design principles ๐Ÿ“–\n\nThis page goes over the design and interaction thinking behind `react-beautiful-dnd`.\n\n## Foundational idea: physicality\n\nThe core design idea of `react-beautiful-dnd` is physicality: we want users to feel like they are moving physical objects around\n\n### Application 1: no instant movement (no snapping)\n\nIt is a fairly standard drag and drop pattern for things to disappear and reappear in response to the users drag. For a more natural drag we animate the movement of items as they need to move out of the way while dragging to more clearly show a drags effect. We also animate the drop of an item so that it animates into its new home position. At no point is an item instantly moved anywhereโ€Šโ€”โ€Šregardless of whether it is dragging or not.\n\n### Application 2: knowing when to move\n\nIt is quite common for drag and drop interactions to be based on the position that user started the drag from.\n\nIn `react-beautiful-dnd` a dragging items impact is based on its centre of gravityโ€Šโ€”โ€Šregardless of where a user grabs an item from. A dragging items impact follows similar rules to a set of scales โš–๏ธ. Here are some rules that are followed to allow for a natural drag experience even with items of flexible height:\n\n- A list is _dragged over_ when the centre position of a dragging item goes over one of the boundaries of the list\n- A resting drag item will move out of the way of a dragging item when the centre position of the dragging item goes over the edge of the resting item. Put another way: once the centre position of an item (A) goes over the edge of another item (B), B moves out of the way.\n\n### Application 3: movement to communicate positioning\n\n> No support for drop shadows or line markings\n> _Drop shadow: putting a clone or 'shadow' of the dragging item in the drop location_\n\n`react-beautiful-dnd` relies on movement to communicate positioning. It is trying to create a system that is based on physical metaphores. Drop shadows, lines and other affordances are useful in drag and drop contexts where natural movement is not possible.\n\nDrop shadows pose a number of confusing design moments if combined with a natural movement system, including:\n\n- Where is the shadow when you are not over a list?\n- How should it move between items?\n- How should it appear as you enter a new list?\n\nThe answer to these is often: snapping (where something just appears in the right spot). We are trying hard to avoid any snapping as it breaks the physicality we are trying to model.\n\n### Application 4: maximise interactivity\n\n`react-beautiful-dnd` works really hard to avoid as many periods of non-interactivity as possible. The user should feel like they are in control of the interface and not waiting for an animation to finish before they can continue to interact with the interface. However, there is a balance that needs to be made between correctness and power in order to make everybody's lives more sane. Here are the only situations where some things are not interactive:\n\n1. From when a user cancels a drag to when the drop animation completes. On cancel there are lots of things moving back to where they should be. If you grab an item in a location that is not its true home then the following drag will be incorrect.\n2. Starting a drag on an item that is animating its own drop. For simplicity this is the case - it is actually quite hard to grab something while it is animating home. It could be coded around - but it seems like an edge case that would add a lot of complexity.\n\nKeep in mind that these periods of inactivity may not always exist.\n\n### Application 5: no drag axis locking\n\nFor now, the library does not support drag axis locking (aka drag rails). This is where the user is restricted to only dragging along one axis. The current thinking is this breaks the physical metaphor we are going for and sends a message to the user that they are interacting with a piece of software rather than moving physical objects around. It is possible to ensure that a user can only drop in a single list by using props `type` and `isDropDisabled`. You can also do some visual treatment to the list `onDragStart` to show the user that this is the only place they can interact with.\n\n### Application 6: natural cross list movement\n\nRather than using an index based approach for keyboard movement between lists, `react-beautiful-dnd` performs cross list movement based on **inertia, gravity and collisions**. You can find out more about how this works by reading the blog [\"Natural keyboard movement between lists\"](https://medium.com/@alexandereardon/friction-gravity-and-collisions-3adac3a94e19).\n\n![example](https://raw.githubusercontent.com/alexreardon/files/master/resources/collision.gif?raw=true)\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/about/examples.md", "content": "# Examples ๐ŸŽ‰\n\nSee how beautiful it is for yourself!\n\n## Viewing on a desktop\n\n[All the examples!](https://react-beautiful-dnd.netlify.app)\n\n## Viewing on a mobile or tablet\n\n- [Simple list](https://react-beautiful-dnd.netlify.app/iframe.html?id=single-vertical-list--basic)\n- [Board](https://react-beautiful-dnd.netlify.app/iframe.html?id=board--simple) - best viewed in landscape\n\n> We provide different links for touch devices as [storybook](https://github.com/storybooks/storybook) runs examples in an iframe which can result in a strange auto scroll experience\n\n## Basic samples\n\nWe have created some basic examples on `codesandbox` for you to play with directly:\n\n- [Simple vertical list](https://codesandbox.io/s/k260nyxq9v)\n- [Simple horizontal list](https://codesandbox.io/s/mmrp44okvj)\n- [Using with function components](https://codesandbox.io/s/zqwz5n5p9x)\n- [Simple DnD between two lists](https://codesandbox.io/s/ql08j35j3q) - _Community made_\n- [Simple DnD between a dynamic number of lists (with function components) and ability to delete items](https://codesandbox.io/s/-w5szl) - _Community made_\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/about/installation.md", "content": "# Installation\n\n[![module formats: umd, cjs, and esm](https://img.shields.io/badge/module%20formats-umd%2c%20cjs%2c%20esm-green.svg?style=flat)](https://unpkg.com/react-beautiful-dnd/dist/)\n\n## General\n\n1. Add the `react-beautiful-dnd` package\n\n```bash\n# yarn\nyarn add react-beautiful-dnd\n\n# npm\nnpm install react-beautiful-dnd --save\n```\n\n2. Use the package\n\n```js\nimport { DragDropContext } from 'react-beautiful-dnd';\n```\n\n3. Profit ๐Ÿ•บ\n\n## `React` environment\n\nIn order to use `react-beautiful-dnd` you will probably want to have a `React` environment set up.\n\n- [Add react to a website](https://reactjs.org/docs/add-react-to-a-website.html) - official `React` docs\n- [Setup a react environment with `create-react-app`](https://egghead.io/lessons/react-set-up-a-react-environment-with-create-react-app) - from our [free getting started course](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd)\n\n## Distribution bundle\n\nA [universal module definition](https://github.com/umdjs/umd) bundle is published on `npm` under the `/dist` folder for consumption . We publish the following files:\n\n- `dist/react-beautiful-dnd.js`\n- `dist/react-beautiful-dnd.min.js` (minified bundle)\n\nThese bundles list `react` as an external which needs to be provided. This is done to reduce the size of the bundle and prevent consumers from loading `react` multiple times. You can provide `react` through your module system or simply by having `react` on the `window`.\n\nYou can use the UMD to run `react-beautiful-dnd` directly in the browser.\n\n```html\n\n\n\n\n\n\n\n\n```\n\nThere is also an [example codepen](https://codepen.io/alexreardon/project/editor/ZyNMPo) you can use to play with this installation method.\n\n## [`ClojureScript`](https://clojurescript.org/)\n\nYou can consume `react-beautiful-dnd` from within `ClojureScript` using [CLJSJS](https://cljsjs.github.io/)!\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/api/drag-drop-context.md", "content": "# ``\n\nIn order to use drag and drop, you need to have the part of your `React` tree that you want to be able to use drag and drop in wrapped in a ``. It is advised to just wrap your entire application in a ``. Having nested ``'s is _not_ supported. You will be able to achieve your desired conditional dragging and dropping using the props of `` and ``. You can think of `` as having a similar purpose to the [react-redux Provider component](https://react-redux.js.org/api/provider). A content-security-protection nonce attribute is added to the injected style tags if provided.\n\n## Props\n\n```js\ntype Responders = {|\n // optional\n onBeforeCapture?: OnBeforeCaptureResponder\n onBeforeDragStart?: OnBeforeDragStartResponder,\n onDragStart?: OnDragStartResponder,\n onDragUpdate?: OnDragUpdateResponder,\n // required\n onDragEnd: OnDragEndResponder,\n|};\n\nimport type { Node } from 'react';\n\ntype Props = {|\n ...Responders,\n // We do not technically need any children for this component\n children: Node | null,\n // Read out by screen readers when focusing on a drag handle\n dragHandleUsageInstructions?: string,\n // Used for strict content security policies\n nonce?: string,\n // Used for custom sensors\n sensors?: Sensor[],\n enableDefaultSensors?: ?boolean,\n|};\n```\n\n- `dragHandleUsageInstructions`: What is read out to screen reader users when a _drag handle_ is given browser focus. See our [screen reader guide](/docs/guides/screen-reader.md)\n- `nonce`: Used for strict content security policy setups. See our [content security policy guide](/docs/guides/content-security-policy.md)\n- `sensors`: Used to pass in your own `sensor`s for a ``. See our [sensor api documentation](/docs/sensors/sensor-api.md)\n- `enableDefaultSensors`: Whether or not the default sensors ([mouse](/docs/sensors/mouse.md), [keyboard](/docs/sensors/keyboard.md), and [touch](/docs/sensors/touch.md)) are enabled. You can also import them separately as `useMouseSensor`, `useKeyboardSensor`, or `useTouchSensor` and reuse just some of them via `sensors` prop. See our [sensor api documentation](/docs/sensors/sensor-api.md)\n\n> See our [type guide](/docs/guides/types.md) for more details\n\n## Basic usage\n\n### Using a `class` component\n\n```js\nimport React from 'react';\nimport { DragDropContext } from 'react-beautiful-dnd';\n\nclass App extends React.Component {\n onBeforeCapture = () => {\n /*...*/\n };\n\n onBeforeDragStart = () => {\n /*...*/\n };\n\n onDragStart = () => {\n /*...*/\n };\n onDragUpdate = () => {\n /*...*/\n };\n onDragEnd = () => {\n // the only one that is required\n };\n\n render() {\n return (\n \n
Hello world
\n \n );\n }\n}\n```\n\n### Using a `function` component\n\n```js\nimport React from 'react';\nimport { DragDropContext } from 'react-beautiful-dnd';\n\nfunction App() {\n // using useCallback is optional\n const onBeforeCapture = useCallback(() => {\n /*...*/\n }, []);\n const onBeforeDragStart = useCallback(() => {\n /*...*/\n }, []);\n const onDragStart = useCallback(() => {\n /*...*/\n }, []);\n const onDragUpdate = useCallback(() => {\n /*...*/\n }, []);\n const onDragEnd = useCallback(() => {\n // the only one that is required\n }, []);\n\n return (\n \n
Hello world
\n \n );\n}\n```\n\n## `Responders`\n\n> `Responders` were previously known as `Hooks`\n\nResponders are top level application events that you can use to perform your own state updates, style updates, as well as to make screen reader announcements.\n\n[Please see our Responders guide](/docs/guides/responders.md) for detailed information about responders โค๏ธ\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/api/draggable.md", "content": "# ``\n\n`` components can be dragged around and dropped onto ``s. A `` must always be contained within a ``. It is **possible** to reorder a `` within its home `` or move to another ``. It is **possible** because a `` is free to control what it allows to be dropped on it.\n\nEvery `` has a _drag handle_. A _drag handle_ is the element that the user interacts with in order to drag a ``. A _drag handle_ can be the `` element itself, or a child of the ``. Note that by default a _drag handle_ cannot be an interactive element, since [event handlers are blocked on nested interactive elements](#interactive-child-elements-within-a-draggable-). Proper semantics for accessibility are added to the _drag handle_ element. If you wish to use an interactive element, `disableInteractiveElementBlocking` must be set.\n\n```js\nimport { Draggable } from 'react-beautiful-dnd';\n\n\n {(provided, snapshot) => (\n \n

My draggable

\n \n )}\n;\n```\n\n## Draggable Props\n\n```js\nimport type { Node } from 'react';\n\ntype Props = {|\n // required\n draggableId: DraggableId,\n index: number,\n children: DraggableChildrenFn,\n // optional\n isDragDisabled: ?boolean,\n disableInteractiveElementBlocking: ?boolean,\n shouldRespectForcePress: ?boolean,\n|};\n```\n\n### Required props\n\n> `react-beautiful-dnd` will throw an error if a required prop is not provided\n\n- `draggableId`: A _required_ `DraggableId(string)`. See our [identifiers guide](/docs/guides/identifiers.md) for more information.\n- `index`: A _required_ `number` that matches the order of the `` in the ``. It is simply the index of the `` in the list.\n\n`index` rule:\n\n- Must be unique within a `` (no duplicates)\n- Must be consecutive. `[0, 1, 2]` and not `[1, 2, 8]`\n\nIndexes do not need to start from `0` (this is often the case in [virtual lists](/docs/patterns/virtual-lists.md)). In development mode we will log warnings to the `console` if any of these rules are violated. See [Setup problem detection and error recovery](/docs/guides/setup-problem-detection-and-error-recovery.md)\n\nTypically the `index` value will simply be the `index` provided by a `Array.prototype.map` function:\n\n```js\n{\n this.props.items.map((item, index) => (\n \n {(provided, snapshot) => (\n \n {item.content}\n \n )}\n \n ));\n}\n```\n\n### Optional props\n\n- `isDragDisabled`: A flag to control whether or not the `` is permitted to drag. You can use this to implement your own conditional drag logic. It will default to `false`.\n- `disableInteractiveElementBlocking`: A flag to opt out of blocking a drag from interactive elements. For more information refer to the section _Interactive child elements within a ``_\n- `shouldRespectForcePress`: Whether or not the _drag handle_ should respect force press interactions. See [Force press](#force-press).\n\n## Children function (render props / function as child)\n\nThe `React` children of a `` must be a function that returns a `ReactNode`.\n\n```js\n\n {(provided, snapshot) => (\n \n Drag me!\n \n )}\n\n```\n\n```js\ntype DraggableChildrenFn = (\n DraggableProvided,\n DraggableStateSnapshot,\n DraggableRubric,\n) => Node;\n```\n\nThe function is provided with three arguments:\n\n### 1. provided: (DraggableProvided)\n\n```js\ntype DraggableProvided = {|\n innerRef: (HTMLElement) => void,\n draggableProps: DraggableProps,\n // will be null if the draggable is disabled\n dragHandleProps: ?DragHandleProps,\n|};\n```\n\n> For more type information please see [our types guide](/docs/guides/types.md).\n\nEverything within the _provided_ object must be applied for the `` to function correctly.\n\n- `provided.innerRef (innerRef: (HTMLElement) => void)`: In order for the `` to function correctly, **you must** bind the `innerRef` function to the `ReactElement` that you want to be considered the `` node. We do this in order to avoid needing to use `ReactDOM` to look up your DOM node.\n\n> For more information on using `innerRef` see our [using `innerRef` guide](/docs/guides/using-inner-ref.md)\n\n#### `innerRef` Example\n\n```js\n\n {(provided, snapshot) =>
Drag me!
}\n\n\n// Note: this will not work directly as we are not applying draggableProps or dragHandleProps\n```\n\n- `provided.draggableProps (DraggableProps)`: This is an Object that contains a `data` attribute and an inline `style`. This Object needs to be applied to the same node that you apply `provided.innerRef` to. This controls the movement of the draggable when it is dragging and not dragging. You are welcome to add your own styles to `DraggableProps.style` โ€“ but please do not remove or replace any of the properties.\n\n#### `draggableProps` type information\n\n```js\n// Props that can be spread onto the element directly\nexport type DraggableProps = {|\n // inline style\n style: ?DraggableStyle,\n // used for shared global styles\n 'data-rbd-draggable-context-id': string,\n 'data-rbd-draggable-id': string,\n // used to know when a transition ends\n onTransitionEnd: ?(event: TransitionEvent) => void,\n|};\n```\n\n> For more type information please see [our types guide](/docs/guides/types.md).\n\n#### `draggableProps` Example\n\n```js\n\n {(provided, snapshot) => (\n
\n Drag me!\n
\n )}\n\n\n// Note: this will not work directly as we are not applying dragHandleProps\n```\n\n#### `key`s for a list of ``\n\nIf you are rendering a list of ``s then it is important that you add a `key` prop to each ``.\n\n```js\nreturn items.map((item, index) => (\n \n {(provided, snapshot) => (\n \n {item.content}\n \n )}\n \n));\n```\n\nRules:\n\n- Your `key` needs to be unique within the list\n- Your `key` should not include the `index` of the item\n\nUsually you will want to just use the `draggableId` as the `key`\n\n`React` will warn you if your list is missing `keys`. It will not warn you if you are using `index` as a part of your `key`.\n\nNot using `keys` correctly will cause really bad times ๐Ÿ’ฅ\n\n[`React` docs about `keys`](https://reactjs.org/docs/lists-and-keys.html)\n\n#### Positioning ownership\n\nIt is a contract of this library that it owns the positioning logic of the dragging element. This includes properties such as `top`, `right`, `bottom`, `left` and `transform`. The library may change how it positions things and which properties it uses without performing a major version bump. It is also recommended that you do not apply your own `transition` property to the dragging element.\n\n#### Warning: `position: fixed`\n\n`react-beautiful-dnd` uses `position: fixed` to position the dragging element. This is quite robust and allows for you to have `position: relative | absolute | fixed` parents. However, unfortunately `position:fixed` is [impacted by `transform`](http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/) (such as `transform: rotate(10deg);`). This means that if you have a `transform: *` on one of the parents of a `` then the positioning logic will be incorrect while dragging. Lame! For most consumers this will not be an issue.\n\nTo get around this you can [reparent your ](/docs/guides/reparenting.md). We do not enable this functionality by default as it has performance problems.\n\n#### Force press\n\n> Safari only\n\nIn Safari, it is possible for a user to perform a force press action. This is possible with a touch device (`touchforcechange`) and with a mouse (`webkitmouseforcechanged`).\n\nWe have found that in order to give the most consistent drag and drop experience we need to _opt out_ of force press interactions on a _drag handle_. However, it is possible to have `react-beautiful-dnd` work while also respecting force press interactions. The trade off is that if we register a force press interaction a drag will be cancelled.\n\nIn order to control this behaviour you set the `shouldRespectForcePress` prop on a ``. By default we set this value to `false` to prevent heavy presses from cancelling a drag.\n\n##### Enabling `shouldRespectForcePress`\n\nIf you set `shouldRespectForcePress` to `true` then the following will occur:\n\n###### Touch dragging\n\nIf the user force presses on the element before they have moved the element (even if a drag has already started) then the drag is cancelled and the standard force press action occurs. For an anchor this is a website preview.\n\n###### Mouse dragging\n\nAny force press action will cancel an existing or pending drag\n\n#### Focus retention\n\nSee [our focus guide](/docs/guides/browser-focus.md)\n\n#### Extending `DraggableProps.style`\n\nIf you are using inline styles you are welcome to extend the `DraggableProps.style` object. You are also welcome to apply the `DraggableProps.style` object using inline styles and use your own styling solution for the component itself. You can use anything you like to style the `` such as\n\n- css-in-js such as [`styled-components`](https://www.styled-components.com) or [`emotion`](https://emotion.sh)\n- sass, less\n- vanilla css\n\nIf you are overriding inline styles be sure to do it after you spread the `provided.draggableProps` or the spread will override your inline style.\n\n```js\n\n {(provided, snapshot) => {\n // extending the DraggableStyle with our own inline styles\n const style = {\n ...provided.draggableProps.style,\n backgroundColor: snapshot.isDragging ? 'blue' : 'white',\n fontSize: 18,\n };\n return (\n
\n Drag me!\n
\n );\n }}\n\n```\n\n#### Unsupported `margin` setups\n\nAvoid margin collapsing between ``s. [margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) is one of those really hard parts of CSS. For our purposes, if you have one `` with a `margin-bottom: 10px` and the next `` has a `margin-top: 12px` these margins will _collapse_ and the resulting space between the elements will be the greater of the two: `12px`. When we do our calculations we are currently not accounting for margin collapsing. If you do want to have a margin on the siblings, wrap them both in a `div` and apply the margin to the inner `div` so they are not direct siblings.\n\n#### ``s should be visible siblings\n\nIt is an assumption that ``s are _visible siblings_ of one another. There can be other elements in between, but these elements should not take up any additional space. You probably will not do this anyway, but just calling it out to be super clear.\n\n```js\n// Direct siblings โœ…\n\n {() => {}}\n\n\n {() => {}}\n\n\n// Not direct siblings, but are visible siblings โœ…\n
\n \n {() => {}}\n \n
\n
\n \n {() => {}}\n \n
\n\n// Spacer elements โŒ\n\n {() => {}}\n\n

I will break things!

\n\n {() => {}}\n\n\n// Spacing on non sibling wrappers โŒ\n
\n \n {() => {}}\n \n
\n
\n \n {() => {}}\n \n
\n```\n\n- `provided.dragHandleProps (?DragHandleProps)` every `` has a _drag handle_. This is what is used to drag the whole ``. Often this will be the same node as the ``, but sometimes it can be a child of the ``. `DragHandleProps` need to be applied to the node that you want to be the drag handle. This is a number of props that need to be applied to the `` node. The simplest approach is to spread the props onto the draggable node (`{...provided.dragHandleProps}`). However, you are also welcome to [monkey patch](https://davidwalsh.name/monkey-patching) these props if you also need to respond to them. DragHandleProps will be `null` when `isDragDisabled` is set to `true`.\n\n#### `dragHandleProps` Type information\n\n```js\ntype DragHandleProps = {|\n // what draggable the handle belongs to\n 'data-rbd-drag-handle-draggable-id': DraggableId,\n\n // What DragDropContext the drag handle is in\n 'data-rbd-drag-handle-context-id': ContextId,\n\n // Id of hidden element that contains the lift instruction (nicer screen reader text)\n 'aria-labelledby': ElementId,\n\n // Allow tabbing to this element\n tabIndex: number,\n\n // Stop html5 drag and drop\n draggable: boolean,\n onDragStart: (event: DragEvent) => void,\n|};\n```\n\n#### `dragHandleProps` Example: standard\n\n```js\n\n {(provided, snapshot) => (\n \n Drag me!\n \n )}\n\n```\n\n#### `dragHandleProps` example: custom drag handle\n\nControlling a whole draggable by just a part of it\n\n```js\n\n {(provided, snapshot) => (\n
\n

Hello there

\n
Drag handle
\n
\n )}\n\n```\n\n### 2. Snapshot: (DraggableStateSnapshot)\n\n```js\ntype DraggableStateSnapshot = {|\n // Set to true if a Draggable is being actively dragged, or if it is drop animating\n // Both active dragging and the drop animation are considered part of the drag\n // *Generally this is the only property you will be using*\n isDragging: boolean,\n // Set to true if a Draggable is drop animating. Not every drag and drop interaction\n // as a drop animation. There is no drop animation when a Draggable is already in its final\n // position when dropped. This is commonly the case when dragging with a keyboard\n isDropAnimating: boolean,\n // Information about a drop animation\n dropAnimation: ?DropAnimation\n // What Droppable (if any) the Draggable is currently over\n draggingOver: ?DroppableId,\n // the id of a draggable that you are combining with\n combineWith: ?DraggableId,\n // if something else is dragging and you are a combine target, then this is the id of the item that is dragging\n combineTargetFor: ?DraggableId,\n // There are two modes that a drag can be in\n // 'FLUID': everything is done in response to highly granular input (eg mouse)\n // 'SNAP': items snap between positions (eg keyboard);\n mode: ?MovementMode,\n|};\n```\n\n> See our [type guide](/docs/guides/types.md) for more details\n\nThe `children` function is also provided with a small amount of state relating to the current drag state. This can be optionally used to enhance your component. A common use case is changing the appearance of a `` while it is being dragged. Note: if you want to change the cursor to something like `grab` you will need to add the style to the draggable. (See [Extending `DraggableProps.style`](#extending-draggableprops-style) above)\n\n```js\n\n {(provided, snapshot) => {\n const style = {\n backgroundColor: snapshot.isDragging ? 'blue' : 'grey',\n ...provided.draggableProps.style,\n };\n\n return (\n \n Drag me!\n \n );\n }}\n\n```\n\n### 3. rubric: (DraggableRubric)\n\n```js\ntype DraggableRubric = {|\n draggableId: DraggableId,\n type: TypeId,\n source: DraggableLocation,\n|};\n```\n\n`rubric` represents all of the information associated with a ``. `rubric` is helpful for looking up the data associated with your `` when it is not available in the current scope. This is useful when using the ` | renderClone` API. The `rubric` is the same lookup information that is provided to the [`Responder`s](/docs/guides/responders.md).\n\n## Adding an `onClick` handler to a `` or a _drag handle_\n\nYou are welcome to add your own `onClick` handler to a `` or a _drag handle_ (which might be the same element). `onClick` events handlers will always be called if a click occurred. If we are preventing the click, then the `event.defaultPrevented` property will be set to `true`. We prevent click events from occurring when the user was dragging an item. See [sloppy clicks and click prevention](/docs/sensors/mouse.md#sloppy-clicks-and-click-prevention-) for more information.\n\n## Interactive child elements within a ``\n\nIt is possible for your `` to contain interactive elements. By default we block dragging on these elements. By doing this we allow those elements to function in the usual way. Here is the list of interactive elements that we block dragging from by default:\n\n- `input`\n- `button`\n- `textarea`\n- `select`\n- `option`\n- `optgroup`\n- `video`\n- `audio`\n- [`contenteditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable) (any elements that are `contenteditable` or are within a `contenteditable` container)\n\nYou can opt out of this behavior by adding the `disableInteractiveElementBlocking` prop to a ``. However, it is questionable as to whether you should be doing so because it will render the interactive element unusable. If you need to _conditionally_ block dragging from interactive elements you can add the `disableInteractiveElementBlocking` prop to opt out of the default blocking and monkey patch the `dragHandleProps (DragHandleProps)` event handlers to disable dragging as required.\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/api/droppable.md", "content": "# ``\n\n`` components can be **dropped on by a ``**. They also **contain** ``s. A `` must be contained within a ``.\n\n```js\nimport { Droppable } from 'react-beautiful-dnd';\n\n\n {(provided, snapshot) => (\n \n

I am a droppable!

\n {provided.placeholder}\n \n )}\n;\n```\n\n## Droppable props\n\n```js\nimport type { Node } from 'react';\n\ntype Props = {|\n // required\n droppableId: DroppableId,\n // optional\n type?: TypeId,\n mode?: DroppableMode,\n isDropDisabled?: boolean,\n isCombineEnabled?: boolean,\n direction?: Direction,\n ignoreContainerClipping?: boolean,\n renderClone?: DraggableChildrenFn,\n getContainerForClone?: () => HTMLElement,\n children: (DroppableProvided, DroppableStateSnapshot) => Node,\n|};\n\ntype DroppableMode = 'standard' | 'virtual';\ntype Direction = 'horizontal' | 'vertical';\n```\n\n### Required props\n\n> `react-beautiful-dnd` will throw an error if a required prop is not provided\n\n- `droppableId`: A _required_ `DroppableId(string)`. See our [identifiers guide](/docs/guides/identifiers.md) for more information.\n\n### Optional props\n\n- `type`: A `TypeId(string)` that can be used to simply accept only the specified class of ``. ``s always inherit type from the `` they are defined in. For example, if you use the type `PERSON` then it will only allow ``s of type `PERSON` to be dropped on itself. ``s of type `TASK` would not be able to be dropped on a `` with type `PERSON`. If no `type` is provided, it will be set to `'DEFAULT'`.\n- `isDropDisabled`: A flag to control whether or not dropping is currently allowed on the ``. You can use this to implement your own conditional dropping logic. It will default to `false`.\n- `isCombineEnabled`: A flag to control whether or not _all_ the `Draggables` in the list will be able to be **combined** with. It will default to `false`.\n- `direction`: The direction in which items flow in this droppable. Options are `vertical` (default) and `horizontal`.\n- `ignoreContainerClipping`: When a `` is inside a scrollable container its area is constrained so that you can only drop on the part of the `` that you can see. Setting this prop opts out of this behavior, allowing you to drop anywhere on a `` even if it's visually hidden by a scrollable parent. The default behavior is suitable for most cases so odds are you'll never need to use this prop, but it can be useful if you've got very long ``s inside a short scroll container. Keep in mind that it might cause some unexpected behavior if you have multiple ``s inside scroll containers on the same page.\n- `mode`: `standard` (default) or `virtual`. Used to designate a list as a virtual list. See our [virtual lists pattern](/docs/patterns/virtual-lists.md)\n- `renderClone`: used to render a clone (replacement) of the dragging `` while a drag is occurring. See our [reparenting guide](/docs/guides/reparenting.md) for usage details. **A clone must be used for [virtual lists](/docs/patterns/virtual-lists.md).** You can use a clone without using virtual lists\n- `getContainerForClone`: a function that returns the containing element (parent element) for a clone during a drag. See our [reparenting guide](/docs/guides/reparenting.md).\n\n## Children function\n\nThe `React` children of a `` must be a function that returns a [`ReactElement`](https://tylermcginnis.com/react-elements-vs-react-components/).\n\n```js\n\n {(provided, snapshot) => ({\n /*...*/\n })}\n\n```\n\nThe function is provided with two arguments:\n\n### 1. provided: (DroppableProvided)\n\n```js\nimport type { Node } from 'react';\n\ntype DroppableProvided = {|\n innerRef: (?HTMLElement) => void,\n droppableProps: DroppableProps,\n placeholder: ?Node,\n|};\n\ntype DroppableProps = {|\n // used for shared global styles\n 'data-rbd-droppable-context-id': ContextId,\n // Used to lookup. Currently not used for drag and drop lifecycle\n 'data-rbd-droppable-id': DroppableId,\n|};\n```\n\n- `provided.innerRef`: In order for the droppable to function correctly, **you must** bind the `provided.innerRef` to the highest possible DOM node in the `ReactElement`. We do this in order to avoid needing to use `ReactDOM` to look up your DOM node.\n\n> For more information on using `innerRef` see our [using `innerRef` guide](/docs/guides/using-inner-ref.md)\n\n- `provided.placeholder`: This is used to create space in the `` as needed during a drag. This space is needed when a user is dragging over a list that is not the home list. Please be sure to put the placeholder inside of the component for which you have provided the ref. We need to increase the size of the `` itself.\n- `provided.droppableProps (DroppableProps)`: This is an Object that contains properties that need to be applied to a Droppable element. It needs to be applied to the same element that you apply `provided.innerRef` to. It currently contains `data` attributes that we use for styling and lookups.\n\n```js\n\n {(provided, snapshot) => (\n
\n Good to go\n {provided.placeholder}\n
\n )}\n\n```\n\n### 2. snapshot: (DroppableStateSnapshot)\n\n```js\ntype DroppableStateSnapshot = {|\n // Is the Droppable being dragged over?\n isDraggingOver: boolean,\n // What is the id of the draggable that is dragging over the Droppable?\n draggingOverWith: ?DraggableId,\n // What is the id of the draggable that is dragging from this list?\n // Useful for styling the home list when not being dragged over\n draggingFromThisWith: ?DraggableId,\n // Whether or not the placeholder is actively being used.\n // This is useful information when working with virtual lists\n // (See our virtual list pattern)\n isUsingPlaceholder: boolean,\n|};\n```\n\nThe `children` function is also provided with a small amount of state relating to the current drag state. This can be optionally used to enhance your component. A common use case is changing the appearance of a `` while it is being dragged over.\n\n```js\n\n {(provided, snapshot) => (\n \n I am a droppable!\n {provided.placeholder}\n \n )}\n\n```\n\n## Combining\n\n`react-beautiful-dnd` supports the combining of ``s ๐Ÿคฉ\n\n![combining](https://user-images.githubusercontent.com/2182637/48045145-318dc300-e1e3-11e8-83bd-22c9bd44c442.gif)\n\nYou can enable a _combining_ mode for a `` by setting `isCombineEnabled` to `true` on a ``. We have created a [combining guide](/docs/guides/combining.md) to help you implement combining in your lists.\n\n## Adding and removing ``s while dragging\n\nIt is possible to change the ``s in a `` for a limited set of circumstances. We have created a comprehensive [changes while dragging guide](/docs/guides/changes-while-dragging.md)\n\n## Conditionally dropping\n\n- ``s can only be dropped on by ``s who share the same `type`. This is a simple way of allowing conditional dropping. If you do not provide a `type` for the ``, then it will only accept ``s which also have the default type. ``s and ``s both will have their `types` set to `'DEFAULT'` when none is provided. There is currently no way to set multiple `types`, or a `type` wildcard that will accept ``s of multiple any types. This could be added if there is a valid use case.\n- Using the `isDropDisabled` prop you can conditionally allow dropping. This allows you to do arbitrarily complex conditional transitions. This will only be considered if the `type` of the `` matches the `type` of the currently dragging ``.\n- You can disable dropping on a `` altogether by always setting `isDropDisabled` to `true`. You can do this to create a list that is never able to be dropped on, but contains ``s.\n- Technically you do not need to use `type` and do all of your conditional drop logic with the `isDropDisabled` function. The `type` parameter is a convenient shortcut for a common use case.\n\n## Scroll containers\n\nThis library supports dragging within scroll containers (DOM elements that have `overflow: auto;` or `overflow: scroll;`). The **only** supported use cases are:\n\n1. The `` can itself be a scroll container with **no scrollable parents**\n2. The `` has **one scrollable parent**\n\nwhere a _scrollable parent_ refers to a scroll container that is not the window itself.\n\nFor more information see [how we detect scroll containers guide](/docs/guides/how-we-detect-scroll-containers.md)\n\n> We currently only support a single scroll parent. We plan on adding support for [nested scroll containers](https://github.com/atlassian/react-beautiful-dnd/issues/131)\n\n## Empty ``s\n\nIt is recommended that you put a `min-height` on a vertical `` or a `min-width` on a horizontal ``. Otherwise when the `` is empty there may not be enough of a target for `` being dragged with touch or mouse inputs to be _over_ the ``.\n\n## Fixed ``s\n\n`react-beautiful-dnd` has partial support for `` lists that use `position: fixed`. When you start a drag and _any_ list of the same type is `position:fixed` then auto window scrolling will be disabled. This is because our virtual model assumes that when the page scroll changes the position of a `` will shift too. If a manual window scroll is detected then the scroll will be aborted. Scroll container scroll is still allowed. We could improve this support, but it would just be a big effort. Please raise an issue if you would be keen to be a part of this effort โค๏ธ\n\n## Recommended ๐Ÿ  home list styling\n\nWe recommend you style the home list when it is not being dragged over. This makes it easy for a user to see where an item is dragging from. You can use the `snapshot.draggingFromThisWith` value for this. This will be populated in the home list.\n\nIn this example we set the `background-color` of the home list to `pink` when we are dragging over the list. We set the `background-color` of the home list to `blue` when not dragging over the home list.\n\n![no-placeholder-when-over-no-list](https://user-images.githubusercontent.com/2182637/54155390-251ebd00-4498-11e9-8748-ab441795d19f.gif)\n\n```js\nconst getBackgroundColor = (snapshot: DroppableStateSnapshot): string => {\n // Giving isDraggingOver preference\n if (snapshot.isDraggingOver) {\n return 'pink';\n }\n\n // If it is the home list but not dragging over\n if (snapshot.draggingFromThisWith) {\n return 'blue';\n }\n\n // Otherwise use our default background\n return 'white';\n};\n```\n\n## Recommended `` performance optimisation\n\n> ๐Ÿ“บ This optimisation is covered in a [free lesson of our getting started course](https://egghead.io/lessons/react-optimize-performance-in-react-beautiful-dnd-with-shouldcomponentupdate-and-purecomponent)\n\nWhen a user drags over, or stops dragging over, a `` we re-render the `` with an updated `DroppableStateSnapshot > isDraggingOver` value. This is useful for styling the ``. However, by default this will cause a render of all of the children of the `` - which might be 100's of ``s! This can result in a noticeable frame rate drop. To avoid this problem we recommend that you create a component that is the child of a `` whose responsibility it is to avoid rendering children if it is not required.\n\nHere is an example of how you could do this using `class` components:\n\n```js\nimport React, { Component } from 'react';\n\nclass Student extends Component<{ student: Person }> {\n render() {\n // Renders out a draggable student\n }\n}\n\nclass InnerList extends Component<{ students: Person[] }> {\n // do not re-render if the students list has not changed\n shouldComponentUpdate(nextProps: Props) {\n if (this.props.students === nextProps.students) {\n return false;\n }\n return true;\n }\n // You could also not do your own shouldComponentUpdate check and just\n // extend from React.PureComponent\n\n render() {\n return this.props.students.map((student: Person) => (\n \n ));\n }\n}\n\nclass Students extends Component<{ students: Person[] }> {\n render() {\n return (\n \n {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (\n \n \n {provided.placeholder}\n \n )}\n \n );\n }\n}\n```\n\nHere is an example of how you could do this using `function` components:\n\n```js\nimport React from 'react';\n\nfunction Student (props: { student: Person }) {\n // Renders out a draggable student\n}\n\n// do not re-render if the students list reference has not changed\nconst InnerList = React.memo(function InnerList(props: students: Person[]) {\n return props.students.map((student: Person) => (\n \n ));\n});\n\nfunction Students(props: { students: Person[] }) {\n return (\n \n {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (\n \n {/* only re-render if the students array reference changes */}\n \n {provided.placeholder}\n \n )}\n \n );\n}\n```\n\nBy using the approach you are able to make style changes to a `` when it is being dragged over, but you avoid re-rendering all of the children unnecessarily.\n\nWhen moving into a new list, the visible `Draggables` will have their `render` function called directly even with this optimisation. This is because we need to move those `Draggables` out of the way. The `InnerList` optimisation will prevent the `` from calling `render` on the whole list from the top down. This optimisation will prevent the non-visible `Draggables` from having their render function called.\n\nUnfortunately we are [unable to apply this optimisation for you](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9). It is a byproduct of using the render-props pattern.\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/api/reset-server-context.md", "content": "# `resetServerContext`\n\nThe `resetServerContext` function should be used when server side rendering (SSR). It ensures context state does not persist across multiple renders on the server which would result in client/server markup mismatches after multiple requests are rendered on the server.\n\nUse it before calling the server side render method:\n\n```js\nimport { resetServerContext } from 'react-beautiful-dnd';\nimport { renderToString } from 'react-dom/server';\n\n// ...\n\nresetServerContext();\nrenderToString(...);\n```\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/guides/auto-scrolling.md", "content": "# Auto scrolling\n\nWhen a user drags a `` near the edge of a _container_ we automatically scroll the container as we are able to in order make room for the ``.\n\n> A _container_ is either a `` that is scrollable or has a scroll parent - or the `window`.\n\n| Mouse and touch | Keyboard |\n| ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |\n| ![auto-scroll-mouse](https://user-images.githubusercontent.com/2182637/36520373-c9e2cb7e-17e4-11e8-9e93-4d2389d51fa4.gif) | ![auto-scroll-keyboard](https://user-images.githubusercontent.com/2182637/36520375-cc1aa45c-17e4-11e8-842d-94aed694428a.gif) |\n\nIt also works in multi list configurations with all input types\n\n| Mouse and touch | Keyboard |\n| ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |\n| ![auto-scroll-board-mouse](https://user-images.githubusercontent.com/2182637/36520670-57752526-17e6-11e8-95b3-b5a3978a5312.gif) | ![auto-scroll-board-keyboard](https://user-images.githubusercontent.com/2182637/36520650-3d3638f8-17e6-11e8-9cba-1fb439070285.gif) |\n\n## For mouse and touch inputs ๐Ÿญ๐Ÿ“ฑ\n\nWhen the center of a `` gets within a small distance from the edge of a container we start auto scrolling. As the user gets closer to the edge of the container we increase the speed of the auto scroll. This acceleration uses an easing function to exponentially increase the rate of acceleration the closer we move towards the edge. We reach a maximum rate of acceleration a small distance from the true edge of a container so that the user does not need to be extremely precise to obtain the maximum scroll speed. This logic applies for any edge that is scrollable.\n\nThe distances required for auto scrolling are based on a percentage of the height or width of the container for vertical and horizontal scrolling respectively. By using percentages rather than raw pixel values we are able to have a great experience regardless of the size and shape of your containers.\n\n### Mouse wheel and trackpads\n\nIn addition to auto scrolling we also allow users to scroll the window or a `` manually using their _mouse wheel_ or _trackpad_ ๐Ÿ‘Œ\n\n### A note about big ``s\n\nIf the `` is bigger than a container on the axis you are trying to scroll - we will not permit scrolling on that axis. For example, if you have a `` that is longer than the height of the window we will not auto scroll vertically. However, we will still permit scrolling to occur horizontally.\n\n### iOS auto scroll shake ๐Ÿ“ฑ๐Ÿค•\n\nWhen auto scrolling on an iOS browser (webkit) the `` noticeably shakes. This is due to a [bug with webkit](https://bugs.webkit.org/show_bug.cgi?id=181954) that has no known work around. We tried for a long time to work around the issue! If you are interesting in seeing this improved please engage with the [webkit issue](https://bugs.webkit.org/show_bug.cgi?id=181954).\n\n## For keyboard dragging ๐ŸŽนโ™ฟ๏ธ\n\nWe also correctly update the scroll position as required when keyboard dragging. In order to move a `` into the correct position we can do a combination of a `` scroll, `window` scroll and manual movements to ensure the `` ends up in the correct position in response to user movement instructions. This is boss ๐Ÿ”ฅ.\n\nThis is amazing for users with visual impairments as they can correctly move items around in big lists without needing to use mouse positioning.\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/guides/avoiding-image-flickering.md", "content": "# Avoiding image flickering\n\n> Often all you need to do is close your browsers dev tools! See 'HTTP cache headers below'\n\nIf your `` has a image inside of it, then you might notice that sometimes it flashes sometimes. Why is that?\n\nSome behaviours will cause a `` to be **recreated**. This is where the original DOM element is destroyed, and a new DOM element is created. When the new DOM element is inserted into the DOM then the browser will try to load the image from scratch. Image flashing is caused by the gap between the new element being inserted into the DOM and the image being loaded.\n\nThese are the actions that can cause a `` to be recreated:\n\n- [Reparenting](/docs/guides/reparenting.md) a `` (using the cloning api, or using your own portal)\n- Moving `` into a new list. React will not shift the original element. It will recreate one.\n\n## How can you prevent image flickering?\n\nThe big idea is you want to allow the browser to load the image **instantly** when it is recreated.\n\nHere are some ways you can do that:\n\n### HTTP cache headers\n\n> When you open devtools, it can disable HTTP caching. So simply closing devtools might make your image flickering go away! ๐Ÿค˜\n\nGenerally speaking, a browser will not request an image that it already has cached and it will load instantly. You can use the [HTTP cache headers](https://devcenter.heroku.com/articles/increasing-application-performance-with-http-cache-headers) to tell a browser that an image can be cached. Ultimately the browser can decide to re-request the image if it wants to, but that would be an edge case.\n\nWe put together an [example on Glitch](https://glitch.com/~image-flickering) that shows off the impact of using HTTP cache headers.\n\n### Inline your images\n\n[Base64 encode](https://stackoverflow.com/questions/201479/what-is-base-64-encoding-used-for) your images and use that as the source. That way there is no need to talk to the server to get the source.\n\n```diff\n- \n\n+ \n```\n\nYou can use the [webpack `url-loader`](https://github.com/webpack-contrib/url-loader) to help.\n\n#### Drawbacks of this approach\n\n- If the same image is used in multiple places, they all need to be downloaded independently\n- The browser cannot defer image loading\n\nYou will want to keep your image sizes fairly small.\n\n### Really anything else!\n\nThe big idea is that you don't want to be calling the server to refetch an image that has already been fetched. So anything you can use to do client side caching of images is fine. You could even use [service workers](https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker) if you want!\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/guides/browser-focus.md", "content": "# Browser focus\n\n> \"You got to focus on what's real, man\" - [Jake from Adventure time](https://www.youtube.com/watch?v=TFGz6Qvg1CE)\n\n`react-beautiful-dnd` includes logic to maintain browser focus for _drag handles_. This especially important for [keyboard dragging](/docs/sensors/keyboard.md) which requires the dragging item to be focused.\n\n## Terminology reminder ๐Ÿ“–\n\nA `` has a _drag handle_. A _drag handle_ is the part of the `` that controls the dragging of the whole ``. A _drag handle_ can be the same element as the ``\n\n## Drag handle not focused at drag start\n\nIf the _drag handle_ is not focused when a drag starts then **focus is not given** to the dragging item. This is a mirror of the native HTML5 drag and drop behaviour which does not give focus to an item just because it is dragging. You are welcome to call `HTMLElement.focus()` when a drag starts to give it focus, but that is up to you.\n\n## Drag handle is focused at drag start\n\nIf a _drag handle_ has browser focus when a drag starts then `rbd` will try to give focus to the _drag handle_ during a drag and just after a drag ends.\n\nHere is what is done:\n\n- Give focus to a _drag handle_ with a matching `DraggableId` after the drag starts. This might be a different element to the original _drag handle_ if you are [reparenting your ``](/docs/guides/reparenting.md).\n- Give focus to a _drag handle_ with a matching `DraggableId` after the drag ends. Sometimes the original _drag handle_ element is lost during a drag, such as when [reparenting your ``](/docs/guides/reparenting.md), or when moving a `` from one list to another as `React` will recreate the element.\n- If [combining](/docs/guides/combining.md) then focus is given to the combine target after a drag ends. This allows keyboard users to continue to engage with the application without needing to get the focus back to where they where the last interaction was\n\n## Browser testing\n\nFun fact: we test this behaviour using [`cypress.io`](http://cypress.io) to ensure that focus management behaves as we expect\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/guides/changes-while-dragging.md", "content": "# Changes while dragging\n\n> For virtual list support see our [virtual list pattern](/docs/patterns/virtual-lists.md)\n\n> โŒ **This behaviour is only supported in `11.x`**. We do plan on supporting this type of behaviour again in a future `minor` release. We needed to cut this existing behaviour order to get `12.x` across the line. Going forward, tree behaviour will be supported on the latest version. We know this sucks, but we thought it better to move things forward.\n\n`react-beautiful-dnd` supports the addition and removal of ``s during a drag.\n\n## What behaviours does this unlock?\n\n### Lazy loading of list items\n\n> In this example we are adding more ``s to a list we scroll closer to the bottom of the list\n\n![lazy-loading 2018-11-01 17_01_21](https://user-images.githubusercontent.com/2182637/47835395-ec8b1a80-ddf7-11e8-88e6-848848ab4af1.gif)\n\n### Collapsing and expanding groups\n\n> We recommend you use the [`@atlaskit/tree`](https://atlaskit.atlassian.com/packages/core/tree) component for this behaviour\n\n![hover_to_expand](https://user-images.githubusercontent.com/2182637/45996092-3d637100-c0de-11e8-8837-8d66e7cc73b8.gif)\n\n## Rules\n\n> We attempt to print helpful debug information to the `console` if you do not follow these rules in development builds\n\n- You are allowed to add or remove `Draggables` during a drag\n- You can only add or remove `Draggables` that are of the same `type` as the dragging item.\n- Any changes must occur within a `` that is a _scroll container_ (has `overflow: auto` or `overflow: scroll`). _This is prevent accidental shifts to other `Droppables` on the page_\n- The size of the internal content of the _scroll container_ can change, but the outer bounds of the _scroll container_ itself cannot change.\n- You cannot modify the sizes of any existing `` or `` during a drag\n- You cannot add or remove a `` during a drag. _We did this to avoid accidental shifting of other ``s_\n- When an item is removed or added it must be done instantly. You cannot animate the size of the item. You are welcome to animate a property when adding a `` that does not impact the size of the item, such as `opacity`\n\n## ` > onDragUpdate` behavior\n\n- `onDragUpdate` will be called if the `DragUpdate > source > index` of the dragging item has changed as the result of `Draggables` being added or removed before it.\n- `onDragUpdate` will be called if the `DragUpdate > destination` of the dragging item has changed as a result of the addition or removal.\n\n## ` > onDragEnd` behavior\n\n`onDragEnd` will be called with values that are adjusted for any additions or removals of `Draggables` during a drag. This can mean that the `onDragStart: DragStart > source > index` can be different from the `onDragEnd: DropResult > source > index`.\n\n### Sample `onDragEnd` flow\n\n> What is important to note is that the `source` property can change during a drag as a result of dynamic changes.\n\n1. A drag starts.\n\n`onDragStart` is called with:\n\n```js\n{\n draggableId: 'item-1',,\n type: 'TYPE',\n source: {\n droppableId: 'droppable',\n index: 1,\n },\n}\n```\n\n2. The first `` in the list (`item-0`) is removed.\n\n`onDragUpdate` is called with `DragUpdate`:\n\n```diff\n{\n draggableId: 'item-1',,\n type: 'TYPE',\n source: {\n droppableId: 'droppable',\n+ // item-1 is now in index 0 as item-0 is gone\n+ index: 0,\n },\n // adjusted destination\n destination: null,\n}\n```\n\n3. The drag ends\n\n`onDragEnd` is called with `DropResult`:\n\n```diff\n{\n draggableId: 'item-1',,\n type: 'TYPE',\n source: {\n droppableId: 'droppable',\n+ // the source reflects the change\n+ index: 0,\n },\n destination: null,\n reason: 'DROP',\n}\n```\n\n## Drag end while we are patching the virtual model\n\nIf a drag ends after a `` has been added or removed, but we have not finished collecting and patching the _virtual dimension model_ then we will delay the drop until the patch is finished. This is usually only a single frame. The `onDropEnd` callback will be called with a `DropResult` that is correct after the patch.\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/guides/combining.md", "content": "# Combining\n\n> ๐Ÿ‘ถ This feature is still quite young. We wanted to get it out there for people to play with\n\n`react-beautiful-dnd` supports the combining of ``s ๐Ÿคฉ\n\n![combining](https://user-images.githubusercontent.com/2182637/48045145-318dc300-e1e3-11e8-83bd-22c9bd44c442.gif)\n\n> ๐ŸŒฒ If you are looking to build a tree view, we have built one already! [@atlaskit/tree](https://atlaskit.atlassian.com/packages/confluence/tree)\n\n## Setup\n\nIn order to enable combining you need to set `isCombineEnabled` to `true` on a `` and you are good to go!\n\n```js\n\n ...\n\n```\n\n## Behaviour\n\nWhen `isCombineEnabled` is set on a list _any_ item in the list can be combine with. You can toggle `isCombineEnabled` during a drag. `react-beautiful-dnd` works hard to ensure that users are able to combine and reorder within the same list in a way that feels intuitive and natural.\n\n## Current limitations\n\n- No granular control over which items can be combined with within the list. We could move to the `isCombineEnabled` prop from a `` to a `` to allow this sort of customisation. However, in order to ship this huge feature we went a bit simplier to start with\n- A list must be reorderable to also have items that can be combined with. It is not possible for a list to be 'combine only' at this stage\n\n## `` > `DraggableStateSnapshot`\n\n```diff\ntype DraggableStateSnapshot = {|\n isDragging: boolean,\n isDropAnimating: boolean,\n dropAnimation: ?DropAnimation,\n draggingOver: ?DroppableId,\n+ combineWith: ?DraggableId,\n+ combineTargetFor: ?DraggableId,\n mode: ?MovementMode,\n|};\n```\n\nIf you are dragging a `` over another `` in combine mode then the id of the `` being dragged over will be populated in `combineWith`\n\nIf a `` is being dragged over in combine mode then the id of the `` being dragged will be populated in `combineTargetFor`\n\n## `` > `Responders`\n\n`onDragUpdate` and `onDragEnd` will be updated with any changes to a `combine`\n\n> See our [type guide](/docs/guides/types.md) for more details\n\n## Persisting a `combine`\n\nA `combine` result might signify different operations depending on your problem domain.\n\nWhen combining, a simple operation is to just remove the item that was dragging\n\n```js\nfunction onDragEnd(result) {\n // combining item\n if (result.combine) {\n // super simple: just removing the dragging item\n const items: Quote[] = [...this.state.items];\n items.splice(result.source.index, 1);\n setState({ items });\n return;\n }\n}\n```\n\n## Drop animation\n\nOne of the goals of `react-beautiful-dnd` is to create a drag and drop experience that feels physical. This is a bit tricky to achieve in a generic way when it comes to combining two things.\n\nWhat we have gone for out of the box in the following animation:\n\n- move the dragging item onto the center of the item being grouped with\n- fade the opacity of the dragging item down to `0`\n- scale the dragging item down\n\nThis animation attempts to communicate one item _moving into_ another item in a fairly generic way.\n\n![combining](https://user-images.githubusercontent.com/2182637/48045145-318dc300-e1e3-11e8-83bd-22c9bd44c442.gif)\n\nYou are welcome to customise this animation using the information found in our [drop animation guide](/docs/guides/drop-animation.md)\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/guides/common-setup-issues.md", "content": "# Common setup issues\n\nThis is a little guide to help you with some common setup issues\n\n## Check your `console`\n\nFor detectable setup issues we try to log information in the `console` for `development` builds of `react-beautiful-dnd`. If things are not working, first thing to do is check your `console`.\n\n## React version\n\nPlease ensure that you meet our peer dependency version of `React`. Your React version needs to be greater than or equal to `16.8.5`.\n\nIf you want to know what React version you are on take a look at your [`package.json`](https://docs.npmjs.com/files/package.json) or use `console.log(React.version)`.\n\nIf you are not sure if your `package.json` version satisfies `16.8.5` have a read of [npm: about semantic versioning](https://docs.npmjs.com/about-semantic-versioning) and try out the [npm sermver calculator](https://semver.npmjs.com/)\n\n## No duplicate ids\n\n`draggableId` and `droppableId` values must be unique for the whole `` and not just a list.\n\nMore information: [identifiers guide](/docs/guides/identifiers.md)\n\n## `` indexes\n\nRules:\n\n- Must be unique within a `` (no duplicates)\n- Must be consecutive. `[0, 1, 2]` and not `[1, 2, 8]`\n\nIndexes do not need to start from `0` (this is often the case in [virtual lists](/docs/patterns/virtual-lists.md))\n\n[More information](/docs/api/draggable.md#draggable-props)\n\n## No margin collapsing between ``s\n\nThis can happen if you have a `margin-top` as well as a `margin-bottom` on a ``.\n\n[More information](/docs/api/draggable.md#unsupported-margin-setups)\n\n## `key`s for a list of ``\n\nIf you are rendering a list of ``s then it is important that you add a [`key`](https://reactjs.org/docs/lists-and-keys.html) prop to each ``.\n\n```js\nreturn items.map((item, index) => (\n \n {(provided, snapshot) => (\n \n {item.content}\n \n )}\n \n));\n```\n\n[More information](/docs/api/draggable.md)\n\n## Avoid empty lists\n\nWe recommend you set a `min-height` or `min-width` on a `` to ensure that there is a visible drop target when a list is empty\n\nWe go over this in our [Get started with `react-beautiful-dnd` course](https://egghead.io/lessons/react-move-items-between-columns-with-react-beautiful-dnd-using-ondragend)\n\n## Image flickering in a ``\n\nSee our [avoiding image flickering guide](/docs/guides/avoiding-image-flickering.md)\n\n[โ† Back to documentation](/README.md#documentation-)\n" }, { "path": "docs/guides/content-security-policy.md", "content": "# Content Security Policy\n\n> This page is to help you get around the CSP error: \"Refused to apply inline style because it violates the following Content Security Policy directive: \"style-src 'self'\".\"\n> A huge thankyou to [@Zweder](https://github.com/Zweder) for driving this effort\n\nContent Security Policy (CSP) is a way of controlling where a browser can download assets from, as well as what those assets are allowed to do.\n\nBackground reading on CSP\n\n- [Google guide](https://developer.chrome.com/extensions/contentSecurityPolicy)\n- [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)\n- [Helmetjs guide](https://helmetjs.github.io/docs/csp/)\n\n`react-beautiful-dnd` creates a `