@atlaskit/editor-plugin-toolbar-lists-indentation/dist/es2019/ui/ToolbarDropdown.js

Toolbar lists and indentation plugin for @atlaskit/editor-core

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { useIntl } from 'react-intl-next';
import { toggleBulletList as toggleBulletListKeymap, indent as toggleIndentKeymap, toggleOrderedList as toggleOrderedListKeymap, outdent as toggleOutdentKeymap, tooltip } from '@atlaskit/editor-common/keymaps';
import { indentationMessages, listMessages } from '@atlaskit/editor-common/messages';
import { expandIconContainerStyle, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
import { DropdownMenuWithKeyboardNavigation as DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
import BulletListIcon from '@atlaskit/icon/core/migration/list-bulleted--editor-bullet-list';
import ExpandIcon from '@atlaskit/icon/utility/migration/chevron-down';
import { fg } from '@atlaskit/platform-feature-flags';
import { ToolbarType } from '../types';
export function ToolbarDropdown(props) {
  const {
    formatMessage
  } = useIntl();
  const {
    disabled,
    isReducedSpacing,
    bulletListActive,
    orderedListActive,
    popupsMountPoint,
    popupsBoundariesElement,
    popupsScrollableElement,
    onItemActivated,
    pluginInjectionApi
  } = props;
  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
  const [isOpenedByKeyboard, setOpenedByKeyboard] = React.useState(false);
  const labelLists = formatMessage(listMessages.lists);

  // Ignored via go/ees005
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onOpenChange = attrs => {
    setIsDropdownOpen(attrs.isDropdownOpen);
  };
  const handleTriggerClick = () => {
    onOpenChange({
      isDropdownOpen: !isDropdownOpen
    });
  };
  const handleOnKeyDown = event => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      setIsDropdownOpen(!isDropdownOpen);
      setOpenedByKeyboard(true);
    }
  };
  const items = useItems(props);
  const handleOnItemActivated = ({
    item,
    shouldCloseMenu = true
  }) => {
    setIsDropdownOpen(!shouldCloseMenu);
    return onItemActivated({
      editorView: props.editorView,
      buttonName: item.value.name
    });
  };
  const reducedSpacing = props.toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
  return (
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    jsx("span", {
      css: wrapperStyle
    }, jsx(DropdownMenu, {
      items: items,
      onItemActivated: handleOnItemActivated,
      mountTo: popupsMountPoint,
      boundariesElement: popupsBoundariesElement,
      scrollableElement: popupsScrollableElement,
      isOpen: isDropdownOpen,
      onOpenChange: onOpenChange,
      fitHeight: 188,
      fitWidth: 175,
      shouldUseDefaultRole: true,
      shouldFocusFirstItem: () => {
        if (isOpenedByKeyboard) {
          setOpenedByKeyboard(false);
        }
        return isOpenedByKeyboard;
      }
    }, jsx(ToolbarButton, {
      spacing: isReducedSpacing ? reducedSpacing : 'default',
      selected: bulletListActive || orderedListActive || isDropdownOpen,
      "aria-expanded": isDropdownOpen,
      "aria-haspopup": true,
      "aria-label": labelLists,
      disabled: disabled,
      onClick: handleTriggerClick,
      onKeyDown: handleOnKeyDown,
      title: labelLists,
      iconBefore:
      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
      jsx("span", {
        css: wrapperStyle
      }, jsx(BulletListIcon, {
        color: "currentColor",
        spacing: "spacious",
        label: labelLists
      }), jsx("span", {
        css: [
        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
        fg('platform-visual-refresh-icons') &&
        //eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
        expandIconContainerStyle]
      }, jsx(ExpandIcon, {
        color: "currentColor",
        label: "",
        LEGACY_margin: "0 0 0 -8px"
      })))
    })), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    jsx("span", {
      css: separatorStyles
    }))
  );
}
function useItems(props) {
  const {
    formatMessage
  } = useIntl();
  const labelUnorderedList = formatMessage(listMessages.unorderedList);
  const labelOrderedList = formatMessage(listMessages.orderedList);
  const items = [{
    key: 'unorderedList',
    content: labelUnorderedList,
    value: {
      name: 'bullet_list'
    },
    isDisabled: props.bulletListDisabled,
    isActive: Boolean(props.bulletListActive),
    elemAfter:
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    jsx("div", {
      css: shortcutStyle
    }, tooltip(toggleBulletListKeymap))
  }, {
    key: 'orderedList',
    content: labelOrderedList,
    value: {
      name: 'ordered_list'
    },
    isDisabled: props.orderedListDisabled,
    isActive: Boolean(props.orderedListActive),
    elemAfter:
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    jsx("div", {
      css: shortcutStyle
    }, tooltip(toggleOrderedListKeymap))
  }];
  if (props.showIndentationButtons) {
    const labelIndent = formatMessage(indentationMessages.indent);
    const labelOutdent = formatMessage(indentationMessages.outdent);
    items.push({
      key: 'outdent',
      content: labelOutdent,
      value: {
        name: 'outdent'
      },
      isDisabled: props.outdentDisabled,
      isActive: false,
      elemAfter:
      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
      jsx("div", {
        css: shortcutStyle
      }, tooltip(toggleOutdentKeymap))
    }, {
      key: 'indent',
      content: labelIndent,
      value: {
        name: 'indent'
      },
      isDisabled: props.indentDisabled,
      isActive: false,
      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
      elemAfter: jsx("div", {
        css: shortcutStyle
      }, tooltip(toggleIndentKeymap))
    });
  }
  return [{
    items
  }];
}