@atlaskit/inline-dialog/dist/esm/inline-dialog-top-layer.js

An inline dialog is a pop-up container for small amounts of information. It can also contain controls.

/* inline-dialog-top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./inline-dialog-top-layer.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
import noop from '@atlaskit/ds-lib/noop';
import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
import { createPopoverCloseEvent } from '@atlaskit/top-layer/popover/create-close-event';
import { Popover } from '@atlaskit/top-layer/popover/popover';
import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
var displayContentsStyles = {
  root: "_1e0c1bgi"
};
var styles = {
  container: "_2rkofajl _vchh1ntv _p12flti4 _c71llti4 _bfhk1bhr _16qs130s _85i5pxbi _1q51pxbi _y4ti1ejb _bozg1ejb"
};
/**
 * Returns the trigger button when the element is a button, or its first descendant button.
 * InlineDialog accepts arbitrary child markup, so the first button is used as the pragmatic target
 * when a wrapper contains multiple buttons.
 */
function getTriggerElement(trigger) {
  if (!trigger) {
    return null;
  }
  if (trigger instanceof HTMLButtonElement) {
    return trigger;
  }
  return trigger.querySelector('button');
}

/**
 * Applies ARIA attributes to the child trigger element via an effect,
 * keeping them in sync with popup state.
 */
function TriggerWrapper(_ref) {
  var children = _ref.children,
    triggerRef = _ref.triggerRef,
    ariaAttributes = _ref.ariaAttributes;
  useEffect(function () {
    var trigger = getTriggerElement(triggerRef.current);
    if (!trigger) {
      return;
    }
    // Apply each attribute. When a value is `undefined` (e.g.
    // `aria-controls` while the popover host is not in the DOM),
    // remove the attribute so the trigger does not retain a stale
    // reference from a previous open.
    Object.entries(ariaAttributes).forEach(function (_ref2) {
      var _ref3 = _slicedToArray(_ref2, 2),
        key = _ref3[0],
        value = _ref3[1];
      if (value === undefined) {
        trigger.removeAttribute(key);
        return;
      }
      trigger.setAttribute(key, String(value));
    });
  }, [ariaAttributes, triggerRef]);
  return /*#__PURE__*/React.createElement("div", {
    ref: function ref(node) {
      if (!node) {
        triggerRef.current = null;
        return;
      }

      // CSS-in-JS may inject <style> elements into this wrapper; they are not trigger elements.
      var triggerElement = Array.from(node.children).find(function (child) {
        return child instanceof HTMLElement && !(child instanceof HTMLStyleElement);
      });
      triggerRef.current = triggerElement !== null && triggerElement !== void 0 ? triggerElement : null;
    },
    className: ax([displayContentsStyles.root])
  }, children);
}

/**
 * Top-layer implementation of InlineDialog.
 *
 * Replaces the legacy rendering pipeline (Popper.js + Portal + @atlaskit/layering)
 * with the native Popover API + CSS Anchor Positioning via @atlaskit/top-layer.
 *
 * Gated behind the `platform-dst-top-layer` feature flag.
 */
var InlineDialogTopLayer = /*#__PURE__*/memo(function InlineDialogTopLayer(_ref4) {
  var _ref4$isOpen = _ref4.isOpen,
    isOpen = _ref4$isOpen === void 0 ? false : _ref4$isOpen,
    _ref4$onContentBlur = _ref4.onContentBlur,
    onContentBlur = _ref4$onContentBlur === void 0 ? noop : _ref4$onContentBlur,
    _ref4$onContentClick = _ref4.onContentClick,
    onContentClick = _ref4$onContentClick === void 0 ? noop : _ref4$onContentClick,
    _ref4$onContentFocus = _ref4.onContentFocus,
    onContentFocus = _ref4$onContentFocus === void 0 ? noop : _ref4$onContentFocus,
    _ref4$onClose = _ref4.onClose,
    providedOnClose = _ref4$onClose === void 0 ? noop : _ref4$onClose,
    _ref4$placement = _ref4.placement,
    placement = _ref4$placement === void 0 ? 'bottom-start' : _ref4$placement,
    testId = _ref4.testId,
    content = _ref4.content,
    children = _ref4.children,
    _strategy = _ref4.strategy,
    _fallbackPlacements = _ref4.fallbackPlacements;
  var triggerRef = useRef(null);
  var popoverRef = useRef(null);
  var popoverId = usePopoverId();
  var onClose = usePlatformLeafEventHandler({
    fn: function fn(event) {
      return providedOnClose(event);
    },
    action: 'closed',
    componentName: 'inlineDialog',
    packageName: "@atlaskit/inline-dialog",
    packageVersion: "20.3.6"
  });

  // Placement conversion.
  var topLayerPlacement = useMemo(function () {
    return fromLegacyPlacement({
      legacy: placement
    });
  }, [placement]);

  // `isOpen` is included so the anchor positioning effect re-runs when
  // the Popover host element is unmounted/remounted across open cycles.
  useAnchoredPopover({
    anchorRef: triggerRef,
    popoverRef: popoverRef,
    placement: topLayerPlacement,
    isOpen: isOpen
  });

  // onClose bridge.
  // Translates top-layer's { reason } into the legacy onClose({ isOpen, event }) shape.
  // Focus restoration is handled automatically by the Popover based on the content role
  // (role="dialog" -> auto-restore).
  var handleOnClose = useCallback(function (_ref5) {
    var reason = _ref5.reason;
    var syntheticEvent = createPopoverCloseEvent({
      reason: reason
    });
    onClose({
      isOpen: false,
      event: syntheticEvent
    });
  }, [onClose]);
  var ariaAttributes = getAriaForTrigger({
    role: 'dialog',
    isOpen: isOpen,
    popoverId: popoverId
  });
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TriggerWrapper, {
    triggerRef: triggerRef,
    ariaAttributes: ariaAttributes
  }, children), /*#__PURE__*/React.createElement(Popover, {
    ref: popoverRef,
    id: popoverId,
    role: "dialog"
    // TODO: i18n. Hardcoded label is not translatable.
    // Acceptable given this component is intent-to-deprecate.
    ,
    label: "Inline dialog",
    isOpen: isOpen,
    onClose: handleOnClose,
    shouldAnimate: true,
    placement: topLayerPlacement,
    testId: testId
  }, /*#__PURE__*/React.createElement("div", {
    role: "presentation",
    onBlur: onContentBlur,
    onClick: onContentClick,
    onFocus: onContentFocus,
    className: ax([styles.container])
  }, typeof content === 'function' ? content() : content)));
});
export default InlineDialogTopLayer;