tycho-components 0.23.3 → 0.23.4

package/dist/configs/tour/driverTour.js

@@ -2,6 +2,33 @@ import { driver } from 'driver.js';
 import { resolveAnchor, resolveAnchorById, waitForSelector, } from './anchorResolver';
 import { buildAnchorMap, flattenWorkflowSteps, getWorkflowsForPath, } from './knowledgeBase';
 const CLICK_DEMO_DELAY_MS = 300;
+const DRIVER_TRANSITION_MS = 400;
+function isDummyHighlightElement(element) {
+    return !element || element.id === 'driver-dummy-element';
+}
+function waitForDriverTransition(driver) {
+    return new Promise((resolve) => {
+        const deadline = Date.now() + DRIVER_TRANSITION_MS + 50;
+        const poll = () => {
+            const state = driver.getState();
+            if (!state.__transitionCallback || Date.now() >= deadline) {
+                resolve();
+                return;
+            }
+            window.requestAnimationFrame(poll);
+        };
+        poll();
+    });
+}
+function rehighlightStepElement(driver, step, element) {
+    driver.highlight({
+        element,
+        popover: step.popover,
+        onHighlighted: step.onHighlighted,
+        onDeselected: step.onDeselected,
+        disableActiveInteraction: step.disableActiveInteraction,
+    });
+}
 function isPanelOpen(panelSelector) {
     return Boolean(document.querySelector(panelSelector));
 }
@@ -44,13 +71,16 @@ function chainPopoverClick(driveStep, key, beforeAdvance, advance) {
     const popover = driveStep.popover ?? {};
     const existing = popover[key];
     const handler = (element, step, opts) => {
-        beforeAdvance();
-        if (existing) {
-            existing(element, step, opts);
-        }
-        else {
-            advance(opts);
-        }
+        void (async () => {
+            beforeAdvance();
+            await waitForDriverTransition(opts.driver);
+            if (existing) {
+                existing(element, step, opts);
+            }
+            else {
+                advance(opts);
+            }
+        })();
     };
     driveStep.popover = {
         ...popover,
@@ -69,16 +99,51 @@ function attachClickDemoHooks(driveStep, anchor, anchorMap, anchorFallbacks) {
     };
     chainPopoverClick(driveStep, 'onPrevClick', () => closeGuardPanel(anchor.guardClickPanel, anchorMap, anchorFallbacks), (opts) => opts.driver.movePrevious());
 }
+async function openPanelIfNeeded(panelAnchor, anchorMap, anchorFallbacks) {
+    const { panelSelector, triggerAnchor } = panelAnchor;
+    if (!panelSelector || !triggerAnchor)
+        return;
+    if (!isPanelOpen(panelSelector)) {
+        clickElement(resolveAnchorById(triggerAnchor, anchorMap, anchorFallbacks) ?? undefined);
+    }
+    await waitForSelector(panelSelector);
+}
+function attachPreOpenPanelOnNext(driveStep, panelAnchor, anchorMap, anchorFallbacks) {
+    const popover = driveStep.popover ?? {};
+    const existing = popover.onNextClick;
+    const handler = (element, step, opts) => {
+        void (async () => {
+            await openPanelIfNeeded(panelAnchor, anchorMap, anchorFallbacks);
+            await waitForDriverTransition(opts.driver);
+            if (existing) {
+                existing(element, step, opts);
+            }
+            else {
+                opts.driver.moveNext();
+            }
+        })();
+    };
+    driveStep.popover = {
+        ...popover,
+        onNextClick: handler,
+    };
+}
 function attachPanelStepHooks(driveStep, anchor, anchorMap, anchorFallbacks) {
     const { panelSelector, triggerAnchor } = anchor;
     if (!panelSelector || !triggerAnchor)
         return;
     driveStep.element = () => resolveAnchor(anchor, anchorFallbacks);
-    driveStep.onHighlightStarted = async (_element, _step, opts) => {
+    driveStep.onHighlightStarted = async (element, step, opts) => {
         if (!isPanelOpen(panelSelector)) {
             clickElement(resolveAnchorById(triggerAnchor, anchorMap, anchorFallbacks) ?? undefined);
         }
         await waitForSelector(panelSelector);
+        const resolved = resolveAnchor(anchor, anchorFallbacks);
+        if (resolved && isDummyHighlightElement(element)) {
+            rehighlightStepElement(opts.driver, step, resolved);
+            return;
+        }
+        await waitForDriverTransition(opts.driver);
         opts.driver.refresh();
     };
     const close = () => closePanel(anchor, anchorMap, anchorFallbacks);
@@ -89,7 +154,7 @@ export function buildDriveSteps(kb, pathnames, anchorFallbacks) {
     const workflows = getWorkflowsForPath(kb, pathnames);
     const steps = flattenWorkflowSteps(workflows);
     const anchorMap = buildAnchorMap(kb);
-    return steps.map((step) => {
+    const driveSteps = steps.map((step) => {
         const driveStep = {
             popover: {
                 title: step.title,
@@ -121,6 +186,18 @@ export function buildDriveSteps(kb, pathnames, anchorFallbacks) {
         }
         return driveStep;
     });
+    for (let i = 0; i < steps.length - 1; i++) {
+        const nextStep = steps[i + 1];
+        if (!nextStep.anchor)
+            continue;
+        const nextAnchor = anchorMap.get(nextStep.anchor);
+        if (!nextAnchor?.resolveAtHighlight || !nextAnchor.triggerAnchor)
+            continue;
+        if (steps[i].anchor !== nextAnchor.triggerAnchor)
+            continue;
+        attachPreOpenPanelOnNext(driveSteps[i], nextAnchor, anchorMap, anchorFallbacks);
+    }
+    return driveSteps;
 }
 export function hasMatchingWorkflow(kb, pathnames) {
     return getWorkflowsForPath(kb, pathnames).length > 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.23.3",
+  "version": "0.23.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {