@player-ui/auto-scroll-manager-plugin-react 0.7.4-next.4 → 0.7.5--canary.434.14868

package/types/plugin.d.ts

@@ -0,0 +1,42 @@
+import type { ReactPlayer, ReactPlayerPlugin } from "@player-ui/react";
+import type { Player } from "@player-ui/react";
+export declare enum ScrollType {
+    ValidationError = 0,
+    FirstAppearance = 1,
+    Unknown = 2
+}
+export interface AutoScrollManagerConfig {
+    /** Config to auto-scroll on load */
+    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 */
+export declare class AutoScrollManagerPlugin implements ReactPlayerPlugin {
+    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;
+    /** 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;
+    constructor(config: AutoScrollManagerConfig);
+    getFirstScrollableElement(idList: Set<string>, type: ScrollType): string;
+    calculateScroll(scrollableElements: Map<ScrollType, Set<string>>): string;
+    apply(player: Player): void;
+    applyReact(reactPlayer: ReactPlayer): void;
+}
+//# sourceMappingURL=plugin.d.ts.map

package/types/scrollIntoViewWithOffset.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Scroll to the given element
+-* @param node Element to scroll to
+-* @param baseElement Container element used to calculate offset
+-* @param offset Additional offset
+ */
+declare const _default: (node: HTMLElement, baseElement: HTMLElement, offset: number) => void;
+export default _default;
+//# sourceMappingURL=scrollIntoViewWithOffset.d.ts.map

package/dist/index.cjs.js

@@ -1,156 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-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 scrollIntoViewWithOffset = (node, baseElement, offset) => {
-  seamlessScrollPolyfill.scrollTo(window, {
-    behavior: "smooth",
-    top: node.getBoundingClientRect().top - baseElement.getBoundingClientRect().top - offset
-  });
-};
-
-const AutoScrollManagerContext = React__default["default"].createContext({ register: () => {
-} });
-const useRegisterAsScrollable = () => {
-  const { register } = React__default["default"].useContext(AutoScrollManagerContext);
-  return register;
-};
-const AutoScrollProvider = ({
-  getElementToScrollTo,
-  getBaseElement,
-  offset,
-  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) {
-      scrollIntoViewWithOffset(node, getBaseElement() || document.body, offset);
-    }
-  });
-  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, _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 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 !== void 0 && (epos + ypos < highestElement.ypos || highestElement.id === "")) {
-        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 = [];
-          window.scroll(0, 0);
-        });
-        flow.hooks.skipTransition.intercept({
-          call: () => {
-            this.failedNavigation = true;
-          }
-        });
-      });
-    });
-  }
-  applyReact(reactPlayer) {
-    reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
-      return () => {
-        const { scrollFn, getBaseElement, offset } = this;
-        return /* @__PURE__ */ React__default["default"].createElement(AutoScrollProvider, {
-          getElementToScrollTo: scrollFn,
-          getBaseElement,
-          offset
-        }, /* @__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

@@ -1,69 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { ReactPlayerPlugin, ReactPlayer } 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;
-    /** 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  */
-    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, getBaseElement, offset, 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;
-    /** 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 {
-    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;
-    /** 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;
-    constructor(config: AutoScrollManagerConfig);
-    getFirstScrollableElement(idList: Set<string>, type: ScrollType): string;
-    calculateScroll(scrollableElements: Map<ScrollType, Set<string>>): string;
-    apply(player: Player): void;
-    applyReact(reactPlayer: ReactPlayer): void;
-}
-
-export { AutoScrollManagerConfig, AutoScrollManagerContext, AutoScrollManagerPlugin, AutoScrollProvider, AutoScrollProviderProps, RegisterData, ScrollFunction, ScrollType, useRegisterAsScrollable };