From 67b96c8d04f64af6b63ae1315f74fc02b5db032b Mon Sep 17 00:00:00 2001 From: Alex Reardon Date: Tue, 12 Mar 2019 10:19:11 +1100 Subject: [PATCH] Merging dev to master (it's happening) (#1158) New animation interaction pattern --- .circleci/config.yml | 62 +- .eslintignore | 1 + .eslintrc.js | 2 +- .flowconfig | 7 +- .gitignore | 3 + .size-snapshot.json | 24 +- .storybook-out | 3 - .storybook/addons.js | 1 - .storybook/compressed-logo-rbd.svg | 23 + .storybook/config.js | 31 +- .storybook/decorator/global-styles.jsx | 17 + .storybook/decorator/pop-iframe.jsx | 142 - .stylelintrc.json | 9 +- CONTRIBUTING.md | 2 +- LICENSE | 2 +- README.md | 1258 +- babel.config.js | 2 +- cypress.json | 3 + cypress/.eslintrc.js | 7 + cypress/fixtures/.gitkeep | 0 .../integration/move-between-lists.spec.js | 38 + cypress/integration/reorder-lists.spec.js | 40 + cypress/integration/reorder.spec.js | 39 + cypress/plugins/index.js | 19 + cypress/support/commands.js | 26 + cypress/support/index.js | 21 + docs/about/accessibility.md | 20 + docs/about/animations.md | 29 + docs/about/browser-support.md | 19 + docs/about/design-principles.md | 56 + docs/about/examples.md | 26 + docs/about/installation.md | 71 + docs/api/drag-drop-context.md | 70 + docs/api/draggable.md | 403 + docs/api/droppable.md | 260 + docs/api/reset-server-context.md | 17 + docs/guides/auto-scrolling.md | 41 + docs/guides/changes-while-dragging.md | 22 +- docs/guides/combining.md | 20 +- docs/guides/common-setup-issues.md | 8 +- docs/guides/developer-warnings.md | 24 + docs/guides/doctype.md | 13 + docs/guides/dragging-svgs.md | 10 +- docs/guides/drop-animation.md | 6 +- .../guides/how-we-detect-scroll-containers.md | 2 + docs/guides/how-we-use-dom-events.md | 26 +- docs/guides/identifiers.md | 10 +- docs/guides/preset-styles.md | 10 +- docs/guides/responders.md | 42 +- docs/guides/screen-reader.md | 30 +- docs/guides/types.md | 4 + docs/guides/using-inner-ref.md | 10 +- docs/patterns/multi-drag.md | 16 +- docs/patterns/tables.md | 18 +- docs/patterns/using-a-portal.md | 18 +- docs/sensors/keyboard.md | 43 + docs/sensors/mouse.md | 28 + docs/sensors/touch.md | 56 + docs/support/community-and-addons.md | 16 + docs/support/engineering-health.md | 45 + docs/{ => support}/media.md | 3 + docs/support/upgrading.md | 13 + flow-typed/custom/cypress.js | 5 + flow-typed/npm/@atlaskit/css-reset_vx.x.x.js | 18 + flow-typed/npm/@babel/core_vx.x.x.js | 4 +- ...plugin-proposal-class-properties_vx.x.x.js | 4 +- ...lugin-transform-modules-commonjs_vx.x.x.js | 4 +- .../@babel/plugin-transform-runtime_vx.x.x.js | 4 +- flow-typed/npm/@babel/preset-env_vx.x.x.js | 4 +- flow-typed/npm/@babel/preset-flow_vx.x.x.js | 4 +- flow-typed/npm/@babel/preset-react_vx.x.x.js | 4 +- .../npm/@babel/runtime-corejs2_vx.x.x.js | 4 +- .../npm/@storybook/addon-options_v4.x.x.js | 165 + flow-typed/npm/@storybook/addons_vx.x.x.js | 81 + flow-typed/npm/@storybook/react_vx.x.x.js | 361 + flow-typed/npm/@storybook/theming_vx.x.x.js | 109 + flow-typed/npm/babel-core_vx.x.x.js | 4 +- flow-typed/npm/babel-eslint_vx.x.x.js | 4 +- flow-typed/npm/babel-jest_vx.x.x.js | 4 +- flow-typed/npm/babel-loader_vx.x.x.js | 4 +- .../npm/babel-plugin-dev-expression_vx.x.x.js | 4 +- .../babel-plugin-styled-components_vx.x.x.js | 4 +- flow-typed/npm/cross-env_vx.x.x.js | 4 +- flow-typed/npm/cypress_vx.x.x.js | 150 + .../npm/enzyme-adapter-react-16_vx.x.x.js | 4 +- flow-typed/npm/enzyme_v3.x.x.js | 77 +- flow-typed/npm/eslint-config-airbnb_vx.x.x.js | 4 +- .../npm/eslint-config-prettier_vx.x.x.js | 18 +- .../npm/eslint-plugin-cypress_vx.x.x.js | 80 + .../npm/eslint-plugin-flowtype_vx.x.x.js | 11 +- flow-typed/npm/eslint-plugin-import_vx.x.x.js | 18 +- flow-typed/npm/eslint-plugin-jest_vx.x.x.js | 32 +- .../npm/eslint-plugin-jsx-a11y_vx.x.x.js | 46 +- .../npm/eslint-plugin-prettier_vx.x.x.js | 4 +- flow-typed/npm/eslint-plugin-react_vx.x.x.js | 4 +- flow-typed/npm/eslint_vx.x.x.js | 11 +- flow-typed/npm/fs-extra_v7.x.x.js | 755 ++ flow-typed/npm/globby_vx.x.x.js | 4 +- flow-typed/npm/jest-junit_vx.x.x.js | 11 +- flow-typed/npm/jest-watch-typeahead_vx.x.x.js | 11 +- .../npm/{jest_v23.x.x.js => jest_v24.x.x.js} | 691 +- flow-typed/npm/markdown-it_vx.x.x.js | 409 + flow-typed/npm/react-redux_v5.x.x.js | 10 +- flow-typed/npm/react-test-renderer_v16.x.x.js | 10 +- flow-typed/npm/rollup-plugin-babel_vx.x.x.js | 4 +- .../npm/rollup-plugin-commonjs_vx.x.x.js | 4 +- flow-typed/npm/rollup-plugin-json_vx.x.x.js | 4 +- .../npm/rollup-plugin-node-resolve_vx.x.x.js | 4 +- .../npm/rollup-plugin-replace_vx.x.x.js | 4 +- .../npm/rollup-plugin-size-snapshot_vx.x.x.js | 4 +- flow-typed/npm/rollup-plugin-strip_vx.x.x.js | 4 +- flow-typed/npm/rollup-plugin-uglify_vx.x.x.js | 4 +- flow-typed/npm/rollup_vx.x.x.js | 4 +- flow-typed/npm/styled-components_v3.x.x.js | 395 + .../npm/stylelint-config-prettier_vx.x.x.js | 4 +- .../stylelint-config-recommended_vx.x.x.js | 4 +- .../npm/stylelint-config-standard_vx.x.x.js | 4 +- ...ylelint-config-styled-components_vx.x.x.js | 4 +- ...lint-processor-styled-components_vx.x.x.js | 4 +- flow-typed/npm/stylelint_vx.x.x.js | 4 +- .../npm/testcafe-reporter-xunit_vx.x.x.js | 4 +- flow-typed/npm/testcafe_vx.x.x.js | 1495 +++ flow-typed/npm/wait-port_vx.x.x.js | 4 +- flow-typed/npm/webpack_v4.x.x.js | 594 + jest.config.js | 10 +- package.json | 90 +- src/{view => }/animation.js | 29 +- src/dev-warning.js | 7 +- src/state/action-creators.js | 26 +- src/state/can-start-drag.js | 4 +- src/state/create-store.js | 2 - .../dimension-marshal-types.js | 6 +- .../dimension-marshal/dimension-marshal.js | 7 + .../while-dragging-publisher.js | 17 +- src/state/droppable/should-use-placeholder.js | 16 +- src/state/droppable/with-placeholder.js | 17 +- .../get-client-border-box-center/index.js | 4 + .../get-page-border-box-center/index.js | 5 + .../when-combining.js | 19 +- .../when-reordering.js | 73 +- .../move-relative-to.js | 1 - src/state/get-combined-item-displacement.js | 32 + src/state/get-displaced-by.js | 9 +- src/state/get-displacement.js | 55 +- .../get-drag-impact/get-combine-impact.js | 37 +- ...-foreign-list.js => get-reorder-impact.js} | 51 +- src/state/get-drag-impact/in-home-list.js | 180 - src/state/get-drag-impact/index.js | 53 +- src/state/get-home-impact.js | 18 - src/state/get-home-on-lift.js | 87 + src/state/middleware/drop-animation-finish.js | 4 +- src/state/middleware/drop/drop-middleware.js | 63 +- .../middleware/drop/get-drop-duration.js | 4 +- src/state/middleware/drop/get-drop-impact.js | 83 + .../drop/get-new-home-client-offset.js | 15 + src/state/middleware/lift.js | 2 +- .../responders/responders-middleware.js | 4 +- src/state/middleware/style.js | 2 +- ...ewport-max-scroll-on-destination-change.js | 73 - src/state/move-in-direction/index.js | 16 +- .../move-cross-axis/get-closest-draggable.js | 32 +- .../move-cross-axis/index.js | 10 +- ...reign-list.js => move-to-new-droppable.js} | 99 +- .../move-to-new-droppable/index.js | 79 - .../move-to-new-droppable/to-home-list.js | 102 - .../without-starting-displacement.js | 31 + .../move-to-next-place/index.js | 6 + .../is-totally-visible-in-new-location.js | 13 +- .../move-to-next-combine/index.js | 7 +- .../move-to-next-index/from-combine.js | 68 +- .../move-to-next-index/from-reorder.js | 17 +- .../move-to-next-index/index.js | 97 +- src/state/no-impact.js | 2 - src/state/patch-dimension-map.js | 11 + src/state/patch-droppable-map.js | 13 +- .../post-reducer/when-moving/refresh-snap.js | 2 + src/state/post-reducer/when-moving/update.js | 21 +- src/state/publish-while-dragging/index.js | 101 +- .../adjust-additions-for-collapsed-home.js | 51 + .../adjust-additions-for-scroll-changes.js | 36 +- ...st-existing-for-additions-and-removals.js} | 82 +- .../update-draggables/index.js | 79 + .../update-draggables/offset-draggable.js | 35 + .../index.js} | 54 +- .../with-no-animated-displacement.js | 4 + ...aceholder.js => recompute-placeholders.js} | 61 +- src/state/reducer.js | 47 +- src/state/remove-draggable-from-list.js | 13 + .../starting-displaced/did-start-displaced.js | 5 + .../recompute.js | 7 + .../speculatively-increase.js | 43 +- src/state/will-displace-forward.js | 18 - src/types.js | 37 +- src/view/animate-in-out/animate-in-out.jsx | 91 + src/view/animate-in-out/index.js | 2 + src/view/context-keys.js | 5 +- src/view/drag-drop-context/check-doctype.js | 2 +- .../drag-drop-context/drag-drop-context.jsx | 17 +- src/view/drag-handle/drag-handle-types.js | 2 + src/view/drag-handle/drag-handle.jsx | 11 +- .../drag-handle/sensor/create-touch-sensor.js | 11 + src/view/drag-handle/sensor/sensor-types.js | 1 + .../drag-handle/util/get-drag-handle-ref.js | 2 +- src/view/draggable/connected-draggable.js | 40 +- src/view/draggable/draggable-types.js | 5 +- src/view/draggable/draggable.jsx | 58 +- .../droppable-dimension-publisher.jsx | 14 +- src/view/droppable/connected-droppable.js | 171 +- src/view/droppable/droppable-types.js | 14 + src/view/droppable/droppable.jsx | 55 +- src/view/placeholder/placeholder-types.js | 1 + src/view/placeholder/placeholder.jsx | 150 +- src/view/style-marshal/get-styles.js | 2 +- stories/1-single-vertical-list.stories.js | 2 +- stories/2-single-horizontal.stories.js | 2 +- stories/assets/bmo.png | Bin 0 -> 20113 bytes stories/assets/finn.png | Bin 0 -> 18002 bytes stories/assets/jake.png | Bin 0 -> 9658 bytes stories/assets/princess.png | Bin 0 -> 21790 bytes stories/src/accessible/blur-context.js | 6 + stories/src/accessible/task-app.jsx | 10 +- stories/src/accessible/task-list.jsx | 35 +- stories/src/accessible/task.jsx | 55 +- stories/src/board/board.jsx | 28 +- stories/src/board/column.jsx | 14 +- stories/src/constants.js | 22 - stories/src/custom-drop/funny-drop.jsx | 7 +- stories/src/custom-drop/no-drop.jsx | 2 +- stories/src/data.js | 41 +- stories/src/dynamic/with-controls.jsx | 2 +- stories/src/fixed-list/fixed-sidebar.jsx | 7 +- stories/src/horizontal/author-app.jsx | 7 +- .../interactive-elements-app.jsx | 13 +- stories/src/multi-drag/column.jsx | 12 +- stories/src/multi-drag/task-app.jsx | 2 +- stories/src/multi-drag/task.jsx | 27 +- stories/src/multiple-horizontal/quote-app.jsx | 7 +- stories/src/multiple-vertical/quote-app.jsx | 7 +- stories/src/portal/portal-app.jsx | 9 +- stories/src/primatives/author-item.jsx | 12 +- stories/src/primatives/author-list.jsx | 7 +- stories/src/primatives/quote-item.jsx | 57 +- stories/src/primatives/quote-list.jsx | 34 +- stories/src/primatives/title.jsx | 7 +- stories/src/table/with-dimension-locking.jsx | 9 +- stories/src/table/with-fixed-columns.jsx | 9 +- stories/src/table/with-portal.jsx | 9 +- stories/src/types.js | 6 + stories/src/vertical-grouped/quote-app.jsx | 9 +- stories/src/vertical-nested/quote-app.jsx | 7 +- stories/src/vertical-nested/quote-list.jsx | 9 +- stories/src/vertical/quote-app.jsx | 10 +- test/browser/simple-list.js | 41 - test/{setup.js => env-setup.js} | 0 test/test-setup.js | 6 + test/unit/docs/content.spec.js | 53 + test/unit/docs/no-broken-links.spec.js | 84 + .../unit/integration/combine-on-start.spec.js | 2 +- .../unit/integration/disable-on-start.spec.js | 2 +- .../integration/reorder-render-sync.spec.js | 5 +- .../integration/responders-timing.spec.js | 3 +- .../fluid-scroller/lifecycle.spec.js | 11 +- .../fluid-scroller/util/drag-to.js | 14 +- .../droppable/should-use-placeholder.spec.js | 91 - .../state/droppable/with-placeholder.spec.js | 104 +- .../get-client-border-box-center.spec.js | 150 +- ...client-from-page-border-box-center.spec.js | 1 - .../get-page-border-box-center.spec.js | 459 - .../combine/when-combining.spec.js | 193 + .../combine/with-droppable-scroll.spec.js | 100 + .../in-home-location.spec.js | 32 + .../over-nothing.spec.js | 32 + .../reorder/in-empty-list.spec.js | 37 + .../reorder/nothing-displaced.spec.js | 127 + .../reorder/there-is-displacement.spec.js | 118 + .../reorder/with-droppable-scroll.spec.js | 87 + test/unit/state/get-displacement.spec.js | 244 - .../did-not-start-displaced.spec.js | 186 + .../started-displaced-before-cutoff.spec.js | 82 + .../started-displaced.spec.js | 249 + .../combine/did-not-start-displaced.spec.js | 422 + .../combine/did-start-displaced.spec.js | 420 + .../combine/is-combine-disabled.spec.js | 93 +- .../combine/moving-backward.spec.js | 374 - .../combine/moving-forward.spec.js | 376 - ...ld-not-combine-with-home-draggable.spec.js | 43 + .../combine/with-droppable-scroll.spec.js | 13 +- .../state/get-drag-impact/is-disabled.spec.js | 23 +- .../get-drag-impact/over-nothing.spec.js | 17 +- .../did-not-start-displaced.spec.js | 182 + .../move-backward-from-last-item.spec.js | 84 + .../move-past-last-item.spec.js | 69 + .../over-foreign-list.spec.js | 576 - .../did-not-start-displaced.spec.js | 186 + .../displacement-visibility.spec.js | 67 +- .../is-behind-start-position.spec.js | 340 - .../is-in-front-of-start-position.spec.js | 395 - .../move-past-last-item.spec.js | 56 + .../over-home-list/started-displaced.spec.js | 182 + .../utils/get-displaced-with-map.js | 8 - .../with-droppable-scroll.spec.js | 83 +- .../get-home-on-lift/get-home-on-lift.spec.js | 60 + .../unit/state/middleware/auto-scroll.spec.js | 5 +- .../dimension-marshal-stopper.spec.js | 27 +- .../middleware/drop-animation-finish.spec.js | 10 +- .../drop/conditionally-animate-drop.spec.js | 207 +- .../state/middleware/drop/drop-impact.spec.js | 171 + .../middleware/drop/drop-position.spec.js | 246 +- .../drop/result-impact-mismatch.spec.js | 113 + test/unit/state/middleware/lift.spec.js | 31 +- .../state/middleware/pending-drop.spec.js | 36 +- .../state/middleware/responders/abort.spec.js | 29 +- .../responders/announcements.spec.js | 13 +- .../state/middleware/responders/drop.spec.js | 68 +- .../middleware/responders/flushing.spec.js | 15 +- .../responders/repeated-use.spec.js | 8 +- .../update-by-dynamic-change.spec.js | 15 +- .../util/get-completed-with-result.js | 21 + test/unit/state/middleware/style.spec.js | 21 +- ...t-max-scroll-on-destination-change.spec.js | 223 - .../get-closest-draggable.spec.js | 424 - .../with-starting-displacement.spec.js | 200 + .../without-starting-displacement.spec.js | 419 + ...ove-relative-to-not-in-destination.spec.js | 16 +- .../to-foreign-list.spec.js | 430 +- .../to-home-list.spec.js | 294 +- .../no-visible-targets-in-list.spec.js | 8 + .../move-in-direction.spec.js | 4 +- .../in-foreign-list.spec.js | 70 +- .../move-to-next-combine/in-home-list.spec.js | 381 +- .../did-not-start-displaced.spec.js | 284 + .../from-combine-with-displaced.spec.js | 238 - .../from-combine-with-non-displaced.spec.js | 229 - .../from-combine/started-displaced.spec.js | 233 + .../from-reorder/in-foreign-list.spec.js | 337 +- .../from-reorder/in-home-list.spec.js | 289 +- .../not-visible-in-droppable.spec.js | 391 +- .../not-visible-in-viewport.spec.js | 380 +- .../no-animated-displacement.spec.js | 114 +- .../nothing-changed.spec.js | 36 + .../recompute-on-lift.spec.js | 89 + ...djust-additions-for-collapsed-home.spec.js | 121 + ...djust-additions-for-scroll-change.spec.js} | 16 +- .../removals.spec.js} | 12 +- ...ing-due-to-additions-and-removals.spec.js} | 42 +- .../droppable-subject-size-change.spec.js | 29 +- .../scroll-change.spec.js} | 17 +- .../unit/state/publish-while-dragging/util.js | 30 +- ...spec.js => recompute-placeholders.spec.js} | 99 +- .../recompute.spec.js | 90 +- .../speculative-displacement.spec.js | 79 +- .../animate-in-out/animate-in-out.spec.js | 171 + .../animate-in-out/child-rendering.spec.js | 78 + .../combine-target-for.spec.js | 54 +- .../connected-draggable/combine-with.spec.js | 24 +- .../view/connected-draggable/dragging.spec.js | 15 +- .../dropping-something-else.spec.js | 49 +- .../dropping-with-result-mismatch.spec.js | 49 + .../view/connected-draggable/dropping.spec.js | 163 +- .../selector-isolation.spec.js | 14 +- .../something-else-is-dragging.spec.js | 259 +- .../connected-draggable/util/get-own-props.js | 1 + .../child-render-behaviour.spec.js | 2 + .../view/connected-droppable/disabled.spec.js | 66 +- .../view/connected-droppable/dragging.spec.js | 89 +- .../view/connected-droppable/dropping.spec.js | 159 +- .../connected-droppable/post-drop.spec.js | 199 + .../selector-isolation.spec.js | 2 +- .../{ => util}/get-own-props.js | 4 +- .../connected-droppable/util/resting-props.js | 12 + .../publish-while-dragging.spec.js | 67 + test/unit/view/drag-drop-context/app.jsx | 4 +- .../drag-drop-context/error-handling.spec.js | 10 +- .../store-management.spec.js | 22 +- test/unit/view/drag-handle/attributes.spec.js | 4 +- ...start-when-something-else-dragging.spec.js | 5 +- .../view/drag-handle/contenteditable.spec.js | 6 + .../disabled-while-capturing.spec.js | 9 +- test/unit/view/drag-handle/disabled.spec.js | 2 +- .../view/drag-handle/focus-management.spec.js | 47 +- .../drag-handle/interactive-elements.spec.js | 2 +- .../view/drag-handle/keyboard-sensor.spec.js | 11 +- .../view/drag-handle/mouse-sensor.spec.js | 11 +- .../drag-handle/nested-drag-handles.spec.js | 12 +- .../view/drag-handle/throw-if-svg.spec.js | 10 +- .../view/drag-handle/touch-sensor.spec.js | 211 +- .../view/drag-handle/util/basic-context.js | 9 +- test/unit/view/drag-handle/util/controls.js | 24 +- test/unit/view/drag-handle/util/wrappers.js | 4 +- .../view/drag-handle/window-bindings.spec.js | 2 +- .../draggable-dimension-publisher.spec.js | 10 +- .../draggable/drag-handle-connection.spec.js | 2 +- test/unit/view/draggable/is-dragging.spec.js | 18 +- test/unit/view/draggable/is-dropping.spec.js | 72 +- test/unit/view/draggable/mounting.spec.js | 2 +- test/unit/view/draggable/secondary.spec.js | 3 +- test/unit/view/draggable/util/get-props.js | 1 + test/unit/view/draggable/util/lose-focus.js | 2 +- test/unit/view/draggable/util/mount.js | 4 +- .../forced-scroll.spec.js | 4 +- .../publishing.spec.js | 32 +- .../recollection.spec.js | 59 +- .../droppable/dragging-but-not-over.spec.js | 46 + .../unit/view/droppable/dragging-over.spec.js | 49 +- .../home-list-placeholder-cleanup.spec.js | 59 + .../placeholder-for-foreign-list.spec.js | 28 - ...c.js => placeholder-setup-warning.spec.js} | 20 +- test/unit/view/droppable/placeholder.spec.js | 80 + .../throw-if-invalid-own-props.spec.js | 2 +- .../update-max-window-scroll.spec.js | 69 + test/unit/view/droppable/util/get-props.js | 42 +- test/unit/view/droppable/util/mount.js | 27 +- .../view/placeholder/animated-mount.spec.js | 90 + test/unit/view/placeholder/on-close.spec.js | 76 + .../placeholder/on-transition-end.spec.js | 58 + test/unit/view/placeholder/util/data.js | 6 + test/unit/view/placeholder/util/expect.js | 21 + .../placeholder/util/get-placeholder-style.js | 7 + test/utils/after-point.js | 7 + test/utils/before-point.js | 7 + test/utils/clone-impact.js | 5 + test/utils/dimension-marshal.js | 5 +- test/utils/dimension.js | 203 +- test/utils/dragging-state.js | 16 +- test/utils/force-update.js | 4 +- test/utils/get-context-options.js | 24 +- .../get-not-animated-displacement.js | 8 + .../get-not-visible-displacement.js | 2 +- .../get-visible-displacement.js | 2 +- test/utils/get-simple-state-preset.js | 72 +- test/utils/no-on-lift.js | 13 + test/utils/preset-action-args.js | 89 +- test/utils/user-input-util.js | 6 +- yarn.lock | 10204 ++++++++-------- 434 files changed, 23318 insertions(+), 15920 deletions(-) delete mode 100644 .storybook-out delete mode 100644 .storybook/addons.js create mode 100644 .storybook/compressed-logo-rbd.svg create mode 100644 .storybook/decorator/global-styles.jsx delete mode 100644 .storybook/decorator/pop-iframe.jsx create mode 100644 cypress.json create mode 100644 cypress/.eslintrc.js create mode 100644 cypress/fixtures/.gitkeep create mode 100644 cypress/integration/move-between-lists.spec.js create mode 100644 cypress/integration/reorder-lists.spec.js create mode 100644 cypress/integration/reorder.spec.js create mode 100644 cypress/plugins/index.js create mode 100644 cypress/support/commands.js create mode 100644 cypress/support/index.js create mode 100644 docs/about/accessibility.md create mode 100644 docs/about/animations.md create mode 100644 docs/about/browser-support.md create mode 100644 docs/about/design-principles.md create mode 100644 docs/about/examples.md create mode 100644 docs/about/installation.md create mode 100644 docs/api/drag-drop-context.md create mode 100644 docs/api/draggable.md create mode 100644 docs/api/droppable.md create mode 100644 docs/api/reset-server-context.md create mode 100644 docs/guides/auto-scrolling.md create mode 100644 docs/guides/developer-warnings.md create mode 100644 docs/guides/doctype.md create mode 100644 docs/sensors/keyboard.md create mode 100644 docs/sensors/mouse.md create mode 100644 docs/sensors/touch.md create mode 100644 docs/support/community-and-addons.md create mode 100644 docs/support/engineering-health.md rename docs/{ => support}/media.md (95%) create mode 100644 docs/support/upgrading.md create mode 100644 flow-typed/custom/cypress.js create mode 100644 flow-typed/npm/@atlaskit/css-reset_vx.x.x.js create mode 100644 flow-typed/npm/@storybook/addon-options_v4.x.x.js create mode 100644 flow-typed/npm/@storybook/addons_vx.x.x.js create mode 100644 flow-typed/npm/@storybook/react_vx.x.x.js create mode 100644 flow-typed/npm/@storybook/theming_vx.x.x.js create mode 100644 flow-typed/npm/cypress_vx.x.x.js create mode 100644 flow-typed/npm/eslint-plugin-cypress_vx.x.x.js create mode 100644 flow-typed/npm/fs-extra_v7.x.x.js rename flow-typed/npm/{jest_v23.x.x.js => jest_v24.x.x.js} (67%) create mode 100644 flow-typed/npm/markdown-it_vx.x.x.js create mode 100644 flow-typed/npm/styled-components_v3.x.x.js create mode 100644 flow-typed/npm/testcafe_vx.x.x.js create mode 100644 flow-typed/npm/webpack_v4.x.x.js rename src/{view => }/animation.js (61%) create mode 100644 src/state/get-combined-item-displacement.js rename src/state/get-drag-impact/{in-foreign-list.js => get-reorder-impact.js} (60%) delete mode 100644 src/state/get-drag-impact/in-home-list.js delete mode 100644 src/state/get-home-impact.js create mode 100644 src/state/get-home-on-lift.js create mode 100644 src/state/middleware/drop/get-drop-impact.js delete mode 100644 src/state/middleware/update-viewport-max-scroll-on-destination-change.js rename src/state/move-in-direction/move-cross-axis/{move-to-new-droppable/to-foreign-list.js => move-to-new-droppable.js} (51%) delete mode 100644 src/state/move-in-direction/move-cross-axis/move-to-new-droppable/index.js delete mode 100644 src/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-home-list.js create mode 100644 src/state/move-in-direction/move-cross-axis/without-starting-displacement.js create mode 100644 src/state/patch-dimension-map.js create mode 100644 src/state/publish-while-dragging/update-draggables/adjust-additions-for-collapsed-home.js rename src/state/publish-while-dragging/{ => update-draggables}/adjust-additions-for-scroll-changes.js (66%) rename src/state/publish-while-dragging/{get-draggable-map.js => update-draggables/adjust-existing-for-additions-and-removals.js} (74%) create mode 100644 src/state/publish-while-dragging/update-draggables/index.js create mode 100644 src/state/publish-while-dragging/update-draggables/offset-draggable.js rename src/state/publish-while-dragging/{adjust-modified-droppables.js => update-droppables/index.js} (74%) rename src/state/{get-dimension-map-with-placeholder.js => recompute-placeholders.js} (56%) create mode 100644 src/state/remove-draggable-from-list.js create mode 100644 src/state/starting-displaced/did-start-displaced.js delete mode 100644 src/state/will-displace-forward.js create mode 100644 src/view/animate-in-out/animate-in-out.jsx create mode 100644 src/view/animate-in-out/index.js create mode 100644 stories/assets/bmo.png create mode 100644 stories/assets/finn.png create mode 100644 stories/assets/jake.png create mode 100644 stories/assets/princess.png create mode 100644 stories/src/accessible/blur-context.js delete mode 100644 test/browser/simple-list.js rename test/{setup.js => env-setup.js} (100%) create mode 100644 test/test-setup.js create mode 100644 test/unit/docs/content.spec.js create mode 100644 test/unit/docs/no-broken-links.spec.js delete mode 100644 test/unit/state/droppable/should-use-placeholder.spec.js delete mode 100644 test/unit/state/get-center-from-impact/get-page-border-box-center.spec.js create mode 100644 test/unit/state/get-center-from-impact/get-page-border-box-center/combine/when-combining.spec.js create mode 100644 test/unit/state/get-center-from-impact/get-page-border-box-center/combine/with-droppable-scroll.spec.js create mode 100644 test/unit/state/get-center-from-impact/get-page-border-box-center/in-home-location.spec.js create mode 100644 test/unit/state/get-center-from-impact/get-page-border-box-center/over-nothing.spec.js create mode 100644 test/unit/state/get-center-from-impact/get-page-border-box-center/reorder/in-empty-list.spec.js create mode 100644 test/unit/state/get-center-from-impact/get-page-border-box-center/reorder/nothing-displaced.spec.js create mode 100644 test/unit/state/get-center-from-impact/get-page-border-box-center/reorder/there-is-displacement.spec.js create mode 100644 test/unit/state/get-center-from-impact/get-page-border-box-center/reorder/with-droppable-scroll.spec.js delete mode 100644 test/unit/state/get-displacement.spec.js create mode 100644 test/unit/state/get-displacement/did-not-start-displaced.spec.js create mode 100644 test/unit/state/get-displacement/started-displaced-before-cutoff.spec.js create mode 100644 test/unit/state/get-displacement/started-displaced.spec.js create mode 100644 test/unit/state/get-drag-impact/combine/did-not-start-displaced.spec.js create mode 100644 test/unit/state/get-drag-impact/combine/did-start-displaced.spec.js delete mode 100644 test/unit/state/get-drag-impact/combine/moving-backward.spec.js delete mode 100644 test/unit/state/get-drag-impact/combine/moving-forward.spec.js create mode 100644 test/unit/state/get-drag-impact/combine/should-not-combine-with-home-draggable.spec.js create mode 100644 test/unit/state/get-drag-impact/reorder/over-foreign-list/did-not-start-displaced.spec.js create mode 100644 test/unit/state/get-drag-impact/reorder/over-foreign-list/move-backward-from-last-item.spec.js create mode 100644 test/unit/state/get-drag-impact/reorder/over-foreign-list/move-past-last-item.spec.js delete mode 100644 test/unit/state/get-drag-impact/reorder/over-foreign-list/over-foreign-list.spec.js create mode 100644 test/unit/state/get-drag-impact/reorder/over-home-list/did-not-start-displaced.spec.js delete mode 100644 test/unit/state/get-drag-impact/reorder/over-home-list/is-behind-start-position.spec.js delete mode 100644 test/unit/state/get-drag-impact/reorder/over-home-list/is-in-front-of-start-position.spec.js create mode 100644 test/unit/state/get-drag-impact/reorder/over-home-list/move-past-last-item.spec.js create mode 100644 test/unit/state/get-drag-impact/reorder/over-home-list/started-displaced.spec.js delete mode 100644 test/unit/state/get-drag-impact/reorder/over-home-list/utils/get-displaced-with-map.js create mode 100644 test/unit/state/get-home-on-lift/get-home-on-lift.spec.js create mode 100644 test/unit/state/middleware/drop/drop-impact.spec.js create mode 100644 test/unit/state/middleware/drop/result-impact-mismatch.spec.js create mode 100644 test/unit/state/middleware/responders/util/get-completed-with-result.js delete mode 100644 test/unit/state/middleware/update-viewport-max-scroll-on-destination-change.spec.js delete mode 100644 test/unit/state/move-in-direction/move-cross-axis/get-closest-draggable.spec.js create mode 100644 test/unit/state/move-in-direction/move-cross-axis/get-closest-draggable/with-starting-displacement.spec.js create mode 100644 test/unit/state/move-in-direction/move-cross-axis/get-closest-draggable/without-starting-displacement.spec.js create mode 100644 test/unit/state/move-in-direction/move-to-next-place/move-to-next-index/from-combine/did-not-start-displaced.spec.js delete mode 100644 test/unit/state/move-in-direction/move-to-next-place/move-to-next-index/from-combine/from-combine-with-displaced.spec.js delete mode 100644 test/unit/state/move-in-direction/move-to-next-place/move-to-next-index/from-combine/from-combine-with-non-displaced.spec.js create mode 100644 test/unit/state/move-in-direction/move-to-next-place/move-to-next-index/from-combine/started-displaced.spec.js create mode 100644 test/unit/state/publish-while-dragging/nothing-changed.spec.js create mode 100644 test/unit/state/publish-while-dragging/recompute-on-lift.spec.js create mode 100644 test/unit/state/publish-while-dragging/update-draggables/adjust-additions-for-collapsed-home.spec.js rename test/unit/state/publish-while-dragging/{shift-collected-draggables.spec.js => update-draggables/adjust-additions-for-scroll-change.spec.js} (88%) rename test/unit/state/publish-while-dragging/{removing-draggables.spec.js => update-draggables/removals.spec.js} (71%) rename test/unit/state/publish-while-dragging/{shift-existing-draggables.spec.js => update-draggables/shift-existing-due-to-additions-and-removals.spec.js} (88%) rename test/unit/state/publish-while-dragging/{ => update-droppables}/droppable-subject-size-change.spec.js (89%) rename test/unit/state/publish-while-dragging/{droppable-scroll-change.spec.js => update-droppables/scroll-change.spec.js} (86%) rename test/unit/state/{get-dimension-map-with-placeholder.spec.js => recompute-placeholders.spec.js} (65%) create mode 100644 test/unit/view/animate-in-out/animate-in-out.spec.js create mode 100644 test/unit/view/animate-in-out/child-rendering.spec.js create mode 100644 test/unit/view/connected-draggable/dropping-with-result-mismatch.spec.js create mode 100644 test/unit/view/connected-droppable/post-drop.spec.js rename test/unit/view/connected-droppable/{ => util}/get-own-props.js (66%) create mode 100644 test/unit/view/connected-droppable/util/resting-props.js create mode 100644 test/unit/view/droppable/dragging-but-not-over.spec.js create mode 100644 test/unit/view/droppable/home-list-placeholder-cleanup.spec.js delete mode 100644 test/unit/view/droppable/placeholder-for-foreign-list.spec.js rename test/unit/view/droppable/{placeholder-setup-issue.spec.js => placeholder-setup-warning.spec.js} (83%) create mode 100644 test/unit/view/droppable/placeholder.spec.js create mode 100644 test/unit/view/droppable/update-max-window-scroll.spec.js create mode 100644 test/unit/view/placeholder/animated-mount.spec.js create mode 100644 test/unit/view/placeholder/on-close.spec.js create mode 100644 test/unit/view/placeholder/on-transition-end.spec.js create mode 100644 test/unit/view/placeholder/util/data.js create mode 100644 test/unit/view/placeholder/util/expect.js create mode 100644 test/unit/view/placeholder/util/get-placeholder-style.js create mode 100644 test/utils/after-point.js create mode 100644 test/utils/before-point.js create mode 100644 test/utils/clone-impact.js create mode 100644 test/utils/get-displacement/get-not-animated-displacement.js rename test/utils/{ => get-displacement}/get-not-visible-displacement.js (68%) rename test/utils/{ => get-displacement}/get-visible-displacement.js (68%) create mode 100644 test/utils/no-on-lift.js diff --git a/.circleci/config.yml b/.circleci/config.yml index ec583bfe6d..f99e877a82 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -11,9 +11,9 @@ jobs: - restore_cache: keys: # Restore cached node_modules - - v1-dependencies-{{ checksum "yarn.lock" }} + - v3-dependencies-{{ checksum "yarn.lock" }} # fallback to using the latest cache if no exact match is found - - v1-dependencies- + - v3-dependencies- - run: name: Add CI global modules @@ -43,7 +43,7 @@ jobs: - save_cache: paths: - node_modules - key: v1-dependencies-{{ checksum "yarn.lock" }} + key: v3-dependencies-{{ checksum "yarn.lock" }} validate: docker: - image: circleci/node:8.11.3-browsers @@ -53,7 +53,7 @@ jobs: - restore_cache: keys: - - v1-dependencies-{{ checksum "yarn.lock" }} + - v3-dependencies-{{ checksum "yarn.lock" }} - run: # PR's from forks cannot use the dependency cache for performance reasons @@ -63,7 +63,7 @@ jobs: - run: name: Lint + Typecheck command: yarn validate - test: + test-unit: docker: - image: circleci/node:8.11.3-browsers working_directory: ~/repo @@ -72,7 +72,7 @@ jobs: - restore_cache: keys: - - v1-dependencies-{{ checksum "yarn.lock" }} + - v3-dependencies-{{ checksum "yarn.lock" }} - run: # PR's from forks cannot use the dependency cache for performance reasons @@ -87,18 +87,7 @@ jobs: - store_test_results: path: test-reports/junit - - - run: - name: Browser Suite - command: node browser-test-harness.js yarn test:browser - - - store_test_results: - path: test-reports/browser - - - store_artifacts: - path: .storybook-out - destination: storybook-out - bundle-test: + test-bundle: docker: - image: circleci/node:8.11.3-browsers working_directory: ~/repo @@ -107,17 +96,43 @@ jobs: - restore_cache: keys: - - v1-dependencies-{{ checksum "yarn.lock" }} + - v3-dependencies-{{ checksum "yarn.lock" }} + # PR's from forks cannot use the dependency cache for performance reasons - run: - # PR's from forks cannot use the dependency cache for performance reasons name: 'Forked PR dependency install' command: yarn - run: name: Check Bundle Size command: yarn run bundle-size:check + test-browser: + docker: + # Single Docker container with Node 8 and Cypress dependencies + # https://github.com/cypress-io/circleci-orb/blob/master/src/orb.yml + - image: cypress/base:8 + working_directory: ~/repo + steps: + - checkout + + - restore_cache: + keys: + - v3-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: 'Run cypress' + command: node browser-test-harness.js yarn test:browser:ci + + # store videos and screenshots (if any) as CI artifacts + - store_artifacts: + path: cypress/videos + - store_artifacts: + path: cypress/screenshots workflows: version: 2 build: @@ -126,9 +141,12 @@ workflows: - validate: requires: - install - - test: + - test-unit: + requires: + - install + - test-bundle: requires: - install - - bundle-test: + - test-browser: requires: - install diff --git a/.eslintignore b/.eslintignore index 278e582071..8004ac6e73 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,4 +2,5 @@ dist/ flow-typed/ site/ +coverage/ babel.config.js diff --git a/.eslintrc.js b/.eslintrc.js index c9c7acdd50..57eb2b1271 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -9,7 +9,7 @@ module.exports = { 'plugin:prettier/recommended', ], parser: 'babel-eslint', - plugins: ['prettier', 'flowtype', 'react', 'import', 'jest'], + plugins: ['prettier', 'flowtype', 'emotion', 'react', 'import', 'jest'], env: { es6: true, browser: true, diff --git a/.flowconfig b/.flowconfig index da32d74e10..43eb1b40c9 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,4 +1,9 @@ -[ignore] +[untyped] +# Issue with atlaskit/theme typing +.*/node_modules/@atlaskit/theme + +[libs] +./flow-typed/custom/ [options] diff --git a/.gitignore b/.gitignore index b8baa60a64..6761f35121 100644 --- a/.gitignore +++ b/.gitignore @@ -20,6 +20,9 @@ coverage/ # test reports test-reports/ +# test videos +cypress/videos/ + # storybook .storybook.out .cache/ diff --git a/.size-snapshot.json b/.size-snapshot.json index 9ff8c3b6fb..ec67a8043a 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,25 +1,25 @@ { "dist/react-beautiful-dnd.js": { - "bundled": 347275, - "minified": 134225, - "gzipped": 39798 + "bundled": 355996, + "minified": 138322, + "gzipped": 40545 }, "dist/react-beautiful-dnd.min.js": { - "bundled": 295057, - "minified": 109593, - "gzipped": 31944 + "bundled": 302438, + "minified": 113232, + "gzipped": 32713 }, "dist/react-beautiful-dnd.esm.js": { - "bundled": 228983, - "minified": 120746, - "gzipped": 30051, + "bundled": 236773, + "minified": 125151, + "gzipped": 31183, "treeshaked": { "rollup": { - "code": 81922, - "import_statements": 846 + "code": 85436, + "import_statements": 832 }, "webpack": { - "code": 84599 + "code": 88124 } } } diff --git a/.storybook-out b/.storybook-out deleted file mode 100644 index c35ffcccf2..0000000000 --- a/.storybook-out +++ /dev/null @@ -1,3 +0,0 @@ -yarn run v1.2.1 -$ start-storybook -p 9002 & opn http://localhost:9002 -Done in 0.35s. diff --git a/.storybook/addons.js b/.storybook/addons.js deleted file mode 100644 index 8b4d35d73e..0000000000 --- a/.storybook/addons.js +++ /dev/null @@ -1 +0,0 @@ -import '@storybook/addon-options/register'; diff --git a/.storybook/compressed-logo-rbd.svg b/.storybook/compressed-logo-rbd.svg new file mode 100644 index 0000000000..3e295c61d0 --- /dev/null +++ b/.storybook/compressed-logo-rbd.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + diff --git a/.storybook/config.js b/.storybook/config.js index ac51458216..83bb3686ed 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,20 +1,29 @@ import React from 'react'; -import { configure, addDecorator } from '@storybook/react'; -import { withOptions } from '@storybook/addon-options'; -import PopIframeDecorator from './decorator/pop-iframe'; +import { addParameters, configure, addDecorator } from '@storybook/react'; +import { create } from '@storybook/theming'; +import GlobalStylesDecorator from './decorator/global-styles'; // adding css reset - storybook includes a css loader import '@atlaskit/css-reset'; +import { colors } from '@atlaskit/theme'; +import logo from './compressed-logo-rbd.svg'; import { version } from '../package.json'; -addDecorator( - withOptions({ - name: 'react-beautiful-dnd', - url: 'https://github.com/atlassian/react-beautiful-dnd', - showAddonPanel: false, - }), -); +const theme = create({ + brandImage: logo, + brandName: 'react-beautiful-dnd', + brandUrl: 'https://github.com/atlassian/react-beautiful-dnd', +}); -addDecorator(PopIframeDecorator); +addParameters({ + options: { + // currently not using any addons + showPanel: false, + theme, + }, +}); + +// Using theme would be good for this, but it looks like theme is just for the chrome around the story +addDecorator(GlobalStylesDecorator); // automatically import all files ending in *.stories.js const req = require.context('../stories/', true, /.stories.js$/); diff --git a/.storybook/decorator/global-styles.jsx b/.storybook/decorator/global-styles.jsx new file mode 100644 index 0000000000..2f3a661320 --- /dev/null +++ b/.storybook/decorator/global-styles.jsx @@ -0,0 +1,17 @@ +// @flow +import React from 'react'; +import styled from '@emotion/styled'; +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}; +`; + +const GlobalStylesDecorator = (storyFn: Function) => ( + {storyFn()} +); + +export default GlobalStylesDecorator; diff --git a/.storybook/decorator/pop-iframe.jsx b/.storybook/decorator/pop-iframe.jsx deleted file mode 100644 index fc03cddfc8..0000000000 --- a/.storybook/decorator/pop-iframe.jsx +++ /dev/null @@ -1,142 +0,0 @@ -// @flow -import React, { type Node } from 'react'; -import styled from 'styled-components'; - -type Props = { - children: Node, -}; - -const ButtonBox = styled.div` - display: flex; - position: fixed; - left: 0; - bottom: 0; - margin: 8px; -`; - -const Button = styled.button` - padding: 8px; - font-size: 16px; - - :hover { - cursor: pointer; - } -`; - -const isSSR: boolean = typeof window === 'undefined'; - -const canPopOutOfIframe: boolean = (() => { - if (isSSR) { - return false; - } - try { - // this can violate a same origin policy if on a different domain - return window.self !== window.top; - } catch (e) { - // cannot pop out as it would violate the same origin policy - return false; - } -})(); - -const canPopIntoIframe: boolean = (() => { - if (isSSR || canPopOutOfIframe) { - return false; - } - // already the top level - try { - return window.self === window.top; - } catch (e) { - // would have been in an iframe that we cannot leave - this codepath should never be hit - return false; - } -})(); - -const canPop: boolean = canPopIntoIframe || canPopOutOfIframe; - -type State = {| - isLoading: boolean, - isHidden: boolean, -|}; - -class PopIframe extends React.Component { - state: State = { - isLoading: false, - isHidden: false, - }; - - getButton = (): ?Node => { - if (this.state.isHidden) { - return null; - } - - if (!canPop) { - return null; - } - - const action: Node = canPopOutOfIframe ? ( -