@fivepixels-js/react 0.1.6 → 0.1.7

package/dist/utils/markerContext.js

@@ -0,0 +1,77 @@
+import { hasFixedPositionAncestor } from "./dom.js";
+const MODAL_REPORT_ID_PATTERN = /(?:^|-)(modal|overlay|dialog)(?:-|$)/i;
+const MODAL_GHOST_DIALOG_WIDTH = 480;
+const MODAL_GHOST_DIALOG_HEIGHT = 280;
+const MODAL_GHOST_DIALOG_MAX_WIDTH_RATIO = 0.92;
+export function isModalReportId(reportId) {
+    return MODAL_REPORT_ID_PATTERN.test(reportId);
+}
+export function usesViewportDetachedCoords(report) {
+    return !report.anchor_report_id && report.viewport_width > 0;
+}
+export function resolveDetachedKind(report, targetElement, detached) {
+    if (!detached) {
+        return null;
+    }
+    if (isModalReportId(report.report_id)) {
+        return "modal";
+    }
+    if (usesViewportDetachedCoords(report)) {
+        return "modal";
+    }
+    if (targetElement && hasFixedPositionAncestor(targetElement)) {
+        return "modal";
+    }
+    return "hidden";
+}
+export function formatModalReportLabel(reportId) {
+    const withoutPrefix = reportId.replace(/^modal-/, "");
+    const name = withoutPrefix
+        .replace(/-(overlay|target|open|demo)$/, "")
+        .split("-")
+        .filter(Boolean)
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ");
+    return name ? `${name} modal` : "Modal";
+}
+export function getModalGhostFrame(report) {
+    const widthScale = report.viewport_width > 0 ? window.innerWidth / report.viewport_width : 1;
+    const heightScale = report.viewport_height > 0 ? window.innerHeight / report.viewport_height : 1;
+    const centerX = report.viewport_width * report.x_ratio * widthScale;
+    const centerY = report.viewport_height * report.y_ratio * heightScale;
+    const dialogWidth = Math.min(MODAL_GHOST_DIALOG_WIDTH * widthScale, window.innerWidth * MODAL_GHOST_DIALOG_MAX_WIDTH_RATIO);
+    const dialogHeight = MODAL_GHOST_DIALOG_HEIGHT * heightScale;
+    return {
+        backdrop: {
+            left: 0,
+            top: 0,
+            width: window.innerWidth,
+            height: window.innerHeight,
+        },
+        dialog: {
+            left: centerX - dialogWidth / 2,
+            top: centerY - dialogHeight / 2,
+            width: dialogWidth,
+            height: dialogHeight,
+        },
+    };
+}
+export function getDetachedMarkerHint(detachedKind, messages) {
+    if (detachedKind === "modal") {
+        return messages.detachedModalHint;
+    }
+    if (detachedKind === "hidden") {
+        return messages.detachedHint;
+    }
+    return null;
+}
+export function getDetachedMarkerAriaLabel(detachedKind, messages) {
+    if (detachedKind === "modal") {
+        return messages.detachedModalAriaLabel;
+    }
+    if (detachedKind === "hidden") {
+        return messages.detachedAriaLabel;
+    }
+    return messages.detachedAriaLabel;
+}
+//# sourceMappingURL=markerContext.js.map

package/dist/utils/markerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markerContext.js","sourceRoot":"","sources":["../../src/utils/markerContext.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fivepixels-js/react",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "React library for DOM element feedback markers on staging, QA, and internal tool UIs",
   "license": "MIT",
   "keywords": [