@atlaskit/editor-common/dist/es2019/link/ConfigureLinkOverlay/Dropdown.js

A package that contains common classes and components for editor and renderer

import _extends from "@babel/runtime/helpers/extends";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useCallback } 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 withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
import { cardMessages as messages } from '../../messages';
import { StyledButton } from './StyledButton';
import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
const SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE = 'smallLinkToolbar';
const Dropdown = ({
  onConfigureClick: onConfigureClickCallback,
  onOpenLinkClick: onOpenLinkClickCallback,
  onDropdownChange,
  editorView,
  testId
}) => {
  const {
    formatMessage
  } = useIntl();
  const configureLinkLabel = formatMessage(messages.inlineConfigureLink);
  const goToLinkLabel = formatMessage(messages.inlineGoToLink);
  const {
    fireActionClickEvent,
    fireLinkClickEvent,
    fireToolbarViewEvent
  } = useLinkOverlayAnalyticsEvents();
  const focusEditor = useCallback(() => {
    // Fix dropdown giving focus back to the trigger async which is then unmounted and losing focus
    // this is happening deep within atlaskit dropdown as a result of this code: https://github.com/focus-trap/focus-trap/blob/master/index.js#L987
    // use setTimeout to run this async after that call
    setTimeout(() => editorView.focus(), 0);
  }, [editorView]);
  const onOpenChange = useCallback(({
    isOpen,
    event
  }) => {
    onDropdownChange === null || onDropdownChange === void 0 ? void 0 : onDropdownChange(isOpen);
    if (isOpen) {
      fireToolbarViewEvent();
    }
    if (!isOpen && event instanceof KeyboardEvent) {
      focusEditor();
    }
  }, [fireToolbarViewEvent, focusEditor, onDropdownChange]);
  const onGoToLinkClick = useCallback(event => {
    fireActionClickEvent('goToLink');
    onOpenLinkClickCallback === null || onOpenLinkClickCallback === void 0 ? void 0 : onOpenLinkClickCallback(event);
    focusEditor();
  }, [fireActionClickEvent, focusEditor, onOpenLinkClickCallback]);
  const onConfigureClick = useCallback(() => {
    fireActionClickEvent('configureLink');
    onConfigureClickCallback === null || onConfigureClickCallback === void 0 ? void 0 : onConfigureClickCallback();
    focusEditor();
  }, [fireActionClickEvent, focusEditor, onConfigureClickCallback]);
  return jsx(DropdownMenu, {
    trigger: ({
      onClick,
      triggerRef,
      ...props
    }) => jsx(StyledButton, _extends({
      innerRef: triggerRef
      // Ignored via go/ees005
      // eslint-disable-next-line react/jsx-props-no-spreading
    }, props, {
      iconBefore: jsx(ChevronDownIcon, {
        label: configureLinkLabel,
        size: 'small'
      }),
      onClick: e => {
        onClick === null || onClick === void 0 ? void 0 : onClick(e);
        fireLinkClickEvent();
      }
    })),
    testId: `${testId}-dropdown`,
    onOpenChange: onOpenChange
  }, jsx(DropdownItemGroup, null, jsx(DropdownItem, {
    elemBefore: jsx(ShortcutIcon, {
      label: goToLinkLabel,
      size: 'medium'
    }),
    testId: `${testId}-dropdown-item-open-link`,
    onClick: onGoToLinkClick
  }, goToLinkLabel), jsx(DropdownItem, {
    elemBefore: jsx(PreferencesIcon, {
      label: configureLinkLabel,
      size: 'medium'
    }),
    onClick: onConfigureClick,
    testId: `${testId}-dropdown-item-configure`
  }, configureLinkLabel)));
};
export default withAnalyticsContext({
  source: SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE
})(Dropdown);