@atlaskit/editor-plugin-floating-toolbar/dist/es2019/ui/DropdownMenu.js

Floating toolbar plugin for @atlaskit/editor-core

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { memo } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports

import { injectIntl } from 'react-intl';
import { DropdownMenuItem, DropdownSeparator } from '@atlaskit/editor-common/floating-toolbar';
import { HeadingItem } from '@atlaskit/menu';
export const menuItemDimensions = {
  width: 175,
  height: 32
};
const headingStyles = css({
  padding: `${"var(--ds-space-200, 16px)"} 0 ${"var(--ds-space-100, 8px)"}`
});

// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
const menuContainerStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  minWidth: `${menuItemDimensions.width}px`,
  // temporary solution to retain spacing defined by @atlaskit/Item
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '& button': {
    minHeight: "var(--ds-space-400, 32px)",
    padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 7px`,
    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '& > [data-item-elem-before]': {
      marginRight: "var(--ds-space-050, 4px)"
    }
  }
});

// itemSpacing is used in calculations expecting a number, hence not using a space token
export const itemSpacing = 4;

// Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check

const Dropdown = /*#__PURE__*/memo(props => {
  const {
    hide,
    dispatchCommand,
    items,
    intl,
    editorView,
    showSelected = true,
    areAnyNewToolbarFlagsEnabled
  } = props;
  if (areAnyNewToolbarFlagsEnabled) {
    return jsx("div", {
      css: menuContainerStyles,
      role: "menu"
    }, items
    // @ts-ignore
    .filter(item => item && (!('hidden' in item) || !item.hidden)).map((item, idx) => {
      if (!('type' in item)) {
        return jsx(DropdownMenuItem
        // Ignored via go/ees005
        // eslint-disable-next-line react/no-array-index-key
        , {
          key: idx,
          item: item,
          hide: hide,
          dispatchCommand: dispatchCommand,
          editorView: editorView,
          showSelected: showSelected,
          intl: intl
        });
      }
      if (item.type === 'separator') {
        // eslint-disable-next-line react/no-array-index-key
        return jsx(DropdownSeparator, {
          key: idx
        });
      }
      if (item.type === 'overflow-dropdown-heading') {
        return jsx("div", {
          key: item.title,
          css: headingStyles
        }, jsx(HeadingItem, null, item.title));
      }
      if (item.type === 'custom') {
        const dropdownMenuOptions = {
          hide,
          dispatchCommand,
          editorView,
          showSelected,
          intl
        };
        return item.render(editorView, dropdownMenuOptions);
      }
    }));
  }
  return jsx("div", {
    css: menuContainerStyles,
    role: "menu"
  }, items.filter(item => !item.hidden).map((item, idx) => jsx(DropdownMenuItem
  // Ignored via go/ees005
  // eslint-disable-next-line react/no-array-index-key
  , {
    key: idx,
    item: item,
    hide: hide,
    dispatchCommand: dispatchCommand,
    editorView: editorView,
    showSelected: showSelected,
    intl: intl
  })));
});
const _default_1 = injectIntl(Dropdown);
export default _default_1;