@atlaskit/editor-plugin-mentions/dist/es2019/nodeviews/disabledTooltipRenderer.js

Mentions plugin for @atlaskit/editor-core

/* disabledTooltipRenderer.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./disabledTooltipRenderer.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useEffect, useState } from 'react';
import { bindAll } from 'bind-event-listener';
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- mirror existing renderer pattern
import uuid from 'uuid/v4';
import Tooltip from '@atlaskit/tooltip';
const styles = {
  hiddenTrigger: "_1e0cglyw"
};

/**
 * ADS `<Tooltip>` hands us a ref via its render-prop child. That ref may be
 * either a callback ref or a mutable ref object — React supports both shapes
 * and ADS's typing keeps both possible. This helper assigns the supplied
 * element to whichever ref shape was provided so the tooltip ends up using
 * the chip's bounding box for positioning and its DOM for trigger events.
 */
const assignRef = (ref, element) => {
  if (typeof ref === 'function') {
    ref(element);
  } else if (ref) {
    ref.current = element;
  }
};

/**
 * Names of the React-style trigger-prop handlers we forward from ADS
 * `<Tooltip>` onto the chip element.
 */

/**
 * Maps each React-style trigger-prop handler ADS `<Tooltip>` hands us in its
 * render-prop callback to the DOM event name we attach to the chip via
 * `bind-event-listener`. The chip lives in the ProseMirror document and is
 * not a React child of the tooltip, so we have to bridge React handlers to
 * native event listeners ourselves.
 *
 * Names are listed in the same order ADS internally registers them.
 */
const TRIGGER_EVENT_MAP = [['onMouseOver', 'mouseover'], ['onMouseOut', 'mouseout'], ['onMouseMove', 'mousemove'], ['onMouseDown', 'mousedown'], ['onFocus', 'focusin'], ['onBlur', 'focusout']];

/**
 * Anchors an ADS `<Tooltip>` to a ProseMirror chip element that is **not** a
 * React child of the tooltip. The chip itself stays in the PM document; this
 * renderer mounts an always-present React subtree via `portalProviderAPI` whose
 * sole job is to host the tooltip and forward the ADS-provided trigger ref +
 * event handlers onto the chip.
 *
 * The forwarding is deliberate: ADS `<Tooltip>` expects to attach its hover /
 * focus / blur listeners to its render-prop child, but our render-prop child
 * is a `display: none` placeholder span that no real event can reach. We bridge
 * those listeners to the chip via `addEventListener` so the tooltip opens and
 * closes in response to the user actually interacting with the chip — keyboard
 * focus, mouse hover, screen-reader focus, the lot.
 */

/**
 * Hook that mirrors ADS Tooltip's React trigger props onto a DOM element
 * which is not a React child of the tooltip. Re-attaches whenever ADS hands
 * us a fresh set of props (which happens on every render of the render-prop
 * child) and cleans up on unmount.
 *
 * We use `bind-event-listener`'s `bindAll` rather than raw
 * `addEventListener` / `removeEventListener` calls so the lifetime of every
 * subscription is paired with a single `UnbindFn` — the AFM-mandated pattern
 * for keeping listener bookkeeping leak-free.
 */
const useBridgedTriggerListeners = (chip, triggerProps) => {
  useEffect(() => {
    // Build the bindAll bindings array out of only the handlers ADS actually
    // supplied. Each React handler is wrapped in a thin adapter so the
    // listener signature matches the native `EventListener` shape; ADS
    // handlers ignore the synthetic-event-only fields they don't use
    // (target, currentTarget), so passing the raw DOM event through
    // `unknown` is safe in practice.
    const bindings = TRIGGER_EVENT_MAP.flatMap(([propName, eventName]) => {
      const handler = triggerProps[propName];
      if (!handler) {
        return [];
      }
      return [{
        type: eventName,
        listener: event => {
          handler(event);
        }
      }];
    });
    if (bindings.length === 0) {
      return;
    }
    const unbind = bindAll(chip, bindings);
    return unbind;
  }, [chip, triggerProps]);
};
const AnchoredTooltip = ({
  subscribe,
  getInitialTooltip,
  referenceElement
}) => {
  const [tooltip, setTooltipState] = useState(getInitialTooltip);
  useEffect(() => subscribe(setTooltipState), [subscribe]);
  if (!tooltip) {
    return null;
  }
  return /*#__PURE__*/React.createElement(Tooltip, {
    content: tooltip,
    position: "top"
  }, tooltipProps => /*#__PURE__*/React.createElement(TriggerBridge, {
    referenceElement: referenceElement,
    tooltipProps: tooltipProps
  }));
};

/**
 * Render-prop child for ADS `<Tooltip>`. The element it returns is a
 * `display: none` placeholder that satisfies the render-prop API; the
 * real trigger surface is the chip in the PM document, which receives
 * both the ADS ref and the bridged event listeners via the side-effects
 * declared on this component.
 */
const TriggerBridge = ({
  referenceElement,
  tooltipProps
}) => {
  useBridgedTriggerListeners(referenceElement, tooltipProps);
  return /*#__PURE__*/React.createElement("span", {
    ref: () => assignRef(tooltipProps.ref, referenceElement),
    "aria-hidden": "true",
    className: ax([styles.hiddenTrigger])
  });
};
export const disabledTooltipRenderer = ({
  chipElement,
  portalProviderAPI
}) => {
  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- mirror existing renderer pattern
  const key = uuid();
  let currentTooltip;
  const listeners = new Set();
  const broadcast = () => {
    listeners.forEach(listener => listener(currentTooltip));
  };
  const getInitialTooltip = () => currentTooltip;
  const subscribe = listener => {
    listeners.add(listener);
    return () => {
      listeners.delete(listener);
    };
  };
  const renderElement = () => /*#__PURE__*/React.createElement(AnchoredTooltip, {
    referenceElement: chipElement,
    getInitialTooltip: getInitialTooltip,
    subscribe: subscribe
  });
  portalProviderAPI.render(renderElement, chipElement, key);
  return {
    setTooltip(text) {
      currentTooltip = text;
      broadcast();
    },
    destroy() {
      portalProviderAPI.remove(key);
      listeners.clear();
    }
  };
};