@contentstack/live-preview-utils 3.2.5 → 3.3.0

package/dist/modern/visualBuilder/components/Tooltip.cjs

@@ -0,0 +1,167 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/visualBuilder/components/Tooltip.tsx
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  ToolbarTooltip: () => ToolbarTooltip,
+  default: () => Tooltip_default
+});
+module.exports = __toCommonJS(Tooltip_exports);
+var import_preact = require("preact");
+var import_hooks = require("preact/hooks");
+var import_dom = require("@floating-ui/dom");
+var import_visualBuilder = require("../visualBuilder.style.cjs");
+var import_classnames = __toESM(require("classnames"), 1);
+var import_icons = require("./icons/index.cjs");
+var import_generateCustomCursor = require("../generators/generateCustomCursor.cjs");
+var import_jsx_runtime = require("preact/jsx-runtime");
+var Tooltip = ({ children, content, placement = "top-start" }) => {
+  const [isVisible, setIsVisible] = (0, import_hooks.useState)(false);
+  const triggerRef = (0, import_hooks.useRef)(null);
+  const tooltipRef = (0, import_hooks.useRef)(null);
+  const arrowRef = (0, import_hooks.useRef)(null);
+  const showTooltip = () => setIsVisible(true);
+  const hideTooltip = () => setIsVisible(false);
+  (0, import_hooks.useEffect)(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const trigger = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    (0, import_dom.computePosition)(trigger, tooltip, {
+      placement,
+      // Middleware runs in order to modify the position
+      middleware: [
+        (0, import_dom.offset)(8),
+        // Add 8px of space between the trigger and tooltip
+        (0, import_dom.flip)(),
+        // Flip to the opposite side if it overflows
+        (0, import_dom.shift)({ padding: 5 }),
+        // Shift to keep it in view
+        ...arrowRef.current ? [(0, import_dom.arrow)({ element: arrowRef.current })] : []
+        // Handle arrow positioning
+      ]
+    }).then(({ x, y, placement: placement2, middlewareData }) => {
+      Object.assign(tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      if (middlewareData.arrow && arrowRef.current) {
+        const { x: arrowX, y: arrowY } = middlewareData.arrow;
+        const side = placement2.split("-")[0];
+        const staticSide = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right"
+        }[side];
+        const arrowElement = arrowRef.current;
+        Object.assign(arrowElement.style, {
+          left: "",
+          top: "",
+          right: "",
+          bottom: ""
+        });
+        if (placement2.includes("-start") || placement2.includes("-end")) {
+          const tooltipRect = tooltip.getBoundingClientRect();
+          if (side === "top" || side === "bottom") {
+            arrowElement.style.left = `${14}px`;
+            if (arrowY != null) {
+              arrowElement.style.top = `${arrowY}px`;
+            }
+          } else {
+            arrowElement.style.top = `${tooltipRect.height / 2 - 4}px`;
+            if (arrowX != null) {
+              arrowElement.style.left = `${arrowX}px`;
+            }
+          }
+        } else {
+          if (arrowX != null) {
+            arrowElement.style.left = `${arrowX}px`;
+          }
+          if (arrowY != null) {
+            arrowElement.style.top = `${arrowY}px`;
+          }
+        }
+        arrowElement.style[staticSide] = "-4px";
+      }
+    });
+  }, [isVisible, placement, content]);
+  const triggerWithListeners = (0, import_preact.cloneElement)(children, {
+    ref: triggerRef,
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: showTooltip,
+    onBlur: hideTooltip,
+    "aria-describedby": "lightweight-tooltip"
+    // for accessibility
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    triggerWithListeners,
+    isVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: tooltipRef,
+        role: "tooltip",
+        id: "lightweight-tooltip",
+        className: (0, import_classnames.default)("tooltip-container", (0, import_visualBuilder.visualBuilderStyles)()["tooltip-container"]),
+        children: [
+          content,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: arrowRef, className: (0, import_classnames.default)("tooltip-arrow", (0, import_visualBuilder.visualBuilderStyles)()["tooltip-arrow"]) })
+        ]
+      }
+    )
+  ] });
+};
+function ToolbarTooltipContent({ contentTypeName, referenceFieldName }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_classnames.default)("toolbar-tooltip-content", (0, import_visualBuilder.visualBuilderStyles)()["toolbar-tooltip-content"]), children: [
+    contentTypeName && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_classnames.default)("toolbar-tooltip-content-item", (0, import_visualBuilder.visualBuilderStyles)()["toolbar-tooltip-content-item"]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ContentTypeIcon, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: contentTypeName })
+    ] }),
+    referenceFieldName && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_classnames.default)("toolbar-tooltip-content-item", (0, import_visualBuilder.visualBuilderStyles)()["toolbar-tooltip-content-item"]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dangerouslySetInnerHTML: { __html: import_generateCustomCursor.FieldTypeIconsMap.reference }, className: (0, import_classnames.default)("visual-builder__field-icon", (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__field-icon"]) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: referenceFieldName })
+    ] })
+  ] });
+}
+function ToolbarTooltip({ children, data, disabled = false }) {
+  if (disabled) {
+    return children;
+  }
+  const { contentTypeName, referenceFieldName } = data;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarTooltipContent, { contentTypeName, referenceFieldName }), children });
+}
+var Tooltip_default = Tooltip;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToolbarTooltip
+});
+//# sourceMappingURL=Tooltip.cjs.map

