/* menu-item.tsx generated by @compiled/babel-plugin v0.38.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.nestedOpenPopupCSSSelector = exports.MenuItemBase = void 0;
require("./menu-item.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@compiled/react");
var _avatar = require("@atlaskit/avatar");
var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _compiled = require("@atlaskit/primitives/compiled");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _constants = require("./constants");
var _expandableMenuItemContext = require("./expandable-menu-item/expandable-menu-item-context");
var _flyoutMenuItemContext = require("./flyout-menu-item/flyout-menu-item-context");
var _menuItemSignals = require("./menu-item-signals");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// Using `lazy` so that only consumers who want drag and drop
// need to include code for the drag handle.
var LazyDragHandle = /*#__PURE__*/(0, _react.lazy)(function () {
  return Promise.resolve().then(function () {
    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
    './drag-handle'));
  });
});
function isTextClamped(element) {
  // Checking for vertical height rather than horizontal height.
  // When text is "clamped", it's technically being clamped vertically! 🤯
  return element.scrollHeight > element.clientHeight;
}
var defaultAvatarValues = {
  size: 'small'
};
var elemAfterDisplayVar = '--elem-after-display';
var actionsOnHoverOpacityVar = '--actions-on-hover-opacity';
var actionsOnHoverWidthVar = '--actions-on-hover-width';
var actionsOnHoverPaddingInlineEndVar = '--actions-on-hover-padding';
var notchColorVar = '--notch-color';

// Note: this is also used in `drag-handle.tsx`
var dragHandleDisplayVar = '--drag-handle-display';
var dragCursorAnimation = null;

/**
 * ## 🤹 `position:relative`
 *
 * We need `position:relative` on an element that takes
 * up the full size of the interactive element so we
 * can correctly use `position:absolute` to place:
 * 1. the notch for links
 * 2. drop indicators for drag and drop
 * 3. a child of button / anchor to stretch it out to
 *    increase it's pressable area.
 *
 * ⛔️ We cannot add `position:relative` _only_ on the
 * button / anchor as that will cause sibling elements
 * to be rendered under the button / anchor when setting
 * a background color on the button / anchor.
 *
 * 📖 Note: `position:relative` elements are painted after
 * elements with `position:static` (the default)
 * https://drafts.csswg.org/css-position-4/#painting-order
 *
 * ⛔️ We cannot add `position:relative` to the container
 * element, as then the `:focus` ring styles on the
 * button / anchor can be cut off by the next sibling if it has
 * has a background color set (eg when selected)
 *
 * ✅ Add `position:relative` to all first level descendants
 * of the container element so that we don't impact DOM ordered
 * paint ordering within the item and the button / anchor focus
 * ring can still bleed over siblings
 *
 * 📖 We could use `> * { position: relative; }` on the container,
 * but that would violate our styling standard.
 */
var topLevelSiblingStyles = {
  root: "_kqswh2mm"
};

/**
 * All slots on the menu item (eg `elemBefore`) are rendered as siblings
 * of our main button / anchor element and they are visually placed on
 * top of the main button / anchor.
 *
 * 📖 This is done so that we don't nest interactive elements in our markup.
 *
 * ✅ This is great when element in the slot is an interactive element
 * as we don't want the main menu item button / anchor to be triggered
 * when interacting with the element in the slot.
 *
 * ⛔️ When the element in the slot is static content (eg an `<Icon>`) it will
 * prevent the main button / anchor (that is visually behind the element in
 * the slot) from being clicked. The element in the slot is a sibling of our
 * main button / anchor (not a child of it) so clicking on the element in the
 * slot will not bubble up to the button / anchor.
 *
 * 🚀 We set `pointer-events:none` on a slot if it does not contain and interactive
 * element so that static content in a slot does not prevent clicking on the main
 * button / anchor.
 */
var onTopOfButtonOrAnchorStyles = {
  root: "_18ukglyw"
};

/**
 * This is being _internally_ exported so it can be used in other menu item wrapper components, like
 * ExpandableMenuItemTrigger.
 *
 * This selector is used to apply hover styling on the menu item if it contains an open nested popup.
 * It's looking for a popup trigger with `aria-hasexpanded` and `aria-haspopup` attributes. The
 * reason for targeting the _trigger_ instead of the popup itself, is the popup might be rendered
 * outside the menu item, e.g. if rendered in a portal.
 *
 * An alternative solution might involve wrapping it with a popup context and listening to the popup
 * events through it (and applying the hover style when the popup is open). Exploring this has been
 * captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
 */
