"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _createAndFireEvents = _interopRequireDefault(require("@atlaskit/analytics-next/createAndFireEvents"));
var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _Layer = _interopRequireDefault(require("../Layer"));
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
 * @jsxRuntime classic
 * @jsx jsx
 */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var packageName = "@atlaskit/editor-common";
var packageVersion = "114.7.0";
var halfFocusRing = 1;
var dropOffset = '0, 8';
var fadeIn = (0, _react2.keyframes)({
  '0%': {
    opacity: 0
  },
  '100%': {
    opacity: 1
  }
});
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
var DropList = /*#__PURE__*/function (_Component) {
  function DropList() {
    var _this;
    (0, _classCallCheck2.default)(this, DropList);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, DropList, [].concat(args));
    (0, _defineProperty2.default)(_this, "wrapperStyles", (0, _react2.css)({
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
      display: _this.props.shouldFitContainer ? 'block' : 'inline-flex',
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
      flex: _this.props.shouldFitContainer ? '1 1 auto' : undefined,
      transitionDuration: '0.2s',
      transition: 'box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)'
    }));
    (0, _defineProperty2.default)(_this, "triggerStyles", (0, _react2.css)({
      transitionDuration: '0.2s',
      transition: 'box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
      display: _this.props.shouldFitContainer ? 'block' : 'inline-flex',
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
      boxSizing: _this.props.shouldFitContainer ? 'border-box' : undefined
    }));
    (0, _defineProperty2.default)(_this, "motionStyles", (0, _react2.css)({
      animationName: "".concat(fadeIn),
      animationDuration: '360ms',
      animationTimingFunction: 'cubic-bezier(0.8, 0, 0, 1)'
    }));
    /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
    (0, _defineProperty2.default)(_this, "menuWrapper", function () {
      return (0, _react2.css)({
        color: "var(--ds-text-subtle, #505258)",
        backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
        borderRadius: "var(--ds-radius-small, 3px)",
        boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
        boxSizing: 'border-box',
        overflow: 'auto',
        padding: "var(--ds-space-050, 4px)".concat(" 0"),
        maxHeight: '90vh'
      });
    });
    /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
    (0, _defineProperty2.default)(_this, "componentDidMount", function () {
      _this.setContentWidth();
      // We use a captured event here to avoid a radio or checkbox dropdown item firing its
      // click event first, which would cause a re-render of the element and prevent DropList
      // from detecting the actual source of this original click event.
      // Ignored via go/ees005
      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
      document.addEventListener('click', _this.handleClickOutside, true);
      // Ignored via go/ees005
      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
      document.addEventListener('keydown', _this.handleEsc);
    });
    (0, _defineProperty2.default)(_this, "componentDidUpdate", function () {
      if (_this.props.isOpen) {
        _this.setContentWidth();
      }
    });
    (0, _defineProperty2.default)(_this, "componentWillUnmount", function () {
      // Ignored via go/ees005
      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
      document.removeEventListener('click', _this.handleClickOutside, true);
      // Ignored via go/ees005
      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
      document.removeEventListener('keydown', _this.handleEsc);
    });
    (0, _defineProperty2.default)(_this, "setContentWidth", function () {
      var _this2 = _this,
        dropContentRef = _this2.dropContentRef,
        triggerRef = _this2.triggerRef;
      var shouldFitContainer = _this.props.shouldFitContainer;

      // We need to manually set the content width to match the trigger width
      if (shouldFitContainer && dropContentRef && triggerRef) {
        dropContentRef.style.width = "".concat(triggerRef.offsetWidth - halfFocusRing * 2, "px");
      }
    });
    (0, _defineProperty2.default)(_this, "handleEsc", function (event) {
      if ((event.key === 'Escape' || event.key === 'Esc') && _this.props.isOpen) {
        _this.close(event);
      }
    });
    (0, _defineProperty2.default)(_this, "handleClickOutside", function (event) {
      if (_this.props.isOpen) {
        if (event.target instanceof Node) {
          // Rather than check for the target within the entire DropList, we specify the trigger/content.
          // This aids with future effort in scroll-locking DropList when isMenuFixed is enabled; the scroll
          // blanket which stretches to the viewport should not stop 'close' from being triggered.
          var withinTrigger = _this.triggerRef && _this.triggerRef.contains(event.target);
          var withinContent = _this.dropContentRef && _this.dropContentRef.contains(event.target);
          if (!withinTrigger && !withinContent) {
            _this.close(event);
          }
        }
      }
    });
    (0, _defineProperty2.default)(_this, "close", function (event) {
      if (_this.props.onOpenChange) {
        _this.props.onOpenChange({
          isOpen: false,
          event: event
        });
      }
    });
    (0, _defineProperty2.default)(_this, "handleContentRef", function (ref) {
      _this.dropContentRef = ref;

      // If the dropdown has just been opened, we focus on the containing element so the
      // user can tab to the first dropdown item. We will only receive this ref if isOpen
      // is true or null, so no need to check for truthiness here.
      if (ref) {
        ref.focus();
      }
    });
    (0, _defineProperty2.default)(_this, "handleDroplistRef", function (ref) {
      var _this$props$onDroplis, _this$props;
      (_this$props$onDroplis = (_this$props = _this.props).onDroplistRef) === null || _this$props$onDroplis === void 0 || _this$props$onDroplis.call(_this$props, ref);
    });
    (0, _defineProperty2.default)(_this, "handleTriggerRef", function (ref) {
      _this.triggerRef = ref;
    });
    return _this;
  }
  (0, _inherits2.default)(DropList, _Component);
  return (0, _createClass2.default)(DropList, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
        children = _this$props2.children,
        isOpen = _this$props2.isOpen,
        position = _this$props2.position,
        trigger = _this$props2.trigger,
        onPositioned = _this$props2.onPositioned,
        testId = _this$props2.testId,
        id = _this$props2.id;
      var layerContent = isOpen ? (0, _react2.jsx)("div", {
        css: this.menuWrapper,
        "data-role": "droplistContent",
        "data-testid": testId && "".concat(testId, "--content"),
        ref: this.handleContentRef,
        id: id,
        role: "presentation"
      }, children) : null;
      return (0, _react2.jsx)("div", {
        css: [this.wrapperStyles, (0, _platformFeatureFlags.fg)('p2m-drop-down-motion') && this.motionStyles],
        ref: this.handleDroplistRef
      }, (0, _react2.jsx)(_Layer.default, {
        content: layerContent,
        offset: dropOffset,
        position: position,
        onPositioned: onPositioned
      }, (0, _react2.jsx)("div", {
        css: [this.triggerStyles, (0, _platformFeatureFlags.fg)('p2m-drop-down-motion') && this.motionStyles],
        ref: this.handleTriggerRef
      }, trigger)));
    }
  }]);
}(_react.Component);
var createAndFireEventOnAtlaskit = (0, _createAndFireEvents.default)('atlaskit');
var _default_1 = (0, _withAnalyticsContext.default)({
  componentName: 'droplist',
  packageName: packageName,
  packageVersion: packageVersion
})((0, _withAnalyticsEvents.default)({
  onOpenChange: createAndFireEventOnAtlaskit({
    action: 'toggled',
    actionSubject: 'droplist',
    attributes: {
      componentName: 'droplist',
      packageName: packageName,
      packageVersion: packageVersion
    }
  })
})(DropList));
var _default = exports.default = _default_1;