package/dist/modern/visualBuilder/components/Tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/Tooltip.tsx"],"sourcesContent":["import { h, cloneElement } from 'preact';\nimport { useState, useEffect, useRef } from 'preact/hooks';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow\n} from '@floating-ui/dom';\nimport { visualBuilderStyles } from '../visualBuilder.style';\nimport classNames from 'classnames';\nimport { ContentTypeIcon } from './icons';\nimport { FieldTypeIconsMap } from '../generators/generateCustomCursor';\ninterface TooltipProps {\n  children: JSX.Element;\n  content: JSX.Element;\n  placement?: 'top-start' | 'bottom-start' | 'left-start' | 'right-start';\n}\n\n/**\n * A lightweight, reusable tooltip component for Preact powered by Floating UI.\n *\n * @param {object} props - The component props.\n * @param {preact.ComponentChildren} props.children - The single child element that triggers the tooltip.\n * @param {string | preact.VNode} props.content - The content to display inside the tooltip.\n * @param {'top'|'bottom'|'left'|'right'} [props.placement='top'] - The desired placement of the tooltip.\n */\nconst Tooltip = ({ children, content, placement = 'top-start' }: TooltipProps) => {\n    const [isVisible, setIsVisible] = useState(false);\n    // Create refs for the trigger and the floating tooltip elements\n    const triggerRef = useRef(null);\n    const tooltipRef = useRef(null);\n    const arrowRef = useRef(null);\n\n    const showTooltip = () => setIsVisible(true);\n    const hideTooltip = () => setIsVisible(false);\n\n    // This effect calculates the tooltip's position whenever it becomes visible\n    // or if its content or placement changes.\n    useEffect(() => {\n        if (!isVisible || !triggerRef.current || !tooltipRef.current) {\n            return;\n        }\n\n        const trigger = triggerRef.current as HTMLElement;\n        const tooltip = tooltipRef.current as HTMLElement;\n\n        computePosition(trigger, tooltip, {\n            placement,\n            // Middleware runs in order to modify the position\n            middleware: [\n                offset(8), // Add 8px of space between the trigger and tooltip\n                flip(),    // Flip to the opposite side if it overflows\n                shift({ padding: 5 }), // Shift to keep it in view\n                ...(arrowRef.current ? [arrow({ element: arrowRef.current as HTMLElement })] : []), // Handle arrow positioning\n            ],\n        }).then(({ x, y, placement, middlewareData }) => {\n            // Apply the calculated coordinates to the tooltip element\n            Object.assign(tooltip.style, {\n                left: `${x}px`,\n                top: `${y}px`,\n            });\n\n            // Position the arrow element\n            if (middlewareData.arrow && arrowRef.current) {\n                const { x: arrowX, y: arrowY } = middlewareData.arrow;\n                const side = placement.split('-')[0];\n                const staticSide = {\n                    top: 'bottom',\n                    right: 'left',\n                    bottom: 'top',\n                    left: 'right',\n                }[side] as string;\n\n                const arrowElement = arrowRef.current as HTMLElement;\n                \n                // Reset all positioning properties\n                Object.assign(arrowElement.style, {\n                    left: '',\n                    top: '',\n                    right: '',\n                    bottom: '',\n                });\n\n                // For placements like top-start, bottom-start, etc., we want the arrow \n                // to be centered on the tooltip rather than pointing at the trigger center\n                if (placement.includes('-start') || placement.includes('-end')) {\n                    const tooltipRect = tooltip.getBoundingClientRect();\n                    \n                    if (side === 'top' || side === 'bottom') {\n                        // For top/bottom placements, center the arrow horizontally\n                        arrowElement.style.left = `${14}px`; // 4px = half arrow width\n                        if (arrowY != null) {\n                            arrowElement.style.top = `${arrowY}px`;\n                        }\n                    } else {\n                        // For left/right placements, center the arrow vertically\n                        arrowElement.style.top = `${tooltipRect.height / 2 - 4}px`; // 4px = half arrow height\n                        if (arrowX != null) {\n                            arrowElement.style.left = `${arrowX}px`;\n                        }\n                    }\n                } else {\n                    // For regular placements (top, bottom, left, right), use floating-ui's positioning\n                    if (arrowX != null) {\n                        arrowElement.style.left = `${arrowX}px`;\n                    }\n                    if (arrowY != null) {\n                        arrowElement.style.top = `${arrowY}px`;\n                    }\n                }\n\n                // Position arrow to overlap the tooltip's border\n                (arrowElement.style as any)[staticSide] = '-4px';\n            }\n        });\n\n    }, [isVisible, placement, content]);\n\n    // We need to clone the child element to attach our ref and event listeners.\n    // This ensures we don't wrap the child in an extra <div>.\n    const triggerWithListeners = cloneElement(children, {\n        ref: triggerRef,\n        onMouseEnter: showTooltip,\n        onMouseLeave: hideTooltip,\n        onFocus: showTooltip,\n        onBlur: hideTooltip,\n        'aria-describedby': 'lightweight-tooltip' // for accessibility\n    });\n\n    return (\n        <>\n            {triggerWithListeners}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    role=\"tooltip\"\n                    id=\"lightweight-tooltip\"\n                    className={classNames(\"tooltip-container\", visualBuilderStyles()[\"tooltip-container\"])}\n                >\n                    {content}\n                    <div ref={arrowRef} className={classNames(\"tooltip-arrow\", visualBuilderStyles()[\"tooltip-arrow\"])}></div>\n                </div>\n            )}\n        </>\n    );\n};\n\nfunction ToolbarTooltipContent({contentTypeName, referenceFieldName}: {contentTypeName: string, referenceFieldName: string}) {\n  return (\n    <div className={classNames(\"toolbar-tooltip-content\", visualBuilderStyles()[\"toolbar-tooltip-content\"])}>\n      {\n        contentTypeName && (\n          <div className={classNames(\"toolbar-tooltip-content-item\", visualBuilderStyles()[\"toolbar-tooltip-content-item\"])}>\n            <ContentTypeIcon />\n            <p>{contentTypeName}</p>\n          </div>\n        )\n      }\n      {\n        referenceFieldName && (\n          <div className={classNames(\"toolbar-tooltip-content-item\", visualBuilderStyles()[\"toolbar-tooltip-content-item\"])}>\n            <div dangerouslySetInnerHTML={{__html: FieldTypeIconsMap.reference}} className={classNames(\"visual-builder__field-icon\", visualBuilderStyles()[\"visual-builder__field-icon\"])}/>\n            <p>{referenceFieldName}</p>\n          </div>\n        )\n      }\n    </div>\n  )\n}\n\nexport function ToolbarTooltip({children, data, disabled = false}: {children: JSX.Element, data: {contentTypeName: string, referenceFieldName: string}, disabled?: boolean}) {\n  if (disabled) {\n    return children;\n  }\n  const { contentTypeName, referenceFieldName } = data;\n  return (\n    <Tooltip content={<ToolbarTooltipContent contentTypeName={contentTypeName} referenceFieldName={referenceFieldName} />}>\n      {children}\n    </Tooltip>\n  )\n}\n\nexport default Tooltip;"],"mappings":"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","names":["placement","classNames"]}

package/dist/modern/visualBuilder/components/Tooltip.d.cts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TooltipProps {
+    children: JSX.Element;
+    content: JSX.Element;
+    placement?: 'top-start' | 'bottom-start' | 'left-start' | 'right-start';
+}
+/**
+ * A lightweight, reusable tooltip component for Preact powered by Floating UI.
+ *
+ * @param {object} props - The component props.
+ * @param {preact.ComponentChildren} props.children - The single child element that triggers the tooltip.
+ * @param {string | preact.VNode} props.content - The content to display inside the tooltip.
+ * @param {'top'|'bottom'|'left'|'right'} [props.placement='top'] - The desired placement of the tooltip.
+ */
+declare const Tooltip: ({ children, content, placement }: TooltipProps) => react_jsx_runtime.JSX.Element;
+declare function ToolbarTooltip({ children, data, disabled }: {
+    children: JSX.Element;
+    data: {
+        contentTypeName: string;
+        referenceFieldName: string;
+    };
+    disabled?: boolean;
+}): JSX.Element;
+
+export { ToolbarTooltip, Tooltip as default };

package/dist/modern/visualBuilder/components/Tooltip.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TooltipProps {
+    children: JSX.Element;
+    content: JSX.Element;
+    placement?: 'top-start' | 'bottom-start' | 'left-start' | 'right-start';
+}
+/**
+ * A lightweight, reusable tooltip component for Preact powered by Floating UI.
+ *
+ * @param {object} props - The component props.
+ * @param {preact.ComponentChildren} props.children - The single child element that triggers the tooltip.
+ * @param {string | preact.VNode} props.content - The content to display inside the tooltip.
+ * @param {'top'|'bottom'|'left'|'right'} [props.placement='top'] - The desired placement of the tooltip.
+ */
+declare const Tooltip: ({ children, content, placement }: TooltipProps) => react_jsx_runtime.JSX.Element;
+declare function ToolbarTooltip({ children, data, disabled }: {
+    children: JSX.Element;
+    data: {
+        contentTypeName: string;
+        referenceFieldName: string;
+    };
+    disabled?: boolean;
+}): JSX.Element;
+
+export { ToolbarTooltip, Tooltip as default };

package/dist/modern/visualBuilder/components/Tooltip.js

@@ -0,0 +1,140 @@
+import "../../chunk-5WRI5ZAA.js";
+
+// src/visualBuilder/components/Tooltip.tsx
+import { cloneElement } from "preact";
+import { useState, useEffect, useRef } from "preact/hooks";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  arrow
+} from "@floating-ui/dom";
+import { visualBuilderStyles } from "../visualBuilder.style.js";
+import classNames from "classnames";
+import { ContentTypeIcon } from "./icons/index.js";
+import { FieldTypeIconsMap } from "../generators/generateCustomCursor.js";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+var Tooltip = ({ children, content, placement = "top-start" }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const arrowRef = useRef(null);
+  const showTooltip = () => setIsVisible(true);
+  const hideTooltip = () => setIsVisible(false);
+  useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const trigger = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    computePosition(trigger, tooltip, {
+      placement,
+      // Middleware runs in order to modify the position
+      middleware: [
+        offset(8),
+        // Add 8px of space between the trigger and tooltip
+        flip(),
+        // Flip to the opposite side if it overflows
+        shift({ padding: 5 }),
+        // Shift to keep it in view
+        ...arrowRef.current ? [arrow({ element: arrowRef.current })] : []
+        // Handle arrow positioning
+      ]
+    }).then(({ x, y, placement: placement2, middlewareData }) => {
+      Object.assign(tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      if (middlewareData.arrow && arrowRef.current) {
+        const { x: arrowX, y: arrowY } = middlewareData.arrow;
+        const side = placement2.split("-")[0];
+        const staticSide = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right"
+        }[side];
+        const arrowElement = arrowRef.current;
+        Object.assign(arrowElement.style, {
+          left: "",
+          top: "",
+          right: "",
+          bottom: ""
+        });
+        if (placement2.includes("-start") || placement2.includes("-end")) {
+          const tooltipRect = tooltip.getBoundingClientRect();
+          if (side === "top" || side === "bottom") {
+            arrowElement.style.left = `${14}px`;
+            if (arrowY != null) {
+              arrowElement.style.top = `${arrowY}px`;
+            }
+          } else {
+            arrowElement.style.top = `${tooltipRect.height / 2 - 4}px`;
+            if (arrowX != null) {
+              arrowElement.style.left = `${arrowX}px`;
+            }
+          }
+        } else {
+          if (arrowX != null) {
+            arrowElement.style.left = `${arrowX}px`;
+          }
+          if (arrowY != null) {
+            arrowElement.style.top = `${arrowY}px`;
+          }
+        }
+        arrowElement.style[staticSide] = "-4px";
+      }
+    });
+  }, [isVisible, placement, content]);
+  const triggerWithListeners = cloneElement(children, {
+    ref: triggerRef,
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: showTooltip,
+    onBlur: hideTooltip,
+    "aria-describedby": "lightweight-tooltip"
+    // for accessibility
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerWithListeners,
+    isVisible && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: tooltipRef,
+        role: "tooltip",
+        id: "lightweight-tooltip",
+        className: classNames("tooltip-container", visualBuilderStyles()["tooltip-container"]),
+        children: [
+          content,
+          /* @__PURE__ */ jsx("div", { ref: arrowRef, className: classNames("tooltip-arrow", visualBuilderStyles()["tooltip-arrow"]) })
+        ]
+      }
+    )
+  ] });
+};
+function ToolbarTooltipContent({ contentTypeName, referenceFieldName }) {
+  return /* @__PURE__ */ jsxs("div", { className: classNames("toolbar-tooltip-content", visualBuilderStyles()["toolbar-tooltip-content"]), children: [
+    contentTypeName && /* @__PURE__ */ jsxs("div", { className: classNames("toolbar-tooltip-content-item", visualBuilderStyles()["toolbar-tooltip-content-item"]), children: [
+      /* @__PURE__ */ jsx(ContentTypeIcon, {}),
+      /* @__PURE__ */ jsx("p", { children: contentTypeName })
+    ] }),
+    referenceFieldName && /* @__PURE__ */ jsxs("div", { className: classNames("toolbar-tooltip-content-item", visualBuilderStyles()["toolbar-tooltip-content-item"]), children: [
+      /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: FieldTypeIconsMap.reference }, className: classNames("visual-builder__field-icon", visualBuilderStyles()["visual-builder__field-icon"]) }),
+      /* @__PURE__ */ jsx("p", { children: referenceFieldName })
+    ] })
+  ] });
+}
+function ToolbarTooltip({ children, data, disabled = false }) {
+  if (disabled) {
+    return children;
+  }
+  const { contentTypeName, referenceFieldName } = data;
+  return /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ToolbarTooltipContent, { contentTypeName, referenceFieldName }), children });
+}
+var Tooltip_default = Tooltip;
+export {
+  ToolbarTooltip,
+  Tooltip_default as default
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/modern/visualBuilder/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/visualBuilder/components/Tooltip.tsx"],"sourcesContent":["import { h, cloneElement } from 'preact';\nimport { useState, useEffect, useRef } from 'preact/hooks';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow\n} from '@floating-ui/dom';\nimport { visualBuilderStyles } from '../visualBuilder.style';\nimport classNames from 'classnames';\nimport { ContentTypeIcon } from './icons';\nimport { FieldTypeIconsMap } from '../generators/generateCustomCursor';\ninterface TooltipProps {\n  children: JSX.Element;\n  content: JSX.Element;\n  placement?: 'top-start' | 'bottom-start' | 'left-start' | 'right-start';\n}\n\n/**\n * A lightweight, reusable tooltip component for Preact powered by Floating UI.\n *\n * @param {object} props - The component props.\n * @param {preact.ComponentChildren} props.children - The single child element that triggers the tooltip.\n * @param {string | preact.VNode} props.content - The content to display inside the tooltip.\n * @param {'top'|'bottom'|'left'|'right'} [props.placement='top'] - The desired placement of the tooltip.\n */\nconst Tooltip = ({ children, content, placement = 'top-start' }: TooltipProps) => {\n    const [isVisible, setIsVisible] = useState(false);\n    // Create refs for the trigger and the floating tooltip elements\n    const triggerRef = useRef(null);\n    const tooltipRef = useRef(null);\n    const arrowRef = useRef(null);\n\n    const showTooltip = () => setIsVisible(true);\n    const hideTooltip = () => setIsVisible(false);\n\n    // This effect calculates the tooltip's position whenever it becomes visible\n    // or if its content or placement changes.\n    useEffect(() => {\n        if (!isVisible || !triggerRef.current || !tooltipRef.current) {\n            return;\n        }\n\n        const trigger = triggerRef.current as HTMLElement;\n        const tooltip = tooltipRef.current as HTMLElement;\n\n        computePosition(trigger, tooltip, {\n            placement,\n            // Middleware runs in order to modify the position\n            middleware: [\n                offset(8), // Add 8px of space between the trigger and tooltip\n                flip(),    // Flip to the opposite side if it overflows\n                shift({ padding: 5 }), // Shift to keep it in view\n                ...(arrowRef.current ? [arrow({ element: arrowRef.current as HTMLElement })] : []), // Handle arrow positioning\n            ],\n        }).then(({ x, y, placement, middlewareData }) => {\n            // Apply the calculated coordinates to the tooltip element\n            Object.assign(tooltip.style, {\n                left: `${x}px`,\n                top: `${y}px`,\n            });\n\n            // Position the arrow element\n            if (middlewareData.arrow && arrowRef.current) {\n                const { x: arrowX, y: arrowY } = middlewareData.arrow;\n                const side = placement.split('-')[0];\n                const staticSide = {\n                    top: 'bottom',\n                    right: 'left',\n                    bottom: 'top',\n                    left: 'right',\n                }[side] as string;\n\n                const arrowElement = arrowRef.current as HTMLElement;\n                \n                // Reset all positioning properties\n                Object.assign(arrowElement.style, {\n                    left: '',\n                    top: '',\n                    right: '',\n                    bottom: '',\n                });\n\n                // For placements like top-start, bottom-start, etc., we want the arrow \n                // to be centered on the tooltip rather than pointing at the trigger center\n                if (placement.includes('-start') || placement.includes('-end')) {\n                    const tooltipRect = tooltip.getBoundingClientRect();\n                    \n                    if (side === 'top' || side === 'bottom') {\n                        // For top/bottom placements, center the arrow horizontally\n                        arrowElement.style.left = `${14}px`; // 4px = half arrow width\n                        if (arrowY != null) {\n                            arrowElement.style.top = `${arrowY}px`;\n                        }\n                    } else {\n                        // For left/right placements, center the arrow vertically\n                        arrowElement.style.top = `${tooltipRect.height / 2 - 4}px`; // 4px = half arrow height\n                        if (arrowX != null) {\n                            arrowElement.style.left = `${arrowX}px`;\n                        }\n                    }\n                } else {\n                    // For regular placements (top, bottom, left, right), use floating-ui's positioning\n                    if (arrowX != null) {\n                        arrowElement.style.left = `${arrowX}px`;\n                    }\n                    if (arrowY != null) {\n                        arrowElement.style.top = `${arrowY}px`;\n                    }\n                }\n\n                // Position arrow to overlap the tooltip's border\n                (arrowElement.style as any)[staticSide] = '-4px';\n            }\n        });\n\n    }, [isVisible, placement, content]);\n\n    // We need to clone the child element to attach our ref and event listeners.\n    // This ensures we don't wrap the child in an extra <div>.\n    const triggerWithListeners = cloneElement(children, {\n        ref: triggerRef,\n        onMouseEnter: showTooltip,\n        onMouseLeave: hideTooltip,\n        onFocus: showTooltip,\n        onBlur: hideTooltip,\n        'aria-describedby': 'lightweight-tooltip' // for accessibility\n    });\n\n    return (\n        <>\n            {triggerWithListeners}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    role=\"tooltip\"\n                    id=\"lightweight-tooltip\"\n                    className={classNames(\"tooltip-container\", visualBuilderStyles()[\"tooltip-container\"])}\n                >\n                    {content}\n                    <div ref={arrowRef} className={classNames(\"tooltip-arrow\", visualBuilderStyles()[\"tooltip-arrow\"])}></div>\n                </div>\n            )}\n        </>\n    );\n};\n\nfunction ToolbarTooltipContent({contentTypeName, referenceFieldName}: {contentTypeName: string, referenceFieldName: string}) {\n  return (\n    <div className={classNames(\"toolbar-tooltip-content\", visualBuilderStyles()[\"toolbar-tooltip-content\"])}>\n      {\n        contentTypeName && (\n          <div className={classNames(\"toolbar-tooltip-content-item\", visualBuilderStyles()[\"toolbar-tooltip-content-item\"])}>\n            <ContentTypeIcon />\n            <p>{contentTypeName}</p>\n          </div>\n        )\n      }\n      {\n        referenceFieldName && (\n          <div className={classNames(\"toolbar-tooltip-content-item\", visualBuilderStyles()[\"toolbar-tooltip-content-item\"])}>\n            <div dangerouslySetInnerHTML={{__html: FieldTypeIconsMap.reference}} className={classNames(\"visual-builder__field-icon\", visualBuilderStyles()[\"visual-builder__field-icon\"])}/>\n            <p>{referenceFieldName}</p>\n          </div>\n        )\n      }\n    </div>\n  )\n}\n\nexport function ToolbarTooltip({children, data, disabled = false}: {children: JSX.Element, data: {contentTypeName: string, referenceFieldName: string}, disabled?: boolean}) {\n  if (disabled) {\n    return children;\n  }\n  const { contentTypeName, referenceFieldName } = data;\n  return (\n    <Tooltip content={<ToolbarTooltipContent contentTypeName={contentTypeName} referenceFieldName={referenceFieldName} />}>\n      {children}\n    </Tooltip>\n  )\n}\n\nexport default Tooltip;"],"mappings":"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","names":["placement"]}

package/dist/modern/visualBuilder/components/fieldLabelWrapper.cjs

@@ -48,24 +48,50 @@ var import_CslpError = require("./CslpError.cjs");
 var import_errorHandling = require("../utils/errorHandling.cjs");
 var import_postMessage = require("../utils/types/postMessage.types.cjs");
 var import_getEntryPermissionsCached = require("../utils/getEntryPermissionsCached.cjs");
+var import_icons2 = require("./icons/index.cjs");
+var import_Tooltip = require("./Tooltip.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 async function getFieldDisplayNames(fieldMetadata) {
   const result = await import_visualBuilderPostMessage.default?.send(import_postMessage.VisualBuilderPostMessageEvents.GET_FIELD_DISPLAY_NAMES, fieldMetadata);
   return result;
 }
+async function getContentTypeName(contentTypeUid) {
+  try {
+    const result = await import_visualBuilderPostMessage.default?.send(import_postMessage.VisualBuilderPostMessageEvents.GET_CONTENT_TYPE_NAME, {
+      content_type_uid: contentTypeUid
+    });
+    return result?.contentTypeName;
+  } catch (e) {
+    console.warn("[getFieldLabelWrapper] Error getting content type name", e);
+    return "";
+  }
+}
+async function getReferenceParentMap() {
+  try {
+    const result = await import_visualBuilderPostMessage.default?.send(import_postMessage.VisualBuilderPostMessageEvents.REFERENCE_MAP, {}) ?? {};
+    return result;
+  } catch (e) {
+    console.warn("[getFieldLabelWrapper] Error getting reference parent map", e);
+    return {};
+  }
+}
 function FieldLabelWrapperComponent(props) {
   const { eventDetails } = props;
   const [currentField, setCurrentField] = (0, import_compat.useState)({
     text: "",
+    contentTypeName: "",
     icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretIcon, {}),
     prefixIcon: null,
     disabled: false,
-    isVariant: false
+    isVariant: false,
+    isReference: false,
+    referenceFieldName: "",
+    parentContentTypeName: ""
   });
   const [displayNames, setDisplayNames] = (0, import_compat.useState)(
     {}
   );
-  const [displayNamesLoading, setDisplayNamesLoading] = (0, import_compat.useState)(true);
+  const [dataLoading, setDataLoading] = (0, import_compat.useState)(true);
   const [error, setError] = (0, import_compat.useState)(false);
   const [isDropdownOpen, setIsDropdownOpen] = (0, import_compat.useState)(false);
   function calculateTopOffset(index) {
@@ -75,7 +101,7 @@ function FieldLabelWrapperComponent(props) {
   }
   (0, import_compat.useEffect)(() => {
     const fetchData = async () => {
-      setDisplayNamesLoading(true);
+      setDataLoading(true);
       const allPaths = (0, import_lodash_es.uniqBy)(
         [
           props.fieldMetadata,
@@ -85,13 +111,37 @@ function FieldLabelWrapperComponent(props) {
         ],
         "cslpValue"
       );
-      const displayNames2 = await getFieldDisplayNames(allPaths);
-      const fieldSchema = await import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(
-        props.fieldMetadata.content_type_uid,
-        props.fieldMetadata.fieldPath
-      );
+      const [displayNames2, fieldSchema, contentTypeName, referenceParentMap] = await Promise.all([
+        getFieldDisplayNames(allPaths),
+        import_fieldSchemaMap.FieldSchemaMap.getFieldSchema(
+          props.fieldMetadata.content_type_uid,
+          props.fieldMetadata.fieldPath
+        ),
+        getContentTypeName(
+          props.fieldMetadata.content_type_uid
+        ),
+        getReferenceParentMap()
+      ]);
+      const entryUid = props.fieldMetadata.entry_uid;
+      const referenceData = referenceParentMap[entryUid];
+      const isReference = !!referenceData;
+      let referenceFieldName = referenceData ? referenceData[0].referenceFieldName : "";
+      let parentContentTypeName = referenceData ? referenceData[0].contentTypeTitle : "";
+      if (isReference) {
+        const domAncestor = eventDetails.editableElement.closest(`[data-cslp]:not([data-cslp^="${props.fieldMetadata.content_type_uid}"])`);
+        if (domAncestor) {
+          const domAncestorCslp = domAncestor.getAttribute("data-cslp");
+          const domAncestorDetails = (0, import_cslp.extractDetailsFromCslp)(domAncestorCslp);
+          const domAncestorContentTypeUid = domAncestorDetails.content_type_uid;
+          const domAncestorContentParent = referenceData?.find((data) => data.contentTypeUid === domAncestorContentTypeUid);
+          if (domAncestorContentParent) {
+            referenceFieldName = domAncestorContentParent.referenceFieldName;
+            parentContentTypeName = domAncestorContentParent.contentTypeTitle;
+          }
+        }
+      }
       if ((0, import_errorHandling.hasPostMessageError)(displayNames2) || !fieldSchema) {
-        setDisplayNamesLoading(false);
+        setDataLoading(false);
         setError(true);
         return;
       }
@@ -110,6 +160,7 @@ function FieldLabelWrapperComponent(props) {
       const isVariant = props.fieldMetadata.variant ? true : false;
       setCurrentField({
         text: currentFieldDisplayName,
+        contentTypeName: contentTypeName ?? "",
         icon: fieldDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
@@ -120,18 +171,25 @@ function FieldLabelWrapperComponent(props) {
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.InfoIcon, {})
           }
         ) : hasParentPaths ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}),
+        isReference,
         prefixIcon: (0, import_generateCustomCursor.getFieldIcon)(fieldSchema),
         disabled: fieldDisabled,
+        referenceFieldName,
+        parentContentTypeName,
         isVariant
       });
       if (displayNames2) {
         setDisplayNames(displayNames2);
       }
       if (Object.keys(displayNames2 || {})?.length === allPaths.length) {
-        setDisplayNamesLoading(false);
+        setDataLoading(false);
       }
     };
-    fetchData();
+    try {
+      fetchData();
+    } catch (e) {
+      console.warn("[getFieldLabelWrapper] Error fetching field label data", e);
+    }
   }, [props]);
   const onParentPathClick = (cslp) => {
     const parentElement = props.getParentEditableElement(cslp);
@@ -142,7 +200,7 @@ function FieldLabelWrapperComponent(props) {
   function getCurrentFieldIcon() {
     if (error) {
       return null;
-    } else if (displayNamesLoading) {
+    } else if (dataLoading) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.LoadingIcon, {});
     } else {
       return currentField.icon;
@@ -155,7 +213,7 @@ function FieldLabelWrapperComponent(props) {
         "visual-builder__focused-toolbar__field-label-container",
         (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__field-label-container"]
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.ToolbarTooltip, { data: { contentTypeName: currentField.parentContentTypeName, referenceFieldName: currentField.referenceFieldName }, disabled: !currentField.isReference || isDropdownOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
           className: (0, import_classnames.default)(
@@ -174,6 +232,7 @@ function FieldLabelWrapperComponent(props) {
           ),
           onClick: () => setIsDropdownOpen((prev) => !prev),
           "data-testid": "visual-builder__focused-toolbar__field-label-wrapper",
+          "data-hovered-cslp": props.fieldMetadata.cslpValue,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               "button",
@@ -186,8 +245,47 @@ function FieldLabelWrapperComponent(props) {
                   (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button-loader"],
                   error && (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__button-error"]
                 ),
-                disabled: displayNamesLoading,
+                disabled: dataLoading,
                 children: [
+                  currentField.isReference && !dataLoading && !error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      className: (0, import_classnames.default)(
+                        "visual-builder__reference-icon-container",
+                        (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__reference-icon-container"]
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "div",
+                          {
+                            className: (0, import_classnames.default)(
+                              "visual-builder__field-icon",
+                              (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__field-icon"]
+                            ),
+                            dangerouslySetInnerHTML: {
+                              __html: import_generateCustomCursor.FieldTypeIconsMap.reference
+                            },
+                            "data-testid": "visual-builder__field-icon-caret"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretRightIcon, {})
+                      ]
+                    }
+                  ) : null,
+                  currentField.contentTypeName && !dataLoading && !error ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.ContentTypeIcon, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: (0, import_classnames.default)(
+                          "visual-builder__focused-toolbar__text",
+                          (0, import_visualBuilder.visualBuilderStyles)()["visual-builder__focused-toolbar__text"]
+                        ),
+                        "data-testid": "visual-builder__focused-toolbar__ct-name",
+                        children: currentField.contentTypeName + " : "
+                      }
+                    )
+                  ] }) : null,
                   currentField.prefixIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "div",
                     {
@@ -236,7 +334,7 @@ function FieldLabelWrapperComponent(props) {
             ))
           ]
         }
-      )
+      ) })
     }
   );
 }