@atlaskit/editor-plugin-selection-extension/dist/esm/ui/menu/SelectionExtensionNestedDropdownMenu.js

editor-plugin-selection-extension plugin for @atlaskit/editor-core

/* SelectionExtensionNestedDropdownMenu.tsx generated by @compiled/babel-plugin v2.0.0 */
import "./SelectionExtensionNestedDropdownMenu.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { EXTENSION_MENU_ITEM_TEST_ID } from '@atlaskit/editor-common/block-menu';
import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
import Lozenge from '@atlaskit/lozenge';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box } from '@atlaskit/primitives/compiled';
import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
var BLOCK_MENU_TEMPLATES_SPOTLIGHT_PORTAL_SELECTOR = '[data-test-id="block-menu-templates-spotlight-portal-container"]';
var shouldIgnoreBlockMenuTemplatesSpotlightCloseEvent = function shouldIgnoreBlockMenuTemplatesSpotlightCloseEvent(event) {
  return event.target instanceof Element && event.target.closest(BLOCK_MENU_TEMPLATES_SPOTLIGHT_PORTAL_SELECTOR) !== null;
};
var styles = {
  lozenge: "_18u012x7"
};
var ChildItems = function ChildItems(_ref) {
  var nestedDropdownMenu = _ref.nestedDropdownMenu;
  var childItems = nestedDropdownMenu.getMenuItems();
  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, childItems.map(function (dropdownItem) {
    return /*#__PURE__*/React.createElement(SelectionExtensionDropdownItem, {
      key: dropdownItem.key || dropdownItem.label,
      dropdownItem: dropdownItem
    });
  }));
};
export var SelectionExtensionNestedDropdownMenu = function SelectionExtensionNestedDropdownMenu(_ref2) {
  var _nestedDropdownMenu$l;
  var nestedDropdownMenu = _ref2.nestedDropdownMenu;
  var IconComponent = nestedDropdownMenu.icon;
  var _useSelectionExtensio = useSelectionExtensionComponentContext(),
    api = _useSelectionExtensio.api,
    extensionKey = _useSelectionExtensio.extensionKey,
    extensionSource = _useSelectionExtensio.extensionSource,
    extensionLocation = _useSelectionExtensio.extensionLocation;
  var handleClick = function handleClick() {
    var _api$analytics;
    (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
      action: ACTION.CLICKED,
      actionSubject: ACTION_SUBJECT.BUTTON,
      actionSubjectId: ACTION_SUBJECT_ID.EDITOR_PLUGIN_SELECTION_EXTENSION_DROPDOWN,
      eventType: EVENT_TYPE.TRACK,
      attributes: {
        extensionKey: extensionKey,
        extensionSource: extensionSource,
        extensionLocation: extensionLocation,
        extensionElement: 'nested-dropdown',
        extensionItemKey: nestedDropdownMenu.key
      }
    });
  };
  var lozengeLabel = (_nestedDropdownMenu$l = nestedDropdownMenu.lozenge) === null || _nestedDropdownMenu$l === void 0 ? void 0 : _nestedDropdownMenu$l.label;
  var elemAfterText = lozengeLabel && fg('platform_editor_block_menu_v2_patch_2') ? /*#__PURE__*/React.createElement(Box, {
    as: "span",
    xcss: styles.lozenge
  }, /*#__PURE__*/React.createElement(Lozenge, {
    appearance: fg('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
  }, lozengeLabel)) : undefined;
  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
    testId: EXTENSION_MENU_ITEM_TEST_ID,
    text: nestedDropdownMenu.label,
    elemAfterText: elemAfterText,
    elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
      label: "",
      size: "small"
    }) : undefined,
    elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
      label: "",
      size: "small"
    }),
    onClick: handleClick,
    dropdownTestId: "editor-selection-extension-menu",
    shouldTitleWrap: false,
    tooltipContent: nestedDropdownMenu.label,
    "data-extension-item-key": nestedDropdownMenu.key,
    shouldIgnoreCloseEvent: fg('cc_blocks_changeboarding') ? shouldIgnoreBlockMenuTemplatesSpotlightCloseEvent : undefined
  }, /*#__PURE__*/React.createElement(ChildItems, {
    nestedDropdownMenu: nestedDropdownMenu
  }));
};