@player-ui/auto-scroll-manager-plugin-react 0.0.1-next.1

package/dist/index.cjs.js

@@ -0,0 +1,142 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var scrollIntoView = require('smooth-scroll-into-view-if-needed');
+
+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);
+
+const AutoScrollManagerContext = React__default["default"].createContext({ register: () => {
+} });
+const useRegisterAsScrollable = () => {
+  const { register } = React__default["default"].useContext(AutoScrollManagerContext);
+  return register;
+};
+const AutoScrollProvider = ({
+  getElementToScrollTo,
+  children
+}) => {
+  const [scrollableMap, setScrollableMap] = React.useState(new Map());
+  const updateScrollableMap = (key, value) => {
+    setScrollableMap((prev) => {
+      var _a;
+      const nm = new Map(prev);
+      if (!nm.get(key)) {
+        nm.set(key, new Set());
+      }
+      (_a = nm.get(key)) == null ? void 0 : _a.add(value);
+      return nm;
+    });
+  };
+  const register = (data) => {
+    updateScrollableMap(data.type, data.ref);
+  };
+  React.useEffect(() => {
+    const node = document.getElementById(getElementToScrollTo(scrollableMap));
+    if (node) {
+      scrollIntoView__default["default"](node, {
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(AutoScrollManagerContext.Provider, {
+    value: { register }
+  }, children);
+};
+
+exports.ScrollType = void 0;
+(function(ScrollType2) {
+  ScrollType2[ScrollType2["ValidationError"] = 0] = "ValidationError";
+  ScrollType2[ScrollType2["FirstAppearance"] = 1] = "FirstAppearance";
+  ScrollType2[ScrollType2["Unknown"] = 2] = "Unknown";
+})(exports.ScrollType || (exports.ScrollType = {}));
+class AutoScrollManagerPlugin {
+  constructor(config) {
+    this.name = "auto-scroll-manager";
+    var _a, _b;
+    this.autoScrollOnLoad = (_a = config.autoScrollOnLoad) != null ? _a : false;
+    this.autoFocusOnErrorField = (_b = config.autoFocusOnErrorField) != null ? _b : false;
+    this.initialRender = false;
+    this.failedNavigation = false;
+    this.alreadyScrolledTo = [];
+    this.scrollFn = this.calculateScroll.bind(this);
+  }
+  getFirstScrollableElement(idList, type) {
+    const highestElement = { id: "", ypos: 0 };
+    const ypos = window.scrollY;
+    idList.forEach((id) => {
+      const element = document.getElementById(id);
+      if (type === 0 && (element == null ? void 0 : element.getAttribute("aria-invalid")) === "false") {
+        return;
+      }
+      if (type === 1) {
+        if (this.alreadyScrolledTo.indexOf(id) !== -1) {
+          return;
+        }
+        this.alreadyScrolledTo.push(id);
+      }
+      const epos = element == null ? void 0 : element.getBoundingClientRect().top;
+      if (epos && (epos + ypos > highestElement.ypos || highestElement.ypos === 0)) {
+        highestElement.id = id;
+        highestElement.ypos = ypos - epos;
+      }
+    });
+    return highestElement.id;
+  }
+  calculateScroll(scrollableElements) {
+    let currentScroll = 1;
+    if (this.initialRender) {
+      if (this.autoScrollOnLoad) {
+        currentScroll = 0;
+      }
+      this.initialRender = false;
+    } else if (this.failedNavigation) {
+      if (this.autoFocusOnErrorField) {
+        currentScroll = 0;
+      }
+      this.failedNavigation = false;
+    }
+    const elementList = scrollableElements.get(currentScroll);
+    if (elementList) {
+      const element = this.getFirstScrollableElement(elementList, currentScroll);
+      return element != null ? element : "";
+    }
+    return "";
+  }
+  apply(player) {
+    player.hooks.flowController.tap(this.name, (fc) => {
+      fc.hooks.flow.tap(this.name, (flow) => {
+        flow.hooks.transition.tap(this.name, () => {
+          this.initialRender = true;
+          this.failedNavigation = false;
+          this.alreadyScrolledTo = [];
+        });
+        flow.hooks.beforeTransition.tap(this.name, (state) => {
+          this.failedNavigation = true;
+          return state;
+        });
+      });
+    });
+  }
+  applyWeb(webPlayer) {
+    webPlayer.hooks.webComponent.tap(this.name, (Comp) => {
+      return () => {
+        const { scrollFn } = this;
+        return /* @__PURE__ */ React__default["default"].createElement(AutoScrollProvider, {
+          getElementToScrollTo: scrollFn
+        }, /* @__PURE__ */ React__default["default"].createElement(Comp, null));
+      };
+    });
+  }
+}
+
+exports.AutoScrollManagerContext = AutoScrollManagerContext;
+exports.AutoScrollManagerPlugin = AutoScrollManagerPlugin;
+exports.AutoScrollProvider = AutoScrollProvider;
+exports.useRegisterAsScrollable = useRegisterAsScrollable;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+import React, { PropsWithChildren } from 'react';
+import { WebPlayerPlugin, WebPlayer } from '@player-ui/react';
+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;
+}
+interface RegisterData {
+    /** when to scroll to the target  */
+    type: ScrollType;
+    /** the html id to scroll to */
+    ref: string;
+}
+declare type ScrollFunction = (registerData: RegisterData) => void;
+declare const AutoScrollManagerContext: React.Context<{
+    /** function to register a scroll target */
+    register: ScrollFunction;
+}>;
+/** 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 enum ScrollType {
+    ValidationError = 0,
+    FirstAppearance = 1,
+    Unknown = 2
+}
+interface AutoScrollManagerConfig {
+    /** Config to auto-scroll on load */
+    autoScrollOnLoad?: boolean;
+    /** Config to auto-focus on an error */
+    autoFocusOnErrorField?: boolean;
+}
+/** A plugin to manage scrolling behavior */
+declare class AutoScrollManagerPlugin implements WebPlayerPlugin {
+    name: string;
+    /** Toggles if we should auto scroll to to the first failed validation on page load */
+    private autoScrollOnLoad;
+    /** Toggles if we should auto scroll to the first failed validation on navigation failure */
+    private autoFocusOnErrorField;
+    /** tracks if its the initial page render */
+    private initialRender;
+    /** tracks if the navigation failed */
+    private failedNavigation;
+    /** map of scroll type to set of ids that are registered under that type */
+    private alreadyScrolledTo;
+    private scrollFn;
+    constructor(config: AutoScrollManagerConfig);
+    getFirstScrollableElement(idList: Set<string>, type: ScrollType): string;
+    calculateScroll(scrollableElements: Map<ScrollType, Set<string>>): string;
+    apply(player: Player): void;
+    applyWeb(webPlayer: WebPlayer): void;
+}
+
+export { AutoScrollManagerConfig, AutoScrollManagerContext, AutoScrollManagerPlugin, AutoScrollProvider, AutoScrollProviderProps, RegisterData, ScrollFunction, ScrollType, useRegisterAsScrollable };

package/dist/index.esm.js

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import scrollIntoView from 'smooth-scroll-into-view-if-needed';
+
+const AutoScrollManagerContext = React.createContext({ register: () => {
+} });
+const useRegisterAsScrollable = () => {
+  const { register } = React.useContext(AutoScrollManagerContext);
+  return register;
+};
+const AutoScrollProvider = ({
+  getElementToScrollTo,
+  children
+}) => {
+  const [scrollableMap, setScrollableMap] = useState(new Map());
+  const updateScrollableMap = (key, value) => {
+    setScrollableMap((prev) => {
+      var _a;
+      const nm = new Map(prev);
+      if (!nm.get(key)) {
+        nm.set(key, new Set());
+      }
+      (_a = nm.get(key)) == null ? void 0 : _a.add(value);
+      return nm;
+    });
+  };
+  const register = (data) => {
+    updateScrollableMap(data.type, data.ref);
+  };
+  useEffect(() => {
+    const node = document.getElementById(getElementToScrollTo(scrollableMap));
+    if (node) {
+      scrollIntoView(node, {
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+  });
+  return /* @__PURE__ */ React.createElement(AutoScrollManagerContext.Provider, {
+    value: { register }
+  }, children);
+};
+
+var ScrollType;
+(function(ScrollType2) {
+  ScrollType2[ScrollType2["ValidationError"] = 0] = "ValidationError";
+  ScrollType2[ScrollType2["FirstAppearance"] = 1] = "FirstAppearance";
+  ScrollType2[ScrollType2["Unknown"] = 2] = "Unknown";
+})(ScrollType || (ScrollType = {}));
+class AutoScrollManagerPlugin {
+  constructor(config) {
+    this.name = "auto-scroll-manager";
+    var _a, _b;
+    this.autoScrollOnLoad = (_a = config.autoScrollOnLoad) != null ? _a : false;
+    this.autoFocusOnErrorField = (_b = config.autoFocusOnErrorField) != null ? _b : false;
+    this.initialRender = false;
+    this.failedNavigation = false;
+    this.alreadyScrolledTo = [];
+    this.scrollFn = this.calculateScroll.bind(this);
+  }
+  getFirstScrollableElement(idList, type) {
+    const highestElement = { id: "", ypos: 0 };
+    const ypos = window.scrollY;
+    idList.forEach((id) => {
+      const element = document.getElementById(id);
+      if (type === 0 && (element == null ? void 0 : element.getAttribute("aria-invalid")) === "false") {
+        return;
+      }
+      if (type === 1) {
+        if (this.alreadyScrolledTo.indexOf(id) !== -1) {
+          return;
+        }
+        this.alreadyScrolledTo.push(id);
+      }
+      const epos = element == null ? void 0 : element.getBoundingClientRect().top;
+      if (epos && (epos + ypos > highestElement.ypos || highestElement.ypos === 0)) {
+        highestElement.id = id;
+        highestElement.ypos = ypos - epos;
+      }
+    });
+    return highestElement.id;
+  }
+  calculateScroll(scrollableElements) {
+    let currentScroll = 1;
+    if (this.initialRender) {
+      if (this.autoScrollOnLoad) {
+        currentScroll = 0;
+      }
+      this.initialRender = false;
+    } else if (this.failedNavigation) {
+      if (this.autoFocusOnErrorField) {
+        currentScroll = 0;
+      }
+      this.failedNavigation = false;
+    }
+    const elementList = scrollableElements.get(currentScroll);
+    if (elementList) {
+      const element = this.getFirstScrollableElement(elementList, currentScroll);
+      return element != null ? element : "";
+    }
+    return "";
+  }
+  apply(player) {
+    player.hooks.flowController.tap(this.name, (fc) => {
+      fc.hooks.flow.tap(this.name, (flow) => {
+        flow.hooks.transition.tap(this.name, () => {
+          this.initialRender = true;
+          this.failedNavigation = false;
+          this.alreadyScrolledTo = [];
+        });
+        flow.hooks.beforeTransition.tap(this.name, (state) => {
+          this.failedNavigation = true;
+          return state;
+        });
+      });
+    });
+  }
+  applyWeb(webPlayer) {
+    webPlayer.hooks.webComponent.tap(this.name, (Comp) => {
+      return () => {
+        const { scrollFn } = this;
+        return /* @__PURE__ */ React.createElement(AutoScrollProvider, {
+          getElementToScrollTo: scrollFn
+        }, /* @__PURE__ */ React.createElement(Comp, null));
+      };
+    });
+  }
+}
+
+export { AutoScrollManagerContext, AutoScrollManagerPlugin, AutoScrollProvider, ScrollType, useRegisterAsScrollable };
+//# sourceMappingURL=index.esm.js.map

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@player-ui/auto-scroll-manager-plugin-react",
+  "version": "0.0.1-next.1",
+  "private": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "peerDependencies": {
+    "@player-ui/binding-grammar": "0.0.1-next.1"
+  },
+  "dependencies": {
+    "smooth-scroll-into-view-if-needed": "1.1.32",
+    "@babel/runtime": "7.15.4"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts"
+}

package/src/hooks.tsx

@@ -0,0 +1,83 @@
+import type { PropsWithChildren } from 'react';
+import React, { useEffect, useState } from 'react';
+import scrollIntoView from 'smooth-scroll-into-view-if-needed';
+import type { ScrollType } from './index';
+
+export interface AutoScrollProviderProps {
+  /** Return the element to scroll to based on the registered types */
+  getElementToScrollTo: (
+    scrollableElements: Map<ScrollType, Set<string>>
+  ) => string;
+}
+
+export interface RegisterData {
+  /** when to scroll to the target  */
+  type: ScrollType;
+
+  /** the html id to scroll to */
+  ref: string;
+}
+
+export type ScrollFunction = (registerData: RegisterData) => void;
+
+export const AutoScrollManagerContext = React.createContext<{
+  /** function to register a scroll target */
+  register: ScrollFunction;
+}>({ register: () => {} });
+
+/** hook to register as a scroll target */
+export const useRegisterAsScrollable = (): ScrollFunction => {
+  const { register } = React.useContext(AutoScrollManagerContext);
+
+  return register;
+};
+
+/** Component to handle scrolling */
+export const AutoScrollProvider = ({
+  getElementToScrollTo,
+  children,
+}: PropsWithChildren<AutoScrollProviderProps>) => {
+  // Tracker for what elements are registered to be scroll targets
+  // Key is the type (initial, validation, appear)
+  // Value is a set of target ids
+  const [scrollableMap, setScrollableMap] = useState<
+    Map<ScrollType, Set<string>>
+  >(new Map());
+
+  /** Add a new entry as a scroll target */
+  const updateScrollableMap = (key: ScrollType, value: string) => {
+    setScrollableMap((prev) => {
+      const nm = new Map(prev);
+
+      if (!nm.get(key)) {
+        nm.set(key, new Set());
+      }
+
+      nm.get(key)?.add(value);
+
+      return nm;
+    });
+  };
+
+  /** register a new scroll target */
+  const register: ScrollFunction = (data) => {
+    updateScrollableMap(data.type, data.ref);
+  };
+
+  useEffect(() => {
+    const node = document.getElementById(getElementToScrollTo(scrollableMap));
+
+    if (node) {
+      scrollIntoView(node, {
+        block: 'nearest',
+        inline: 'nearest',
+      });
+    }
+  });
+
+  return (
+    <AutoScrollManagerContext.Provider value={{ register }}>
+      {children}
+    </AutoScrollManagerContext.Provider>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,2 @@
+export * from './hooks';
+export * from './plugin';

package/src/plugin.tsx

@@ -0,0 +1,153 @@
+import type { WebPlayer, WebPlayerPlugin } from '@player-ui/react';
+import type { Player } from '@player-ui/player';
+import React from 'react';
+import { AutoScrollProvider } from './hooks';
+
+export enum ScrollType {
+  ValidationError,
+  FirstAppearance,
+  Unknown,
+}
+
+export interface AutoScrollManagerConfig {
+  /** Config to auto-scroll on load */
+  autoScrollOnLoad?: boolean;
+  /** Config to auto-focus on an error */
+  autoFocusOnErrorField?: boolean;
+}
+
+/** A plugin to manage scrolling behavior */
+export class AutoScrollManagerPlugin implements WebPlayerPlugin {
+  name = 'auto-scroll-manager';
+
+  /** Toggles if we should auto scroll to to the first failed validation on page load */
+  private autoScrollOnLoad: boolean;
+
+  /** Toggles if we should auto scroll to the first failed validation on navigation failure */
+  private autoFocusOnErrorField: boolean;
+
+  /** tracks if its the initial page render */
+  private initialRender: boolean;
+
+  /** tracks if the navigation failed */
+  private failedNavigation: boolean;
+
+  /** map of scroll type to set of ids that are registered under that type */
+  private alreadyScrolledTo: Array<string>;
+  private scrollFn: (
+    scrollableElements: Map<ScrollType, Set<string>>
+  ) => string;
+
+  constructor(config: AutoScrollManagerConfig) {
+    this.autoScrollOnLoad = config.autoScrollOnLoad ?? false;
+    this.autoFocusOnErrorField = config.autoFocusOnErrorField ?? false;
+    this.initialRender = false;
+    this.failedNavigation = false;
+    this.alreadyScrolledTo = [];
+    this.scrollFn = this.calculateScroll.bind(this);
+  }
+
+  getFirstScrollableElement(idList: Set<string>, type: ScrollType) {
+    const highestElement = { id: '', ypos: 0 };
+    const ypos = window.scrollY;
+    idList.forEach((id) => {
+      const element = document.getElementById(id);
+
+      // if we are looking at validation errors, make sure the element is invalid
+      if (
+        type === ScrollType.ValidationError &&
+        element?.getAttribute('aria-invalid') === 'false'
+      ) {
+        return;
+      }
+
+      // if we are just looking at elements that just appeared, make sure we haven't
+      // scrolled to them before
+      if (type === ScrollType.FirstAppearance) {
+        if (this.alreadyScrolledTo.indexOf(id) !== -1) {
+          return;
+        }
+
+        this.alreadyScrolledTo.push(id);
+      }
+
+      const epos = element?.getBoundingClientRect().top;
+
+      if (
+        epos &&
+        (epos + ypos > highestElement.ypos || highestElement.ypos === 0)
+      ) {
+        highestElement.id = id;
+        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;
+      }
+
+      this.initialRender = false;
+    } else if (this.failedNavigation) {
+      if (this.autoFocusOnErrorField) {
+        currentScroll = ScrollType.ValidationError;
+      }
+
+      this.failedNavigation = false;
+    }
+
+    const elementList = scrollableElements.get(currentScroll);
+
+    if (elementList) {
+      const element = this.getFirstScrollableElement(
+        elementList,
+        currentScroll
+      );
+
+      return element ?? '';
+    }
+
+    return '';
+  }
+
+  // Hooks into player flow to determine what scroll targets need to be evaluated at specific lifecycle points
+  apply(player: Player) {
+    player.hooks.flowController.tap(this.name, (fc) => {
+      fc.hooks.flow.tap(this.name, (flow) => {
+        flow.hooks.transition.tap(this.name, () => {
+          // Reset Everything
+          this.initialRender = true;
+          this.failedNavigation = false;
+          this.alreadyScrolledTo = [];
+        });
+        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;
+        });
+      });
+    });
+  }
+
+  applyWeb(webPlayer: WebPlayer) {
+    webPlayer.hooks.webComponent.tap(this.name, (Comp) => {
+      return () => {
+        const { scrollFn } = this;
+
+        return (
+          <AutoScrollProvider getElementToScrollTo={scrollFn}>
+            <Comp />
+          </AutoScrollProvider>
+        );
+      };
+    });
+  }
+}