@atlaskit/editor-plugin-find-replace/dist/es2019/ui/FindReplaceToolbarButton.js

find replace plugin for @atlaskit/editor-core

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
import { findKeymapByDescription, getAriaKeyshortcuts, tooltip, ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
import { ArrowKeyNavigationType, Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import { akEditorFloatingPanelZIndex, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
import SearchIcon from '@atlaskit/icon/core/search';
import { fg } from '@atlaskit/platform-feature-flags';
import FindReplace from './FindReplace';

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
const toolbarButtonWrapper = css`
	display: flex;
	flex: 1 1 auto;
	flex-grow: 0;
	justify-content: flex-end;
	align-items: center;
	padding: 0 ${"var(--ds-space-100, 8px)"};
	@media (max-width: ${akEditorMobileMaxWidth}px) {
		justify-content: center;
		padding: 0;
	}
`;
const TriggerButtonWrapper = ({
  isButtonHidden,
  children
}) => {
  return jsx("div", {
    css: {
      display: isButtonHidden ? 'none' : 'block'
    }
  }, children);
};
const toolbarButtonWrapperFullWidth = css({
  flexGrow: 1
});
const toolbarButtonWrapperHidden = css({
  flexGrow: 0,
  padding: 0
});
const wrapper = css({
  display: 'flex',
  flexDirection: 'column'
});
const dropdownWidthNewDesign = 382;
// eslint-disable-next-line @repo/internal/react/no-class-components
class FindReplaceToolbarButton extends React.PureComponent {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "state", {
      openedByClick: false
    });
    _defineProperty(this, "toggleOpen", () => {
      if (this.props.isActive) {
        this.props.onCancel({
          triggerMethod: TRIGGER_METHOD.TOOLBAR
        });
      } else {
        this.setState({
          openedByClick: true
        });
        this.props.onActivate();
      }
    });
    _defineProperty(this, "focusToolbarButton", () => {
      if (this.state.openedByClick && this.toolbarButtonRef.current) {
        this.toolbarButtonRef.current.focus();
      }
      this.setState({
        openedByClick: false
      });
    });
    _defineProperty(this, "toolbarButtonRef", /*#__PURE__*/React.createRef());
  }
  render() {
    const {
      popupsMountPoint,
      popupsBoundariesElement,
      popupsScrollableElement,
      isReducedSpacing,
      findText,
      replaceText,
      isActive,
      index,
      numMatches,
      numReplaceable,
      intl: {
        formatMessage
      },
      takeFullWidth,
      isButtonHidden = false
    } = this.props;
    const title = formatMessage(messages.findReplaceToolbarButton);
    const stackBelowOtherEditorFloatingPanels = akEditorFloatingPanelZIndex - 1;
    const keymap = findKeymapByDescription('Find');
    return jsx("div", {
      css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWidth, isButtonHidden && fg('platform_editor_toolbar_responsive_fixes') && toolbarButtonWrapperHidden]
    }, jsx(Dropdown, {
      mountTo: popupsMountPoint,
      boundariesElement: popupsBoundariesElement,
      scrollableElement: popupsScrollableElement,
      isOpen: isActive
      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
      ,
      handleEscapeKeydown: () => {
        if (isActive) {
          this.props.onCancel({
            triggerMethod: TRIGGER_METHOD.KEYBOARD
          });
          if (this.state.openedByClick && this.toolbarButtonRef.current) {
            this.toolbarButtonRef.current.focus();
          }
          this.setState({
            openedByClick: false
          });
        }
      },
      fitWidth: dropdownWidthNewDesign,
      zIndex: stackBelowOtherEditorFloatingPanels
      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
      ,
      arrowKeyNavigationProviderOptions: {
        type: ArrowKeyNavigationType.MENU,
        disableArrowKeyNavigation: true
      },
      trigger: fg('platform_editor_toolbar_responsive_fixes') ? jsx(TriggerButtonWrapper, {
        isButtonHidden: isButtonHidden
      }, jsx(ToolbarButton, {
        buttonId: TOOLBAR_BUTTON.FIND_REPLACE,
        testId: `editor-toolbar__${TOOLBAR_BUTTON.FIND_REPLACE}`,
        spacing: isReducedSpacing ? 'none' : 'default',
        selected: isActive,
        title: jsx(ToolTipContent, {
          description: title,
          keymap: keymap
        }),
        iconBefore: jsx(SearchIcon, {
          label: title,
          spacing: "spacious"
        }),
        onClick: this.toggleOpen,
        "aria-expanded": isActive,
        "aria-haspopup": true,
        "aria-label": keymap ? tooltip(keymap, title) : title,
        "aria-keyshortcuts": getAriaKeyshortcuts(keymap),
        ref: this.toolbarButtonRef
      })) : jsx(ToolbarButton, {
        buttonId: TOOLBAR_BUTTON.FIND_REPLACE,
        testId: `editor-toolbar__${TOOLBAR_BUTTON.FIND_REPLACE}`,
        spacing: isReducedSpacing ? 'none' : 'default',
        selected: isActive,
        title: jsx(ToolTipContent, {
          description: title,
          keymap: keymap
        }),
        iconBefore: jsx(SearchIcon, {
          label: title,
          spacing: "spacious"
        }),
        onClick: this.toggleOpen,
        "aria-expanded": isActive,
        "aria-haspopup": true,
        "aria-label": keymap ? tooltip(keymap, title) : title,
        "aria-keyshortcuts": getAriaKeyshortcuts(keymap),
        ref: this.toolbarButtonRef
      })
    }, jsx("div", {
      css: wrapper
    }, jsx(FindReplace, _extends({
      findText: findText,
      replaceText: replaceText
      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
      ,
      count: {
        index,
        total: numMatches,
        totalReplaceable: numReplaceable
      },
      focusToolbarButton: this.focusToolbarButton
      // Ignored via go/ees005
      // eslint-disable-next-line react/jsx-props-no-spreading
    }, this.props)))));
  }
}
// eslint-disable-next-line @typescript-eslint/ban-types
const _default_1 = injectIntl(FindReplaceToolbarButton);
export default _default_1;