@atlaskit/editor-plugin-selection-extension/dist/es2019/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';
const ChildItems = ({
  nestedDropdownMenu
}) => {
  const childItems = nestedDropdownMenu.getMenuItems();
  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, childItems.map(dropdownItem => /*#__PURE__*/React.createElement(SelectionExtensionDropdownItem, {
    key: dropdownItem.key || dropdownItem.label,
    dropdownItem: dropdownItem
  })));
};
export const SelectionExtensionNestedDropdownMenu = ({
  nestedDropdownMenu
}) => {
  const IconComponent = nestedDropdownMenu.icon;
  const {
    api,
    extensionKey,
    extensionSource,
    extensionLocation
  } = useSelectionExtensionComponentContext();
  const handleClick = () => {
    var _api$analytics;
    (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? 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,
        extensionSource,
        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
  }));
};