@contentstack/live-preview-utils/dist/legacy/visualBuilder/components/Tooltip.cjs.map

Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting live changes to the preview pane.

{"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"]}