[ { "path": ".gitignore", "content": "node_modules\ndist\n\n**/.DS_Store\n\n.vscode/*\n.idea\n.iml\n*.code-workspace\n\n.env\nyarn-debug.log*\nyarn-error.log*\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\npledge to making participation in our project and our community a harassment-free experience for\neveryone, regardless of age, body size, disability, ethnicity, gender identity and expression, level\nof 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\n 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\nexpected to take appropriate and fair corrective action in response to any instances of unacceptable\nbehavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits,\ncode, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or\nto ban temporarily or permanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces when an individual is\nrepresenting the project or its community. Examples of representing a project or community include\nusing an official project e-mail address, posting via an official social media account, or acting as\nan appointed representative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting\nthe project team at areardon@atlassian.com. The project team will review and investigate all\ncomplaints, and will respond in a way that it deems appropriate to the circumstances. The project\nteam is obligated to maintain confidentiality with regard to the reporter of an incident. Further\ndetails 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\ntemporary 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\n[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\nThank you for considering contributing to Pragmatic drag and drop!\n\nAt this stage, we are not accepting code contributions. This repo is currently a one-way partial\nmirror from an internal monorepo at Atlassian. We might change this repo to be a two way mirror in\nthe future, at which point code contributions would be possible.\n\nAt this stage contributions could take the following forms:\n\nLeveraging Github issues for:\n\n- Suggestions\n- Bug reports\n- Discussions\n\nYou _can_ raise a pull request if you would spot a bug / improvement and making a pull request would\nbe a helpful way to demonstrate things. We will be able make our own changes to Pragmatic drag and\ndrop, as inspired by these pull requests, but unfortunately at this stage we cannot directly merge\nthose changes (nor attribute them properly in the Git history).\n" }, { "path": "LICENSE", "content": "Copyright 2024 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": "
\n\n \n \n\n\n_Fast drag and drop for any experience on any tech stack_\n\n[📖 **Documentation**](https://atlassian.design/components/pragmatic-drag-and-drop) | [🤹 **Examples**](https://atlassian.design/components/pragmatic-drag-and-drop/examples) | [🎥 **How it works**](https://www.youtube.com/watch?v=5SQkOyzZLHM)\n\n![Show case of some examples](https://github.com/alexreardon/files/assets/2182637/2b533f88-bf3f-402f-93f2-74a466918ac4)\n\n
\n\n
\n\n## About\n\nPragmatic drag and drop is a low level drag and drop toolchain that enables safe and successful usage of the browsers built in drag and drop functionality. Pragmatic drag and drop can be used with any view layer ([`react`](https://react.dev/), [`svelte`](https://svelte.dev/), [`vue`](https://vuejs.org/), [`angular`](https://angular.io/) and so on). Pragmatic drag and drop is powering some of the biggest products on the web, including [Trello](https://trello.com), [Jira](https://www.atlassian.com/software/jira) and [Confluence](https://www.atlassian.com/software/confluence).\n\n
\n Capabilities\n\nPragmatic drag and drop consists of a few high level pieces:\n\n1. **Low level drag and drop behavior**\n\nPragmatic drag and drop contains a core package, and a number of optional packages, that provide you the pieces to create _any_ drag and drop experience.\n\nThese pieces are unopinionated about visual language or accessibility, and have no dependency on the Atlassian Design System.\n\n- _Tiny_: ~`4.7kB` core\n- _Incremental_: Only use the pieces that you need\n- _Headless_: Full rendering and style control\n- _Framework agnostic_: Works with any frontend framework\n- _Deferred compatible_: Delay the loading the core packages and optional packages in order to further improve page load speeds\n- _Flexible_: create any experience you want, make any changes you want during a drag operation.\n- _Works everywhere_: Full feature support in Firefox, Safari, and Chrome, iOS and Android\n- _Virtualization support_: create any virtual experience you want!\n\n2. **Optional visual outputs**\n\nWe have created optional visual outputs (eg our drop indicator) to make it super fast for us to build consistent Atlassian user experiences. Non Atlassian consumers are welcome to use these outputs, create their own that copy the visual styling, or go a totally different direction.\n\n3. **Optional assistive technology controls**\n\nNot all users can achieve pointer based drag and drop experiences. In order to achieve fantastic experiences for assistive technology users, we provide a toolchain to allow you to quickly wire up performant assistive technology friendly flows for any experience.\n\nThe optional assistive controls we provide are based on the Atlassian Design System. If you do not want to use the Atlassian Design System, you can use our guidelines and substitute our components with your own components, or you can go about accessibility in a different way if you choose.\n\n
\n\n## What is this repository?\n\nThis repository is currently one way mirror from our internal monorepo that contains all the code for Pragmatic drag and drop.\n\n
\n\n\"Diagram\n\n
\n\n The intention of this repository is to make public our code, but not to accept code contributions (at this stage). In the future we could explore setting up a two way mirror so that contributions to this repo can also make their way back to our monorepo. You are still welcome to raise issues or suggestions on this repository!\n\nAll documentation and `npm` packages are public and available for use by everyone.\n\n## Can I use this with my own Design System?\n\nYep! Pragmatic drag and drop as a [small core package](https://atlassian.design/components/pragmatic-drag-and-drop/core-package), and then a range of [optional packages](https://atlassian.design/components/pragmatic-drag-and-drop/optional-packages). Some of the optional packages have dependencies on styling solutions (eg `emotion`), view libraries (eg `react`) or on some additional Atlassian outputs (eg `@atlaskit/tokens`). We have separated out optional packages that have other dependencies so they can be easily swapped with your own pieces that use your own tech stack and visual outputs.\n\n## Can I use my own design language?\n\nYep! We have created some design guidelines which embody how we want to achieve drag and drop in our products, and some of those decisions are embodied in some optional packages. However, you are free to use whatever design language you like, including ours!\n\n## What is `@atlaskit`?\n\nThe Pragmatic drag and drop packages are published under the `@atlaskit` namespace on `npm`\n\n```ts\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n```\n\n`@atlaskit` is the `npm` namespace that we publish all of our public packages on from inside our internal monorepo. We _could_ look at creating a separate namespace in the future just for Pragmatic drag and drop. If we do that, we'll release some tooling to help folks automatically switch over.\n\n## `npm` release and repo sync timing\n\nThis mirror repository is currently being synced with our internal repository once a day. We publish packages to `npm` immediately as we merge new versions into the internal repository. This means that code can be released onto `npm` up to 24 hours _before_ it is available in this mirror repository.\n\n## Credits\n\nMade with love by:\n\n- [Alex Reardon](https://twitter.com/alexandereardon)\n- [Declan Warn](https://twitter.com/DeclanWarn)\n- [Lewis Healey](https://twitter.com/lewishealey)\n- [Eleni Misthos](https://www.linkedin.com/in/elenimisthos/)\n- [Jesse Bauer](https://soundcloud.com/jessebauer)\n- [Mitch Gavan](https://twitter.com/MitchG23)\n- [Michael Abrahamian](https://twitter.com/michaelguitars7)\n- [Tim Keir](https://twitter.com/ReDrUmNZ)\n- [Greta Ritchard](https://www.linkedin.com/in/gretarit/)\n- [Many other folks at Atlassian](https://www.atlassian.com/)\n- Logo created by [Michelle Holik](https://twitter.com/michelleholik) and [Vojta Holik](https://twitter.com/vojta_holik)\n\nPragmatic drag and drop stands on the shoulders of giants, including the folks who created the [drag and drop specifications](https://html.spec.whatwg.org/multipage/dnd.html), implemented drag and drop in browsers, and the many drag and drop libraries that came before this.\n" }, { "path": "jest.config.js", "content": "" }, { "path": "package.json", "content": "{\n\t\"name\": \"pragmatic-drag-and-drop\",\n\t\"private\": true,\n\t\"version\": \"1.0.0\",\n\t\"description\": \"Pragmatic drag and drop is a low level toolchain that enables fast and successful usage of the browsers built in drag and drop capabilities, for everyone\",\n\t\"author\": \"Atlassian Pty Ltd\",\n\t\"license\": \"Apache-2.0\",\n\t\"scripts\": {\n\t\t\"postinstall\": \"patch-package\",\n\t\t\"test\": \"jest --forceExit\"\n\t},\n\t\"workspaces\": [\n\t\t\"packages/*\"\n\t],\n\t\"dependencies\": {\n\t\t\"tslib\": \"^2.4.0\"\n\t},\n\t\"devDependencies\": {\n\t\t\"@types/jest\": \"^29.5.12\",\n\t\t\"jest\": \"^29.7.0\",\n\t\t\"jest-environment-jsdom\": \"^29.7.0\",\n\t\t\"patch-package\": \"^8.0.0\",\n\t\t\"postinstall-postinstall\": \"^2.1.0\",\n\t\t\"typescript\": \"5.9.2\"\n\t}\n}\n" }, { "path": "packages/auto-scroll/.npmignore", "content": "src/\nexamples-utils/\nexamples/\nindex.ts\ndocs/\nbuild/\n__tests__/\ntsconfig.json\ntsconfig.app.json\ntsconfig.dev.json\n" }, { "path": "packages/auto-scroll/CHANGELOG.md", "content": "# @atlaskit/pragmatic-drag-and-drop-auto-scroll\n\n## 2.1.5\n\n### Patch Changes\n\n- [`d3ed1b65a2181`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d3ed1b65a2181) -\n Add @atlassian/a11y-jest-testing to devDependencies.\n\n## 2.1.4\n\n### Patch Changes\n\n- [`e4b717d8304e8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e4b717d8304e8) -\n Add @atlassian/a11y-jest-testing to devDependencies.\n\n## 2.1.3\n\n### Patch Changes\n\n- [`aa9ff75020fcb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aa9ff75020fcb) -\n Add @atlassian/a11y-jest-testing to devDependencies.\n\n## 2.1.2\n\n### Patch Changes\n\n- [`beaa6ee463aa8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/beaa6ee463aa8) -\n Internal changes to how border radius is applied.\n- Updated dependencies\n\n## 2.1.1\n\n### Patch Changes\n\n- [#164244](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164244)\n [`65021fc0267e2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/65021fc0267e2) -\n The cleanup functions returned by the following utilities now only work on the first call. This\n was done to prevent unexpected side effects of calling a cleanup function multiple times.\n - `@atlaskit/pragmatic-drag-and-drop/adapter/element`\n - `draggable`\n - `dropTargetForElements`\n - `monitorForElements`\n - `@atlaskit/pragmatic-drag-and-drop/adapter/text-selection`\n - `dropTargetForTextSelection`\n - `monitorForTextSelection`\n - `@atlaskit/pragmatic-drag-and-drop/adapter/external`\n - `dropTargetForExternal`\n - `monitorForExternal`\n - `@atlaskit/pragmatic-drag-and-drop-auto-scroll/element`\n - `autoScrollForElements`\n - `autoScrollWindowForElements`\n - `@atlaskit/pragmatic-drag-and-drop-auto-scroll/external`\n - `autoScrollForExternal`\n - `autoScrollWindowForExternal`\n - `@atlaskit/pragmatic-drag-and-drop-auto-scroll/text-selection`\n - `autoScrollForTextSelection`\n - `autoScrollWindowForTextSelection`\n\n- Updated dependencies\n\n## 2.1.0\n\n### Minor Changes\n\n- [#172374](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/172374)\n [`4ca6346256c8a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4ca6346256c8a) -\n Minor increase of time dampening duration. After lots of explorations, we have increased the value\n to make it easier for people to avoid the impacts of rapid scroll speed spikes when lifting or\n entering into a high scroll speed area.\n\n## 2.0.0\n\n### Major Changes\n\n- [#170839](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/170839)\n [`1534389dcb75b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1534389dcb75b) -\n In order to improve clarity, we have renamed the `from*Edge` (eg `fromTopEdge`) argument\n properties to `for*Edge` (eg `forTopEdge`) for the overflow scroller. If you are not using\n overflow scrolling, there is nothing you need to do.\n\n ```diff\n - fromTopEdge\n + forTopEdge\n - fromRightEdge\n + forRightEdge\n - fromBottomEdge\n + forBottomEdge\n - fromLeftEdge\n + forLeftEdge\n ```\n\n ```diff\n const unbind = unsafeOverflowAutoScrollForElements({\n \t\telement,\n \t\tgetOverflow: () => ({\n -\t\t\tfromTopEdge: {\n +\t\t\tforTopEdge: {\n \t\t\t\ttop: 6000,\n \t\t\t\tright: 6000,\n \t\t\t\tleft: 6000,\n \t\t\t},\n -\t\t\tfromRightEdge: {\n +\t\t\tforRightEdge: {\n \t\t\t\ttop: 6000,\n \t\t\t\tright: 6000,\n \t\t\t\tbottom: 6000,\n \t\t\t},\n -\t\t\tfromBottomEdge: {\n +\t\t\tforBottomEdge: {\n \t\t\t\tright: 6000,\n \t\t\t\tbottom: 6000,\n \t\t\t\tleft: 6000,\n \t\t\t},\n -\t\t\tfromLeftEdge: {\n +\t\t\tforLeftEdge: {\n \t\t\t\ttop: 6000,\n \t\t\t\tleft: 6000,\n \t\t\t\tbottom: 6000,\n \t\t\t},\n \t\t}),\n });\n ```\n\n We thought that `for*` more accurately represented what was being provided, as these are the\n overflow definitions _for_ a defined edge.\n\n We have also improved the types for `for*Edge` so that you do not need to provide redundant cross\n axis information if you only want to overflow scroll on the main axis.\n\n ```diff\n const unbind = unsafeOverflowAutoScrollForElements({\n \t\telement,\n \t\tgetOverflow: () => ({\n \t\t\tforTopEdge: {\n \t\t\t\ttop: 100,\n + // no longer need to pass `0` for the cross axis if you don't need it\n -\t\t\t\tright: 0,\n -\t\t\t\tleft: 0,\n \t\t\t},\n \t\t\tforRightEdge: {\n \t\t\t\tright: 100,\n -\t\t\t\ttop: 0,\n -\t\t\t\tbottom: 0,\n \t\t\t},\n \t\t\tforBottomEdge: {\n \t\t\t\tbottom: 100,\n -\t\t\t\tright: 0,\n -\t\t\t\tleft: 0,\n \t\t\t},\n \t\t\tforLeftEdge: {\n \t\t\t\tleft: 100,\n -\t\t\t\ttop: 0,\n -\t\t\t\tbottom: 0,\n \t\t\t},\n \t\t}),\n });\n ```\n\n When declaring overflow scrolling for an edge, you cannot provide how deep the scrolling should\n occur into the element (that is defined by the \"over element\" overflow scroller). Providing\n redundant information for an edge will now also give a type error rather than providing no\n feedback.\n\n ```ts\n const unbind = unsafeOverflowAutoScrollForElements({\n \telement,\n \tgetOverflow: () => ({\n \t\tforTopEdge: {\n \t\t\ttop: 100,\n \t\t\tbottom: 30, // ❌ now a type error\n \t\t},\n \t\tforRightEdge: {\n \t\t\tright: 100,\n \t\t\tleft: 10, // ❌ now a type error\n \t\t},\n \t\tforBottomEdge: {\n \t\t\tbottom: 100,\n \t\t\ttop: 200, // ❌ now a type error\n \t\t},\n \t\tforLeftEdge: {\n \t\t\tleft: 100,\n \t\t\tright: 20, // ❌ now a type error\n \t\t},\n \t}),\n });\n ```\n\n## 1.4.0\n\n### Minor Changes\n\n- [#116572](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116572)\n [`98c65e7ff719c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/98c65e7ff719c) -\n 🍯 Introducing \"the honey pot fix\" which is an improved workaround for a\n [painful browser bug](https://issues.chromium.org/issues/41129937).\n\n **Background**\n\n The browser bug causes the browser to think the users pointer is continually depressed at the\n point that the user started a drag. This could lead to incorrect events being triggered, and\n incorrect styles being applied to elements that the user is not currently over during a drag.\n\n **Outcomes**\n - Elements will no longer receive `MouseEvent`s (eg `\"mouseenter\"` and `\"mouseleave\"`) during a\n drag (which is a violation of the\n [drag and drop specification](https://html.spec.whatwg.org/multipage/dnd.html#drag-and-drop-processing-model))\n - Elements will no longer apply `:hover` or `:active` styles during a drag. Previously consumers\n would need to disable these style rules during a drag to prevent these styles being applied.\n - Dramatically improved post drop performance. Our prior solution could require a noticeable delay\n due to a large style recalculation after a drop.\n\n### Patch Changes\n\n- Updated dependencies\n\n## 1.3.0\n\n### Minor Changes\n\n- [#95426](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95426)\n [`a58266bf88e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a58266bf88e6) -\n Adding axis locking functionality\n\n ```diff\n + // `getAllowedAxis` added to element, text selection and external auto scrollers\n\n autoScrollForElements({\n element: myElement,\n + getAllowedAxis: (args: ElementGetFeedbackArgs) => 'horizontal' | 'vertical' | 'all',\n });\n\n autoScrollWindowForElements({\n + getAllowedAxis: (args: WindowGetFeedbackArgs) => 'horizontal' | 'vertical' | 'all',\n });\n\n unsafeOverflowAutoScrollForElements({\n + getAllowedAxis?: (args: ElementGetFeedbackArgs) => AllowedAxis;\n })\n ```\n\n## 1.2.0\n\n### Minor Changes\n\n> `1.2.0` is deprecated on `npm` and should not be used. Shortly after release we decided to change\n> this API\n\n- [#94103](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94103)\n [`4e3fb63eb288`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4e3fb63eb288) -\n Added axis locking functionality.\n\n ```diff\n autoScrollForElements({\n element: myElement,\n getConfiguration: () => ({\n maxScrollSpeed: 'fast' | 'standard',\n + allowedAxis: 'horizontal' | 'vertical' | 'all',\n }),\n })\n ```\n\n## 1.1.0\n\n### Minor Changes\n\n- [#94454](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94454)\n [`4b40eb010074`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4b40eb010074) -\n Exposing the unsafe overflow auto scroller for external drags\n (`unsafeOverflowAutoScrollForExternal()`). This already existed, but it was not exposed publicly\n 🤦‍♂️.\n\n ```diff\n import {unsafeOverflowAutoScrollForElements from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element';\n import {unsafeOverflowAutoScrollForTextSelection} from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/text-selection';\n + import {unsafeOverflowAutoScrollForExternal} from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/external';\n ```\n\n## 1.0.4\n\n### Patch Changes\n\n- [#94316](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94316)\n [`35fd5ed8e1d7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35fd5ed8e1d7) -\n Upgrading internal dependency `bind-event-listener` to `@^3.0.0`\n\n## 1.0.3\n\n### Patch Changes\n\n- [#84398](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84398)\n [`77694db987fc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77694db987fc) -\n Public release of Pragmatic drag and drop documentation\n\n## 1.0.2\n\n### Patch Changes\n\n- [#83702](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83702)\n [`4d9e25ab4eaa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4d9e25ab4eaa) -\n Updating the descriptions of Pragmatic drag and drop packages, so they each provide a consistent\n description to various consumers, and so they are consistently formed amongst each other.\n - `package.json` `description`\n - `README.md`\n - Website documentation\n\n## 1.0.1\n\n### Patch Changes\n\n- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116)\n [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) -\n Upgrade Typescript from `4.9.5` to `5.4.2`\n\n## 1.0.0\n\n### Major Changes\n\n- [#70616](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70616)\n [`42e57ea65fee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/42e57ea65fee) -\n This is our first `major` release (`1.0`) for all Pragmatic drag and drop packages.\n\n For a detailed explanation of these changes, and how to upgrade (automatically) to `1.0` please\n see our\n [1.0 upgrade guide](http://atlassian.design/components/pragmatic-drag-and-drop/core-package/upgrade-guides/upgrade-guide-for-1.0)\n\n### Patch Changes\n\n- Updated dependencies\n\n## 0.8.1\n\n### Patch Changes\n\n- Updated dependencies\n\n## 0.8.0\n\n### Minor Changes\n\n- [#57337](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57337)\n [`4ad3fa749a5c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4ad3fa749a5c) -\n Adding the ability to increase the maximum automatic scroll speed.\n\n ```diff\n autoScrollForElements({\n element: myElement,\n + getConfiguration: () => ({maxScrollSpeed: 'fast' | 'standard'}),\n })\n ```\n\n `getConfiguration()` is a new _optional_ argument be used with all auto scrolling registration\n functions:\n - `autoScrollForElements`\n - `autoScrollWindowForElements`\n - `autoScrollForFiles`\n - `autoScrollWindowForFiles`\n - `unsafeOverflowForElements`\n - `unsafeOverflowForFiles`\n\n ```ts\n autoScrollForElements({\n element: myElement,\n getConfiguration: () => ({ maxScrollSpeed : 'fast' })\n }),\n ```\n\n We recommend using the default `\"standard\"` max scroll speed for most experiences. However, on\n _some_ larger experiences, a faster max scroll speed (`\"fast\"`) can feel better.\n\n## 0.7.0\n\n### Minor Changes\n\n- [#42774](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42774)\n [`66d9475437e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/66d9475437e) - Internal\n refactoring to improve clarity and safety\n\n## 0.6.0\n\n### Minor Changes\n\n- [#42668](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42668)\n [`0a4e3f44ba3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0a4e3f44ba3) - We have\n landed a few fixes for \"overflow scrolling\"\n - Fix: Time dampening could be incorrectly reset when transitioning from \"over element\" auto\n scrolling to \"overflow\" auto scrolling for certain element configurations.\n - Fix: Parent \"overflow scrolling\" registrations could prevent overflow scrolling on children\n elements, if the parent was registered first.\n - Fix: \"overflow scrolling\" `canScroll() => false` would incorrectly opt out of \"overflow\n scrolling\" for younger registrations.\n\n## 0.5.0\n\n### Minor Changes\n\n- [#39935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39935)\n [`20a91012629`](https://bitbucket.org/atlassian/atlassian-frontend/commits/20a91012629) - First\n public release of this package. Please refer to documentation for usage and API information.\n\n### Patch Changes\n\n- Updated dependencies\n\n## 0.4.0\n\n### Minor Changes\n\n- [#39303](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39303)\n [`a6d9f3bb566`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a6d9f3bb566) - Adding\n optional overflow scrolling API. API information shared directly with Trello\n\n## 0.3.2\n\n### Patch Changes\n\n- Updated dependencies\n\n## 0.3.1\n\n### Patch Changes\n\n- Updated dependencies\n\n## 0.3.0\n\n### Minor Changes\n\n- [#38658](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38658)\n [`7803a90e9c6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7803a90e9c6) - This\n change makes it so that distance dampening is based on the size of the hitbox and not the\n container. Now that we clamp the size of the hitbox, our distance dampening needs to be based on\n the size of the hitbox, and not the container.\n\n## 0.2.0\n\n### Minor Changes\n\n- [#38630](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38630)\n [`5c643ce004d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c643ce004d) - Limiting\n the max size of auto scrolling hitboxes. This prevents large elements having giant auto scroll\n hitboxes\n\n## 0.1.0\n\n### Minor Changes\n\n- [#38525](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38525)\n [`693af8c5775`](https://bitbucket.org/atlassian/atlassian-frontend/commits/693af8c5775) - Early\n release of our new optional drag and drop package for Pragmatic drag and drop. Package release is\n only for early integration with Trello.\n\n### Patch Changes\n\n- Updated dependencies\n" }, { "path": "packages/auto-scroll/LICENSE.md", "content": "Copyright 2023 Atlassian Pty Ltd\n\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use this file except in\ncompliance with the License. You 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 distributed under the License is\ndistributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing permissions and limitations under the\nLicense.\n" }, { "path": "packages/auto-scroll/README.md", "content": "## Pragmatic drag and drop\n\nAn optional Pragmatic drag and drop package that enables automatic scrolling during a drag operation. This package works with any configuration of scrollable entities, and you can change the configuration of your scrollable entities in any way you like during a drag.\n\n[📖 Documentation](https://atlassian.design/components/pragmatic-drag-and-drop/)\n" }, { "path": "packages/auto-scroll/__tests__/playwright/over-element-smoke-test.spec.tsx", "content": "import invariant from 'tiny-invariant';\n\nimport { expect, test } from '@af/integration-testing';\n\ntest.describe('over element automatic scrolling', () => {\n\ttest('should scroll a scrollable element forwards', async ({ page }) => {\n\t\tawait page.visitExample('pragmatic-drag-and-drop', 'auto-scroll', 'over-element');\n\n\t\tconst columnTestId = 'column-0';\n\t\tconst card = page.getByTestId('column-0::item-0');\n\t\tconst column = page.getByTestId(columnTestId);\n\n\t\t// first check: ensure the column is not scrolled yet\n\t\texpect(await column.evaluate((element) => element.scrollTop)).toBe(0);\n\n\t\tconst columnRect = await column.boundingBox();\n\t\tinvariant(columnRect, 'Could not obtain bounding box from column');\n\n\t\tawait card.hover();\n\t\tawait page.mouse.down();\n\t\t// Using 'move' rather than 'hover' as 'hover' also does it's own scrolling\n\t\tawait page.mouse.move(\n\t\t\tcolumnRect.x + columnRect.width / 2,\n\t\t\t// Going up a bit from the bottom so we know it is\n\t\t\t// our auto scroller and not the browsers built in one\n\t\t\tcolumnRect.y + columnRect.height - 30,\n\t\t\t// having one step so we don't trigger the browsers built in auto scroller\n\t\t\t{ steps: 1 },\n\t\t);\n\n\t\tawait page.waitForFunction((testId) => {\n\t\t\tconst element = document.querySelector(`[data-testid=\"${testId}\"]`);\n\t\t\tif (!element) {\n\t\t\t\tthrow new Error(`Unable to find element with test id \"${testId}\"`);\n\t\t\t}\n\t\t\treturn element.scrollTop > 0;\n\t\t}, columnTestId);\n\t});\n});\n" }, { "path": "packages/auto-scroll/__tests__/playwright/unsafe-overflow-smoke-test.spec.tsx", "content": "import invariant from 'tiny-invariant';\n\nimport { expect, test } from '@af/integration-testing';\n\ntest.describe('over element automatic scrolling', () => {\n\ttest('should scroll a scrollable element forwards', async ({ page }) => {\n\t\tawait page.visitExample('pragmatic-drag-and-drop', 'auto-scroll', 'unsafe-overflow-only');\n\n\t\tconst columnTestId = 'column-0';\n\t\tconst card = page.getByTestId('column-0::item-0');\n\t\tconst column = page.getByTestId(columnTestId);\n\n\t\t// first check: ensure the column is not scrolled yet\n\t\texpect(await column.evaluate((element) => element.scrollTop)).toBe(0);\n\n\t\tconst columnRect = await column.boundingBox();\n\t\tinvariant(columnRect, 'Could not obtain bounding box from column');\n\n\t\tawait card.hover();\n\t\tawait page.mouse.down();\n\t\t// Using 'move' rather than 'hover' as 'hover' also does it's own scrolling\n\t\tawait page.mouse.move(\n\t\t\tcolumnRect.x + columnRect.width / 2,\n\t\t\t// Going below the column a bit so we know we are triggering the overflow scroller\n\t\t\tcolumnRect.y + columnRect.height + 100,\n\t\t\t{ steps: 20 },\n\t\t);\n\n\t\tawait page.waitForFunction((testId) => {\n\t\t\tconst element = document.querySelector(`[data-testid=\"${testId}\"]`);\n\t\t\tif (!element) {\n\t\t\t\tthrow new Error(`Unable to find element with test id \"${testId}\"`);\n\t\t\t}\n\t\t\treturn element.scrollTop > 0;\n\t\t}, columnTestId);\n\t});\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/_util.ts", "content": "import { fireEvent } from '@testing-library/dom';\nimport invariant from 'tiny-invariant';\n\nimport {\n\ttype CleanupFn,\n\ttype DragLocation,\n\ttype DragLocationHistory,\n\ttype DropTargetRecord,\n\ttype Input,\n\ttype Position,\n} from '@atlaskit/pragmatic-drag-and-drop/types';\n\nimport { type Axis, type Edge } from '../../src/internal-types';\n\nexport function getDefaultInput(overrides: Partial = {}): Input {\n\tconst defaults: Input = {\n\t\t// user input\n\t\taltKey: false,\n\t\tbutton: 0,\n\t\tbuttons: 0,\n\t\tctrlKey: false,\n\t\tmetaKey: false,\n\t\tshiftKey: false,\n\n\t\t// coordinates\n\t\tclientX: 0,\n\t\tclientY: 0,\n\t\tpageX: 0,\n\t\tpageY: 0,\n\t};\n\n\treturn {\n\t\t...defaults,\n\t\t...overrides,\n\t};\n}\n\nexport function appendToBody(...elements: Element[]): CleanupFn {\n\telements.forEach((element) => {\n\t\tdocument.body.appendChild(element);\n\t});\n\n\treturn function removeFromBody() {\n\t\telements.forEach((element) => {\n\t\t\tdocument.body.removeChild(element);\n\t\t});\n\t};\n}\n\nexport function getEmptyHistory(input: Input = getDefaultInput()): DragLocationHistory {\n\tconst noWhere: DragLocation = {\n\t\tinput,\n\t\tdropTargets: [],\n\t};\n\n\treturn {\n\t\tinitial: noWhere,\n\t\tprevious: {\n\t\t\tdropTargets: noWhere.dropTargets,\n\t\t},\n\t\tcurrent: noWhere,\n\t};\n}\n\nexport function getInitialHistory(\n\tdropTargets: DropTargetRecord[],\n\tinput: Input = getDefaultInput(),\n): DragLocationHistory {\n\tconst location: DragLocation = {\n\t\tinput,\n\t\tdropTargets,\n\t};\n\n\treturn {\n\t\tinitial: location,\n\t\tcurrent: location,\n\t\tprevious: {\n\t\t\tdropTargets: [],\n\t\t},\n\t};\n}\n\nexport function setBoundingClientRect(el: HTMLElement, rect: DOMRect): CleanupFn {\n\tconst original = el.getBoundingClientRect;\n\n\tel.getBoundingClientRect = () => rect;\n\treturn () => {\n\t\tel.getBoundingClientRect = original;\n\t};\n}\n\nexport function tryGetRect(box: Partial[0]>): DOMRect {\n\tconst { top, right, bottom, left } = box;\n\tinvariant(typeof top === 'number');\n\tinvariant(typeof right === 'number');\n\tinvariant(typeof bottom === 'number');\n\tinvariant(typeof left === 'number');\n\n\treturn getRect({ top, right, bottom, left });\n}\n\nexport function getRect(box: {\n\ttop: number;\n\tright: number;\n\tbottom: number;\n\tleft: number;\n}): DOMRect {\n\treturn {\n\t\ttop: box.top,\n\t\tright: box.right,\n\t\tbottom: box.bottom,\n\t\tleft: box.left,\n\t\t// calculated\n\t\theight: box.bottom - box.top,\n\t\twidth: box.right - box.left,\n\t\tx: box.left,\n\t\ty: box.top,\n\t\ttoJSON: function () {\n\t\t\treturn JSON.stringify(this);\n\t\t},\n\t};\n}\n\n// usage: const [A, B, C, D, F] = getElements();\nexport function getElements(tagName: keyof HTMLElementTagNameMap = 'div'): Iterable {\n\tconst iterator = {\n\t\tnext() {\n\t\t\treturn {\n\t\t\t\tdone: false,\n\t\t\t\tvalue: document.createElement(tagName),\n\t\t\t};\n\t\t},\n\t\t[Symbol.iterator]() {\n\t\t\treturn iterator;\n\t\t},\n\t};\n\treturn iterator;\n}\n\n/**\n * Returns a connected tree of elements\n * `[grandChild, parent, grandParent]`\n */\nexport function getBubbleOrderedTree(\n\ttagName: keyof HTMLElementTagNameMap = 'div',\n): Iterable {\n\tlet last: HTMLElement | null;\n\tconst iterator = {\n\t\tnext() {\n\t\t\tconst element = document.createElement(tagName);\n\n\t\t\tif (last) {\n\t\t\t\telement.appendChild(last);\n\t\t\t}\n\t\t\tlast = element;\n\n\t\t\treturn {\n\t\t\t\tdone: false,\n\t\t\t\tvalue: element,\n\t\t\t};\n\t\t},\n\t\t[Symbol.iterator]() {\n\t\t\treturn iterator;\n\t\t},\n\t};\n\treturn iterator;\n}\n\nexport const userEvent = {\n\tlift(target: HTMLElement, input?: Partial): void {\n\t\tconst final: Input = { ...getDefaultInput(), ...input };\n\t\t// accurate representation of events:\n\t\tfirePointer.down(target, final);\n\t\tfirePointer.move(target, { ...final, clientX: final.clientX + 10 });\n\n\t\t// will fire `onGenerateDragPreview`\n\t\tfireEvent.dragStart(target, final);\n\t\tfirePointer.cancel(target, final);\n\n\t\t// after an animation frame we fire `onDragStart`\n\t\tadvanceTimersToNextFrame();\n\t},\n\tdrop(target: Element): void {\n\t\tfireEvent.drop(target);\n\t},\n\tcancel(target: Element = document.body): void {\n\t\t// A \"cancel\" (drop on nothing, or pressing \"Escape\") will\n\t\t// cause a \"dragleave\" and then a \"dragend\"\n\t\tfireEvent.dragLeave(target);\n\t\tfireEvent.dragEnd(target);\n\t},\n\tleaveWindow(): void {\n\t\tfireEvent.dragLeave(document.documentElement, { relatedTarget: null });\n\t},\n\tstartExternalDrag({\n\t\ttypes,\n\t\ttarget = document.body,\n\t}: {\n\t\ttypes: string[];\n\t\ttarget?: Element;\n\t}): void {\n\t\tconst event = new DragEvent('dragenter', {\n\t\t\tcancelable: true,\n\t\t\tbubbles: true,\n\t\t});\n\t\tfor (const type of types) {\n\t\t\t// @ts-expect-error\n\t\t\tevent.dataTransfer?.types.push(type);\n\t\t}\n\t\ttarget.dispatchEvent(event);\n\t\tadvanceTimersToNextFrame();\n\t},\n\trougePointerMoves(): void {\n\t\t// first 20 are ignored due to firefox issue\n\t\t// 21st pointermove will cancel a drag\n\t\tfor (let i = 0; i < 21; i++) {\n\t\t\tfireEvent.pointerMove(document.body);\n\t\t}\n\t},\n};\n\n/** Cleanup function to unbind all event listeners */\nexport async function reset(): Promise {\n\t// cleanup any pending drags\n\tfireEvent.dragEnd(window);\n\n\t// cleanup honey pot fix\n\tfireEvent.pointerMove(window);\n}\n\nexport function getBubbleOrderedPath(path: Element[]): Element[] {\n\tconst last = path[path.length - 1];\n\t// will happen if you pass in an empty array\n\tif (!last) {\n\t\treturn path;\n\t}\n\t// exit condition: no more parents\n\tif (!last.parentElement) {\n\t\treturn path;\n\t}\n\t// bubble ordered\n\treturn getBubbleOrderedPath([...path, last.parentElement]);\n}\n\nexport function setElementFromPointWithPath(path: Element[]): CleanupFn {\n\tconst originalElementFromPoint = document.elementFromPoint;\n\tconst originalElementsFromPoint = document.elementsFromPoint;\n\n\tdocument.elementsFromPoint = () => path;\n\tdocument.elementFromPoint = () => path[0] ?? null;\n\n\treturn () => {\n\t\tdocument.elementFromPoint = originalElementFromPoint;\n\t\tdocument.elementsFromPoint = originalElementsFromPoint;\n\t};\n}\n\nexport function setElementFromPoint(element: Element | null): CleanupFn {\n\tconst path = element ? getBubbleOrderedPath([element]) : [];\n\treturn setElementFromPointWithPath(path);\n}\n\n/** Release a pending scrollBy (they are scheduled for the next task) */\nexport function stepScrollBy(): void {\n\tjest.advanceTimersByTime(1);\n}\n\nlet startTime: number | null = null;\n\n/** Record the initial (mocked) system start time\n *\n * This is no longer needed once `jest.advanceTimersToNextFrame()` is available\n * https://github.com/jestjs/jest/pull/14598\n */\nexport function setStartSystemTime(): void {\n\tstartTime = Date.now();\n}\n\n/** Step forward a single animation frame\n *\n * This is no longer needed once `jest.advanceTimersToNextFrame()` is available\n * https://github.com/jestjs/jest/pull/14598\n */\nexport function advanceTimersToNextFrame(): void {\n\tinvariant(\n\t\tstartTime != null,\n\t\t'Must call `setStartSystemTime` before using `advanceTimersToNextFrame()`',\n\t);\n\n\t// Stealing logic from sinon fake timers\n\t// https://github.com/sinonjs/fake-timers/blob/fc312b9ce96a4ea2c7e60bb0cccd2c604b75cdbd/src/fake-timers-src.js#L1102-L1105\n\tconst timePassedInFrame = (Date.now() - startTime) % 16;\n\tconst timeToNextFrame = 16 - timePassedInFrame;\n\tjest.advanceTimersByTime(timeToNextFrame);\n}\n\ntype BasicElementArgs = {\n\twidth: number;\n\theight: number;\n\tx?: number;\n\ty?: number;\n\tid?: string;\n};\nexport function setupNestedScrollContainers(bubbleOrdered: BasicElementArgs[]): HTMLElement[] {\n\t// argument validation\n\tfor (let i = 0; i < bubbleOrdered.length - 1; i++) {\n\t\tconst current = bubbleOrdered[i];\n\t\tconst parent = bubbleOrdered[i + 1];\n\n\t\tinvariant(\n\t\t\tcurrent.height >= parent.height,\n\t\t\t`validation error: a child's height (${current.height}) was bigger than it's parent (${current.height})`,\n\t\t);\n\n\t\tinvariant(\n\t\t\tcurrent.width >= parent.width,\n\t\t\t`validation error: a child's width (${current.width}) was bigger than it's parent (${current.width})`,\n\t\t);\n\t}\n\n\ttype Item = { args: BasicElementArgs; element: HTMLElement };\n\n\t// Making all elements first so we can link everything correctly.\n\tconst items: Item[] = bubbleOrdered.map(\n\t\t(args): Item => ({\n\t\t\targs,\n\t\t\telement: document.createElement('div'),\n\t\t}),\n\t);\n\n\tfor (let i = 0; i < items.length; i++) {\n\t\tconst item = items[i];\n\t\tconst parent: Item | undefined = items[i + 1];\n\t\tconst isInnerMost = i === 0;\n\n\t\t// Establish parent relationship\n\t\tif (parent) {\n\t\t\tparent.element.appendChild(item.element);\n\t\t}\n\n\t\t// helpful for logging\n\t\titem.element.id = item.args.id ?? `element-index-${i}-in-${items.length - 1}`;\n\n\t\tObject.assign(item.element.style, {\n\t\t\t// enabling scrolling in both directions if not the inner most\n\t\t\toverflowX: isInnerMost ? undefined : 'auto',\n\t\t\toverflowY: isInnerMost ? undefined : 'auto',\n\t\t\theight: `${item.args.height}px`,\n\t\t\twidth: `${item.args.width}px`,\n\t\t});\n\n\t\titem.element.getBoundingClientRect = () => {\n\t\t\t// for simplicity, all elements are currently drawn from 0,0\n\t\t\tconst start: Position = {\n\t\t\t\tx: item.args.x ?? 0,\n\t\t\t\ty: item.args.y ?? 0,\n\t\t\t};\n\t\t\tconst box = DOMRect.fromRect({\n\t\t\t\tx: start.x,\n\t\t\t\ty: start.y,\n\t\t\t\twidth: item.args.width,\n\t\t\t\theight: item.args.height,\n\t\t\t});\n\n\t\t\tif (!parent) {\n\t\t\t\treturn box;\n\t\t\t}\n\n\t\t\t// The border box of an element will be shifted by:\n\t\t\t// 1. the scroll of a parent\n\t\t\t// 2. changes in the x/y of the parent\n\n\t\t\tconst parentRect = parent.element.getBoundingClientRect();\n\n\t\t\t// What is the difference between the original parent.getBoundingClientRect() and where it is now?\n\t\t\t// Given that we know an element is always starting at `x: 0, y: 0`, the value of `x` and `y` can\n\t\t\t// only have changed if a parent was scrolled\n\t\t\tconst parentChange: Position = {\n\t\t\t\tx: parentRect.x,\n\t\t\t\ty: parentRect.y,\n\t\t\t};\n\n\t\t\tconst shiftedByParents = DOMRect.fromRect({\n\t\t\t\tx: box.x - parent.element.scrollLeft + parentChange.x,\n\t\t\t\ty: box.y - parent.element.scrollTop + parentChange.y,\n\t\t\t\twidth: box.width,\n\t\t\t\theight: box.height,\n\t\t\t});\n\n\t\t\treturn shiftedByParents;\n\t\t};\n\n\t\t// scroll properties will be based on children\n\t\t// TODO: could find the maximum height of any child\n\t\tconst child: Item | undefined = items[i - 1];\n\n\t\tObject.defineProperties(item.element, {\n\t\t\tscrollHeight: {\n\t\t\t\tvalue: child ? child.args.height : item.args.height,\n\t\t\t\twritable: false,\n\t\t\t},\n\t\t\tscrollWidth: {\n\t\t\t\tvalue: child ? child.args.width : item.args.width,\n\t\t\t\twritable: false,\n\t\t\t},\n\t\t});\n\n\t\t// Note: these only measure paddingBox, but we are\n\t\t// not currently using borders so we are all good\n\t\tObject.defineProperties(item.element, {\n\t\t\tclientHeight: {\n\t\t\t\tvalue: item.args.height,\n\t\t\t\twritable: false,\n\t\t\t},\n\t\t\tclientWidth: {\n\t\t\t\tvalue: item.args.width,\n\t\t\t\twritable: false,\n\t\t\t},\n\t\t});\n\t}\n\n\treturn items.map((item) => item.element);\n}\n\nexport function setupBasicScrollContainer({\n\tscrollContainer = { width: 1000, height: 1000 },\n\tchild = { width: 10000, height: 10000 },\n}: {\n\tscrollContainer?: { width: number; height: number };\n\tchild?: { width: number; height: number };\n} = {}): { parentScrollContainer: HTMLElement; child: HTMLElement } {\n\tconst elements = setupNestedScrollContainers([child, scrollContainer]);\n\treturn {\n\t\tchild: elements[0],\n\t\tparentScrollContainer: elements[1],\n\t};\n}\n\nexport type Point = Position & { label: string };\nexport function getInsidePoints(rect: DOMRect): Point[] {\n\treturn [\n\t\t{ label: 'top left', x: rect.left, y: rect.top },\n\t\t{ label: 'top right', x: rect.right, y: rect.top },\n\t\t{ label: 'bottom right', x: rect.right, y: rect.bottom },\n\t\t{ label: 'bottom left', x: rect.left, y: rect.bottom },\n\t\t{\n\t\t\tlabel: 'center',\n\t\t\tx: rect.left + rect.width / 2,\n\t\t\ty: rect.top + rect.height / 2,\n\t\t},\n\t];\n}\n\nexport function getOutsidePoints(rect: DOMRect): Point[] {\n\treturn [\n\t\t{ label: 'left of top left', x: rect.left - 1, y: rect.top },\n\t\t{ label: 'top of top left', x: rect.left, y: rect.top - 1 },\n\t\t{ label: 'right of top right', x: rect.right + 1, y: rect.top },\n\t\t{ label: 'top of top right', x: rect.right, y: rect.top - 1 },\n\t\t{ label: 'right of bottom right', x: rect.right + 1, y: rect.bottom },\n\t\t{ label: 'bottom of bottom right', x: rect.right, y: rect.bottom + 1 },\n\t\t{ label: 'left of bottom left', x: rect.left - 1, y: rect.bottom },\n\t\t{ label: 'bottom of bottom left', x: rect.left, y: rect.bottom + 1 },\n\t];\n}\n\nexport const mainAxisForSide: { [T in Edge]: Axis } = {\n\tbottom: 'vertical',\n\ttop: 'vertical',\n\tleft: 'horizontal',\n\tright: 'horizontal',\n};\n\nexport type AxisScroll = Record;\nexport type AxisMovement = Record;\nexport type Event = { type: string } & Partial;\nexport type Scenario = {\n\tlabel: string;\n\tstartPosition: Position;\n\tendPosition: Position;\n\texpectedMovement: AxisMovement;\n};\n\nexport function getScenarios(rect: DOMRect, offset: number = 0): Scenario[] {\n\treturn [\n\t\t{\n\t\t\tlabel: 'top left',\n\t\t\tstartPosition: {\n\t\t\t\tx: rect.left,\n\t\t\t\ty: rect.top,\n\t\t\t},\n\t\t\tendPosition: {\n\t\t\t\tx: rect.left - offset,\n\t\t\t\ty: rect.top - offset,\n\t\t\t},\n\t\t\texpectedMovement: { horizontal: true, vertical: true },\n\t\t},\n\t\t{\n\t\t\tlabel: 'top',\n\t\t\tstartPosition: {\n\t\t\t\tx: rect.left + rect.width / 2,\n\t\t\t\ty: rect.top,\n\t\t\t},\n\t\t\tendPosition: {\n\t\t\t\tx: rect.left + rect.width / 2,\n\t\t\t\ty: rect.top - offset,\n\t\t\t},\n\t\t\texpectedMovement: { horizontal: false, vertical: true },\n\t\t},\n\t\t{\n\t\t\tlabel: 'top right',\n\t\t\tstartPosition: {\n\t\t\t\tx: rect.right,\n\t\t\t\ty: rect.top,\n\t\t\t},\n\t\t\tendPosition: {\n\t\t\t\tx: rect.right + offset,\n\t\t\t\ty: rect.top - offset,\n\t\t\t},\n\t\t\texpectedMovement: { horizontal: true, vertical: true },\n\t\t},\n\t\t{\n\t\t\tlabel: 'right',\n\t\t\tstartPosition: {\n\t\t\t\tx: rect.right,\n\t\t\t\ty: rect.top + rect.height / 2,\n\t\t\t},\n\t\t\tendPosition: {\n\t\t\t\tx: rect.right + offset,\n\t\t\t\ty: rect.top + rect.height / 2,\n\t\t\t},\n\t\t\texpectedMovement: { horizontal: true, vertical: false },\n\t\t},\n\t\t{\n\t\t\tlabel: 'bottom right',\n\t\t\tstartPosition: {\n\t\t\t\tx: rect.right,\n\t\t\t\ty: rect.bottom,\n\t\t\t},\n\t\t\tendPosition: {\n\t\t\t\tx: rect.right + offset,\n\t\t\t\ty: rect.bottom + offset,\n\t\t\t},\n\t\t\texpectedMovement: { horizontal: true, vertical: true },\n\t\t},\n\t\t{\n\t\t\tlabel: 'bottom',\n\t\t\tstartPosition: {\n\t\t\t\tx: rect.left + rect.width / 2,\n\t\t\t\ty: rect.bottom,\n\t\t\t},\n\t\t\tendPosition: {\n\t\t\t\tx: rect.left + rect.width / 2,\n\t\t\t\ty: rect.bottom + offset,\n\t\t\t},\n\t\t\texpectedMovement: { horizontal: false, vertical: true },\n\t\t},\n\t\t{\n\t\t\tlabel: 'bottom left',\n\t\t\tstartPosition: {\n\t\t\t\tx: rect.left,\n\t\t\t\ty: rect.bottom,\n\t\t\t},\n\t\t\tendPosition: {\n\t\t\t\tx: rect.left - offset,\n\t\t\t\ty: rect.bottom + offset,\n\t\t\t},\n\t\t\texpectedMovement: { horizontal: true, vertical: true },\n\t\t},\n\t\t{\n\t\t\tlabel: 'left',\n\t\t\tstartPosition: {\n\t\t\t\tx: rect.left,\n\t\t\t\ty: rect.top + rect.height / 2,\n\t\t\t},\n\t\t\tendPosition: {\n\t\t\t\tx: rect.left - offset,\n\t\t\t\ty: rect.top + rect.height / 2,\n\t\t\t},\n\t\t\texpectedMovement: { horizontal: true, vertical: false },\n\t\t},\n\t];\n}\n\nexport function getAxisScroll(container: HTMLElement): AxisScroll {\n\treturn {\n\t\thorizontal: container.scrollLeft,\n\t\tvertical: container.scrollTop,\n\t};\n}\n\nexport function hasAxisScrolled(container: HTMLElement, previousScroll: AxisScroll): AxisMovement {\n\treturn {\n\t\thorizontal: container.scrollLeft !== previousScroll.horizontal,\n\t\tvertical: container.scrollTop !== previousScroll.vertical,\n\t};\n}\n\nexport function isExpectingScrollEvent(movement: AxisMovement): boolean {\n\treturn Object.values(movement).some(Boolean);\n}\n\nexport function getExpectedEvents(movement: AxisMovement): Event[] {\n\treturn isExpectingScrollEvent(movement)\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\ttype: 'scroll event',\n\t\t\t\t\t...movement,\n\t\t\t\t},\n\t\t\t]\n\t\t: [];\n}\n\nexport const firePointer = (() => {\n\ttype TTarget = Element | Window | Document;\n\tfunction makeDispatch(eventName: string) {\n\t\treturn function dispatch(target: TTarget, input: Partial = {}): void {\n\t\t\tconst inputWithDefaults = {\n\t\t\t\t...getDefaultInput(),\n\t\t\t\t...input,\n\t\t\t};\n\t\t\ttarget.dispatchEvent(\n\t\t\t\tnew MouseEvent(eventName, {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcancelable: true,\n\t\t\t\t\t...inputWithDefaults,\n\t\t\t\t}),\n\t\t\t);\n\t\t};\n\t}\n\n\treturn {\n\t\tdown: makeDispatch('pointerdown'),\n\t\tup: makeDispatch('pointerup'),\n\t\tmove: makeDispatch('pointermove'),\n\t\tcancel: makeDispatch('pointercancel'),\n\t};\n})();\n" }, { "path": "packages/auto-scroll/__tests__/unit/over-element/allowed-axis.spec.ts", "content": "import { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { autoScrollForElements } from '../../../src/entry-point/element';\nimport { type AllowedAxis } from '../../../src/internal-types';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\ttype AxisScroll,\n\ttype Event,\n\tgetAxisScroll,\n\tgetExpectedEvents,\n\tgetScenarios,\n\thasAxisScrolled,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tsetupNestedScrollContainers,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\ndescribe('allowed axis', () => {\n\tconst { child, parentScrollContainer: parent } = setupBasicScrollContainer();\n\n\tconst originalScrollTop = parent.scrollTop;\n\tconst originalScrollLeft = parent.scrollLeft;\n\n\tafterEach(() => {\n\t\tparent.scrollTop = originalScrollTop;\n\t\tparent.scrollLeft = originalScrollLeft;\n\t});\n\n\tgetScenarios(parent.getBoundingClientRect()).forEach(\n\t\t({ label, startPosition, expectedMovement }) => {\n\t\t\tit(`should only scroll on axis that are allowed - ${label}`, () => {\n\t\t\t\tconst events: Event[] = [];\n\n\t\t\t\tlet allowedAxis: AllowedAxis = 'all';\n\t\t\t\tlet axisScroll: AxisScroll;\n\n\t\t\t\tconst cleanup = combine(\n\t\t\t\t\tappendToBody(parent),\n\t\t\t\t\tdraggable({\n\t\t\t\t\t\telement: child,\n\t\t\t\t\t\tonDragStart: () => events.push({ type: 'draggable:start' }),\n\t\t\t\t\t}),\n\t\t\t\t\tdropTargetForElements({\n\t\t\t\t\t\telement: child,\n\t\t\t\t\t\tonDragStart: () => events.push({ type: 'dropTarget:start' }),\n\t\t\t\t\t}),\n\t\t\t\t\tautoScrollForElements({\n\t\t\t\t\t\telement: parent,\n\t\t\t\t\t\tgetAllowedAxis: () => allowedAxis,\n\t\t\t\t\t}),\n\t\t\t\t\tsetElementFromPoint(child),\n\t\t\t\t\tbind(parent, {\n\t\t\t\t\t\ttype: 'scroll',\n\t\t\t\t\t\tlistener: (event) => {\n\t\t\t\t\t\t\tevents.push({\n\t\t\t\t\t\t\t\ttype: 'scroll event',\n\t\t\t\t\t\t\t\t...hasAxisScrolled(parent, axisScroll),\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\taxisScroll = getAxisScroll(parent);\n\t\t\t\t\t\t},\n\t\t\t\t\t}),\n\t\t\t\t);\n\n\t\t\t\t// Scroll container is now looking over the center of the element\n\t\t\t\tparent.scrollTop = 500;\n\t\t\t\tparent.scrollLeft = 500;\n\t\t\t\taxisScroll = getAxisScroll(parent);\n\n\t\t\t\tuserEvent.lift(child, {\n\t\t\t\t\tclientX: startPosition.x,\n\t\t\t\t\tclientY: startPosition.y,\n\t\t\t\t});\n\n\t\t\t\texpect(events).toEqual([{ type: 'draggable:start' }, { type: 'dropTarget:start' }]);\n\t\t\t\tevents.length = 0;\n\n\t\t\t\t// First frame: allowedAxis is all.\n\t\t\t\t// Expecting no scroll to occur.\n\t\t\t\t// We don't know what the scroll speed should be until a single frame has passed.\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\texpect(events).toEqual([]);\n\n\t\t\t\t// Second frame: allowedAxis is all.\n\t\t\t\t// Expecting a scroll to occur on expected axis.\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\tconst movement = { ...expectedMovement };\n\t\t\t\tconst expectedEvents = getExpectedEvents(movement);\n\n\t\t\t\texpect(events).toEqual(expectedEvents);\n\t\t\t\tevents.length = 0;\n\n\t\t\t\t// Third frame: allowedAxis is vertical.\n\t\t\t\t// Expecting a scroll to occur on expected axis, except horizontal.\n\t\t\t\t// If neither are expected, expect no scroll.\n\t\t\t\tallowedAxis = 'vertical';\n\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\tconst verticalMovement = {\n\t\t\t\t\t...expectedMovement,\n\t\t\t\t\thorizontal: false,\n\t\t\t\t};\n\t\t\t\tconst expectedVerticalEvents = getExpectedEvents(verticalMovement);\n\n\t\t\t\texpect(events).toEqual(expectedVerticalEvents);\n\t\t\t\tevents.length = 0;\n\n\t\t\t\t// Fourth frame: allowedAxis is horizontal.\n\t\t\t\t// Expecting a scroll to occur on expected axis, except vertical.\n\t\t\t\t// If neither are expected, expect no scroll.\n\t\t\t\tallowedAxis = 'horizontal';\n\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\tconst horizontalMovement = {\n\t\t\t\t\t...expectedMovement,\n\t\t\t\t\tvertical: false,\n\t\t\t\t};\n\t\t\t\tconst expectedHorizontalEvents = getExpectedEvents(horizontalMovement);\n\n\t\t\t\texpect(events).toEqual(expectedHorizontalEvents);\n\t\t\t\tcleanup();\n\t\t\t});\n\t\t},\n\t);\n});\n\nit('should scroll on available parent axis if child axis are not allowed', () => {\n\tconst [child, parent, grandParent] = setupNestedScrollContainers([\n\t\t{ width: 10000, height: 10000 },\n\t\t{ width: 1000, height: 1000 },\n\t\t{ width: 1000, height: 1000 },\n\t]);\n\n\tconst events: Event[] = [];\n\n\tlet parentAllowedAxis: AllowedAxis = 'all';\n\tlet parentAxisScroll: AxisScroll;\n\n\tlet grandParentAllowedAxis: AllowedAxis = 'all';\n\tlet grandParentAxisScroll: AxisScroll;\n\n\tconst cleanup = combine(\n\t\tappendToBody(grandParent),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => events.push({ type: 'draggable:start' }),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => events.push({ type: 'dropTarget:start' }),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: parent,\n\t\t\tonDragStart: () => events.push({ type: 'parent:start' }),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: grandParent,\n\t\t\tonDragStart: () => events.push({ type: 'grandParent:start' }),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parent,\n\t\t\tgetAllowedAxis: () => parentAllowedAxis,\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: grandParent,\n\t\t\tgetAllowedAxis: () => grandParentAllowedAxis,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parent, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tevents.push({\n\t\t\t\t\ttype: 'parent:scroll',\n\t\t\t\t\t...hasAxisScrolled(parent, parentAxisScroll),\n\t\t\t\t});\n\t\t\t\tparentAxisScroll = getAxisScroll(parent);\n\t\t\t},\n\t\t}),\n\t\tbind(grandParent, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tevents.push({\n\t\t\t\t\ttype: 'grandParent:scroll',\n\t\t\t\t\t...hasAxisScrolled(grandParent, grandParentAxisScroll),\n\t\t\t\t});\n\t\t\t\tgrandParentAxisScroll = getAxisScroll(grandParent);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Set some initial scroll on the scroll containers\n\tparent.scrollTop = 60;\n\tparent.scrollLeft = 60;\n\tparentAxisScroll = getAxisScroll(parent);\n\n\tgrandParent.scrollTop = 120;\n\tgrandParent.scrollLeft = 120;\n\tgrandParentAxisScroll = getAxisScroll(grandParent);\n\n\t// Lifting the shared top left corner\n\tuserEvent.lift(child, {\n\t\tclientX: grandParent.getBoundingClientRect().left,\n\t\tclientY: grandParent.getBoundingClientRect().top,\n\t});\n\n\texpect(events).toEqual([\n\t\t{ type: 'draggable:start' },\n\t\t{ type: 'dropTarget:start' },\n\t\t{ type: 'parent:start' },\n\t\t{ type: 'grandParent:start' },\n\t]);\n\tevents.length = 0;\n\n\t// First frame: parent allowedAxis is all, grandparent allowedAxis is all.\n\t// Expecting no scroll to occur.\n\t// We don't know what the scroll speed should be until a single frame has passed.\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(events).toEqual([]);\n\n\t// Second frame: parent allowedAxis is all, grandparent allowedAxis is all.\n\t// Expecting a scroll to occur on both parent axis.\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(events).toEqual([{ type: 'parent:scroll', horizontal: true, vertical: true }]);\n\tevents.length = 0;\n\n\t// Third frame: parent allowedAxis is vertical, grandparent allowedAxis is all.\n\t// Expecting a scroll to occur on parent vertical axis, but not horizontal.\n\t// Expecting a scroll to occur on grandparent horizontal axis, but not vertical.\n\tparentAllowedAxis = 'vertical';\n\tgrandParentAllowedAxis = 'all';\n\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(events).toEqual([\n\t\t{ type: 'parent:scroll', horizontal: false, vertical: true },\n\t\t{ type: 'grandParent:scroll', horizontal: true, vertical: false },\n\t]);\n\tevents.length = 0;\n\n\t// Fourth frame: parent allowedAxis is horizontal, grandparent allowedAxis is all.\n\t// Expecting a scroll to occur on parent horizontal axis, but not vertical.\n\t// Expecting a scroll to occur on grandparent vertical axis, but not horizontal.\n\tparentAllowedAxis = 'horizontal';\n\tgrandParentAllowedAxis = 'all';\n\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(events).toEqual([\n\t\t{ type: 'parent:scroll', horizontal: true, vertical: false },\n\t\t{ type: 'grandParent:scroll', horizontal: false, vertical: true },\n\t]);\n\tevents.length = 0;\n\n\tcleanup();\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/over-element/can-scroll.spec.ts", "content": "import { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n\nimport { autoScrollForElements } from '../../../src/entry-point/element';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\nbeforeEach(reset);\n\nit('should not scroll scroll containers that have canScroll: () => false', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\tlet isAutoScrollingAllowed: boolean = true;\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t\tcanScroll: () => isAutoScrollingAllowed,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: () => ordered.push('scroll event'),\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tparentScrollContainer.scrollTop = 500;\n\tparentScrollContainer.scrollLeft = 500;\n\n\tuserEvent.lift(child, { clientX: 1, clientY: 1 });\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// Second frame: an auto scroll will occur\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['scroll event']);\n\tordered.length = 0;\n\n\t// disabling auto scrolling for the third frame\n\t// expecting no scroll will occur\n\tisAutoScrollingAllowed = false;\n\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// enabling auto scrolling for the third frame\n\t// expecting a scroll to occur\n\tisAutoScrollingAllowed = true;\n\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['scroll event']);\n\n\tcleanup();\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/over-element/distance-dampening.spec.ts", "content": "import { fireEvent } from '@testing-library/dom';\nimport { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { autoScrollForElements } from '../../../src/entry-point/element';\nimport { type Axis, type Side } from '../../../src/internal-types';\nimport { axisLookup } from '../../../src/shared/axis';\nimport { getInternalConfig } from '../../../src/shared/configuration';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\ttryGetRect,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\nconst defaultConfig = getInternalConfig();\nconst maxScrollPerFrame = defaultConfig.maxPixelScrollPerSecond / 60;\n\ntype Scenario = {\n\tside: Side;\n\taxis: Axis;\n};\n\nconst scenarios: Scenario[] = [\n\t{\n\t\taxis: 'vertical',\n\t\tside: 'start',\n\t},\n\t{\n\t\taxis: 'vertical',\n\t\tside: 'end',\n\t},\n\t{\n\t\taxis: 'horizontal',\n\t\tside: 'start',\n\t},\n\t{\n\t\taxis: 'horizontal',\n\t\tside: 'end',\n\t},\n];\n\nscenarios.forEach(({ axis, side }) => {\n\tconst scrollProperty = axis === 'vertical' ? 'scrollTop' : 'scrollLeft';\n\tconst mainAxisClientPoint = axis === 'vertical' ? 'clientY' : 'clientX';\n\tconst crossAxisClientPoint = mainAxisClientPoint === 'clientY' ? 'clientX' : 'clientY';\n\n\tconst { mainAxis, crossAxis } = axisLookup[axis];\n\n\tit(`should dampen acceleration based on the distance away from an edge [axis: ${axis}, side: ${side}]`, () => {\n\t\tconst { parentScrollContainer, child } = setupBasicScrollContainer({\n\t\t\tscrollContainer: { width: 1000, height: 1000 },\n\t\t\t// giving us enough room to slowly move down through the hitbox\n\t\t\tchild: { width: 20000, height: 20000 },\n\t\t});\n\t\tconst ordered: string[] = [];\n\n\t\tconst cleanup = combine(\n\t\t\tappendToBody(parentScrollContainer),\n\t\t\tsetElementFromPoint(child),\n\t\t\tdraggable({\n\t\t\t\telement: child,\n\t\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t\t}),\n\t\t\tdropTargetForElements({\n\t\t\t\telement: child,\n\t\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t\t}),\n\t\t\tautoScrollForElements({\n\t\t\t\telement: parentScrollContainer,\n\t\t\t}),\n\t\t\tbind(parentScrollContainer, {\n\t\t\t\ttype: 'scroll',\n\t\t\t\tlistener() {\n\t\t\t\t\tordered.push(`scroll event`);\n\t\t\t\t},\n\t\t\t}),\n\t\t);\n\n\t\t// setting initial scroll\n\t\tparentScrollContainer[scrollProperty] = child.getBoundingClientRect()[mainAxis.size] / 2;\n\n\t\tconst parentRect = parentScrollContainer.getBoundingClientRect();\n\n\t\tuserEvent.lift(child, {\n\t\t\t// start or end point on main axis\n\t\t\t[mainAxisClientPoint]: parentRect[mainAxis[side]],\n\t\t\t// half way point\n\t\t\t[crossAxisClientPoint]: parentRect[crossAxis.start] + parentRect[crossAxis.size] / 2,\n\t\t});\n\n\t\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\t\tordered.length = 0;\n\n\t\t// on first frame, there is no auto scroll as\n\t\t// we don't know what the scroll speed should be until\n\t\t// a single frame has passed\n\t\tadvanceTimersToNextFrame();\n\n\t\texpect(ordered).toEqual([]);\n\n\t\t// on second frame we get our first auto scroll\n\t\t{\n\t\t\tconst before = parentScrollContainer[scrollProperty];\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\tconst after = parentScrollContainer[scrollProperty];\n\t\t\t// end side = scroll amount will increase\n\t\t\t// start side = scroll amount will decrease\n\t\t\texpect(after - before).toBe(side === 'end' ? 1 : -1);\n\t\t}\n\n\t\t// fast forward so there is no more time dampening\n\t\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\t\tordered.length = 0;\n\n\t\t// now expecting to be moving at the maximum speed\n\t\tconst maxScrollInDirection = side === 'end' ? maxScrollPerFrame : -maxScrollPerFrame;\n\t\t{\n\t\t\tconst before = parentScrollContainer[scrollProperty];\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\tconst after = parentScrollContainer[scrollProperty];\n\n\t\t\t// end side = scroll amount will increase\n\t\t\t// start side = scroll amount will decrease\n\t\t\texpect(after - before).toBe(maxScrollInDirection);\n\t\t}\n\n\t\t// Okay, we now know that the time dampening is finished\n\t\t// Let's start our actual test! 😅\n\n\t\tconst autoScrollHitbox = tryGetRect({\n\t\t\t[crossAxis.start]: parentRect[crossAxis.start],\n\t\t\t[crossAxis.end]: parentRect[crossAxis.end],\n\t\t\t[mainAxis.start]:\n\t\t\t\tside === 'start'\n\t\t\t\t\t? parentRect[mainAxis.start]\n\t\t\t\t\t: parentRect[mainAxis.end] - defaultConfig.maxMainAxisHitboxSize,\n\t\t\t[mainAxis.end]:\n\t\t\t\tside === 'start'\n\t\t\t\t\t? parentRect[mainAxis.start] + defaultConfig.maxMainAxisHitboxSize\n\t\t\t\t\t: parentRect[mainAxis.end],\n\t\t});\n\n\t\t// 1. scroll up to the `startHitboxAtPercentageRemainingOfElement`\n\t\t// - expect scroll to get bigger as we get closer to edge\n\n\t\tconst maxSpeedBuffer =\n\t\t\tautoScrollHitbox[mainAxis.size] *\n\t\t\tdefaultConfig.maxScrollAtPercentageRemainingOfHitbox[mainAxis[side]];\n\n\t\t// we are currently at the max scroll speed\n\t\tlet previousChange = maxScrollInDirection;\n\n\t\t// side: 'start' → moving from the end of the hitbox upwards\n\t\t// side: 'end' → moving from the start of the hitbox downwards\n\t\tlet currentMainAxisClientPoint =\n\t\t\tside === 'start' ? autoScrollHitbox[mainAxis.end] : autoScrollHitbox[mainAxis.start];\n\n\t\tconst casesHit = {\n\t\t\tfirst: false,\n\t\t\taccelerating: [] as number[],\n\t\t\tinMaxSpeedBuffer: false,\n\t\t};\n\n\t\t// Move through the hitbox\n\t\t// side: 'start' → moving from the end of the hitbox upwards\n\t\t// side: 'end' → moving from the start of the hitbox downwards\n\t\twhile (\n\t\t\tside === 'start'\n\t\t\t\t? autoScrollHitbox[mainAxis.start] <= currentMainAxisClientPoint\n\t\t\t\t: currentMainAxisClientPoint <= autoScrollHitbox[mainAxis.end]\n\t\t) {\n\t\t\tfireEvent.dragOver(child, {\n\t\t\t\t[mainAxisClientPoint]: currentMainAxisClientPoint,\n\t\t\t\t[crossAxisClientPoint]: parentRect[crossAxis.start] + parentRect[crossAxis.size] / 2,\n\t\t\t});\n\n\t\t\t// the new drag location will not be picked up until the second frame\n\t\t\t// after a user input change.\n\t\t\t// frame 1: dragOver is throttled\n\t\t\t{\n\t\t\t\tconst before = parentScrollContainer[scrollProperty];\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\t\t\t\tconst after = parentScrollContainer[scrollProperty];\n\n\t\t\t\tconst diff = after - before;\n\t\t\t\t// diff has not changed as we are still using the old input for this frame\n\t\t\t\texpect(previousChange).toBe(diff);\n\t\t\t}\n\n\t\t\t// second frame: a scroll should occur based on the updated input\n\t\t\t{\n\t\t\t\tconst before = parentScrollContainer[scrollProperty];\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\t\t\t\tconst after = parentScrollContainer[scrollProperty];\n\n\t\t\t\tconst diff = after - before;\n\n\t\t\t\tconst situation = (() => {\n\t\t\t\t\tif (!casesHit.first) {\n\t\t\t\t\t\treturn 'first';\n\t\t\t\t\t}\n\t\t\t\t\t// accelerating forwards\n\t\t\t\t\tif (\n\t\t\t\t\t\tside === 'end' &&\n\t\t\t\t\t\tcurrentMainAxisClientPoint < autoScrollHitbox[mainAxis.end] - maxSpeedBuffer\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn 'accelerating';\n\t\t\t\t\t}\n\n\t\t\t\t\t// accelerating backwards\n\t\t\t\t\tif (\n\t\t\t\t\t\tside === 'start' &&\n\t\t\t\t\t\tcurrentMainAxisClientPoint > autoScrollHitbox[mainAxis.start] + maxSpeedBuffer\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn 'accelerating';\n\t\t\t\t\t}\n\n\t\t\t\t\treturn 'in-max-speed-buffer';\n\t\t\t\t})();\n\n\t\t\t\t// first hit: starting from the smallest scroll amount\n\t\t\t\tif (situation === 'first') {\n\t\t\t\t\t// side: start → scrolling backwards\n\t\t\t\t\t// side: start → scrolling forwards\n\t\t\t\t\texpect(diff).toBe(side === 'start' ? -1 : 1);\n\t\t\t\t\tcasesHit.first = true;\n\n\t\t\t\t\t// when the acceleration percentage is less than 1,\n\t\t\t\t\t// we will roll up to the minimum scroll change of 1px\n\t\t\t\t} else if (situation === 'accelerating') {\n\t\t\t\t\tcasesHit.accelerating.push(diff);\n\n\t\t\t\t\t// Using 'or equal to' because scrolls under 1% can result in the minimum scroll of 1px\n\t\t\t\t\t// There is an assertion outside of this loop to ensure that an acceleration occurred\n\n\t\t\t\t\t// scrolling forwards: scroll value is growing\n\t\t\t\t\tif (side === 'end') {\n\t\t\t\t\t\texpect(diff).toBeGreaterThanOrEqual(previousChange);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// scrolling forwards: scroll value is shrinking\n\t\t\t\t\t\texpect(diff).toBeLessThanOrEqual(previousChange);\n\t\t\t\t\t}\n\n\t\t\t\t\t// third case: we are in the max speed buffer\n\t\t\t\t} else {\n\t\t\t\t\tcasesHit.inMaxSpeedBuffer = true;\n\t\t\t\t\texpect(diff).toBe(maxScrollInDirection);\n\t\t\t\t}\n\n\t\t\t\tpreviousChange = diff;\n\n\t\t\t\t// side: end → scrolling forwards and moving forwards through hitbox\n\t\t\t\tif (side === 'end') {\n\t\t\t\t\tcurrentMainAxisClientPoint++;\n\t\t\t\t\t// side: start → scrolling backwards and moving forwards through hitbox\n\t\t\t\t} else {\n\t\t\t\t\tcurrentMainAxisClientPoint--;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\texpect(casesHit.first).toBe(true);\n\t\texpect(casesHit.accelerating.length).toBeGreaterThan(0);\n\t\texpect(casesHit.inMaxSpeedBuffer).toBe(true);\n\n\t\t// asserting that acceleration occurred, and that we where not just on a single speed\n\t\t{\n\t\t\tconst uniques = Array.from(new Set(casesHit.accelerating.map((value) => Math.round(value))));\n\t\t\tconst expected = Array.from({ length: maxScrollPerFrame }, (_, index) => {\n\t\t\t\tconst value = index + 1;\n\t\t\t\treturn side === 'end' ? value : -value;\n\t\t\t});\n\t\t\texpect(uniques).toEqual(expected);\n\t\t}\n\n\t\tcleanup();\n\t});\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/over-element/hitbox.spec.ts", "content": "import { bind } from 'bind-event-listener';\nimport invariant from 'tiny-invariant';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { autoScrollForElements } from '../../../src/entry-point/element';\nimport type { Axis, Side } from '../../../src/internal-types';\nimport { axisLookup } from '../../../src/shared/axis';\nimport { getInternalConfig } from '../../../src/shared/configuration';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\tgetInsidePoints,\n\tgetOutsidePoints,\n\tgetRect,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\ntype Scenario = {\n\tside: Side;\n\thitbox: DOMRect;\n\taxis: Axis;\n};\n\ntype Group = {\n\tlabel: string;\n\tchild: HTMLElement;\n\tparentScrollContainer: HTMLElement;\n\tscenarios: Scenario[];\n};\n\nconst defaultConfig = getInternalConfig();\n\nconst smallGroup: Group = (() => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer({\n\t\t// where a hitbox would be less than `defaultConfig.max\n\t\tscrollContainer: { width: 400, height: 400 },\n\t\tchild: { width: 100000, height: 100000 },\n\t});\n\n\tconst rect = parentScrollContainer.getBoundingClientRect();\n\n\tconst scenarios: Scenario[] = [\n\t\t{\n\t\t\tside: 'start',\n\t\t\taxis: 'vertical',\n\t\t\thitbox: getRect({\n\t\t\t\ttop: rect.top,\n\t\t\t\tleft: rect.left,\n\t\t\t\tbottom:\n\t\t\t\t\trect.top + rect.height * defaultConfig.startHitboxAtPercentageRemainingOfElement['top'],\n\t\t\t\tright: rect.right,\n\t\t\t}),\n\t\t},\n\t\t{\n\t\t\tside: 'end',\n\t\t\taxis: 'vertical',\n\t\t\thitbox: getRect({\n\t\t\t\ttop:\n\t\t\t\t\trect.bottom -\n\t\t\t\t\trect.height * defaultConfig.startHitboxAtPercentageRemainingOfElement['bottom'],\n\t\t\t\tleft: rect.left,\n\t\t\t\tbottom: rect.bottom,\n\t\t\t\tright: rect.right,\n\t\t\t}),\n\t\t},\n\t\t{\n\t\t\tside: 'start',\n\t\t\taxis: 'horizontal',\n\t\t\thitbox: getRect({\n\t\t\t\ttop: rect.top,\n\t\t\t\tleft: rect.left,\n\t\t\t\tbottom: rect.bottom,\n\t\t\t\tright:\n\t\t\t\t\trect.left + rect.width * defaultConfig.startHitboxAtPercentageRemainingOfElement['top'],\n\t\t\t}),\n\t\t},\n\t\t{\n\t\t\tside: 'end',\n\t\t\taxis: 'horizontal',\n\t\t\thitbox: getRect({\n\t\t\t\ttop: rect.top,\n\t\t\t\tleft:\n\t\t\t\t\trect.right -\n\t\t\t\t\trect.width * defaultConfig.startHitboxAtPercentageRemainingOfElement['bottom'],\n\t\t\t\tbottom: rect.bottom,\n\t\t\t\tright: rect.right,\n\t\t\t}),\n\t\t},\n\t];\n\n\t// validating all hitboxes are less than 200px in size\n\tscenarios.forEach((scenario) => {\n\t\tconst { mainAxis } = axisLookup[scenario.axis];\n\t\tconst size =\n\t\t\tscenario.hitbox[mainAxis.size] *\n\t\t\tdefaultConfig.startHitboxAtPercentageRemainingOfElement[mainAxis[scenario.side]];\n\t\tinvariant(\n\t\t\tsize < defaultConfig.maxMainAxisHitboxSize,\n\t\t\t'Expected hitbox to be less than the max hitbox size',\n\t\t);\n\t});\n\n\treturn {\n\t\tlabel: 'Small scroll container',\n\t\tscenarios,\n\t\tchild,\n\t\tparentScrollContainer,\n\t};\n})();\n\nconst largeGroup: Group = (() => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer({\n\t\tscrollContainer: { width: 10000, height: 10000 },\n\t\tchild: { width: 100000, height: 100000 },\n\t});\n\n\tconst rect = parentScrollContainer.getBoundingClientRect();\n\n\tconst scenarios: Scenario[] = [\n\t\t{\n\t\t\tside: 'start',\n\t\t\taxis: 'vertical',\n\t\t\thitbox: getRect({\n\t\t\t\ttop: rect.top,\n\t\t\t\tleft: rect.left,\n\t\t\t\tbottom: rect.top + defaultConfig.maxMainAxisHitboxSize,\n\t\t\t\tright: rect.right,\n\t\t\t}),\n\t\t},\n\t\t{\n\t\t\tside: 'end',\n\t\t\taxis: 'vertical',\n\t\t\thitbox: getRect({\n\t\t\t\ttop: rect.bottom - defaultConfig.maxMainAxisHitboxSize,\n\t\t\t\tleft: rect.left,\n\t\t\t\tbottom: rect.bottom,\n\t\t\t\tright: rect.right,\n\t\t\t}),\n\t\t},\n\t\t{\n\t\t\tside: 'start',\n\t\t\taxis: 'horizontal',\n\t\t\thitbox: getRect({\n\t\t\t\ttop: rect.top,\n\t\t\t\tleft: rect.left,\n\t\t\t\tbottom: rect.bottom,\n\t\t\t\tright: rect.left + defaultConfig.maxMainAxisHitboxSize,\n\t\t\t}),\n\t\t},\n\t\t{\n\t\t\tside: 'end',\n\t\t\taxis: 'horizontal',\n\t\t\thitbox: getRect({\n\t\t\t\ttop: rect.top,\n\t\t\t\tleft: rect.right - defaultConfig.maxMainAxisHitboxSize,\n\t\t\t\tbottom: rect.bottom,\n\t\t\t\tright: rect.right,\n\t\t\t}),\n\t\t},\n\t];\n\n\t// validating all hitboxes would be greater than `defaultConfig.maxMainAxisHitboxSize`\n\t// (and so will be capped to defaultConfig.maxMainAxisHitboxSize later)\n\tscenarios.forEach((scenario) => {\n\t\tconst { mainAxis } = axisLookup[scenario.axis];\n\t\tconst potentialHitboxSize =\n\t\t\trect[mainAxis.size] *\n\t\t\tdefaultConfig.startHitboxAtPercentageRemainingOfElement[mainAxis[scenario.side]];\n\t\tinvariant(\n\t\t\tpotentialHitboxSize > defaultConfig.maxMainAxisHitboxSize,\n\t\t\t`hitbox size: (${potentialHitboxSize}) is not > (${defaultConfig.maxMainAxisHitboxSize})`,\n\t\t);\n\t});\n\n\treturn {\n\t\tlabel: `Large scroll container (will be capped to ${defaultConfig.maxMainAxisHitboxSize}px hitbox)`,\n\t\tscenarios,\n\t\tchild,\n\t\tparentScrollContainer,\n\t};\n})();\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\n[smallGroup, largeGroup].forEach(({ label, parentScrollContainer, child, scenarios }) => {\n\tdescribe(`Group: ${label}`, () => {\n\t\tconst originalScrollTop = parentScrollContainer.scrollTop;\n\t\tconst originalScrollLeft = parentScrollContainer.scrollLeft;\n\n\t\tafterEach(() => {\n\t\t\tparentScrollContainer.scrollTop = originalScrollTop;\n\t\t\tparentScrollContainer.scrollLeft = originalScrollLeft;\n\t\t});\n\n\t\tscenarios.forEach((scenario) => {\n\t\t\tconst { mainAxis } = axisLookup[scenario.axis];\n\t\t\tconst scrollProperty = scenario.axis === 'vertical' ? 'scrollTop' : 'scrollLeft';\n\n\t\t\tdescribe(`axis: ${scenario.axis}, side: ${scenario.side} [on boundary]`, () => {\n\t\t\t\tgetInsidePoints(scenario.hitbox).forEach((point) => {\n\t\t\t\t\ttest(`point: [${point.label}] {x: ${point.x}, y: ${point.y}}`, () => {\n\t\t\t\t\t\tconst ordered: string[] = [];\n\n\t\t\t\t\t\tconst cleanup = combine(\n\t\t\t\t\t\t\tappendToBody(parentScrollContainer),\n\t\t\t\t\t\t\tsetElementFromPoint(child),\n\t\t\t\t\t\t\tdraggable({\n\t\t\t\t\t\t\t\telement: child,\n\t\t\t\t\t\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\t\t\t\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\tdropTargetForElements({\n\t\t\t\t\t\t\t\telement: child,\n\t\t\t\t\t\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\t\t\t\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\t\t\t\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\t\t\t\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\tautoScrollForElements({\n\t\t\t\t\t\t\t\telement: parentScrollContainer,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\tbind(parentScrollContainer, {\n\t\t\t\t\t\t\t\ttype: 'scroll',\n\t\t\t\t\t\t\t\tlistener() {\n\t\t\t\t\t\t\t\t\tordered.push(`scroll event`);\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\t// Scroll container is now looking over the center of the element\n\t\t\t\t\t\tconst initialScrollValue = child.getBoundingClientRect()[mainAxis.size] / 2;\n\t\t\t\t\t\tparentScrollContainer[scrollProperty] = initialScrollValue;\n\n\t\t\t\t\t\t// lifting on the top vertical edge of the container\n\t\t\t\t\t\tuserEvent.lift(child, {\n\t\t\t\t\t\t\tclientX: point.x,\n\t\t\t\t\t\t\tclientY: point.y,\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\t\t\t\t\t\tordered.length = 0;\n\n\t\t\t\t\t\t// on first frame, there is no auto scroll as\n\t\t\t\t\t\t// we don't know what the scroll speed should be until\n\t\t\t\t\t\t// a single frame has passed\n\t\t\t\t\t\tadvanceTimersToNextFrame();\n\n\t\t\t\t\t\texpect(ordered).toEqual([]);\n\n\t\t\t\t\t\t// scroll container has still not scrolled\n\t\t\t\t\t\texpect(parentScrollContainer[scrollProperty]).toBe(initialScrollValue);\n\n\t\t\t\t\t\t// Triggering another auto scroll - should be the minimum scroll\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tconst before = parentScrollContainer[scrollProperty];\n\t\t\t\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\t\t\t\tstepScrollBy();\n\t\t\t\t\t\t\tconst after = parentScrollContainer[scrollProperty];\n\n\t\t\t\t\t\t\t// only a single scroll event\n\t\t\t\t\t\t\texpect(ordered).toEqual(['scroll event']);\n\n\t\t\t\t\t\t\t// Scrolling up → scroll value will get lower\n\t\t\t\t\t\t\t// Scrolling down → scroll value will get higher\n\t\t\t\t\t\t\t// Scrolling on the \"start\" will scroll backwards\n\t\t\t\t\t\t\t// Scrolling on the \"end\" will scroll forwards\n\t\t\t\t\t\t\texpect(after - before).toBe(scenario.side === 'start' ? -1 : 1);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tcleanup();\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tdescribe(`axis: ${scenario.axis}, side: ${scenario.side} [outside boundary]`, () => {\n\t\t\t\tgetOutsidePoints(scenario.hitbox).forEach((point) => {\n\t\t\t\t\ttest(`point: [${point.label}] {x: ${point.x}, y: ${point.y}}`, () => {\n\t\t\t\t\t\tconst ordered: string[] = [];\n\n\t\t\t\t\t\tconst cleanup = combine(\n\t\t\t\t\t\t\tappendToBody(parentScrollContainer),\n\t\t\t\t\t\t\tsetElementFromPoint(child),\n\t\t\t\t\t\t\tdraggable({\n\t\t\t\t\t\t\t\telement: child,\n\t\t\t\t\t\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\t\t\t\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\tdropTargetForElements({\n\t\t\t\t\t\t\t\telement: child,\n\t\t\t\t\t\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\t\t\t\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\t\t\t\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\t\t\t\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\tautoScrollForElements({\n\t\t\t\t\t\t\t\telement: parentScrollContainer,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\tbind(parentScrollContainer, {\n\t\t\t\t\t\t\t\ttype: 'scroll',\n\t\t\t\t\t\t\t\tlistener() {\n\t\t\t\t\t\t\t\t\tordered.push(`scroll event`);\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\t// Scroll container is now looking over the center of the element\n\t\t\t\t\t\tconst initialScrollValue = child.getBoundingClientRect()[mainAxis.size] / 2;\n\t\t\t\t\t\tparentScrollContainer[scrollProperty] = initialScrollValue;\n\n\t\t\t\t\t\t// lifting on the top vertical edge of the container\n\t\t\t\t\t\tuserEvent.lift(child, {\n\t\t\t\t\t\t\tclientX: point.x,\n\t\t\t\t\t\t\tclientY: point.y,\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\t\t\t\t\t\tordered.length = 0;\n\n\t\t\t\t\t\t// on first frame, there is no auto scroll as\n\t\t\t\t\t\t// we don't know what the scroll speed should be until\n\t\t\t\t\t\t// a single frame has passed\n\t\t\t\t\t\tadvanceTimersToNextFrame();\n\n\t\t\t\t\t\texpect(ordered).toEqual([]);\n\n\t\t\t\t\t\t// scroll container has still not scrolled\n\t\t\t\t\t\texpect(parentScrollContainer[scrollProperty]).toBe(initialScrollValue);\n\n\t\t\t\t\t\t// No auto scroll should be triggered in the next frame\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tconst before = parentScrollContainer[scrollProperty];\n\t\t\t\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\t\t\t\tstepScrollBy();\n\t\t\t\t\t\t\tconst after = parentScrollContainer[scrollProperty];\n\n\t\t\t\t\t\t\t// only a single scroll event\n\t\t\t\t\t\t\t// expect(ordered).toEqual(['scroll event']);\n\n\t\t\t\t\t\t\t// Scrolling up → scroll value will get lower\n\t\t\t\t\t\t\t// Scrolling down → scroll value will get higher\n\t\t\t\t\t\t\t// Scrolling on the \"start\" will scroll backwards\n\t\t\t\t\t\t\t// Scrolling on the \"end\" will scroll forwards\n\t\t\t\t\t\t\texpect(after - before).toBe(0);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tcleanup();\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t});\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/over-element/max-speed.spec.ts", "content": "import { fireEvent } from '@testing-library/dom';\nimport { bind } from 'bind-event-listener';\nimport { replaceRaf } from 'raf-stub';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { autoScrollForElements } from '../../../src/entry-point/element';\nimport { getInternalConfig } from '../../../src/shared/configuration';\nimport { appendToBody, reset, setElementFromPoint, setupBasicScrollContainer } from '../_util';\n\n// need to use \"legacy\" timers so we can control\n// the exact amount of time that passes for a frame.\n// For \"modern\" jest timers, the frame rate is locked at 60fps\njest.useFakeTimers({ legacyFakeTimers: true });\nreplaceRaf();\n\nconst startTime = 0;\nlet currentTime: number = startTime;\njest.spyOn(Date, 'now').mockImplementation(() => currentTime);\n\nbeforeEach(reset);\n\nbeforeEach(() => {\n\t// @ts-expect-error: raf-stub\n\trequestAnimationFrame.reset();\n\tcurrentTime = startTime;\n});\n\nfunction stepFrame({ frameDuration }: { frameDuration: number }) {\n\tcurrentTime += frameDuration;\n\t// @ts-expect-error: raf-stub\n\trequestAnimationFrame.step(1, frameDuration);\n}\n\nfunction stepScrollBy() {\n\t// setTimeout(fn, 0) is released by `jest.advanceTimersByTime(0)` for \"legacy\" timers\n\tjest.advanceTimersByTime(0);\n}\n\nconst defaultConfig = getInternalConfig();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nit('should not scroll faster than the target 60fps scroll change on higher frame rate devices', () => {\n\tconst frameDuration120fps = 1000 / 120;\n\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer({\n\t\tchild: { height: 10000, width: 10000 },\n\t\tscrollContainer: { height: 500, width: 500 },\n\t});\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push('scroll event');\n\t\t\t},\n\t\t}),\n\t);\n\n\tfireEvent.dragStart(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().bottom,\n\t});\n\t// @ts-expect-error: raf-stub\n\trequestAnimationFrame.step(1, frameDuration120fps);\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame after starting, the auto scrolling will be collecting how long the frame took\n\t// but there will be no scroll\n\tstepFrame({ frameDuration: frameDuration120fps });\n\tstepScrollBy();\n\texpect(ordered).toEqual([]);\n\n\t// Second frame: an auto scroll will occur\n\tstepFrame({ frameDuration: frameDuration120fps });\n\tstepScrollBy();\n\texpect(ordered).toEqual(['scroll event']);\n\tordered.length = 0;\n\n\t// ensure time dampening is finished\n\t{\n\t\tconst loopStartTime = Date.now();\n\t\tconst hit = jest.fn();\n\t\twhile (Date.now() - loopStartTime <= defaultConfig.timeDampeningDurationMs) {\n\t\t\thit();\n\t\t\tstepFrame({ frameDuration: frameDuration120fps });\n\t\t\tstepScrollBy();\n\t\t\texpect(ordered).toEqual(['scroll event']);\n\t\t\tordered.length = 0;\n\t\t}\n\t\texpect(hit).toHaveBeenCalled();\n\t}\n\tconst before = {\n\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\tnow: Date.now(),\n\t};\n\tstepFrame({ frameDuration: frameDuration120fps });\n\tstepScrollBy();\n\tconst after = {\n\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\tnow: Date.now(),\n\t};\n\t// a scroll occurred\n\texpect(ordered).toEqual(['scroll event']);\n\t// slower than the 60fps speed\n\texpect(after.scrollTop - before.scrollTop).toBeLessThan(\n\t\t(defaultConfig.maxPixelScrollPerSecond / 1000) * 60,\n\t);\n\t// adjusted the speed for 120fps\n\tconst targetScrollPerMs = defaultConfig.maxPixelScrollPerSecond / 1000;\n\texpect(after.scrollTop - before.scrollTop).toBe(\n\t\tMath.ceil(targetScrollPerMs * frameDuration120fps),\n\t);\n\n\tcleanup();\n});\n\nit('should not make a scroll change bigger than the target 60fps scroll change when running at lower than 60fps', () => {\n\tconst frameDuration30fps = 1000 / 30;\n\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer({\n\t\tchild: { height: 10000, width: 10000 },\n\t\tscrollContainer: { height: 500, width: 500 },\n\t});\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push('scroll event');\n\t\t\t},\n\t\t}),\n\t);\n\n\tfireEvent.dragStart(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().bottom,\n\t});\n\tstepFrame({ frameDuration: frameDuration30fps });\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame after starting, the auto scrolling will be collecting how long the frame took\n\t// but there will be no scroll\n\tstepFrame({ frameDuration: frameDuration30fps });\n\tstepScrollBy();\n\texpect(ordered).toEqual([]);\n\n\t// Second frame: an auto scroll will occur\n\tstepFrame({ frameDuration: frameDuration30fps });\n\tstepScrollBy();\n\texpect(ordered).toEqual(['scroll event']);\n\tordered.length = 0;\n\n\t// ensure time dampening is finished\n\t{\n\t\tconst loopStartTime = Date.now();\n\t\tconst hit = jest.fn();\n\t\twhile (Date.now() - loopStartTime <= defaultConfig.timeDampeningDurationMs) {\n\t\t\thit();\n\t\t\tstepFrame({ frameDuration: frameDuration30fps });\n\t\t\tstepScrollBy();\n\t\t\texpect(ordered).toEqual(['scroll event']);\n\t\t\tordered.length = 0;\n\t\t}\n\t\texpect(hit).toHaveBeenCalled();\n\t}\n\n\tconst before = {\n\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\tnow: Date.now(),\n\t};\n\tstepFrame({ frameDuration: frameDuration30fps });\n\tstepScrollBy();\n\tconst after = {\n\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\tnow: Date.now(),\n\t};\n\t// a scroll occurred\n\texpect(ordered).toEqual(['scroll event']);\n\t// the same scroll change as if scrolling at 60fps\n\n\tconst targetScrollPerMs = defaultConfig.maxPixelScrollPerSecond / 1000;\n\tconst frameDuration60fps = 1000 / 60;\n\t// Accounting for javascript precision inaccuracy caused by `1000 / 60`\n\texpect(after.scrollTop - before.scrollTop).toBeCloseTo(targetScrollPerMs * frameDuration60fps, 1);\n\n\tcleanup();\n});\n\nit('should allow the max speed to be configured', () => {\n\tconst frameDuration60fps = 1000 / 60;\n\tconst config = getInternalConfig({ maxScrollSpeed: 'fast' });\n\tlet maxScrollSpeed: 'fast' | 'standard' = 'fast';\n\n\t// validation that our scroll speed will be faster\n\texpect(config.maxPixelScrollPerSecond).toBeGreaterThan(defaultConfig.maxPixelScrollPerSecond);\n\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer({\n\t\tchild: { height: 10000, width: 10000 },\n\t\tscrollContainer: { height: 500, width: 500 },\n\t});\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t\tgetConfiguration: () => ({\n\t\t\t\tmaxScrollSpeed,\n\t\t\t}),\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push('scroll event');\n\t\t\t},\n\t\t}),\n\t);\n\n\tfireEvent.dragStart(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().bottom,\n\t});\n\t// @ts-expect-error: raf-stub\n\trequestAnimationFrame.step(1, frameDuration60fps);\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame after starting, the auto scrolling will be collecting how long the frame took\n\t// but there will be no scroll\n\tstepFrame({ frameDuration: frameDuration60fps });\n\tstepScrollBy();\n\texpect(ordered).toEqual([]);\n\n\t// Second frame: an auto scroll will occur\n\tstepFrame({ frameDuration: frameDuration60fps });\n\tstepScrollBy();\n\texpect(ordered).toEqual(['scroll event']);\n\tordered.length = 0;\n\n\t// ensure time dampening is finished\n\t{\n\t\tconst loopStartTime = Date.now();\n\t\tconst hit = jest.fn();\n\t\twhile (Date.now() - loopStartTime <= defaultConfig.timeDampeningDurationMs) {\n\t\t\thit();\n\t\t\tstepFrame({ frameDuration: frameDuration60fps });\n\t\t\tstepScrollBy();\n\t\t\texpect(ordered).toEqual(['scroll event']);\n\t\t\tordered.length = 0;\n\t\t}\n\t\texpect(hit).toHaveBeenCalled();\n\t}\n\n\t{\n\t\tconst before = {\n\t\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\t};\n\t\tstepFrame({ frameDuration: frameDuration60fps });\n\t\tstepScrollBy();\n\t\tconst after = {\n\t\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\t};\n\t\t// a scroll occurred\n\t\texpect(ordered).toEqual(['scroll event']);\n\t\tordered.length = 0;\n\n\t\t// running at maximum \"fast\" speed\n\t\tconst targetScrollPerMs = config.maxPixelScrollPerSecond / 1000;\n\t\texpect(after.scrollTop - before.scrollTop).toBeCloseTo(\n\t\t\t// Accounting for javascript precision inaccuracy caused by:\n\t\t\t// - `1000 / 60`\n\t\t\t// - `after.scrollTop - before.scrollTop`\n\t\t\ttargetScrollPerMs * frameDuration60fps,\n\t\t\t1,\n\t\t);\n\t}\n\t// changing from \"fast\" to \"standard\" scroll speed during a drag\n\t{\n\t\tmaxScrollSpeed = 'standard';\n\t\tconst before = {\n\t\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\t};\n\t\tstepFrame({ frameDuration: frameDuration60fps });\n\t\tstepScrollBy();\n\t\tconst after = {\n\t\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\t};\n\t\t// a scroll occurred\n\t\texpect(ordered).toEqual(['scroll event']);\n\t\tordered.length = 0;\n\n\t\t// running at maximum \"standard\" speed\n\t\tconst targetScrollPerMs = defaultConfig.maxPixelScrollPerSecond / 1000;\n\t\texpect(after.scrollTop - before.scrollTop).toBeCloseTo(\n\t\t\t// Accounting for javascript precision inaccuracy caused by:\n\t\t\t// - `1000 / 60`\n\t\t\t// - `after.scrollTop - before.scrollTop`\n\t\t\ttargetScrollPerMs * frameDuration60fps,\n\t\t\t1,\n\t\t);\n\t}\n\n\tcleanup();\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/over-element/nested-scroll-containers.spec.ts", "content": "import { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { type Position } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { autoScrollForElements } from '../../../src/entry-point/element';\nimport { isWithin } from '../../../src/shared/is-within'; // this internal util is helpful for what we are trying to do\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupNestedScrollContainers,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\nit('should scroll inner elements before outer elements [single axis]', () => {\n\tconst [child, parent, grandParent] = setupNestedScrollContainers([\n\t\t// child\n\t\t{ width: 10000, height: 10000 },\n\t\t// parent\n\t\t{ width: 5000, height: 5000 },\n\t\t// grandparent,\n\t\t{ width: 1000, height: 1000 },\n\t]);\n\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(grandParent),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('child:start'),\n\t\t\tonDrop: () => ordered.push('child:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: parent,\n\t\t\tonDragStart: () => ordered.push('parent:start'),\n\t\t\tonDrop: () => ordered.push('parent:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: grandParent,\n\t\t\tonDragStart: () => ordered.push('grandParent:start'),\n\t\t\tonDrop: () => ordered.push('grandParent:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parent,\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: grandParent,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === grandParent) {\n\t\t\t\t\tordered.push('grandParent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.target === parent) {\n\t\t\t\t\t// console.log('parent', parent.scrollTop, parent.scrollLeft);\n\t\t\t\t\tordered.push('parent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\t// Set some initial scroll on the scroll containers\n\t// These are in the range where auto scrolling will occur on both\n\tparent.scrollTop = 60;\n\tgrandParent.scrollTop = 120;\n\n\t// lifting the mid point of the top edge\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tgrandParent.getBoundingClientRect().left + grandParent.getBoundingClientRect().width / 2,\n\t\tclientY: grandParent.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'child:start', 'parent:start', 'grandParent:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t{\n\t\tconst hit = jest.fn();\n\t\twhile (parent.scrollTop > 0) {\n\t\t\thit();\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\texpect(ordered).toEqual(['parent:scroll']);\n\t\t\tordered.length = 0;\n\t\t}\n\t\texpect(hit.mock.calls.length).toBeGreaterThan(1);\n\t}\n\n\t// Now it will scroll the grand parent until it's finished\n\t{\n\t\tconst hit = jest.fn();\n\t\twhile (grandParent.scrollTop > 0) {\n\t\t\thit();\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\texpect(ordered).toEqual(['grandParent:scroll']);\n\t\t\tordered.length = 0;\n\t\t}\n\t\texpect(hit.mock.calls.length).toBeGreaterThan(1);\n\t}\n\n\tcleanup();\n});\n\nit('should scroll inner elements before outer elements [both axis at a time]', () => {\n\tconst [child, parent, grandParent] = setupNestedScrollContainers([\n\t\t// child\n\t\t{ width: 10000, height: 10000 },\n\t\t// parent\n\t\t{ width: 5000, height: 5000 },\n\t\t// grandParent,\n\t\t{ width: 1000, height: 1000 },\n\t]);\n\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(grandParent),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('child:start'),\n\t\t\tonDrop: () => ordered.push('child:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: parent,\n\t\t\tonDragStart: () => ordered.push('parent:start'),\n\t\t\tonDrop: () => ordered.push('parent:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: grandParent,\n\t\t\tonDragStart: () => ordered.push('grandParent:start'),\n\t\t\tonDrop: () => ordered.push('grandParent:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parent,\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: grandParent,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === grandParent) {\n\t\t\t\t\tordered.push('grandParent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.target === parent) {\n\t\t\t\t\t// console.log('parent', parent.scrollTop, parent.scrollLeft);\n\t\t\t\t\tordered.push('parent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\t// Set some initial scroll on the scroll containers\n\tparent.scrollTop = 60;\n\tparent.scrollLeft = 60;\n\tgrandParent.scrollTop = 120;\n\tgrandParent.scrollLeft = 120;\n\n\t// lifting the shared top left corner\n\tuserEvent.lift(child, {\n\t\tclientX: grandParent.getBoundingClientRect().left,\n\t\tclientY: grandParent.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'child:start', 'parent:start', 'grandParent:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t{\n\t\tconst hit = jest.fn();\n\t\twhile (parent.scrollTop > 0) {\n\t\t\thit();\n\t\t\tconst before = {\n\t\t\t\tscrollTop: parent.scrollTop,\n\t\t\t\tscrollLeft: parent.scrollLeft,\n\t\t\t};\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\tconst after = {\n\t\t\t\tscrollTop: parent.scrollTop,\n\t\t\t\tscrollLeft: parent.scrollLeft,\n\t\t\t};\n\n\t\t\t// only the parent scrolled\n\t\t\texpect(ordered).toEqual(['parent:scroll']);\n\t\t\tordered.length = 0;\n\n\t\t\t// asserting we scrolled in both directions\n\t\t\texpect(before.scrollTop).toBeGreaterThan(after.scrollTop);\n\t\t\texpect(before.scrollLeft).toBeGreaterThan(after.scrollLeft);\n\t\t}\n\t\texpect(hit.mock.calls.length).toBeGreaterThan(1);\n\t}\n\n\t// Now it will scroll the grand parent until it's finished\n\t{\n\t\tconst hit = jest.fn();\n\t\twhile (grandParent.scrollTop > 0) {\n\t\t\thit();\n\t\t\tconst before = {\n\t\t\t\tscrollTop: grandParent.scrollTop,\n\t\t\t\tscrollLeft: grandParent.scrollLeft,\n\t\t\t};\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\tconst after = {\n\t\t\t\tscrollTop: grandParent.scrollTop,\n\t\t\t\tscrollLeft: grandParent.scrollLeft,\n\t\t\t};\n\n\t\t\t// only the grandParent scrolled\n\t\t\texpect(ordered).toEqual(['grandParent:scroll']);\n\t\t\tordered.length = 0;\n\n\t\t\t// asserting we scrolled in both directions\n\t\t\texpect(before.scrollTop).toBeGreaterThan(after.scrollTop);\n\t\t\texpect(before.scrollLeft).toBeGreaterThan(after.scrollLeft);\n\t\t}\n\t\texpect(hit.mock.calls.length).toBeGreaterThan(1);\n\t}\n\n\tcleanup();\n});\n\nit('should only scroll one scroll container per axis [case: inner is scrolling on vertical, parent on both]', () => {\n\tconst [child, parent, grandParent] = setupNestedScrollContainers([\n\t\t// child\n\t\t{ width: 10000, height: 10000 },\n\t\t// parent\n\t\t{ width: 5000, height: 5000 },\n\t\t// grandparent,\n\t\t{ width: 1000, height: 1000 },\n\t]);\n\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(grandParent),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('child:start'),\n\t\t\tonDrop: () => ordered.push('child:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: parent,\n\t\t\tonDragStart: () => ordered.push('parent:start'),\n\t\t\tonDrop: () => ordered.push('parent:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: grandParent,\n\t\t\tonDragStart: () => ordered.push('grandParent:start'),\n\t\t\tonDrop: () => ordered.push('grandParent:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parent,\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: grandParent,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === grandParent) {\n\t\t\t\t\tordered.push('grandParent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.target === parent) {\n\t\t\t\t\t// console.log('parent', parent.scrollTop, parent.scrollLeft);\n\t\t\t\t\tordered.push('parent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\t// These values are more magic than I originally planned 😅\n\t// Small amount of scroll on the parent (should finish first)\n\tparent.scrollTop = 10;\n\t// → No available scroll on the left\n\t// Larger amount on the grand parent\n\t// (due to lift point this will accelerate faster than parent)\n\tgrandParent.scrollTop = 80;\n\tgrandParent.scrollLeft = 80;\n\n\tconst client: Position = {\n\t\tx: grandParent.getBoundingClientRect().left,\n\t\ty: grandParent.getBoundingClientRect().top,\n\t};\n\n\t// validating setup\n\texpect(isWithin({ client, clientRect: parent.getBoundingClientRect() })).toBe(true);\n\texpect(isWithin({ client, clientRect: grandParent.getBoundingClientRect() })).toBe(true);\n\n\t// lifting the top left corner\n\tuserEvent.lift(child, {\n\t\tclientX: client.x,\n\t\tclientY: client.y,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'child:start', 'parent:start', 'grandParent:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll the parent until it cannot scroll any more\n\t{\n\t\tconst hit = jest.fn();\n\t\twhile (parent.scrollTop > 0) {\n\t\t\thit();\n\t\t\tconst parentBefore = {\n\t\t\t\tscrollTop: parent.scrollTop,\n\t\t\t\tscrollLeft: parent.scrollLeft,\n\t\t\t};\n\t\t\tconst grandParentBefore = {\n\t\t\t\tscrollTop: grandParent.scrollTop,\n\t\t\t\tscrollLeft: grandParent.scrollLeft,\n\t\t\t};\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\tconst parentAfter = {\n\t\t\t\tscrollTop: parent.scrollTop,\n\t\t\t\tscrollLeft: parent.scrollLeft,\n\t\t\t};\n\t\t\tconst grandParentAfter = {\n\t\t\t\tscrollTop: grandParent.scrollTop,\n\t\t\t\tscrollLeft: grandParent.scrollLeft,\n\t\t\t};\n\n\t\t\t// we scroll inner most elements outwards (bubble ordering)\n\t\t\texpect(ordered).toEqual(['parent:scroll', 'grandParent:scroll']);\n\t\t\tordered.length = 0;\n\n\t\t\t// parent scrolled on the top, but not on the left\n\t\t\texpect(parentBefore.scrollTop).toBeGreaterThan(parentAfter.scrollTop);\n\t\t\texpect(parentBefore.scrollLeft).toBe(parentAfter.scrollLeft);\n\n\t\t\t// grand parent not permitted to scroll on the top, but can scroll on left\n\t\t\texpect(grandParentBefore.scrollTop).toBe(grandParentAfter.scrollTop);\n\t\t\texpect(grandParentBefore.scrollLeft).toBeGreaterThan(grandParentAfter.scrollLeft);\n\t\t}\n\t\texpect(hit.mock.calls.length).toBeGreaterThan(1);\n\t}\n\n\t// finish off scrolling the grand parent\n\t{\n\t\tconst hit = jest.fn();\n\t\twhile (grandParent.scrollTop > 0 || grandParent.scrollLeft > 0) {\n\t\t\thit();\n\t\t\tconst grandParentBefore = {\n\t\t\t\tscrollTop: grandParent.scrollTop,\n\t\t\t\tscrollLeft: grandParent.scrollLeft,\n\t\t\t};\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\tconst grandParentAfter = {\n\t\t\t\tscrollTop: grandParent.scrollTop,\n\t\t\t\tscrollLeft: grandParent.scrollLeft,\n\t\t\t};\n\n\t\t\t// only the grandParent scrolled\n\t\t\texpect(ordered).toEqual(['grandParent:scroll']);\n\t\t\tordered.length = 0;\n\n\t\t\texpect(grandParentBefore.scrollTop).toBeGreaterThan(grandParentAfter.scrollTop);\n\n\t\t\t// There was already some scroll on the left, so expecting left\n\t\t\t// will finish scrolling before the top\n\t\t\texpect(grandParentBefore.scrollLeft).toBeGreaterThanOrEqual(grandParentAfter.scrollLeft);\n\t\t}\n\t\texpect(hit.mock.calls.length).toBeGreaterThan(1);\n\t}\n\n\tcleanup();\n});\n\nit('should only scroll one scroll container per axis [case: inner is scrolling on horizontal, parent on both]', () => {\n\tconst [child, parent, grandParent] = setupNestedScrollContainers([\n\t\t// child\n\t\t{ width: 10000, height: 10000 },\n\t\t// parent\n\t\t{ width: 5000, height: 5000 },\n\t\t// grandparent,\n\t\t{ width: 1000, height: 1000 },\n\t]);\n\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(grandParent),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('child:start'),\n\t\t\tonDrop: () => ordered.push('child:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: parent,\n\t\t\tonDragStart: () => ordered.push('parent:start'),\n\t\t\tonDrop: () => ordered.push('parent:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: grandParent,\n\t\t\tonDragStart: () => ordered.push('grandParent:start'),\n\t\t\tonDrop: () => ordered.push('grandParent:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parent,\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: grandParent,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === grandParent) {\n\t\t\t\t\tordered.push('grandParent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.target === parent) {\n\t\t\t\t\tordered.push('parent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\t// These values are more magic than I originally planned 😅\n\t// Small amount of scroll on the parent (should finish first)\n\tparent.scrollLeft = 10;\n\t// → No available scroll on the top\n\t// Larger amount on the grand parent\n\t// (due to lift point this will accelerate faster than parent)\n\tgrandParent.scrollTop = 80;\n\tgrandParent.scrollLeft = 80;\n\n\tconst client: Position = {\n\t\tx: grandParent.getBoundingClientRect().left,\n\t\ty: grandParent.getBoundingClientRect().top,\n\t};\n\n\t// validating setup\n\texpect(isWithin({ client, clientRect: parent.getBoundingClientRect() })).toBe(true);\n\texpect(isWithin({ client, clientRect: grandParent.getBoundingClientRect() })).toBe(true);\n\n\t// lifting the top left corner\n\tuserEvent.lift(child, {\n\t\tclientX: client.x,\n\t\tclientY: client.y,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'child:start', 'parent:start', 'grandParent:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll the parent until it cannot scroll any more\n\t{\n\t\tconst hit = jest.fn();\n\t\twhile (parent.scrollLeft > 0) {\n\t\t\thit();\n\t\t\tconst parentBefore = {\n\t\t\t\tscrollTop: parent.scrollTop,\n\t\t\t\tscrollLeft: parent.scrollLeft,\n\t\t\t};\n\t\t\tconst grandParentBefore = {\n\t\t\t\tscrollTop: grandParent.scrollTop,\n\t\t\t\tscrollLeft: grandParent.scrollLeft,\n\t\t\t};\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\tconst parentAfter = {\n\t\t\t\tscrollTop: parent.scrollTop,\n\t\t\t\tscrollLeft: parent.scrollLeft,\n\t\t\t};\n\t\t\tconst grandParentAfter = {\n\t\t\t\tscrollTop: grandParent.scrollTop,\n\t\t\t\tscrollLeft: grandParent.scrollLeft,\n\t\t\t};\n\n\t\t\t// we scroll inner most elements outwards (bubble ordering)\n\t\t\texpect(ordered).toEqual(['parent:scroll', 'grandParent:scroll']);\n\t\t\tordered.length = 0;\n\n\t\t\t// parent scrolled on the left, but not on the top\n\t\t\texpect(parentBefore.scrollLeft).toBeGreaterThan(parentAfter.scrollLeft);\n\t\t\texpect(parentBefore.scrollTop).toBe(parentAfter.scrollTop);\n\n\t\t\t// grand parent not permitted to scroll on the left, but can scroll on top\n\t\t\texpect(grandParentBefore.scrollLeft).toBe(grandParentAfter.scrollLeft);\n\t\t\texpect(grandParentBefore.scrollTop).toBeGreaterThan(grandParentAfter.scrollTop);\n\t\t}\n\t\texpect(hit.mock.calls.length).toBeGreaterThan(1);\n\t}\n\n\t// finish off scrolling the grand parent\n\t{\n\t\tconst hit = jest.fn();\n\t\twhile (grandParent.scrollTop > 0 || grandParent.scrollLeft > 0) {\n\t\t\thit();\n\t\t\tconst grandParentBefore = {\n\t\t\t\tscrollTop: grandParent.scrollTop,\n\t\t\t\tscrollLeft: grandParent.scrollLeft,\n\t\t\t};\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\tconst grandParentAfter = {\n\t\t\t\tscrollTop: grandParent.scrollTop,\n\t\t\t\tscrollLeft: grandParent.scrollLeft,\n\t\t\t};\n\n\t\t\t// only the grandParent scrolled\n\t\t\texpect(ordered).toEqual(['grandParent:scroll']);\n\t\t\tordered.length = 0;\n\n\t\t\texpect(grandParentBefore.scrollLeft).toBeGreaterThan(grandParentAfter.scrollLeft);\n\n\t\t\t// There was already some scroll on the top, so expecting top\n\t\t\t// will finish scrolling before the top\n\t\t\texpect(grandParentBefore.scrollTop).toBeGreaterThanOrEqual(grandParentAfter.scrollTop);\n\t\t}\n\t\texpect(hit.mock.calls.length).toBeGreaterThan(1);\n\t}\n\n\tcleanup();\n});\n\nit('should ignore scroll containers that have `canScroll: () => false` [case: inner is scrolling on horizontal, parent on both]', () => {\n\tconst [child, parent, grandParent, greatGrandParent] = setupNestedScrollContainers([\n\t\t// child\n\t\t{ width: 10000, height: 10000 },\n\t\t// parent\n\t\t{ width: 8000, height: 8000 },\n\t\t// grandparent,\n\t\t{ width: 5000, height: 5000 },\n\t\t// great grandparent,\n\t\t{ width: 2000, height: 2000 },\n\t]);\n\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(greatGrandParent),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('child:start'),\n\t\t\tonDrop: () => ordered.push('child:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: parent,\n\t\t\tonDragStart: () => ordered.push('parent:start'),\n\t\t\tonDrop: () => ordered.push('parent:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: grandParent,\n\t\t\tonDragStart: () => ordered.push('grandParent:start'),\n\t\t\tonDrop: () => ordered.push('grandParent:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: greatGrandParent,\n\t\t\tonDragStart: () => ordered.push('greatGrandParent:start'),\n\t\t\tonDrop: () => ordered.push('greatGrandParent:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parent,\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: grandParent,\n\t\t\tcanScroll: () => false,\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: greatGrandParent,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === greatGrandParent) {\n\t\t\t\t\tordered.push('greatGrandParent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif (event.target === grandParent) {\n\t\t\t\t\tordered.push('grandParent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.target === parent) {\n\t\t\t\t\t// console.log('parent', parent.scrollTop, parent.scrollLeft);\n\t\t\t\t\tordered.push('parent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\tparent.scrollLeft = 20;\n\t// no scroll available on the top side of the parent\n\tgrandParent.scrollTop = 30;\n\tgrandParent.scrollLeft = 30;\n\tgreatGrandParent.scrollTop = 40;\n\tgreatGrandParent.scrollLeft = 40;\n\n\t// lifting the top left corner\n\tuserEvent.lift(child, {\n\t\tclientX: greatGrandParent.getBoundingClientRect().left,\n\t\tclientY: greatGrandParent.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual([\n\t\t'draggable:start',\n\t\t'child:start',\n\t\t'parent:start',\n\t\t'grandParent:start',\n\t\t'greatGrandParent:start',\n\t]);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll the parent until it cannot scroll any more\n\n\tconst parentBefore = {\n\t\tscrollTop: parent.scrollTop,\n\t\tscrollLeft: parent.scrollLeft,\n\t};\n\tconst grandParentBefore = {\n\t\tscrollTop: grandParent.scrollTop,\n\t\tscrollLeft: grandParent.scrollLeft,\n\t};\n\tconst greatGrandParentBefore = {\n\t\tscrollTop: greatGrandParent.scrollTop,\n\t\tscrollLeft: greatGrandParent.scrollLeft,\n\t};\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\tconst parentAfter = {\n\t\tscrollTop: parent.scrollTop,\n\t\tscrollLeft: parent.scrollLeft,\n\t};\n\tconst grandParentAfter = {\n\t\tscrollTop: grandParent.scrollTop,\n\t\tscrollLeft: grandParent.scrollLeft,\n\t};\n\tconst greatGrandParentAfter = {\n\t\tscrollTop: greatGrandParent.scrollTop,\n\t\tscrollLeft: greatGrandParent.scrollLeft,\n\t};\n\n\t// we scroll inner most elements outwards (bubble ordering)\n\t// grandParent is disabled, so it will be skipped\n\texpect(ordered).toEqual(['parent:scroll', 'greatGrandParent:scroll']);\n\tordered.length = 0;\n\n\t// parent scrolled on the left, but not on the top\n\texpect(parentBefore.scrollLeft).toBeGreaterThan(parentAfter.scrollLeft);\n\texpect(parentBefore.scrollTop).toBe(parentAfter.scrollTop);\n\n\t// no changes to grandParent as scrolling is disabled\n\texpect(grandParentBefore.scrollTop).toBe(grandParentAfter.scrollTop);\n\texpect(grandParentBefore.scrollLeft).toBe(grandParentAfter.scrollLeft);\n\n\t// great grand parent not permitted to scroll on the left, but can scroll on top\n\texpect(greatGrandParentBefore.scrollLeft).toBe(greatGrandParentAfter.scrollLeft);\n\texpect(greatGrandParentBefore.scrollTop).toBeGreaterThan(greatGrandParentAfter.scrollTop);\n\n\tcleanup();\n});\n\n// TODO: could also add similar tests for scrolling forward, but they are proving extremely difficult to setup well\n" }, { "path": "packages/auto-scroll/__tests__/unit/over-element/registration.spec.ts", "content": "import { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { autoScrollForElements } from '../../../src/entry-point/element';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\nit('should not scroll scrollable elements that are not registered', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\t// not marking outerScrollContainer as a scroll container\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tsetElementFromPoint(child),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(`scroll event`);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// setting an initial scroll\n\tparentScrollContainer.scrollTop = 500;\n\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// on second frame - there would be a scroll is there was a registered scroll container\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\tcleanup();\n});\n\nit('should not scroll scrollable elements that are no longer registered', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(`scroll event`);\n\t\t\t},\n\t\t}),\n\t);\n\tconst unbindAutoScrolling = autoScrollForElements({\n\t\telement: parentScrollContainer,\n\t});\n\n\t// setting an initial scroll\n\tparentScrollContainer.scrollTop = 500;\n\n\t// top center of scroll container\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// on second frame we will get a scroll\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['scroll event']);\n\tordered.length = 0;\n\n\t// we will no longer get scroll updates after unregistered\n\tunbindAutoScrolling();\n\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\tcleanup();\n});\n\nit('should scroll scrollable elements are registered mid drag', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(`scroll event`);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// setting an initial scroll\n\tparentScrollContainer.scrollTop = 500;\n\n\t// top center of scroll container\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// on second frame there is no scroll\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\tordered.length = 0;\n\n\t// there will be a registration for the third frame, so we will get a scroll\n\tconst unbindAutoScrolling = autoScrollForElements({\n\t\telement: parentScrollContainer,\n\t});\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['scroll event']);\n\n\tunbindAutoScrolling();\n\tcleanup();\n});\n\nit('should warn if an elements is registered but are not scrollable', () => {\n\tconst { child } = setupBasicScrollContainer();\n\tconst warn = jest.spyOn(console, 'warn').mockImplementation(() => {});\n\n\tconst cleanup = autoScrollForElements({\n\t\telement: child,\n\t});\n\n\texpect(warn).toHaveBeenCalled();\n\n\tcleanup();\n\twarn.mockRestore();\n});\n\nit('should log a warning if an existing registration exists for an element', () => {\n\tconst { parentScrollContainer } = setupBasicScrollContainer();\n\tconst warn = jest.spyOn(console, 'warn').mockImplementation(() => {});\n\n\tconst cleanup1 = autoScrollForElements({\n\t\telement: parentScrollContainer,\n\t});\n\n\texpect(warn).not.toHaveBeenCalled();\n\n\tconst cleanup2 = autoScrollForElements({\n\t\telement: parentScrollContainer,\n\t});\n\n\texpect(warn).toHaveBeenCalled();\n\n\tcleanup1();\n\tcleanup2();\n\twarn.mockRestore();\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/over-element/start.spec.ts", "content": "import { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n\nimport { autoScrollForElements } from '../../../src/entry-point/element';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\njest.useFakeTimers();\nsetStartSystemTime();\n\nbeforeEach(reset);\n\nit('should start automatically scrolling when a drag starts', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(\n\t\t\t\t\t`scroll event {scrollLeft: ${parentScrollContainer.scrollLeft}, scrollTop: ${parentScrollContainer.scrollTop}}`,\n\t\t\t\t);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tparentScrollContainer.scrollTop = 500;\n\tparentScrollContainer.scrollLeft = 500;\n\n\tuserEvent.lift(child, { clientX: 1, clientY: 1 });\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// Second frame: an auto scroll will occur\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// Scroll backwards on both axis by 1px\n\texpect(ordered).toEqual(['scroll event {scrollLeft: 499, scrollTop: 499}']);\n\n\tcleanup();\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/over-element/stop.spec.ts", "content": "import { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { autoScrollForElements } from '../../../src/entry-point/element';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\nit('should stop scrolling when a drag ends', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(\n\t\t\t\t\t`scroll event {scrollLeft: ${parentScrollContainer.scrollLeft}, scrollTop: ${parentScrollContainer.scrollTop}}`,\n\t\t\t\t);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tparentScrollContainer.scrollTop = 500;\n\tparentScrollContainer.scrollLeft = 500;\n\n\tuserEvent.lift(child, { clientX: 1, clientY: 1 });\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// Second frame: an auto scroll will occur\n\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// Scroll backwards on both axis by 1px\n\texpect(ordered).toEqual(['scroll event {scrollLeft: 499, scrollTop: 499}']);\n\tordered.length = 0;\n\n\t// Third frame: auto scrolling should occur again\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['scroll event {scrollLeft: 498, scrollTop: 498}']);\n\tordered.length = 0;\n\n\t// End the drag\n\tuserEvent.drop(child);\n\texpect(ordered).toEqual(['draggable:drop', 'dropTarget:drop']);\n\tordered.length = 0;\n\n\t// Fourth frame: no auto scroll should occur\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\tcleanup();\n});\n\nit('should not start scrolling if the drag is cancelled in the first frame', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(\n\t\t\t\t\t`scroll event {scrollLeft: ${parentScrollContainer.scrollLeft}, scrollTop: ${parentScrollContainer.scrollTop}}`,\n\t\t\t\t);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tparentScrollContainer.scrollTop = 500;\n\tparentScrollContainer.scrollLeft = 500;\n\n\tuserEvent.lift(child, { clientX: 1, clientY: 1 });\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// End the drag\n\tuserEvent.drop(child);\n\n\texpect(ordered).toEqual(['draggable:drop', 'dropTarget:drop']);\n\tordered.length = 0;\n\n\t// Second frame: an auto scroll will normally have occurred, but the drag was cancelled.\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// no scroll events should have occurred\n\texpect(ordered).toEqual([]);\n\n\tcleanup();\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/over-element/time-dampening.spec.ts", "content": "import { fireEvent } from '@testing-library/dom';\nimport { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport {\n\tautoScrollForElements,\n\tautoScrollWindowForElements,\n} from '../../../src/entry-point/element';\nimport { getInternalConfig } from '../../../src/shared/configuration';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\tgetBubbleOrderedTree,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\nconst defaultConfig = getInternalConfig();\nconst maxScrollPerFrame = defaultConfig.maxPixelScrollPerSecond / 60;\n\nbeforeEach(() => {\n\t// resetting document scroll\n\tdocument.documentElement.scrollTop = 0;\n\tdocument.documentElement.scrollLeft = 0;\n});\n\n// Splitting up, right, down and left into separate cases rather than a loop, because doing it\n// in one helper loop was super messy and difficult to follow\nit('should dampen the acceleration of auto scrolling [new drag] - up', () => {\n\tconst { parentScrollContainer, child } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(`scroll event`);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tparentScrollContainer.scrollTop = child.getBoundingClientRect().height / 2;\n\tconst initialScrollTop = parentScrollContainer.scrollTop;\n\tconst initialScrollLeft = parentScrollContainer.scrollLeft;\n\n\t// lifting on the top vertical edge of the container\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY:\n\t\t\t// when on the 'top' side we are scrolling up\n\t\t\tparentScrollContainer.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll container has still not scrolled\n\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\tlet lastScrollTop = parentScrollContainer.scrollTop;\n\tlet lastScrollChangeSize = 0;\n\n\tlet engagementStart: number | null = null;\n\n\t// tracking the various cases to make sure we are actually hitting them\n\tconst casesHit = {\n\t\t// first few scrolls will just be 1px\n\t\t'initial-acceleration': false,\n\t\tacceleration: false,\n\t\t'time-dampening-finished': false,\n\t\t'time-dampening-finished-last-scroll': false,\n\t};\n\n\t// Keep going until we cannot scroll any more\n\twhile (parentScrollContainer.scrollTop > 0) {\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\n\t\t// asserting that one scroll event has occurred\n\t\texpect(ordered).toEqual(['scroll event']);\n\t\tordered.length = 0;\n\n\t\t// Engagement not set until first active scroll\n\t\tif (!engagementStart) {\n\t\t\tengagementStart = Date.now();\n\t\t}\n\n\t\tconst currentScrollTop = parentScrollContainer.scrollTop;\n\t\t/**\n\t\t * Sometimes minus can run into IEEE 754 floating point math issues.\n\t\t * Example: `256.4 - 241.4` is `14.99999999999972` and not `15` 😮‍💨\n\t\t * Never use `.toBe()` with `scrollChange`, only `.toBeCloseTo()`,\n\t\t * or other _not strictly equal_ assertions (eg `toBeGreaterThan()`)\n\t\t **/\n\t\tconst scrollChange = currentScrollTop - lastScrollTop;\n\n\t\t// we are scrolling backwards so our change will be negative\n\t\texpect(scrollChange).toBeLessThan(0);\n\n\t\tconst scrollChangeSize = Math.abs(scrollChange);\n\n\t\tlastScrollTop = currentScrollTop;\n\n\t\tconst now = Date.now();\n\t\tconst duration = now - engagementStart;\n\n\t\t// Case 1: in the time dampening period\n\t\tif (duration < defaultConfig.timeDampeningDurationMs) {\n\t\t\t// We are still not at the max scroll speed\n\t\t\texpect(scrollChangeSize).not.toBeGreaterThan(defaultConfig.maxPixelScrollPerSecond);\n\n\t\t\tif (scrollChangeSize === 1) {\n\t\t\t\texpect(scrollChangeSize).toBe(1);\n\t\t\t\tcasesHit['initial-acceleration'] = true;\n\t\t\t} else {\n\t\t\t\t// Each scroll is bigger than the last\n\t\t\t\texpect(scrollChangeSize).toBeGreaterThan(lastScrollChangeSize);\n\t\t\t\tcasesHit.acceleration = true;\n\t\t\t}\n\n\t\t\tlastScrollChangeSize = scrollChangeSize;\n\t\t\tcontinue;\n\t\t}\n\t\t// Case 2: scrolling at max speed, but not finished scrolling\n\t\t// Expecting max scroll speed\n\t\tif (parentScrollContainer.scrollTop !== 0) {\n\t\t\texpect(scrollChangeSize).toBeCloseTo(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\t\tcasesHit['time-dampening-finished'] = true;\n\t\t\tcontinue;\n\t\t}\n\t\t// Case 3: the last scroll finished the scrolling of the element.\n\t\t// The last scroll could be slightly less than the max scroll amount\n\t\t// as there might not have been the max scroll amount left to scroll\n\t\texpect(scrollChangeSize).toBeLessThanOrEqual(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\tcasesHit['time-dampening-finished-last-scroll'] = true;\n\n\t\t// We can finish here (even though the exit condition would catch us too)\n\t\tbreak;\n\t}\n\n\t// scroll container has been scrolled all the way to the top\n\texpect(parentScrollContainer.scrollTop).toBe(0);\n\t// asserting all our cases where hit\n\texpect(casesHit['initial-acceleration']).toBe(true);\n\texpect(casesHit.acceleration).toBe(true);\n\texpect(casesHit['time-dampening-finished']).toBe(true);\n\texpect(casesHit['time-dampening-finished-last-scroll']).toBe(true);\n\n\t// scrollLeft should not have changed\n\texpect(parentScrollContainer.scrollLeft).toBe(initialScrollLeft);\n\n\tcleanup();\n});\n\nit('should dampen the acceleration of auto scrolling [new drag] - right', () => {\n\tconst { parentScrollContainer, child } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(`scroll event`);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tparentScrollContainer.scrollLeft = child.getBoundingClientRect().width / 2;\n\tconst initialScrollLeft = parentScrollContainer.scrollLeft;\n\tconst initialScrollTop = parentScrollContainer.scrollTop;\n\n\t// lifting the mid point of the right edge\n\tuserEvent.lift(child, {\n\t\tclientX: parentScrollContainer.getBoundingClientRect().right,\n\t\tclientY:\n\t\t\tparentScrollContainer.getBoundingClientRect().top +\n\t\t\tparentScrollContainer.getBoundingClientRect().height / 2,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll container has still not scrolled\n\texpect(parentScrollContainer.scrollLeft).toBe(initialScrollLeft);\n\n\tlet lastScrollLeft = parentScrollContainer.scrollLeft;\n\tlet lastScrollChange = 0;\n\n\tlet engagementStart: number | null = null;\n\n\t// tracking the various cases to make sure we are actually hitting them\n\tconst casesHit = {\n\t\t// first few scrolls will just be 1px\n\t\t'initial-acceleration': false,\n\t\tacceleration: false,\n\t\t'time-dampening-finished': false,\n\t\t'time-dampening-finished-last-scroll': false,\n\t};\n\n\tconst maxScrollLeft = parentScrollContainer.scrollWidth - parentScrollContainer.clientWidth;\n\n\t// Keep going until we cannot scroll any more\n\twhile (parentScrollContainer.scrollLeft <= maxScrollLeft) {\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\n\t\t// asserting that one scroll event has occurred\n\t\texpect(ordered).toEqual(['scroll event']);\n\t\tordered.length = 0;\n\n\t\t// Engagement not set until first active scroll\n\t\tif (!engagementStart) {\n\t\t\tengagementStart = Date.now();\n\t\t}\n\n\t\tconst currentScrollLeft = parentScrollContainer.scrollLeft;\n\t\t/**\n\t\t * Sometimes minus can run into IEEE 754 floating point math issues.\n\t\t * Example: `256.4 - 241.4` is `14.99999999999972` and not `15` 😮‍💨\n\t\t * Never use `.toBe()` with `scrollChange`, only `.toBeCloseTo()`\n\t\t * or other _not strictly equal_ assertions (eg `toBeGreaterThan()`)\n\t\t **/\n\t\tconst scrollChange = currentScrollLeft - lastScrollLeft;\n\n\t\t// we are scrolling forward so our change will be positive\n\t\texpect(scrollChange).toBeGreaterThan(0);\n\n\t\tlastScrollLeft = currentScrollLeft;\n\n\t\tconst now = Date.now();\n\t\tconst duration = now - engagementStart;\n\n\t\t// Case 1: in the time dampening period\n\t\tif (duration < defaultConfig.timeDampeningDurationMs) {\n\t\t\t// We are still not at the max scroll speed\n\t\t\texpect(scrollChange).not.toBeGreaterThan(defaultConfig.maxPixelScrollPerSecond);\n\n\t\t\tif (scrollChange === 1) {\n\t\t\t\tcasesHit['initial-acceleration'] = true;\n\t\t\t\texpect(scrollChange).toBe(1);\n\t\t\t} else {\n\t\t\t\t// Each scroll is bigger than the last\n\t\t\t\tcasesHit.acceleration = true;\n\t\t\t\texpect(scrollChange).toBeGreaterThan(lastScrollChange);\n\t\t\t}\n\n\t\t\tlastScrollChange = scrollChange;\n\t\t\tcontinue;\n\t\t}\n\t\t// Case 2: scrolling at max speed, but not finished scrolling\n\t\t// Expecting max scroll speed\n\t\tif (parentScrollContainer.scrollLeft < maxScrollLeft) {\n\t\t\texpect(scrollChange).toBeCloseTo(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\t\tcasesHit['time-dampening-finished'] = true;\n\t\t\tcontinue;\n\t\t}\n\t\t// Case 3: the last scroll finished the scrolling of the element.\n\t\t// The last scroll could be slightly less than the max scroll amount\n\t\t// as there might not have been the max scroll amount left to scroll\n\t\texpect(scrollChange).toBeLessThanOrEqual(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\tcasesHit['time-dampening-finished-last-scroll'] = true;\n\n\t\t// We can finish here (even though the exit condition would catch us too)\n\t\tbreak;\n\t}\n\n\t// scroll container has been scrolled all the way to the top\n\texpect(parentScrollContainer.scrollLeft).toBe(maxScrollLeft);\n\t// asserting all our cases where hit\n\texpect(casesHit['initial-acceleration']).toBe(true);\n\texpect(casesHit.acceleration).toBe(true);\n\texpect(casesHit['time-dampening-finished']).toBe(true);\n\texpect(casesHit['time-dampening-finished-last-scroll']).toBe(true);\n\n\t// scrollTop should not have changed\n\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\tcleanup();\n});\n\nit('should dampen the acceleration of auto scrolling [new drag] - down', () => {\n\tconst { parentScrollContainer, child } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(`scroll event`);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tparentScrollContainer.scrollTop = child.getBoundingClientRect().height / 2;\n\tconst initialScrollTop = parentScrollContainer.scrollTop;\n\tconst initialScrollLeft = parentScrollContainer.scrollLeft;\n\n\t// lifting on the mid point of the bottom edge\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().bottom,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll container has still not scrolled\n\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\tlet lastScrollTop = parentScrollContainer.scrollTop;\n\tlet lastScrollChange = 0;\n\n\tlet engagementStart: number | null = null;\n\n\t// tracking the various cases to make sure we are actually hitting them\n\tconst casesHit = {\n\t\t// first few scrolls will just be 1px\n\t\t'initial-acceleration': false,\n\t\tacceleration: false,\n\t\t'time-dampening-finished': false,\n\t\t'time-dampening-finished-last-scroll': false,\n\t};\n\n\tconst maxScrollTop = parentScrollContainer.scrollHeight - parentScrollContainer.clientHeight;\n\n\t// Keep going until we cannot scroll any more\n\twhile (parentScrollContainer.scrollTop <= maxScrollTop) {\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\n\t\t// asserting that one scroll event has occurred\n\t\texpect(ordered).toEqual(['scroll event']);\n\t\tordered.length = 0;\n\n\t\t// Engagement not set until first active scroll\n\t\tif (!engagementStart) {\n\t\t\tengagementStart = Date.now();\n\t\t}\n\n\t\tconst currentScrollTop = parentScrollContainer.scrollTop;\n\t\t/**\n\t\t * Sometimes minus can run into IEEE 754 floating point math issues.\n\t\t * Example: `256.4 - 241.4` is `14.99999999999972` and not `15` 😮‍💨\n\t\t * Never use `.toBe()` with `scrollChange`, only `.toBeCloseTo()`\n\t\t * or other _not strictly equal_ assertions (eg `toBeGreaterThan()`)\n\t\t **/\n\t\tconst scrollChange = currentScrollTop - lastScrollTop;\n\n\t\t// we are scrolling forward so our change will be positive\n\t\texpect(scrollChange).toBeGreaterThan(0);\n\n\t\tlastScrollTop = currentScrollTop;\n\n\t\tconst now = Date.now();\n\t\tconst duration = now - engagementStart;\n\n\t\t// Case 1: in the time dampening period\n\t\tif (duration < defaultConfig.timeDampeningDurationMs) {\n\t\t\t// We are still not at the max scroll speed\n\t\t\texpect(scrollChange).not.toBeGreaterThan(defaultConfig.maxPixelScrollPerSecond);\n\n\t\t\tif (scrollChange === 1) {\n\t\t\t\texpect(scrollChange).toBe(1);\n\t\t\t\tcasesHit['initial-acceleration'] = true;\n\t\t\t} else {\n\t\t\t\t// Each scroll is bigger than the last\n\t\t\t\texpect(scrollChange).toBeGreaterThan(lastScrollChange);\n\t\t\t\tcasesHit.acceleration = true;\n\t\t\t}\n\n\t\t\tlastScrollChange = scrollChange;\n\t\t\tcontinue;\n\t\t}\n\t\t// Case 2: scrolling at max speed, but not finished scrolling\n\t\t// Expecting max scroll speed\n\t\tif (parentScrollContainer.scrollTop < maxScrollTop) {\n\t\t\texpect(scrollChange).toBeCloseTo(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\t\tcasesHit['time-dampening-finished'] = true;\n\t\t\tcontinue;\n\t\t}\n\t\t// Case 3: the last scroll finished the scrolling of the element.\n\t\t// The last scroll could be slightly less than the max scroll amount\n\t\t// as there might not have been the max scroll amount left to scroll\n\t\texpect(scrollChange).toBeLessThanOrEqual(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\tcasesHit['time-dampening-finished-last-scroll'] = true;\n\n\t\t// We can finish here (even though the exit condition would catch us too)\n\t\tbreak;\n\t}\n\n\t// scroll container has been scrolled all the way to the top\n\texpect(parentScrollContainer.scrollTop).toBe(maxScrollTop);\n\t// asserting all our cases where hit\n\texpect(casesHit['initial-acceleration']).toBe(true);\n\texpect(casesHit.acceleration).toBe(true);\n\texpect(casesHit['time-dampening-finished']).toBe(true);\n\texpect(casesHit['time-dampening-finished-last-scroll']).toBe(true);\n\n\t// scrollLeft should not have changed\n\texpect(parentScrollContainer.scrollLeft).toBe(initialScrollLeft);\n\n\tcleanup();\n});\n\nit('should dampen the acceleration of auto scrolling [new drag] - left', () => {\n\tconst { parentScrollContainer, child } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(`scroll event`);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tparentScrollContainer.scrollLeft = child.getBoundingClientRect().width / 2;\n\tconst initialScrollLeft = parentScrollContainer.scrollLeft;\n\tconst initialScrollTop = parentScrollContainer.scrollTop;\n\n\t// lifting on the vertical midpoint of the left edge of the container\n\tuserEvent.lift(child, {\n\t\tclientX: parentScrollContainer.getBoundingClientRect().left,\n\t\tclientY:\n\t\t\tparentScrollContainer.getBoundingClientRect().top +\n\t\t\tparentScrollContainer.getBoundingClientRect().height / 2,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll container has still not scrolled\n\texpect(parentScrollContainer.scrollLeft).toBe(initialScrollLeft);\n\n\tlet lastScrollLeft = parentScrollContainer.scrollLeft;\n\tlet lastScrollChangeSize = 0;\n\n\tlet engagementStart: number | null = null;\n\n\t// tracking the various cases to make sure we are actually hitting them\n\tconst casesHit = {\n\t\t// first few scrolls will just be 1px\n\t\t'initial-acceleration': false,\n\t\tacceleration: false,\n\t\t'time-dampening-finished': false,\n\t\t'time-dampening-finished-last-scroll': false,\n\t};\n\n\t// Keep going until we cannot scroll any more\n\twhile (parentScrollContainer.scrollLeft > 0) {\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\n\t\t// asserting that one scroll event has occurred\n\t\texpect(ordered).toEqual(['scroll event']);\n\t\tordered.length = 0;\n\n\t\t// Engagement not set until first active scroll\n\t\tif (!engagementStart) {\n\t\t\tengagementStart = Date.now();\n\t\t}\n\n\t\tconst currentScrollLeft = parentScrollContainer.scrollLeft;\n\t\t/**\n\t\t * Sometimes minus can run into IEEE 754 floating point math issues.\n\t\t * Example: `256.4 - 241.4` is `14.99999999999972` and not `15` 😮‍💨\n\t\t * Never use `.toBe()` with `scrollChange`, only `.toBeCloseTo()`\n\t\t * or other _not strictly equal_ assertions (eg `toBeGreaterThan()`)\n\t\t **/\n\t\tconst scrollChange = currentScrollLeft - lastScrollLeft;\n\n\t\t// we are scrolling backwards so our change will be negative\n\t\texpect(scrollChange).toBeLessThan(0);\n\n\t\tconst scrollChangeSize = Math.abs(scrollChange);\n\n\t\tlastScrollLeft = currentScrollLeft;\n\n\t\tconst now = Date.now();\n\t\tconst duration = now - engagementStart;\n\n\t\t// Case 1: in the time dampening period\n\t\tif (duration < defaultConfig.timeDampeningDurationMs) {\n\t\t\tif (scrollChangeSize === 1) {\n\t\t\t\texpect(scrollChangeSize).toBe(1);\n\t\t\t\tcasesHit['initial-acceleration'] = true;\n\t\t\t} else {\n\t\t\t\t// Each scroll is bigger than the last\n\t\t\t\texpect(scrollChangeSize).toBeGreaterThan(lastScrollChangeSize);\n\t\t\t\tcasesHit.acceleration = true;\n\t\t\t}\n\n\t\t\tlastScrollChangeSize = scrollChangeSize;\n\t\t\tcontinue;\n\t\t}\n\t\t// Case 2: scrolling at max speed, but not finished scrolling\n\t\t// Expecting max scroll speed\n\t\tif (parentScrollContainer.scrollLeft !== 0) {\n\t\t\texpect(scrollChangeSize).toBeCloseTo(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\t\tcasesHit['time-dampening-finished'] = true;\n\t\t\tcontinue;\n\t\t}\n\t\t// Case 3: the last scroll finished the scrolling of the element.\n\t\t// The last scroll could be slightly less than the max scroll amount\n\t\t// as there might not have been the max scroll amount left to scroll\n\t\texpect(scrollChangeSize).toBeLessThanOrEqual(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\tcasesHit['time-dampening-finished-last-scroll'] = true;\n\n\t\t// We can finish here (even though the exit condition would catch us too)\n\t\tbreak;\n\t}\n\n\t// scroll container has been scrolled all the way to the top\n\texpect(parentScrollContainer.scrollLeft).toBe(0);\n\t// asserting all our cases where hit\n\texpect(casesHit['initial-acceleration']).toBe(true);\n\texpect(casesHit.acceleration).toBe(true);\n\texpect(casesHit['time-dampening-finished']).toBe(true);\n\texpect(casesHit['time-dampening-finished-last-scroll']).toBe(true);\n\n\t// scrollTop should not have changed\n\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\tcleanup();\n});\n\nit('should dampen the acceleration of auto scrolling [entering into a new drop target]', () => {\n\tconst { parentScrollContainer, child } = setupBasicScrollContainer();\n\tconst [original] = getBubbleOrderedTree();\n\tconst originalRect = DOMRect.fromRect({\n\t\tx: parentScrollContainer.getBoundingClientRect().x + 20,\n\t\ty: parentScrollContainer.getBoundingClientRect().y + 20,\n\t\twidth: 100,\n\t\theight: 100,\n\t});\n\toriginal.getBoundingClientRect = () => originalRect;\n\n\tconst ordered: string[] = [];\n\n\tlet unsetElementFromPoint = setElementFromPoint(original);\n\n\tconst cleanup = combine(\n\t\tappendToBody(original),\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: original,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(\n\t\t\t\t\t`scroll event {scrollLeft: ${parentScrollContainer.scrollLeft}, scrollTop: ${parentScrollContainer.scrollTop}}`,\n\t\t\t\t);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tconst initialScrollTop = child.getBoundingClientRect().height / 2;\n\tparentScrollContainer.scrollTop = initialScrollTop;\n\n\t// lifting in center of original\n\tuserEvent.lift(original, {\n\t\tclientX: originalRect.left + originalRect.width / 2,\n\t\tclientY: originalRect.top + originalRect.height / 2,\n\t});\n\n\t// not over the inner element\n\texpect(ordered).toEqual(['draggable:start']);\n\tordered.length = 0;\n\n\t// we are expecting no auto scrolling as we are currently not over the drop target\n\tfor (let i = 0; i < 10; i++) {\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t}\n\t// also just being safe and ensuring we are totally outside any initial time dampening\n\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\t// scroll container has still not scrolled\n\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\t// dragging over the top center of our scroll container\n\t// while over the 'inner' element\n\tunsetElementFromPoint();\n\tunsetElementFromPoint = setElementFromPoint(child);\n\n\tfireEvent.dragEnter(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().top,\n\t});\n\n\t// we are now over the drop target\n\texpect(ordered).toEqual(['dropTarget:enter']);\n\n\t// no scrolling has occurred yet\n\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\tlet lastScrollTop = parentScrollContainer.scrollTop;\n\tlet lastScrollChange = 0;\n\tlet engagementStart: number | null = null;\n\n\t// tracking the various cases to make sure we are actually hitting them\n\tconst casesHit = {\n\t\tacceleration: false,\n\t\t'time-dampening-finished': false,\n\t\t'time-dampening-finished-last-scroll': false,\n\t};\n\n\t// Keep going until we cannot scroll any more\n\twhile (parentScrollContainer.scrollTop > 0) {\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\n\t\t// Engagement not set until first active scroll\n\t\tif (!engagementStart) {\n\t\t\tengagementStart = Date.now();\n\t\t}\n\n\t\tconst currentScrollTop = parentScrollContainer.scrollTop;\n\t\t/**\n\t\t * Sometimes minus can run into IEEE 754 floating point math issues.\n\t\t * Example: `256.4 - 241.4` is `14.99999999999972` and not `15` 😮‍💨\n\t\t * Never use `.toBe()` with `scrollChange`, only `.toBeCloseTo()`\n\t\t * or other _not strictly equal_ assertions (eg `toBeGreaterThan()`)\n\t\t **/\n\t\tconst scrollChange = Math.abs(currentScrollTop - lastScrollTop);\n\t\tlastScrollTop = currentScrollTop;\n\n\t\tconst now = Date.now();\n\t\tconst duration = now - engagementStart;\n\n\t\t// Case 1: in the time dampening period\n\t\tif (duration < defaultConfig.timeDampeningDurationMs) {\n\t\t\t// We are still not at the max scroll speed\n\t\t\texpect(scrollChange).not.toBeGreaterThan(defaultConfig.maxPixelScrollPerSecond);\n\t\t\t// Each scroll is bigger than the last\n\t\t\texpect(scrollChange).toBeGreaterThan(lastScrollChange);\n\t\t\tcasesHit.acceleration = true;\n\t\t\tcontinue;\n\t\t}\n\n\t\t// Case 2: scrolling at max speed, but not finished scrolling\n\t\t// Expecting max scroll speed\n\t\tif (parentScrollContainer.scrollTop !== 0) {\n\t\t\texpect(scrollChange).toBeCloseTo(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\t\tcasesHit['time-dampening-finished'] = true;\n\t\t\tcontinue;\n\t\t}\n\t\t// Case 3: the last scroll finished the scrolling of the element.\n\t\t// The last scroll could be slightly less than the max scroll amount\n\t\t// as there might not have been the max scroll amount left to scroll\n\t\texpect(scrollChange).toBeLessThanOrEqual(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\tcasesHit['time-dampening-finished-last-scroll'] = true;\n\t\t// We can finish here\n\t\tbreak;\n\t}\n\n\t// scroll container has been scrolled all the way to the top\n\texpect(parentScrollContainer.scrollTop).toBe(0);\n\t// asserting all our cases where hit\n\texpect(casesHit.acceleration).toBe(true);\n\texpect(casesHit['time-dampening-finished']).toBe(true);\n\texpect(casesHit['time-dampening-finished-last-scroll']).toBe(true);\n\n\t// TODO: pull out into separate test?\n\t// checking that no more scrolls will occur\n\tordered.length = 0;\n\tjest.advanceTimersByTime(defaultConfig.maxPixelScrollPerSecond * 2);\n\texpect(ordered).toEqual([]);\n\n\tcleanup();\n\tunsetElementFromPoint();\n});\n\nit('should start time dampening from when the element is dragged over, even if auto scrolling is not being triggered', () => {\n\tconst { parentScrollContainer, child } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tsetElementFromPoint(child),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: () => ordered.push('scroll event'),\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tconst initialScrollTop = child.getBoundingClientRect().height / 2;\n\tparentScrollContainer.scrollTop = initialScrollTop;\n\n\t// lifting in center of the the scroll container, this should not trigger any auto scrolling\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY:\n\t\t\tparentScrollContainer.getBoundingClientRect().top +\n\t\t\tparentScrollContainer.getBoundingClientRect().height / 2,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// first frame: no scroll expected even if we were auto scrolling\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\texpect(ordered).toEqual([]);\n\n\t// second frame: if we were in a hitbox for auto scrolling, scroll would occur.\n\t// not expecting any scroll event as we are not in a hitbox for auto scrolling.\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\texpect(ordered).toEqual([]);\n\n\t// ensuring we are out of the time dampening period\n\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\tstepScrollBy();\n\t// still expecting no scroll events\n\texpect(ordered).toEqual([]);\n\n\t// moving over the bottom center - this should trigger an auto scroll\n\tfireEvent.dragOver(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().bottom,\n\t});\n\n\t// not expecting the change to be picked up until the frame after the current frame\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\texpect(ordered).toEqual([]);\n\n\t// now scrolling at max speed as time dampening is finished\n\t{\n\t\tconst before = parentScrollContainer.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = parentScrollContainer.scrollTop;\n\t\texpect(after - before).toBe(maxScrollPerFrame);\n\t\texpect(ordered).toEqual(['scroll event']);\n\t}\n\n\tcleanup();\n});\n\nit('should reset time dampening when re-entering a scrollable element', () => {\n\tconst { parentScrollContainer, child } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tlet unsetElementFromPoint = setElementFromPoint(child);\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(\n\t\t\t\t\t`scroll event {scrollLeft: ${parentScrollContainer.scrollLeft}, scrollTop: ${parentScrollContainer.scrollTop}}`,\n\t\t\t\t);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tconst initialScrollTop = child.getBoundingClientRect().height / 2;\n\tparentScrollContainer.scrollTop = initialScrollTop;\n\n\t// lifting on the top vertical edge of the container\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll container has still not scrolled\n\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\tfunction execute() {\n\t\tlet lastScrollTop = parentScrollContainer.scrollTop;\n\t\tlet lastScrollChange = 0;\n\n\t\tlet engagementStart: number | null = null;\n\n\t\t// tracking the various cases to make sure we are actually hitting them\n\t\tconst casesHit = {\n\t\t\tacceleration: false,\n\t\t\t'time-dampening-finished': false,\n\t\t\t'time-dampening-finished-last-scroll': false,\n\t\t};\n\n\t\t// Keep going until we cannot scroll any more\n\t\twhile (parentScrollContainer.scrollTop > 0) {\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\n\t\t\t// Engagement not set until first active scroll\n\t\t\tif (!engagementStart) {\n\t\t\t\tengagementStart = Date.now();\n\t\t\t}\n\n\t\t\tconst currentScrollTop = parentScrollContainer.scrollTop;\n\t\t\t/**\n\t\t\t * Sometimes minus can run into IEEE 754 floating point math issues.\n\t\t\t * Example: `256.4 - 241.4` is `14.99999999999972` and not `15` 😮‍💨\n\t\t\t * Never use `.toBe()` with `scrollChange`, only `.toBeCloseTo()`\n\t\t\t * or other _not strictly equal_ assertions (eg `toBeGreaterThan()`)\n\t\t\t **/\n\t\t\tconst scrollChange = Math.abs(currentScrollTop - lastScrollTop);\n\t\t\tlastScrollTop = currentScrollTop;\n\n\t\t\tconst now = Date.now();\n\t\t\tconst duration = now - engagementStart;\n\n\t\t\t// Case 1: in the time dampening period\n\t\t\tif (duration < defaultConfig.timeDampeningDurationMs) {\n\t\t\t\t// We are still not at the max scroll speed\n\t\t\t\texpect(scrollChange).not.toBeGreaterThan(defaultConfig.maxPixelScrollPerSecond);\n\t\t\t\t// Each scroll is bigger than the last\n\t\t\t\texpect(scrollChange).toBeGreaterThan(lastScrollChange);\n\t\t\t\tcasesHit.acceleration = true;\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// Case 2: scrolling at max speed, but not finished scrolling\n\t\t\t// Expecting max scroll speed\n\t\t\tif (parentScrollContainer.scrollTop !== 0) {\n\t\t\t\texpect(scrollChange).toBeCloseTo(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\t\t\tcasesHit['time-dampening-finished'] = true;\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\t// Case 3: the last scroll finished the scrolling of the element.\n\t\t\t// The last scroll could be slightly less than the max scroll amount\n\t\t\t// as there might not have been the max scroll amount left to scroll\n\t\t\texpect(scrollChange).toBeLessThanOrEqual(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\t\tcasesHit['time-dampening-finished-last-scroll'] = true;\n\t\t\t// We can finish here\n\t\t\tbreak;\n\t\t}\n\n\t\t// scroll container has been scrolled all the way to the top\n\t\texpect(parentScrollContainer.scrollTop).toBe(0);\n\t\t// asserting all our cases where hit\n\t\texpect(casesHit.acceleration).toBe(true);\n\t\texpect(casesHit['time-dampening-finished']).toBe(true);\n\t\texpect(casesHit['time-dampening-finished-last-scroll']).toBe(true);\n\t}\n\n\t// first auto scroll\n\texecute();\n\tordered.length = 0;\n\n\t// leaving the drop target\n\tunsetElementFromPoint();\n\tunsetElementFromPoint = setElementFromPoint(document.body);\n\tfireEvent.dragEnter(document.body);\n\n\texpect(ordered).toEqual(['dropTarget:leave']);\n\tordered.length = 0;\n\n\t// let some time pass\n\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs * 2);\n\n\t// no scrolling has occurred in this time\n\texpect(ordered).toEqual([]);\n\n\t// let's drag back over the drop target\n\tunsetElementFromPoint();\n\tunsetElementFromPoint = setElementFromPoint(child);\n\tfireEvent.dragEnter(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().top,\n\t});\n\n\t// we are now over the drop target\n\texpect(ordered).toEqual(['dropTarget:enter']);\n\tordered.length = 0;\n\n\t// our auto scroll should be in action\n\t// TODO: be a bit more elegant here?\n\tparentScrollContainer.scrollTop = initialScrollTop;\n\texecute();\n\n\tcleanup();\n\tunsetElementFromPoint();\n});\n\nit('should not reset time dampening if an element is re-registered (in the same frame)', () => {\n\tconst { parentScrollContainer, child } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tsetElementFromPoint(child),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t);\n\n\tlet unbindAutoScrolling = autoScrollForElements({\n\t\telement: parentScrollContainer,\n\t});\n\n\t// Scroll container is now looking over the center of the element\n\tconst initialScrollTop = child.getBoundingClientRect().height / 2;\n\tparentScrollContainer.scrollTop = initialScrollTop;\n\n\t// lifting on the top vertical edge of the container\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll container has still not scrolled\n\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\t// on the second frame we are performing our initial scroll\n\t// which will mark the first engagement\n\t// (and will also perform the first scroll)\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// scroll container has now been scrolled\n\texpect(parentScrollContainer.scrollTop).toBeLessThan(initialScrollTop);\n\n\t// Complete the time dampening duration\n\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\n\t// Triggering another frame\n\t// we are expecting the scroll change to be the maximum allowed\n\t{\n\t\tconst before = parentScrollContainer.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = parentScrollContainer.scrollTop;\n\t\texpect(before - after).toBe(maxScrollPerFrame);\n\t}\n\n\t// Rebinding the auto scroll element\n\tunbindAutoScrolling();\n\tunbindAutoScrolling = autoScrollForElements({\n\t\telement: parentScrollContainer,\n\t});\n\n\t// Triggering another auto scroll - should be at the max speed\n\t{\n\t\tconst before = parentScrollContainer.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = parentScrollContainer.scrollTop;\n\t\texpect(before - after).toBe(maxScrollPerFrame);\n\t}\n\n\tcleanup();\n});\n\nit('should not reset time dampening if window scrolling is re-registered (in the same frame)', () => {\n\tconst [element] = getBubbleOrderedTree();\n\tconst ordered: string[] = [];\n\n\t// Setting some large scroll height on the window\n\tObject.defineProperties(document.documentElement, {\n\t\tscrollHeight: {\n\t\t\tvalue: document.documentElement.clientHeight * 10,\n\t\t\twritable: false,\n\t\t},\n\t});\n\n\tconst cleanup = combine(\n\t\tappendToBody(element),\n\t\tsetElementFromPoint(element),\n\t\tdraggable({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === document.documentElement) {\n\t\t\t\t\tordered.push('window:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\tconst initialScrollTop = document.documentElement.scrollTop;\n\tlet unbindAutoScrolling = autoScrollWindowForElements();\n\n\tuserEvent.lift(element, {\n\t\tclientX: document.documentElement.clientLeft + document.documentElement.clientWidth / 2,\n\t\tclientY: document.documentElement.clientLeft + document.documentElement.clientHeight,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll container has still not scrolled\n\texpect(document.documentElement.scrollTop).toBe(initialScrollTop);\n\n\t// on the second frame we are performing our initial scroll\n\t// which will mark the first engagement\n\t// (and will also perform the first scroll)\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// scroll container has now been scrolled\n\texpect(document.documentElement.scrollTop).toBeGreaterThan(initialScrollTop);\n\n\t// Complete the time dampening duration\n\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\n\t// Triggering another frame\n\t// we are expecting the scroll change to be the maximum allowed\n\t{\n\t\tconst before = document.documentElement.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = document.documentElement.scrollTop;\n\t\texpect(after - before).toBe(maxScrollPerFrame);\n\t}\n\n\t// Re-registering window scrolling\n\tunbindAutoScrolling();\n\tunbindAutoScrolling = autoScrollWindowForElements();\n\n\t// Triggering another auto scroll - should be at the max speed\n\t{\n\t\tconst before = document.documentElement.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = document.documentElement.scrollTop;\n\t\texpect(after - before).toBe(maxScrollPerFrame);\n\t}\n\n\tunbindAutoScrolling();\n\tcleanup();\n});\n\nit('should reset time dampening if a element is re-registered in a future frame', () => {\n\tconst { parentScrollContainer, child } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tsetElementFromPoint(child),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(\n\t\t\t\t\t`scroll event {scrollLeft: ${parentScrollContainer.scrollLeft}, scrollTop: ${parentScrollContainer.scrollTop}}`,\n\t\t\t\t);\n\t\t\t},\n\t\t}),\n\t);\n\n\tlet unbindAutoScrolling = autoScrollForElements({\n\t\telement: parentScrollContainer,\n\t});\n\n\t// Scroll container is now looking over the center of the element\n\tconst initialScrollTop = child.getBoundingClientRect().height / 2;\n\tparentScrollContainer.scrollTop = initialScrollTop;\n\n\t// lifting on the top vertical edge of the container\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll container has still not scrolled\n\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\t// on the second frame we are performing our initial scroll\n\t// which will mark the first engagement\n\t// (and will also perform the first scroll)\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// scroll container has now been scrolled\n\texpect(parentScrollContainer.scrollTop).toBeLessThan(initialScrollTop);\n\n\t// Complete the time dampening duration\n\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\n\t// Triggering another frame\n\t// we are expecting the scroll change to be the maximum allowed\n\t{\n\t\tconst before = parentScrollContainer.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = parentScrollContainer.scrollTop;\n\t\texpect(before - after).toBe(maxScrollPerFrame);\n\t}\n\n\t// Unbinding the auto scroll element\n\tunbindAutoScrolling();\n\n\t// Triggering a scroll - should not scroll the scroll container\n\t{\n\t\tconst before = parentScrollContainer.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = parentScrollContainer.scrollTop;\n\t\texpect(before).toBe(after);\n\t}\n\n\t// Binding the scrollable element again\n\tunbindAutoScrolling = autoScrollForElements({\n\t\telement: parentScrollContainer,\n\t});\n\n\t// Triggering another auto scroll - should be the minimum scroll\n\t{\n\t\tconst before = parentScrollContainer.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = parentScrollContainer.scrollTop;\n\t\texpect(before - after).toBe(1);\n\t}\n\n\tcleanup();\n\tunbindAutoScrolling();\n});\n\nit('should reset time dampening if a element scroll is disabled and re-enabled in a future frame', () => {\n\tconst { parentScrollContainer, child } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\tlet isAutoScrollingAllowed: boolean = true;\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tsetElementFromPoint(child),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t\tcanScroll: () => isAutoScrollingAllowed,\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tconst initialScrollTop = child.getBoundingClientRect().height / 2;\n\tparentScrollContainer.scrollTop = initialScrollTop;\n\n\t// lifting on the top vertical edge of the container\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\t// scroll container has still not scrolled\n\texpect(ordered).toEqual([]);\n\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\t// on the second frame we are performing our initial scroll\n\t// which will mark the first engagement\n\t// (and will also perform the first scroll)\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// scroll container has now been scrolled\n\texpect(parentScrollContainer.scrollTop).toBeLessThan(initialScrollTop);\n\n\t// Complete the time dampening duration\n\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\n\t// Triggering another frame\n\t// we are expecting the scroll change to be the maximum allowed\n\t{\n\t\tconst before = parentScrollContainer.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = parentScrollContainer.scrollTop;\n\t\texpect(before - after).toBe(maxScrollPerFrame);\n\t}\n\n\t// No longer allowing auto scrolling\n\tisAutoScrollingAllowed = false;\n\n\t// Triggering a scroll - should not scroll the scroll container\n\t{\n\t\tconst before = parentScrollContainer.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = parentScrollContainer.scrollTop;\n\t\texpect(before).toBe(after);\n\t}\n\n\t// Binding the scrollable element again\n\tisAutoScrollingAllowed = true;\n\n\t// Triggering another auto scroll - should be the minimum scroll\n\t{\n\t\tconst before = parentScrollContainer.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = parentScrollContainer.scrollTop;\n\t\texpect(before - after).toBe(1);\n\t}\n\n\tcleanup();\n});\n\nit('should reset time dampening if a window scrolling is re-registered in a future frame', () => {\n\tconst [element] = getBubbleOrderedTree();\n\tconst ordered: string[] = [];\n\n\t// Setting some large scroll height on the window\n\tObject.defineProperties(document.documentElement, {\n\t\tscrollHeight: {\n\t\t\tvalue: document.documentElement.clientHeight * 10,\n\t\t\twritable: false,\n\t\t},\n\t});\n\n\tconst cleanup = combine(\n\t\tappendToBody(element),\n\t\tsetElementFromPoint(element),\n\t\tdraggable({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === document.documentElement) {\n\t\t\t\t\tordered.push('window:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\tconst initialScrollTop = document.documentElement.scrollTop;\n\tlet unbindAutoScrolling = autoScrollWindowForElements();\n\n\tuserEvent.lift(element, {\n\t\tclientX: document.documentElement.clientLeft + document.documentElement.clientWidth / 2,\n\t\tclientY: document.documentElement.clientLeft + document.documentElement.clientHeight,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll container has still not scrolled\n\texpect(document.documentElement.scrollTop).toBe(initialScrollTop);\n\n\t// on the second frame we are performing our initial scroll\n\t// which will mark the first engagement\n\t// (and will also perform the first scroll)\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// scroll container has now been scrolled\n\texpect(document.documentElement.scrollTop).toBeGreaterThan(initialScrollTop);\n\n\t// Complete the time dampening duration\n\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\n\t// Triggering another frame\n\t// we are expecting the scroll change to be the maximum allowed\n\t{\n\t\tconst before = document.documentElement.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = document.documentElement.scrollTop;\n\t\texpect(after - before).toBe(maxScrollPerFrame);\n\t}\n\n\t// un-registering window scrolling\n\tunbindAutoScrolling();\n\n\t// Triggering another auto scroll - should not scroll\n\t{\n\t\tconst before = document.documentElement.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = document.documentElement.scrollTop;\n\t\texpect(after).toBe(before);\n\t}\n\n\tunbindAutoScrolling = autoScrollWindowForElements();\n\n\t// Triggering another auto scroll - should be the minimum scroll\n\t{\n\t\tconst before = document.documentElement.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = document.documentElement.scrollTop;\n\t\texpect(after - before).toBe(1);\n\t}\n\n\tunbindAutoScrolling();\n\tcleanup();\n});\n\nit('should reset time dampening if a window scrolling is re-enabled in a future frame', () => {\n\tconst [element] = getBubbleOrderedTree();\n\tconst ordered: string[] = [];\n\tlet isAutoScrollingAllowed: boolean = true;\n\n\t// Setting some large scroll height on the window\n\tObject.defineProperties(document.documentElement, {\n\t\tscrollHeight: {\n\t\t\tvalue: document.documentElement.clientHeight * 10,\n\t\t\twritable: false,\n\t\t},\n\t});\n\n\tconst cleanup = combine(\n\t\tappendToBody(element),\n\t\tsetElementFromPoint(element),\n\t\tdraggable({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollWindowForElements({\n\t\t\tcanScroll: () => isAutoScrollingAllowed,\n\t\t}),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === document.documentElement) {\n\t\t\t\t\tordered.push('window:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\tconst initialScrollTop = document.documentElement.scrollTop;\n\n\tuserEvent.lift(element, {\n\t\tclientX: document.documentElement.clientLeft + document.documentElement.clientWidth / 2,\n\t\tclientY: document.documentElement.clientLeft + document.documentElement.clientHeight,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\t// scroll container has still not scrolled\n\texpect(ordered).toEqual([]);\n\texpect(document.documentElement.scrollTop).toBe(initialScrollTop);\n\n\t// on the second frame we are performing our initial scroll\n\t// which will mark the first engagement\n\t// (and will also perform the first scroll)\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// scroll container has now been scrolled\n\texpect(document.documentElement.scrollTop).toBeGreaterThan(initialScrollTop);\n\texpect(ordered).toEqual(['window:scroll']);\n\tordered.length = 0;\n\n\t// Complete the time dampening duration\n\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\n\t// Triggering another frame\n\t// we are expecting the scroll change to be the maximum allowed\n\t{\n\t\tconst before = document.documentElement.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = document.documentElement.scrollTop;\n\t\texpect(after - before).toBe(maxScrollPerFrame);\n\t}\n\n\t// disabling auto scroll\n\tisAutoScrollingAllowed = false;\n\n\t// Triggering another auto scroll - should not scroll\n\t{\n\t\tconst before = document.documentElement.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = document.documentElement.scrollTop;\n\t\texpect(after).toBe(before);\n\t}\n\n\t// re-enabling auto scrolling\n\tisAutoScrollingAllowed = true;\n\n\t// Triggering another auto scroll - should be the minimum scroll\n\t{\n\t\tconst before = document.documentElement.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = document.documentElement.scrollTop;\n\t\texpect(after - before).toBe(1);\n\t}\n\n\tcleanup();\n});\n\nit('should not dampen time after the time dampening period has finished [on original axis]', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(\n\t\t\t\t\t`scroll event {scrollLeft: ${parentScrollContainer.scrollLeft}, scrollTop: ${parentScrollContainer.scrollTop}}`,\n\t\t\t\t);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tconst initialScrollTop = parentScrollContainer.getBoundingClientRect().height / 2;\n\tparentScrollContainer.scrollTop = initialScrollTop;\n\t// just checking I got the math right\n\texpect(initialScrollTop).toBe(500);\n\n\t// lifting on the top vertical edge of the container\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll container has still not scrolled\n\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\t// on the second frame we are performing our initial scroll\n\t// which will mark the first engagement\n\t// (and will also perform the first scroll)\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// scroll container has still been scrolled\n\texpect(parentScrollContainer.scrollTop).toBeLessThan(initialScrollTop);\n\n\t// Complete the time dampening duration\n\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\n\t// just asserting we have a setup that will execute the test correctly\n\tconst beforeScrollTop = parentScrollContainer.scrollTop;\n\texpect(beforeScrollTop).toBeLessThan(initialScrollTop);\n\t// our next scroll should have room for more than the max scroll\n\t// (otherwise we are not testing what we expect)\n\texpect(beforeScrollTop).toBeGreaterThan(maxScrollPerFrame);\n\n\t// Triggering another frame\n\t// we are expecting the scroll change to be the maximum allowed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\tconst afterScrollTop = parentScrollContainer.scrollTop;\n\texpect(beforeScrollTop - afterScrollTop).toBe(maxScrollPerFrame);\n\n\tcleanup();\n});\n\nit('should not dampen time after the time dampening period has finished [on different axis]', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(\n\t\t\t\t\t`scroll event {scrollLeft: ${parentScrollContainer.scrollLeft}, scrollTop: ${parentScrollContainer.scrollTop}}`,\n\t\t\t\t);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Initial scrolling on the top and left\n\tconst initialScrollTop = parentScrollContainer.getBoundingClientRect().height / 2;\n\tparentScrollContainer.scrollTop = initialScrollTop;\n\tconst initialScrollLeft = parentScrollContainer.getBoundingClientRect().width / 2;\n\tparentScrollContainer.scrollLeft = initialScrollLeft;\n\n\t// checking our initial math is correct\n\texpect(parentScrollContainer.scrollLeft).toBe(500);\n\n\t// lifting on the top vertical edge of the container\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().top,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll container has still not scrolled\n\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\t// on the second frame we are performing our initial scroll\n\t// which will mark the first engagement\n\t// (and will also perform the first scroll)\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// scroll container has been scrolled on the top\n\texpect(parentScrollContainer.scrollTop).toBeLessThan(initialScrollTop);\n\t// scroll container has not been scrolled on the left yet\n\texpect(parentScrollContainer.scrollLeft).toBe(initialScrollLeft);\n\t// ensuring we have enough room to do a max scroll\n\texpect(parentScrollContainer.scrollLeft).toBeGreaterThan(maxScrollPerFrame);\n\n\t// Complete the time dampening duration\n\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\n\texpect(parentScrollContainer.scrollLeft).toBe(initialScrollLeft);\n\n\tconst rect = parentScrollContainer.getBoundingClientRect();\n\t// mid center on left edge\n\tfireEvent.dragOver(child, {\n\t\tclientX: rect.left,\n\t\tclientY: rect.top + rect.height,\n\t});\n\n\t// first frame: this will update the 'input' for a drag (update changes are throttled inside of a frame)\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(initialScrollLeft).toBe(parentScrollContainer.scrollLeft);\n\n\t// this should now trigger an auto scroll of the max scroll (no time dampening)\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(initialScrollLeft - parentScrollContainer.scrollLeft).toBe(maxScrollPerFrame);\n\n\tcleanup();\n});\n\n// only checking forward direction, as code path is the same as scroll containers\nit('should reset time dampening when doing repeated drag operations', () => {\n\tconst { parentScrollContainer, child } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tsetElementFromPoint(child),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t);\n\n\tfunction dragOperation() {\n\t\t// Scroll container is now looking over the center of the element\n\t\tconst initialScrollTop = child.getBoundingClientRect().height / 2;\n\t\tparentScrollContainer.scrollTop = initialScrollTop;\n\n\t\t// lifting on the top vertical edge of the container\n\t\tuserEvent.lift(child, {\n\t\t\tclientX:\n\t\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\t\tclientY: parentScrollContainer.getBoundingClientRect().top,\n\t\t});\n\n\t\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\t\tordered.length = 0;\n\n\t\t// on first frame, there is no auto scroll as\n\t\t// we don't know what the scroll speed should be until\n\t\t// a single frame has passed\n\t\tadvanceTimersToNextFrame();\n\n\t\texpect(ordered).toEqual([]);\n\n\t\t// scroll container has still not scrolled\n\t\texpect(parentScrollContainer.scrollTop).toBe(initialScrollTop);\n\n\t\t// on the second frame we are performing our initial scroll\n\t\t// which will mark the first engagement\n\t\t// (and will also perform the first scroll)\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\n\t\t// scroll container has now been scrolled\n\t\texpect(parentScrollContainer.scrollTop).toBeLessThan(initialScrollTop);\n\n\t\t// Complete the time dampening duration\n\t\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\n\t\t// Triggering another frame\n\t\t// we are expecting the scroll change to be the maximum allowed\n\t\t{\n\t\t\tconst before = parentScrollContainer.scrollTop;\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\tconst after = parentScrollContainer.scrollTop;\n\t\t\texpect(before - after).toBe(maxScrollPerFrame);\n\t\t}\n\n\t\tuserEvent.drop(child);\n\t\texpect(ordered).toEqual(['draggable:drop', 'dropTarget:drop']);\n\t\tordered.length = 0;\n\t}\n\n\t// Let's do a few drag operations and ensure that the behaviour is the same\n\n\tdragOperation();\n\tdragOperation();\n\tdragOperation();\n\tdragOperation();\n\n\tcleanup();\n});\n\nit('should apply time dampening for window scrolling', () => {\n\tconst [element] = getBubbleOrderedTree();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(element),\n\t\tdraggable({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollWindowForElements(),\n\t\tsetElementFromPoint(element),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener(event) {\n\t\t\t\tif (event.target === document.documentElement) {\n\t\t\t\t\tordered.push('window:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\t// setting a large vertical amount of available scroll\n\tObject.defineProperties(document.documentElement, {\n\t\tscrollHeight: {\n\t\t\tvalue: document.documentElement.clientHeight * 10,\n\t\t\twritable: false,\n\t\t},\n\t});\n\n\tconst initialScrollTop = document.documentElement.scrollTop;\n\tconst initialScrollLeft = document.documentElement.scrollLeft;\n\texpect(initialScrollTop).toBe(0);\n\texpect(initialScrollLeft).toBe(0);\n\n\t// starting a drag\n\tuserEvent.lift(element);\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// in the first frame before auto scrolling has started\n\t// we are updating our drag so that we are over\n\tfireEvent.dragEnter(document.body, {\n\t\tclientX: document.documentElement.clientLeft + document.documentElement.clientWidth / 2,\n\t\tclientY: document.documentElement.clientTop + document.documentElement.clientHeight,\n\t});\n\texpect(ordered).toEqual(['dropTarget:leave']);\n\tordered.length = 0;\n\n\t// in the first frame, there will be no auto scroll\n\tadvanceTimersToNextFrame();\n\texpect(ordered).toEqual([]);\n\n\t// checking window has not been scrolled\n\texpect(document.documentElement.scrollTop).toBe(initialScrollTop);\n\n\tlet lastScrollTop = initialScrollTop;\n\tlet lastScrollChange = 0;\n\n\tlet engagementStart: number | null = null;\n\n\t// tracking the various cases to make sure we are actually hitting them\n\tconst casesHit = {\n\t\tacceleration: false,\n\t\t'time-dampening-finished': false,\n\t\t'time-dampening-finished-last-scroll': false,\n\t};\n\n\tconst maxScrollTop =\n\t\tdocument.documentElement.scrollHeight - document.documentElement.clientHeight;\n\n\t// Keep going until we cannot scroll any more\n\twhile (document.documentElement.scrollTop <= maxScrollTop) {\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\n\t\t// asserting that one scroll event has occurred\n\t\texpect(ordered).toEqual(['window:scroll']);\n\t\tordered.length = 0;\n\n\t\t// Engagement not set until first active scroll\n\t\tif (!engagementStart) {\n\t\t\tengagementStart = Date.now();\n\t\t}\n\n\t\tconst currentScrollTop = document.documentElement.scrollTop;\n\t\t/**\n\t\t * Sometimes minus can run into IEEE 754 floating point math issues.\n\t\t * Example: `256.4 - 241.4` is `14.99999999999972` and not `15` 😮‍💨\n\t\t * Never use `.toBe()` with `scrollChange`, only `.toBeCloseTo()`\n\t\t * or other _not strictly equal_ assertions (eg `toBeGreaterThan()`)\n\t\t * (which takes into account floating point issues).\n\t\t **/\n\t\tconst scrollChange = currentScrollTop - lastScrollTop;\n\n\t\t// we are scrolling forward so our change will be positive\n\t\texpect(scrollChange).toBeGreaterThan(0);\n\n\t\tlastScrollTop = currentScrollTop;\n\n\t\tconst now = Date.now();\n\t\tconst duration = now - engagementStart;\n\n\t\t// Case 1: in the time dampening period\n\t\tif (duration < defaultConfig.timeDampeningDurationMs) {\n\t\t\t// We are still not at the max scroll speed\n\t\t\texpect(scrollChange).not.toBeGreaterThan(defaultConfig.maxPixelScrollPerSecond);\n\t\t\t// Each scroll is bigger than the last\n\t\t\texpect(scrollChange).toBeGreaterThan(lastScrollChange);\n\t\t\tcasesHit.acceleration = true;\n\t\t\tcontinue;\n\t\t}\n\n\t\t// Case 2: scrolling at max speed, but not finished scrolling\n\t\t// Expecting max scroll speed\n\t\tif (document.documentElement.scrollTop < maxScrollTop) {\n\t\t\texpect(scrollChange).toBeCloseTo(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\t\tcasesHit['time-dampening-finished'] = true;\n\t\t\tcontinue;\n\t\t}\n\t\t// Case 3: the last scroll finished the scrolling of the element.\n\t\t// The last scroll could be slightly less than the max scroll amount\n\t\t// as there might not have been the max scroll amount left to scroll\n\t\texpect(scrollChange).toBeLessThanOrEqual(defaultConfig.maxPixelScrollPerSecond / 60);\n\t\tcasesHit['time-dampening-finished-last-scroll'] = true;\n\n\t\t// We can finish here (even though the exit condition would catch us too)\n\t\tbreak;\n\t}\n\n\t// scroll container has been scrolled all the way to the top\n\texpect(document.documentElement.scrollTop).toBe(maxScrollTop);\n\t// asserting all our cases where hit\n\texpect(casesHit.acceleration).toBe(true);\n\texpect(casesHit['time-dampening-finished']).toBe(true);\n\texpect(casesHit['time-dampening-finished-last-scroll']).toBe(true);\n\n\t// scrollLeft should not have changed\n\texpect(document.documentElement.scrollLeft).toBe(initialScrollLeft);\n\n\tcleanup();\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/over-element/window-scrolling.spec.ts", "content": "import { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport {\n\tautoScrollForElements,\n\tautoScrollWindowForElements,\n} from '../../../src/entry-point/element';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\tgetBubbleOrderedTree,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\nbeforeEach(() => {\n\tdocument.documentElement.scrollTop = 0;\n});\n\nfunction canScrollOnBottom(element: HTMLElement): boolean {\n\treturn Math.ceil(element.scrollTop) + element.clientHeight < element.scrollHeight;\n}\n\ntest('validating initial properties are set by jsdom', () => {\n\texpect(document.documentElement.clientHeight).toBe(768);\n\texpect(document.documentElement.clientWidth).toBe(1024);\n\texpect(document.documentElement.clientTop).toBe(0);\n\texpect(document.documentElement.clientLeft).toBe(0);\n\texpect(document.documentElement.scrollTop).toBe(0);\n\texpect(document.documentElement.scrollLeft).toBe(0);\n});\n\nit('should scroll the window if it is scrollable', () => {\n\tconst [element] = getBubbleOrderedTree();\n\tconst ordered: string[] = [];\n\n\t// Setting some large scroll height on the window\n\tObject.defineProperties(document.documentElement, {\n\t\tscrollHeight: {\n\t\t\tvalue: document.documentElement.clientHeight * 10,\n\t\t\twritable: false,\n\t\t},\n\t});\n\n\tconst cleanup = combine(\n\t\tappendToBody(element),\n\t\tdraggable({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tautoScrollWindowForElements(),\n\t\tsetElementFromPoint(element),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === document.documentElement) {\n\t\t\t\t\tordered.push('window:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\tuserEvent.lift(element, {\n\t\tclientX: document.documentElement.clientLeft + document.documentElement.clientWidth / 2,\n\t\tclientY: document.documentElement.clientLeft + document.documentElement.clientHeight,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// next frame should scroll the window\n\tconst before = document.documentElement.scrollTop;\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\tconst after = document.documentElement.scrollTop;\n\texpect(after).toBeGreaterThan(before);\n\texpect(ordered).toEqual(['window:scroll']);\n\tordered.length = 0;\n\n\tcleanup();\n});\n\nit('should not warn if there are multiple registrations', () => {\n\tconst warn = jest.spyOn(console, 'warn').mockImplementation(() => {});\n\tconst cleanup = combine(\n\t\tautoScrollWindowForElements(),\n\t\tautoScrollWindowForElements(),\n\t\tautoScrollWindowForElements(),\n\t);\n\n\texpect(warn).not.toHaveBeenCalled();\n\n\tcleanup();\n\twarn.mockRestore();\n});\n\nit('should only scroll the window once, even if there are other registrations', () => {\n\tconst [element] = getBubbleOrderedTree();\n\tconst ordered: string[] = [];\n\n\t// Setting some large scroll height on the window\n\tObject.defineProperties(document.documentElement, {\n\t\tscrollHeight: {\n\t\t\tvalue: document.documentElement.clientHeight * 10,\n\t\t\twritable: false,\n\t\t},\n\t});\n\n\t// multiple registrations\n\tconst unregister1 = autoScrollWindowForElements();\n\tconst unregister2 = autoScrollWindowForElements();\n\n\tconst cleanup = combine(\n\t\tappendToBody(element),\n\t\tdraggable({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tsetElementFromPoint(element),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === document.documentElement) {\n\t\t\t\t\tordered.push('window:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\tuserEvent.lift(element, {\n\t\tclientX: document.documentElement.clientLeft + document.documentElement.clientWidth / 2,\n\t\tclientY: document.documentElement.clientLeft + document.documentElement.clientHeight,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// next frame should scroll the window\n\t{\n\t\tconst before = document.documentElement.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = document.documentElement.scrollTop;\n\t\texpect(after).toBeGreaterThan(before);\n\t\texpect(ordered).toEqual(['window:scroll']);\n\t\tordered.length = 0;\n\t}\n\t// removing one registration, scroll should still occur\n\tunregister1();\n\t{\n\t\tconst before = document.documentElement.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = document.documentElement.scrollTop;\n\t\texpect(after).toBeGreaterThan(before);\n\t\texpect(ordered).toEqual(['window:scroll']);\n\t\tordered.length = 0;\n\t}\n\n\t// removing final registration, scroll should not occur\n\tunregister2();\n\t{\n\t\tconst before = document.documentElement.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = document.documentElement.scrollTop;\n\t\texpect(after).toBe(before);\n\t\texpect(ordered).toEqual([]);\n\t\tordered.length = 0;\n\t}\n\n\tcleanup();\n});\n\nit('should only scroll the window if there are any registrations that have canScroll: () => true', () => {\n\tconst [element] = getBubbleOrderedTree();\n\tconst ordered: string[] = [];\n\n\t// Setting some large scroll height on the window\n\tObject.defineProperties(document.documentElement, {\n\t\tscrollHeight: {\n\t\t\tvalue: document.documentElement.clientHeight * 10,\n\t\t\twritable: false,\n\t\t},\n\t});\n\n\tconst cleanup = combine(\n\t\tappendToBody(element),\n\t\tdraggable({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tautoScrollWindowForElements({\n\t\t\tcanScroll: () => {\n\t\t\t\tordered.push('1. canScroll: false');\n\t\t\t\treturn false;\n\t\t\t},\n\t\t}),\n\t\tautoScrollWindowForElements({\n\t\t\tcanScroll: () => {\n\t\t\t\tordered.push('2. canScroll: true');\n\t\t\t\treturn true;\n\t\t\t},\n\t\t}),\n\t\tautoScrollWindowForElements({\n\t\t\tcanScroll: () => {\n\t\t\t\tordered.push('3. canScroll: false');\n\t\t\t\treturn false;\n\t\t\t},\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tsetElementFromPoint(element),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === document.documentElement) {\n\t\t\t\t\tordered.push('window:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\tuserEvent.lift(element, {\n\t\tclientX: document.documentElement.clientLeft + document.documentElement.clientWidth / 2,\n\t\tclientY: document.documentElement.clientLeft + document.documentElement.clientHeight,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// next frame should scroll the window\n\t{\n\t\tconst before = document.documentElement.scrollTop;\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\tconst after = document.documentElement.scrollTop;\n\t\texpect(after).toBeGreaterThan(before);\n\t\texpect(ordered).toEqual([\n\t\t\t'1. canScroll: false',\n\t\t\t'2. canScroll: true',\n\t\t\t// '3. canScroll: false' should not be called as it was not needed\n\t\t\t'window:scroll',\n\t\t]);\n\t\tordered.length = 0;\n\t}\n\n\tcleanup();\n});\n\nit('should not scroll the window if there are no active registrations', () => {\n\tconst [element] = getBubbleOrderedTree();\n\tconst ordered: string[] = [];\n\n\t// Setting some large scroll height on the window\n\tObject.defineProperties(document.documentElement, {\n\t\tscrollHeight: {\n\t\t\tvalue: document.documentElement.clientHeight * 10,\n\t\t\twritable: false,\n\t\t},\n\t});\n\n\tlet unregisterAutoScrolling = autoScrollWindowForElements();\n\n\tconst cleanup = combine(\n\t\tappendToBody(element),\n\t\tdraggable({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tsetElementFromPoint(element),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === document.documentElement) {\n\t\t\t\t\tordered.push('window:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\tuserEvent.lift(element, {\n\t\tclientX: document.documentElement.clientLeft + document.documentElement.clientWidth / 2,\n\t\tclientY: document.documentElement.clientLeft + document.documentElement.clientHeight,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// next frame should scroll the window\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['window:scroll']);\n\tordered.length = 0;\n\n\t// now un registering our auto scroll\n\tunregisterAutoScrolling();\n\n\t// an auto scroll on the window should not occur in the next frame\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// enabling auto scrolling again\n\tunregisterAutoScrolling = autoScrollWindowForElements();\n\n\t// an auto scroll should occur in the next frame\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['window:scroll']);\n\n\tunregisterAutoScrolling();\n\tcleanup();\n});\n\nit('should not scroll the window if no registrations are allowing scrolling', () => {\n\tconst [element] = getBubbleOrderedTree();\n\tconst ordered: string[] = [];\n\n\t// Setting some large scroll height on the window\n\tObject.defineProperties(document.documentElement, {\n\t\tscrollHeight: {\n\t\t\tvalue: document.documentElement.clientHeight * 10,\n\t\t\twritable: false,\n\t\t},\n\t});\n\tlet allowScrolling: boolean = true;\n\n\tconst cleanup = combine(\n\t\tappendToBody(element),\n\t\tdraggable({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tautoScrollWindowForElements({\n\t\t\tcanScroll: () => allowScrolling,\n\t\t}),\n\t\tautoScrollWindowForElements({\n\t\t\tcanScroll: () => allowScrolling,\n\t\t}),\n\t\tautoScrollWindowForElements({\n\t\t\tcanScroll: () => allowScrolling,\n\t\t}),\n\n\t\tdropTargetForElements({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tsetElementFromPoint(element),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === document.documentElement) {\n\t\t\t\t\tordered.push('window:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\tuserEvent.lift(element, {\n\t\tclientX: document.documentElement.clientLeft + document.documentElement.clientWidth / 2,\n\t\tclientY: document.documentElement.clientLeft + document.documentElement.clientHeight,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// next frame should scroll the window\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['window:scroll']);\n\tordered.length = 0;\n\n\t// now un registering our auto scroll\n\tallowScrolling = false;\n\n\t// an auto scroll on the window should not occur in the next frame\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// scrolling allowed again\n\tallowScrolling = true;\n\n\t// we should now expect to see auto scrolling enabled again\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['window:scroll']);\n\n\tcleanup();\n});\n\nit('should scroll the window once, even if there are multiple registrations', () => {\n\tconst [element] = getBubbleOrderedTree();\n\tconst ordered: string[] = [];\n\n\t// Setting some large scroll height on the window\n\tObject.defineProperties(document.documentElement, {\n\t\tscrollHeight: {\n\t\t\tvalue: document.documentElement.clientHeight * 10,\n\t\t\twritable: false,\n\t\t},\n\t});\n\n\tconst cleanup = combine(\n\t\t// multiple registrations - only one allowing scrolling\n\t\tautoScrollWindowForElements(),\n\t\tautoScrollWindowForElements(),\n\t\tautoScrollWindowForElements(),\n\t\tautoScrollWindowForElements(),\n\t\tautoScrollWindowForElements(),\n\n\t\tappendToBody(element),\n\t\tdraggable({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: element,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tsetElementFromPoint(element),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === document.documentElement) {\n\t\t\t\t\tordered.push('window:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\tuserEvent.lift(element, {\n\t\tclientX: document.documentElement.clientLeft + document.documentElement.clientWidth / 2,\n\t\tclientY: document.documentElement.clientTop + document.documentElement.clientHeight,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// next frame should scroll the window\n\tconst before = document.documentElement.scrollTop;\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\tconst after = document.documentElement.scrollTop;\n\texpect(after).toBeGreaterThan(before);\n\texpect(ordered).toEqual(['window:scroll']);\n\tordered.length = 0;\n\n\tcleanup();\n});\n\nit('should scroll a scroll container before the window', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer({\n\t\tchild: {\n\t\t\twidth: document.documentElement.clientWidth,\n\t\t\theight: document.documentElement.clientHeight * 20,\n\t\t},\n\t\tscrollContainer: {\n\t\t\twidth: document.documentElement.clientWidth,\n\t\t\theight: document.documentElement.clientHeight,\n\t\t},\n\t});\n\tconst ordered: string[] = [];\n\n\t// Setting some large scroll height on the window\n\tObject.defineProperties(document.documentElement, {\n\t\tscrollHeight: {\n\t\t\tvalue: document.documentElement.clientHeight * 10,\n\t\t\twritable: false,\n\t\t},\n\t});\n\n\tconst cleanup = combine(\n\t\tautoScrollWindowForElements(),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === document.documentElement) {\n\t\t\t\t\tordered.push('window:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.target === parentScrollContainer) {\n\t\t\t\t\tordered.push('parent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().bottom,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\t// scroll the scroll parent until it is finished\n\t// (window should not be scrolled yet)\n\t{\n\t\tconst hit = jest.fn();\n\t\twhile (canScrollOnBottom(parentScrollContainer)) {\n\t\t\thit();\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\texpect(ordered).toEqual(['parent:scroll']);\n\t\t\tordered.length = 0;\n\t\t}\n\t\texpect(hit).toHaveBeenCalled();\n\t}\n\n\t// window should now scroll\n\t{\n\t\tconst hit = jest.fn();\n\t\twhile (canScrollOnBottom(document.documentElement)) {\n\t\t\thit();\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\t\t\texpect(ordered).toEqual(['window:scroll']);\n\t\t\tordered.length = 0;\n\t\t}\n\t\texpect(hit).toHaveBeenCalled();\n\t}\n\n\t// asserting there is nothing left to scroll\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\texpect(ordered).toEqual([]);\n\n\tcleanup();\n});\n\nit('should not scroll the window if a scroll container absorbed all the scroll axis', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer({\n\t\tchild: {\n\t\t\t// won't be scrolling the scroll parent on the horizontal axis\n\t\t\twidth: document.documentElement.clientWidth,\n\t\t\theight: document.documentElement.clientHeight * 20,\n\t\t},\n\t\tscrollContainer: {\n\t\t\twidth: document.documentElement.clientWidth,\n\t\t\theight: document.documentElement.clientHeight,\n\t\t},\n\t});\n\tconst ordered: string[] = [];\n\n\t// Setting some large scroll width and height on the window\n\tObject.defineProperties(document.documentElement, {\n\t\tscrollWidth: {\n\t\t\tvalue: document.documentElement.clientWidth * 10,\n\t\t\twritable: false,\n\t\t},\n\t\tscrollHeight: {\n\t\t\tvalue: document.documentElement.clientHeight * 10,\n\t\t\twritable: false,\n\t\t},\n\t});\n\n\tconst cleanup = combine(\n\t\tautoScrollWindowForElements(),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === document.documentElement) {\n\t\t\t\t\tordered.push('window:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.target === parentScrollContainer) {\n\t\t\t\t\tordered.push('parent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\n\t// lifting on bottom right\n\t// expecting to scroll vertically on the scroll container\n\t// and horizontally on the window\n\tuserEvent.lift(child, {\n\t\tclientX: parentScrollContainer.getBoundingClientRect().right,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().bottom,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\n\texpect(ordered).toEqual([]);\n\n\tconst parentBefore = {\n\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\tscrollLeft: parentScrollContainer.scrollLeft,\n\t};\n\tconst windowBefore = {\n\t\tscrollTop: document.documentElement.scrollTop,\n\t\tscrollLeft: document.documentElement.scrollLeft,\n\t};\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\tconst parentAfter = {\n\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\tscrollLeft: parentScrollContainer.scrollLeft,\n\t};\n\tconst windowAfter = {\n\t\tscrollTop: document.documentElement.scrollTop,\n\t\tscrollLeft: document.documentElement.scrollLeft,\n\t};\n\texpect(ordered).toEqual(['parent:scroll', 'window:scroll']);\n\tordered.length = 0;\n\n\t// expecting vertical scroll on the scroll container,\n\t// and because the scroll container cannot scroll horizontally,\n\t// we should see some horizontal scrolling on the window\n\texpect(parentAfter.scrollTop).toBeGreaterThan(parentBefore.scrollTop);\n\texpect(parentAfter.scrollLeft).toBe(parentBefore.scrollLeft);\n\texpect(windowAfter.scrollLeft).toBeGreaterThan(windowBefore.scrollLeft);\n\texpect(windowAfter.scrollTop).toBe(windowBefore.scrollTop);\n\n\tcleanup();\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/overflow/allowed-axis.spec.ts", "content": "import { fireEvent } from '@testing-library/dom';\nimport { bind } from 'bind-event-listener';\n\nimport { unsafeOverflowAutoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element';\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { type AllowedAxis } from '../../../src/internal-types';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\ttype AxisScroll,\n\ttype Event,\n\tgetAxisScroll,\n\tgetExpectedEvents,\n\tgetScenarios,\n\thasAxisScrolled,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\nconst OUTSIDE_OFFSET = 10;\n\ndescribe('allowed axis', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\n\tconst originalScrollTop = parentScrollContainer.scrollTop;\n\tconst originalScrollLeft = parentScrollContainer.scrollLeft;\n\n\tafterEach(() => {\n\t\tparentScrollContainer.scrollTop = originalScrollTop;\n\t\tparentScrollContainer.scrollLeft = originalScrollLeft;\n\t});\n\n\tgetScenarios(parentScrollContainer.getBoundingClientRect(), OUTSIDE_OFFSET).forEach(\n\t\t({ label, startPosition, endPosition, expectedMovement }) => {\n\t\t\tit(`should only scroll on axis that are allowed - ${label}`, () => {\n\t\t\t\tconst events: Event[] = [];\n\n\t\t\t\tlet allowedAxis: AllowedAxis = 'all';\n\t\t\t\tlet axisScroll: AxisScroll;\n\n\t\t\t\tconst cleanup = combine(\n\t\t\t\t\tappendToBody(parentScrollContainer),\n\t\t\t\t\tdraggable({\n\t\t\t\t\t\telement: child,\n\t\t\t\t\t\tonDragStart: () => events.push({ type: 'draggable:start' }),\n\t\t\t\t\t}),\n\t\t\t\t\tdropTargetForElements({\n\t\t\t\t\t\telement: child,\n\t\t\t\t\t\tonDragStart: () => events.push({ type: 'dropTarget:start' }),\n\t\t\t\t\t}),\n\t\t\t\t\tunsafeOverflowAutoScrollForElements({\n\t\t\t\t\t\telement: parentScrollContainer,\n\t\t\t\t\t\tgetOverflow: () => ({\n\t\t\t\t\t\t\tforTopEdge: {\n\t\t\t\t\t\t\t\ttop: 100,\n\t\t\t\t\t\t\t\tright: 100,\n\t\t\t\t\t\t\t\tleft: 100,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tforRightEdge: {\n\t\t\t\t\t\t\t\ttop: 100,\n\t\t\t\t\t\t\t\tright: 100,\n\t\t\t\t\t\t\t\tbottom: 100,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tforBottomEdge: {\n\t\t\t\t\t\t\t\tright: 100,\n\t\t\t\t\t\t\t\tbottom: 100,\n\t\t\t\t\t\t\t\tleft: 100,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tforLeftEdge: {\n\t\t\t\t\t\t\t\ttop: 100,\n\t\t\t\t\t\t\t\tleft: 100,\n\t\t\t\t\t\t\t\tbottom: 100,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tgetAllowedAxis: () => allowedAxis,\n\t\t\t\t\t}),\n\t\t\t\t\tbind(parentScrollContainer, {\n\t\t\t\t\t\ttype: 'scroll',\n\t\t\t\t\t\tlistener: (_event) => {\n\t\t\t\t\t\t\tevents.push({\n\t\t\t\t\t\t\t\ttype: 'scroll event',\n\t\t\t\t\t\t\t\t...hasAxisScrolled(parentScrollContainer, axisScroll),\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\taxisScroll = getAxisScroll(parentScrollContainer);\n\t\t\t\t\t\t},\n\t\t\t\t\t}),\n\t\t\t\t);\n\t\t\t\tlet unsetElementFromPoint = setElementFromPoint(child);\n\n\t\t\t\t// Scroll container is now looking over the center of the element\n\t\t\t\tparentScrollContainer.scrollTop = 500;\n\t\t\t\tparentScrollContainer.scrollLeft = 500;\n\t\t\t\taxisScroll = getAxisScroll(parentScrollContainer);\n\n\t\t\t\tuserEvent.lift(child, {\n\t\t\t\t\tclientX: startPosition.x,\n\t\t\t\t\tclientY: startPosition.y,\n\t\t\t\t});\n\n\t\t\t\texpect(events).toEqual([{ type: 'draggable:start' }, { type: 'dropTarget:start' }]);\n\t\t\t\tevents.length = 0;\n\n\t\t\t\t// First frame: allowedAxis is all.\n\t\t\t\t// Expecting no scroll to occur.\n\t\t\t\t// We don't know what the scroll speed should be until a single frame has passed.\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\texpect(events).toEqual([]);\n\n\t\t\t\tfireEvent.dragOver(document.body, {\n\t\t\t\t\tclientX: endPosition.x,\n\t\t\t\t\tclientY: endPosition.y,\n\t\t\t\t});\n\t\t\t\tunsetElementFromPoint();\n\t\t\t\tunsetElementFromPoint = setElementFromPoint(document.body);\n\n\t\t\t\t// Second frame: allowedAxis is all.\n\t\t\t\t// Expecting a scroll to occur on expected axis.\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\tconst movement = {\n\t\t\t\t\t...expectedMovement,\n\t\t\t\t};\n\n\t\t\t\tconst expectedEvents = getExpectedEvents(movement);\n\n\t\t\t\texpect(events).toEqual(expectedEvents);\n\t\t\t\tevents.length = 0;\n\n\t\t\t\t// Third frame: allowedAxis is vertical.\n\t\t\t\t// Expecting a scroll to occur on expected axis, except horizontal.\n\t\t\t\t// If neither are expected, expect no scroll.\n\t\t\t\tallowedAxis = 'vertical';\n\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\tconst verticalMovement = {\n\t\t\t\t\t...expectedMovement,\n\t\t\t\t\thorizontal: false,\n\t\t\t\t};\n\n\t\t\t\tconst expectedVerticalEvents = getExpectedEvents(verticalMovement);\n\n\t\t\t\texpect(events).toEqual(expectedVerticalEvents);\n\t\t\t\tevents.length = 0;\n\n\t\t\t\t// Fourth frame: allowedAxis is horizontal.\n\t\t\t\t// Expecting a scroll to occur on expected axis, except vertical.\n\t\t\t\t// If neither are expected, expect no scroll.\n\t\t\t\tallowedAxis = 'horizontal';\n\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\tconst horizontalMovement = {\n\t\t\t\t\t...expectedMovement,\n\t\t\t\t\tvertical: false,\n\t\t\t\t};\n\n\t\t\t\tconst expectedHorizontalEvents = getExpectedEvents(horizontalMovement);\n\n\t\t\t\texpect(events).toEqual(expectedHorizontalEvents);\n\n\t\t\t\tcleanup();\n\t\t\t});\n\t\t},\n\t);\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/overflow/can-scroll.spec.ts", "content": "import { fireEvent } from '@testing-library/dom';\nimport { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { unsafeOverflowAutoScrollForElements } from '../../../src/entry-point/unsafe-overflow/element';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tsetupNestedScrollContainers,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\nit('should not scroll scroll containers that have canScroll: () => false', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\tlet isAutoScrollingAllowed: boolean = true;\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t}),\n\t\tunsafeOverflowAutoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t\tcanScroll: () => isAutoScrollingAllowed,\n\t\t\tgetOverflow: () => ({\n\t\t\t\tforBottomEdge: {\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t\tbottom: 100,\n\t\t\t\t},\n\t\t\t}),\n\t\t}),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: () => ordered.push('scroll event'),\n\t\t}),\n\t);\n\tlet unsetElementFromPoint = setElementFromPoint(child);\n\n\t// Scroll container is now looking over the center of the element\n\tparentScrollContainer.scrollTop = 500;\n\tparentScrollContainer.scrollLeft = 500;\n\n\t// lifting on mid point\n\t// This will not cause auto scrolling as we have not setup the \"over element\" auto scroller\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width,\n\t\tclientY:\n\t\t\tparentScrollContainer.getBoundingClientRect().top +\n\t\t\tparentScrollContainer.getBoundingClientRect().height / 2,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// Second frame: no auto scroll will occur as we have not registered \"over element\" overflow scrolling\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\tordered.length = 0;\n\n\tfireEvent.dragOver(document.body, {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().bottom + 1,\n\t});\n\tunsetElementFromPoint();\n\tunsetElementFromPoint = setElementFromPoint(document.body);\n\n\t// expecting overflow auto scroll in next frame\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['scroll event']);\n\tordered.length = 0;\n\n\tisAutoScrollingAllowed = false;\n\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// re-enabling\n\tisAutoScrollingAllowed = true;\n\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['scroll event']);\n\n\tcleanup();\n});\n\nit('should allow earlier registrations to scroll when a later registration has canScroll: () => false', () => {\n\tconst [child, parent, grandParent] = setupNestedScrollContainers([\n\t\t// child\n\t\t{ width: 10000, height: 10000 },\n\t\t// parent\n\t\t{ width: 5000, height: 5000 },\n\t\t// grandparent,\n\t\t{ width: 1000, height: 1000 },\n\t]);\n\n\tconst ordered: string[] = [];\n\tlet isParentScrollingAllowed: boolean = true;\n\n\tconst cleanup = combine(\n\t\tappendToBody(grandParent),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('child:start'),\n\t\t\tonDrop: () => ordered.push('child:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: parent,\n\t\t\tonDragStart: () => ordered.push('parent:start'),\n\t\t\tonDrop: () => ordered.push('parent:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: grandParent,\n\t\t\tonDragStart: () => ordered.push('grandParent:start'),\n\t\t\tonDrop: () => ordered.push('grandParent:drop'),\n\t\t}),\n\t\t// Important for this test: grandParent is registered before parent\n\t\t// We are checking that blocking scrolling on `parent` does not stop `grandParent`\n\t\t// from scrolling.\n\t\tunsafeOverflowAutoScrollForElements({\n\t\t\telement: grandParent,\n\t\t\tgetOverflow: () => ({\n\t\t\t\tforTopEdge: {\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t\ttop: 100,\n\t\t\t\t},\n\t\t\t}),\n\t\t}),\n\t\tunsafeOverflowAutoScrollForElements({\n\t\t\telement: parent,\n\t\t\tcanScroll: () => isParentScrollingAllowed,\n\t\t\tgetOverflow: () => ({\n\t\t\t\tforTopEdge: {\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t\ttop: 100,\n\t\t\t\t},\n\t\t\t}),\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === grandParent) {\n\t\t\t\t\tordered.push('grandParent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.target === parent) {\n\t\t\t\t\t// console.log('parent', parent.scrollTop, parent.scrollLeft);\n\t\t\t\t\tordered.push('parent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\tlet unsetElementFromPoint = setElementFromPoint(child);\n\n\t// Set some initial scroll on the scroll containers\n\t// These are in the range where auto scrolling will occur on both\n\tparent.scrollTop = 60;\n\tgrandParent.scrollTop = 120;\n\n\t// lifting the mid point\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tgrandParent.getBoundingClientRect().left + grandParent.getBoundingClientRect().width / 2,\n\t\tclientY:\n\t\t\tgrandParent.getBoundingClientRect().top + grandParent.getBoundingClientRect().height / 2,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'child:start', 'parent:start', 'grandParent:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// on second frame there will be no auto scrolling as we have not set up \"over element\"\n\t// auto scrolling\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\tfireEvent.dragOver(document.body, {\n\t\tclientX: grandParent.getBoundingClientRect().left + grandParent.getBoundingClientRect().width,\n\t\tclientY: grandParent.getBoundingClientRect().top - 1,\n\t});\n\tunsetElementFromPoint();\n\tunsetElementFromPoint = setElementFromPoint(document.body);\n\n\t// expecting to now scroll both\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// grand parent will scroll first as it was registered first\n\texpect(ordered).toEqual(['grandParent:scroll', 'parent:scroll']);\n\tordered.length = 0;\n\n\tisParentScrollingAllowed = false;\n\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['grandParent:scroll']);\n\n\tcleanup();\n});\n\nit('should allow later registrations to scroll when an earlier registration has canScroll: () => false', () => {\n\tconst [child, parent, grandParent] = setupNestedScrollContainers([\n\t\t// child\n\t\t{ width: 10000, height: 10000 },\n\t\t// parent\n\t\t{ width: 5000, height: 5000 },\n\t\t// grandparent,\n\t\t{ width: 1000, height: 1000 },\n\t]);\n\n\tconst ordered: string[] = [];\n\tlet isParentScrollingAllowed: boolean = true;\n\n\tconst cleanup = combine(\n\t\tappendToBody(grandParent),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('child:start'),\n\t\t\tonDrop: () => ordered.push('child:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: parent,\n\t\t\tonDragStart: () => ordered.push('parent:start'),\n\t\t\tonDrop: () => ordered.push('parent:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: grandParent,\n\t\t\tonDragStart: () => ordered.push('grandParent:start'),\n\t\t\tonDrop: () => ordered.push('grandParent:drop'),\n\t\t}),\n\t\t// Important for this test: `parent` is registered before `grandParent`.\n\t\t// We are validating that blocking scrolling on `parent` should not stop\n\t\t// the scrolling of `grandParent`.\n\t\tunsafeOverflowAutoScrollForElements({\n\t\t\telement: parent,\n\t\t\tcanScroll: () => isParentScrollingAllowed,\n\t\t\tgetOverflow: () => ({\n\t\t\t\tforTopEdge: {\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t\ttop: 100,\n\t\t\t\t},\n\t\t\t}),\n\t\t}),\n\t\tunsafeOverflowAutoScrollForElements({\n\t\t\telement: grandParent,\n\t\t\tgetOverflow: () => ({\n\t\t\t\tforTopEdge: {\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t\ttop: 100,\n\t\t\t\t},\n\t\t\t}),\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === grandParent) {\n\t\t\t\t\tordered.push('grandParent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.target === parent) {\n\t\t\t\t\t// console.log('parent', parent.scrollTop, parent.scrollLeft);\n\t\t\t\t\tordered.push('parent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\tlet unsetElementFromPoint = setElementFromPoint(child);\n\n\t// Set some initial scroll on the scroll containers\n\t// These are in the range where auto scrolling will occur on both\n\tparent.scrollTop = 60;\n\tgrandParent.scrollTop = 120;\n\n\t// lifting the mid point\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tgrandParent.getBoundingClientRect().left + grandParent.getBoundingClientRect().width / 2,\n\t\tclientY:\n\t\t\tgrandParent.getBoundingClientRect().top + grandParent.getBoundingClientRect().height / 2,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'child:start', 'parent:start', 'grandParent:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// on second frame there will be no auto scrolling as we have not set up \"over element\"\n\t// auto scrolling\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\tfireEvent.dragOver(document.body, {\n\t\tclientX: grandParent.getBoundingClientRect().left + grandParent.getBoundingClientRect().width,\n\t\tclientY: grandParent.getBoundingClientRect().top - 1,\n\t});\n\tunsetElementFromPoint();\n\tunsetElementFromPoint = setElementFromPoint(document.body);\n\n\t// expecting to now scroll both\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['parent:scroll', 'grandParent:scroll']);\n\tordered.length = 0;\n\n\tisParentScrollingAllowed = false;\n\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['grandParent:scroll']);\n\n\tcleanup();\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/overflow/cross-axis-hitbox.spec.ts", "content": "import { fireEvent } from '@testing-library/dom';\nimport { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { unsafeOverflowAutoScrollForElements } from '../../../src/entry-point/unsafe-overflow/element';\nimport { type Axis, type Edge, type Side } from '../../../src/internal-types';\nimport { axisLookup } from '../../../src/shared/axis';\nimport { getInternalConfig } from '../../../src/shared/configuration';\nimport { getOverElementHitbox } from '../../../src/shared/get-over-element-hitbox';\nimport { mainAxisSideLookup } from '../../../src/shared/side';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\tgetInsidePoints,\n\tgetOutsidePoints,\n\tgetRect,\n\tmainAxisForSide,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\nconst { child, parentScrollContainer } = setupBasicScrollContainer();\nconst defaultConfig = getInternalConfig();\n\nbeforeEach(() => {\n\t// setting some initial scroll so the element\n\t// can be scrolled in any direction\n\tparentScrollContainer.scrollTop = 10;\n\tparentScrollContainer.scrollLeft = 10;\n});\n\ntype Scenario = {\n\tedge: Edge;\n\thitbox: DOMRect;\n};\n\nconst overflowSizeOnMainAxis: number = 100;\nconst overflowSizeOnEachSideOfCrossAxis: number = 200;\n\nconst overflow: Required<\n\tReturnType[0]['getOverflow']>\n> = {\n\tforBottomEdge: {\n\t\tright: overflowSizeOnEachSideOfCrossAxis,\n\t\tleft: overflowSizeOnEachSideOfCrossAxis,\n\t\tbottom: overflowSizeOnMainAxis,\n\t},\n\tforTopEdge: {\n\t\tright: overflowSizeOnEachSideOfCrossAxis,\n\t\tleft: overflowSizeOnEachSideOfCrossAxis,\n\t\ttop: overflowSizeOnMainAxis,\n\t},\n\tforRightEdge: {\n\t\tright: overflowSizeOnMainAxis,\n\t\ttop: overflowSizeOnEachSideOfCrossAxis,\n\t\tbottom: overflowSizeOnEachSideOfCrossAxis,\n\t},\n\tforLeftEdge: {\n\t\tleft: overflowSizeOnMainAxis,\n\t\ttop: overflowSizeOnEachSideOfCrossAxis,\n\t\tbottom: overflowSizeOnEachSideOfCrossAxis,\n\t},\n};\n\nconst parentRect: DOMRect = parentScrollContainer.getBoundingClientRect();\n\nfunction getOverElementMainHitboxSize(edge: Edge) {\n\tconst overElementHitbox = getOverElementHitbox[edge]({\n\t\tclientRect: parentRect,\n\t\tconfig: defaultConfig,\n\t});\n\tconst axis: Axis = mainAxisForSide[edge];\n\tconst { mainAxis } = axisLookup[axis];\n\treturn overElementHitbox[mainAxis.size];\n}\n\nconst scenarios: Scenario[] = [\n\t{\n\t\tedge: 'top',\n\t\thitbox: getRect({\n\t\t\t// Main axis\n\t\t\ttop: parentRect.top - overflowSizeOnMainAxis,\n\t\t\t// pushing down into the element\n\t\t\tbottom: parentRect.top + getOverElementMainHitboxSize('top'),\n\n\t\t\t// Cross axis\n\t\t\tright: parentRect.right + overflowSizeOnEachSideOfCrossAxis,\n\t\t\tleft: parentRect.left - overflowSizeOnEachSideOfCrossAxis,\n\t\t}),\n\t},\n\t{\n\t\tedge: 'bottom',\n\t\thitbox: getRect({\n\t\t\t// Main axis\n\t\t\tbottom: parentRect.bottom + overflowSizeOnMainAxis,\n\t\t\t// pulling up into the element\n\t\t\ttop: parentRect.bottom - getOverElementMainHitboxSize('bottom'),\n\n\t\t\t// Cross axis\n\t\t\tright: parentRect.right + overflowSizeOnEachSideOfCrossAxis,\n\t\t\tleft: parentRect.left - overflowSizeOnEachSideOfCrossAxis,\n\t\t}),\n\t},\n\t{\n\t\tedge: 'left',\n\t\thitbox: getRect({\n\t\t\t// main axis\n\t\t\tleft: parentRect.left - overflowSizeOnMainAxis,\n\t\t\t// push into the element\n\t\t\tright: parentRect.left + getOverElementMainHitboxSize('left'),\n\n\t\t\t// cross axis\n\t\t\ttop: parentRect.top - overflowSizeOnEachSideOfCrossAxis,\n\t\t\tbottom: parentRect.bottom + overflowSizeOnEachSideOfCrossAxis,\n\t\t}),\n\t},\n\t{\n\t\tedge: 'right',\n\t\thitbox: getRect({\n\t\t\t// main axis\n\t\t\tright: parentRect.right + overflowSizeOnMainAxis,\n\t\t\t// pull back into the element\n\t\t\tleft: parentRect.right - getOverElementMainHitboxSize('right'),\n\t\t\t// cross axis\n\t\t\ttop: parentRect.top - overflowSizeOnEachSideOfCrossAxis,\n\t\t\tbottom: parentRect.bottom + overflowSizeOnEachSideOfCrossAxis,\n\t\t}),\n\t},\n];\n\nscenarios.forEach((scenario) => {\n\tconst axis: Axis = mainAxisForSide[scenario.edge];\n\tconst side: Side = mainAxisSideLookup[scenario.edge];\n\tconst mainAxisScrollProperty = axis === 'vertical' ? 'scrollTop' : 'scrollLeft';\n\tconst crossAxisScrollProperty =\n\t\tmainAxisScrollProperty === 'scrollTop' ? 'scrollLeft' : 'scrollTop';\n\n\tdescribe(`Scenario edge: ${scenario.edge}`, () => {\n\t\tgetInsidePoints(scenario.hitbox)\n\t\t\t// We don't want to include the 'center' as that could be\n\t\t\t// over the element, which would not trigger an overflow scroll\n\t\t\t.filter((point) => point.label !== 'center')\n\t\t\t.forEach((point) => {\n\t\t\t\tit(`should scroll the main axis when in the cross axis hitbox for that edge. Point: [${point.label}]`, () => {\n\t\t\t\t\tconst ordered: string[] = [];\n\n\t\t\t\t\tconst cleanup = combine(\n\t\t\t\t\t\tappendToBody(parentScrollContainer),\n\t\t\t\t\t\tdraggable({\n\t\t\t\t\t\t\telement: child,\n\t\t\t\t\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\t\t\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tdropTargetForElements({\n\t\t\t\t\t\t\telement: parentScrollContainer,\n\t\t\t\t\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\t\t\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\t\t\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\t\t\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tunsafeOverflowAutoScrollForElements({\n\t\t\t\t\t\t\telement: parentScrollContainer,\n\t\t\t\t\t\t\tgetOverflow: () => overflow,\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tbind(parentScrollContainer, {\n\t\t\t\t\t\t\ttype: 'scroll',\n\t\t\t\t\t\t\tlistener: () => ordered.push(`scroll event`),\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\t\tlet unsetElementFromPoint = setElementFromPoint(child);\n\n\t\t\t\t\t// lifting in middle of element, should not trigger auto scrolling\n\t\t\t\t\tuserEvent.lift(child, {\n\t\t\t\t\t\tclientX: parentRect.left + parentRect.width / 2,\n\t\t\t\t\t\tclientY: parentRect.top + parentRect.height / 2,\n\t\t\t\t\t});\n\n\t\t\t\t\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\t\t\t\t\tordered.length = 0;\n\n\t\t\t\t\t// on first frame, there is no auto scroll,\n\t\t\t\t\t// as we don't know what the scroll speed should be\n\t\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\t\tstepScrollBy();\n\n\t\t\t\t\texpect(ordered).toEqual([]);\n\n\t\t\t\t\t// not expecting auto scrolling on the second frame as we are\n\t\t\t\t\t// over the second of the element\n\t\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\t\tstepScrollBy();\n\n\t\t\t\t\texpect(ordered).toEqual([]);\n\n\t\t\t\t\t// updating where we are to trigger auto scrolling\n\t\t\t\t\t// we will now be outside the drop target\n\t\t\t\t\tunsetElementFromPoint();\n\t\t\t\t\tunsetElementFromPoint = setElementFromPoint(document.body);\n\t\t\t\t\tfireEvent.dragEnter(document.body, {\n\t\t\t\t\t\tclientX: point.x,\n\t\t\t\t\t\tclientY: point.y,\n\t\t\t\t\t});\n\n\t\t\t\t\texpect(ordered).toEqual(['dropTarget:leave']);\n\t\t\t\t\tordered.length = 0;\n\n\t\t\t\t\t// the drop target changed will be picked up in the next frame\n\t\t\t\t\tconst before = {\n\t\t\t\t\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\t\t\t\t\tscrollLeft: parentScrollContainer.scrollLeft,\n\t\t\t\t\t};\n\t\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\t\tstepScrollBy();\n\t\t\t\t\tconst after = {\n\t\t\t\t\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\t\t\t\t\tscrollLeft: parentScrollContainer.scrollLeft,\n\t\t\t\t\t};\n\t\t\t\t\t// only a single scroll event occurred\n\t\t\t\t\texpect(ordered).toEqual(['scroll event']);\n\n\t\t\t\t\t// scrolling forward when on the \"end\" edge\n\t\t\t\t\tif (side === 'end') {\n\t\t\t\t\t\texpect(after[mainAxisScrollProperty]).toBeGreaterThan(before[mainAxisScrollProperty]);\n\t\t\t\t\t\t// Should be scrolling backwards on the \"start\" edge\n\t\t\t\t\t} else {\n\t\t\t\t\t\texpect(after[mainAxisScrollProperty]).toBeLessThan(before[mainAxisScrollProperty]);\n\t\t\t\t\t}\n\t\t\t\t\t// scroll axis should not have been scrolled\n\t\t\t\t\texpect(before[crossAxisScrollProperty]).toBe(after[crossAxisScrollProperty]);\n\n\t\t\t\t\tcleanup();\n\t\t\t\t});\n\t\t\t});\n\n\t\tgetOutsidePoints(scenario.hitbox).forEach((point) => {\n\t\t\tit(`should not scroll the main axis when outside cross axis overflow for that edge. Point: [${point.label}]`, () => {\n\t\t\t\tconst ordered: string[] = [];\n\n\t\t\t\tconst fromEdge: ReturnType<\n\t\t\t\t\tParameters[0]['getOverflow']\n\t\t\t\t> = (() => {\n\t\t\t\t\tif (scenario.edge === 'top') {\n\t\t\t\t\t\treturn { forTopEdge: overflow.forTopEdge };\n\t\t\t\t\t}\n\t\t\t\t\tif (scenario.edge === 'bottom') {\n\t\t\t\t\t\treturn { forBottomEdge: overflow.forBottomEdge };\n\t\t\t\t\t}\n\t\t\t\t\tif (scenario.edge === 'left') {\n\t\t\t\t\t\treturn { forLeftEdge: overflow.forLeftEdge };\n\t\t\t\t\t}\n\t\t\t\t\tif (scenario.edge === 'right') {\n\t\t\t\t\t\treturn { forRightEdge: overflow.forRightEdge };\n\t\t\t\t\t}\n\t\t\t\t\tthrow Error('unhandled');\n\t\t\t\t})();\n\n\t\t\t\tconst cleanup = combine(\n\t\t\t\t\tappendToBody(parentScrollContainer),\n\t\t\t\t\tdraggable({\n\t\t\t\t\t\telement: child,\n\t\t\t\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\t\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t\t\t\t}),\n\t\t\t\t\tdropTargetForElements({\n\t\t\t\t\t\telement: parentScrollContainer,\n\t\t\t\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\t\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\t\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\t\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t\t\t\t}),\n\t\t\t\t\tunsafeOverflowAutoScrollForElements({\n\t\t\t\t\t\telement: parentScrollContainer,\n\t\t\t\t\t\tgetOverflow: () => fromEdge,\n\t\t\t\t\t}),\n\t\t\t\t\tbind(parentScrollContainer, {\n\t\t\t\t\t\ttype: 'scroll',\n\t\t\t\t\t\tlistener: () => ordered.push(`scroll event`),\n\t\t\t\t\t}),\n\t\t\t\t);\n\t\t\t\tlet unsetElementFromPoint = setElementFromPoint(child);\n\n\t\t\t\t// lifting in middle of element, should not trigger auto scrolling\n\t\t\t\tuserEvent.lift(child, {\n\t\t\t\t\tclientX: parentRect.left + parentRect.width / 2,\n\t\t\t\t\tclientY: parentRect.top + parentRect.height / 2,\n\t\t\t\t});\n\n\t\t\t\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\t\t\t\tordered.length = 0;\n\n\t\t\t\t// on first frame, there is no auto scroll,\n\t\t\t\t// as we don't know what the scroll speed should be\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\texpect(ordered).toEqual([]);\n\n\t\t\t\t// not expecting auto scrolling on the second frame as we are\n\t\t\t\t// over the second of the element\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\texpect(ordered).toEqual([]);\n\n\t\t\t\t// updating where we are to trigger auto scrolling\n\t\t\t\t// we will now be outside the drop target\n\t\t\t\tunsetElementFromPoint();\n\t\t\t\tunsetElementFromPoint = setElementFromPoint(document.body);\n\t\t\t\tfireEvent.dragEnter(document.body, {\n\t\t\t\t\tclientX: point.x,\n\t\t\t\t\tclientY: point.y,\n\t\t\t\t});\n\n\t\t\t\texpect(ordered).toEqual(['dropTarget:leave']);\n\t\t\t\tordered.length = 0;\n\n\t\t\t\t// the drop target changed will be picked up in the next frame\n\t\t\t\t// we are expecting no scroll to have occurred\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\t\t\t\texpect(ordered).toEqual([]);\n\n\t\t\t\tcleanup();\n\t\t\t});\n\t\t});\n\t});\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/overflow/main-axis-hitbox.spec.ts", "content": "import { fireEvent } from '@testing-library/dom';\nimport { bind } from 'bind-event-listener';\nimport invariant from 'tiny-invariant';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { unsafeOverflowAutoScrollForElements } from '../../../src/entry-point/unsafe-overflow/element';\nimport { type Axis, type Edge, type Side } from '../../../src/internal-types';\nimport { isWithin } from '../../../src/shared/is-within';\nimport { mainAxisSideLookup } from '../../../src/shared/side';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\tgetInsidePoints,\n\tgetOutsidePoints,\n\tgetRect,\n\tmainAxisForSide,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\nconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\nbeforeEach(() => {\n\t// setting some initial scroll so the element\n\t// can be scrolled in any direction\n\tparentScrollContainer.scrollTop = 10;\n\tparentScrollContainer.scrollLeft = 10;\n});\n\ntype Scenario = {\n\tedge: Edge;\n\thitbox: DOMRect;\n};\n\nconst overflowSizeOnMainAxis: number = 100;\n\nconst overflow: Required<\n\tReturnType[0]['getOverflow']>\n> = {\n\tforBottomEdge: {\n\t\tright: 0,\n\t\tleft: 0,\n\t\tbottom: overflowSizeOnMainAxis,\n\t},\n\tforTopEdge: {\n\t\tright: 0,\n\t\tleft: 0,\n\t\ttop: overflowSizeOnMainAxis,\n\t},\n\tforRightEdge: {\n\t\tright: overflowSizeOnMainAxis,\n\t\ttop: 0,\n\t\tbottom: 0,\n\t},\n\tforLeftEdge: {\n\t\tleft: overflowSizeOnMainAxis,\n\t\ttop: 0,\n\t\tbottom: 0,\n\t},\n};\n\nconst parentRect: DOMRect = parentScrollContainer.getBoundingClientRect();\n\nconst scenarios: Scenario[] = [\n\t{\n\t\tedge: 'top',\n\t\thitbox: getRect({\n\t\t\ttop: parentRect.top - overflowSizeOnMainAxis,\n\t\t\tright: parentRect.right,\n\t\t\t// (the first pixel is \"cut out\" by the \"over element\" auto scroller)\n\t\t\t// bottom: parentRect.top,\n\t\t\tbottom: parentRect.top - 1,\n\t\t\tleft: parentRect.left,\n\t\t}),\n\t},\n\t{\n\t\tedge: 'bottom',\n\t\thitbox: getRect({\n\t\t\t// (the first pixel is \"cut out\" by the \"over element\" auto scroller)\n\t\t\ttop: parentRect.bottom + 1,\n\t\t\tright: parentRect.right,\n\t\t\tbottom: parentRect.bottom + overflowSizeOnMainAxis,\n\t\t\tleft: parentRect.left,\n\t\t}),\n\t},\n\t{\n\t\tedge: 'left',\n\t\thitbox: getRect({\n\t\t\ttop: parentRect.top,\n\t\t\t// (the first pixel is \"cut out\" by the \"over element\" auto scroller)\n\t\t\tright: parentRect.left - 1,\n\t\t\tbottom: parentRect.bottom,\n\t\t\tleft: parentRect.left - overflowSizeOnMainAxis,\n\t\t}),\n\t},\n\t{\n\t\tedge: 'right',\n\t\thitbox: getRect({\n\t\t\ttop: parentRect.top,\n\t\t\tright: parentRect.right + overflowSizeOnMainAxis,\n\t\t\tbottom: parentRect.bottom,\n\t\t\t// (the first pixel is \"cut out\" by the \"over element\" auto scroller)\n\t\t\tleft: parentRect.right + 1,\n\t\t}),\n\t},\n];\n\nscenarios.forEach((scenario) => {\n\tconst axis: Axis = mainAxisForSide[scenario.edge];\n\tconst side: Side = mainAxisSideLookup[scenario.edge];\n\n\tconst mainAxisScrollProperty = axis === 'vertical' ? 'scrollTop' : 'scrollLeft';\n\tconst crossAxisScrollProperty =\n\t\tmainAxisScrollProperty === 'scrollTop' ? 'scrollLeft' : 'scrollTop';\n\n\tdescribe(`Scenario edge: ${scenario.edge}`, () => {\n\t\tgetInsidePoints(scenario.hitbox).forEach((point) => {\n\t\t\tit(`should scroll when in the main axis overflow. Point: [${point.label}]`, () => {\n\t\t\t\tconst ordered: string[] = [];\n\n\t\t\t\tconst cleanup = combine(\n\t\t\t\t\tappendToBody(parentScrollContainer),\n\t\t\t\t\tdraggable({\n\t\t\t\t\t\telement: child,\n\t\t\t\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\t\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t\t\t\t}),\n\t\t\t\t\tdropTargetForElements({\n\t\t\t\t\t\telement: parentScrollContainer,\n\t\t\t\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\t\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\t\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\t\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t\t\t\t}),\n\t\t\t\t\tunsafeOverflowAutoScrollForElements({\n\t\t\t\t\t\telement: parentScrollContainer,\n\t\t\t\t\t\tgetOverflow: () => overflow,\n\t\t\t\t\t}),\n\t\t\t\t\tbind(parentScrollContainer, {\n\t\t\t\t\t\ttype: 'scroll',\n\t\t\t\t\t\tlistener: () => ordered.push(`scroll event`),\n\t\t\t\t\t}),\n\t\t\t\t);\n\t\t\t\tlet unsetElementFromPoint = setElementFromPoint(child);\n\n\t\t\t\t// lifting in middle of element, should not trigger auto scrolling\n\t\t\t\tuserEvent.lift(child, {\n\t\t\t\t\tclientX: parentRect.left + parentRect.width / 2,\n\t\t\t\t\tclientY: parentRect.top + parentRect.height / 2,\n\t\t\t\t});\n\n\t\t\t\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\t\t\t\tordered.length = 0;\n\n\t\t\t\t// on first frame, there is no auto scroll,\n\t\t\t\t// as we don't know what the scroll speed should be\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\texpect(ordered).toEqual([]);\n\n\t\t\t\t// not expecting auto scrolling on the second frame as we are\n\t\t\t\t// over the second of the element\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\texpect(ordered).toEqual([]);\n\n\t\t\t\t// updating where we are to trigger auto scrolling\n\t\t\t\t// we will now be outside the drop target\n\t\t\t\tunsetElementFromPoint();\n\t\t\t\tunsetElementFromPoint = setElementFromPoint(document.body);\n\t\t\t\tfireEvent.dragEnter(document.body, {\n\t\t\t\t\tclientX: point.x,\n\t\t\t\t\tclientY: point.y,\n\t\t\t\t});\n\n\t\t\t\texpect(ordered).toEqual(['dropTarget:leave']);\n\t\t\t\tordered.length = 0;\n\n\t\t\t\t// the drop target changed will be picked up in the next frame\n\t\t\t\tconst before = {\n\t\t\t\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\t\t\t\tscrollLeft: parentScrollContainer.scrollLeft,\n\t\t\t\t};\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\t\t\t\tconst after = {\n\t\t\t\t\tscrollTop: parentScrollContainer.scrollTop,\n\t\t\t\t\tscrollLeft: parentScrollContainer.scrollLeft,\n\t\t\t\t};\n\n\t\t\t\t// scrolling forward when on the \"end\" edge\n\t\t\t\tif (side === 'end') {\n\t\t\t\t\texpect(after[mainAxisScrollProperty]).toBeGreaterThan(before[mainAxisScrollProperty]);\n\t\t\t\t\t// Should be scrolling backwards on the \"start\" edge\n\t\t\t\t} else {\n\t\t\t\t\texpect(after[mainAxisScrollProperty]).toBeLessThan(before[mainAxisScrollProperty]);\n\t\t\t\t}\n\t\t\t\t// scroll axis should not have been scrolled\n\t\t\t\texpect(before[crossAxisScrollProperty]).toBe(after[crossAxisScrollProperty]);\n\t\t\t\t// only a single scroll event occurred\n\t\t\t\texpect(ordered).toEqual(['scroll event']);\n\n\t\t\t\tcleanup();\n\t\t\t});\n\t\t});\n\n\t\t// need to exclude points that would be over the main parent rect and would usually\n\t\t// be excluded by our `elementFromPoint()` check.\n\t\tconst relevantOutsidePoints = getOutsidePoints(scenario.hitbox).filter((point) => {\n\t\t\tconst isOverParent = isWithin({\n\t\t\t\tclient: point,\n\t\t\t\tclientRect: parentRect,\n\t\t\t});\n\t\t\treturn !isOverParent;\n\t\t});\n\t\tinvariant(relevantOutsidePoints.length > 1);\n\n\t\trelevantOutsidePoints.forEach((point) => {\n\t\t\tit(`should not scroll when outside the main axis overflow. Point: [${point.label}]`, () => {\n\t\t\t\tconst ordered: string[] = [];\n\n\t\t\t\tconst cleanup = combine(\n\t\t\t\t\tappendToBody(parentScrollContainer),\n\t\t\t\t\tdraggable({\n\t\t\t\t\t\telement: child,\n\t\t\t\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\t\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t\t\t\t}),\n\t\t\t\t\tdropTargetForElements({\n\t\t\t\t\t\telement: parentScrollContainer,\n\t\t\t\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\t\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\t\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\t\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t\t\t\t}),\n\t\t\t\t\tunsafeOverflowAutoScrollForElements({\n\t\t\t\t\t\telement: parentScrollContainer,\n\t\t\t\t\t\tgetOverflow: () => overflow,\n\t\t\t\t\t}),\n\t\t\t\t\tbind(parentScrollContainer, {\n\t\t\t\t\t\ttype: 'scroll',\n\t\t\t\t\t\tlistener: () => ordered.push(`scroll event`),\n\t\t\t\t\t}),\n\t\t\t\t);\n\t\t\t\tlet unsetElementFromPoint = setElementFromPoint(child);\n\n\t\t\t\t// lifting in middle of element, should not trigger auto scrolling\n\t\t\t\tuserEvent.lift(child, {\n\t\t\t\t\tclientX: parentRect.left + parentRect.width / 2,\n\t\t\t\t\tclientY: parentRect.top + parentRect.height / 2,\n\t\t\t\t});\n\n\t\t\t\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\t\t\t\tordered.length = 0;\n\n\t\t\t\t// on first frame, there is no auto scroll,\n\t\t\t\t// as we don't know what the scroll speed should be\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\texpect(ordered).toEqual([]);\n\n\t\t\t\t// not expecting auto scrolling on the second frame as we are\n\t\t\t\t// over the second of the element\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\n\t\t\t\texpect(ordered).toEqual([]);\n\n\t\t\t\t// updating where we are to trigger auto scrolling\n\t\t\t\t// we will now be outside the drop target\n\t\t\t\tunsetElementFromPoint();\n\t\t\t\tunsetElementFromPoint = setElementFromPoint(document.body);\n\t\t\t\tfireEvent.dragEnter(document.body, {\n\t\t\t\t\tclientX: point.x,\n\t\t\t\t\tclientY: point.y,\n\t\t\t\t});\n\n\t\t\t\texpect(ordered).toEqual(['dropTarget:leave']);\n\t\t\t\tordered.length = 0;\n\n\t\t\t\t// the drop target changed will be picked up in the next frame\n\t\t\t\t// we are expecting no scroll to have occurred\n\t\t\t\tadvanceTimersToNextFrame();\n\t\t\t\tstepScrollBy();\n\t\t\t\texpect(ordered).toEqual([]);\n\n\t\t\t\tcleanup();\n\t\t\t});\n\t\t});\n\t});\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/overflow/nested-elements.spec.ts", "content": "import { fireEvent } from '@testing-library/dom';\nimport { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { type Position } from '@atlaskit/pragmatic-drag-and-drop/types';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { unsafeOverflowAutoScrollForElements } from '../../../src/entry-point/unsafe-overflow/element';\nimport { isWithin } from '../../../src/shared/is-within';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupNestedScrollContainers,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\ntest('a parent should allow a child to be overflow scrolled (when the parent is registered before the child)', () => {\n\tconst [child, parent, grandParent] = setupNestedScrollContainers([\n\t\t// child\n\t\t{ width: 10000, height: 10000 },\n\t\t// parent\n\t\t// We are making space above the the `parent` so\n\t\t// that it can have overflow scrolling inside of the `grandParent`.\n\t\t// We want to check that the `grandParent` does not block\n\t\t// auto scrolling of it's children\n\t\t{ width: 5000, height: 5000, x: 0, y: 10 },\n\t\t// grandparent,\n\t\t{ width: 1000, height: 1000 },\n\t]);\n\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(grandParent),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('child:start'),\n\t\t\tonDrop: () => ordered.push('child:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: parent,\n\t\t\tonDragStart: () => ordered.push('parent:start'),\n\t\t\tonDrop: () => ordered.push('parent:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: grandParent,\n\t\t\tonDragStart: () => ordered.push('grandParent:start'),\n\t\t\tonDrop: () => ordered.push('grandParent:drop'),\n\t\t}),\n\t\t// Registering the `grandParent` first.\n\t\t// We are testing that when `grandParent` cannot be scrolled,\n\t\t// `parent` still can be.\n\t\tunsafeOverflowAutoScrollForElements({\n\t\t\telement: grandParent,\n\t\t\tgetOverflow: () => ({\n\t\t\t\tforTopEdge: {\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t\ttop: 100,\n\t\t\t\t},\n\t\t\t}),\n\t\t}),\n\t\tunsafeOverflowAutoScrollForElements({\n\t\t\telement: parent,\n\t\t\tgetOverflow: () => ({\n\t\t\t\tforTopEdge: {\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t\ttop: 100,\n\t\t\t\t},\n\t\t\t}),\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === grandParent) {\n\t\t\t\t\tordered.push('grandParent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.target === parent) {\n\t\t\t\t\t// console.log('parent', parent.scrollTop, parent.scrollLeft);\n\t\t\t\t\tordered.push('parent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\tlet unsetElementFromPoint = setElementFromPoint(child);\n\n\t// Set some initial scroll on the scroll containers\n\t// These are in the range where auto scrolling will occur on both\n\tparent.scrollTop = 2;\n\tgrandParent.scrollTop = 2;\n\n\t// lifting the mid point visible area\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tgrandParent.getBoundingClientRect().left + grandParent.getBoundingClientRect().width / 2,\n\t\tclientY:\n\t\t\tgrandParent.getBoundingClientRect().top + grandParent.getBoundingClientRect().height / 2,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'child:start', 'parent:start', 'grandParent:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// on second frame there will be no auto scrolling as we have not set up \"over element\"\n\t// auto scrolling\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\tconst aboveParent: Position = {\n\t\tx: grandParent.getBoundingClientRect().left + grandParent.getBoundingClientRect().width / 2,\n\t\t// over grandParent, but in the overflow scroll area of parent\n\t\ty: grandParent.getBoundingClientRect().top + 2,\n\t};\n\n\t// validating our point is where we expect\n\texpect(\n\t\tisWithin({\n\t\t\tclient: aboveParent,\n\t\t\tclientRect: grandParent.getBoundingClientRect(),\n\t\t}),\n\t).toBe(true);\n\texpect(\n\t\tisWithin({\n\t\t\tclient: aboveParent,\n\t\t\tclientRect: parent.getBoundingClientRect(),\n\t\t}),\n\t).toBe(false);\n\n\t// moving above parent sibling\n\tfireEvent.dragOver(grandParent, {\n\t\tclientX: aboveParent.x,\n\t\tclientY: aboveParent.y,\n\t});\n\tunsetElementFromPoint();\n\tunsetElementFromPoint = setElementFromPoint(grandParent);\n\n\t// now expecting just the parent to scroll\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['parent:scroll']);\n\tordered.length = 0;\n\n\tcleanup();\n});\n\ntest('a parent should allow a child to be overflow scrolled (when the parent is registered after the child)', () => {\n\tconst [child, parent, grandParent] = setupNestedScrollContainers([\n\t\t// child\n\t\t{ width: 10000, height: 10000 },\n\t\t// parent\n\t\t// We are making space above the the `parent` so\n\t\t// that it can have overflow scrolling inside of the `grandParent`.\n\t\t// We want to check that the `grandParent` does not block\n\t\t// auto scrolling of it's children\n\t\t{ width: 5000, height: 5000, x: 0, y: 10 },\n\t\t// grandparent,\n\t\t{ width: 1000, height: 1000 },\n\t]);\n\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(grandParent),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('child:start'),\n\t\t\tonDrop: () => ordered.push('child:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: parent,\n\t\t\tonDragStart: () => ordered.push('parent:start'),\n\t\t\tonDrop: () => ordered.push('parent:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: grandParent,\n\t\t\tonDragStart: () => ordered.push('grandParent:start'),\n\t\t\tonDrop: () => ordered.push('grandParent:drop'),\n\t\t}),\n\t\t// Registering the `parent` first.\n\t\t// We are testing that when `grandParent` cannot be scrolled,\n\t\t// `parent` still can be.\n\t\tunsafeOverflowAutoScrollForElements({\n\t\t\telement: parent,\n\t\t\tgetOverflow: () => ({\n\t\t\t\tforTopEdge: {\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t\ttop: 100,\n\t\t\t\t},\n\t\t\t}),\n\t\t}),\n\t\tunsafeOverflowAutoScrollForElements({\n\t\t\telement: grandParent,\n\t\t\tgetOverflow: () => ({\n\t\t\t\tforTopEdge: {\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t\ttop: 100,\n\t\t\t\t},\n\t\t\t}),\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(window, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: (event) => {\n\t\t\t\tif (event.target === grandParent) {\n\t\t\t\t\tordered.push('grandParent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.target === parent) {\n\t\t\t\t\t// console.log('parent', parent.scrollTop, parent.scrollLeft);\n\t\t\t\t\tordered.push('parent:scroll');\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tordered.push('unknown:scroll');\n\t\t\t},\n\t\t\t// scroll events do not bubble, so leveraging the capture phase\n\t\t\toptions: { capture: true },\n\t\t}),\n\t);\n\tlet unsetElementFromPoint = setElementFromPoint(child);\n\n\t// Set some initial scroll on the scroll containers\n\t// These are in the range where auto scrolling will occur on both\n\tparent.scrollTop = 2;\n\tgrandParent.scrollTop = 2;\n\n\t// lifting the mid point visible area\n\tuserEvent.lift(child, {\n\t\tclientX:\n\t\t\tgrandParent.getBoundingClientRect().left + grandParent.getBoundingClientRect().width / 2,\n\t\tclientY:\n\t\t\tgrandParent.getBoundingClientRect().top + grandParent.getBoundingClientRect().height / 2,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'child:start', 'parent:start', 'grandParent:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// on second frame there will be no auto scrolling as we have not set up \"over element\"\n\t// auto scrolling\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\tconst aboveParent: Position = {\n\t\tx: grandParent.getBoundingClientRect().left + grandParent.getBoundingClientRect().width / 2,\n\t\t// over grandParent, but in the overflow scroll area of parent\n\t\ty: grandParent.getBoundingClientRect().top + 2,\n\t};\n\n\t// validating our point is where we expect\n\texpect(\n\t\tisWithin({\n\t\t\tclient: aboveParent,\n\t\t\tclientRect: grandParent.getBoundingClientRect(),\n\t\t}),\n\t).toBe(true);\n\texpect(\n\t\tisWithin({\n\t\t\tclient: aboveParent,\n\t\t\tclientRect: parent.getBoundingClientRect(),\n\t\t}),\n\t).toBe(false);\n\n\t// moving above parent sibling\n\tfireEvent.dragOver(grandParent, {\n\t\tclientX: aboveParent.x,\n\t\tclientY: aboveParent.y,\n\t});\n\tunsetElementFromPoint();\n\tunsetElementFromPoint = setElementFromPoint(grandParent);\n\n\t// now expecting just the parent to scroll\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual(['parent:scroll']);\n\tordered.length = 0;\n\n\tcleanup();\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/overflow/over-element-should-not-scroll.spec.ts", "content": "import { fireEvent } from '@testing-library/dom';\nimport { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { skipAutoA11yFile } from '@atlassian/a11y-jest-testing';\n\nimport { unsafeOverflowAutoScrollForElements } from '../../../src/entry-point/unsafe-overflow/element';\nimport { getInternalConfig } from '../../../src/shared/configuration';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\tgetInsidePoints,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\n// This file exposes one or more accessibility violations. Testing is currently skipped but violations need to\n// be fixed in a timely manner or result in escalation. Once all violations have been fixed, you can remove\n// the next line and associated import. For more information, see go/afm-a11y-tooling:jest\nskipAutoA11yFile();\n\nbeforeEach(reset);\n\nconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\nbeforeEach(() => {\n\tparentScrollContainer.scrollTop = 0;\n\tparentScrollContainer.scrollLeft = 0;\n});\n\nconst defaultConfig = getInternalConfig();\n\ngetInsidePoints(parentScrollContainer.getBoundingClientRect()).forEach((point) => {\n\tit(`should not scroll an element when over an element [${point.label}]`, () => {\n\t\tconst ordered: string[] = [];\n\n\t\tconst cleanup = combine(\n\t\t\tappendToBody(parentScrollContainer),\n\t\t\tsetElementFromPoint(child),\n\t\t\tdraggable({\n\t\t\t\telement: child,\n\t\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t\t}),\n\t\t\tdropTargetForElements({\n\t\t\t\telement: child,\n\t\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t\t}),\n\t\t\tunsafeOverflowAutoScrollForElements({\n\t\t\t\telement: parentScrollContainer,\n\t\t\t\tgetOverflow: () => ({\n\t\t\t\t\tforTopEdge: {\n\t\t\t\t\t\ttop: 10000,\n\t\t\t\t\t\tleft: 10000,\n\t\t\t\t\t\tright: 1000,\n\t\t\t\t\t},\n\t\t\t\t\tforRightEdge: {\n\t\t\t\t\t\ttop: 10000,\n\t\t\t\t\t\tbottom: 10000,\n\t\t\t\t\t\tright: 10000,\n\t\t\t\t\t},\n\t\t\t\t\tforBottomEdge: {\n\t\t\t\t\t\tright: 10000,\n\t\t\t\t\t\tbottom: 10000,\n\t\t\t\t\t\tleft: 10000,\n\t\t\t\t\t},\n\t\t\t\t\tforLeftEdge: {\n\t\t\t\t\t\ttop: 10000,\n\t\t\t\t\t\tbottom: 10000,\n\t\t\t\t\t\tleft: 10000,\n\t\t\t\t\t},\n\t\t\t\t}),\n\t\t\t}),\n\t\t\tbind(parentScrollContainer, {\n\t\t\t\ttype: 'scroll',\n\t\t\t\tlistener() {\n\t\t\t\t\tordered.push(`scroll event`);\n\t\t\t\t},\n\t\t\t}),\n\t\t);\n\n\t\t// setting some initial scroll\n\t\tparentScrollContainer.scrollLeft = 100;\n\t\tparentScrollContainer.scrollTop = 100;\n\n\t\t// lifting in middle of element, should not trigger auto scrolling\n\t\tuserEvent.lift(child, {\n\t\t\tclientX:\n\t\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\t\tclientY:\n\t\t\t\tparentScrollContainer.getBoundingClientRect().top +\n\t\t\t\tparentScrollContainer.getBoundingClientRect().height / 2,\n\t\t});\n\n\t\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\t\tordered.length = 0;\n\n\t\t// on first frame, there is no auto scroll,\n\t\t// as we don't know what the scroll speed should be\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\n\t\texpect(ordered).toEqual([]);\n\n\t\t// not expecting auto scrolling on the second frame as we are\n\t\t// over the second of the element\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\n\t\texpect(ordered).toEqual([]);\n\n\t\t// updating where we are\n\t\tfireEvent.dragOver(child, point);\n\n\t\t// update won't be picked up until after the next frame\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\texpect(ordered).toEqual([]);\n\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\t\texpect(ordered).toEqual([]);\n\n\t\t// just being safe and checking nothing will happen\n\t\tjest.advanceTimersByTime(defaultConfig.timeDampeningDurationMs);\n\t\texpect(ordered).toEqual([]);\n\n\t\tcleanup();\n\t});\n});\n\n// TODO: outside edge on main axis\n// TODO: inside edge on main axis (but outside of the element)\n" }, { "path": "packages/auto-scroll/__tests__/unit/overflow/provided-hitbox-spacing-type.spec.ts", "content": "import { type unsafeOverflowAutoScrollForElements } from '../../../src/entry-point/unsafe-overflow/element';\n\nconst isEqual = (a: T): void => {\n\texpect(true).toBe(true);\n};\n\ntype GetOverflowFn = Parameters[0]['getOverflow'];\ntype ProvidedHitboxSpacing = ReturnType;\n\nit('should allow to main axis edge', () => {\n\tisEqual({ forTopEdge: { top: 5 } });\n\tisEqual({ forRightEdge: { right: 5 } });\n\tisEqual({ forBottomEdge: { bottom: 5 } });\n\tisEqual({ forLeftEdge: { left: 5 } });\n});\n\nit('should allow cross axis definitions', () => {\n\tisEqual({ forTopEdge: { top: 100, left: 2, right: 3 } });\n\tisEqual({ forRightEdge: { right: 100, top: 2, bottom: 3 } });\n\tisEqual({ forBottomEdge: { bottom: 100, left: 2, right: 3 } });\n\tisEqual({ forLeftEdge: { left: 100, top: 2, bottom: 3 } });\n});\n\nit('should not allow stretching back into the element', () => {\n\t// @ts-expect-error\n\tisEqual({ forTopEdge: { top: 100, bottom: 10 } });\n\t// @ts-expect-error\n\tisEqual({ forRightEdge: { right: 100, left: 2 } });\n\t// @ts-expect-error\n\tisEqual({ forBottomEdge: { bottom: 100, top: 3 } });\n\t// @ts-expect-error\n\tisEqual({ forLeftEdge: { left: 100, right: 4 } });\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/shared/_util.ts", "content": "import invariant from 'tiny-invariant';\n\nconst honeyPotSelector = '[data-pdnd-honey-pot]';\n\nexport function findHoneyPot(): Element | null {\n\treturn document.querySelector(honeyPotSelector);\n}\n\nexport function getHoneyPot(): HTMLElement {\n\tconst possible = document.querySelectorAll(honeyPotSelector);\n\tinvariant(possible.length !== 0, `No honey pot element found`);\n\tinvariant(possible.length === 1, `Multiple honey pot elements found (expected 1)`);\n\n\tconst [element] = possible;\n\tinvariant(element instanceof HTMLElement, 'Honey pot is not a HTMLElement');\n\treturn element;\n}\n" }, { "path": "packages/auto-scroll/__tests__/unit/shared/async-loading.spec.ts", "content": "import { fireEvent } from '@testing-library/dom';\nimport { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\nbeforeEach(reset);\n\nit('should start auto scrolling if imported after a drag has started', async () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t}),\n\t\tsetElementFromPoint(child),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener: () => ordered.push('scroll event'),\n\t\t}),\n\t);\n\n\tconst onCenterBottom = {\n\t\tclientX:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\tclientY: parentScrollContainer.getBoundingClientRect().bottom,\n\t};\n\n\t// lifting on mid bottom\n\tuserEvent.lift(child, onCenterBottom);\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame: no scroll would occur as we are waiting to know the frame duration\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\texpect(ordered).toEqual([]);\n\n\t// on first frame: no scroll as we are not registered for auto scrolling\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\texpect(ordered).toEqual([]);\n\n\t// just being safe and checking nothing is pending\n\tfireEvent.dragOver(child, onCenterBottom);\n\tjest.advanceTimersByTime(1000);\n\texpect(ordered).toEqual([]);\n\n\t// Okay, let's load in our auto scroller\n\t// eslint-disable-next-line import/dynamic-import-chunkname\n\tconst { autoScrollForElements } = await import('../../../src/entry-point/element');\n\n\tconst unbindAutoScrolling = autoScrollForElements({\n\t\telement: parentScrollContainer,\n\t});\n\n\t// triggering a \"dragover\" event with no input changes\n\t// this is need for the monitor \"onDrag\" function to fire\n\tfireEvent.dragOver(child, onCenterBottom);\n\n\t// first frame: waiting for scheduled `dragOver` event to be released in \"onDrag\"\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\texpect(ordered).toEqual([]);\n\n\t// second frame: waiting for a first frame to finish to know our frame duration\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\texpect(ordered).toEqual([]);\n\n\t// third frame: we should get an auto scroll\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\texpect(ordered).toEqual(['scroll event']);\n\n\tunbindAutoScrolling();\n\tcleanup();\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/shared/ignore-honey-pot.spec.ts", "content": "import { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n\nimport { autoScrollForElements } from '../../../src/entry-point/element';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\tgetBubbleOrderedPath,\n\treset,\n\tsetElementFromPoint,\n\tsetElementFromPointWithPath,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\nimport { getHoneyPot } from './_util';\n\njest.useFakeTimers();\nsetStartSystemTime();\n\nafterEach(reset);\n\nit('should not consider the honey pot when looking up the element the user is over', () => {\n\tconst { child, parentScrollContainer } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\n\tconst cleanup = combine(\n\t\tsetElementFromPoint(child),\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(\n\t\t\t\t\t`scroll event {scrollLeft: ${parentScrollContainer.scrollLeft}, scrollTop: ${parentScrollContainer.scrollTop}}`,\n\t\t\t\t);\n\t\t\t},\n\t\t}),\n\t);\n\n\t// Scroll container is now looking over the center of the element\n\tparentScrollContainer.scrollTop = 500;\n\tparentScrollContainer.scrollLeft = 500;\n\n\tuserEvent.lift(child, { clientX: 1, clientY: 1 });\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\tconst honeyPot = getHoneyPot();\n\tconst path = getBubbleOrderedPath([honeyPot, child, parentScrollContainer]);\n\tconst cleanupElementFrom = setElementFromPointWithPath(path);\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\texpect(ordered).toEqual([]);\n\n\t// Second frame: an auto scroll will occur\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// Scroll backwards on both axis by 1px\n\texpect(ordered).toEqual(['scroll event {scrollLeft: 499, scrollTop: 499}']);\n\n\tcleanup();\n\tcleanupElementFrom();\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/shared/monitor-binding.spec.ts", "content": "import { reset, setStartSystemTime, setupNestedScrollContainers } from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\nbeforeEach(reset);\n\nit('should share a single monitor binding between imports', () => {\n\tjest.isolateModules(() => {\n\t\tjest.mock('@atlaskit/pragmatic-drag-and-drop/element/adapter');\n\n\t\tconst { monitorForElements } = require('@atlaskit/pragmatic-drag-and-drop/element/adapter');\n\t\tconst { combine } = require('@atlaskit/pragmatic-drag-and-drop/combine');\n\n\t\tconst [_, parent, grandParent] = setupNestedScrollContainers([\n\t\t\t{ width: 10000, height: 10000 },\n\t\t\t{ width: 5000, height: 5000 },\n\t\t\t{ width: 2000, height: 2000 },\n\t\t]);\n\t\texpect(monitorForElements).not.toHaveBeenCalled();\n\n\t\t// first import will cause the monitor to be bound to\n\t\tconst {\n\t\t\tautoScrollForElements: autoScrollForElements1,\n\t\t} = require('../../../src/entry-point/element');\n\t\texpect(monitorForElements).toHaveBeenCalledTimes(1);\n\n\t\t// second import will not cause another monitor binding\n\t\tconst {\n\t\t\tautoScrollForElements: autoScrollForElements2,\n\t\t} = require('../../../src/entry-point/element');\n\t\texpect(monitorForElements).toHaveBeenCalledTimes(1);\n\n\t\t// registration will not cause another monitor binding;\n\t\tconst unbind = combine(\n\t\t\tautoScrollForElements1({\n\t\t\t\telement: grandParent,\n\t\t\t}),\n\t\t\tautoScrollForElements2({\n\t\t\t\telement: parent,\n\t\t\t}),\n\t\t);\n\t\texpect(monitorForElements).toHaveBeenCalledTimes(1);\n\n\t\tunbind();\n\t});\n});\n\nit('should share a monitor binding between standard and overflow scrolling', () => {\n\tjest.isolateModules(() => {\n\t\tjest.mock('@atlaskit/pragmatic-drag-and-drop/element/adapter');\n\n\t\tconst { monitorForElements } = require('@atlaskit/pragmatic-drag-and-drop/element/adapter');\n\t\tconst { combine } = require('@atlaskit/pragmatic-drag-and-drop/combine');\n\n\t\tconst [_, parent, grandParent] = setupNestedScrollContainers([\n\t\t\t{ width: 10000, height: 10000 },\n\t\t\t{ width: 5000, height: 5000 },\n\t\t\t{ width: 2000, height: 2000 },\n\t\t]);\n\t\texpect(monitorForElements).not.toHaveBeenCalled();\n\n\t\t// first import will cause the monitor to be bound to\n\t\tconst { autoScrollForElements } = require('../../../src/entry-point/element');\n\t\texpect(monitorForElements).toHaveBeenCalledTimes(1);\n\t\tconst {\n\t\t\tunsafeOverflowAutoScrollForElements,\n\t\t} = require('../../../src/entry-point/unsafe-overflow/element');\n\t\texpect(monitorForElements).toHaveBeenCalledTimes(1);\n\n\t\t// registration will not cause another monitor binding;\n\t\tconst unbind = combine(\n\t\t\tautoScrollForElements({\n\t\t\t\telement: grandParent,\n\t\t\t}),\n\t\t\tunsafeOverflowAutoScrollForElements({\n\t\t\t\telement: parent,\n\t\t\t}),\n\t\t);\n\t\texpect(monitorForElements).toHaveBeenCalledTimes(1);\n\n\t\tunbind();\n\t});\n});\n" }, { "path": "packages/auto-scroll/__tests__/unit/shared/time-dampening-handover.spec.ts", "content": "import { fireEvent } from '@testing-library/dom';\nimport { bind } from 'bind-event-listener';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { type Position } from '@atlaskit/pragmatic-drag-and-drop/types';\n\nimport { autoScrollForElements } from '../../../src/entry-point/element';\nimport { unsafeOverflowAutoScrollForElements } from '../../../src/entry-point/unsafe-overflow/element';\nimport { getInternalConfig } from '../../../src/shared/configuration';\nimport {\n\tadvanceTimersToNextFrame,\n\tappendToBody,\n\treset,\n\tsetElementFromPoint,\n\tsetStartSystemTime,\n\tsetupBasicScrollContainer,\n\tstepScrollBy,\n\tuserEvent,\n} from '../_util';\n\n// Using modern timers as it is important that the system clock moves in sync with the frames.\n// We need this as we are keeping track of when a drop target is entered into.\njest.useFakeTimers();\nsetStartSystemTime();\n\nbeforeEach(reset);\n\nconst defaultConfig = getInternalConfig();\nconst maxScrollPerFrame = defaultConfig.maxPixelScrollPerSecond / 60;\n\nit('should dampen the acceleration of auto scrolling [new drag] - up', () => {\n\tconst { parentScrollContainer, child } = setupBasicScrollContainer();\n\tconst ordered: string[] = [];\n\tconst scrollHistory: number[] = [parentScrollContainer.scrollTop];\n\n\tlet unsetElementAtPoint = setElementFromPoint(child);\n\tconst cleanup = combine(\n\t\tappendToBody(parentScrollContainer),\n\t\tdraggable({\n\t\t\telement: child,\n\t\t\tonDragStart: () => ordered.push('draggable:start'),\n\t\t\tonDrop: () => ordered.push('draggable:drop'),\n\t\t}),\n\t\tdropTargetForElements({\n\t\t\telement: parentScrollContainer,\n\t\t\tonDragStart: () => ordered.push('dropTarget:start'),\n\t\t\tonDrop: () => ordered.push('dropTarget:drop'),\n\t\t\tonDragEnter: () => ordered.push('dropTarget:enter'),\n\t\t\tonDragLeave: () => ordered.push('dropTarget:leave'),\n\t\t}),\n\t\tautoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t}),\n\t\tunsafeOverflowAutoScrollForElements({\n\t\t\telement: parentScrollContainer,\n\t\t\tgetOverflow: () => ({\n\t\t\t\tforBottomEdge: {\n\t\t\t\t\tbottom: 1000,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tright: 0,\n\t\t\t\t},\n\t\t\t}),\n\t\t}),\n\t\tbind(parentScrollContainer, {\n\t\t\ttype: 'scroll',\n\t\t\tlistener() {\n\t\t\t\tordered.push(`scroll event`);\n\t\t\t\tscrollHistory.push(parentScrollContainer.scrollTop);\n\t\t\t},\n\t\t}),\n\t);\n\n\tconst onBottomEdge: Position = {\n\t\tx:\n\t\t\tparentScrollContainer.getBoundingClientRect().left +\n\t\t\tparentScrollContainer.getBoundingClientRect().width / 2,\n\t\ty: parentScrollContainer.getBoundingClientRect().bottom,\n\t};\n\tconst belowBottomEdge: Position = {\n\t\tx: onBottomEdge.x,\n\t\ty: onBottomEdge.y + 10,\n\t};\n\n\t// lifting on the mid point of the bottom edge\n\tuserEvent.lift(child, {\n\t\tclientX: onBottomEdge.x,\n\t\tclientY: onBottomEdge.y,\n\t});\n\n\texpect(ordered).toEqual(['draggable:start', 'dropTarget:start']);\n\tordered.length = 0;\n\n\t// on first frame, there is no auto scroll as\n\t// we don't know what the scroll speed should be until\n\t// a single frame has passed\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\n\t// scroll container has still not scrolled\n\texpect(ordered).toEqual([]);\n\texpect(parentScrollContainer.scrollTop).toBe(scrollHistory.at(-1));\n\n\t// expecting scroll on second frame\n\tadvanceTimersToNextFrame();\n\tstepScrollBy();\n\texpect(ordered).toEqual(['scroll event']);\n\tordered.length = 0;\n\n\tfunction dragBelowParent() {\n\t\tunsetElementAtPoint();\n\t\tunsetElementAtPoint = setElementFromPoint(document.body);\n\t\tfireEvent.dragEnter(document.body, {\n\t\t\tclientX: belowBottomEdge.x,\n\t\t\tclientY: belowBottomEdge.y,\n\t\t});\n\t\texpect(ordered).toEqual(['dropTarget:leave']);\n\t\tordered.length = 0;\n\t}\n\tfunction dragOntoParentBottomEdge() {\n\t\tunsetElementAtPoint();\n\t\tunsetElementAtPoint = setElementFromPoint(child);\n\t\tfireEvent.dragEnter(child, {\n\t\t\tclientX: onBottomEdge.x,\n\t\t\tclientY: onBottomEdge.y,\n\t\t});\n\t\texpect(ordered).toEqual(['dropTarget:enter']);\n\t\tordered.length = 0;\n\t}\n\n\t// engagement will be recorded during the first scroll event\n\tconst engagementStart = Date.now();\n\n\tfunction isInTimeDampeningPeriod() {\n\t\treturn Date.now() - engagementStart < defaultConfig.timeDampeningDurationMs;\n\t}\n\n\tlet lastScrollChange = 0;\n\tconst hit = jest.fn();\n\tconst actions = [dragBelowParent, dragOntoParentBottomEdge];\n\n\twhile (isInTimeDampeningPeriod()) {\n\t\tactions.forEach((action) => {\n\t\t\t// the first action might have taken us over the time dampening period\n\t\t\tif (!isInTimeDampeningPeriod()) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\thit();\n\n\t\t\tconst before = parentScrollContainer.scrollTop;\n\t\t\t// okay, let's leave the drop target\n\t\t\taction();\n\t\t\t// The next frame will be scrolled by the over flow auto scroller\n\t\t\tadvanceTimersToNextFrame();\n\t\t\tstepScrollBy();\n\n\t\t\texpect(ordered).toEqual(['scroll event']);\n\t\t\tordered.length = 0;\n\n\t\t\tconst after = parentScrollContainer.scrollTop;\n\t\t\tconst scrollChange = after - before;\n\t\t\texpect(scrollChange).toBeGreaterThan(lastScrollChange);\n\n\t\t\tlastScrollChange = scrollChange;\n\t\t});\n\t}\n\n\t// expecting each action to have been called at least once each\n\texpect(hit.mock.calls.length).toBeGreaterThan(actions.length);\n\n\t// Based on what the tim dampening period it is, we might be mid way through\n\t// the actions. This is being a bit resilient by checking what\n\t// action we are up to and continuing from there\n\tconst nextActionIndex = hit.mock.calls.length % actions.length;\n\tconst nextAction = actions[nextActionIndex];\n\tconst next = [\n\t\tnextAction,\n\t\tnextAction === dragBelowParent ? dragOntoParentBottomEdge : dragBelowParent,\n\t];\n\n\t// now that we are outside of the time dampening period, expecting no time dampening\n\tnext.forEach((action) => {\n\t\tconst before = parentScrollContainer.scrollTop;\n\t\t// okay, let's leave the drop target\n\t\taction();\n\t\t// The next frame will be scrolled by the over flow auto scroller\n\t\tadvanceTimersToNextFrame();\n\t\tstepScrollBy();\n\n\t\texpect(ordered).toEqual(['scroll event']);\n\t\tordered.length = 0;\n\n\t\tconst after = parentScrollContainer.scrollTop;\n\t\tconst scrollChange = after - before;\n\t\texpect(scrollChange).toBe(maxScrollPerFrame);\n\t});\n\n\tcleanup();\n});\n" }, { "path": "packages/auto-scroll/afm-jira/tsconfig.json", "content": "{\n\t\"extends\": \"../../../../tsconfig.local-consumption.json\",\n\t\"compilerOptions\": {\n\t\t\"target\": \"es5\",\n\t\t\"outDir\": \"../../../../../jira/tsDist/@atlaskit__pragmatic-drag-and-drop-auto-scroll/app\",\n\t\t\"rootDir\": \"../\",\n\t\t\"composite\": true,\n\t\t\"noCheck\": true\n\t},\n\t\"include\": [\n\t\t\"../src/**/*.ts\",\n\t\t\"../src/**/*.tsx\"\n\t],\n\t\"exclude\": [\n\t\t\"../src/**/__tests__/*\",\n\t\t\"../src/**/*.test.*\",\n\t\t\"../src/**/test.*\",\n\t\t\"../src/**/examples.*\",\n\t\t\"../src/**/examples/*\",\n\t\t\"../src/**/examples/**/*\",\n\t\t\"../src/**/*.stories.*\",\n\t\t\"../src/**/stories/*\",\n\t\t\"../src/**/stories/**/*\"\n\t],\n\t\"references\": [\n\t\t{\n\t\t\t\"path\": \"../../core/afm-jira/tsconfig.json\"\n\t\t}\n\t]\n}\n" }, { "path": "packages/auto-scroll/afm-products/tsconfig.json", "content": "{\n\t\"extends\": \"../../../../tsconfig.local-consumption.json\",\n\t\"compilerOptions\": {\n\t\t\"target\": \"es5\",\n\t\t\"outDir\": \"../../../../../tsDist/@atlaskit__pragmatic-drag-and-drop-auto-scroll/app\",\n\t\t\"rootDir\": \"../\",\n\t\t\"composite\": true,\n\t\t\"noCheck\": true\n\t},\n\t\"include\": [\n\t\t\"../src/**/*.ts\",\n\t\t\"../src/**/*.tsx\"\n\t],\n\t\"exclude\": [\n\t\t\"../src/**/__tests__/*\",\n\t\t\"../src/**/*.test.*\",\n\t\t\"../src/**/test.*\",\n\t\t\"../src/**/examples.*\",\n\t\t\"../src/**/examples/*\",\n\t\t\"../src/**/examples/**/*\",\n\t\t\"../src/**/*.stories.*\",\n\t\t\"../src/**/stories/*\",\n\t\t\"../src/**/stories/**/*\"\n\t],\n\t\"references\": [\n\t\t{\n\t\t\t\"path\": \"../../core/afm-products/tsconfig.json\"\n\t\t}\n\t]\n}\n" }, { "path": "packages/auto-scroll/constellation/index/about.mdx", "content": "---\norder: 0\ntitle: Auto scroll\ndescription: An optional package that enables automatic scrolling during a drag operation\n---\n\nimport SectionMessage from '@atlaskit/section-message';\nimport OverElementExample from '../../examples/over-element';\nimport LazyLoadedExample from '../../examples/lazy-loaded';\nimport AxisLocking from '../../examples/axis-locking';\n\nThis package works with any configuration of scrollable entities, and you can change the\nconfiguration of your scrollable entities in any way you like during a drag.\n\n\n\nThis package depends on [the core package](/components/pragmatic-drag-and-drop/core-package).\n\nThis package has no dependency on any view library (eg `react`), or on the Atlassian Design System.\n\n\n\n\n\n## Registering auto scrolling for scrollable elements\n\nElements that are _registered_ for auto scrolling will be scrolled as a user drags close to the\nedges of the element.\n\n```ts\n// each adapter type has its own auto scroller\nimport { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';\nimport { autoScrollForExternal } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/external';\nimport { autoScrollForTextSelection } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/text-selection';\n\n// enable better auto scrolling\nconst cleanup = autoScrollForElements({\n\telement: myScrollableElement,\n});\n\n// disable better auto scrolling\ncleanup();\n```\n\nA slightly fuller example of a `react` list that is a _drop target_, and has auto scrolling\n\n```tsx\nimport { useRef, ReactElement } from 'react';\nimport { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport invariant from 'tiny-invariant';\n\nfunction ScrollableList({ children }: { children: ReactElement }) {\n\tconst ref = useRef(null);\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tinvariant(element, 'Element ref not set');\n\n\t\treturn combine(\n\t\t\tdropTargetForElements({\n\t\t\t\telement,\n\t\t\t}),\n\t\t\t// A scrollable element does not need to be a drop target,\n\t\t\t// but in this case it is.\n\t\t\t// We can add auto scrolling to an element along side our other\n\t\t\t// Pragmatic drag and drop bindings\n\t\t\tautoScrollForElements({\n\t\t\t\telement,\n\t\t\t}),\n\t\t);\n\t});\n\n\treturn (\n\t\t
\n\t\t\t{children}\n\t\t
\n\t);\n}\n```\n\n### Element scrolling rules and behaviour\n\n- You can position and style your scrollable elements however you like.\n- Your scroll containers can have as many levels of nesting as you like.\n- You have to register an element (eg with `autoScrollForElements`) to enable auto scrolling\n (otherwise the default auto scrolling will apply).\n- A _registered_ scrollable element does not need to be drop target.\n- Auto scrolling is registered for particular entity types. For example, `autoScrollForElements` is\n a drop target for elements, and `autoScrollForExternal` is for native drags.\n- During a drag operation, you can:\n - Register new scrollable elements\n - Unregister scrollable elements\n - Change the styling, layout or dimensions of any scrollable element\n\n## `autoScrollFor*` arguments\n\n- `element`: the `HTMLElement` you want to add auto scrolling too. The `element` does not need to be\n a drop target. The `element` is the unique key for an auto scrolling registration.\n- _(optional)_: `canScroll: (args: ElementGetFeedbackArgs) => boolean`: whether or not auto\n scrolling should occur. Disabling auto scrolling with `canScroll` will _not_ prevent the browsers\n built in auto scrolling, or manual user scrolling during a drag. Unfortunately, there is no way to\n opt out of the platforms built in auto scrolling. We included `canScroll` because it is helpful to\n disable this package's auto scrolling, as it is much easier for users to trigger than the\n platforms built in auto scrolling.\n\n`canScroll` is a helpful way to only enable auto scrolling for particular entity types.\n\n```ts\nautoScrollForElements({\n element: myElement,\n // only enable auto scrolling when a Card is being dragged\n canScroll: ({ source }) => source.data.type === 'card',\n}),\n```\n\n```ts\nexport type ElementGetFeedbackArgs = {\n\t/**\n\t * The users _current_ input\n\t */\n\tinput: Input;\n\t/**\n\t * The data associated with the entity being dragged\n\t */\n\tsource: DragType['payload'];\n\t/**\n\t * The element trying to be scrolled\n\t */\n\telement: Element;\n};\n```\n\n- _(optional)_: `getAllowedAxis: (args: ElementGetFeedbackArgs) => AllowedAxis`: used to enable auto\n scrolling only on a particular axis. [See Axis locking guide](#axis-locking).\n\n- _(optional)_: `getConfiguration: (args: ElementGetFeedbackArgs) => PublicConfig`: used to control\n some aspects of auto scrolling\n\n```ts\nautoScrollForElements({\n element: myElement,\n getConfiguration: () => ({\n maxScrollSpeed: 'fast',\n })\n}),\n```\n\nWe are intentionally only exposing a limited amount of configuration in order to promote\nconsistency. Right now we only expose a single simple configuration option:\n\n- `maxScrollSpeed`: `'fast' | 'standard'`. We recommend using the default `\"standard\"` max scroll\n speed for most experiences. However, on _some_ larger experiences, a faster max scroll speed\n `\"fast\"` _can_ feel better.\n\n## Registering auto scrolling for the `window`\n\n```ts\nimport { autoScrollWindowForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';\nimport { autoScrollWindowForExternal } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/external';\nimport { autoScrollWindowForInternalUncontrolled } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/internal-uncontrolled';\n\n// enable better auto scrolling on the window during drag operations\nconst cleanup = autoScrollWindowForElements();\n\n// disable better auto scrolling on the window\ncleanup();\n```\n\nA slightly fuller example of a `react` board that has window auto scrolling\n\n```tsx\nimport { useRef, ReactElement } from 'react';\nimport { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';\nimport invariant from 'tiny-invariant';\n\nfunction Board({ children }: { children: ReactElement }) {\n\tuseEffect(() => {\n\t\treturn autoScrollWindowForElements();\n\t});\n\n\treturn
{children}
;\n}\n```\n\n### Window auto scrolling rules and behaviour\n\n- You have to register window auto scrolling (eg with `autoScrollWindowForElements`) to enable auto\n scrolling (otherwise the default auto scrolling will apply).\n- Auto scrolling is registered for particular entity types. For example,\n `autoScrollWindowForElements` will do auto scrolling when an element is being dragged, and\n `autoScrollWindowForExternal` will do auto scrolling when something from outside the `window` is\n being dragged over the `window`\n- You can have multiple registrations for `window` auto scrolling, but only one registration will be\n needed for `window` auto scrolling to occur.\n- If there are no active registrations for `window` auto scrolling, then no `window` auto scrolling\n will occur (except for the built in one).\n- During a drag operation:\n - You can register or unregister window auto scrolling\n - You can change the content of the `document` so that the `window` grows or shrinks\n\n## `autoScrollWindowFor*` arguments\n\n- _(optional)_: `canScroll: (args: WindowGetFeedbackArgs) => boolean`: whether or not auto scrolling\n should occur. Disabling auto scrolling with `canScroll` will _not_ prevent the browsers built in\n auto scrolling, or manual user scrolling during a drag. Unfortunately, there is no way to opt out\n of the platforms built in auto scrolling. We included `canScroll` because it is helpful to disable\n this packages auto scrolling, as it is much easier for users to trigger than the platforms built\n in auto scrolling.\n\n`canScroll` is a helpful way to only enable auto scrolling for particular entity types.\n\n```tsx\nautoScrollWindowForElements({\n // only enable auto scrolling when a Card is being dragged\n canScroll: ({ source }) => source.data.type === 'card',\n}),\n```\n\n```ts\nexport type ElementGetFeedbackArgs = {\n\t/**\n\t * The users _current_ input\n\t */\n\tinput: Input;\n\t/**\n\t * The data associated with the entity being dragged\n\t */\n\tsource: DragType['payload'];\n};\n```\n\n## Scroll speed dampening\n\nWe slow down the scroll speed based on two factors: time over an element, and closeness to an edge.\n\n### Time dampening\n\nThe longer a user drags over a scrollable entity, the faster the scroll speed will be (up to a\nlimit).\n\nTime dampening helps a user to avoid loosing context by scrolling too quickly when:\n\n- Lifting a draggable element inside of a scrollable element\n- Dragging into a scrollable element\n\nTime dampening is reset when you leave an element, so if you re-renter an element again, time\ndampening starts again.\n\nOur time dampening value has been tuned to balance:\n\n1. Trying to avoid losing context\n2. Letting the user get stuff done quickly\n\nTime dampening is shared between \"over element\" and \"overflow\" auto scroll regions.\n\nTime dampening is reset when:\n\n- A scrollable entity is unregistered for more than one frame\n- A scrollable entity is no longer being dragged over (except for the `window` - see below)\n- A drag operation is finished\n\nThe `window` time dampening timer does not reset if leaving the `window`. Currently no\n`onDragLeaveWindow` and `onDragEnterWindow` events are published by Pragmatic drag and drop. If we\ndid publish those events, then we _could_ reset the auto scrolling acceleration timer for the\n`window` when entering the `window`.\n\n### Distance dampening\n\nThe closer a user's pointer is to the edge of a scrollable entity (element or window), the faster\nthe scroll will be. Distance dampening allows a user to control the scroll speed by moving closer /\nfurther away from a scrollable edge\n\nThe max speed can be reached a distance away from the actual edge of a scrollable element. This is\nso that users don't have to move right onto the edge to get the max speed - they can get the max\nspeed from a small distance out from the edge\n\n\"Distance\n\n## Dynamic scroll speed\n\nIn order to facilitate a great experience for all users, on all devices, we dynamically adjust the\nspeed of scroll changes based on the devices frame rate (measured in frames per second - `fps`)\n\n**Devices running at `60fps`**\n\nWe can scroll up to our maximum target scroll change in a frame\n\n**Devices running at higher frame rates (eg `120fps` displays)**\n\nWe lower the max scroll change per frame to ensure we don’t scroll too fast.\n\nIf we made the same scroll change per frame on a `120fps` device as we did on a 60fps device, then\nthe `120fps` device would be scrolling twice as fast\n\nThe auto scroller ensures that a `120fps` display scrolls at the same visible speed as a 60fps\ndevices.\n\n**Devices running at slower than `60fps`**\n\nYou might think we would do the inverse of what we do for the `120fps` devices - increase the max\nchange per frame so that the overall speed would match a `60fps` device. However, this can lead to\nlarge scroll changes in a single frame causing the experience to feel janky.\n\nFor lower frame rate devices, we cap the max scroll change per frame to match would it would be if\nthe device was running at `60fps`. This can result in a slower over all scroll speed, but the scroll\nwill always feel smooth.\n\n**Dynamic switching**\n\nThese rules are applied on a _per frame_ basis. One device might move between all three categories\nin the same drag operation.\n\n## Scroll bubbling\n\nIn order to match the browser as closely as possible, as well as to provide an experience that feels\ngreat, we have landed on the following algorithm for scrolling:\n\n- Only scroll scrollable entities that the user is currently dragging over with their pointer.\n- We scroll the inner most scrollable entity first, and then work upwards. This is known as _bubble\n ordering_ and it is the same order that Pragmatic drag and drop events flow.\n- Only scroll one scrollable entity per axis (vertical / horizontal) in a frame. In order for a\n scrollable entity to be scrolled on an axis, it needs to have some available scroll in the\n applicable direction (forwards / backwards).\n\n### Bubbling examples\n\nFor these examples, we have two elements that are both scrollable: `child` and `parent`\n\n```html\n
\n\t
\n\t\t\n\t
\n
\n```\n\n**Scenario:** Based on hitboxes, both `child` and `parent` could be scrolled forwards vertically and\nhorizontally `child` and `parent` both have available scroll vertically and horizontally.\n\n- `child` is scrolled forwards vertically and horizontally\n- `parent` is not scrolled\n\n**Scenario:** Based on hitboxes, both `child` and `parent` could be scrolled forwards vertically and\nhorizontally `child` has no available scroll vertically, but has scroll available horizontally\n`parent` has available scroll vertically and horizontally\n\n- `child` is scrolled horizontally (`child` has no available scroll vertically)\n- `parent` is scrolled vertically (`child` has already been scrolled horizontally so `parent` can\n only be scrolled vertically)\n\n## Deferred loading\n\nThis package supports being loaded in asyncronously, and can be loaded even after a drag has\nstarted.\n\n```ts\nconst { autoScrollForElements } =\n\tawait import('@atlaskit/pragmatic-drag-and-drop-auto-scroll/element');\n```\n\nIn this example, we start loading the auto scroller code after the drag has started, but you could\nload in the auto scroller whenever you like.\n\n\n\nSee our\n[deferred loading guide](/components/pragmatic-drag-and-drop/core-package/recipes/deferred-loading/index)\nfor more information.\n\n## Axis Locking\n\nThis package provides support for axis locking, which allows you to disable auto scrolling on a\nspecific axis. However, there are some important considerations to keep in mind.\n\n```typescript\nautoScrollForElements({\n element: myElement,\n getAllowedAxis: () => 'vertical',\n}),\n```\n\nBrowsers have built in auto scrolling during a drag operation, which does not provide a great\nexperience and it cannot be disabled. This package has been designed to complement built in auto\nscrolling. Additionally, a user can manually scroll any scroll container during a drag.\n\nDue to the inability to disable the browser's built-in auto scroller, full axis locking\nfunctionality cannot be provided by this package alone. To achieve complete axis locking, you must\nmodify the scroll container to restrict scrolling to a single direction. This is typically\naccomplished by setting `overflowX` or `overflowY` to `hidden` on the scroll container.\n\nPlease note that even with the `allowedAxis` prop set to a specific axis, the browser's built-in\nauto scroller will continue to scroll on all scrollable axes. The `allowedAxis` prop only restricts\nthe axis from the perspective of this package, not the browser's perspective.\n\nOne important aspect to note is that time dampening is not cancelled when changing the allowed axis\nmid-drag. This is different from the `canScroll` function, where changing it's return value does\nreset time dampening. This means that if you switch the allowed axis during a drag, the auto\nscroller will continue at its current speed on the newly allowed axis. We decided not to reset time\ndampening on allowed axis changes for now as it would introduce a decent amount of internal\ncomplexity.\n\n\n\n## Declarative vs automatic scrollable entity registration\n\nThis package works by declaratively registering scrollable entities. An alternative would be to\nautomatically apply auto scrolling to everything that is scrollable during a drag.\n\nWe chose declarative registrations for a few reasons:\n\n- They allow for per item configuration (for example, adjusting the speed and auto scroll hitboxes\n for specific entities).\n- They allow us to easily enable / disable scrolling during a drag (through `canScroll()`)\n- They align with the existing declarative Pragmatic drag and drop API\n- Registrations are a cheap way of identifying what is scrollable, otherwise we have to check all\n elements (through `window.getComputedStyles(element)`) to check what is scrollable, which has poor\n performance characteristics.\n" }, { "path": "packages/auto-scroll/constellation/index/props.mdx", "content": "" }, { "path": "packages/auto-scroll/constellation/index/unsafe-overflow-scrolling.mdx", "content": "---\norder: 1\ntitle: Unsafe overflow scrolling\ndescription: Continuing to scroll after leaving a scrollable element\n---\n\nimport SectionMessage from '@atlaskit/section-message';\nimport UnsafeOverflowExample from '../../examples/unsafe-overflow';\n\nUnsafe overflow scrolling allows the user to scroll a scrollable element when they are no longer\nover the element.\n\n\n\n## Challenges with overflow scrolling\n\n\n\nThese challenges are why overflow scrolling is considered unsafe. It should only be used when there\nis a strong justification.\n\n\n\n### It can be confusing for users\n\nOverflow scrolling can feel great, but it does not play well with the web platform's drag and drop\ncapabilities. In order to update the drop target for a drag operation, the user needs to drag over\nan element. With overflow scrolling, the interface can be changing, but the drop target might not be\nas the user might not be over the drop target. This can be confusing for users\n\n### It is easy to create strange experiences\n\nWhen you enable overflow scrolling, it is easy to have multiple scrollable elements scrolling at the\nsame time in unexpected ways. This is because we can no longer rely on the DOM hierarchy to help us\nprovide an scrolling experience that will always feel great. This package gives you the control to\nsetup auto scrolling how you want it, but you will need to be careful to ensure that the settings\nyou have chosen work well for the experience you are making.\n\n### It is more expensive than standard overflow scrolling\n\nWhen doing standard 'over element' auto scrolling, we can leverage the DOM hierarchy to quickly\nsearch for relevant scroll containers. We cannot do that for overflow scrolling. For every overflow\nscrolling registration (eg `unsafeOverflowForElements()`), we need to do a\n`element.getBoundingClientRect()` in each animation frame to see if we are over the element (we have\nto re-create hitbox testing). Doing excessive amounts of of `getBoundingClientRect()` can get\nexpensive, so we suggest you don't add too many overflow scrolling registrations.\n\n## Registering unsafe overflow scrolling for scrollable elements\n\nRegistering unsafe overflow scrolling will only enable scrolling when outside of the element. If you\nwant the element to be scrollable when over the element, then you will also need to add 'over\nelement' auto scrolling as well (eg `autoScrollForElements()`).\n\n```ts\n// each adapter type has its own overflow auto scroller\nimport { unsafeOverflowForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element';\nimport { unsafeOverflowForExternal } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/external';\nimport { unsafeOverflowForTextSelection } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/text-selection';\n\nimport { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';\n\nconst cleanup = combine(\n\t// Enabling scrolling when over an element\n\tautoScrollForElements({\n\t\telement,\n\t}),\n\t// Enabling scrolling when outside an element - in the overflow\n\tunsafeOverflowForElements({\n\t\telement,\n\t}),\n);\n\n// disable auto scrolling\ncleanup();\n```\n\nA slightly fuller example of a `react` list that is a drop target, and has auto scrolling:\n\n```tsx\nimport { useRef, ReactElement } from 'react';\nimport { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';\nimport { unsafeOverflowForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element';\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport invariant from 'tiny-invariant';\n\nfunction ScrollableList({ children }: { children: ReactElement }) {\n\tconst ref = useRef(null);\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tinvariant(element, 'Element ref not set');\n\n\t\treturn combine(\n\t\t\tdropTargetForElements({\n\t\t\t\telement,\n\t\t\t}),\n\t\t\t// Enabling scrolling when \"over\" an element\n\t\t\tautoScrollForElements({\n\t\t\t\telement,\n\t\t\t}),\n\t\t\t// Enabling overflow auto scrolling\n\t\t\tunsafeOverflowForElements({\n\t\t\t\telement,\n\t\t\t}),\n\t\t);\n\t});\n\n\treturn (\n\t\t
\n\t\t\t{children}\n\t\t
\n\t);\n}\n```\n\n### Element scrolling rules and behaviour\n\nOverflow scrolling has the same flexible rules as 'over element' auto scrolling - you can have any\nsetup you want, and change anything you want during a drag.\n\n## `unsafeOverflowAutoScrollFor*` arguments\n\n- `element`: the `HTMLElement` you want to add auto scrolling too. The `element` does not need to be\n a `dropTarget`. The `element` is the unique key for an auto scrolling registration.\n- `getOverflow: () => ProvidedHitboxSpacing`. `ProvidedHitboxSpacing` allows you to specify how\n overflow scrolling should occur for a element.\n\n`getOverflow()` allows you to specify how overflow scrolling should work for each edge of an\nelement.\n\n![API visual explanation](images/from-top-edge-example.jpg)\n\n```ts\n// Only allow overflow scrolling above and below an element by 400px\nunsafeOverflowAutoScrollForElements({\n\telement,\n\tgetOverflow: () => ({\n\t\tforTopEdge: {\n\t\t\ttop: 400,\n\t\t},\n\t\tforBottomEdge: {\n\t\t\tbottom: 400,\n\t\t},\n\t}),\n});\n\nunsafeOverflowAutoScrollForElements({\n\telement,\n\tgetOverflow: () => ({\n\t\tforTopEdge: {\n\t\t\t// Allow the top element to be overflow scrolled up to\n\t\t\t// 2000px away from the element\n\t\t\ttop: 2000,\n\t\t\t// Allow the top element to be overflow scrolled when\n\t\t\t// up to 200px on the left or right of the top edge.\n\t\t\t// The hitbox for scrolling will extend down below the top edge\n\t\t\t// to match the \"over element\" hitbox for the top edge.\n\t\t\t// See the diagram for more details.\n\t\t\tleft: 200,\n\t\t\tright: 200,\n\n\t\t\t// The \"bottom\" edge definition for the \"top\" edge is\n\t\t\t// handled by the \"over element\" auto scroller.\n\t\t},\n\t}),\n});\n```\n\n- _(optional)_: `canScroll: (args: ElementGetFeedbackArgs) => boolean`: whether or not auto\n scrolling should occur. Disabling auto scrolling with `canScroll` will _not_ prevent the browser's\n built in auto scrolling, or manual user scrolling during a drag. Unfortunately, there is no way to\n opt out of the platform's built in auto scrolling. We included `canScroll` because it is helpful\n to disable this package's auto scrolling, as it is much easier for users to trigger than the\n platform's built in auto scrolling.\n\n## Scroll acceleration\n\n- Builds on 'over element' auto scrolling.\n- When outside of the element on the main axis of an edge (eg vertical axis for the top edge), then\n the max scroll speed is applied.\n- Time dampening timer is shared with 'over element' auto scrolling. This means that time dampening\n will carry over correctly when moving between 'over element' and 'overflow scrolling'.\n- Distance dampening is applied when in the \"cross axis\" component of an edges hitbox (see the\n checkered area of the diagram below). This is so that the scroll speed inside an edge is the same\n when inside the element, or when outside the element.\n\n![Diagram of overflow scrolling logic](images/overflow-scrolling-example.jpg)\n\n## Window scrolling\n\nOverflow scrolling is not applicable for window scrolling as the browser stops publishing events to\nthe document once the user has left the window. If you want to have window scrolling, then use our\nstandard approach for [registering auto scrolling for the window](../about).\n" }, { "path": "packages/auto-scroll/examples/axis-locking.tsx", "content": "import React from 'react';\n\nimport { Table } from './pieces/table';\n\nexport default function AxisLocking(): React.JSX.Element {\n\treturn ;\n}\n" }, { "path": "packages/auto-scroll/examples/lazy-loaded.tsx", "content": "import React from 'react';\n\nimport { Board } from './pieces/lazy-loaded-board';\n\nexport default function LazyLoaded(): React.JSX.Element {\n\treturn ;\n}\n" }, { "path": "packages/auto-scroll/examples/nested-scroll.tsx", "content": "/* eslint-disable @atlaskit/design-system/no-nested-styles */\n/**\n * @jsxRuntime classic\n * @jsx jsx\n */\nimport { Fragment, type ReactElement, useEffect, useRef, useState } from 'react';\n\n// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766\nimport { css, Global, jsx } from '@emotion/react';\nimport invariant from 'tiny-invariant';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss\nimport { Box, Stack, xcss } from '@atlaskit/primitives';\n\nimport { autoScrollForElements, autoScrollWindowForElements } from '../src/entry-point/element';\n\nconst globalStyles = css({\n\t// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766\n\t':root': {\n\t\t'--grid': '8px',\n\t},\n\t// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766\n\tbody: {\n\t\theight: '150vh',\n\t},\n});\n\ntype ItemType = {\n\tid: string;\n};\n\nconst itemStyles = xcss({\n\tpadding: 'space.050',\n\tborderWidth: 'border.width',\n\tborderStyle: 'solid',\n\tborderColor: 'color.border.brand',\n\tborderRadius: 'radius.small',\n\tbackgroundColor: 'color.background.accent.lime.subtlest',\n\twidth: '300px',\n});\n\nfunction Item({ item }: { item: ItemType }) {\n\tconst ref = useRef(null);\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tinvariant(element);\n\t\treturn combine(\n\t\t\tdraggable({\n\t\t\t\telement,\n\t\t\t\tgetInitialData: () => item,\n\t\t\t}),\n\t\t\tdropTargetForElements({ element, getIsSticky: () => true }),\n\t\t);\n\t}, [item]);\n\treturn (\n\t\t\n\t\t\t{item.id}\n\t\t\n\t);\n}\n\nfunction getItems({ listId, count }: { listId: string; count: number }): ItemType[] {\n\treturn Array.from({ length: count }).map((_, k) => ({\n\t\tid: `list[${listId}] index[${k}]`,\n\t}));\n}\n\nconst scrollContainerStyles = xcss({\n\theight: '300px',\n\toverflowY: 'scroll',\n\tborder: '1px solid green',\n});\n\nfunction List({ listId, children }: { listId: string; children?: ReactElement | ReactElement[] }) {\n\tconst [items] = useState(() => getItems({ listId, count: 20 }));\n\tconst ref = useRef(null);\n\n\tuseEffect(() => {\n\t\tinvariant(ref.current);\n\t\treturn autoScrollForElements({\n\t\t\telement: ref.current,\n\t\t});\n\t}, []);\n\n\treturn (\n\t\t\n\t\t\t

List: {listId}

\n\t\t\t\n\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\n\t\t\t\t))}\n\t\t\t\n\t\t\t{children}\n\t\t\n\t);\n}\n\nexport default function WindowScroll(): React.JSX.Element {\n\tuseEffect(() => {\n\t\treturn autoScrollWindowForElements({});\n\t});\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n" }, { "path": "packages/auto-scroll/examples/over-element.tsx", "content": "import React from 'react';\n\nimport { autoScrollForElements } from '../src/entry-point/element';\n\nimport { Board } from './pieces/board';\nimport { BoardContext, type TBoardContext } from './pieces/board-context';\n\nconst context: TBoardContext = {\n\tautoScrollColumn: autoScrollForElements,\n\tautoScrollBoard: autoScrollForElements,\n};\n\nexport default function OverElement(): React.JSX.Element {\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t);\n}\n" }, { "path": "packages/auto-scroll/examples/pieces/board-context.ts", "content": "import { createContext } from 'react';\n\nimport { type autoScrollForElements } from '../../src/entry-point/element';\n\nexport type TBoardContext = {\n\tautoScrollColumn: typeof autoScrollForElements;\n\tautoScrollBoard: typeof autoScrollForElements;\n};\n\nexport const BoardContext = createContext(null);\n" }, { "path": "packages/auto-scroll/examples/pieces/board.tsx", "content": "import React, { useContext, useEffect, useRef, useState } from 'react';\n\nimport invariant from 'tiny-invariant';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\n// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss\nimport { Box, Flex, Stack, xcss } from '@atlaskit/primitives';\n\nimport { autoScrollWindowForElements } from '../../src/entry-point/element';\n\nimport { BoardContext } from './board-context';\nimport { Card } from './card';\n\nfunction useRequiredContext(\n\tContext: React.Context,\n): TContextValue {\n\tconst value = useContext(Context);\n\tinvariant(value, 'Could not find context value');\n\treturn value;\n}\n\ntype TItem = { id: string };\ntype TColumn = {\n\tid: string;\n\titems: TItem[];\n};\n\nconst columnStyles = xcss({\n\toverflowY: 'auto',\n\theight: '300px',\n\twidth: '140px',\n\tbackgroundColor: 'elevation.surface',\n\tborderColor: 'color.border.accent.purple',\n\tborderRadius: 'radius.small',\n\tborderWidth: 'border.width',\n\tborderStyle: 'solid',\n\tflexShrink: 0,\n});\n\nfunction Column({ column }: { column: TColumn }) {\n\tconst ref = useRef(null);\n\tconst { autoScrollColumn } = useRequiredContext(BoardContext);\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tinvariant(element);\n\n\t\treturn combine(\n\t\t\tautoScrollColumn({\n\t\t\t\telement,\n\t\t\t}),\n\t\t);\n\t}, [autoScrollColumn]);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{column.items.map((item) => (\n\t\t\t\t\t\n\t\t\t\t))}\n\t\t\t\n\t\t\n\t);\n}\n\nconst boardStyles = xcss({\n\toverflowX: 'auto',\n\tborderWidth: 'border.width',\n\tborderColor: 'color.border.accent.purple',\n\tborderStyle: 'solid',\n\tborderRadius: 'radius.small',\n\tpadding: 'space.200',\n\tbackgroundColor: 'elevation.surface.sunken',\n});\n\nfunction getColumns({ count }: { count: number }): TColumn[] {\n\treturn Array.from({ length: count }, (_, columnIndex) => {\n\t\tconst columnId = `column-${columnIndex}`;\n\t\tconst items = Array.from({ length: 50 }, (_, itemIndex) => {\n\t\t\treturn {\n\t\t\t\tid: `${columnId}::item-${itemIndex}`,\n\t\t\t};\n\t\t});\n\t\treturn { id: columnId, items };\n\t});\n}\n\nconst columnContainerStyles = xcss({\n\twidth: 'min-content', // so we can have padding around the board\n});\n\nexport function Board(): React.JSX.Element {\n\tconst ref = useRef(null);\n\tconst [columns] = useState(() => getColumns({ count: 30 }));\n\n\tconst { autoScrollBoard } = useRequiredContext(BoardContext);\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tinvariant(element);\n\n\t\treturn combine(\n\t\t\tautoScrollBoard({\n\t\t\t\telement,\n\t\t\t}),\n\t\t\tautoScrollWindowForElements(),\n\t\t);\n\t}, [autoScrollBoard]);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{columns.map((column) => (\n\t\t\t\t\t\n\t\t\t\t))}\n\t\t\t\n\t\t\n\t);\n}\n" }, { "path": "packages/auto-scroll/examples/pieces/card.tsx", "content": "import React, { Fragment, useEffect, useRef, useState } from 'react';\n\nimport { createPortal } from 'react-dom';\nimport invariant from 'tiny-invariant';\n\nimport { durations, easeInOut } from '@atlaskit/motion';\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';\nimport { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';\n// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss\nimport { Box, xcss } from '@atlaskit/primitives';\n\nconst cardStyles = xcss({\n\theight: 'size.400',\n\tborderWidth: 'border.width',\n\tborderColor: 'color.border.accent.purple',\n\tborderStyle: 'solid',\n\tbackgroundColor: 'color.background.accent.purple.subtler',\n\tborderRadius: 'radius.small',\n\ttransitionProperty: 'background-color, opacity',\n\t// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values\n\ttransitionDuration: `${durations.medium}ms`,\n\ttransitionTimingFunction: easeInOut,\n\n\tdisplay: 'flex',\n\talignItems: 'center',\n\tpadding: 'space.050',\n});\n\ntype TItem = { id: string };\n\ntype CardState =\n\t| { type: 'idle' }\n\t| { type: 'preview'; container: HTMLElement; rect: DOMRect }\n\t| { type: 'is-dragging' }\n\t| { type: 'is-over' };\n\nconst cardStateStyles: {\n\t[Key in CardState['type']]: ReturnType | undefined;\n} = {\n\tidle: undefined,\n\tpreview: undefined,\n\t'is-dragging': xcss({ opacity: 0.4 }),\n\t'is-over': xcss({\n\t\tbackgroundColor: 'color.background.accent.purple.subtler.hovered',\n\t}),\n};\n\nconst idle: CardState = { type: 'idle' };\nconst isDragging: CardState = { type: 'is-dragging' };\nconst isOver: CardState = { type: 'is-over' };\n\nexport function Card({ item }: { item: TItem }): React.JSX.Element {\n\tconst ref = useRef(null);\n\tconst [state, setState] = useState(idle);\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tinvariant(element);\n\n\t\treturn combine(\n\t\t\tdraggable({\n\t\t\t\telement,\n\t\t\t\tonGenerateDragPreview: ({ source, nativeSetDragImage, location }) => {\n\t\t\t\t\t// Using a custom native drag preview\n\t\t\t\t\t// so that we get a nicer border radius on\n\t\t\t\t\t// the preview 👩‍🍳🤌\n\t\t\t\t\tsetCustomNativeDragPreview({\n\t\t\t\t\t\tnativeSetDragImage,\n\t\t\t\t\t\tgetOffset: preserveOffsetOnSource({\n\t\t\t\t\t\t\telement: source.element,\n\t\t\t\t\t\t\tinput: location.initial.input,\n\t\t\t\t\t\t}),\n\t\t\t\t\t\trender({ container }) {\n\t\t\t\t\t\t\tsetState({\n\t\t\t\t\t\t\t\ttype: 'preview',\n\t\t\t\t\t\t\t\tcontainer,\n\t\t\t\t\t\t\t\trect: element.getBoundingClientRect(),\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\treturn () => setState(isDragging);\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tonDragStart: () => setState(isDragging),\n\t\t\t\tonDrop: () => setState(idle),\n\t\t\t}),\n\t\t\tdropTargetForElements({\n\t\t\t\telement,\n\t\t\t\tgetIsSticky: () => true,\n\t\t\t\tcanDrop: ({ source }) => source.element !== element,\n\t\t\t\tonDragStart: () => setState(isOver),\n\t\t\t\tonDragEnter: () => setState(isOver),\n\t\t\t\tonDragLeave: () => setState(idle),\n\t\t\t\tonDrop: () => setState(idle),\n\t\t\t}),\n\t\t);\n\t}, []);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t{state.type === 'preview'\n\t\t\t\t? createPortal(, state.container)\n\t\t\t\t: null}\n\t\t\n\t);\n}\n\nfunction CardPreview({ rect }: { rect: DOMRect }) {\n\treturn ;\n}\n" }, { "path": "packages/auto-scroll/examples/pieces/lazy-loaded-board.tsx", "content": "import React, { useEffect, useRef, useState } from 'react';\n\nimport { bind } from 'bind-event-listener';\nimport invariant from 'tiny-invariant';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss\nimport { Box, Flex, Inline, Stack, xcss } from '@atlaskit/primitives';\n\nimport { Card } from './card';\n\ntype TItem = { id: string };\ntype TColumn = {\n\tid: string;\n\titems: TItem[];\n};\n\nconst columnStyles = xcss({\n\toverflowY: 'auto',\n\theight: '300px',\n\twidth: '140px',\n\tbackgroundColor: 'elevation.surface',\n\tborderColor: 'color.border.accent.purple',\n\tborderRadius: 'radius.small',\n\tborderWidth: 'border.width',\n\tborderStyle: 'solid',\n\tflexShrink: 0,\n});\n\nfunction Column({ column }: { column: TColumn }) {\n\tconst ref = useRef(null);\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tinvariant(element);\n\n\t\tlet operation = new AbortController();\n\n\t\treturn monitorForElements({\n\t\t\tonDragStart: async () => {\n\t\t\t\toperation = new AbortController();\n\n\t\t\t\tconst { autoScrollForElements, autoScrollWindowForElements } =\n\t\t\t\t\t// eslint-disable-next-line import/dynamic-import-chunkname\n\t\t\t\t\tawait import('../../src/entry-point/element');\n\n\t\t\t\tconsole.log('scroller loaded');\n\t\t\t\tif (operation.signal.aborted) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst cleanup = combine(\n\t\t\t\t\tautoScrollForElements({\n\t\t\t\t\t\telement,\n\t\t\t\t\t}),\n\t\t\t\t\tautoScrollWindowForElements(),\n\t\t\t\t);\n\n\t\t\t\tbind(operation.signal, {\n\t\t\t\t\ttype: 'abort',\n\t\t\t\t\tlistener: cleanup,\n\t\t\t\t\toptions: { once: true },\n\t\t\t\t});\n\t\t\t},\n\t\t\tonDrop() {\n\t\t\t\toperation.abort();\n\t\t\t},\n\t\t});\n\t}, []);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{column.items.map((item) => (\n\t\t\t\t\t\n\t\t\t\t))}\n\t\t\t\n\t\t\n\t);\n}\n\nconst boardStyles = xcss({\n\toverflowX: 'auto',\n\tborderWidth: 'border.width',\n\tborderColor: 'color.border.accent.purple',\n\tborderStyle: 'solid',\n\tborderRadius: 'radius.small',\n\tpadding: 'space.200',\n\tbackgroundColor: 'elevation.surface.sunken',\n});\n\ntype LoadingState = 'pending' | 'loading' | 'loaded';\n\nconst loadingStyles: { [Key in LoadingState]: ReturnType } = {\n\tpending: xcss({\n\t\tcolor: 'color.text.warning',\n\t}),\n\tloading: xcss({\n\t\tcolor: 'color.text.discovery',\n\t}),\n\tloaded: xcss({\n\t\tcolor: 'color.text.success',\n\t}),\n};\n\nfunction getColumns({ count }: { count: number }): TColumn[] {\n\treturn Array.from({ length: count }, (_, columnIndex) => {\n\t\tconst columnId = `column-${columnIndex}`;\n\t\tconst items = Array.from({ length: 50 }, (_, itemIndex) => {\n\t\t\treturn {\n\t\t\t\tid: `${columnId}::item-${itemIndex}`,\n\t\t\t};\n\t\t});\n\t\treturn { id: columnId, items };\n\t});\n}\n\nconst columnContainerStyles = xcss({\n\twidth: 'min-content', // so we can have padding around the board\n});\n\nexport function Board(): React.JSX.Element {\n\tconst ref = useRef(null);\n\tconst [columns] = useState(() => getColumns({ count: 8 }));\n\tconst [state, setState] = useState('pending');\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tinvariant(element);\n\t\tlet operation: AbortController | null = null;\n\n\t\treturn combine(\n\t\t\tmonitorForElements({\n\t\t\t\tonDragStart: async () => {\n\t\t\t\t\toperation = new AbortController();\n\t\t\t\t\tsetState((current) => {\n\t\t\t\t\t\tif (current === 'pending') {\n\t\t\t\t\t\t\treturn 'loading';\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn current;\n\t\t\t\t\t});\n\n\t\t\t\t\t// Note: for example simplicity we are not handling errors\n\t\t\t\t\tconst { autoScrollForElements, autoScrollWindowForElements } =\n\t\t\t\t\t\t// eslint-disable-next-line import/dynamic-import-chunkname\n\t\t\t\t\t\tawait import('../../src/entry-point/element');\n\n\t\t\t\t\tif (operation.signal.aborted) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tsetState((current) => {\n\t\t\t\t\t\tif (current === 'loading') {\n\t\t\t\t\t\t\treturn 'loaded';\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn current;\n\t\t\t\t\t});\n\n\t\t\t\t\tconst cleanup = combine(\n\t\t\t\t\t\tautoScrollForElements({\n\t\t\t\t\t\t\telement,\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tautoScrollWindowForElements(),\n\t\t\t\t\t);\n\n\t\t\t\t\tbind(operation.signal, {\n\t\t\t\t\t\ttype: 'abort',\n\t\t\t\t\t\tlistener: cleanup,\n\t\t\t\t\t\toptions: { once: true },\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tonDrop() {\n\t\t\t\t\toperation?.abort();\n\t\t\t\t},\n\t\t\t}),\n\t\t);\n\t}, []);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{columns.map((column) => (\n\t\t\t\t\t\t\n\t\t\t\t\t))}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\tAuto scrolling:\n\t\t\t\t\n\t\t\t\t\t{/* eslint-disable-next-line @atlaskit/design-system/no-html-code */}\n\t\t\t\t\t{state}\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n" }, { "path": "packages/auto-scroll/examples/pieces/table.tsx", "content": "import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';\n\nimport invariant from 'tiny-invariant';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss\nimport { Box, xcss } from '@atlaskit/primitives';\n\nimport { autoScrollForElements, autoScrollWindowForElements } from '../../src/entry-point/element';\n\nimport { Card } from './card';\n\ntype TItem = { id: string };\n\nconst COLUMN_COUNT = 8;\nconst columns = new Array(COLUMN_COUNT).fill(null);\n\nfunction getItems({ count }: { count: number }): TItem[] {\n\treturn Array.from({ length: count }, (_, itemIndex) => ({\n\t\tid: `item-${itemIndex}`,\n\t}));\n}\n\nfunction Cell({ isSticky, children }: PropsWithChildren<{ isSticky?: boolean }>) {\n\treturn (\n\t\t\n\t\t\t{children}\n\t\t\n\t);\n}\n\nfunction Row({ item }: { item: TItem }) {\n\treturn (\n\t\t\n\t\t\t{columns.map((_, index) =>\n\t\t\t\tindex === 0 ? (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t) : (\n\t\t\t\t\t\n\t\t\t\t),\n\t\t\t)}\n\t\t\n\t);\n}\n\nexport function Table(): React.JSX.Element {\n\tconst ref = useRef(null);\n\tconst [items] = useState(() => getItems({ count: 20 }));\n\n\tconst [isDragging, setIsDragging] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tinvariant(element);\n\n\t\treturn combine(\n\t\t\tmonitorForElements({\n\t\t\t\tonDragStart() {\n\t\t\t\t\tsetIsDragging(true);\n\t\t\t\t},\n\t\t\t\tonDrop() {\n\t\t\t\t\tsetIsDragging(false);\n\t\t\t\t},\n\t\t\t}),\n\t\t\tautoScrollForElements({\n\t\t\t\telement,\n\t\t\t\tgetAllowedAxis: () => 'vertical',\n\t\t\t}),\n\t\t\tautoScrollWindowForElements(),\n\t\t);\n\t}, []);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{columns.map((_, index) => (\n\t\t\t\t\t\t// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766\n\t\t\t\t\t\t\n\t\t\t\t\t))}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t\n\t\t\t\t\t))}\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n\nconst cellStyles = xcss({\n\tpadding: 'space.0',\n\twidth: 'size.600',\n\tborderColor: 'color.border',\n\tborderWidth: 'border.width',\n\tborderStyle: 'solid',\n});\n\nconst stickyStyles = xcss({\n\tposition: 'sticky',\n\tleft: '0',\n\tbackgroundColor: 'elevation.surface',\n});\n\nconst rowStyles = xcss({\n\theight: 'size.400',\n\tposition: 'relative',\n\tborderColor: 'color.border',\n\tborderWidth: 'border.width',\n\tborderStyle: 'solid',\n});\n\nconst wrapperStyles = xcss({\n\toverflow: 'auto',\n\tdisplay: 'flex',\n\tmaxHeight: '500px',\n});\n\nconst scrollLockStyles = xcss({\n\toverflowX: 'hidden',\n});\n\nconst tableStyles = xcss({\n\ttableLayout: 'fixed',\n\tborderWidth: 'border.width',\n\tborderColor: 'color.border',\n\tborderStyle: 'solid',\n\tborderRadius: 'radius.small',\n\tbackgroundColor: 'elevation.surface.sunken',\n});\n" }, { "path": "packages/auto-scroll/examples/unsafe-overflow-box.tsx", "content": "import React, { useEffect, useRef, useState } from 'react';\n\nimport invariant from 'tiny-invariant';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss\nimport { Box, xcss } from '@atlaskit/primitives';\n\nimport { unsafeOverflowAutoScrollForElements } from '../src/entry-point/unsafe-overflow/element';\n\nfunction getHugeContent(): string {\n\treturn Array.from({ length: 10000 }, (_, index) => `index:${index}`).join(' ');\n}\n\nconst scrollContainerStyles = xcss({\n\toverflowX: 'scroll',\n\toverflowY: 'scroll',\n\twidth: '400px',\n\theight: '400px',\n\tborderWidth: 'border.width',\n\tborderStyle: 'solid',\n\tborderColor: 'color.border',\n\tpadding: 'space.200',\n\tgap: 'space.200',\n});\nconst containerStyles = xcss({\n\theight: '100vh',\n\tdisplay: 'flex',\n\tflexDirection: 'column',\n\talignItems: 'center',\n\tjustifyContent: 'center',\n});\nconst draggableStyles = xcss({\n\tpadding: 'space.100',\n\tbackgroundColor: 'color.background.accent.blue.subtle',\n});\n\nconst contentStyles = xcss({\n\twidth: '1000px',\n});\n\nexport default function Example(): React.JSX.Element {\n\tconst [content] = useState(() => getHugeContent());\n\tconst scrollableRef = useRef(null);\n\tconst draggableRef = useRef(null);\n\n\tuseEffect(() => {\n\t\tconst scrollableEl = scrollableRef.current;\n\t\tinvariant(scrollableEl);\n\n\t\tscrollableEl.scrollTop = scrollableEl.scrollHeight / 2;\n\t\tscrollableEl.scrollLeft = scrollableEl.scrollWidth / 2;\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst scrollableEl = scrollableRef.current;\n\t\tconst draggableEl = draggableRef.current;\n\t\tinvariant(scrollableEl && draggableEl);\n\t\treturn combine(\n\t\t\tdraggable({\n\t\t\t\telement: draggableEl,\n\t\t\t}),\n\t\t\tunsafeOverflowAutoScrollForElements({\n\t\t\t\telement: scrollableEl,\n\t\t\t\tgetOverflow() {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tforTopEdge: {\n\t\t\t\t\t\t\ttop: 100,\n\t\t\t\t\t\t\tleft: 100,\n\t\t\t\t\t\t\tright: 100,\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t},\n\t\t\t}),\n\t\t);\n\t}, []);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{content}\n\t\t\t\n\t\t\t\n\t\t\t\tDrag me\n\t\t\t\n\t\t\n\t);\n}\n" }, { "path": "packages/auto-scroll/examples/unsafe-overflow-only.tsx", "content": "import React from 'react';\n\nimport { type autoScrollForElements } from '../src/entry-point/element';\nimport { unsafeOverflowAutoScrollForElements } from '../src/entry-point/unsafe-overflow/element';\n\nimport { Board } from './pieces/board';\nimport { BoardContext, type TBoardContext } from './pieces/board-context';\n\nconst context: TBoardContext = {\n\tautoScrollBoard: (\n\t\targs: Parameters[0],\n\t): ReturnType => {\n\t\treturn unsafeOverflowAutoScrollForElements({\n\t\t\t...args,\n\t\t\t// allow auto scrolling all around the board\n\t\t\tgetOverflow: () => ({\n\t\t\t\tforTopEdge: {\n\t\t\t\t\ttop: 6000,\n\t\t\t\t\tright: 6000,\n\t\t\t\t\tleft: 6000,\n\t\t\t\t},\n\t\t\t\tforRightEdge: {\n\t\t\t\t\ttop: 6000,\n\t\t\t\t\tright: 6000,\n\t\t\t\t\tbottom: 6000,\n\t\t\t\t},\n\t\t\t\tforBottomEdge: {\n\t\t\t\t\tright: 6000,\n\t\t\t\t\tbottom: 6000,\n\t\t\t\t\tleft: 6000,\n\t\t\t\t},\n\t\t\t\tforLeftEdge: {\n\t\t\t\t\ttop: 6000,\n\t\t\t\t\tleft: 6000,\n\t\t\t\t\tbottom: 6000,\n\t\t\t\t},\n\t\t\t}),\n\t\t});\n\t},\n\tautoScrollColumn: (\n\t\targs: Parameters[0],\n\t): ReturnType => {\n\t\treturn unsafeOverflowAutoScrollForElements({\n\t\t\t...args,\n\t\t\t// allow auto scrolling above and below the column\n\t\t\tgetOverflow: () => ({\n\t\t\t\tforTopEdge: {\n\t\t\t\t\ttop: 6000,\n\t\t\t\t\tright: 0,\n\t\t\t\t\tleft: 0,\n\t\t\t\t},\n\t\t\t\tforBottomEdge: {\n\t\t\t\t\tright: 0,\n\t\t\t\t\tbottom: 6000,\n\t\t\t\t\tleft: 0,\n\t\t\t\t},\n\t\t\t}),\n\t\t});\n\t},\n};\n\nexport default function UnsafeOverflowOnly(): React.JSX.Element {\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t);\n}\n" }, { "path": "packages/auto-scroll/examples/unsafe-overflow.tsx", "content": "import React from 'react';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\n\nimport { autoScrollForElements } from '../src/entry-point/element';\nimport { unsafeOverflowAutoScrollForElements } from '../src/entry-point/unsafe-overflow/element';\n\nimport { Board } from './pieces/board';\nimport { BoardContext, type TBoardContext } from './pieces/board-context';\n\nconst context: TBoardContext = {\n\tautoScrollBoard: (\n\t\targs: Parameters[0],\n\t): ReturnType => {\n\t\treturn combine(\n\t\t\tautoScrollForElements(args),\n\t\t\tunsafeOverflowAutoScrollForElements({\n\t\t\t\t...args,\n\t\t\t\t// allow auto scrolling all around the board\n\t\t\t\tgetOverflow: () => ({\n\t\t\t\t\tforTopEdge: {\n\t\t\t\t\t\ttop: 6000,\n\t\t\t\t\t\tright: 6000,\n\t\t\t\t\t\tleft: 6000,\n\t\t\t\t\t},\n\t\t\t\t\tforRightEdge: {\n\t\t\t\t\t\ttop: 6000,\n\t\t\t\t\t\tright: 6000,\n\t\t\t\t\t\tbottom: 6000,\n\t\t\t\t\t},\n\t\t\t\t\tforBottomEdge: {\n\t\t\t\t\t\tright: 6000,\n\t\t\t\t\t\tbottom: 6000,\n\t\t\t\t\t\tleft: 6000,\n\t\t\t\t\t},\n\t\t\t\t\tforLeftEdge: {\n\t\t\t\t\t\ttop: 6000,\n\t\t\t\t\t\tleft: 6000,\n\t\t\t\t\t\tbottom: 6000,\n\t\t\t\t\t},\n\t\t\t\t}),\n\t\t\t}),\n\t\t);\n\t},\n\tautoScrollColumn: (\n\t\targs: Parameters[0],\n\t): ReturnType => {\n\t\treturn combine(\n\t\t\tautoScrollForElements(args),\n\t\t\tunsafeOverflowAutoScrollForElements({\n\t\t\t\t...args,\n\t\t\t\t// allow auto scrolling above and below the column\n\t\t\t\tgetOverflow: () => ({\n\t\t\t\t\tforTopEdge: {\n\t\t\t\t\t\ttop: 6000,\n\t\t\t\t\t\tright: 0,\n\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t},\n\t\t\t\t\tforBottomEdge: {\n\t\t\t\t\t\tright: 0,\n\t\t\t\t\t\tbottom: 6000,\n\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t},\n\t\t\t\t}),\n\t\t\t}),\n\t\t);\n\t},\n};\n\nexport default function UnsafeOverflow(): React.JSX.Element {\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t);\n}\n" }, { "path": "packages/auto-scroll/examples/window-scroll-with-scroll-container.tsx", "content": "/* eslint-disable @atlaskit/design-system/no-nested-styles */\n/**\n * @jsxRuntime classic\n * @jsx jsx\n */\nimport React, { Fragment, useEffect, useRef } from 'react';\n\n// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766\nimport { css, Global, jsx } from '@emotion/react';\nimport invariant from 'tiny-invariant';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss\nimport { Box, Stack, xcss } from '@atlaskit/primitives';\n\nimport { autoScrollForElements, autoScrollWindowForElements } from '../src/entry-point/element';\n\nconst globalStyles = css({\n\t// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766\n\t':root': {\n\t\t'--grid': '8px',\n\t},\n\t// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766\n\tbody: {\n\t\theight: '150vh',\n\t},\n});\n\ntype ItemType = {\n\tid: string;\n};\n\nconst itemStyles = xcss({\n\tpadding: 'space.050',\n\tborderWidth: 'border.width',\n\tborderStyle: 'solid',\n\tborderColor: 'color.border.brand',\n\tborderRadius: 'radius.small',\n\tbackgroundColor: 'color.background.accent.lime.subtlest',\n\twidth: '300px',\n});\n\nfunction Item({ item }: { item: ItemType }) {\n\tconst ref = useRef(null);\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tinvariant(element);\n\t\treturn combine(\n\t\t\tdraggable({\n\t\t\t\telement,\n\t\t\t\tgetInitialData: () => item,\n\t\t\t}),\n\t\t\tdropTargetForElements({ element, getIsSticky: () => true }),\n\t\t);\n\t}, [item]);\n\treturn (\n\t\t\n\t\t\t{item.id}\n\t\t\n\t);\n}\n\nconst items: ItemType[] = Array.from({ length: 200 }).map((_, i) => ({\n\tid: `id:${i}`,\n}));\n\nconst scrollContainerStyles = xcss({\n\theight: '100vh',\n\toverflowY: 'scroll',\n});\n\nconst rootStyles = xcss({\n\tbackgroundColor: 'color.background.accent.blue.subtle',\n\theight: '200vh',\n\twidth: '200vw',\n});\n\nexport default function WindowScroll(): React.JSX.Element {\n\tconst scrollContainerRef = useRef(null);\n\tuseEffect(() => {\n\t\tconst scrollContainer = scrollContainerRef.current;\n\t\tinvariant(scrollContainer);\n\t\treturn combine(\n\t\t\tautoScrollWindowForElements(),\n\t\t\tautoScrollForElements({\n\t\t\t\telement: scrollContainer,\n\t\t\t}),\n\t\t);\n\t});\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t))}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n" }, { "path": "packages/auto-scroll/examples/window-scroll.tsx", "content": "/* eslint-disable @atlaskit/design-system/no-nested-styles */\n/**\n * @jsxRuntime classic\n * @jsx jsx\n */\nimport React, { Fragment, useEffect, useRef } from 'react';\n\n// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766\nimport { css, Global, jsx } from '@emotion/react';\nimport invariant from 'tiny-invariant';\n\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport {\n\tdraggable,\n\tdropTargetForElements,\n} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss\nimport { Box, xcss } from '@atlaskit/primitives';\n\nimport { autoScrollWindowForElements } from '../src/entry-point/element';\n\nconst globalStyles = css({\n\t// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766\n\t':root': {\n\t\t'--grid': '8px',\n\t},\n\t// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766\n\tbody: {\n\t\theight: '150vh',\n\t},\n});\n\ntype ItemType = {\n\tid: string;\n};\n\nconst itemStyles = xcss({\n\tpadding: 'space.050',\n\tborderWidth: 'border.width',\n\tborderStyle: 'solid',\n\tborderColor: 'color.border.brand',\n\tborderRadius: 'radius.small',\n\tbackgroundColor: 'color.background.accent.lime.subtlest',\n\twidth: '300px',\n});\n\nfunction Item({ item }: { item: ItemType }) {\n\tconst ref = useRef(null);\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tinvariant(element);\n\t\treturn combine(\n\t\t\tdraggable({\n\t\t\t\telement,\n\t\t\t\tgetInitialData: () => item,\n\t\t\t}),\n\t\t\tdropTargetForElements({ element, getIsSticky: () => true }),\n\t\t);\n\t}, [item]);\n\treturn (\n\t\t\n\t\t\t{item.id}\n\t\t\n\t);\n}\n\nconst items: ItemType[] = Array.from({ length: 200 }).map((_, i) => ({\n\tid: `id:${i}`,\n}));\n\nconst listStyles = xcss({\n\tdisplay: 'flex',\n\tflexDirection: 'column',\n\tgap: 'space.050',\n\twidth: '200vw',\n});\n\nexport default function WindowScroll(): React.JSX.Element {\n\tuseEffect(() => {\n\t\treturn autoScrollWindowForElements();\n\t});\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\n\t\t\t\t))}\n\t\t\t\n\t\t\n\t);\n}\n" }, { "path": "packages/auto-scroll/package.json", "content": "{\n \"name\": \"@atlaskit/pragmatic-drag-and-drop-auto-scroll\",\n \"version\": \"2.1.5\",\n \"description\": \"An optional Pragmatic drag and drop package that enables automatic scrolling during a drag operation\",\n \"author\": \"Atlassian Pty Ltd\",\n \"license\": \"Apache-2.0\",\n \"publishConfig\": {\n \"registry\": \"https://registry.npmjs.org/\"\n },\n \"repository\": \"https://github.com/atlassian/pragmatic-drag-and-drop\",\n \"main\": \"dist/cjs/index.js\",\n \"module\": \"dist/esm/index.js\",\n \"module:es2019\": \"dist/es2019/index.js\",\n \"types\": \"dist/types/index.d.ts\",\n \"sideEffects\": false,\n \"exports\": {\n \".\": \"./src/index.ts\",\n \"./element\": \"./src/entry-point/element.ts\",\n \"./external\": \"./src/entry-point/external.ts\",\n \"./text-selection\": \"./src/entry-point/text-selection.ts\",\n \"./unsafe-overflow/element\": \"./src/entry-point/unsafe-overflow/element.ts\",\n \"./unsafe-overflow/external\": \"./src/entry-point/unsafe-overflow/external.ts\",\n \"./unsafe-overflow/text-selection\": \"./src/entry-point/unsafe-overflow/text-selection.ts\"\n },\n \"dependencies\": {\n \"@atlaskit/pragmatic-drag-and-drop\": \"^1.7.0\",\n \"@babel/runtime\": \"^7.0.0\"\n },\n \"devDependencies\": {\n \"@testing-library/dom\": \"^10.1.0\",\n \"bind-event-listener\": \"^3.0.0\",\n \"raf-stub\": \"^2.0.1\",\n \"tiny-invariant\": \"^1.2.0\"\n },\n \"homepage\": \"https://atlassian.design/components/pragmatic-drag-and-drop/\"\n}\n" }, { "path": "packages/auto-scroll/src/entry-point/element.ts", "content": "import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n\nimport { makeApi } from '../over-element/make-api';\n\nconst api = makeApi({ monitor: monitorForElements });\n\nexport const autoScrollForElements = api.autoScroll;\nexport const autoScrollWindowForElements = api.autoScrollWindow;\n" }, { "path": "packages/auto-scroll/src/entry-point/external.ts", "content": "import { monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';\n\nimport { makeApi } from '../over-element/make-api';\n\nconst api = makeApi({ monitor: monitorForExternal });\n\nexport const autoScrollForExternal = api.autoScroll;\nexport const autoScrollWindowForExternal = api.autoScrollWindow;\n" }, { "path": "packages/auto-scroll/src/entry-point/text-selection.ts", "content": "import { monitorForTextSelection } from '@atlaskit/pragmatic-drag-and-drop/text-selection/adapter';\n\nimport { makeApi } from '../over-element/make-api';\n\nconst api = makeApi({ monitor: monitorForTextSelection });\n\nexport const autoScrollForTextSelection = api.autoScroll;\nexport const autoScrollWindowForTextSelection = api.autoScrollWindow;\n" }, { "path": "packages/auto-scroll/src/entry-point/unsafe-overflow/element.ts", "content": "import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\n\nimport { makeApi } from '../../unsafe-overflow/make-api';\n\nconst api = makeApi({ monitor: monitorForElements });\n\nexport const unsafeOverflowAutoScrollForElements = api.unsafeOverflowAutoScroll;\n" }, { "path": "packages/auto-scroll/src/entry-point/unsafe-overflow/external.ts", "content": "import { monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';\n\nimport { makeApi } from '../../unsafe-overflow/make-api';\n\nconst api = makeApi({ monitor: monitorForExternal });\n\nexport const unsafeOverflowAutoScrollForExternal = api.unsafeOverflowAutoScroll;\n" }, { "path": "packages/auto-scroll/src/entry-point/unsafe-overflow/text-selection.ts", "content": "import { monitorForTextSelection } from '@atlaskit/pragmatic-drag-and-drop/text-selection/adapter';\n\nimport { makeApi } from '../../unsafe-overflow/make-api';\n\nconst api = makeApi({ monitor: monitorForTextSelection });\n\nexport const unsafeOverflowAutoScrollForTextSelection = api.unsafeOverflowAutoScroll;\n" }, { "path": "packages/auto-scroll/src/index.ts", "content": "export default {};\n" }, { "path": "packages/auto-scroll/src/internal-types.ts", "content": "import type { AllDragTypes, Input } from '@atlaskit/pragmatic-drag-and-drop/types';\n\nexport type ElementGetFeedbackArgs = {\n\t/**\n\t * The users _current_ input\n\t */\n\tinput: Input;\n\t/**\n\t * The data associated with the entity being dragged\n\t */\n\tsource: DragType['payload'];\n\t/**\n\t * The element trying to be scrolled\n\t */\n\telement: Element;\n};\n\nexport type WindowGetFeedbackArgs = Omit<\n\tElementGetFeedbackArgs,\n\t'element'\n>;\n\nexport type Spacing = {\n\ttop: number;\n\tright: number;\n\tbottom: number;\n\tleft: number;\n};\n\nexport type Edge = keyof Spacing;\n\nexport type EngagementHistoryEntry = {\n\ttimeOfEngagementStart: number;\n};\n\nexport type InternalConfig = {\n\tstartHitboxAtPercentageRemainingOfElement: Spacing;\n\tmaxScrollAtPercentageRemainingOfHitbox: Spacing;\n\tmaxPixelScrollPerSecond: number;\n\ttimeDampeningDurationMs: number;\n\tmaxMainAxisHitboxSize: number;\n};\n\nexport type PublicConfig = Partial<{\n\tmaxScrollSpeed: 'standard' | 'fast';\n}>;\n\nexport type ElementAutoScrollArgs = {\n\telement: Element;\n\tcanScroll?: (args: ElementGetFeedbackArgs) => boolean;\n\tgetAllowedAxis?: (args: ElementGetFeedbackArgs) => AllowedAxis;\n\tgetConfiguration?: (args: ElementGetFeedbackArgs) => PublicConfig;\n};\n\nexport type WindowAutoScrollArgs = {\n\tcanScroll?: (args: WindowGetFeedbackArgs) => boolean;\n\tgetAllowedAxis?: (args: WindowGetFeedbackArgs) => AllowedAxis;\n\tgetConfiguration?: (args: WindowGetFeedbackArgs) => PublicConfig;\n};\n\nexport type Side = 'start' | 'end';\nexport type Axis = 'vertical' | 'horizontal';\nexport type AllowedAxis = Axis | 'all';\n" }, { "path": "packages/auto-scroll/src/over-element/data-attributes.ts", "content": "import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';\n\nexport const dataAttribute = 'data-auto-scrollable';\nexport const selector = `[${dataAttribute}=\"true\"]`;\n\nexport function addScrollableAttribute(element: Element): CleanupFn {\n\telement.setAttribute(dataAttribute, 'true');\n\treturn () => element.removeAttribute(dataAttribute);\n}\n" }, { "path": "packages/auto-scroll/src/over-element/get-scroll-by.ts", "content": "import type { Input, Position } from '@atlaskit/pragmatic-drag-and-drop/types';\n\nimport type {\n\tAllowedAxis,\n\tAxis,\n\tEdge,\n\tEngagementHistoryEntry,\n\tInternalConfig,\n} from '../internal-types';\nimport { canScrollOnEdge } from '../shared/can-scroll-on-edge';\nimport { edgeAxisLookup, edges } from '../shared/edges';\nimport { getOverElementHitbox } from '../shared/get-over-element-hitbox';\nimport { getScrollChange } from '../shared/get-scroll-change';\nimport { isAxisAllowed } from '../shared/is-axis-allowed';\nimport { isWithin } from '../shared/is-within';\n\ntype ScrollableEdge = {\n\tedge: Edge;\n\thitbox: DOMRect;\n};\n\nfunction getRectDefault(element: Element) {\n\treturn element.getBoundingClientRect();\n}\n\nexport function getScrollBy({\n\telement,\n\tinput,\n\ttimeSinceLastFrame,\n\tengagement,\n\tconfig,\n\tallowedAxis,\n\tgetRect = getRectDefault,\n}: {\n\telement: Element;\n\tinput: Input;\n\tengagement: EngagementHistoryEntry;\n\ttimeSinceLastFrame: number;\n\tallowedAxis: AllowedAxis;\n\tconfig: InternalConfig;\n\tgetRect?: (element: Element) => DOMRect;\n}): Required> {\n\tconst client: Position = {\n\t\tx: input.clientX,\n\t\ty: input.clientY,\n\t};\n\tconst clientRect: DOMRect = getRect(element);\n\n\tconst scrollableEdges: Map = edges.reduce((map, edge) => {\n\t\tconst hitbox = getOverElementHitbox[edge]({ clientRect, config });\n\t\tconst axis = edgeAxisLookup[edge];\n\n\t\t// Note: changing the allowed axis during a drag will not\n\t\t// reset time dampening. It was decided it would be too\n\t\t// complex to implement initially, and we can add it\n\t\t// later if needed.\n\t\tif (!isAxisAllowed(axis, allowedAxis)) {\n\t\t\treturn map;\n\t\t}\n\n\t\tif (!isWithin({ client, clientRect: hitbox })) {\n\t\t\treturn map;\n\t\t}\n\t\tif (!canScrollOnEdge[edge](element)) {\n\t\t\treturn map;\n\t\t}\n\n\t\tmap.set(edge, { edge, hitbox });\n\t\treturn map;\n\t}, new Map());\n\n\tconst left: number = (() => {\n\t\tconst axis: Axis = 'horizontal';\n\t\tconst leftEdge = scrollableEdges.get('left');\n\t\tif (leftEdge) {\n\t\t\treturn getScrollChange({\n\t\t\t\tclient,\n\t\t\t\tedge: leftEdge.edge,\n\t\t\t\thitbox: leftEdge.hitbox,\n\t\t\t\taxis,\n\t\t\t\ttimeSinceLastFrame,\n\t\t\t\tengagement,\n\t\t\t\tisDistanceDampeningEnabled: true,\n\t\t\t\tconfig,\n\t\t\t});\n\t\t}\n\t\tconst rightEdge = scrollableEdges.get('right');\n\t\tif (rightEdge) {\n\t\t\treturn getScrollChange({\n\t\t\t\tclient,\n\t\t\t\tedge: rightEdge.edge,\n\t\t\t\thitbox: rightEdge.hitbox,\n\t\t\t\taxis,\n\t\t\t\ttimeSinceLastFrame,\n\t\t\t\tengagement,\n\t\t\t\tisDistanceDampeningEnabled: true,\n\t\t\t\tconfig,\n\t\t\t});\n\t\t}\n\n\t\treturn 0;\n\t})();\n\n\tconst top: number = (() => {\n\t\tconst axis: Axis = 'vertical';\n\t\tconst bottomEdge = scrollableEdges.get('bottom');\n\t\tif (bottomEdge) {\n\t\t\treturn getScrollChange({\n\t\t\t\tclient,\n\t\t\t\tedge: bottomEdge.edge,\n\t\t\t\thitbox: bottomEdge.hitbox,\n\t\t\t\taxis,\n\t\t\t\ttimeSinceLastFrame,\n\t\t\t\tengagement,\n\t\t\t\tisDistanceDampeningEnabled: true,\n\t\t\t\tconfig,\n\t\t\t});\n\t\t}\n\t\tconst topEdge = scrollableEdges.get('top');\n\t\tif (topEdge) {\n\t\t\treturn getScrollChange({\n\t\t\t\tclient,\n\t\t\t\tedge: topEdge.edge,\n\t\t\t\thitbox: topEdge.hitbox,\n\t\t\t\taxis,\n\t\t\t\ttimeSinceLastFrame,\n\t\t\t\tengagement,\n\t\t\t\tisDistanceDampeningEnabled: true,\n\t\t\t\tconfig,\n\t\t\t});\n\t\t}\n\n\t\treturn 0;\n\t})();\n\n\treturn {\n\t\tleft,\n\t\ttop,\n\t};\n}\n" }, { "path": "packages/auto-scroll/src/over-element/make-api.ts", "content": "import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\nimport { once } from '@atlaskit/pragmatic-drag-and-drop/once';\nimport type {\n\tAllDragTypes,\n\tBaseEventPayload,\n\tCleanupFn,\n\tMonitorArgs,\n} from '@atlaskit/pragmatic-drag-and-drop/types';\n\nimport type { ElementAutoScrollArgs, WindowAutoScrollArgs } from '../internal-types';\nimport { getScheduler } from '../shared/scheduler';\n\nimport { addScrollableAttribute } from './data-attributes';\nimport { tryScroll } from './try-scroll';\n\nexport function makeApi({\n\tmonitor,\n}: {\n\tmonitor: (args: MonitorArgs) => CleanupFn;\n}) {\n\tconst elementRegistry: Map> = new Map();\n\tconst windowRegistry: Set> = new Set();\n\n\tfunction autoScroll(args: ElementAutoScrollArgs): CleanupFn {\n\t\t// Warn during development if trying to add auto scroll to an element\n\t\t// that is not scrollable.\n\t\t// Note: this can produce a false positive when a scroll container is not\n\t\t// scrollable initially, but becomes scrollable during a drag.\n\t\t// I thought of adding the warning as I think it would be a more common pitfall\n\t\t// to accidentally register auto scrolling on the wrong element\n\t\t// If requested, we could provide a mechanism to opt out of this warning\n\t\tif (process.env.NODE_ENV !== 'production') {\n\t\t\tconst { overflowX, overflowY }: CSSStyleDeclaration = window.getComputedStyle(args.element);\n\t\t\tconst isScrollable =\n\t\t\t\toverflowX === 'auto' ||\n\t\t\t\toverflowX === 'scroll' ||\n\t\t\t\toverflowY === 'auto' ||\n\t\t\t\toverflowY === 'scroll';\n\t\t\tif (!isScrollable) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'Auto scrolling has been attached to an element that appears not to be scrollable',\n\t\t\t\t\t{ element: args.element, overflowX, overflowY },\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\t// Warn if there is an existing registration\n\t\tif (process.env.NODE_ENV !== 'production') {\n\t\t\tconst existing = elementRegistry.get(args.element);\n\t\t\tif (existing) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.warn('You have already registered autoScrolling on the same element', {\n\t\t\t\t\texisting,\n\t\t\t\t\tproposed: args,\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\n\t\telementRegistry.set(args.element, args);\n\n\t\tconst cleanup = combine(addScrollableAttribute(args.element), () =>\n\t\t\telementRegistry.delete(args.element),\n\t\t);\n\n\t\treturn once(cleanup);\n\t}\n\n\tfunction autoScrollWindow(args: WindowAutoScrollArgs = {}): CleanupFn {\n\t\t// Putting `args` in a unique object so that\n\t\t// each call will create a unique entry, even if a consumer\n\t\t// shares the `args` object between calls.\n\t\t// Just being safe here.\n\t\tconst unique = { ...args };\n\t\twindowRegistry.add(unique);\n\n\t\tfunction cleanup() {\n\t\t\twindowRegistry.delete(unique);\n\t\t}\n\n\t\treturn once(cleanup);\n\t}\n\n\tfunction findEntry(element: Element): ElementAutoScrollArgs | null {\n\t\treturn elementRegistry.get(element) ?? null;\n\t}\n\n\tfunction getWindowScrollEntries(): WindowAutoScrollArgs[] {\n\t\treturn Array.from(windowRegistry);\n\t}\n\n\tfunction onFrame({\n\t\tlatestArgs,\n\t\tunderUsersPointer,\n\t\ttimeSinceLastFrame,\n\t}: {\n\t\tlatestArgs: BaseEventPayload;\n\t\tunderUsersPointer: Element | null;\n\t\ttimeSinceLastFrame: number;\n\t}) {\n\t\ttryScroll({\n\t\t\tinput: latestArgs.location.current.input,\n\t\t\tsource: latestArgs.source,\n\t\t\tfindEntry,\n\t\t\tunderUsersPointer,\n\t\t\ttimeSinceLastFrame,\n\t\t\tgetWindowScrollEntries,\n\t\t});\n\t}\n\n\tgetScheduler(monitor).onFrame(onFrame);\n\n\treturn {\n\t\tautoScroll,\n\t\tautoScrollWindow,\n\t};\n}\n" }, { "path": "packages/auto-scroll/src/over-element/try-scroll.ts", "content": "import type { AllDragTypes, Input } from '@atlaskit/pragmatic-drag-and-drop/types';\n\nimport {\n\ttype AllowedAxis,\n\ttype ElementAutoScrollArgs,\n\ttype ElementGetFeedbackArgs,\n\ttype EngagementHistoryEntry,\n\ttype InternalConfig,\n\ttype WindowAutoScrollArgs,\n} from '../internal-types';\nimport { getInternalConfig } from '../shared/configuration';\nimport { markAndGetEngagement } from '../shared/engagement-history';\n\nimport { selector } from './data-attributes';\nimport { getScrollBy } from './get-scroll-by';\n\ntype AvailableScrollDirection = { top: boolean; left: boolean };\n\nfunction isScrollingAvailable(value: AvailableScrollDirection): boolean {\n\treturn Boolean(value.top || value.left);\n}\n\nfunction tryScrollElements({\n\ttarget,\n\tinput,\n\tsource,\n\tfindEntry,\n\ttimeSinceLastFrame,\n\tavailable = { top: true, left: true },\n}: {\n\ttarget: Element | null;\n\tinput: Input;\n\tsource: DragType['payload'];\n\ttimeSinceLastFrame: number;\n\tfindEntry: (element: Element) => ElementAutoScrollArgs | null;\n\tavailable?: AvailableScrollDirection;\n}): AvailableScrollDirection {\n\t// we cannot do any more scrolling\n\tif (!isScrollingAvailable(available)) {\n\t\treturn available;\n\t}\n\n\t// run out of parents to search\n\tif (!target) {\n\t\treturn available;\n\t}\n\n\tconst element = target.closest(selector);\n\n\t// cannot find any more scroll containers\n\tif (!element) {\n\t\treturn available;\n\t}\n\n\tconst container = findEntry(element);\n\n\t// cannot find registration, this is bad.\n\t// fail and just exit\n\tif (!container) {\n\t\treturn available;\n\t}\n\n\tfunction continueSearchUp() {\n\t\treturn tryScrollElements({\n\t\t\ttarget: element?.parentElement ?? null,\n\t\t\tfindEntry,\n\t\t\tsource,\n\t\t\ttimeSinceLastFrame,\n\t\t\tinput,\n\t\t\tavailable,\n\t\t});\n\t}\n\n\tconst feedback: ElementGetFeedbackArgs = {\n\t\tinput,\n\t\tsource,\n\t\telement,\n\t};\n\n\t// Engagement is not marked if scrolling is explicitly not allowed\n\tif (container.canScroll && !container.canScroll(feedback)) {\n\t\treturn continueSearchUp();\n\t}\n\n\t// Marking engagement even if no edges are scrollable.\n\t// We are marking engagement as soon as the element is scrolled over\n\tconst engagement = markAndGetEngagement(element);\n\n\tconst config: InternalConfig = getInternalConfig(container.getConfiguration?.(feedback));\n\n\tconst allowedAxis: AllowedAxis = container.getAllowedAxis?.(feedback) ?? 'all';\n\n\tconst scrollBy = getScrollBy({\n\t\telement,\n\t\tengagement,\n\t\tinput,\n\t\ttimeSinceLastFrame,\n\t\tallowedAxis,\n\t\tconfig,\n\t});\n\n\t// Only allow scrolling in directions that have not already been used\n\tconst scroll = { top: 0, left: 0 };\n\n\tif (available.top && scrollBy.top !== 0) {\n\t\tscroll.top = scrollBy.top;\n\t\t// can no longer scroll on the top after this\n\t\tavailable.top = false;\n\t}\n\n\tif (available.left && scrollBy.left !== 0) {\n\t\tscroll.left = scrollBy.left;\n\t\t// can no longer scroll on the left after this\n\t\tavailable.left = false;\n\t}\n\n\t// Only scroll if there is something to scroll\n\tif (scroll.top !== 0 || scroll.left !== 0) {\n\t\telement.scrollBy(scroll);\n\t}\n\n\treturn continueSearchUp();\n}\n\nfunction tryScrollWindow({\n\tinput,\n\ttimeSinceLastFrame,\n\tavailable,\n\tsource,\n\tentries,\n}: {\n\tinput: Input;\n\ttimeSinceLastFrame: number;\n\tavailable: AvailableScrollDirection;\n\tsource: DragType['payload'];\n\tentries: WindowAutoScrollArgs[];\n}): void {\n\tconst element = document.documentElement;\n\n\tconst feedback: ElementGetFeedbackArgs = {\n\t\tinput,\n\t\tsource,\n\t\telement,\n\t};\n\n\tfor (const entry of entries) {\n\t\t// this entry is not allowing scrolling, we need to look for another\n\t\tif (entry.canScroll && !entry.canScroll(feedback)) {\n\t\t\tcontinue;\n\t\t}\n\n\t\t// Note: if we had an event for when the user is leaving a tab\n\t\t// we _could_ conceptually reset the engagement\n\t\tconst engagement: EngagementHistoryEntry = markAndGetEngagement(element);\n\n\t\tconst config: InternalConfig = getInternalConfig(entry.getConfiguration?.(feedback));\n\n\t\tconst allowedAxis: AllowedAxis = entry.getAllowedAxis?.(feedback) ?? 'all';\n\n\t\tconst scrollBy = getScrollBy({\n\t\t\telement,\n\t\t\tengagement,\n\t\t\tinput,\n\t\t\tconfig,\n\t\t\tallowedAxis,\n\t\t\tgetRect: (element: Element) =>\n\t\t\t\tDOMRect.fromRect({\n\t\t\t\t\ty: 0,\n\t\t\t\t\tx: 0,\n\t\t\t\t\twidth: element.clientWidth,\n\t\t\t\t\theight: element.clientHeight,\n\t\t\t\t}),\n\t\t\ttimeSinceLastFrame,\n\t\t});\n\n\t\tconst scroll = {\n\t\t\ttop: available.top ? scrollBy.top : 0,\n\t\t\tleft: available.left ? scrollBy.left : 0,\n\t\t};\n\n\t\t// only trigger a scroll if we are actually scrolling\n\t\tif (scroll.top !== 0 || scroll.left !== 0) {\n\t\t\telement.scrollBy(scroll);\n\t\t}\n\n\t\t// We only want the window to scroll once\n\t\tbreak;\n\t}\n}\n\nexport function tryScroll({\n\tinput,\n\tfindEntry,\n\ttimeSinceLastFrame,\n\tsource,\n\tgetWindowScrollEntries,\n\tunderUsersPointer,\n}: {\n\tinput: Input;\n\ttimeSinceLastFrame: number;\n\tsource: DragType['payload'];\n\tfindEntry: (element: Element) => ElementAutoScrollArgs | null;\n\tgetWindowScrollEntries: () => WindowAutoScrollArgs[];\n\tunderUsersPointer: Element | null;\n}): void {\n\t// We are matching browser behaviour and scrolling inner elements\n\t// before outer ones. So we try to scroll scroller containers before\n\t// the window.\n\tconst remainder: AvailableScrollDirection = tryScrollElements({\n\t\ttarget: underUsersPointer,\n\t\ttimeSinceLastFrame,\n\t\tinput,\n\t\tsource,\n\t\tfindEntry,\n\t});\n\n\t// Check if we can do any window scrolling\n\tif (!isScrollingAvailable(remainder)) {\n\t\treturn;\n\t}\n\n\ttryScrollWindow({\n\t\tinput,\n\t\tsource,\n\t\tentries: getWindowScrollEntries(),\n\t\ttimeSinceLastFrame,\n\t\tavailable: remainder,\n\t});\n}\n" }, { "path": "packages/auto-scroll/src/shared/axis.ts", "content": "const vertical = {\n\tstart: 'top',\n\tend: 'bottom',\n\tpoint: 'y',\n\tsize: 'height',\n} as const;\n\nconst horizontal = {\n\tstart: 'left',\n\tend: 'right',\n\tpoint: 'x',\n\tsize: 'width',\n} as const;\n\nexport const axisLookup = {\n\tvertical: {\n\t\tmainAxis: vertical,\n\t\tcrossAxis: horizontal,\n\t},\n\thorizontal: {\n\t\tmainAxis: horizontal,\n\t\tcrossAxis: vertical,\n\t},\n} as const;\n" }, { "path": "packages/auto-scroll/src/shared/can-scroll-on-edge.ts", "content": "import { type Edge } from '../internal-types';\n\nexport const canScrollOnEdge: {\n\t[key in Edge]: (element: Element) => boolean;\n} = {\n\t// Notes:\n\t//\n\t// 🌏 Chrome 115.0: uses fractional units for `scrollLeft` and `scrollTop`\n\t// (and fractional units don't reach true integer maximum when zoomed in / out)\n\t// 🍎 Safari 16.5.2: no fractional units\n\t// 🦊 Firefox 115.0: no fractional units\n\n\t// we have some scroll we can move backwards into\n\ttop: (element) => element.scrollTop > 0,\n\t// We have some scroll we can move forward into\n\tright: (element) => Math.ceil(element.scrollLeft) + element.clientWidth < element.scrollWidth,\n\t// We have some scroll we can move forwards into\n\tbottom: (element) => Math.ceil(element.scrollTop) + element.clientHeight < element.scrollHeight,\n\t// we have some scroll we can move back into.\n\tleft: (element) => element.scrollLeft > 0,\n};\n" }, { "path": "packages/auto-scroll/src/shared/configuration.ts", "content": "import type { InternalConfig, PublicConfig } from '../internal-types';\n\nconst baseConfig = {\n\tstartHitboxAtPercentageRemainingOfElement: {\n\t\ttop: 0.25,\n\t\tright: 0.25,\n\t\tbottom: 0.25,\n\t\tleft: 0.25,\n\t},\n\tmaxScrollAtPercentageRemainingOfHitbox: {\n\t\ttop: 0.5,\n\t\tright: 0.5,\n\t\tbottom: 0.5,\n\t\tleft: 0.5,\n\t},\n\ttimeDampeningDurationMs: 400,\n\t// Too big and it's too easy to trigger auto scrolling\n\t// Too small and it's too hard 😅\n\tmaxMainAxisHitboxSize: 180,\n};\n\n/** What the max scroll should be per second. Using \"per second\" rather than \"per frame\"\n * as we want a consistent scroll speed regardless of frame rate.\n *\n *\n * I explored trying to make the max scroll speed dynamic based on particular factors.\n * However, it ended up being difficult to find a _perfect_ formula.\n *\n * Likely the perfect answer would involve:\n * - the size of the scrollable element\n * - the size of the scrollable element relative to the screen size\n * - the size of the drag preview\n * - the size of elements being scrolled in scrollable elements (expensive and difficult to compute)\n */\nconst maxPixelScrollPerSecond: {\n\t[Key in Required['maxScrollSpeed']]: number;\n} = {\n\t// What the value would be if we were scrolling at 15px per frame at 60fps.\n\t// This is the default as it works well for most experiences.\n\t// In certain scenarios though it can feel a bit slow.\n\tstandard: 15 * 60,\n\t// What the value would be if we were scrolling at 25px per frame at 60fps.\n\t// This is not the default as it feels too fast for a lot of experiences.\n\tfast: 25 * 60,\n};\n\nexport function getInternalConfig(provided?: PublicConfig | undefined): InternalConfig {\n\treturn {\n\t\t...baseConfig,\n\t\t// only allowing limited control over the config at this stage\n\t\tmaxPixelScrollPerSecond: maxPixelScrollPerSecond[provided?.maxScrollSpeed ?? 'standard'],\n\t};\n}\n" }, { "path": "packages/auto-scroll/src/shared/edges.ts", "content": "import { type Axis, type Edge } from '../internal-types';\n\nexport const edges: Edge[] = ['top', 'right', 'bottom', 'left'];\n\nexport const edgeAxisLookup: Record = {\n\ttop: 'vertical',\n\tright: 'horizontal',\n\tbottom: 'vertical',\n\tleft: 'horizontal',\n};\n" }, { "path": "packages/auto-scroll/src/shared/engagement-history.ts", "content": "import { type EngagementHistoryEntry } from '../internal-types';\n\nconst ledger: Map = new Map();\nconst requested: Set = new Set();\n\nexport function markAndGetEngagement(element: Element): EngagementHistoryEntry {\n\tmarkEngagement(element);\n\n\tconst entry = ledger.get(element);\n\tif (entry) {\n\t\treturn entry;\n\t}\n\tconst fresh: EngagementHistoryEntry = {\n\t\ttimeOfEngagementStart: Date.now(),\n\t};\n\tledger.set(element, fresh);\n\treturn fresh;\n}\n\nexport function markEngagement(element: Element): void {\n\trequested.add(element);\n}\n\nexport function clearUnusedEngagements(fn: () => void): void {\n\t// make sure previous engagement requests don't linger\n\trequested.clear();\n\n\t// perform the required work\n\tfn();\n\n\t// if engagements where not requested, purge it\n\tledger.forEach((_, element) => {\n\t\tif (!requested.has(element)) {\n\t\t\tledger.delete(element);\n\t\t}\n\t});\n\n\t// cleaning up after ourselves\n\trequested.clear();\n}\n\nexport function clearEngagementHistory(): void {\n\tledger.clear();\n}\n" }, { "path": "packages/auto-scroll/src/shared/get-over-element-hitbox.ts", "content": "import type { Axis, Edge, InternalConfig, Side } from '../internal-types';\n\nimport { axisLookup } from './axis';\nimport { mainAxisSideLookup } from './side';\n\nfunction makeGetHitbox({ edge, axis }: { edge: Edge; axis: Axis }) {\n\treturn function hitbox({ clientRect, config }: { clientRect: DOMRect; config: InternalConfig }) {\n\t\tconst { mainAxis, crossAxis } = axisLookup[axis];\n\t\tconst side: Side = mainAxisSideLookup[edge];\n\n\t\tconst mainAxisHitboxSize: number = Math.min(\n\t\t\t// scale the size of the hitbox down for smaller elements\n\t\t\tconfig.startHitboxAtPercentageRemainingOfElement[edge] * clientRect[mainAxis.size],\n\t\t\t// Don't let the hitbox grow too big for big elements\n\t\t\tconfig.maxMainAxisHitboxSize,\n\t\t);\n\n\t\treturn DOMRect.fromRect({\n\t\t\t[mainAxis.point]:\n\t\t\t\tside === 'start'\n\t\t\t\t\t? // begin from the start edge and grow inwards\n\t\t\t\t\t\tclientRect[mainAxis.point]\n\t\t\t\t\t: // begin from inside the end edge and grow towards the end edge\n\t\t\t\t\t\tclientRect[mainAxis.point] + clientRect[mainAxis.size] - mainAxisHitboxSize,\n\t\t\t[crossAxis.point]: clientRect[crossAxis.point],\n\t\t\t[mainAxis.size]: mainAxisHitboxSize,\n\t\t\t[crossAxis.size]: clientRect[crossAxis.size],\n\t\t});\n\t};\n}\n\nexport const getOverElementHitbox: {\n\t[Key in Edge]: (args: { clientRect: DOMRect; config: InternalConfig }) => DOMRect;\n} = {\n\ttop: makeGetHitbox({\n\t\taxis: 'vertical',\n\t\tedge: 'top',\n\t}),\n\tright: makeGetHitbox({\n\t\taxis: 'horizontal',\n\t\tedge: 'right',\n\t}),\n\tbottom: makeGetHitbox({\n\t\taxis: 'vertical',\n\t\tedge: 'bottom',\n\t}),\n\tleft: makeGetHitbox({\n\t\taxis: 'horizontal',\n\t\tedge: 'left',\n\t}),\n};\n" }, { "path": "packages/auto-scroll/src/shared/get-percentage-in-range.ts", "content": "export function getPercentageInRange({\n\tstartOfRange,\n\tendOfRange,\n\tvalue,\n}: {\n\tstartOfRange: number;\n\tendOfRange: number;\n\tvalue: number;\n}): number {\n\t// checking inputs\n\tconst isValid: boolean = startOfRange < endOfRange;\n\n\tif (!isValid) {\n\t\treturn 0;\n\t}\n\n\tif (value < startOfRange) {\n\t\treturn 0;\n\t}\n\tif (value > endOfRange) {\n\t\treturn 1;\n\t}\n\n\tconst range: number = endOfRange - startOfRange;\n\treturn (value - startOfRange) / range;\n}\n" }, { "path": "packages/auto-scroll/src/shared/get-scroll-change.ts", "content": "import { type Position } from '@atlaskit/pragmatic-drag-and-drop/types';\n\nimport type { Axis, Edge, EngagementHistoryEntry, InternalConfig } from '../internal-types';\n\nimport { axisLookup } from './axis';\nimport { getPercentageInRange } from './get-percentage-in-range';\nimport { mainAxisSideLookup } from './side';\n\n// We want a consistent scroll speed across devices, regardless of framerate\nfunction getMaxScrollChange({\n\ttimeSinceLastFrame,\n\tconfig,\n}: {\n\ttimeSinceLastFrame: number;\n\tconfig: InternalConfig;\n}): number {\n\tconst targetScrollPerMs = config.maxPixelScrollPerSecond / 1000;\n\n\t// Adjusting out target scroll rate to match the frame rate of the target device\n\t// This will pull the scroll speed down on high frame rate devices\n\t// so we get a consistent visual scroll speed regardless of device.\n\tconst proposed = Math.ceil(targetScrollPerMs * timeSinceLastFrame);\n\n\t// If lots of time as passed since that last frame (such on lower frame rate devices)\n\t// we don't want the scroll speed to be too fast, otherwise it can feel jumpy\n\t// We are capping the scroll speed at what it would be if we were hitting 60fps\n\tconst maximum = config.maxPixelScrollPerSecond / 60;\n\n\treturn Math.min(proposed, maximum);\n}\n\nfunction getDistanceDampening({\n\tclient,\n\taxis,\n\tedge,\n\thitbox,\n\tconfig,\n}: {\n\tclient: Position;\n\taxis: Axis;\n\tedge: Edge;\n\thitbox: DOMRect;\n\tconfig: InternalConfig;\n}): number {\n\tconst { mainAxis } = axisLookup[axis];\n\tconst side = mainAxisSideLookup[edge];\n\n\t// We want to hit the max speed before the edge of the hitbox\n\tconst maxSpeedBuffer =\n\t\thitbox[mainAxis.size] * config.maxScrollAtPercentageRemainingOfHitbox[edge];\n\n\tif (side === 'end') {\n\t\treturn getPercentageInRange({\n\t\t\tstartOfRange: hitbox[mainAxis.start],\n\t\t\tendOfRange: hitbox[mainAxis.end] - maxSpeedBuffer,\n\t\t\tvalue: client[mainAxis.point],\n\t\t});\n\t}\n\n\t// Moving towards start edge\n\n\tconst raw = getPercentageInRange({\n\t\tstartOfRange: hitbox[mainAxis.start] + maxSpeedBuffer,\n\t\tendOfRange: hitbox[mainAxis.end],\n\t\tvalue: client[mainAxis.point],\n\t});\n\t// When moving near start edge\n\t// - the 'end' edge is where we start scrolling\n\t// - the 'start' edge is where we reach max speed\n\t// So we need to invert the percentage when moving backwards\n\treturn 1 - raw;\n}\n\nexport function getScrollChange({\n\tclient,\n\ttimeSinceLastFrame,\n\tengagement,\n\taxis,\n\thitbox,\n\tedge,\n\tisDistanceDampeningEnabled,\n\tconfig,\n}: {\n\ttimeSinceLastFrame: number;\n\taxis: Axis;\n\tengagement: EngagementHistoryEntry;\n\tclient: Position;\n\thitbox: DOMRect;\n\tedge: Edge;\n\tisDistanceDampeningEnabled: boolean;\n\tconfig: InternalConfig;\n}): number {\n\t// We have two forms of speed dampening:\n\t// 1. 🗺️ Distance\n\t// The closer you are to a hitbox edge, the faster the scroll speed will be\n\t// 2. ⏱️ Time\n\t// When first entering a scroll container we want to dampening all scrolling\n\t// This is to prevent super fast auto scrolling when first entering into\n\t// a scroll container, or when lifting in a scroll container\n\n\tconst maxScroll = getMaxScrollChange({\n\t\ttimeSinceLastFrame,\n\t\tconfig,\n\t});\n\n\tconst percentageDistanceDampening: number = isDistanceDampeningEnabled\n\t\t? getDistanceDampening({\n\t\t\t\tclient,\n\t\t\t\tedge,\n\t\t\t\thitbox,\n\t\t\t\taxis,\n\t\t\t\tconfig,\n\t\t\t})\n\t\t: 1;\n\n\t// Dampen speed by time\n\tconst percentageThroughTimeDampening = getPercentageInRange({\n\t\tstartOfRange: engagement.timeOfEngagementStart,\n\t\tendOfRange: engagement.timeOfEngagementStart + config.timeDampeningDurationMs,\n\t\tvalue: Date.now(),\n\t});\n\n\t// Calculate how much of the max scroll we should apply based on dampening\n\tconst percentageOfMaxScroll = percentageDistanceDampening * percentageThroughTimeDampening;\n\n\t// We _could_ ease this update (`Math.pow(percentageOfMaxSpeed, 2)`)\n\t// But linear is feeling really good\n\t// Always scrolling by at least one pixel, otherwise the scroll does nothing\n\tconst scroll = Math.max(maxScroll * percentageOfMaxScroll, 1);\n\n\tconst side = mainAxisSideLookup[edge];\n\n\t// When moving backwards, we will be scrolling backwards\n\treturn side === 'end' ? scroll : -1 * scroll;\n}\n" }, { "path": "packages/auto-scroll/src/shared/is-axis-allowed.ts", "content": "import { type AllowedAxis, type Axis } from '../internal-types';\n\nexport function isAxisAllowed(axis: Axis, allowedAxis: AllowedAxis): boolean {\n\treturn allowedAxis === 'all' || axis === allowedAxis;\n}\n" }, { "path": "packages/auto-scroll/src/shared/is-within.ts", "content": "import type { Position } from '@atlaskit/pragmatic-drag-and-drop/types';\n\nexport function isWithin({\n\tclient,\n\tclientRect,\n}: {\n\tclient: Position;\n\tclientRect: DOMRect;\n}): boolean {\n\treturn (\n\t\t// is within horizontal bounds\n\t\tclient.x >= clientRect.x &&\n\t\tclient.x <= clientRect.x + clientRect.width &&\n\t\t// is within vertical bounds\n\t\tclient.y >= clientRect.y &&\n\t\tclient.y <= clientRect.y + clientRect.height\n\t);\n}\n" }, { "path": "packages/auto-scroll/src/shared/scheduler.ts", "content": "import { getElementFromPointWithoutHoneypot } from '@atlaskit/pragmatic-drag-and-drop/private/get-element-from-point-without-honey-pot';\nimport {\n\ttype AllDragTypes,\n\ttype BaseEventPayload,\n\ttype CleanupFn,\n\ttype MonitorArgs,\n} from '@atlaskit/pragmatic-drag-and-drop/types';\n\nimport { clearEngagementHistory, clearUnusedEngagements } from './engagement-history';\n\ntype State =\n\t| {\n\t\t\ttype: 'idle';\n\t }\n\t| {\n\t\t\t// When the auto scroller first starts, we need to wait\n\t\t\t// for a single frame before we can start scrolling.\n\t\t\t// This is so that we can always have an accurate `timeSinceLastFrame`.\n\t\t\t// `timeSinceLastFrame` is used to dynamically change the max\n\t\t\t// scroll speed based on the frame rate.\n\t\t\ttype: 'initializing';\n\t\t\tframeId: number;\n\t\t\tlatestArgs: BaseEventPayload;\n\t }\n\t| {\n\t\t\ttype: 'running';\n\t\t\tframeId: number;\n\t\t\ttimeLastFrameFinished: DOMHighResTimeStamp;\n\t\t\tlatestArgs: BaseEventPayload;\n\t };\n\ntype OnFrameFn = (args: {\n\t// This is a shared starting point between the\n\t// \"overflow\" and \"over element auto scroller's.\n\t// This is important to ensure that there is a clean handover between the auto scroller's\n\tunderUsersPointer: Element | null;\n\tlatestArgs: BaseEventPayload;\n\ttimeSinceLastFrame: number;\n}) => void;\n\ntype Scheduler = {\n\tonFrame: (fn: OnFrameFn) => void;\n};\n\n// We keep this map so that \"over element\" scrolling and \"overflow\" scrolling\n// can leverage the same scheduler.\n// The 'monitor' is the key for looking up schedulers\nconst schedulers: Map<\n\t(args: MonitorArgs) => CleanupFn,\n\tScheduler\n> = new Map();\n\nexport function getScheduler(\n\tmonitor: (args: MonitorArgs) => CleanupFn,\n): Scheduler {\n\tconst scheduler = schedulers.get(monitor);\n\tif (scheduler) {\n\t\t// @ts-expect-error: I don't know how to link the DragType generic between the key and the value when the\n\t\t// monitor itself is the key\n\t\treturn scheduler;\n\t}\n\tconst created = makeScheduler(monitor);\n\tschedulers.set(monitor, created);\n\treturn created;\n}\n\nfunction makeScheduler(\n\tmonitor: (args: MonitorArgs) => CleanupFn,\n): Scheduler {\n\tlet state: State = { type: 'idle' };\n\tconst callbacks: OnFrameFn[] = [];\n\n\tfunction loop(timeLastFrameFinished: DOMHighResTimeStamp) {\n\t\tif (state.type !== 'running') {\n\t\t\treturn;\n\t\t}\n\t\tconst timeSinceLastFrame = timeLastFrameFinished - state.timeLastFrameFinished;\n\n\t\tconst { latestArgs } = state;\n\n\t\t// A common starting lookup point for determining\n\t\t// which auto scroller should be used, and what should be scrolled.\n\t\tconst underUsersPointer = getElementFromPointWithoutHoneypot({\n\t\t\tx: latestArgs.location.current.input.clientX,\n\t\t\ty: latestArgs.location.current.input.clientY,\n\t\t});\n\n\t\tclearUnusedEngagements(() => {\n\t\t\tcallbacks.forEach((onFrame) =>\n\t\t\t\tonFrame({ underUsersPointer, latestArgs, timeSinceLastFrame }),\n\t\t\t);\n\t\t});\n\n\t\tstate.timeLastFrameFinished = timeLastFrameFinished;\n\t\tstate.frameId = requestAnimationFrame(loop);\n\t}\n\n\tfunction reset() {\n\t\tif (state.type === 'idle') {\n\t\t\treturn;\n\t\t}\n\t\tcancelAnimationFrame(state.frameId);\n\t\tclearEngagementHistory();\n\t\tstate = { type: 'idle' };\n\t}\n\n\tfunction start(args: BaseEventPayload) {\n\t\tif (state.type !== 'idle') {\n\t\t\treturn;\n\t\t}\n\n\t\tstate = {\n\t\t\t// Waiting a frame so we can accurately determine `timeSinceLastFrame`.\n\t\t\ttype: 'initializing',\n\t\t\tlatestArgs: args,\n\t\t\tframeId: requestAnimationFrame((timeLastFrameFinished) => {\n\t\t\t\tif (state.type !== 'initializing') {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tstate = {\n\t\t\t\t\ttype: 'running',\n\t\t\t\t\ttimeLastFrameFinished,\n\t\t\t\t\tlatestArgs: state.latestArgs,\n\t\t\t\t\tframeId: requestAnimationFrame(loop),\n\t\t\t\t};\n\t\t\t}),\n\t\t};\n\t}\n\n\t// this module might have been imported after a drag has started\n\t// We are starting the auto scroller if we get an update event and\n\t// the auto scroller has not started yet\n\tfunction update(args: BaseEventPayload) {\n\t\tif (state.type === 'idle') {\n\t\t\tstart(args);\n\t\t\treturn;\n\t\t}\n\t\tstate.latestArgs = args;\n\t}\n\n\t// Not exposing a way to stop listening\n\tmonitor({\n\t\tonDragStart: start,\n\t\tonDropTargetChange: update,\n\t\tonDrag: update,\n\t\tonDrop: reset,\n\t});\n\n\tconst api: Scheduler = {\n\t\tonFrame(fn: OnFrameFn) {\n\t\t\tcallbacks.push(fn);\n\t\t},\n\t};\n\treturn api;\n}\n" }, { "path": "packages/auto-scroll/src/shared/side.ts", "content": "import type { Edge, Side } from '../internal-types';\n\nexport const mainAxisSideLookup: { [Key in Edge]: Side } = {\n\ttop: 'start',\n\tright: 'end',\n\tbottom: 'end',\n\tleft: 'start',\n};\n" }, { "path": "packages/auto-scroll/src/unsafe-overflow/get-scroll-by.ts", "content": "import type { AllDragTypes, Input, Position } from '@atlaskit/pragmatic-drag-and-drop/types';\n\nimport type { AllowedAxis, Axis, Edge, InternalConfig, Spacing } from '../internal-types';\nimport { canScrollOnEdge } from '../shared/can-scroll-on-edge';\nimport { edgeAxisLookup, edges } from '../shared/edges';\nimport { markAndGetEngagement } from '../shared/engagement-history';\nimport { getScrollChange } from '../shared/get-scroll-change';\nimport { isAxisAllowed } from '../shared/is-axis-allowed';\nimport { isWithin } from '../shared/is-within';\n\nimport { getHitbox } from './hitbox';\nimport {\n\ttype HitboxSpacing,\n\ttype ProvidedHitboxSpacing,\n\ttype UnsafeOverflowAutoScrollArgs,\n} from './types';\n\nexport type HitboxForEdge = {\n\tedge: Edge;\n\ttype: 'inside-of-edge' | 'outside-of-edge';\n\thitbox: DOMRect;\n};\n\n// Distance dampening is enabled when we are inside the edge\n// In order to match \"over element\" scrolling\nfunction getIsDistanceDampeningEnabled(value: HitboxForEdge): boolean {\n\treturn value.type === 'inside-of-edge';\n}\n\nfunction getSpacingFromProvided(value: Partial | undefined): Spacing {\n\treturn {\n\t\ttop: value?.top ?? 0,\n\t\tright: value?.right ?? 0,\n\t\tbottom: value?.bottom ?? 0,\n\t\tleft: value?.left ?? 0,\n\t};\n}\n\nfunction getHitboxSpacing(provided: ProvidedHitboxSpacing): HitboxSpacing {\n\treturn {\n\t\ttop: getSpacingFromProvided(provided.forTopEdge),\n\t\tright: getSpacingFromProvided(provided.forRightEdge),\n\t\tbottom: getSpacingFromProvided(provided.forBottomEdge),\n\t\tleft: getSpacingFromProvided(provided.forLeftEdge),\n\t};\n}\n\nexport function getScrollBy({\n\tentry,\n\ttimeSinceLastFrame,\n\tinput,\n\tconfig,\n\tallowedAxis,\n}: {\n\tentry: UnsafeOverflowAutoScrollArgs;\n\tinput: Input;\n\tallowedAxis: AllowedAxis;\n\ttimeSinceLastFrame: number;\n\tconfig: InternalConfig;\n}): Pick | null {\n\tconst client: Position = {\n\t\tx: input.clientX,\n\t\ty: input.clientY,\n\t};\n\n\t// 🔥\n\t// For each registered item we need to do `getBoundingClientRect()` which is not great\n\t// Why?\n\t// 1. The hitbox can extend outside of an elements bounds\n\t// 2. We want overflow scrolling to start before the user has entered the bounds of the element\n\t// Otherwise we could search upwards in the DOM from the `elementFromPoint`\n\tconst clientRect: DOMRect = entry.element.getBoundingClientRect();\n\tconst overflow = getHitboxSpacing(entry.getOverflow());\n\n\tconst inHitboxForEdge: HitboxForEdge[] = edges\n\t\t.map((edge): HitboxForEdge | false => {\n\t\t\tconst { insideOfEdge, outsideOfEdge } = getHitbox[edge]({\n\t\t\t\tclientRect,\n\t\t\t\toverflow,\n\t\t\t\tconfig,\n\t\t\t});\n\n\t\t\t/** Note:\n\t\t\t * Intentionally _not_ doing an explicit check to\n\t\t\t * see if `client` is with within the `overElementHitbox`.\n\t\t\t *\n\t\t\t * **Why?**\n\t\t\t *\n\t\t\t * 1. 🥱 Redundant\n\t\t\t * This check is already achieved by `element.contains(underUsersPointer)`\n\t\t\t *\n\t\t\t * 2. 📐 Overlap on boundaries\n\t\t\t * Two elements can share the same `{x,y}` points on shared edges.\n\t\t\t * It's not clear which of the two will be picked by\n\t\t\t * `const underUsersPointer = document.elementFromPoint(x,y)`\n\t\t\t * The edge of an \"outside\" element, can have shared `{x,y}`\n\t\t\t * values along the edge of an \"inside element\".\n\t\t\t * So when `underUsersPointer` is the \"outer\" element, the `client`\n\t\t\t * point might actually be also within the \"inner\" element.\n\t\t\t * We are exclusively relying on `underUsersPointer` make the decision\n\t\t\t * on what we are \"over\" so we should not be doing \"over element\" hitbox\n\t\t\t * testing here.\n\t\t\t * https://twitter.com/alexandereardon/status/1721758766507638996\n\t\t\t *\n\t\t\t *\n\t\t\t * 3. 🐞 Chrome bug\n\t\t\t * `document.elementFromPoint(x, y)` can return an element that does not contain `{x,y}`,\n\t\t\t * In these cases, `isWithin({client, clientRect: overElementHitbox})` can return `false`.\n\t\t\t * https://bugs.chromium.org/p/chromium/issues/detail?id=1500073\n\t\t\t */\n\n\t\t\tif (isWithin({ client, clientRect: outsideOfEdge })) {\n\t\t\t\treturn {\n\t\t\t\t\tedge,\n\t\t\t\t\thitbox: outsideOfEdge,\n\t\t\t\t\ttype: 'outside-of-edge',\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tif (isWithin({ client, clientRect: insideOfEdge })) {\n\t\t\t\treturn {\n\t\t\t\t\tedge,\n\t\t\t\t\thitbox: insideOfEdge,\n\t\t\t\t\ttype: 'inside-of-edge',\n\t\t\t\t};\n\t\t\t}\n\n\t\t\treturn false;\n\t\t})\n\t\t.filter((value): value is HitboxForEdge => Boolean(value));\n\n\tif (!inHitboxForEdge.length) {\n\t\treturn null;\n\t}\n\n\t// Even if no edges are scrollable, we are marking the element\n\t// as being engaged with to start applying time dampening\n\tconst engagement = markAndGetEngagement(entry.element);\n\n\t// Note: changing the allowed axis during a drag will not\n\t// reset time dampening. It was decided it would be too\n\t// complex to implement initially, and we can add it\n\t// later if needed.\n\tconst scrollableEdges: HitboxForEdge[] = inHitboxForEdge.filter(\n\t\t(value) =>\n\t\t\tisAxisAllowed(edgeAxisLookup[value.edge], allowedAxis) &&\n\t\t\tcanScrollOnEdge[value.edge](entry.element),\n\t);\n\n\t// Nothing can be scrolled\n\tif (!scrollableEdges.length) {\n\t\treturn null;\n\t}\n\n\tconst lookup = new Map(scrollableEdges.map((value) => [value.edge, value]));\n\n\tconst left: number = (() => {\n\t\tconst axis: Axis = 'horizontal';\n\t\tconst leftEdge = lookup.get('left');\n\t\tif (leftEdge) {\n\t\t\treturn getScrollChange({\n\t\t\t\tclient,\n\t\t\t\tisDistanceDampeningEnabled: getIsDistanceDampeningEnabled(leftEdge),\n\t\t\t\thitbox: leftEdge.hitbox,\n\t\t\t\tedge: 'left',\n\t\t\t\taxis,\n\t\t\t\ttimeSinceLastFrame,\n\t\t\t\tengagement,\n\t\t\t\tconfig,\n\t\t\t});\n\t\t}\n\t\tconst rightEdge = lookup.get('right');\n\t\tif (rightEdge) {\n\t\t\treturn getScrollChange({\n\t\t\t\tclient,\n\t\t\t\tisDistanceDampeningEnabled: getIsDistanceDampeningEnabled(rightEdge),\n\t\t\t\thitbox: rightEdge.hitbox,\n\t\t\t\tedge: 'right',\n\t\t\t\taxis,\n\t\t\t\ttimeSinceLastFrame,\n\t\t\t\tengagement,\n\t\t\t\tconfig,\n\t\t\t});\n\t\t}\n\n\t\treturn 0;\n\t})();\n\n\tconst top: number = (() => {\n\t\tconst axis: Axis = 'vertical';\n\t\tconst bottomEdge = lookup.get('bottom');\n\t\tif (bottomEdge) {\n\t\t\treturn getScrollChange({\n\t\t\t\tclient,\n\t\t\t\tisDistanceDampeningEnabled: getIsDistanceDampeningEnabled(bottomEdge),\n\t\t\t\thitbox: bottomEdge.hitbox,\n\t\t\t\tedge: 'bottom',\n\t\t\t\taxis,\n\t\t\t\ttimeSinceLastFrame,\n\t\t\t\tengagement,\n\t\t\t\tconfig,\n\t\t\t});\n\t\t}\n\t\tconst topEdge = lookup.get('top');\n\t\tif (topEdge) {\n\t\t\treturn getScrollChange({\n\t\t\t\tclient,\n\t\t\t\tisDistanceDampeningEnabled: getIsDistanceDampeningEnabled(topEdge),\n\t\t\t\thitbox: topEdge.hitbox,\n\t\t\t\tedge: 'top',\n\t\t\t\taxis,\n\t\t\t\ttimeSinceLastFrame,\n\t\t\t\tengagement,\n\t\t\t\tconfig,\n\t\t\t});\n\t\t}\n\n\t\treturn 0;\n\t})();\n\n\treturn {\n\t\tleft,\n\t\ttop,\n\t};\n}\n" }, { "path": "packages/auto-scroll/src/unsafe-overflow/hitbox.ts", "content": "import type { Axis, Edge, InternalConfig, Side } from '../internal-types';\nimport { axisLookup } from '../shared/axis';\n// Borrowing the hitbox calculation from over-element\n// So we can be sure that the 'insideEdge' calculations\n// line up perfectly with the 'over element' edge calculations\nimport { getOverElementHitbox } from '../shared/get-over-element-hitbox';\n\nimport { type HitboxSpacing } from './types';\n\nfunction makeGetHitbox({ axis, side }: { axis: Axis; side: Side }) {\n\treturn function hitbox({\n\t\tclientRect,\n\t\toverflow,\n\t\tconfig,\n\t}: {\n\t\tclientRect: DOMRect;\n\t\toverflow: HitboxSpacing;\n\t\tconfig: InternalConfig;\n\t}): {\n\t\tinsideOfEdge: DOMRect;\n\t\toutsideOfEdge: DOMRect;\n\t} {\n\t\tconst { mainAxis, crossAxis } = axisLookup[axis];\n\t\tconst edge: Edge = mainAxis[side];\n\t\tconst spacingForEdge = overflow[edge];\n\n\t\tconst overElementHitbox = getOverElementHitbox[edge]({\n\t\t\tclientRect,\n\t\t\tconfig,\n\t\t});\n\t\t// Same as the over element hitbox,\n\t\t// but we are stretching out on the cross axis (if needed)\n\t\tconst insideOfEdge = DOMRect.fromRect({\n\t\t\t[mainAxis.point]: overElementHitbox[mainAxis.point],\n\t\t\t[mainAxis.size]: overElementHitbox[mainAxis.size],\n\n\t\t\t// pull the cross axis backwards\n\t\t\t[crossAxis.point]: overElementHitbox[crossAxis.point] - spacingForEdge[crossAxis.start],\n\t\t\t// grow the cross axis\n\t\t\t[crossAxis.size]:\n\t\t\t\toverElementHitbox[crossAxis.size] +\n\t\t\t\tspacingForEdge[crossAxis.start] +\n\t\t\t\tspacingForEdge[crossAxis.end],\n\t\t});\n\n\t\t// Note: this will be \"cut out\" by the \"overElementHitbox\"\n\t\tconst outsideOfEdge = DOMRect.fromRect({\n\t\t\t[mainAxis.point]:\n\t\t\t\tside === 'start'\n\t\t\t\t\t? // begin from before the start edge and growing forward\n\t\t\t\t\t\tclientRect[mainAxis.point] - spacingForEdge[mainAxis.start]\n\t\t\t\t\t: // begin from on the end edge and go outwards\n\t\t\t\t\t\tclientRect[mainAxis.end],\n\t\t\t[crossAxis.point]: clientRect[crossAxis.point] - spacingForEdge[crossAxis.start],\n\t\t\t[mainAxis.size]:\n\t\t\t\tside === 'start' ? spacingForEdge[mainAxis.start] : spacingForEdge[mainAxis.end],\n\t\t\t[crossAxis.size]:\n\t\t\t\tspacingForEdge[crossAxis.start] +\n\t\t\t\tclientRect[crossAxis.size] +\n\t\t\t\tspacingForEdge[crossAxis.end],\n\t\t});\n\n\t\treturn { insideOfEdge, outsideOfEdge };\n\t};\n}\n\nexport const getHitbox: {\n\t[Key in Edge]: (args: {\n\t\tclientRect: DOMRect;\n\t\toverflow: HitboxSpacing;\n\t\tconfig: InternalConfig;\n\t}) => {\n\t\tinsideOfEdge: DOMRect;\n\t\toutsideOfEdge: DOMRect;\n\t};\n} = {\n\ttop: makeGetHitbox({\n\t\taxis: 'vertical',\n\t\tside: 'start',\n\t}),\n\tright: makeGetHitbox({\n\t\taxis: 'horizontal',\n\t\tside: 'end',\n\t}),\n\tbottom: makeGetHitbox({\n\t\taxis: 'vertical',\n\t\tside: 'end',\n\t}),\n\tleft: makeGetHitbox({\n\t\taxis: 'horizontal',\n\t\tside: 'start',\n\t}),\n};\n" }, { "path": "packages/auto-scroll/src/unsafe-overflow/make-api.ts", "content": "import type {\n\tAllDragTypes,\n\tBaseEventPayload,\n\tCleanupFn,\n\tMonitorArgs,\n} from '@atlaskit/pragmatic-drag-and-drop/types';\n\nimport { getScheduler } from '../shared/scheduler';\n\nimport { tryOverflowScrollElements } from './try-overflow-scroll';\nimport { type UnsafeOverflowAutoScrollArgs } from './types';\n\nexport function makeApi({\n\tmonitor,\n}: {\n\tmonitor: (args: MonitorArgs) => CleanupFn;\n}) {\n\tconst ledger: Map> = new Map();\n\n\tfunction unsafeOverflowAutoScroll(args: UnsafeOverflowAutoScrollArgs): CleanupFn {\n\t\tledger.set(args.element, args);\n\n\t\treturn () => ledger.delete(args.element);\n\t}\n\n\tfunction onFrame({\n\t\tlatestArgs,\n\t\tunderUsersPointer,\n\t\ttimeSinceLastFrame,\n\t}: {\n\t\tlatestArgs: BaseEventPayload;\n\t\ttimeSinceLastFrame: number;\n\t\tunderUsersPointer: Element | null;\n\t}) {\n\t\ttryOverflowScrollElements({\n\t\t\tinput: latestArgs.location.current.input,\n\t\t\tsource: latestArgs.source,\n\t\t\tentries: Array.from(ledger).map(([_, args]) => args),\n\t\t\tunderUsersPointer,\n\t\t\ttimeSinceLastFrame,\n\t\t});\n\t}\n\n\t// scheduler is never cleaned up\n\tgetScheduler(monitor).onFrame(onFrame);\n\n\treturn {\n\t\tunsafeOverflowAutoScroll,\n\t};\n}\n" }, { "path": "packages/auto-scroll/src/unsafe-overflow/try-overflow-scroll.ts", "content": "import type { AllDragTypes, Input } from '@atlaskit/pragmatic-drag-and-drop/types';\n\nimport { type ElementGetFeedbackArgs } from '../internal-types';\nimport { getInternalConfig } from '../shared/configuration';\n\nimport { getScrollBy } from './get-scroll-by';\nimport { type UnsafeOverflowAutoScrollArgs } from './types';\n\nexport function tryOverflowScrollElements({\n\tinput,\n\tsource,\n\tentries,\n\ttimeSinceLastFrame,\n\tunderUsersPointer,\n}: {\n\tinput: Input;\n\ttimeSinceLastFrame: number;\n\tunderUsersPointer: Element | null;\n\tsource: DragType['payload'];\n\tentries: UnsafeOverflowAutoScrollArgs[];\n}): void {\n\t// For now we are auto scrolling any element that wants to.\n\t// Otherwise it's hard to know what should scroll first as we might\n\t// be scrolling elements that have no hierarchical relationship\n\tfor (const entry of entries) {\n\t\t// \"overflow\" scrolling not relevant when directly over the element\n\t\t// \"over element\" scrolling is responsible for scrolling when over an element\n\t\t// 1. If we are over the element, then we want to exit and let the \"overflow\" scroller take over\n\t\t// 2. The overflow hitbox area for an edge actually stretches over the element\n\t\t// This check is used to \"mask\" or \"cut out\" the element hitbox from the overflow hitbox\n\t\tif (entry.element.contains(underUsersPointer)) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst feedback: ElementGetFeedbackArgs = {\n\t\t\tinput,\n\t\t\tsource,\n\t\t\telement: entry.element,\n\t\t};\n\n\t\t// Scrolling not allowed for this entity\n\t\t// Note: not marking engagement if an entity is opting out of scrolling\n\t\tif (entry.canScroll && !entry.canScroll(feedback)) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst config = getInternalConfig(entry.getConfiguration?.(feedback));\n\t\tconst allowedAxis = entry.getAllowedAxis?.(feedback) ?? 'all';\n\n\t\tconst scrollBy = getScrollBy({\n\t\t\tentry,\n\t\t\tinput,\n\t\t\ttimeSinceLastFrame,\n\t\t\tallowedAxis,\n\t\t\tconfig,\n\t\t});\n\n\t\tif (scrollBy) {\n\t\t\tentry.element.scrollBy(scrollBy);\n\t\t}\n\t}\n}\n" }, { "path": "packages/auto-scroll/src/unsafe-overflow/types.ts", "content": "import type { AllDragTypes } from '@atlaskit/pragmatic-drag-and-drop/types';\n\nimport { type Edge, type ElementAutoScrollArgs, type Spacing } from '../internal-types';\n\ntype VerticalEdges = ['top' | 'bottom'];\ntype HorizontalEdges = ['left' | 'right'];\ntype CrossAxisEdges = T extends VerticalEdges[number]\n\t? HorizontalEdges\n\t: VerticalEdges;\n\n/** Specify outward reach of a scroll container */\nexport type HitboxSpacing = {\n\t[TEdge in keyof Spacing]: Spacing;\n};\n\n/** The public type for specifying the outward reach of a scroll container */\nexport type ProvidedHitboxSpacing = {\n\t[TEdge in keyof Spacing as `for${Capitalize}Edge`]?: {\n\t\t// Allow\n\t\t// Example for \"top\" edge: { top: 5 }\n\t\t[TKey in TEdge]: number;\n\t} & {\n\t\t// Optional edges for the cross axis\n\t\t// Example for \"top\" edge: {top: 5, left: 1, right: 2}\n\t\t[TKey in CrossAxisEdges[number]]?: number;\n\t};\n\t// Disallowing (by not including) the opposite edge.\n\t// Example for \"top\" edge: {top: 5, bottom: 2} is not allowed\n};\n\nexport type UnsafeOverflowAutoScrollArgs =\n\tElementAutoScrollArgs & {\n\t\tgetOverflow: () => ProvidedHitboxSpacing;\n\t};\n" }, { "path": "packages/auto-scroll/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.json\",\n \"include\": [\n \"__tests__/**/*.ts\",\n \"__tests__/**/*.tsx\",\n \"docs/**/*.ts\",\n \"docs/**/*.tsx\",\n \"examples/**/*.ts\",\n \"examples/**/*.tsx\",\n \"src/**/*.ts\",\n \"src/**/*.tsx\",\n \"**/stories.ts\",\n \"**/stories.tsx\",\n \"**/stories/*.ts\",\n \"**/stories/*.tsx\",\n \"**/stories/**/*.ts\",\n \"**/stories/**/*.tsx\"\n ]\n}\n" }, { "path": "packages/core/.npmignore", "content": "src/\nexamples-utils/\nexamples/\nindex.ts\ndocs/\nbuild/\n__tests__/\ntsconfig.json\ntsconfig.app.json\ntsconfig.dev.json\n" }, { "path": "packages/core/CHANGELOG.md", "content": "# @atlaskit/pragmatic-drag-and-drop\n\n## 1.7.9\n\n### Patch Changes\n\n- [`acb61d1d6efd9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/acb61d1d6efd9) -\n Add dependency for a11y testing.\n\n## 1.7.8\n\n### Patch Changes\n\n- [`6d87d08be8526`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d87d08be8526) -\n Add dependency for a11y testing.\n\n## 1.7.7\n\n### Patch Changes\n\n- [`5d0b8ba5e6f7f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5d0b8ba5e6f7f) -\n Internal changes to how borders are applied.\n\n## 1.7.6\n\n### Patch Changes\n\n- [`6c430bfbb035d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6c430bfbb035d) -\n Updated code to fix typescript issues during adoption of local consumption for adminhub\n\n## 1.7.5\n\n### Patch Changes\n\n- [`beaa6ee463aa8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/beaa6ee463aa8) -\n Internal changes to how border radius is applied.\n\n## 1.7.4\n\n### Patch Changes\n\n- [#174472](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/174472)\n [`fda983a832f81`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fda983a832f81) -\n On Android `pointerOutsideOfPreview` will now also center the drag preview under the users\n pointer. Technically this was already existing observed behaviour as Android always centers the\n drag preview under the users pointer. We now make this behaviour explicit in the code, and call\n this out behaviour in jsdoc and documentation.\n\n## 1.7.3\n\n### Patch Changes\n\n- [#173859](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173859)\n [`d6f17206f8859`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d6f17206f8859) -\n In order to provide the best experience for iOS, the optional function `pointerOutsideOfPreview`\n will now center the drag preview under the users pointer on iOS.\n\n Some more detail (in case you are interested):\n\n **Borders**\n\n _(Existing behaviour)_\n\n In `pointerOutsideOfPreview` we use transparent borders to push the preview away from the users\n pointer. On iOS these borders will always be black. So we don't use transparent border on iOS.\n\n **Placement**\n\n _(Improvement)_\n\n During a drag on iOS the drag preview will shift under the center of the users pointer, even if we\n start the drag with the users pointer on the top left or top right corner of the drag preview. So\n now `pointerOutsideOfPreview` will always put the preview under the center of the users pointer in\n order to avoid the drag preview position shifting as the drag is starting.\n\n## 1.7.2\n\n### Patch Changes\n\n- [#164244](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164244)\n [`65021fc0267e2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/65021fc0267e2) -\n The cleanup functions returned by the following utilities now only work on the first call. This\n was done to prevent unexpected side effects of calling a cleanup function multiple times.\n - `@atlaskit/pragmatic-drag-and-drop/adapter/element`\n - `draggable`\n - `dropTargetForElements`\n - `monitorForElements`\n - `@atlaskit/pragmatic-drag-and-drop/adapter/text-selection`\n - `dropTargetForTextSelection`\n - `monitorForTextSelection`\n - `@atlaskit/pragmatic-drag-and-drop/adapter/external`\n - `dropTargetForExternal`\n - `monitorForExternal`\n - `@atlaskit/pragmatic-drag-and-drop-auto-scroll/element`\n - `autoScrollForElements`\n - `autoScrollWindowForElements`\n - `@atlaskit/pragmatic-drag-and-drop-auto-scroll/external`\n - `autoScrollForExternal`\n - `autoScrollWindowForExternal`\n - `@atlaskit/pragmatic-drag-and-drop-auto-scroll/text-selection`\n - `autoScrollForTextSelection`\n - `autoScrollWindowForTextSelection`\n\n## 1.7.1\n\n### Patch Changes\n\n- [#162456](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/162456)\n [`f916af5aab898`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f916af5aab898) -\n Removes `@atlaskit/platform-feature-flags` as a dependency. Removes `@atlaskit/link` as a runtime\n dependency, although it is still used in examples.\n\n## 1.7.0\n\n### Minor Changes\n\n- [#157071](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157071)\n [`a149a0b1559ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a149a0b1559ec) -\n We are testing the migration to the ADS Link component behind a feature flag. If this fix is\n successful it will be available in a later release.\n\n### Patch Changes\n\n- Updated dependencies\n\n## 1.6.1\n\n### Patch Changes\n\n- [#150602](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/150602)\n [`f83b03a3b239e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f83b03a3b239e) -\n `pointerOutsideOfPreview` will no longer push the preview away from the users pointer on iOS due\n to platform limitations. On iOS the preview will start the drag on the top left corner (or top\n right corner for right to left interfaces). While dragging, iOS will shift the drag preview under\n the center of the users pointer, so the \"pushing away\" is short lived on iOS.\n\n## 1.6.0\n\n### Minor Changes\n\n- [#146341](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/146341)\n [`ef9d1cdc6ea92`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef9d1cdc6ea92) -\n The `pointerOutsideOfPreview()` utility will now correctly push the preview forward in right to\n left layouts.\n - Left to right (ltr): preview on right hand side of pointer\n - Right to left (rtl): preview on left hand side of pointer (**new improvement**)\n\n## 1.5.3\n\n### Patch Changes\n\n- [#145191](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145191)\n [`cd21ebedb9a08`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cd21ebedb9a08) -\n Internal change to move towards Compiled CSS-in-JS styling.\n\n## 1.5.2\n\n### Patch Changes\n\n- [#128775](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128775)\n [`7a47573fb87cd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7a47573fb87cd) -\n The optional `reorder` utility is helpful for returning a new reordered array, without modifying\n the original array. Previously the _original_ array was returned unmodified if an invalid\n `startIndex` or `finishIndex` was provided. `reorder` now always returns a new array, even when an\n invalid `startIndex` or `finishIndex` is provided for consistency.\n\n We consider this a bug fix as the `reorder` function claimed that it returned a new array. Now it\n always does that.\n\n Here is how things continue to work for `reorder` with valid arguments:\n\n ```ts\n import { reorder } from '@atlaskit/pragmatic-drag-and-drop/reorder';\n\n const original = ['A', 'B'];\n\n const result = reorder({\n \tlist: original,\n \t// Grab A\n \tstartIndex: 0,\n \t// Move it to where B is\n \tfinishIndex: 1,\n });\n\n console.log(result); // ['B', 'A']\n console.log(result === original); // false - we got a new array back\n ```\n\n Things were a little different when an invalid `startIndex` or `finishIndex` was provided:\n\n ```ts\n import { reorder } from '@atlaskit/pragmatic-drag-and-drop/reorder';\n\n const original = ['A', 'B'];\n\n const result = reorder({\n \tlist: original,\n \tstartIndex: -1, // invalid start index\n \tfinishIndex: 1,\n });\n\n console.log(result); // ['A', 'B'] (array not reordered)\n\n // Original array was returned for this error case\n console.log(result === original); // true\n ```\n\n When an invalid `startIndex` or `finishIndex` is provided, `reorder` will now return a new array\n\n ```ts\n import { reorder } from '@atlaskit/pragmatic-drag-and-drop/reorder';\n\n const original = ['A', 'B'];\n\n const result = reorder({\n \tlist: original,\n \tstartIndex: -1, // invalid start index\n \tfinishIndex: 1,\n });\n\n console.log(result); // ['A', 'B'] (array not reordered - unchanged)\n\n // We now return a new array in this case\n console.log(result === original); // false\n ```\n\n In addition to this improvement, we have also improved the clarity of documentation and jsdoc for\n `reorder`\n\n## 1.5.1\n\n### Patch Changes\n\n- [#125185](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/125185)\n [`423e7b65d4846`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/423e7b65d4846) -\n Fixing an incorrectly exported `type` name from our external adapter.\n\n ```diff\n - import type { ElementDropTargetEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';\n + import type { ExternalDropTargetEventBasePayload } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';\n ```\n\n## 1.5.0\n\n### Minor Changes\n\n- [#109060](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109060)\n [`4660ec858a305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4660ec858a305) -\n Update `React` from v16 to v18\n\n## 1.4.0\n\n### Minor Changes\n\n- [#145232](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145232)\n [`04641b5e6ed55`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/04641b5e6ed55) -\n Adding new optional utility for element dragging: `blockDraggingToIFrames` which disables the\n ability for a user to drag into an `