@player-ui/auto-scroll-manager-plugin-react 0.15.1-next.2 → 0.15.1-next.4

package/dist/cjs/index.cjs

@@ -61,9 +61,13 @@ var AutoScrollProvider = ({
   getElementToScrollTo,
   getBaseElement,
   offset,
+  onMount,
   children
 }) => {
   const [scrollableMap, setScrollableMap] = (0, import_react.useState)(/* @__PURE__ */ new Map());
+  (0, import_react.useEffect)(() => {
+    onMount?.(() => setScrollableMap(/* @__PURE__ */ new Map()));
+  }, []);
   const updateScrollableMap = (key, value) => {
     setScrollableMap((prev) => {
       const nm = new Map(prev);
@@ -82,7 +86,7 @@ var AutoScrollProvider = ({
     if (node) {
       scrollIntoViewWithOffset(node, getBaseElement() || document.body, offset);
     }
-  });
+  }, [scrollableMap]);
   return /* @__PURE__ */ import_react.default.createElement(AutoScrollManagerContext.Provider, { value: { register } }, children);
 };
 
@@ -104,6 +108,8 @@ var AutoScrollManagerPlugin = class {
     this.initialRender = false;
     this.failedNavigation = false;
     this.alreadyScrolledTo = [];
+    this.clearScrollableMap = () => {
+    };
     this.scrollFn = this.calculateScroll.bind(this);
   }
   getFirstScrollableElement(idList, type) {
@@ -162,6 +168,7 @@ var AutoScrollManagerPlugin = class {
           this.initialRender = true;
           this.failedNavigation = false;
           this.alreadyScrolledTo = [];
+          this.clearScrollableMap();
           window.scroll(0, 0);
         });
         flow.hooks.skipTransition.intercept({
@@ -175,13 +182,19 @@ var AutoScrollManagerPlugin = class {
   applyReact(reactPlayer) {
     reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       const { scrollFn, getBaseElement, offset } = this;
+      const setScrollableMapClearer = (clear) => {
+        this.clearScrollableMap = clear;
+      };
       function AutoScrollManagerComponent() {
         return /* @__PURE__ */ import_react2.default.createElement(
           AutoScrollProvider,
           {
             getElementToScrollTo: scrollFn,
             getBaseElement,
-            offset
+            offset,
+            onMount: (clear) => {
+              setScrollableMapClearer(clear);
+            }
           },
           /* @__PURE__ */ import_react2.default.createElement(Comp, null)
         );

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/index.tsx","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/hooks.tsx","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/scrollIntoViewWithOffset.ts","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/plugin.tsx"],"sourcesContent":["export * from \"./hooks\";\nexport * from \"./plugin\";\n","import type { PropsWithChildren } from \"react\";\nimport React, { useEffect, useState } from \"react\";\nimport { scrollIntoViewWithOffset } from \"./scrollIntoViewWithOffset\";\nimport type { ScrollType } from \"./index\";\n\nexport interface AutoScrollProviderProps {\n  /** Return the element to scroll to based on the registered types */\n  getElementToScrollTo: (\n    scrollableElements: Map<ScrollType, Set<string>>,\n  ) => string;\n  /** Optional function to get container element, which is used for calculating offset (default: document.body) */\n  getBaseElement: () => HTMLElement | undefined | null;\n  /** Additional offset to be used (default: 0) */\n  offset: number;\n}\n\nexport interface RegisterData {\n  /** when to scroll to the target  */\n  type: ScrollType;\n\n  /** the html id to scroll to */\n  ref: string;\n}\n\nexport type ScrollFunction = (registerData: RegisterData) => void;\n\nexport const AutoScrollManagerContext = React.createContext<{\n  /** function to register a scroll target */\n  register: ScrollFunction;\n}>({ register: () => {} });\n\n/** hook to register as a scroll target */\nexport const useRegisterAsScrollable = (): ScrollFunction => {\n  const { register } = React.useContext(AutoScrollManagerContext);\n\n  return register;\n};\n\n/** Component to handle scrolling */\nexport const AutoScrollProvider = ({\n  getElementToScrollTo,\n  getBaseElement,\n  offset,\n  children,\n}: PropsWithChildren<AutoScrollProviderProps>) => {\n  // Tracker for what elements are registered to be scroll targets\n  // Key is the type (initial, validation, appear)\n  // Value is a set of target ids\n  const [scrollableMap, setScrollableMap] = useState<\n    Map<ScrollType, Set<string>>\n  >(new Map());\n\n  /** Add a new entry as a scroll target */\n  const updateScrollableMap = (key: ScrollType, value: string) => {\n    setScrollableMap((prev) => {\n      const nm = new Map(prev);\n\n      if (!nm.get(key)) {\n        nm.set(key, new Set());\n      }\n\n      nm.get(key)?.add(value);\n\n      return nm;\n    });\n  };\n\n  /** register a new scroll target */\n  const register: ScrollFunction = (data) => {\n    updateScrollableMap(data.type, data.ref);\n  };\n\n  useEffect(() => {\n    const node = document.getElementById(getElementToScrollTo(scrollableMap));\n\n    if (node) {\n      scrollIntoViewWithOffset(node, getBaseElement() || document.body, offset);\n    }\n  });\n\n  return (\n    <AutoScrollManagerContext.Provider value={{ register }}>\n      {children}\n    </AutoScrollManagerContext.Provider>\n  );\n};\n","import { scrollTo } from \"seamless-scroll-polyfill\";\n\n/**\n * Scroll to the given element with an offset\n * @param node Element to scroll to\n * @param baseElement Container element used to calculate offset\n * @param offset Additional offset\n */\nexport function scrollIntoViewWithOffset(\n  node: HTMLElement,\n  baseElement: HTMLElement,\n  offset: number,\n) {\n  scrollTo(window, {\n    behavior: \"smooth\",\n    top:\n      node.getBoundingClientRect().top -\n      baseElement.getBoundingClientRect().top -\n      offset,\n  });\n}\n","import type { ReactPlayer, ReactPlayerPlugin } from \"@player-ui/react\";\nimport type { Player } from \"@player-ui/react\";\nimport React from \"react\";\nimport { AutoScrollProvider } from \"./hooks\";\n\nexport enum ScrollType {\n  ValidationError,\n  FirstAppearance,\n  Unknown,\n}\n\nexport interface AutoScrollManagerConfig {\n  /** Config to auto-scroll on load */\n  autoScrollOnLoad?: boolean;\n  /** Config to auto-focus on an error */\n  autoFocusOnErrorField?: boolean;\n  /** Optional function to get container element, which is used for calculating offset (default: document.body) */\n  getBaseElement?: () => HTMLElement | undefined | null;\n  /** Additional offset to be used (default: 0) */\n  offset?: number;\n}\n\n/** A plugin to manage scrolling behavior */\nexport class AutoScrollManagerPlugin implements ReactPlayerPlugin {\n  name = \"auto-scroll-manager\";\n\n  /** Toggles if we should auto scroll to to the first failed validation on page load */\n  private autoScrollOnLoad: boolean;\n\n  /** Toggles if we should auto scroll to the first failed validation on navigation failure */\n  private autoFocusOnErrorField: boolean;\n\n  /** tracks if its the initial page render */\n  private initialRender: boolean;\n\n  /** tracks if the navigation failed */\n  private failedNavigation: boolean;\n\n  /** function to return the base of the scrollable area */\n  private getBaseElement: () => HTMLElement | undefined | null;\n\n  /** static offset */\n  private offset: number;\n\n  /** map of scroll type to set of ids that are registered under that type */\n  private alreadyScrolledTo: Array<string>;\n  private scrollFn: (\n    scrollableElements: Map<ScrollType, Set<string>>,\n  ) => string;\n\n  constructor(config: AutoScrollManagerConfig) {\n    this.autoScrollOnLoad = config.autoScrollOnLoad ?? false;\n    this.autoFocusOnErrorField = config.autoFocusOnErrorField ?? false;\n    this.getBaseElement = config.getBaseElement ?? (() => null);\n    this.offset = config.offset ?? 0;\n    this.initialRender = false;\n    this.failedNavigation = false;\n    this.alreadyScrolledTo = [];\n    this.scrollFn = this.calculateScroll.bind(this);\n  }\n\n  getFirstScrollableElement(idList: Set<string>, type: ScrollType) {\n    const highestElement = {\n      id: \"\",\n      ypos: 0,\n    };\n    const ypos = window.scrollY;\n    idList.forEach((id) => {\n      const element = document.getElementById(id);\n\n      // if we are looking at validation errors, make sure the element is invalid\n      if (\n        type === ScrollType.ValidationError &&\n        element?.getAttribute(\"aria-invalid\") === \"false\"\n      ) {\n        return;\n      }\n\n      // if we are just looking at elements that just appeared, make sure we haven't\n      // scrolled to them before\n      if (type === ScrollType.FirstAppearance) {\n        if (this.alreadyScrolledTo.indexOf(id) !== -1) {\n          return;\n        }\n\n        this.alreadyScrolledTo.push(id);\n      }\n\n      const epos = element?.getBoundingClientRect().top;\n      if (\n        epos !== undefined &&\n        (epos + ypos < highestElement.ypos || highestElement.id === \"\")\n      ) {\n        highestElement.id = id;\n        highestElement.ypos = ypos + epos;\n      }\n    });\n    return highestElement.id;\n  }\n\n  calculateScroll(scrollableElements: Map<ScrollType, Set<string>>) {\n    let currentScroll = ScrollType.FirstAppearance;\n    if (this.initialRender) {\n      if (this.autoScrollOnLoad) {\n        currentScroll = ScrollType.ValidationError;\n      }\n\n      this.initialRender = false;\n    } else if (this.failedNavigation) {\n      if (this.autoFocusOnErrorField) {\n        currentScroll = ScrollType.ValidationError;\n      }\n\n      this.failedNavigation = false;\n    }\n\n    const elementList = scrollableElements.get(currentScroll);\n    if (elementList) {\n      const element = this.getFirstScrollableElement(\n        elementList,\n        currentScroll,\n      );\n      return element ?? \"\";\n    }\n\n    return \"\";\n  }\n\n  // Hooks into player flow to determine what scroll targets need to be evaluated at specific lifecycle points\n  apply(player: Player) {\n    player.hooks.flowController.tap(this.name, (fc) => {\n      fc.hooks.flow.tap(this.name, (flow) => {\n        flow.hooks.transition.tap(this.name, () => {\n          // Reset Everything\n          this.initialRender = true;\n          this.failedNavigation = false;\n          this.alreadyScrolledTo = [];\n          // Reset scroll position for new view\n          window.scroll(0, 0);\n        });\n        flow.hooks.skipTransition.intercept({\n          call: () => {\n            this.failedNavigation = true;\n          },\n        });\n      });\n    });\n  }\n\n  applyReact(reactPlayer: ReactPlayer) {\n    reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {\n      const { scrollFn, getBaseElement, offset } = this;\n\n      function AutoScrollManagerComponent() {\n        return (\n          <AutoScrollProvider\n            getElementToScrollTo={scrollFn}\n            getBaseElement={getBaseElement}\n            offset={offset}\n          >\n            <Comp />\n          </AutoScrollProvider>\n        );\n      }\n\n      return AutoScrollManagerComponent;\n    });\n  }\n}\n"],"mappings":"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","names":["React","import_react","ScrollType","React"]}
+{"version":3,"sources":["../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/index.tsx","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/hooks.tsx","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/scrollIntoViewWithOffset.ts","../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/plugin.tsx"],"sourcesContent":["export * from \"./hooks\";\nexport * from \"./plugin\";\n","import type { PropsWithChildren } from \"react\";\nimport React, { useEffect, useState } from \"react\";\nimport { scrollIntoViewWithOffset } from \"./scrollIntoViewWithOffset\";\nimport type { ScrollType } from \"./index\";\n\nexport interface AutoScrollProviderProps {\n  /** Return the element to scroll to based on the registered types */\n  getElementToScrollTo: (\n    scrollableElements: Map<ScrollType, Set<string>>,\n  ) => string;\n  /** Optional function to get container element, which is used for calculating offset (default: document.body) */\n  getBaseElement: () => HTMLElement | undefined | null;\n  /** Additional offset to be used (default: 0) */\n  offset: number;\n  /** Called on mount with a function that clears all registered scroll targets */\n  onMount?: (clearScrollableMap: () => void) => void;\n}\n\nexport interface RegisterData {\n  /** when to scroll to the target  */\n  type: ScrollType;\n\n  /** the html id to scroll to */\n  ref: string;\n}\n\nexport type ScrollFunction = (registerData: RegisterData) => void;\n\nexport const AutoScrollManagerContext = React.createContext<{\n  /** function to register a scroll target */\n  register: ScrollFunction;\n}>({ register: () => {} });\n\n/** hook to register as a scroll target */\nexport const useRegisterAsScrollable = (): ScrollFunction => {\n  const { register } = React.useContext(AutoScrollManagerContext);\n\n  return register;\n};\n\n/** Component to handle scrolling */\nexport const AutoScrollProvider = ({\n  getElementToScrollTo,\n  getBaseElement,\n  offset,\n  onMount,\n  children,\n}: PropsWithChildren<AutoScrollProviderProps>) => {\n  // Tracker for what elements are registered to be scroll targets\n  // Key is the type (initial, validation, appear)\n  // Value is a set of target ids\n  const [scrollableMap, setScrollableMap] = useState<\n    Map<ScrollType, Set<string>>\n  >(new Map());\n\n  useEffect(() => {\n    onMount?.(() => setScrollableMap(new Map()));\n  }, []);\n\n  /** Add a new entry as a scroll target */\n  const updateScrollableMap = (key: ScrollType, value: string) => {\n    setScrollableMap((prev) => {\n      const nm = new Map(prev);\n\n      if (!nm.get(key)) {\n        nm.set(key, new Set());\n      }\n\n      nm.get(key)?.add(value);\n\n      return nm;\n    });\n  };\n\n  /** register a new scroll target */\n  const register: ScrollFunction = (data) => {\n    updateScrollableMap(data.type, data.ref);\n  };\n\n  useEffect(() => {\n    const node = document.getElementById(getElementToScrollTo(scrollableMap));\n\n    if (node) {\n      scrollIntoViewWithOffset(node, getBaseElement() || document.body, offset);\n    }\n  }, [scrollableMap]);\n\n  return (\n    <AutoScrollManagerContext.Provider value={{ register }}>\n      {children}\n    </AutoScrollManagerContext.Provider>\n  );\n};\n","import { scrollTo } from \"seamless-scroll-polyfill\";\n\n/**\n * Scroll to the given element with an offset\n * @param node Element to scroll to\n * @param baseElement Container element used to calculate offset\n * @param offset Additional offset\n */\nexport function scrollIntoViewWithOffset(\n  node: HTMLElement,\n  baseElement: HTMLElement,\n  offset: number,\n) {\n  scrollTo(window, {\n    behavior: \"smooth\",\n    top:\n      node.getBoundingClientRect().top -\n      baseElement.getBoundingClientRect().top -\n      offset,\n  });\n}\n","import type { ReactPlayer, ReactPlayerPlugin } from \"@player-ui/react\";\nimport type { Player } from \"@player-ui/react\";\nimport React from \"react\";\nimport { AutoScrollProvider } from \"./hooks\";\n\nexport enum ScrollType {\n  ValidationError,\n  FirstAppearance,\n  Unknown,\n}\n\nexport interface AutoScrollManagerConfig {\n  /** Config to auto-scroll on load */\n  autoScrollOnLoad?: boolean;\n  /** Config to auto-focus on an error */\n  autoFocusOnErrorField?: boolean;\n  /** Optional function to get container element, which is used for calculating offset (default: document.body) */\n  getBaseElement?: () => HTMLElement | undefined | null;\n  /** Additional offset to be used (default: 0) */\n  offset?: number;\n}\n\n/** A plugin to manage scrolling behavior */\nexport class AutoScrollManagerPlugin implements ReactPlayerPlugin {\n  name = \"auto-scroll-manager\";\n\n  /** Toggles if we should auto scroll to to the first failed validation on page load */\n  private autoScrollOnLoad: boolean;\n\n  /** Toggles if we should auto scroll to the first failed validation on navigation failure */\n  private autoFocusOnErrorField: boolean;\n\n  /** tracks if its the initial page render */\n  private initialRender: boolean;\n\n  /** tracks if the navigation failed */\n  private failedNavigation: boolean;\n\n  /** function to return the base of the scrollable area */\n  private getBaseElement: () => HTMLElement | undefined | null;\n\n  /** static offset */\n  private offset: number;\n\n  /** clears scrollableMap in AutoScrollProvider — set when the provider mounts */\n  private clearScrollableMap: () => void;\n\n  /** map of scroll type to set of ids that are registered under that type */\n  private alreadyScrolledTo: Array<string>;\n  private scrollFn: (\n    scrollableElements: Map<ScrollType, Set<string>>,\n  ) => string;\n\n  constructor(config: AutoScrollManagerConfig) {\n    this.autoScrollOnLoad = config.autoScrollOnLoad ?? false;\n    this.autoFocusOnErrorField = config.autoFocusOnErrorField ?? false;\n    this.getBaseElement = config.getBaseElement ?? (() => null);\n    this.offset = config.offset ?? 0;\n    this.initialRender = false;\n    this.failedNavigation = false;\n    this.alreadyScrolledTo = [];\n    this.clearScrollableMap = () => {};\n    this.scrollFn = this.calculateScroll.bind(this);\n  }\n\n  getFirstScrollableElement(idList: Set<string>, type: ScrollType): string {\n    const highestElement = {\n      id: \"\",\n      ypos: 0,\n    };\n    const ypos = window.scrollY;\n    idList.forEach((id) => {\n      const element = document.getElementById(id);\n\n      // if we are looking at validation errors, make sure the element is invalid\n      if (\n        type === ScrollType.ValidationError &&\n        element?.getAttribute(\"aria-invalid\") === \"false\"\n      ) {\n        return;\n      }\n\n      // if we are just looking at elements that just appeared, make sure we haven't\n      // scrolled to them before\n      if (type === ScrollType.FirstAppearance) {\n        if (this.alreadyScrolledTo.indexOf(id) !== -1) {\n          return;\n        }\n\n        this.alreadyScrolledTo.push(id);\n      }\n\n      const epos = element?.getBoundingClientRect().top;\n      if (\n        epos !== undefined &&\n        (epos + ypos < highestElement.ypos || highestElement.id === \"\")\n      ) {\n        highestElement.id = id;\n        highestElement.ypos = ypos + epos;\n      }\n    });\n    return highestElement.id;\n  }\n\n  calculateScroll(scrollableElements: Map<ScrollType, Set<string>>): string {\n    let currentScroll = ScrollType.FirstAppearance;\n    if (this.initialRender) {\n      if (this.autoScrollOnLoad) {\n        currentScroll = ScrollType.ValidationError;\n      }\n\n      this.initialRender = false;\n    } else if (this.failedNavigation) {\n      if (this.autoFocusOnErrorField) {\n        currentScroll = ScrollType.ValidationError;\n      }\n\n      this.failedNavigation = false;\n    }\n\n    const elementList = scrollableElements.get(currentScroll);\n    if (elementList) {\n      const element = this.getFirstScrollableElement(\n        elementList,\n        currentScroll,\n      );\n      return element ?? \"\";\n    }\n\n    return \"\";\n  }\n\n  // Hooks into player flow to determine what scroll targets need to be evaluated at specific lifecycle points\n  apply(player: Player): void {\n    player.hooks.flowController.tap(this.name, (fc) => {\n      fc.hooks.flow.tap(this.name, (flow) => {\n        flow.hooks.transition.tap(this.name, () => {\n          // Reset Everything\n          this.initialRender = true;\n          this.failedNavigation = false;\n          this.alreadyScrolledTo = [];\n          this.clearScrollableMap();\n          // Reset scroll position for new view\n          window.scroll(0, 0);\n        });\n        flow.hooks.skipTransition.intercept({\n          call: () => {\n            this.failedNavigation = true;\n          },\n        });\n      });\n    });\n  }\n\n  applyReact(reactPlayer: ReactPlayer): void {\n    reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {\n      const { scrollFn, getBaseElement, offset } = this;\n      const setScrollableMapClearer = (clear: () => void) => {\n        this.clearScrollableMap = clear;\n      };\n\n      function AutoScrollManagerComponent() {\n        return (\n          <AutoScrollProvider\n            getElementToScrollTo={scrollFn}\n            getBaseElement={getBaseElement}\n            offset={offset}\n            onMount={(clear) => {\n              setScrollableMapClearer(clear);\n            }}\n          >\n            <Comp />\n          </AutoScrollProvider>\n        );\n      }\n\n      return AutoScrollManagerComponent;\n    });\n  }\n}\n"],"mappings":"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","names":["React","import_react","ScrollType","React"]}

package/dist/index.legacy-esm.js

@@ -21,9 +21,13 @@ var AutoScrollProvider = ({
   getElementToScrollTo,
   getBaseElement,
   offset,
+  onMount,
   children
 }) => {
   const [scrollableMap, setScrollableMap] = useState(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    onMount?.(() => setScrollableMap(/* @__PURE__ */ new Map()));
+  }, []);
   const updateScrollableMap = (key, value) => {
     setScrollableMap((prev) => {
       const nm = new Map(prev);
@@ -42,7 +46,7 @@ var AutoScrollProvider = ({
     if (node) {
       scrollIntoViewWithOffset(node, getBaseElement() || document.body, offset);
     }
-  });
+  }, [scrollableMap]);
   return /* @__PURE__ */ React.createElement(AutoScrollManagerContext.Provider, { value: { register } }, children);
 };
 
@@ -64,6 +68,8 @@ var AutoScrollManagerPlugin = class {
     this.initialRender = false;
     this.failedNavigation = false;
     this.alreadyScrolledTo = [];
+    this.clearScrollableMap = () => {
+    };
     this.scrollFn = this.calculateScroll.bind(this);
   }
   getFirstScrollableElement(idList, type) {
@@ -122,6 +128,7 @@ var AutoScrollManagerPlugin = class {
           this.initialRender = true;
           this.failedNavigation = false;
           this.alreadyScrolledTo = [];
+          this.clearScrollableMap();
           window.scroll(0, 0);
         });
         flow.hooks.skipTransition.intercept({
@@ -135,13 +142,19 @@ var AutoScrollManagerPlugin = class {
   applyReact(reactPlayer) {
     reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       const { scrollFn, getBaseElement, offset } = this;
+      const setScrollableMapClearer = (clear) => {
+        this.clearScrollableMap = clear;
+      };
       function AutoScrollManagerComponent() {
         return /* @__PURE__ */ React2.createElement(
           AutoScrollProvider,
           {
             getElementToScrollTo: scrollFn,
             getBaseElement,
-            offset
+            offset,
+            onMount: (clear) => {
+              setScrollableMapClearer(clear);
+            }
           },
           /* @__PURE__ */ React2.createElement(Comp, null)
         );

package/dist/index.mjs

@@ -21,9 +21,13 @@ var AutoScrollProvider = ({
   getElementToScrollTo,
   getBaseElement,
   offset,
+  onMount,
   children
 }) => {
   const [scrollableMap, setScrollableMap] = useState(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    onMount?.(() => setScrollableMap(/* @__PURE__ */ new Map()));
+  }, []);
   const updateScrollableMap = (key, value) => {
     setScrollableMap((prev) => {
       const nm = new Map(prev);
@@ -42,7 +46,7 @@ var AutoScrollProvider = ({
     if (node) {
       scrollIntoViewWithOffset(node, getBaseElement() || document.body, offset);
     }
-  });
+  }, [scrollableMap]);
   return /* @__PURE__ */ React.createElement(AutoScrollManagerContext.Provider, { value: { register } }, children);
 };
 
@@ -64,6 +68,8 @@ var AutoScrollManagerPlugin = class {
     this.initialRender = false;
     this.failedNavigation = false;
     this.alreadyScrolledTo = [];
+    this.clearScrollableMap = () => {
+    };
     this.scrollFn = this.calculateScroll.bind(this);
   }
   getFirstScrollableElement(idList, type) {
@@ -122,6 +128,7 @@ var AutoScrollManagerPlugin = class {
           this.initialRender = true;
           this.failedNavigation = false;
           this.alreadyScrolledTo = [];
+          this.clearScrollableMap();
           window.scroll(0, 0);
         });
         flow.hooks.skipTransition.intercept({
@@ -135,13 +142,19 @@ var AutoScrollManagerPlugin = class {
   applyReact(reactPlayer) {
     reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       const { scrollFn, getBaseElement, offset } = this;
+      const setScrollableMapClearer = (clear) => {
+        this.clearScrollableMap = clear;
+      };
       function AutoScrollManagerComponent() {
         return /* @__PURE__ */ React2.createElement(
           AutoScrollProvider,
           {
             getElementToScrollTo: scrollFn,
             getBaseElement,
-            offset
+            offset,
+            onMount: (clear) => {
+              setScrollableMapClearer(clear);
+            }
           },
           /* @__PURE__ */ React2.createElement(Comp, null)
         );

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/hooks.tsx","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/scrollIntoViewWithOffset.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/plugin.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React, { useEffect, useState } from \"react\";\nimport { scrollIntoViewWithOffset } from \"./scrollIntoViewWithOffset\";\nimport type { ScrollType } from \"./index\";\n\nexport interface AutoScrollProviderProps {\n  /** Return the element to scroll to based on the registered types */\n  getElementToScrollTo: (\n    scrollableElements: Map<ScrollType, Set<string>>,\n  ) => string;\n  /** Optional function to get container element, which is used for calculating offset (default: document.body) */\n  getBaseElement: () => HTMLElement | undefined | null;\n  /** Additional offset to be used (default: 0) */\n  offset: number;\n}\n\nexport interface RegisterData {\n  /** when to scroll to the target  */\n  type: ScrollType;\n\n  /** the html id to scroll to */\n  ref: string;\n}\n\nexport type ScrollFunction = (registerData: RegisterData) => void;\n\nexport const AutoScrollManagerContext = React.createContext<{\n  /** function to register a scroll target */\n  register: ScrollFunction;\n}>({ register: () => {} });\n\n/** hook to register as a scroll target */\nexport const useRegisterAsScrollable = (): ScrollFunction => {\n  const { register } = React.useContext(AutoScrollManagerContext);\n\n  return register;\n};\n\n/** Component to handle scrolling */\nexport const AutoScrollProvider = ({\n  getElementToScrollTo,\n  getBaseElement,\n  offset,\n  children,\n}: PropsWithChildren<AutoScrollProviderProps>) => {\n  // Tracker for what elements are registered to be scroll targets\n  // Key is the type (initial, validation, appear)\n  // Value is a set of target ids\n  const [scrollableMap, setScrollableMap] = useState<\n    Map<ScrollType, Set<string>>\n  >(new Map());\n\n  /** Add a new entry as a scroll target */\n  const updateScrollableMap = (key: ScrollType, value: string) => {\n    setScrollableMap((prev) => {\n      const nm = new Map(prev);\n\n      if (!nm.get(key)) {\n        nm.set(key, new Set());\n      }\n\n      nm.get(key)?.add(value);\n\n      return nm;\n    });\n  };\n\n  /** register a new scroll target */\n  const register: ScrollFunction = (data) => {\n    updateScrollableMap(data.type, data.ref);\n  };\n\n  useEffect(() => {\n    const node = document.getElementById(getElementToScrollTo(scrollableMap));\n\n    if (node) {\n      scrollIntoViewWithOffset(node, getBaseElement() || document.body, offset);\n    }\n  });\n\n  return (\n    <AutoScrollManagerContext.Provider value={{ register }}>\n      {children}\n    </AutoScrollManagerContext.Provider>\n  );\n};\n","import { scrollTo } from \"seamless-scroll-polyfill\";\n\n/**\n * Scroll to the given element with an offset\n * @param node Element to scroll to\n * @param baseElement Container element used to calculate offset\n * @param offset Additional offset\n */\nexport function scrollIntoViewWithOffset(\n  node: HTMLElement,\n  baseElement: HTMLElement,\n  offset: number,\n) {\n  scrollTo(window, {\n    behavior: \"smooth\",\n    top:\n      node.getBoundingClientRect().top -\n      baseElement.getBoundingClientRect().top -\n      offset,\n  });\n}\n","import type { ReactPlayer, ReactPlayerPlugin } from \"@player-ui/react\";\nimport type { Player } from \"@player-ui/react\";\nimport React from \"react\";\nimport { AutoScrollProvider } from \"./hooks\";\n\nexport enum ScrollType {\n  ValidationError,\n  FirstAppearance,\n  Unknown,\n}\n\nexport interface AutoScrollManagerConfig {\n  /** Config to auto-scroll on load */\n  autoScrollOnLoad?: boolean;\n  /** Config to auto-focus on an error */\n  autoFocusOnErrorField?: boolean;\n  /** Optional function to get container element, which is used for calculating offset (default: document.body) */\n  getBaseElement?: () => HTMLElement | undefined | null;\n  /** Additional offset to be used (default: 0) */\n  offset?: number;\n}\n\n/** A plugin to manage scrolling behavior */\nexport class AutoScrollManagerPlugin implements ReactPlayerPlugin {\n  name = \"auto-scroll-manager\";\n\n  /** Toggles if we should auto scroll to to the first failed validation on page load */\n  private autoScrollOnLoad: boolean;\n\n  /** Toggles if we should auto scroll to the first failed validation on navigation failure */\n  private autoFocusOnErrorField: boolean;\n\n  /** tracks if its the initial page render */\n  private initialRender: boolean;\n\n  /** tracks if the navigation failed */\n  private failedNavigation: boolean;\n\n  /** function to return the base of the scrollable area */\n  private getBaseElement: () => HTMLElement | undefined | null;\n\n  /** static offset */\n  private offset: number;\n\n  /** map of scroll type to set of ids that are registered under that type */\n  private alreadyScrolledTo: Array<string>;\n  private scrollFn: (\n    scrollableElements: Map<ScrollType, Set<string>>,\n  ) => string;\n\n  constructor(config: AutoScrollManagerConfig) {\n    this.autoScrollOnLoad = config.autoScrollOnLoad ?? false;\n    this.autoFocusOnErrorField = config.autoFocusOnErrorField ?? false;\n    this.getBaseElement = config.getBaseElement ?? (() => null);\n    this.offset = config.offset ?? 0;\n    this.initialRender = false;\n    this.failedNavigation = false;\n    this.alreadyScrolledTo = [];\n    this.scrollFn = this.calculateScroll.bind(this);\n  }\n\n  getFirstScrollableElement(idList: Set<string>, type: ScrollType) {\n    const highestElement = {\n      id: \"\",\n      ypos: 0,\n    };\n    const ypos = window.scrollY;\n    idList.forEach((id) => {\n      const element = document.getElementById(id);\n\n      // if we are looking at validation errors, make sure the element is invalid\n      if (\n        type === ScrollType.ValidationError &&\n        element?.getAttribute(\"aria-invalid\") === \"false\"\n      ) {\n        return;\n      }\n\n      // if we are just looking at elements that just appeared, make sure we haven't\n      // scrolled to them before\n      if (type === ScrollType.FirstAppearance) {\n        if (this.alreadyScrolledTo.indexOf(id) !== -1) {\n          return;\n        }\n\n        this.alreadyScrolledTo.push(id);\n      }\n\n      const epos = element?.getBoundingClientRect().top;\n      if (\n        epos !== undefined &&\n        (epos + ypos < highestElement.ypos || highestElement.id === \"\")\n      ) {\n        highestElement.id = id;\n        highestElement.ypos = ypos + epos;\n      }\n    });\n    return highestElement.id;\n  }\n\n  calculateScroll(scrollableElements: Map<ScrollType, Set<string>>) {\n    let currentScroll = ScrollType.FirstAppearance;\n    if (this.initialRender) {\n      if (this.autoScrollOnLoad) {\n        currentScroll = ScrollType.ValidationError;\n      }\n\n      this.initialRender = false;\n    } else if (this.failedNavigation) {\n      if (this.autoFocusOnErrorField) {\n        currentScroll = ScrollType.ValidationError;\n      }\n\n      this.failedNavigation = false;\n    }\n\n    const elementList = scrollableElements.get(currentScroll);\n    if (elementList) {\n      const element = this.getFirstScrollableElement(\n        elementList,\n        currentScroll,\n      );\n      return element ?? \"\";\n    }\n\n    return \"\";\n  }\n\n  // Hooks into player flow to determine what scroll targets need to be evaluated at specific lifecycle points\n  apply(player: Player) {\n    player.hooks.flowController.tap(this.name, (fc) => {\n      fc.hooks.flow.tap(this.name, (flow) => {\n        flow.hooks.transition.tap(this.name, () => {\n          // Reset Everything\n          this.initialRender = true;\n          this.failedNavigation = false;\n          this.alreadyScrolledTo = [];\n          // Reset scroll position for new view\n          window.scroll(0, 0);\n        });\n        flow.hooks.skipTransition.intercept({\n          call: () => {\n            this.failedNavigation = true;\n          },\n        });\n      });\n    });\n  }\n\n  applyReact(reactPlayer: ReactPlayer) {\n    reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {\n      const { scrollFn, getBaseElement, offset } = this;\n\n      function AutoScrollManagerComponent() {\n        return (\n          <AutoScrollProvider\n            getElementToScrollTo={scrollFn}\n            getBaseElement={getBaseElement}\n            offset={offset}\n          >\n            <Comp />\n          </AutoScrollProvider>\n        );\n      }\n\n      return AutoScrollManagerComponent;\n    });\n  }\n}\n"],"mappings":"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","names":["React","ScrollType","React"]}
+{"version":3,"sources":["../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/hooks.tsx","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/scrollIntoViewWithOffset.ts","../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/auto-scroll/react/src/plugin.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React, { useEffect, useState } from \"react\";\nimport { scrollIntoViewWithOffset } from \"./scrollIntoViewWithOffset\";\nimport type { ScrollType } from \"./index\";\n\nexport interface AutoScrollProviderProps {\n  /** Return the element to scroll to based on the registered types */\n  getElementToScrollTo: (\n    scrollableElements: Map<ScrollType, Set<string>>,\n  ) => string;\n  /** Optional function to get container element, which is used for calculating offset (default: document.body) */\n  getBaseElement: () => HTMLElement | undefined | null;\n  /** Additional offset to be used (default: 0) */\n  offset: number;\n  /** Called on mount with a function that clears all registered scroll targets */\n  onMount?: (clearScrollableMap: () => void) => void;\n}\n\nexport interface RegisterData {\n  /** when to scroll to the target  */\n  type: ScrollType;\n\n  /** the html id to scroll to */\n  ref: string;\n}\n\nexport type ScrollFunction = (registerData: RegisterData) => void;\n\nexport const AutoScrollManagerContext = React.createContext<{\n  /** function to register a scroll target */\n  register: ScrollFunction;\n}>({ register: () => {} });\n\n/** hook to register as a scroll target */\nexport const useRegisterAsScrollable = (): ScrollFunction => {\n  const { register } = React.useContext(AutoScrollManagerContext);\n\n  return register;\n};\n\n/** Component to handle scrolling */\nexport const AutoScrollProvider = ({\n  getElementToScrollTo,\n  getBaseElement,\n  offset,\n  onMount,\n  children,\n}: PropsWithChildren<AutoScrollProviderProps>) => {\n  // Tracker for what elements are registered to be scroll targets\n  // Key is the type (initial, validation, appear)\n  // Value is a set of target ids\n  const [scrollableMap, setScrollableMap] = useState<\n    Map<ScrollType, Set<string>>\n  >(new Map());\n\n  useEffect(() => {\n    onMount?.(() => setScrollableMap(new Map()));\n  }, []);\n\n  /** Add a new entry as a scroll target */\n  const updateScrollableMap = (key: ScrollType, value: string) => {\n    setScrollableMap((prev) => {\n      const nm = new Map(prev);\n\n      if (!nm.get(key)) {\n        nm.set(key, new Set());\n      }\n\n      nm.get(key)?.add(value);\n\n      return nm;\n    });\n  };\n\n  /** register a new scroll target */\n  const register: ScrollFunction = (data) => {\n    updateScrollableMap(data.type, data.ref);\n  };\n\n  useEffect(() => {\n    const node = document.getElementById(getElementToScrollTo(scrollableMap));\n\n    if (node) {\n      scrollIntoViewWithOffset(node, getBaseElement() || document.body, offset);\n    }\n  }, [scrollableMap]);\n\n  return (\n    <AutoScrollManagerContext.Provider value={{ register }}>\n      {children}\n    </AutoScrollManagerContext.Provider>\n  );\n};\n","import { scrollTo } from \"seamless-scroll-polyfill\";\n\n/**\n * Scroll to the given element with an offset\n * @param node Element to scroll to\n * @param baseElement Container element used to calculate offset\n * @param offset Additional offset\n */\nexport function scrollIntoViewWithOffset(\n  node: HTMLElement,\n  baseElement: HTMLElement,\n  offset: number,\n) {\n  scrollTo(window, {\n    behavior: \"smooth\",\n    top:\n      node.getBoundingClientRect().top -\n      baseElement.getBoundingClientRect().top -\n      offset,\n  });\n}\n","import type { ReactPlayer, ReactPlayerPlugin } from \"@player-ui/react\";\nimport type { Player } from \"@player-ui/react\";\nimport React from \"react\";\nimport { AutoScrollProvider } from \"./hooks\";\n\nexport enum ScrollType {\n  ValidationError,\n  FirstAppearance,\n  Unknown,\n}\n\nexport interface AutoScrollManagerConfig {\n  /** Config to auto-scroll on load */\n  autoScrollOnLoad?: boolean;\n  /** Config to auto-focus on an error */\n  autoFocusOnErrorField?: boolean;\n  /** Optional function to get container element, which is used for calculating offset (default: document.body) */\n  getBaseElement?: () => HTMLElement | undefined | null;\n  /** Additional offset to be used (default: 0) */\n  offset?: number;\n}\n\n/** A plugin to manage scrolling behavior */\nexport class AutoScrollManagerPlugin implements ReactPlayerPlugin {\n  name = \"auto-scroll-manager\";\n\n  /** Toggles if we should auto scroll to to the first failed validation on page load */\n  private autoScrollOnLoad: boolean;\n\n  /** Toggles if we should auto scroll to the first failed validation on navigation failure */\n  private autoFocusOnErrorField: boolean;\n\n  /** tracks if its the initial page render */\n  private initialRender: boolean;\n\n  /** tracks if the navigation failed */\n  private failedNavigation: boolean;\n\n  /** function to return the base of the scrollable area */\n  private getBaseElement: () => HTMLElement | undefined | null;\n\n  /** static offset */\n  private offset: number;\n\n  /** clears scrollableMap in AutoScrollProvider — set when the provider mounts */\n  private clearScrollableMap: () => void;\n\n  /** map of scroll type to set of ids that are registered under that type */\n  private alreadyScrolledTo: Array<string>;\n  private scrollFn: (\n    scrollableElements: Map<ScrollType, Set<string>>,\n  ) => string;\n\n  constructor(config: AutoScrollManagerConfig) {\n    this.autoScrollOnLoad = config.autoScrollOnLoad ?? false;\n    this.autoFocusOnErrorField = config.autoFocusOnErrorField ?? false;\n    this.getBaseElement = config.getBaseElement ?? (() => null);\n    this.offset = config.offset ?? 0;\n    this.initialRender = false;\n    this.failedNavigation = false;\n    this.alreadyScrolledTo = [];\n    this.clearScrollableMap = () => {};\n    this.scrollFn = this.calculateScroll.bind(this);\n  }\n\n  getFirstScrollableElement(idList: Set<string>, type: ScrollType): string {\n    const highestElement = {\n      id: \"\",\n      ypos: 0,\n    };\n    const ypos = window.scrollY;\n    idList.forEach((id) => {\n      const element = document.getElementById(id);\n\n      // if we are looking at validation errors, make sure the element is invalid\n      if (\n        type === ScrollType.ValidationError &&\n        element?.getAttribute(\"aria-invalid\") === \"false\"\n      ) {\n        return;\n      }\n\n      // if we are just looking at elements that just appeared, make sure we haven't\n      // scrolled to them before\n      if (type === ScrollType.FirstAppearance) {\n        if (this.alreadyScrolledTo.indexOf(id) !== -1) {\n          return;\n        }\n\n        this.alreadyScrolledTo.push(id);\n      }\n\n      const epos = element?.getBoundingClientRect().top;\n      if (\n        epos !== undefined &&\n        (epos + ypos < highestElement.ypos || highestElement.id === \"\")\n      ) {\n        highestElement.id = id;\n        highestElement.ypos = ypos + epos;\n      }\n    });\n    return highestElement.id;\n  }\n\n  calculateScroll(scrollableElements: Map<ScrollType, Set<string>>): string {\n    let currentScroll = ScrollType.FirstAppearance;\n    if (this.initialRender) {\n      if (this.autoScrollOnLoad) {\n        currentScroll = ScrollType.ValidationError;\n      }\n\n      this.initialRender = false;\n    } else if (this.failedNavigation) {\n      if (this.autoFocusOnErrorField) {\n        currentScroll = ScrollType.ValidationError;\n      }\n\n      this.failedNavigation = false;\n    }\n\n    const elementList = scrollableElements.get(currentScroll);\n    if (elementList) {\n      const element = this.getFirstScrollableElement(\n        elementList,\n        currentScroll,\n      );\n      return element ?? \"\";\n    }\n\n    return \"\";\n  }\n\n  // Hooks into player flow to determine what scroll targets need to be evaluated at specific lifecycle points\n  apply(player: Player): void {\n    player.hooks.flowController.tap(this.name, (fc) => {\n      fc.hooks.flow.tap(this.name, (flow) => {\n        flow.hooks.transition.tap(this.name, () => {\n          // Reset Everything\n          this.initialRender = true;\n          this.failedNavigation = false;\n          this.alreadyScrolledTo = [];\n          this.clearScrollableMap();\n          // Reset scroll position for new view\n          window.scroll(0, 0);\n        });\n        flow.hooks.skipTransition.intercept({\n          call: () => {\n            this.failedNavigation = true;\n          },\n        });\n      });\n    });\n  }\n\n  applyReact(reactPlayer: ReactPlayer): void {\n    reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {\n      const { scrollFn, getBaseElement, offset } = this;\n      const setScrollableMapClearer = (clear: () => void) => {\n        this.clearScrollableMap = clear;\n      };\n\n      function AutoScrollManagerComponent() {\n        return (\n          <AutoScrollProvider\n            getElementToScrollTo={scrollFn}\n            getBaseElement={getBaseElement}\n            offset={offset}\n            onMount={(clear) => {\n              setScrollableMapClearer(clear);\n            }}\n          >\n            <Comp />\n          </AutoScrollProvider>\n        );\n      }\n\n      return AutoScrollManagerComponent;\n    });\n  }\n}\n"],"mappings":"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","names":["React","ScrollType","React"]}

package/package.json

@@ -6,7 +6,7 @@
     "types"
   ],
   "name": "@player-ui/auto-scroll-manager-plugin-react",
-  "version": "0.15.1-next.2",
+  "version": "0.15.1-next.4",
   "main": "dist/cjs/index.cjs",
   "devDependencies": {
     "@player-ui/types": "workspace:*",
@@ -17,7 +17,7 @@
     "@player-ui/reference-assets-plugin": "workspace:*"
   },
   "peerDependencies": {
-    "@player-ui/react": "0.15.1-next.2",
+    "@player-ui/react": "0.15.1-next.4",
     "react": "^18.2.0",
     "@types/react": "^18.2.39"
   },

package/src/__tests__/plugin.test.tsx

@@ -177,24 +177,24 @@ describe("auto-scroll plugin", () => {
 
     const action = await findByRole(container, "button");
     act(() => action.click());
-    await act(() => waitFor(() => {}));
-
-    expect(scrollIntoViewWithOffset).toBeCalledWith(
-      expect.anything(),
-      expect.objectContaining({ id: "view" }),
-      40,
+    await waitFor(() =>
+      expect(scrollIntoViewWithOffset).toBeCalledWith(
+        expect.anything(),
+        expect.objectContaining({ id: "view" }),
+        40,
+      ),
     );
 
     // Mock the case where the base element can't be found, so document.body is used as a fallback
     getBaseElementMock.mockReturnValue(null);
 
     act(() => action.click());
-    await act(() => waitFor(() => {}));
-
-    expect(scrollIntoViewWithOffset).toHaveBeenLastCalledWith(
-      expect.anything(),
-      document.body,
-      40,
+    await waitFor(() =>
+      expect(scrollIntoViewWithOffset).toHaveBeenLastCalledWith(
+        expect.anything(),
+        document.body,
+        40,
+      ),
     );
   });
 
@@ -233,12 +233,12 @@ describe("auto-scroll plugin", () => {
 
     const action = await findByRole(container, "button");
     act(() => action.click());
-    await act(() => waitFor(() => {}));
-
-    expect(scrollIntoViewWithOffset).toBeCalledWith(
-      expect.anything(),
-      document.body,
-      0,
+    await waitFor(() =>
+      expect(scrollIntoViewWithOffset).toBeCalledWith(
+        expect.anything(),
+        document.body,
+        0,
+      ),
     );
   });
 
@@ -280,6 +280,113 @@ describe("auto-scroll plugin", () => {
   });
 });
 
+const twoViewFlow = {
+  id: "two-view-flow",
+  views: [
+    {
+      id: "view-1",
+      type: "info",
+      primaryInfo: {
+        asset: { id: "info-1", type: "input", binding: "person.name" },
+      },
+      actions: [
+        { asset: { id: "next-action", type: "action", value: "Next" } },
+      ],
+    },
+    {
+      id: "view-2",
+      type: "info",
+      primaryInfo: {
+        asset: { id: "info-2", type: "input", binding: "person.age" },
+      },
+      actions: [],
+    },
+  ],
+  schema: {},
+  data: { person: { name: "sam", age: "30" } },
+  navigation: {
+    BEGIN: "FLOW_Start",
+    FLOW_Start: {
+      startState: "VIEW_1",
+      VIEW_1: {
+        state_type: "VIEW",
+        ref: "view-1",
+        transitions: { "*": "VIEW_2" },
+      },
+      VIEW_2: {
+        state_type: "VIEW",
+        ref: "view-2",
+        transitions: { "*": "END_Done" },
+      },
+      END_Done: { state_type: "END", outcome: "done" },
+    },
+  },
+};
+
+describe("scroll reset on view transition", () => {
+  test("does not scroll to page 1 elements after view transition (stale scrollableMap)", async () => {
+    vitest.clearAllMocks();
+
+    const withFirstAppearance = (Component: ComponentType<any>) => {
+      const Scrollable = (props: any) => {
+        const register = useRegisterAsScrollable();
+        useLayoutEffect(() => {
+          register({ type: ScrollType.FirstAppearance, ref: props.id });
+        }, []);
+        return <Component {...props} />;
+      };
+      return Scrollable;
+    };
+
+    // only "info-1" (page 1) is findable. if the map isn't cleared on transition,
+    // "info-1" remains a scroll target and scrollIntoViewWithOffset gets called.
+    vitest.spyOn(document, "getElementById").mockImplementation((id) => {
+      if (id === "info-1") {
+        return { getBoundingClientRect: () => ({ top: 50 }) } as any;
+      }
+      return null;
+    });
+
+    const wp = new ReactPlayer({
+      plugins: [
+        new AssetTransformPlugin([
+          [{ type: "action" }, actionTransform],
+          [{ type: "input" }, inputTransform],
+          [{ type: "info" }, infoTransform],
+        ]),
+        new CommonTypesPlugin(),
+        new AutoScrollManagerPlugin({}),
+      ],
+    });
+    wp.assetRegistry.set({ type: "info" }, Info);
+    wp.assetRegistry.set({ type: "action" }, Action);
+    wp.assetRegistry.set({ type: "input" }, withFirstAppearance(Input));
+
+    wp.start(twoViewFlow as any);
+
+    const { container } = render(
+      <div>
+        <React.Suspense fallback="loading...">
+          <wp.Component />
+        </React.Suspense>
+      </div>,
+    );
+
+    // wait for page 1 to settle, then reset scroll call history so we only assert on page 2
+    await act(() => waitFor(() => {}));
+    (scrollIntoViewWithOffset as ReturnType<typeof vitest.fn>).mockClear();
+
+    // navigate to page 2
+    const action = await findByRole(container, "button");
+    act(() => action.click());
+    await act(() => waitFor(() => {}));
+
+    // map was cleared on transition — "info-1" is no longer a scroll target
+    expect(scrollIntoViewWithOffset).not.toHaveBeenCalled();
+    vitest.restoreAllMocks();
+  });
+});
+
 describe("getFirstScrollableElement unit tests", () => {
   const defineGetElementId = (bcrValues: any[]) => {
     return (idIn: string): HTMLElement | null => {

package/src/hooks.tsx

@@ -12,6 +12,8 @@ export interface AutoScrollProviderProps {
   getBaseElement: () => HTMLElement | undefined | null;
   /** Additional offset to be used (default: 0) */
   offset: number;
+  /** Called on mount with a function that clears all registered scroll targets */
+  onMount?: (clearScrollableMap: () => void) => void;
 }
 
 export interface RegisterData {
@@ -41,6 +43,7 @@ export const AutoScrollProvider = ({
   getElementToScrollTo,
   getBaseElement,
   offset,
+  onMount,
   children,
 }: PropsWithChildren<AutoScrollProviderProps>) => {
   // Tracker for what elements are registered to be scroll targets
@@ -50,6 +53,10 @@ export const AutoScrollProvider = ({
     Map<ScrollType, Set<string>>
   >(new Map());
 
+  useEffect(() => {
+    onMount?.(() => setScrollableMap(new Map()));
+  }, []);
+
   /** Add a new entry as a scroll target */
   const updateScrollableMap = (key: ScrollType, value: string) => {
     setScrollableMap((prev) => {
@@ -76,7 +83,7 @@ export const AutoScrollProvider = ({
     if (node) {
       scrollIntoViewWithOffset(node, getBaseElement() || document.body, offset);
     }
-  });
+  }, [scrollableMap]);
 
   return (
     <AutoScrollManagerContext.Provider value={{ register }}>

package/src/plugin.tsx

@@ -42,6 +42,9 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
   /** static offset */
   private offset: number;
 
+  /** clears scrollableMap in AutoScrollProvider — set when the provider mounts */
+  private clearScrollableMap: () => void;
+
   /** map of scroll type to set of ids that are registered under that type */
   private alreadyScrolledTo: Array<string>;
   private scrollFn: (
@@ -56,10 +59,11 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
     this.initialRender = false;
     this.failedNavigation = false;
     this.alreadyScrolledTo = [];
+    this.clearScrollableMap = () => {};
     this.scrollFn = this.calculateScroll.bind(this);
   }
 
-  getFirstScrollableElement(idList: Set<string>, type: ScrollType) {
+  getFirstScrollableElement(idList: Set<string>, type: ScrollType): string {
     const highestElement = {
       id: "",
       ypos: 0,
@@ -98,7 +102,7 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
     return highestElement.id;
   }
 
-  calculateScroll(scrollableElements: Map<ScrollType, Set<string>>) {
+  calculateScroll(scrollableElements: Map<ScrollType, Set<string>>): string {
     let currentScroll = ScrollType.FirstAppearance;
     if (this.initialRender) {
       if (this.autoScrollOnLoad) {
@@ -127,7 +131,7 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
   }
 
   // Hooks into player flow to determine what scroll targets need to be evaluated at specific lifecycle points
-  apply(player: Player) {
+  apply(player: Player): void {
     player.hooks.flowController.tap(this.name, (fc) => {
       fc.hooks.flow.tap(this.name, (flow) => {
         flow.hooks.transition.tap(this.name, () => {
@@ -135,6 +139,7 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
           this.initialRender = true;
           this.failedNavigation = false;
           this.alreadyScrolledTo = [];
+          this.clearScrollableMap();
           // Reset scroll position for new view
           window.scroll(0, 0);
         });
@@ -147,9 +152,12 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
     });
   }
 
-  applyReact(reactPlayer: ReactPlayer) {
+  applyReact(reactPlayer: ReactPlayer): void {
     reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       const { scrollFn, getBaseElement, offset } = this;
+      const setScrollableMapClearer = (clear: () => void) => {
+        this.clearScrollableMap = clear;
+      };
 
       function AutoScrollManagerComponent() {
         return (
@@ -157,6 +165,9 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
             getElementToScrollTo={scrollFn}
             getBaseElement={getBaseElement}
             offset={offset}
+            onMount={(clear) => {
+              setScrollableMapClearer(clear);
+            }}
           >
             <Comp />
           </AutoScrollProvider>

package/types/hooks.d.ts

@@ -8,6 +8,8 @@ export interface AutoScrollProviderProps {
     getBaseElement: () => HTMLElement | undefined | null;
     /** Additional offset to be used (default: 0) */
     offset: number;
+    /** Called on mount with a function that clears all registered scroll targets */
+    onMount?: (clearScrollableMap: () => void) => void;
 }
 export interface RegisterData {
     /** when to scroll to the target  */
@@ -23,5 +25,5 @@ export declare const AutoScrollManagerContext: React.Context<{
 /** hook to register as a scroll target */
 export declare const useRegisterAsScrollable: () => ScrollFunction;
 /** Component to handle scrolling */
-export declare const AutoScrollProvider: ({ getElementToScrollTo, getBaseElement, offset, children, }: PropsWithChildren<AutoScrollProviderProps>) => React.JSX.Element;
+export declare const AutoScrollProvider: ({ getElementToScrollTo, getBaseElement, offset, onMount, children, }: PropsWithChildren<AutoScrollProviderProps>) => React.JSX.Element;
 //# sourceMappingURL=hooks.d.ts.map

package/types/plugin.d.ts

@@ -30,6 +30,8 @@ export declare class AutoScrollManagerPlugin implements ReactPlayerPlugin {
     private getBaseElement;
     /** static offset */
     private offset;
+    /** clears scrollableMap in AutoScrollProvider — set when the provider mounts */
+    private clearScrollableMap;
     /** map of scroll type to set of ids that are registered under that type */
     private alreadyScrolledTo;
     private scrollFn;