var nestedOpenPopupCSSSelector = exports.nestedOpenPopupCSSSelector = '&:has([aria-expanded="true"][aria-haspopup="true"])';
var containerStyles = {
  root: "_2rko12b0 _vchhusvi _1e0c11p5 _yv0e7dup _2z05hkll _1lmcu4vt _1ul9t9kd _4t3iviql _4cvr1h6o _uiztglyw _syazazsu _1yyu1j28 _91ju1txw _uomdidpf _pmxpidpf _db80idpf _qxq9kb7n _1rbv1wug _kwq51b66 _1swv19i6 _irr319i6 _t7p8kb7n _g4kikb7n _91nl1wug _ynyi1wug _iy5o1b66 _v4o21b66",
  removeElemAfter: "_91juglyw",
  showHoverActions: "_uomdkb7n _pmxp1wug _db801b66",
  removeElemAfterOnHoverOrOpenNestedPopup: "_1djyglyw _1mfcglyw _1sjuglyw",
  selected: "_bfhk15s3 _syaz6x5g _1yyujmqp _1swvufnl _30l36x5g _irr3ufnl",
  disabled: "_syaz1gmx _bfhkn7od _irr3n7od _30l31gmx",
  hasDescription: "_4t3i1wto",
  dragging: "_tzy41ou4"
};
var buttonOrAnchorStyles = {
  root: "_2rko12b0 _yyhyjvu9 _1ii7kb7n _1e0c11p5 _yv0enbh3 _2z05nbh3 _y4ti1b66 _bozg1b66 _1q511b66 _85i51b66 _bfhk1j28 _syazazsu _4cvr1h6o _y3gnv2br _14iu13ro",
  selected: "_syaz6x5g _14iunozp",
  hasDragIndicator: "_1ifmglyw _1cykglyw _x0kw1txw _11om6b4r _7psyru3m _1uy01amc _bir2q7pw"
};
var extendButtonOrAnchorStyles = {
  root: "_1r04ze3t _kqswstnw"
};
var notchStyles = {
  root: "_kqswstnw _152t1ssb _1e02ze3t _1bsbyh40 _4t3i1crf _t9ec1i34 _bfhk1o0g"
};
var actionStyles = {
  root: "_zulp1b66 _nd5lbc26 _1reo15vq _18m915vq _1e0c1txw _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
};
var actionsOnHoverStyles = {
  root: "_nd5l16dh _zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _tzy4pnc3 _1bsbty16 _y4tidria _1guo18uv _12s918uv"
};
var textStyles = {
  root: "_zulpv77o _1reo15vq _18m915vq _y4ti1b66 _bozg1b66 _1e0c1txw _2lx21bp4 _1ul91c9m _1guo18uv _12s918uv",
  noElemBeforeIndent: "_bozg12x7"
};
var elemBeforeStyles = {
  root: "_nd5l17zh _1reo15vq _18m915vq _1e0c1txw _1o9zidpf _1bsb1tcg _4t3i1tcg _4cvr1h6o _1bah1h6o _bozg1b66 _vchh1ntv _1guo18uv _12s918uv"
};
var elemAfterStyles = {
  root: "_nd5l16dh _1reo15vq _18m915vq _1e0c13yo _1o9zidpf _4t3i1tcg _4cvr1h6o _y4ti1b66 _1guo18uv _12s918uv"
};

/**
 * We are using a wrapping element for our interactive content
 * even though only the `Text` element is the only thing not using `position:absolute`
 *
 * Rationale:
 * - Super clear that everything inside the interactive content should be in a specific slot in the grid
 * - To work around a browser bug in Safari where it does not work well with `position:absolute`
 *   on a subgrid child.
 *   Safari bug: https://bugs.webkit.org/show_bug.cgi?id=292516
 */
var interactiveContentStyles = {
  root: "_nd5l19l3 _1e0c1txw _2lx21bp4 _ae4v1h6o"
};
function getTextColor(_ref) {
  var isDisabled = _ref.isDisabled,
    isSelected = _ref.isSelected;
  if (isDisabled) {
    return 'color.text.disabled';
  }
  if (isSelected) {
    return 'color.text.selected';
  }
  return 'color.text.subtle';
}

/**
 * Includes all props that are used by any menu item, as MenuItembase is the base component for all menu item components.
 *
 * We also include additional `aria` props to support the menu item being a trigger for the FlyoutMenuItem popup and for the
 * expanded content for ExpandableMenuItem.
 */

/**
 * This is the internal version of the component, to be passed into `forwardRef`.
 *
 * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
 * This can be inferred from the type of the `onClick` prop.
 */
