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

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ExpandableMenuItemTrigger = void 0;
require("./expandable-menu-item-trigger.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _new = require("@atlaskit/button/new");
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
var _menuItem = require("../menu-item");
var _useScrollMenuItemIntoView = require("../use-scroll-menu-item-into-view");
var _expandableMenuItemContext = require("./expandable-menu-item-context");
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" != _typeof(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); }
// Widening type to `string` to side-step Compiled cssMap typescript warnings with unknown properties
var chevronDisplayCssVar = '--expandable-chevron-display';
var providedElemBeforeDisplayCssVar = '--expandable-provided-elembefore-display';
var wrapperStyles = {
  root: "_1mmi1txw _165nglyw",
  showProvidedElemBefore: "_1mmiglyw _165n1bgi _v9u71txw _1hl9glyw _b31z1txw _1vnl1txw _12xsglyw _p8btglyw"
};
var iconStyles = {
  chevron: "_1e0ciw0t _1tz3r0mg",
  providedElemBefore: "_1e0c1xb2",
  providedElemBeforeSelected: "_syaz1qo3"
};
var ExpandableMenuItemIcon = function ExpandableMenuItemIcon(_ref) {
  var iconProps = _ref.iconProps,
    isExpanded = _ref.isExpanded,
    isSelected = _ref.isSelected,
    providedElemBefore = _ref.providedElemBefore;
  var ChevronIcon = isExpanded ? _chevronDown.default : _chevronRight.default;
  var chevronElem = /*#__PURE__*/_react.default.createElement(ChevronIcon, (0, _extends2.default)({}, iconProps, {
    label: "",
    color: isSelected ? "var(--ds-icon-selected, #0C66E4)" : undefined,
    size: "small"
  }));
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)([iconStyles.chevron])
  }, chevronElem), providedElemBefore && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _runtime.ax)([iconStyles.providedElemBefore, isSelected && iconStyles.providedElemBeforeSelected])
  }, providedElemBefore));
};
/**
 * __ExpandableMenuItemTrigger__
 *
 * The trigger component for an `ExpandableMenuItem`. Interacting with it will expand or collapse the expandable.
 */
var ExpandableMenuItemTrigger = exports.ExpandableMenuItemTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, forwardedRef) {
  var actions = _ref2.actions,
    isSelected = _ref2.isSelected,
    href = _ref2.href,
    providedElemBefore = _ref2.elemBefore,
    elemAfter = _ref2.elemAfter,
    actionsOnHover = _ref2.actionsOnHover,
    onClick = _ref2.onClick,
    children = _ref2.children,
    testId = _ref2.testId,
    interactionName = _ref2.interactionName,
    isContentTooltipDisabled = _ref2.isContentTooltipDisabled,
    visualContentRef = _ref2.visualContentRef,
    isDragging = _ref2.isDragging,
    hasDragIndicator = _ref2.hasDragIndicator,
    dropIndicator = _ref2.dropIndicator;
  var id = (0, _react.useId)();
  var onExpansionToggle = (0, _expandableMenuItemContext.useOnExpansionToggle)();
  var isExpanded = (0, _expandableMenuItemContext.useIsExpanded)();
  var setIsExpanded = (0, _expandableMenuItemContext.useSetIsExpanded)();
  var itemRef = (0, _react.useRef)(null);
  var handleIconClick = (0, _react.useCallback)(function () {
    onExpansionToggle === null || onExpansionToggle === void 0 || onExpansionToggle(!isExpanded);
    setIsExpanded(!isExpanded);
  }, [isExpanded, onExpansionToggle, setIsExpanded]);
  var handleMenuContentClick = (0, _react.useCallback)(function (event, analyticsEvent) {
    var newValue = !isExpanded;
    onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
      isExpanded: newValue
    });
    onExpansionToggle === null || onExpansionToggle === void 0 || onExpansionToggle(newValue);
    setIsExpanded(newValue);
  }, [onClick, onExpansionToggle, isExpanded, setIsExpanded]);
  var isSelectable = typeof href !== 'undefined';
  (0, _useScrollMenuItemIntoView.useScrollMenuItemIntoView)({
    elementRef: itemRef,
    isSelected: Boolean(isSelectable && isSelected)
  });

  // Wrapped in an IconButton if the expandable menu item trigger is selectable
  var elemBefore = isSelectable ? /*#__PURE__*/_react.default.createElement(_new.IconButton, {
    icon: function icon(iconProps) {
      return /*#__PURE__*/_react.default.createElement(ExpandableMenuItemIcon, {
        iconProps: iconProps,
        isExpanded: isExpanded,
        isSelected: isSelected,
        providedElemBefore: providedElemBefore
      });
    },
    "aria-expanded": isExpanded
    // We are labelling the icon button using the containing menu item's content, to provide context to
    // screen readers on what will actually be expanded or collapsed. Screen readers will also use the
    // `aria-expanded` attribute to indicate the expanded state of the menu item.
    // We are not using the `aria-label` attribute here as it is not supported by the `IconButton` component.
    ,
    "aria-labelledby": id
    // IconButton requires a label prop, however it will not be used by screen readers as we are setting
    // `aria-labelledby`, which will be used instead.
    ,
    label: "",
    appearance: "subtle",
    spacing: "compact",
    onClick: handleIconClick,
    interactionName: interactionName,
    testId: testId ? "".concat(testId, "--elem-before-button") : undefined
  }) : /*#__PURE__*/_react.default.createElement(ExpandableMenuItemIcon, {
    isExpanded: isExpanded,
    isSelected: isSelected,
    providedElemBefore: providedElemBefore
  });

  // For expandable menu items, we shouldn't wrap in a `li` here. The `li` is instead at a higher level (`ExpandableMenuItem`), grouping the expandable menu item trigger and its content
  return /*#__PURE__*/_react.default.createElement("div", {
    ref: itemRef,
    className: (0, _runtime.ax)([wrapperStyles.root, providedElemBefore && wrapperStyles.showProvidedElemBefore])
  }, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItemBase, {
    id: id,
    actions: actions,
    actionsOnHover: actionsOnHover,
    elemBefore: elemBefore,
    ariaExpanded: isExpanded,
    elemAfter: elemAfter,
    href: href,
    isSelected: isSelected,
    onClick: handleMenuContentClick,
    ref: forwardedRef,
    visualContentRef: visualContentRef,
    testId: testId,
    interactionName: interactionName,
    isContentTooltipDisabled: isContentTooltipDisabled,
    isDragging: isDragging,
    hasDragIndicator: hasDragIndicator,
    dropIndicator: dropIndicator
  }, children));
});