@player-ui/auto-scroll-manager-plugin-react 0.8.0--canary.307.9645 → 0.8.0--canary.410.15865

package/package.json

@@ -1,66 +1,39 @@
 {
   "name": "@player-ui/auto-scroll-manager-plugin-react",
-  "version": "0.8.0--canary.307.9645",
-  "private": false,
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
+  "version": "0.8.0--canary.410.15865",
+  "main": "dist/cjs/index.cjs",
+  "devDependencies": {
+    "@player-ui/types": "workspace:*",
+    "@player-ui/make-flow": "workspace:*",
+    "@player-ui/asset-transform-plugin": "workspace:*",
+    "@player-ui/common-types-plugin": "workspace:*",
+    "@player-ui/reference-assets-plugin-react": "workspace:*",
+    "@player-ui/reference-assets-plugin": "workspace:*"
   },
   "peerDependencies": {
-    "@player-ui/react": "0.8.0--canary.307.9645"
+    "@player-ui/react": "0.8.0--canary.410.15865",
+    "react": "^18.2.0",
+    "@types/react": "^18.2.39"
   },
-  "dependencies": {
-    "seamless-scroll-polyfill": "2.3.3",
-    "@babel/runtime": "7.15.4"
-  },
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "typings": "dist/index.d.ts",
+  "module": "dist/index.legacy-esm.js",
+  "types": "types/index.d.ts",
   "sideEffects": false,
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/player-ui/player-ui"
-  },
-  "bugs": {
-    "url": "https://github.com/player-ui/player-ui/issues"
-  },
-  "homepage": "https://player-ui.github.io",
-  "contributors": [
-    {
-      "name": "Adam Dierkens",
-      "url": "https://github.com/adierkens"
-    },
-    {
-      "name": "Spencer Hamm",
-      "url": "https://github.com/spentacular"
-    },
-    {
-      "name": "Harris Borawski",
-      "url": "https://github.com/hborawski"
-    },
-    {
-      "name": "Jeremiah Zucker",
-      "url": "https://github.com/sugarmanz"
-    },
-    {
-      "name": "Ketan Reddy",
-      "url": "https://github.com/KetanReddy"
-    },
-    {
-      "name": "Brocollie08",
-      "url": "https://github.com/brocollie08"
-    },
-    {
-      "name": "Kelly Harrop",
-      "url": "https://github.com/kharrop"
-    },
-    {
-      "name": "Alejandro Fimbres",
-      "url": "https://github.com/lexfm"
-    },
-    {
-      "name": "Rafael Campos",
-      "url": "https://github.com/rafbcampos"
+  "exports": {
+    "./package.json": "./package.json",
+    "./dist/index.css": "./dist/index.css",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/cjs/index.cjs"
     }
-  ]
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "dependencies": {
+    "seamless-scroll-polyfill": "^2.3.4",
+    "tslib": "^2.6.2"
+  }
 }

package/src/__tests__/plugin.test.tsx

