@ciridae/ui 0.13.0 → 0.15.0

package/dist/components/walkthrough/targeting/listenForOutsideWalkthroughInteraction.js

@@ -0,0 +1,19 @@
+import { WALKTHROUGH_TARGET_ATTRIBUTE } from "./walkthroughTarget.js";
+export function listenForOutsideWalkthroughInteraction(step, pause) {
+    const listener = (event) => {
+        const element = event.target;
+        if (!(element instanceof Element))
+            return;
+        if (element.closest("[data-walkthrough-coach]"))
+            return;
+        const walkthroughTarget = element.closest(`[${WALKTHROUGH_TARGET_ATTRIBUTE}]`);
+        const targetName = walkthroughTarget?.getAttribute(WALKTHROUGH_TARGET_ATTRIBUTE);
+        if (walkthroughTarget && (targetName === step.target || targetName === step.restoreTarget))
+            return;
+        pause();
+    };
+    document.addEventListener("click", listener, true);
+    return () => {
+        document.removeEventListener("click", listener, true);
+    };
+}

package/dist/components/walkthrough/targeting/useWalkthroughTargetRect.d.ts

@@ -0,0 +1,15 @@
+export type WalkthroughTargetRect = {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+};
+export type WalkthroughTargetObservation = {
+    status: "locating";
+} | {
+    status: "missing";
+} | {
+    rect: WalkthroughTargetRect;
+    status: "found";
+};
+export declare function useWalkthroughTargetRect(target: string | null): WalkthroughTargetObservation;

package/dist/components/walkthrough/targeting/useWalkthroughTargetRect.js

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { findWalkthroughTarget } from "./walkthroughTarget.js";
+const LOCATING_TARGET_OBSERVATION = { status: "locating" };
+const MISSING_TARGET_OBSERVATION = { status: "missing" };
+export function useWalkthroughTargetRect(target) {
+    const [observation, setObservation] = useState(LOCATING_TARGET_OBSERVATION);
+    useEffect(() => {
+        if (!target) {
+            setObservation(LOCATING_TARGET_OBSERVATION);
+            return;
+        }
+        let didScroll = false;
+        const measure = (forceUpdate = false) => {
+            const element = findWalkthroughTarget(target);
+            if (!element) {
+                didScroll = false;
+                setObservation(MISSING_TARGET_OBSERVATION);
+                return;
+            }
+            if (!didScroll) {
+                element.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+                didScroll = true;
+            }
+            const rect = element.getBoundingClientRect();
+            const next = {
+                rect: { height: rect.height, left: rect.left, top: rect.top, width: rect.width },
+                status: "found",
+            };
+            setObservation((current) => (!forceUpdate && sameObservation(current, next) ? current : next));
+        };
+        const handleResize = () => measure(true);
+        const handleScroll = () => measure();
+        measure();
+        const intervalId = window.setInterval(() => measure(), 300);
+        window.addEventListener("resize", handleResize);
+        window.addEventListener("scroll", handleScroll, true);
+        return () => {
+            window.clearInterval(intervalId);
+            window.removeEventListener("resize", handleResize);
+            window.removeEventListener("scroll", handleScroll, true);
+        };
+    }, [target]);
+    return observation;
+}
+function sameObservation(current, next) {
+    if (current.status !== next.status)
+        return false;
+    if (current.status !== "found" || next.status !== "found")
+        return true;
+    return (current.rect.height === next.rect.height &&
+        current.rect.left === next.rect.left &&
+        current.rect.top === next.rect.top &&
+        current.rect.width === next.rect.width);
+}

package/dist/components/walkthrough/targeting/walkthroughTarget.d.ts

@@ -0,0 +1,6 @@
+export declare const WALKTHROUGH_TARGET_ATTRIBUTE = "data-walkthrough-target";
+export declare function walkthroughTargetProps(target: string): {
+    "data-walkthrough-target": string;
+};
+export declare function findWalkthroughTarget(target: string): HTMLElement | null;
+export declare function isEnabledWalkthroughTarget(candidate: HTMLElement): boolean;

package/dist/components/walkthrough/targeting/walkthroughTarget.js

@@ -0,0 +1,24 @@
+export const WALKTHROUGH_TARGET_ATTRIBUTE = "data-walkthrough-target";
+export function walkthroughTargetProps(target) {
+    return { "data-walkthrough-target": target };
+}
+export function findWalkthroughTarget(target) {
+    const candidates = document.querySelectorAll(`[${WALKTHROUGH_TARGET_ATTRIBUTE}]`);
+    for (let index = candidates.length - 1; index >= 0; index -= 1) {
+        const candidate = candidates.item(index);
+        if (candidate.getAttribute(WALKTHROUGH_TARGET_ATTRIBUTE) === target &&
+            isVisibleWalkthroughTarget(candidate) &&
+            isEnabledWalkthroughTarget(candidate)) {
+            return candidate;
+        }
+    }
+    return null;
+}
+export function isEnabledWalkthroughTarget(candidate) {
+    return !candidate.matches(":disabled, [aria-disabled='true']");
+}
+function isVisibleWalkthroughTarget(candidate) {
+    const rect = candidate.getBoundingClientRect();
+    const style = window.getComputedStyle(candidate);
+    return (rect.width > 0 && rect.height > 0 && style.display !== "none" && style.visibility !== "hidden");
+}

package/dist/components/walkthrough.d.ts

@@ -0,0 +1,4 @@
+export { WalkthroughProvider, type WalkthroughProviderProps, } from "./walkthrough/runtime/WalkthroughProvider.js";
+export type { WalkthroughContextValue } from "./walkthrough/runtime/WalkthroughContextDefinition.js";
+export { useWalkthrough } from "./walkthrough/runtime/useWalkthrough.js";
+export type { WalkthroughAdvance, WalkthroughDefinition, WalkthroughFreshStartHandlers, WalkthroughProgress, WalkthroughStep, } from "./walkthrough/runtime/walkthroughTypes.js";

package/dist/components/walkthrough.js

@@ -0,0 +1,2 @@
+export { WalkthroughProvider, } from "./walkthrough/runtime/WalkthroughProvider.js";
+export { useWalkthrough } from "./walkthrough/runtime/useWalkthrough.js";

package/dist/entries/walkthrough.d.ts

@@ -0,0 +1 @@
+export * from "../components/walkthrough.js";

package/dist/entries/walkthrough.js

@@ -0,0 +1 @@
+export * from "../components/walkthrough.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "0.13.0",
+	"version": "0.15.0",
 	"type": "module",
 	"private": false,
 	"engines": {