@eifi1/ui-kit 0.50.0 → 0.51.0

package/dist/tour/tour.js

@@ -21,11 +21,26 @@ import { useDismissLayer } from "../hooks/use-dismiss.js";
 import { sameRect } from "../hooks/use-anchored-rect.js";
 import { dirOf, horizontalStep } from "../lib/direction.js";
 import { isComposing } from "../lib/ime.js";
+import { focusQuietly } from "../lib/quiet-focus.js";
 import { DEFAULT_TOUR_LABELS } from "./tour-labels.js";
 import { completeStored, rememberAccount, rememberMigrate } from "./use-tour-progress.js";
 import { createGateRegistry, devWarnings, TourInternalContext } from "./tour-gates.js";
+import { liveEngine } from "./tour-engine.js";
 import { DOCK_MAX_WIDTH, dockEdge, dockStyle, readBand, scrollIntoFreeHalf } from "./tour-dock.js";
 import { useTourGate, useTourGateRelease } from "./tour-gates.js";
+const ENGINE_KEYS = [
+  "active",
+  "activeId",
+  "start",
+  "stop",
+  "next",
+  "prev",
+  "goToStep",
+  "index",
+  "total",
+  "position",
+  "count"
+];
 const TourContext = createContext(null);
 function useTour() {
   const ctx = useContext(TourContext);
@@ -133,6 +148,8 @@ function TourProvider({
     [arrive, forward, backward]
   );
   const ownStartRef = useRef(null);
+  const [live] = useState(() => liveEngine(ENGINE_KEYS));
+  const engine = live.engine;
   const start = useCallback(
     (what, opts) => {
       if (typeof what !== "string") {
@@ -144,11 +161,11 @@ function TourProvider({
         if (devWarnings()) console.warn(`[ui-kit] start("${what}") needs TourProvider's \`launch\` prop.`);
         return;
       }
-      void Promise.resolve(run(what, { at: opts?.at }, ownStartRef.current)).catch(
+      void Promise.resolve(run(what, { at: opts?.at }, ownStartRef.current, engine)).catch(
         (error) => console.error(error)
       );
     },
-    [startSteps]
+    [startSteps, engine]
   );
   useLayoutEffect(() => {
     ownStartRef.current = start;
@@ -228,46 +245,44 @@ function TourProvider({
       else arrive(s, to, "next");
     });
   }, [active, gates, arrive, forward, finish]);
-  return /* @__PURE__ */ jsx(TourInternalContext.Provider, { value: internals, children: /* @__PURE__ */ jsxs(
-    TourContext.Provider,
-    {
-      value: {
-        active,
-        activeId,
-        start,
-        stop,
-        next,
-        prev,
-        goToStep,
+  const value = {
+    active,
+    activeId,
+    start,
+    stop,
+    next,
+    prev,
+    goToStep,
+    index,
+    total,
+    position: active ? nav.position : 0,
+    count: active ? nav.count : 0
+  };
+  useLayoutEffect(() => {
+    live.set(value);
+  });
+  return /* @__PURE__ */ jsx(TourInternalContext.Provider, { value: internals, children: /* @__PURE__ */ jsxs(TourContext.Provider, { value, children: [
+    children,
+    active && /* @__PURE__ */ jsx(
+      TourOverlay,
+      {
+        steps,
         index,
-        total,
-        position: active ? nav.position : 0,
-        count: active ? nav.count : 0
-      },
-      children: [
-        children,
-        active && /* @__PURE__ */ jsx(
-          TourOverlay,
-          {
-            steps,
-            index,
-            via: nav.via,
-            floor: nav.floor,
-            position: nav.position,
-            count: nav.count,
-            refusal: refusal?.step === steps[index] ? refusal : null,
-            onGoTo: goToStep,
-            labels: merged,
-            gates,
-            dockOnPhones,
-            onNext: next,
-            onPrev: prev,
-            onSkip: skip
-          }
-        )
-      ]
-    }
-  ) });
+        via: nav.via,
+        floor: nav.floor,
+        position: nav.position,
+        count: nav.count,
+        refusal: refusal?.step === steps[index] ? refusal : null,
+        onGoTo: goToStep,
+        labels: merged,
+        gates,
+        dockOnPhones,
+        onNext: next,
+        onPrev: prev,
+        onSkip: skip
+      }
+    )
+  ] }) });
 }
 const NO_NAV = { index: 0, floor: 0, via: "start", position: 0, count: 0 };
 const NOOP = () => {
@@ -558,11 +573,11 @@ function TourOverlay({
     if (!ready || !guided || !step.target) return;
     const el = queryVisibleTarget(step.target);
     const control = el ? firstFocusable(el) : null;
+    const previous = control ? control.getAttribute("aria-describedby") : null;
+    if (control) control.setAttribute("aria-describedby", previous ? `${previous} ${bodyId}` : bodyId);
     if (coarsePointer() || !control) cardRef.current?.focus();
-    else if (!el.contains(document.activeElement)) control.focus();
+    else if (!el.contains(document.activeElement)) focusQuietly(control);
     if (!control) return;
-    const previous = control.getAttribute("aria-describedby");
-    control.setAttribute("aria-describedby", previous ? `${previous} ${bodyId}` : bodyId);
     return () => {
       if (previous === null) control.removeAttribute("aria-describedby");
       else control.setAttribute("aria-describedby", previous);
@@ -672,7 +687,7 @@ function TourOverlay({
   const lockedNext = useCallback(() => {
     const el = step.target ? queryVisibleTarget(step.target) : null;
     const control = el ? firstFocusable(el) : null;
-    control?.focus();
+    if (control) focusQuietly(control);
     announce(gateHint);
   }, [step.target, announce, gateHint]);
   const tryNext = awaitsRelease ? NOOP : locked ? lockedNext : onNext;