@@ -0,0 +1,411 @@
+import { test, expect, vitest, describe, beforeEach } from "vitest";
+import type { ComponentType } from "react";
+import React, { useLayoutEffect } from "react";
+import type { InProgressState } from "@player-ui/react";
+import { ReactPlayer } from "@player-ui/react";
+
+import { findByRole, render, waitFor, act } from "@testing-library/react";
+import { makeFlow } from "@player-ui/make-flow";
+
+import {
+  actionTransform,
+  inputTransform,
+  infoTransform,
+} from "@player-ui/reference-assets-plugin";
+import { Info, Action, Input } from "@player-ui/reference-assets-plugin-react";
+import { CommonTypesPlugin } from "@player-ui/common-types-plugin";
+import { AssetTransformPlugin } from "@player-ui/asset-transform-plugin";
+
+import scrollIntoViewWithOffset from "../scrollIntoViewWithOffset";
+
+import {
+  AutoScrollManagerPlugin,
+  ScrollType,
+  useRegisterAsScrollable,
+} from "..";
+
+vitest.mock("../scrollIntoViewWithOffset");
+
+/**
+ * HOC to enable scrollable behavior for a given component
+ *
+ * - @param Component
+ */
+const withScrollable = (Component: ComponentType<any>) => {
+  /**
+   *
+   */
+  const ScrollableComponent = (props: any) => {
+    const registerFunction = useRegisterAsScrollable();
+
+    useLayoutEffect(() => {
+      registerFunction({ type: ScrollType.ValidationError, ref: props.id });
+    }, [props.validation]);
+
+    return <Component {...props} />;
+  };
+
+  return ScrollableComponent;
+};
+
+describe("auto-scroll plugin", () => {
+  beforeEach(() => {
+    vitest.clearAllMocks();
+  });
+
+  const flow = makeFlow({
+    id: "view-1",
+    type: "info",
+    primaryInfo: {
+      asset: {
+        id: "asset",
+        type: "input",
+        binding: "person.name",
+      },
+    },
+    actions: [
+      {
+        asset: {
+          id: "action-auto-scroll",
+          type: "action",
+          value: "Next",
+        },
+      },
+    ],
+  });
+
+  flow.schema = {
+    ROOT: {
+      person: {
+        type: "PersonType",
+      },
+    },
+    PersonType: {
+      name: {
+        type: "StringType",
+        validation: [
+          {
+            type: "required",
+            message: "Required",
+          },
+        ],
+      },
+    },
+  };
+
+  document.getElementById = (id: any) => {
+    if (id === "asset") {
+      return {
+        getAttribute: () => "true",
+        getBoundingClientRect: () => ({ top: 50 }),
+      } as any;
+    }
+
+    return undefined;
+  };
+
+  test("scrolls successfully test", async () => {
+    const wp = new ReactPlayer({
+      plugins: [
+        new AssetTransformPlugin([
+          [{ type: "action" }, actionTransform],
+          [{ type: "input" }, inputTransform],
+          [{ type: "info" }, infoTransform],
+        ]),
+        new CommonTypesPlugin(),
+        new AutoScrollManagerPlugin({
+          autoFocusOnErrorField: true,
+        }),
+      ],
+    });
+    wp.assetRegistry.set({ type: "info" }, Info);
+    wp.assetRegistry.set({ type: "action" }, Action);
+    wp.assetRegistry.set({ type: "input" }, withScrollable(Input));
+
+    wp.start(flow as any);
+
+    const { container } = render(
+      <div>
+        <React.Suspense fallback="loading...">
+          <wp.Component />
+        </React.Suspense>
+      </div>,
+    );
+
+    await waitFor(async () => {
+      const action = await findByRole(container, "button");
+      action.click();
+    });
+
+    expect(scrollIntoViewWithOffset).toBeCalledTimes(1);
+  });
+
+  test("works with custom base element and offset", async () => {
+    const getBaseElementMock = vitest.fn();
+
+    const wp = new ReactPlayer({
+      plugins: [
+        new AssetTransformPlugin([
+          [{ type: "action" }, actionTransform],
+          [{ type: "input" }, inputTransform],
+          [{ type: "info" }, infoTransform],
+        ]),
+        new CommonTypesPlugin(),
+        new AutoScrollManagerPlugin({
+          autoFocusOnErrorField: true,
+          getBaseElement: getBaseElementMock,
+          offset: 40,
+        }),
+      ],
+    });
+    wp.assetRegistry.set({ type: "info" }, Info);
+    wp.assetRegistry.set({ type: "action" }, Action);
+    wp.assetRegistry.set({ type: "input" }, withScrollable(Input));
+
+    wp.start(flow as any);
+
+    const { container } = render(
+      <div>
+        <React.Suspense fallback="loading...">
+          <wp.Component />
+        </React.Suspense>
+      </div>,
+    );
+    await act(() => waitFor(() => {}));
+
+    getBaseElementMock.mockReturnValue({ id: "view" });
+
+    const action = await findByRole(container, "button");
+    act(() => action.click());
+    await act(() => 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,
+    );
+  });
+
+  test("works without custom base element and offset provided", async () => {
+    const getBaseElementMock = vitest.fn();
+
+    const wp = new ReactPlayer({
+      plugins: [
+        new AssetTransformPlugin([
+          [{ type: "action" }, actionTransform],
+          [{ type: "input" }, inputTransform],
+          [{ type: "info" }, infoTransform],
+        ]),
+        new CommonTypesPlugin(),
+        new AutoScrollManagerPlugin({
+          autoFocusOnErrorField: true,
+        }),
+      ],
+    });
+    wp.assetRegistry.set({ type: "info" }, Info);
+    wp.assetRegistry.set({ type: "action" }, Action);
+    wp.assetRegistry.set({ type: "input" }, withScrollable(Input));
+
+    wp.start(flow as any);
+
+    const { container } = render(
+      <div>
+        <React.Suspense fallback="loading...">
+          <wp.Component />
+        </React.Suspense>
+      </div>,
+    );
+    await act(() => waitFor(() => {}));
+
+    getBaseElementMock.mockReturnValue({ id: "view" });
+
+    const action = await findByRole(container, "button");
+    act(() => action.click());
+    await act(() => waitFor(() => {}));
+
+    expect(scrollIntoViewWithOffset).toBeCalledWith(
+      expect.anything(),
+      document.body,
+      0,
+    );
+  });
+
+  test("no error no scroll test", async () => {
+    const wp = new ReactPlayer({
+      plugins: [
+        new AssetTransformPlugin([
+          [{ type: "action" }, actionTransform],
+          [{ type: "input" }, inputTransform],
+        ]),
+        new CommonTypesPlugin(),
+        new AutoScrollManagerPlugin({
+          autoFocusOnErrorField: true,
+        }),
+      ],
+    });
+    wp.assetRegistry.set({ type: "info" }, Info);
+    wp.assetRegistry.set({ type: "action" }, Action);
+    wp.assetRegistry.set({ type: "input" }, withScrollable(Input));
+
+    wp.start(flow as any);
+
+    const { container } = render(
+      <div>
+        <React.Suspense fallback="loading...">
+          <wp.Component />
+        </React.Suspense>
+      </div>,
+    );
+
+    waitFor(async () => {
+      const state = wp.player.getState() as InProgressState;
+      state.controllers.data.set([["person.name", "sam"]]);
+      const action = await findByRole(container, "button");
+      action.click();
+    });
+
+    expect(scrollIntoViewWithOffset).not.toBeCalled();
+  });
+});
+
+describe("getFirstScrollableElement unit tests", () => {
+  const defineGetElementId = (bcrValues: any[]) => {
+    return (idIn: string): HTMLElement | null => {
+      switch (idIn) {
+        case "Element1":
+          return {
+            getAttribute: (attrIn) =>
+              attrIn === "aria-invalid" ? "true" : "false",
+            getBoundingClientRect: () => bcrValues[0],
+          } as HTMLElement;
+        case "Element2":
+          return {
+            getAttribute: (attrIn) =>
+              attrIn === "aria-invalid" ? "true" : "false",
+            getBoundingClientRect: () => bcrValues[1],
+          } as HTMLElement;
+        case "Element3":
+          return {
+            getAttribute: (attrIn) =>
+              attrIn === "aria-invalid" ? "true" : "false",
+            getBoundingClientRect: () => bcrValues[2],
+          } as HTMLElement;
+        default:
+          return null;
+      }
+    };
+  };
+
+  let autoScroll: AutoScrollManagerPlugin;
+  let idList: Set<string>;
+
+  beforeEach(() => {
+    autoScroll = new AutoScrollManagerPlugin({});
+    idList = new Set<string>();
+    idList.add("Element1");
+    idList.add("Element2");
+    idList.add("Element3");
+  });
+
+  test("scrolled past all elements", () => {
+    document.getElementById = defineGetElementId([
+      {
+        top: -30,
+      },
+      {
+        top: -20,
+      },
+      {
+        top: -10,
+      },
+    ]);
+
+    expect(
+      autoScroll.getFirstScrollableElement(idList, ScrollType.ValidationError),
+    ).toBe("Element1");
+  });
+
+  test("scrolled past some of elements", () => {
+    document.getElementById = defineGetElementId([
+      {
+        top: -20,
+      },
+      {
+        top: -10,
+      },
+      {
+        top: 0,
+      },
+    ]);
+
+    expect(
+      autoScroll.getFirstScrollableElement(idList, ScrollType.ValidationError),
+    ).toBe("Element1");
+  });
+
+  test("all elements in view", () => {
+    document.getElementById = defineGetElementId([
+      {
+        top: 10,
+      },
+      {
+        top: 20,
+      },
+      {
+        top: 30,
+      },
+    ]);
+
+    expect(
+      autoScroll.getFirstScrollableElement(idList, ScrollType.ValidationError),
+    ).toBe("Element1");
+  });
+
+  test("all elements in view and target is 0", () => {
+    document.getElementById = defineGetElementId([
+      {
+        top: 0,
+      },
+      {
+        top: 10,
+      },
+      {
+        top: 20,
+      },
+    ]);
+
+    expect(
+      autoScroll.getFirstScrollableElement(idList, ScrollType.ValidationError),
+    ).toBe("Element1");
+  });
+
+  test("all elements in view but there is a tie", () => {
+    document.getElementById = defineGetElementId([
+      {
+        top: 10,
+      },
+      {
+        top: 10,
+      },
+      {
+        top: 20,
+      },
+    ]);
+
+    expect(
+      autoScroll.getFirstScrollableElement(idList, ScrollType.ValidationError),
+    ).toBe("Element1");
+  });
+});

package/src/hooks.tsx

@@ -1,12 +1,12 @@
-import type { PropsWithChildren } from 'react';
-import React, { useEffect, useState } from 'react';
-import scrollIntoViewWithOffset from './scrollIntoViewWithOffset';
-import type { ScrollType } from './index';
+import type { PropsWithChildren } from "react";
+import React, { useEffect, useState } from "react";
+import scrollIntoViewWithOffset from "./scrollIntoViewWithOffset";
+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>>
+    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;

package/src/index.tsx

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

package/src/plugin.tsx

@@ -1,7 +1,7 @@
-import type { ReactPlayer, ReactPlayerPlugin } from '@player-ui/react';
-import type { Player } from '@player-ui/player';
-import React from 'react';
-import { AutoScrollProvider } from './hooks';
+import type { ReactPlayer, ReactPlayerPlugin } from "@player-ui/react";
+import type { Player } from "@player-ui/react";
+import React from "react";
+import { AutoScrollProvider } from "./hooks";
 
 export enum ScrollType {
   ValidationError,
@@ -22,7 +22,7 @@ export interface AutoScrollManagerConfig {
 
 /** A plugin to manage scrolling behavior */
 export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
-  name = 'auto-scroll-manager';
+  name = "auto-scroll-manager";
 
   /** Toggles if we should auto scroll to to the first failed validation on page load */
   private autoScrollOnLoad: boolean;
@@ -45,7 +45,7 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
   /** 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>>
+    scrollableElements: Map<ScrollType, Set<string>>,
   ) => string;
 
   constructor(config: AutoScrollManagerConfig) {
@@ -61,7 +61,7 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
 
   getFirstScrollableElement(idList: Set<string>, type: ScrollType) {
     const highestElement = {
-      id: '',
+      id: "",
       ypos: 0,
     };
     const ypos = window.scrollY;
@@ -71,7 +71,7 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
       // if we are looking at validation errors, make sure the element is invalid
       if (
         type === ScrollType.ValidationError &&
-        element?.getAttribute('aria-invalid') === 'false'
+        element?.getAttribute("aria-invalid") === "false"
       ) {
         return;
       }
@@ -89,7 +89,7 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
       const epos = element?.getBoundingClientRect().top;
       if (
         epos !== undefined &&
-        (epos + ypos < highestElement.ypos || highestElement.id === '')
+        (epos + ypos < highestElement.ypos || highestElement.id === "")
       ) {
         highestElement.id = id;
         highestElement.ypos = ypos + epos;
@@ -118,12 +118,12 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
     if (elementList) {
       const element = this.getFirstScrollableElement(
         elementList,
-        currentScroll
+        currentScroll,
       );
-      return element ?? '';
+      return element ?? "";
     }
 
-    return '';
+    return "";
   }
 
   // Hooks into player flow to determine what scroll targets need to be evaluated at specific lifecycle points
@@ -149,8 +149,9 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
 
   applyReact(reactPlayer: ReactPlayer) {
     reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
-      return () => {
-        const { scrollFn, getBaseElement, offset } = this;
+      const { scrollFn, getBaseElement, offset } = this;
+
+      function AutoScrollManagerComponent() {
         return (
           <AutoScrollProvider
             getElementToScrollTo={scrollFn}
@@ -160,7 +161,9 @@ export class AutoScrollManagerPlugin implements ReactPlayerPlugin {
             <Comp />
           </AutoScrollProvider>
         );
-      };
+      }
+
+      return AutoScrollManagerComponent;
     });
   }
 }

package/src/scrollIntoViewWithOffset.ts

@@ -5,15 +5,15 @@
 -* @param offset Additional offset
  */
 
-import { scrollTo } from 'seamless-scroll-polyfill';
+import { scrollTo } from "seamless-scroll-polyfill";
 
 export default (
   node: HTMLElement,
   baseElement: HTMLElement,
-  offset: number
+  offset: number,
 ) => {
   scrollTo(window, {
-    behavior: 'smooth',
+    behavior: "smooth",
     top:
       node.getBoundingClientRect().top -
       baseElement.getBoundingClientRect().top -

package/types/hooks.d.ts

@@ -0,0 +1,27 @@
+import type { PropsWithChildren } from "react";
+import React from "react";
+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;
+    /** 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 {
+    /** when to scroll to the target  */
+    type: ScrollType;
+    /** the html id to scroll to */
+    ref: string;
+}
+export type ScrollFunction = (registerData: RegisterData) => void;
+export declare const AutoScrollManagerContext: React.Context<{
+    /** function to register a scroll target */
+    register: ScrollFunction;
+}>;
+/** 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;
+//# sourceMappingURL=hooks.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./hooks";
+export * from "./plugin";
+//# sourceMappingURL=index.d.ts.map