/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
import "./flyout-menu-item-trigger.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef } from 'react';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
import { fg } from '@atlaskit/platform-feature-flags';
import { PopupTrigger } from '@atlaskit/popup/experimental';
import { MenuItemBase } from '../menu-item';
const elemAfterStyles = {
  root: "_18zr12x7 _1tz3r0mg"
};
/**
 * __FlyoutMenuItemTrigger__
 *
 * The button that toggles the flyout menu.
 */
export const FlyoutMenuItemTrigger = /*#__PURE__*/forwardRef(({
  children,
  elemBefore,
  onClick,
  isSelected,
  interactionName,
  testId,
  isContentTooltipDisabled,
  visualContentRef,
  isDragging,
  hasDragIndicator,
  dropIndicator
}, forwardedRef) => /*#__PURE__*/React.createElement(PopupTrigger, null, ({
  ref,
  'aria-controls': ariaControls,
  'aria-expanded': ariaExpanded,
  'aria-haspopup': ariaHasPopup
}) => /*#__PURE__*/React.createElement(MenuItemBase, {
  testId: testId,
  ref: mergeRefs([ref, forwardedRef]),
  visualContentRef: visualContentRef,
  elemBefore: elemBefore,
  elemAfter: /*#__PURE__*/React.createElement("div", {
    className: ax([elemAfterStyles.root])
  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
    label: "",
    color: fg('platform_dst_flyout_menu_item_chevron_color') ? 'currentColor' : "var(--ds-icon, #44546F)",
    size: "small"
  })),
  onClick: onClick,
  ariaControls: ariaControls,
  ariaExpanded: ariaExpanded,
  ariaHasPopup: ariaHasPopup,
  interactionName: interactionName,
  isContentTooltipDisabled: isContentTooltipDisabled,
  isSelected: isSelected,
  isDragging: isDragging,
  hasDragIndicator: hasDragIndicator,
  dropIndicator: dropIndicator
}, children)));