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

Mentions plugin for @atlaskit/editor-core

/* disabledTooltipRenderer.tsx generated by @compiled/babel-plugin v0.39.1 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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';
var 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.
 */
var assignRef = function 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.
 */
var 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.
 */
var useBridgedTriggerListeners = function useBridgedTriggerListeners(chip, triggerProps) {
  useEffect(function () {
    // 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.
    var bindings = TRIGGER_EVENT_MAP.flatMap(function (_ref) {
      var _ref2 = _slicedToArray(_ref, 2),
        propName = _ref2[0],
        eventName = _ref2[1];
      var handler = triggerProps[propName];
      if (!handler) {
        return [];
      }
      return [{
        type: eventName,
        listener: function listener(event) {
          handler(event);
        }
      }];
    });
    if (bindings.length === 0) {
      return;
    }
    var unbind = bindAll(chip, bindings);
    return unbind;
  }, [chip, triggerProps]);
};
var AnchoredTooltip = function AnchoredTooltip(_ref3) {
  var subscribe = _ref3.subscribe,
    getInitialTooltip = _ref3.getInitialTooltip,
    referenceElement = _ref3.referenceElement;
  var _useState = useState(getInitialTooltip),
    _useState2 = _slicedToArray(_useState, 2),
    tooltip = _useState2[0],
    setTooltipState = _useState2[1];
  useEffect(function () {
    return subscribe(setTooltipState);
  }, [subscribe]);
  if (!tooltip) {
    return null;
  }
  return /*#__PURE__*/React.createElement(Tooltip, {
    content: tooltip,
    position: "top"
  }, function (tooltipProps) {
    return /*#__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.
 */
var TriggerBridge = function TriggerBridge(_ref4) {
  var referenceElement = _ref4.referenceElement,
    tooltipProps = _ref4.tooltipProps;
  useBridgedTriggerListeners(referenceElement, tooltipProps);
  return /*#__PURE__*/React.createElement("span", {
    ref: function ref() {
      return assignRef(tooltipProps.ref, referenceElement);
    },
    "aria-hidden": "true",
    className: ax([styles.hiddenTrigger])
  });
};
export var disabledTooltipRenderer = function disabledTooltipRenderer(_ref5) {
  var chipElement = _ref5.chipElement,
    portalProviderAPI = _ref5.portalProviderAPI;
  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- mirror existing renderer pattern
  var key = uuid();
  var currentTooltip;
  var listeners = new Set();
  var broadcast = function broadcast() {
    listeners.forEach(function (listener) {
      return listener(currentTooltip);
    });
  };
  var getInitialTooltip = function getInitialTooltip() {
    return currentTooltip;
  };
  var subscribe = function subscribe(listener) {
    listeners.add(listener);
    return function () {
      listeners.delete(listener);
    };
  };
  var renderElement = function renderElement() {
    return /*#__PURE__*/React.createElement(AnchoredTooltip, {
      referenceElement: chipElement,
      getInitialTooltip: getInitialTooltip,
      subscribe: subscribe
    });
  };
  portalProviderAPI.render(renderElement, chipElement, key);
  return {
    setTooltip: function setTooltip(text) {
      currentTooltip = text;
      broadcast();
    },
    destroy: function destroy() {
      portalProviderAPI.remove(key);
      listeners.clear();
    }
  };
};