Virtual list support

.circleci/config.yml

@@ -133,6 +133,31 @@ jobs:
           path: cypress/videos
       - store_artifacts:
           path: cypress/screenshots
+  test-a11y:
+    docker:
+      - image: circleci/node:10.15.3-browsers
+    working_directory: ~/repo
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - v7-dependencies-{{ checksum "yarn.lock" }}
+
+      # PR's from forks cannot use the dependency cache for performance reasons
+      - run:
+          name: 'Forked PR dependency install'
+          command: yarn
+
+      - run:
+          name: Accessibility Audit
+          command: node browser-test-harness.js yarn test:accessibility
+
+      - store_artifacts:
+          path: test-reports/lighthouse
+
+      - store_test_results:
+          path: test-reports/lighthouse
 workflows:
   version: 2
   build:
@@ -150,3 +175,6 @@ workflows:
       - test-browser:
           requires:
             - install
+      - test-a11y:
+          requires:
+            - install

.eslintrc.js

@@ -82,6 +82,13 @@ module.exports = {
         message:
           'Must use `useLayoutEffect` as the name of the import from `*use-isomorphic-layout-effect` to leverage `eslint-plugin-react-hooks`',
       },
+
+      // No Array.from as it pulls in a large amount of babel helpers
+      {
+        selector: 'MemberExpression[object.name="Array"][property.name="from"]',
+        message:
+          'Not allowing using of Array.from to save kbs. Please use native-with-fallback/from',
+      },
     ],
 
     // Allowing Math.pow rather than forcing `**`
@@ -162,6 +169,6 @@ module.exports = {
     // Enforce rules of hooks
     'react-hooks/rules-of-hooks': 'error',
     // Second argument to hook functions
-    'react-hooks/exhaustive-deps': 'warn',
+    'react-hooks/exhaustive-deps': 'error',
   },
 };

.flowconfig

@@ -15,4 +15,4 @@ suppress_comment= \\(.\\|\n\\)*\\$ExpectError
 include_warnings=true
 # Fixing issue with CircleCI where flow would hang
 # I suspect this is caused by incorrect advertisement of virtual cores
-server.max_workers=1
+# server.max_workers=1

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/react-beautiful-dnd.js": {
-    "bundled": 392081,
-    "minified": 147079,
-    "gzipped": 41340
+    "bundled": 367592,
+    "minified": 138436,
+    "gzipped": 41559
   },
   "dist/react-beautiful-dnd.min.js": {
-    "bundled": 323864,
-    "minified": 116189,
-    "gzipped": 33372
+    "bundled": 316103,
+    "minified": 114634,
+    "gzipped": 34002
   },
   "dist/react-beautiful-dnd.esm.js": {
-    "bundled": 238384,
-    "minified": 123773,
-    "gzipped": 31477,
+    "bundled": 239478,
+    "minified": 124359,
+    "gzipped": 32332,
     "treeshaked": {
       "rollup": {
-        "code": 29975,
-        "import_statements": 793
+        "code": 20714,
+        "import_statements": 818
       },
       "webpack": {
-        "code": 33907
+        "code": 23865
       }
     }
   }

.storybook/.babelrc

@@ -2,9 +2,11 @@
   "presets": [
     "@babel/react",
     "@babel/flow",
-    ["@babel/env", { "modules": false, "loose": true }]
+    ["@babel/env", { "modules": false, "loose": true }],
+    "@emotion/babel-preset-css-prop"
   ],
   "plugins": [
+    "emotion",
     ["@babel/proposal-class-properties", { "loose": true }],
     ["@babel/proposal-object-rest-spread", { "loose": true }]
   ],

.storybook/decorator/global-styles.jsx

@@ -5,7 +5,6 @@ import { colors } from '@atlaskit/theme';
 import { grid } from '../../stories/src/constants';
 
 const GlobalStyles = styled.div`
-  background-color: ${colors.N0};
   min-height: 100vh;
   color: ${colors.N900};
 `;

.storybook/preview-head.html

@@ -0,0 +1,9 @@
+<!--
+
+  Used to ensure there is a lang set on the html attribute for storybook
+  This is important for accessibility scores
+
+-->
+<script>
+  document.documentElement.setAttribute('lang', 'en');
+</script>

README.md

