Add scroll-into-view-if-needed (#541)

* Add `scroll-into-view-if-needed`

* Update code to use new addon

* Add smooth scrolling to RR transition

* Adds default options

web/app/components/document/sidebar/related-resources.ts

@@ -9,7 +9,6 @@ import { restartableTask, task, timeout } from "ember-concurrency";
 import { next, schedule } from "@ember/runloop";
 import htmlElement from "hermes/utils/html-element";
 import Ember from "ember";
-import maybeScrollIntoView from "hermes/utils/maybe-scroll-into-view";
 import {
   RelatedExternalLink,
   RelatedHermesDocument,
@@ -20,6 +19,7 @@ import { assert } from "@ember/debug";
 import HermesFlashMessagesService from "hermes/services/flash-messages";
 import { FLASH_MESSAGES_LONG_TIMEOUT } from "hermes/utils/ember-cli-flash/timeouts";
 import updateRelatedResourcesSortOrder from "hermes/utils/update-related-resources-sort-order";
+import scrollIntoViewIfNeeded from "hermes/utils/scroll-into-view-if-needed";
 
 export interface DocumentSidebarRelatedResourcesComponentArgs {
   productArea?: string;
@@ -254,12 +254,10 @@ export default class DocumentSidebarRelatedResourcesComponent extends Component<
         target = htmlElement(targetSelector);
 
         next(() => {
-          maybeScrollIntoView(
-            target as HTMLElement,
-            this.args.scrollContainer,
-            "getBoundingClientRect",
-            10,
-          );
+          scrollIntoViewIfNeeded(target as HTMLElement, {
+            block: "nearest",
+            behavior: "smooth",
+          });
         });
 
         const highlight = document.createElement("div");

web/app/components/x/dropdown-list/index.ts

@@ -16,9 +16,9 @@ import XDropdownListToggleActionComponent from "./toggle-action";
 import XDropdownListToggleButtonComponent from "./toggle-button";
 import { XDropdownListItemAPI } from "./item";
 import { restartableTask, timeout } from "ember-concurrency";
-import maybeScrollIntoView from "hermes/utils/maybe-scroll-into-view";
 import { MatchAnchorWidthOptions } from "hermes/components/floating-u-i/content";
 import XDropdownListToggleSelectComponent from "./toggle-select";
+import scrollIntoViewIfNeeded from "hermes/utils/scroll-into-view-if-needed";
 
 export type XDropdownListToggleComponentBoundArgs =
   | "contentIsShown"
@@ -326,7 +326,7 @@ export default class XDropdownListComponent extends Component<XDropdownListCompo
    */
   @action protected setFocusedItemIndex(
     focusDirectionOrNumber: FocusDirection | number,
-    maybeScrollIntoView = true,
+    scrollIntoView = true,
   ) {
     let { _menuItems: menuItems, focusedItemIndex } = this;
 
@@ -377,8 +377,8 @@ export default class XDropdownListComponent extends Component<XDropdownListCompo
 
     this.focusedItemIndex = focusedItemIndex;
 
-    if (maybeScrollIntoView) {
-      this.maybeScrollIntoView();
+    if (scrollIntoView) {
+      this.scrollIntoView();
     }
   }
 
@@ -387,10 +387,12 @@ export default class XDropdownListComponent extends Component<XDropdownListCompo
    * and, if necessary, scrolls the dropdown to make it visible.
    * Used by the setFocusedItemIndex action on keydown.
    */
-  private maybeScrollIntoView() {
+  private scrollIntoView() {
     const focusedItem = this._menuItems?.item(this.focusedItemIndex);
     assert("focusedItem must exist", focusedItem instanceof HTMLElement);
-    maybeScrollIntoView(focusedItem, this.scrollContainer);
+    scrollIntoViewIfNeeded(focusedItem, {
+      block: "nearest",
+    });
   }
 
   /**

web/app/components/x/dropdown-list/item.ts

@@ -48,7 +48,7 @@ export interface XDropdownListItemComponentArgs {
   onItemClick?: (value: any, attributes: any) => void;
   setFocusedItemIndex: (
     focusDirection: FocusDirection | number,
-    maybeScrollIntoView?: boolean,
+    scrollIntoView?: boolean,
   ) => void;
   hideContent: () => void;
 }

web/app/utils/scroll-into-view-if-needed.ts

@@ -0,0 +1,18 @@
+/**
+ * A `scrollIntoView` wrapper with default options.
+ * https://github.com/scroll-into-view/compute-scroll-into-view?tab=readme-ov-file#api
+ */
+
+import scrollIntoView from "scroll-into-view-if-needed";
+
+export default function scrollIntoViewIfNeeded(
+  element: Element,
+  options?: ScrollIntoViewOptions,
+): void {
+  scrollIntoView(element, {
+    scrollMode: "if-needed",
+    block: "start",
+    inline: "nearest",
+    ...options,
+  });
+}

web/package.json

@@ -149,6 +149,7 @@
     "miragejs": "^0.1.47",
     "postcss-scss": "^4.0.3",
     "replace-special-characters": "^1.2.7",
+    "scroll-into-view-if-needed": "^3.1.0",
     "sinon": "^15.0.1",
     "tailwindcss": "^3.0.23",
     "torii": "^0.10.1",

web/yarn.lock

@@ -8689,6 +8689,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"compute-scroll-into-view@npm:^3.0.2":
+  version: 3.1.0
+  resolution: "compute-scroll-into-view@npm:3.1.0"
+  checksum: 224549d6dd1d40342230de5c6d69cac5c3ed5c2f6a4437310f959aadc8db1d20b03da44a6e0de14d9419c6f9130ce51ec99a91b11bde55d4640f10551c89c213
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -13480,6 +13487,7 @@ __metadata:
     qunit: ^2.17.2
     qunit-dom: ^1.6.0
     replace-special-characters: ^1.2.7
+    scroll-into-view-if-needed: ^3.1.0
     sinon: ^15.0.1
     tailwindcss: ^3.0.23
     torii: ^0.10.1
@@ -18582,6 +18590,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scroll-into-view-if-needed@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "scroll-into-view-if-needed@npm:3.1.0"
+  dependencies:
+    compute-scroll-into-view: ^3.0.2
+  checksum: edc0f68dc170d0c153ce4ae2929cbdfaf3426d1fc842b67d5f092c5ec38fbb8408e6cb8467f86d8dfb23de3f77a2f2a9e79cbf80bc49b35a39f3092e18b4c3d5
+  languageName: node
+  linkType: hard
+
 "search-insights@npm:^2.1.0":
   version: 2.2.3
   resolution: "search-insights@npm:2.2.3"