@player-ui/auto-scroll-manager-plugin-react 0.3.1-next.0 → 0.3.1

package/dist/index.cjs.js

@@ -3,12 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var scrollIntoView = require('smooth-scroll-into-view-if-needed');
+var seamlessScrollPolyfill = require('seamless-scroll-polyfill');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var scrollIntoView__default = /*#__PURE__*/_interopDefaultLegacy(scrollIntoView);
+
+var scrollIntoViewWithOffset = (node, baseElement, offset) => {
+  seamlessScrollPolyfill.scrollTo(window, {
+    behavior: "smooth",
+    top: node.getBoundingClientRect().top - baseElement.getBoundingClientRect().top - offset
+  });
+};
 
 const AutoScrollManagerContext = React__default["default"].createContext({ register: () => {
 } });
@@ -18,6 +24,8 @@ const useRegisterAsScrollable = () => {
 };
 const AutoScrollProvider = ({
   getElementToScrollTo,
+  getBaseElement,
+  offset,
   children
 }) => {
   const [scrollableMap, setScrollableMap] = React.useState(new Map());
@@ -38,10 +46,7 @@ const AutoScrollProvider = ({
   React.useEffect(() => {
     const node = document.getElementById(getElementToScrollTo(scrollableMap));
     if (node) {
-      scrollIntoView__default["default"](node, {
-        block: "nearest",
-        inline: "nearest"
-      });
+      scrollIntoViewWithOffset(node, getBaseElement() || document.body, offset);
     }
   });
   return /* @__PURE__ */ React__default["default"].createElement(AutoScrollManagerContext.Provider, {
@@ -58,16 +63,21 @@ exports.ScrollType = void 0;
 class AutoScrollManagerPlugin {
   constructor(config) {
     this.name = "auto-scroll-manager";
-    var _a, _b;
+    var _a, _b, _c, _d;
     this.autoScrollOnLoad = (_a = config.autoScrollOnLoad) != null ? _a : false;
     this.autoFocusOnErrorField = (_b = config.autoFocusOnErrorField) != null ? _b : false;
+    this.getBaseElement = (_c = config.getBaseElement) != null ? _c : () => null;
+    this.offset = (_d = config.offset) != null ? _d : 0;
     this.initialRender = false;
     this.failedNavigation = false;
     this.alreadyScrolledTo = [];
     this.scrollFn = this.calculateScroll.bind(this);
   }
   getFirstScrollableElement(idList, type) {
-    const highestElement = { id: "", ypos: 0 };
+    const highestElement = {
+      id: "",
+      ypos: 0
+    };
     const ypos = window.scrollY;
     idList.forEach((id) => {
       const element = document.getElementById(id);
@@ -81,9 +91,9 @@ class AutoScrollManagerPlugin {
         this.alreadyScrolledTo.push(id);
       }
       const epos = element == null ? void 0 : element.getBoundingClientRect().top;
-      if (epos && (epos + ypos > highestElement.ypos || highestElement.ypos === 0)) {
+      if (epos !== void 0 && (epos + ypos < highestElement.ypos || highestElement.id === "")) {
         highestElement.id = id;
-        highestElement.ypos = ypos - epos;
+        highestElement.ypos = ypos + epos;
       }
     });
     return highestElement.id;
@@ -115,10 +125,12 @@ class AutoScrollManagerPlugin {
           this.initialRender = true;
           this.failedNavigation = false;
           this.alreadyScrolledTo = [];
+          window.scroll(0, 0);
         });
-        flow.hooks.beforeTransition.tap(this.name, (state) => {
-          this.failedNavigation = true;
-          return state;
+        flow.hooks.skipTransition.intercept({
+          call: () => {
+            this.failedNavigation = true;
+          }
         });
       });
     });
@@ -126,9 +138,11 @@ class AutoScrollManagerPlugin {
   applyReact(reactPlayer) {
     reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       return () => {
-        const { scrollFn } = this;
+        const { scrollFn, getBaseElement, offset } = this;
         return /* @__PURE__ */ React__default["default"].createElement(AutoScrollProvider, {
-          getElementToScrollTo: scrollFn
+          getElementToScrollTo: scrollFn,
+          getBaseElement,
+          offset
         }, /* @__PURE__ */ React__default["default"].createElement(Comp, null));
       };
     });

package/dist/index.d.ts

@@ -5,6 +5,10 @@ import { Player } from '@player-ui/player';
 interface AutoScrollProviderProps {
     /** Return the element to scroll to based on the registered types */
     getElementToScrollTo: (scrollableElements: Map<ScrollType, Set<string>>) => string;
+    /** Optional function to get container element, which is used for calculating offset (default: document.body) */
+    getBaseElement: () => HTMLElement | undefined | null;
+    /** Additional offset to be used (default: 0) */
+    offset: number;
 }
 interface RegisterData {
     /** when to scroll to the target  */
@@ -20,7 +24,7 @@ declare const AutoScrollManagerContext: React.Context<{
 /** hook to register as a scroll target */
 declare const useRegisterAsScrollable: () => ScrollFunction;
 /** Component to handle scrolling */
-declare const AutoScrollProvider: ({ getElementToScrollTo, children, }: PropsWithChildren<AutoScrollProviderProps>) => JSX.Element;
+declare const AutoScrollProvider: ({ getElementToScrollTo, getBaseElement, offset, children, }: PropsWithChildren<AutoScrollProviderProps>) => JSX.Element;
 
 declare enum ScrollType {
     ValidationError = 0,
@@ -32,6 +36,10 @@ interface AutoScrollManagerConfig {
     autoScrollOnLoad?: boolean;
     /** Config to auto-focus on an error */
     autoFocusOnErrorField?: boolean;
+    /** Optional function to get container element, which is used for calculating offset (default: document.body) */
+    getBaseElement?: () => HTMLElement | undefined | null;
+    /** Additional offset to be used (default: 0) */
+    offset?: number;
 }
 /** A plugin to manage scrolling behavior */
 declare class AutoScrollManagerPlugin implements ReactPlayerPlugin {
@@ -44,6 +52,10 @@ declare class AutoScrollManagerPlugin implements ReactPlayerPlugin {
     private initialRender;
     /** tracks if the navigation failed */
     private failedNavigation;
+    /** function to return the base of the scrollable area */
+    private getBaseElement;
+    /** static offset */
+    private offset;
     /** map of scroll type to set of ids that are registered under that type */
     private alreadyScrolledTo;
     private scrollFn;

package/dist/index.esm.js

@@ -1,5 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import scrollIntoView from 'smooth-scroll-into-view-if-needed';
+import { scrollTo } from 'seamless-scroll-polyfill';
+
+var scrollIntoViewWithOffset = (node, baseElement, offset) => {
+  scrollTo(window, {
+    behavior: "smooth",
+    top: node.getBoundingClientRect().top - baseElement.getBoundingClientRect().top - offset
+  });
+};
 
 const AutoScrollManagerContext = React.createContext({ register: () => {
 } });
@@ -9,6 +16,8 @@ const useRegisterAsScrollable = () => {
 };
 const AutoScrollProvider = ({
   getElementToScrollTo,
+  getBaseElement,
+  offset,
   children
 }) => {
   const [scrollableMap, setScrollableMap] = useState(new Map());
@@ -29,10 +38,7 @@ const AutoScrollProvider = ({
   useEffect(() => {
     const node = document.getElementById(getElementToScrollTo(scrollableMap));
     if (node) {
-      scrollIntoView(node, {
-        block: "nearest",
-        inline: "nearest"
-      });
+      scrollIntoViewWithOffset(node, getBaseElement() || document.body, offset);
     }
   });
   return /* @__PURE__ */ React.createElement(AutoScrollManagerContext.Provider, {
@@ -49,16 +55,21 @@ var ScrollType;
 class AutoScrollManagerPlugin {
   constructor(config) {
     this.name = "auto-scroll-manager";
-    var _a, _b;
+    var _a, _b, _c, _d;
     this.autoScrollOnLoad = (_a = config.autoScrollOnLoad) != null ? _a : false;
     this.autoFocusOnErrorField = (_b = config.autoFocusOnErrorField) != null ? _b : false;
+    this.getBaseElement = (_c = config.getBaseElement) != null ? _c : () => null;
+    this.offset = (_d = config.offset) != null ? _d : 0;
     this.initialRender = false;
     this.failedNavigation = false;
     this.alreadyScrolledTo = [];
     this.scrollFn = this.calculateScroll.bind(this);
   }
   getFirstScrollableElement(idList, type) {
-    const highestElement = { id: "", ypos: 0 };
+    const highestElement = {
+      id: "",
+      ypos: 0
+    };
     const ypos = window.scrollY;
     idList.forEach((id) => {
       const element = document.getElementById(id);
@@ -72,9 +83,9 @@ class AutoScrollManagerPlugin {
         this.alreadyScrolledTo.push(id);
       }
       const epos = element == null ? void 0 : element.getBoundingClientRect().top;
-      if (epos && (epos + ypos > highestElement.ypos || highestElement.ypos === 0)) {
+      if (epos !== void 0 && (epos + ypos < highestElement.ypos || highestElement.id === "")) {
         highestElement.id = id;
-        highestElement.ypos = ypos - epos;
+        highestElement.ypos = ypos + epos;
       }
     });
     return highestElement.id;
@@ -106,10 +117,12 @@ class AutoScrollManagerPlugin {
           this.initialRender = true;
           this.failedNavigation = false;
           this.alreadyScrolledTo = [];
+          window.scroll(0, 0);
         });
-        flow.hooks.beforeTransition.tap(this.name, (state) => {
-          this.failedNavigation = true;
-          return state;
+        flow.hooks.skipTransition.intercept({
+          call: () => {
+            this.failedNavigation = true;
+          }
         });
       });
     });
@@ -117,9 +130,11 @@ class AutoScrollManagerPlugin {
   applyReact(reactPlayer) {
     reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       return () => {
-        const { scrollFn } = this;
+        const { scrollFn, getBaseElement, offset } = this;
         return /* @__PURE__ */ React.createElement(AutoScrollProvider, {
-          getElementToScrollTo: scrollFn
+          getElementToScrollTo: scrollFn,
+          getBaseElement,
+          offset
         }, /* @__PURE__ */ React.createElement(Comp, null));
       };
     });

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@player-ui/auto-scroll-manager-plugin-react",
-  "version": "0.3.1-next.0",
+  "version": "0.3.1",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "peerDependencies": {
-    "@player-ui/react": "0.3.1-next.0"
+    "@player-ui/react": "0.3.1"
   },
   "dependencies": {
-    "smooth-scroll-into-view-if-needed": "1.1.32",
+    "seamless-scroll-polyfill": "2.3.3",
     "@babel/runtime": "7.15.4"
   },
   "main": "dist/index.cjs.js",
@@ -53,6 +53,14 @@
     {
       "name": "Kelly Harrop",
       "url": "https://github.com/kharrop"
+    },
+    {
+      "name": "Alejandro Fimbres",
+      "url": "https://github.com/lexfm"
+    },
+    {
+      "name": "Rafael Campos",
+      "url": "https://github.com/rafbcampos"
     }
   ]
 }

package/src/hooks.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import React, { useEffect, useState } from 'react';
-import scrollIntoView from 'smooth-scroll-into-view-if-needed';
+import scrollIntoViewWithOffset from './scrollIntoViewWithOffset';
 import type { ScrollType } from './index';
 
 export interface AutoScrollProviderProps {
@@ -8,6 +8,10 @@ export interface AutoScrollProviderProps {
   getElementToScrollTo: (
     scrollableElements: Map<ScrollType, Set<string>>
   ) => string;
+  /** Optional function to get container element, which is used for calculating offset (default: document.body) */
+  getBaseElement: () => HTMLElement | undefined | null;
+  /** Additional offset to be used (default: 0) */
+  offset: number;
 }
 
 export interface RegisterData {
@@ -35,6 +39,8 @@ export const useRegisterAsScrollable = (): ScrollFunction => {
 /** Component to handle scrolling */
 export const AutoScrollProvider = ({
   getElementToScrollTo,
+  getBaseElement,
+  offset,
   children,
 }: PropsWithChildren<AutoScrollProviderProps>) => {
   // Tracker for what elements are registered to be scroll targets
@@ -68,10 +74,7 @@ export const AutoScrollProvider = ({
     const node = document.getElementById(getElementToScrollTo(scrollableMap));
 
     if (node) {
-      scrollIntoView(node, {
-        block: 'nearest',
-        inline: 'nearest',
-      });
+      scrollIntoViewWithOffset(node, getBaseElement() || document.body, offset);
     }
   });
 

package/src/plugin.tsx

@@ -14,6 +14,10 @@ export interface AutoScrollManagerConfig {
   autoScrollOnLoad?: boolean;
   /** Config to auto-focus on an error */
   autoFocusOnErrorField?: boolean;
+  /** Optional function to get container element, which is used for calculating offset (default: document.body) */
+  getBaseElement?: () => HTMLElement | undefined | null;
+  /** Additional offset to be used (default: 0) */
+  offset?: number;
 }
 
 /** A plugin to manage scrolling behavior */
@@ -32,6 +36,12 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
   /** tracks if the navigation failed */
   private failedNavigation: boolean;
 
+  /** function to return the base of the scrollable area */
+  private getBaseElement: () => HTMLElement | undefined | null;
+
+  /** static offset */
+  private offset: number;
+
   /** map of scroll type to set of ids that are registered under that type */
   private alreadyScrolledTo: Array<string>;
   private scrollFn: (
@@ -41,6 +51,8 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
   constructor(config: AutoScrollManagerConfig) {
     this.autoScrollOnLoad = config.autoScrollOnLoad ?? false;
     this.autoFocusOnErrorField = config.autoFocusOnErrorField ?? false;
+    this.getBaseElement = config.getBaseElement ?? (() => null);
+    this.offset = config.offset ?? 0;
     this.initialRender = false;
     this.failedNavigation = false;
     this.alreadyScrolledTo = [];
@@ -48,7 +60,10 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
   }
 
   getFirstScrollableElement(idList: Set<string>, type: ScrollType) {
-    const highestElement = { id: '', ypos: 0 };
+    const highestElement = {
+      id: '',
+      ypos: 0,
+    };
     const ypos = window.scrollY;
     idList.forEach((id) => {
       const element = document.getElementById(id);
@@ -72,22 +87,19 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
       }
 
       const epos = element?.getBoundingClientRect().top;
-
       if (
-        epos &&
-        (epos + ypos > highestElement.ypos || highestElement.ypos === 0)
+        epos !== undefined &&
+        (epos + ypos < highestElement.ypos || highestElement.id === '')
       ) {
         highestElement.id = id;
-        highestElement.ypos = ypos - epos;
+        highestElement.ypos = ypos + epos;
       }
     });
-
     return highestElement.id;
   }
 
   calculateScroll(scrollableElements: Map<ScrollType, Set<string>>) {
     let currentScroll = ScrollType.FirstAppearance;
-
     if (this.initialRender) {
       if (this.autoScrollOnLoad) {
         currentScroll = ScrollType.ValidationError;
@@ -103,13 +115,11 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
     }
 
     const elementList = scrollableElements.get(currentScroll);
-
     if (elementList) {
       const element = this.getFirstScrollableElement(
         elementList,
         currentScroll
       );
-
       return element ?? '';
     }
 
@@ -125,13 +135,13 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
           this.initialRender = true;
           this.failedNavigation = false;
           this.alreadyScrolledTo = [];
+          // Reset scroll position for new view
+          window.scroll(0, 0);
         });
-        flow.hooks.beforeTransition.tap(this.name, (state) => {
-          // will get reset to false if view successfully transitions
-          // otherwise stays as true when view get rerendered with errors
-          this.failedNavigation = true;
-
-          return state;
+        flow.hooks.skipTransition.intercept({
+          call: () => {
+            this.failedNavigation = true;
+          },
         });
       });
     });
@@ -140,10 +150,13 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
   applyReact(reactPlayer: ReactPlayer) {
     reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       return () => {
-        const { scrollFn } = this;
-
+        const { scrollFn, getBaseElement, offset } = this;
         return (
-          <AutoScrollProvider getElementToScrollTo={scrollFn}>
+          <AutoScrollProvider
+            getElementToScrollTo={scrollFn}
+            getBaseElement={getBaseElement}
+            offset={offset}
+          >
             <Comp />
           </AutoScrollProvider>
         );

package/src/scrollIntoViewWithOffset.ts

@@ -0,0 +1,22 @@
+/**
+ * Scroll to the given element
+-* @param node Element to scroll to
+-* @param baseElement Container element used to calculate offset
+-* @param offset Additional offset
+ */
+
+import { scrollTo } from 'seamless-scroll-polyfill';
+
+export default (
+  node: HTMLElement,
+  baseElement: HTMLElement,
+  offset: number
+) => {
+  scrollTo(window, {
+    behavior: 'smooth',
+    top:
+      node.getBoundingClientRect().top -
+      baseElement.getBoundingClientRect().top -
+      offset,
+  });
+};