@@ -48,7 +48,8 @@ We have created [a free course on `egghead.io` 🥚](https://egghead.io/courses/
 - Compatible with semantic `<table>` reordering - [table pattern](/docs/patterns/tables.md)
 - [Auto scrolling](/docs/guides/auto-scrolling.md) - automatically scroll containers and the window as required during a drag (even with keyboard 🔥)
 - Custom drag handles - you can drag a whole item by just a part of it
-- Compatible with [`ReactDOM.createPortal`](https://reactjs.org/docs/portals.html) - [portal pattern](/docs/patterns/using-a-portal.md)
+- Able to drag a [clone](TODO) or use a [portal](/docs/patterns/using-a-portal.md)
+- Full [programmatic api 🎮](/docs/api/programmatic.md)
 - 🌲 Tree support through the [`@atlaskit/tree`](https://atlaskit.atlassian.com/packages/core/tree) package
 - A `<Droppable />` list can be a scroll container (without a scrollable parent) or be the child of a scroll container (that also does not have a scrollable parent)
 - 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
@@ -85,6 +86,7 @@ There are a lot of libraries out there that allow for drag and drop interactions
 - [Mouse dragging 🐭](/docs/sensors/mouse.md)
 - [Touch dragging 👉📱](/docs/sensors/touch.md)
 - [Keyboard dragging 🎹♿️](/docs/sensors/keyboard.md)
+- [Programmatic dragging 🎮](/docs/sensors/programmatic.md)
 
 ### API 🏋️‍
 

a11y-audit-parse.js

@@ -0,0 +1,23 @@
+try {
+  const a11yReport = require('./test-reports/lighthouse/a11y.report.json');
+  const a11yScore = a11yReport.categories.accessibility.score;
+  const a11yScoreFormatted = `${a11yScore ? a11yScore * 100 : 0}%`;
+
+  console.log('*************************');
+  console.log('a11y score: ', a11yScoreFormatted);
+  console.log('*************************');
+
+  if (a11yScore === 1) {
+    // success!
+    process.exit(0);
+  } else {
+    // fail build
+    console.log(
+      '\nNOTE: Lighthouse accessibility audit score must be 100% to pass this build step.\n\n',
+    );
+    process.exit(1);
+  }
+} catch (e) {
+  console.error(e);
+  process.exit(1);
+}

babel.config.js

@@ -2,7 +2,6 @@ module.exports = {
   presets: ['@babel/react', '@babel/flow', ['@babel/env', { loose: true }]],
   plugins: [
     ['@babel/proposal-class-properties', { loose: true }],
-    'emotion',
     // used for stripping out the `invariant` messages in production builds
     'dev-expression',
   ],

cypress/integration/focus.spec.js

@@ -0,0 +1,148 @@
+// @flow
+import * as keyCodes from '../../src/view/key-codes';
+import { getHandleSelector, getDraggableSelector } from './util';
+
+beforeEach(() => {
+  cy.visit('/iframe.html?id=board--dragging-a-clone');
+});
+
+it('should not steal focus if not already focused when lifting', () => {
+  // focusing on another handle
+  cy.get(getHandleSelector('1')).focus();
+  cy.focused().should('contain', 'id:1');
+
+  cy.get(getHandleSelector('2'))
+    .as('id:2')
+    .trigger('mousedown', { button: 0 })
+    .trigger('mousemove', {
+      button: 0,
+      clientX: 200,
+      clientY: 300,
+      force: true,
+    });
+
+  // asserting id:2 is now dragging
+  cy.get(getHandleSelector('2')).should(
+    'have.attr',
+    'data-is-dragging',
+    'true',
+  );
+
+  // focus not stolen
+  cy.focused().should('contain', 'id:1');
+
+  cy.get(getHandleSelector('2'))
+    .trigger('mouseup', { force: true })
+    // clone will be unmounting during drop
+    .should('not.exist');
+
+  // getting post clone handle
+  cy.get(getHandleSelector('2')).should(
+    'have.attr',
+    'data-is-dragging',
+    'false',
+  );
+
+  // focus not stolen
+  cy.focused().should('contain', 'id:1');
+});
+
+it('should maintain focus if dragging a clone', () => {
+  // focusing on another handle
+  cy.get(getHandleSelector('2')).focus();
+  cy.focused().should('contain', 'id:2');
+
+  cy.get(getHandleSelector('2')).trigger('keydown', {
+    keyCode: keyCodes.space,
+  });
+
+  // asserting id:2 is now dragging
+  cy.get(getHandleSelector('2')).should(
+    'have.attr',
+    'data-is-dragging',
+    'true',
+  );
+
+  // focus maintained
+  cy.focused().should('contain', 'id:2');
+
+  cy.get(getHandleSelector('2'))
+    .trigger('keydown', { keyCode: keyCodes.arrowRight, force: true })
+    .trigger('keydown', { keyCode: keyCodes.space, force: true })
+    // clone will be unmounting during drop
+    .should('not.exist');
+
+  // getting post clone handle
+  cy.get(getHandleSelector('2'))
+    // no longer dragging
+    .should('have.attr', 'data-is-dragging', 'false')
+    // is in the second column (normally would loose focus moving between lists)
+    .closest(getDraggableSelector('BMO'));
+
+  // focus maintained
+  cy.focused().should('contain', 'id:2');
+});
+
+it('should give focus to a combine target', () => {
+  cy.visit('/iframe.html?id=board--with-combining-and-cloning');
+  cy.get(getHandleSelector('2')).focus();
+  cy.focused().should('contain', 'id:2');
+
+  cy.get(getHandleSelector('2')).trigger('keydown', {
+    keyCode: keyCodes.space,
+  });
+
+  // asserting id:2 is now dragging
+  cy.get(getHandleSelector('2')).should(
+    'have.attr',
+    'data-is-dragging',
+    'true',
+  );
+
+  // focus maintained
+  cy.focused().should('contain', 'id:2');
+
+  cy.get(getHandleSelector('2'))
+    .trigger('keydown', { keyCode: keyCodes.arrowRight, force: true })
+    // combining with item:1
+    .trigger('keydown', { keyCode: keyCodes.arrowUp, force: true })
+    // dropping
+    .trigger('keydown', { keyCode: keyCodes.space, force: true })
+    // clone will be unmounting during drop
+    .should('not.exist');
+
+  // focus giving to item:1 the combine target
+  cy.focused().should('contain', 'id:1');
+});
+
+it('should not give focus to a combine target if source did not have focus at start of drag', () => {
+  cy.visit('/iframe.html?id=board--with-combining-and-cloning');
+  // focusing on something unrelated to the drag
+  cy.get(getHandleSelector('3')).focus();
+
+  cy.get(getHandleSelector('2')).trigger('keydown', {
+    keyCode: keyCodes.space,
+  });
+
+  // asserting id:2 is now dragging
+  cy.get(getHandleSelector('2')).should(
+    'have.attr',
+    'data-is-dragging',
+    'true',
+  );
+
+  // focus not stolen
+  cy.focused().should('contain', 'id:3');
+
+  cy.get(getHandleSelector('2'))
+    .trigger('keydown', { keyCode: keyCodes.arrowRight, force: true })
+    // combining with item:1
+    .trigger('keydown', { keyCode: keyCodes.arrowUp, force: true })
+    // dropping
+    .trigger('keydown', { keyCode: keyCodes.space, force: true })
+    // clone will be unmounting during drop
+    .should('not.exist');
+
+  // focus not given to the combine target
+  cy.focused().should('contain', 'id:3');
+});

cypress/integration/move-between-lists.spec.js

@@ -1,26 +1,27 @@
 // @flow
 import * as keyCodes from '../../src/view/key-codes';
 import { timings } from '../../src/animation';
+import { getDroppableSelector, getHandleSelector } from './util';
 
 beforeEach(() => {
   cy.visit('/iframe.html?id=board--simple');
 });
 
 it('should move between lists', () => {
   // first list has item with id:2
-  cy.get('[data-react-beautiful-dnd-droppable]')
+  cy.get(getDroppableSelector())
     .eq(1)
     .as('first-list')
     .should('contain', 'id:2');
 
   // second list does not have item with id:2
-  cy.get('[data-react-beautiful-dnd-droppable]')
+  cy.get(getDroppableSelector())
     .eq(2)
     .as('second-list')
     .should('not.contain', 'id:2');
 
   cy.get('@first-list')
-    .find('[data-react-beautiful-dnd-drag-handle]')
+    .find(getHandleSelector())
     .first()
     .should('contain', 'id:2')
     .focus()