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

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

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 { fg } from '@atlaskit/platform-feature-flags';
import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
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 = _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
      }
    });
  };
  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
    testId: EXTENSION_MENU_ITEM_TEST_ID,
    text: nestedDropdownMenu.label,
    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: fg('platform_editor_block_menu_v2_patch_2') ? false : undefined,
    tooltipContent: fg('platform_editor_block_menu_v2_patch_2') ? nestedDropdownMenu.label : undefined
  }, /*#__PURE__*/React.createElement(ChildItems, {
    nestedDropdownMenu: nestedDropdownMenu
  }));
};