var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
  var id = _ref2.id,
    testId = _ref2.testId,
    actions = _ref2.actions,
    actionsOnHover = _ref2.actionsOnHover,
    children = _ref2.children,
    description = _ref2.description,
    elemAfter = _ref2.elemAfter,
    elemBefore = _ref2.elemBefore,
    href = _ref2.href,
    target = _ref2.target,
    isDisabled = _ref2.isDisabled,
    isSelected = _ref2.isSelected,
    onClick = _ref2.onClick,
    ariaControls = _ref2.ariaControls,
    ariaExpanded = _ref2.ariaExpanded,
    ariaHasPopup = _ref2.ariaHasPopup,
    interactionName = _ref2.interactionName,
    isContentTooltipDisabled = _ref2.isContentTooltipDisabled,
    visualContentRef = _ref2.visualContentRef,
    isDragging = _ref2.isDragging,
    hasDragIndicator = _ref2.hasDragIndicator,
    dropIndicator = _ref2.dropIndicator;
  var level = (0, _expandableMenuItemContext.useLevel)();
  var setFlyoutMenuOpen = (0, _flyoutMenuItemContext.useSetFlyoutMenuOpen)();
  var isFlyoutMenuOpen = (0, _flyoutMenuItemContext.useFlyoutMenuOpen)();
  var isLink = typeof href !== 'undefined';
  var labelRef = (0, _react.useRef)(null);
  var descriptionRef = (0, _react.useRef)(null);
  var tooltipOnClick = (0, _react.useRef)(null);
  var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
    var _tooltipOnClick$curre;
    onClick === null || onClick === void 0 || onClick(event, analyticsEvent);
    // Toggle flyout menu open state when inside a flyout context provider
    setFlyoutMenuOpen(!isFlyoutMenuOpen);
    (_tooltipOnClick$curre = tooltipOnClick.current) === null || _tooltipOnClick$curre === void 0 || _tooltipOnClick$curre.call(tooltipOnClick, event);
  }, [onClick, setFlyoutMenuOpen, isFlyoutMenuOpen]);

  /**
   * Show the tooltip if _either_ label or description is truncated
   */
  var canTooltipAppear = (0, _react.useCallback)(function () {
    if (isContentTooltipDisabled) {
      return false;
    }

    // Show tooltip if _either_ label or description are clamped

    var label = labelRef.current;
    var description = descriptionRef.current;
    if (label && isTextClamped(label)) {
      return true;
    }
    return Boolean(description && isTextClamped(description));
  }, [isContentTooltipDisabled]);

  // By default provide the spacing for `elemBefore` to have good
  // vertical alignment of labels and to give clear indentation between levels
  // in the side navigation (even when items don't use elemBefore).
  var showElemBefore = elemBefore !== _menuItemSignals.COLLAPSE_ELEM_BEFORE;
  var interactiveElemContent = /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)([interactiveContentStyles.root])
  }, /*#__PURE__*/_react.default.createElement("div", {
    // This extends the clickable area of nested menu items to the width
    // of the root level menu items, while being visually indented.
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
    style: {
      insetInlineStart: "calc(-1 * ".concat(level, " * ").concat(_constants.expandableMenuItemIndentation, ")")
    },
    "aria-hidden": "true",
    className: (0, _runtime.ax)([extendButtonOrAnchorStyles.root])
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)([textStyles.root, !showElemBefore && textStyles.noElemBeforeIndent])
  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
    weight: "medium",
    maxLines: 1,
    color: getTextColor({
      isDisabled: isDisabled,
      isSelected: isSelected
    }),
    ref: labelRef
  }, children), description && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
    color: isDisabled ? 'color.text.disabled' : 'color.text.subtle',
    size: "small",
    maxLines: 1,
    ref: descriptionRef
  }, description)), hasDragIndicator ? /*#__PURE__*/_react.default.createElement(_react.Suspense, {
    fallback: null
  }, /*#__PURE__*/_react.default.createElement(LazyDragHandle, null)) : null, dropIndicator);

  /**
   *  If the [expandable] menu item is expanded, show hover actions even when *not* hovered.
   *
   * Note: we also remove the `elemAfter` when showing `actionsOnHover`
   */
  var showHoverActionsWhenNotHovered = Boolean(ariaExpanded && actionsOnHover);
  return /*#__PURE__*/_react.default.createElement(_avatar.AvatarContext.Provider, {
    value: defaultAvatarValues
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: visualContentRef,
    "data-testid": testId ? "".concat(testId, "-container") : undefined,
    "data-selected": isSelected,
    className: (0, _runtime.ax)([containerStyles.root, isSelected && containerStyles.selected, isDragging && containerStyles.dragging, description && containerStyles.hasDescription, showHoverActionsWhenNotHovered && containerStyles.showHoverActions, showHoverActionsWhenNotHovered && elemAfter && containerStyles.removeElemAfter, actionsOnHover && elemAfter && containerStyles.removeElemAfterOnHoverOrOpenNestedPopup, isDisabled && containerStyles.disabled])
  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
    content: function content() {
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, children), description ? /*#__PURE__*/_react.default.createElement("div", null, description) : null);
    },
    position: "right-start",
    ignoreTooltipPointerEvents: true,
    hideTooltipOnMouseDown: true
    // We don't need a duplicate hidden element containing tooltip content
    // as the content of the tooltip matches what is rendered for the menu item.
    ,
    isScreenReaderAnnouncementDisabled: true,
    canAppear: canTooltipAppear
  }, function (tooltipProps) {
    // Putting the tooltip onClick into a ref.
    // This way we don't need to create a new `onClick` function on each
    // render (as we would need to merge `tooltipProps.onClick` and our `handleClick`)
    tooltipOnClick.current = tooltipProps.onClick;
    var sharedProps = _objectSpread(_objectSpread({}, tooltipProps), {}, {
      'aria-controls': ariaControls,
      'aria-haspopup': ariaHasPopup,
      ref: (0, _mergeRefs.default)([forwardedRef, tooltipProps.ref]),
      id: id,
      testId: testId,
      interactionName: interactionName
    });
    return isLink ? /*#__PURE__*/_react.default.createElement(_compiled.Anchor, (0, _extends2.default)({}, sharedProps, {
      onClick: handleClick,
      xcss: (0, _react2.cx)(buttonOrAnchorStyles.root, topLevelSiblingStyles.root, isSelected && buttonOrAnchorStyles.selected, hasDragIndicator && buttonOrAnchorStyles.hasDragIndicator)
      // Needed to override Anchor style due to a compiled/emotion conflict
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
      ,
      style: {
        textDecoration: 'none'
      },
      "aria-current": isSelected ? 'page' : undefined,
      href: href,
      target: target
      /**
       * For anchors we don't want to have the standard drag and drop behaviour.
       *
       * Thinking on the topic:
       *
       * - Anchors look visually similar to buttons in the sidenav
       * - Why should some menu items be natively draggable, while others are not?
       * - A user cannot know which menu items are "natively" draggable (ie anchors)
       * - If you wire up an anchor to be draggable using our standard affordances
       *   it will have a different preview experience to native anchor dragging.
       *
       * To promote consistency, all elements need to use the same visual affordances.
       *
       * Anchor elements will automatically attach URL information
       * to the native data store.
       *
       * When `hasDragIndicator` is `true` we are expecting consumers to register
       * the element as draggable through the `draggable()` Pragmatic drag and drop function.
       * The `draggable()` function will add `draggable="true"` to the element.
       */,
      draggable: hasDragIndicator ? undefined : false
    }), /*#__PURE__*/_react.default.createElement("div", {
      "aria-hidden": "true",
      className: (0, _runtime.ax)([notchStyles.root])
    }), interactiveElemContent) : /*#__PURE__*/_react.default.createElement(_compiled.Pressable, (0, _extends2.default)({}, sharedProps, {
      onClick: handleClick,
      xcss: (0, _react2.cx)(buttonOrAnchorStyles.root, topLevelSiblingStyles.root, isSelected && buttonOrAnchorStyles.selected, hasDragIndicator && buttonOrAnchorStyles.hasDragIndicator),
      "aria-expanded": ariaExpanded,
      isDisabled: isDisabled
    }), interactiveElemContent);
  }), showElemBefore && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)([elemBeforeStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
  }, elemBefore), actionsOnHover && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)([actionsOnHoverStyles.root])
  }, actionsOnHover), elemAfter && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)([elemAfterStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
  }, elemAfter), actions && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)([actionStyles.root, topLevelSiblingStyles.root, onTopOfButtonOrAnchorStyles.root])
  }, actions)));
};

/**
 * __MenuItemBase__
 *
 * The base menu item component used to compose ButtonMenuItem and LinkMenuItem.
 *
 * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
 * This can be inferred from the type of the `onClick` prop.
 */
var MenuItemBase = exports.MenuItemBase = (0, _forwardRefWithGeneric.default)(MenuItemBaseNoRef);