@atlaskit/editor-core 191.0.8 → 191.1.0

package/dist/es2019/plugins/find-replace/plugin.js

@@ -1,117 +0,0 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { pluginFactory } from '@atlaskit/editor-common/utils';
-import reducer from './reducer';
-import { findMatches, createDecorations, removeDecorationsFromSet, findSearchIndex, removeMatchesFromSet, findDecorationFromMatch, isMatchAffectedByStep } from './utils';
-import { findUniqueItemsIn } from '../../utils/array';
-import { stepHasSlice } from '@atlaskit/editor-common/utils';
-import { findReplacePluginKey } from './plugin-key';
-export const initialState = {
-  isActive: false,
-  shouldFocus: false,
-  findText: '',
-  replaceText: '',
-  index: 0,
-  matches: [],
-  decorationSet: DecorationSet.empty,
-  shouldMatchCase: false
-};
-const handleDocChanged = (tr, pluginState) => {
-  const {
-    isActive,
-    findText
-  } = pluginState;
-  if (!isActive || !findText) {
-    return pluginState;
-  }
-  if (!tr.steps.find(stepHasSlice)) {
-    return pluginState;
-  }
-  let {
-    index,
-    decorationSet,
-    matches,
-    shouldMatchCase
-  } = pluginState;
-  const newMatches = findMatches(tr.doc, findText, shouldMatchCase);
-  decorationSet = decorationSet.map(tr.mapping, tr.doc);
-  const numDecorations = decorationSet.find().length;
-  const mappedMatches = matches.map(match => ({
-    start: tr.mapping.map(match.start),
-    end: tr.mapping.map(match.end)
-  }));
-  let matchesToAdd = [];
-  let matchesToDelete = [];
-  if (newMatches.length > 0 && numDecorations === 0) {
-    matchesToAdd = newMatches;
-  } else if (newMatches.length === 0 && numDecorations > 0) {
-    decorationSet = DecorationSet.empty;
-  } else if (newMatches.length > 0 || numDecorations > 0) {
-    // go through tr steps and find any new matches from user adding content or
-    // any dead matches from user deleting content
-    tr.steps.forEach(step => {
-      if (stepHasSlice(step)) {
-        // add all matches that are between the affected positions and don't already have
-        // corresponding decorations
-        matchesToAdd = [...matchesToAdd, ...newMatches.filter(match => isMatchAffectedByStep(match, step, tr) && !findDecorationFromMatch(decorationSet, match))];
-
-        // delete any matches that are missing from the newMatches array and have a
-        // corresponding decoration
-        matchesToDelete = [...matchesToDelete, ...findUniqueItemsIn(mappedMatches.filter(match => isMatchAffectedByStep(match, step, tr) && !!findDecorationFromMatch(decorationSet, match)), newMatches, (firstMatch, secondMatch) => firstMatch.start === secondMatch.start && firstMatch.end === secondMatch.end)];
-      }
-    });
-  }
-
-  // update decorations if matches changed following document update
-  if (matchesToDelete.length > 0) {
-    const decorationsToDelete = matchesToDelete.reduce((decorations, match) => [...decorations, ...decorationSet.find(match.start, match.end)], []);
-    decorationSet = removeDecorationsFromSet(decorationSet, decorationsToDelete, tr.doc);
-  }
-  if (matchesToAdd.length > 0) {
-    decorationSet = decorationSet.add(tr.doc, createDecorations(tr.selection.from, matchesToAdd));
-  }
-
-  // update selected match if it has changed
-  let newIndex = index;
-  const selectedMatch = mappedMatches[index];
-  if (selectedMatch) {
-    newIndex = newMatches.findIndex(match => match.start === selectedMatch.start);
-  }
-  if (newIndex === undefined || newIndex === -1) {
-    newIndex = findSearchIndex(tr.selection.from, newMatches);
-  }
-  const newSelectedMatch = newMatches[newIndex];
-  decorationSet = removeMatchesFromSet(decorationSet, [selectedMatch, newSelectedMatch], tr.doc);
-  if (newSelectedMatch) {
-    decorationSet = decorationSet.add(tr.doc, createDecorations(0, [newSelectedMatch]));
-  }
-  return {
-    ...pluginState,
-    matches: newMatches,
-    index: newIndex,
-    decorationSet
-  };
-};
-export const {
-  createCommand,
-  getPluginState,
-  createPluginState
-} = pluginFactory(findReplacePluginKey, reducer(() => initialState), {
-  onDocChanged: handleDocChanged
-});
-export const createPlugin = dispatch => new SafePlugin({
-  key: findReplacePluginKey,
-  state: createPluginState(dispatch, () => initialState),
-  props: {
-    decorations(state) {
-      const {
-        isActive,
-        findText,
-        decorationSet
-      } = getPluginState(state);
-      if (isActive && findText) {
-        return decorationSet;
-      }
-    }
-  }
-});

package/dist/es2019/plugins/find-replace/reducer.js

@@ -1,56 +0,0 @@
-import { FindReplaceActionTypes } from './actions';
-const reducer = getInitialState => (state, action) => {
-  switch (action.type) {
-    case FindReplaceActionTypes.ACTIVATE:
-    case FindReplaceActionTypes.FIND:
-      return {
-        ...state,
-        isActive: true,
-        shouldFocus: action.type === FindReplaceActionTypes.ACTIVATE,
-        findText: action.findText !== undefined ? action.findText : state.findText,
-        matches: action.matches || state.matches,
-        index: action.index !== undefined ? action.index : state.index
-      };
-    case FindReplaceActionTypes.UPDATE_DECORATIONS:
-      return {
-        ...state,
-        decorationSet: action.decorationSet
-      };
-    case FindReplaceActionTypes.FIND_NEXT:
-      return {
-        ...state,
-        index: action.index,
-        decorationSet: action.decorationSet
-      };
-    case FindReplaceActionTypes.FIND_PREVIOUS:
-      return {
-        ...state,
-        index: action.index,
-        decorationSet: action.decorationSet
-      };
-    case FindReplaceActionTypes.REPLACE:
-    case FindReplaceActionTypes.REPLACE_ALL:
-      return {
-        ...state,
-        replaceText: action.replaceText,
-        decorationSet: action.decorationSet,
-        matches: action.matches,
-        index: action.index
-      };
-    case FindReplaceActionTypes.CANCEL:
-      return getInitialState();
-    case FindReplaceActionTypes.BLUR:
-      return {
-        ...state,
-        shouldFocus: false
-      };
-    case FindReplaceActionTypes.TOGGLE_MATCH_CASE:
-      return {
-        ...state,
-        shouldMatchCase: !state.shouldMatchCase
-      };
-    default:
-      return state;
-  }
-};
-export default reducer;

package/dist/es2019/plugins/find-replace/styles.js

@@ -1,17 +0,0 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4290
-import { css } from '@emotion/react';
-import { B75, B200 } from '@atlaskit/theme/colors';
-export const searchMatchClass = 'search-match';
-export const selectedSearchMatchClass = 'selected-search-match';
-export const findReplaceStyles = css`
-  .${searchMatchClass} {
-    background-color: ${B75};
-  }
-
-  .${selectedSearchMatchClass} {
-    background-color: ${B200};
-    color: white;
-  }
-`;

package/dist/es2019/plugins/find-replace/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/plugins/find-replace/ui/Find.js

@@ -1,284 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/react';
-import { defineMessages, injectIntl } from 'react-intl-next';
-import debounce from 'lodash/debounce';
-import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
-import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
-import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
-import MatchCaseIcon from '@atlaskit/icon/glyph/emoji/keyboard';
-import Textfield from '@atlaskit/textfield';
-import { countStyles, countWrapperStyles, sectionWrapperStyles } from './styles';
-import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
-import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
-import rafSchd from 'raf-schd';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-export const FIND_DEBOUNCE_MS = 100;
-const messages = defineMessages({
-  find: {
-    id: 'fabric.editor.find',
-    defaultMessage: 'Find',
-    description: 'The word or phrase to search for on the document'
-  },
-  matchCase: {
-    id: 'fabric.editor.matchCase',
-    defaultMessage: 'Match case',
-    description: 'Toggle whether should also match case when searching for text'
-  },
-  findNext: {
-    id: 'fabric.editor.findNext',
-    defaultMessage: 'Find next',
-    description: 'Locate the next occurrence of the word or phrase that was searched for'
-  },
-  findPrevious: {
-    id: 'fabric.editor.findPrevious',
-    defaultMessage: 'Find previous',
-    description: 'Locate the previous occurrence of the word or phrase that was searched for'
-  },
-  closeFindReplaceDialog: {
-    id: 'fabric.editor.closeFindReplaceDialog',
-    defaultMessage: 'Close',
-    description: 'Cancel search and close the "Find and Replace" dialog'
-  },
-  noResultsFound: {
-    id: 'fabric.editor.noResultsFound',
-    defaultMessage: 'No results',
-    description: 'No matches were found for the word or phrase that was searched for'
-  },
-  resultsCount: {
-    id: 'fabric.editor.resultsCount',
-    description: 'Text for selected search match position and total results count',
-    defaultMessage: '{selectedMatchPosition} of {totalResultsCount}'
-  }
-});
-class Find extends React.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "findTextfieldRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "isComposing", false);
-    _defineProperty(this, "syncFindText", onSynced => {
-      var _this$state;
-      // If the external prop findText changes and we aren't in a composition we should update to
-      // use the external prop value.
-      //
-      // An example of where this may happen is when a find occurs through the user selecting some text
-      // and pressing Mod-f.
-      if (!this.isComposing && this.props.findText !== ((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.localFindText)) {
-        this.updateFindValue(this.props.findText || '', onSynced);
-      }
-    });
-    _defineProperty(this, "focusFindTextfield", () => {
-      const input = this.findTextfieldRef.current;
-      if (this.props.shouldFocus && input) {
-        input.select();
-      }
-    });
-    _defineProperty(this, "handleFindChange", event => {
-      this.updateFindValue(event.target.value);
-    });
-    // debounce (vs throttle) to not block typing inside find input while onFind runs
-    _defineProperty(this, "debouncedFind", debounce(value => {
-      this.props.onFind(value);
-    }, FIND_DEBOUNCE_MS));
-    _defineProperty(this, "updateFindValue", (value, onSynced) => {
-      this.setState({
-        localFindText: value
-      }, () => {
-        if (this.isComposing) {
-          return;
-        }
-        onSynced && onSynced();
-        this.debouncedFind(value);
-      });
-    });
-    // throtlle between animation frames gives better experience on Enter compared to arbitrary value
-    // it adjusts based on performance (and document size)
-    _defineProperty(this, "handleFindKeyDownThrottled", rafSchd(event => {
-      if (event.key === 'Enter') {
-        if (event.shiftKey) {
-          this.props.onFindPrev({
-            triggerMethod: TRIGGER_METHOD.KEYBOARD
-          });
-        } else {
-          this.props.onFindNext({
-            triggerMethod: TRIGGER_METHOD.KEYBOARD
-          });
-        }
-      } else if (event.key === 'ArrowDown') {
-        // we want to move focus between find & replace texfields when user hits up/down arrows
-        this.props.onArrowDown();
-      }
-    }));
-    _defineProperty(this, "handleFindKeyDown", event => {
-      if (this.isComposing) {
-        return;
-      }
-      event.persist();
-      this.handleFindKeyDownThrottled(event);
-    });
-    _defineProperty(this, "handleFindKeyUp", () => {
-      this.handleFindKeyDownThrottled.cancel();
-    });
-    _defineProperty(this, "handleFindNextClick", ref => {
-      if (this.isComposing) {
-        return;
-      }
-      this.props.onFindNext({
-        triggerMethod: TRIGGER_METHOD.BUTTON
-      });
-    });
-    _defineProperty(this, "handleFindPrevClick", ref => {
-      if (this.isComposing) {
-        return;
-      }
-      this.props.onFindPrev({
-        triggerMethod: TRIGGER_METHOD.BUTTON
-      });
-    });
-    _defineProperty(this, "handleCompositionStart", () => {
-      this.isComposing = true;
-    });
-    _defineProperty(this, "handleCompositionEnd", event => {
-      this.isComposing = false;
-      // type for React.CompositionEvent doesn't set type for target correctly
-      this.updateFindValue(event.target.value);
-    });
-    _defineProperty(this, "clearSearch", () => {
-      this.props.onCancel({
-        triggerMethod: TRIGGER_METHOD.BUTTON
-      });
-    });
-    _defineProperty(this, "handleMatchCaseClick", buttonRef => {
-      if (this.props.allowMatchCase && this.props.onToggleMatchCase) {
-        this.props.onToggleMatchCase();
-        this.props.onFind(this.props.findText);
-      }
-    });
-    const {
-      intl: {
-        formatMessage
-      }
-    } = props;
-    this.find = formatMessage(messages.find);
-    this.closeFindReplaceDialog = formatMessage(messages.closeFindReplaceDialog);
-    this.noResultsFound = formatMessage(messages.noResultsFound);
-    this.findNext = formatMessage(messages.findNext);
-    this.findPrevious = formatMessage(messages.findPrevious);
-    this.matchCase = formatMessage(messages.matchCase);
-    this.matchCaseIcon = jsx(MatchCaseIcon, {
-      label: this.matchCase
-    });
-    this.findNextIcon = jsx(ChevronDownIcon, {
-      label: this.findNext
-    });
-    this.findPrevIcon = jsx(ChevronUpIcon, {
-      label: this.findPrevious
-    });
-    this.closeIcon = jsx(EditorCloseIcon, {
-      label: this.closeFindReplaceDialog
-    });
-
-    // We locally manage the value of the input inside this component in order to support compositions.
-    // This requires some additional work inside componentDidUpdate to ensure we support changes that
-    // occur to this value which do not originate from this component.
-    this.state = {
-      localFindText: ''
-    };
-  }
-  componentDidMount() {
-    this.props.onFindTextfieldRefSet(this.findTextfieldRef);
-
-    // focus initially on dialog mount if there is no find text provided
-    if (!this.props.findText) {
-      this.focusFindTextfield();
-    }
-    this.syncFindText(() => {
-      // focus after input is synced if find text provided
-      if (this.props.findText) {
-        this.focusFindTextfield();
-      }
-    });
-  }
-  componentDidUpdate(prevProps) {
-    // focus on update if find text did not change
-    if (!getBooleanFF('platform.editor.a11y-find-replace')) {
-      var _this$state2;
-      if (this.props.findText === ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.localFindText)) {
-        this.focusFindTextfield();
-      }
-      if (this.props.findText !== prevProps.findText) {
-        this.syncFindText(() => {
-          // focus after input is synced if find text provided
-          if (this.props.findText) {
-            this.focusFindTextfield();
-          }
-        });
-      }
-    }
-  }
-  componentWillUnmount() {
-    this.debouncedFind.cancel();
-    this.handleFindKeyDownThrottled.cancel();
-  }
-  render() {
-    const {
-      findText,
-      count,
-      allowMatchCase,
-      shouldMatchCase,
-      intl: {
-        formatMessage
-      }
-    } = this.props;
-    const resultsCount = formatMessage(messages.resultsCount, {
-      selectedMatchPosition: count.index + 1,
-      totalResultsCount: count.total
-    });
-    return jsx("div", {
-      css: sectionWrapperStyles
-    }, jsx(Textfield, {
-      name: "find",
-      appearance: "none",
-      placeholder: this.find,
-      value: this.state.localFindText,
-      ref: this.findTextfieldRef,
-      autoComplete: "off",
-      onChange: this.handleFindChange,
-      onKeyDown: this.handleFindKeyDown,
-      onKeyUp: this.handleFindKeyUp,
-      onBlur: this.props.onFindBlur,
-      onCompositionStart: this.handleCompositionStart,
-      onCompositionEnd: this.handleCompositionEnd
-    }), jsx("div", {
-      css: countWrapperStyles,
-      "aria-live": "polite"
-    }, findText && jsx("span", {
-      "data-testid": "textfield-count",
-      css: countStyles
-    }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && jsx(FindReplaceTooltipButton, {
-      title: this.matchCase,
-      icon: this.matchCaseIcon,
-      onClick: this.handleMatchCaseClick,
-      isPressed: shouldMatchCase
-    }), jsx(FindReplaceTooltipButton, {
-      title: this.findNext,
-      icon: this.findNextIcon,
-      keymapDescription: 'Enter',
-      onClick: this.handleFindNextClick,
-      disabled: count.total <= 1
-    }), jsx(FindReplaceTooltipButton, {
-      title: this.findPrevious,
-      icon: this.findPrevIcon,
-      keymapDescription: 'Shift Enter',
-      onClick: this.handleFindPrevClick,
-      disabled: count.total <= 1
-    }), jsx(FindReplaceTooltipButton, {
-      title: this.closeFindReplaceDialog,
-      icon: this.closeIcon,
-      keymapDescription: 'Escape',
-      onClick: this.clearSearch
-    }));
-  }
-}
-export default injectIntl(Find);

package/dist/es2019/plugins/find-replace/ui/FindReplace.js

@@ -1,78 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/react';
-import Find from './Find';
-import Replace from './Replace';
-import { ruleStyles, wrapperStyles } from './styles';
-class FindReplace extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "findTextfield", null);
-    _defineProperty(this, "replaceTextfield", null);
-    _defineProperty(this, "setFindTextfieldRef", findTextfieldRef => {
-      this.findTextfield = findTextfieldRef.current;
-    });
-    _defineProperty(this, "setReplaceTextfieldRef", replaceTextfieldRef => {
-      this.replaceTextfield = replaceTextfieldRef.current;
-    });
-    _defineProperty(this, "setFocusToFind", () => {
-      if (this.findTextfield) {
-        this.findTextfield.focus();
-      }
-    });
-    _defineProperty(this, "setFocusToReplace", () => {
-      if (this.replaceTextfield) {
-        this.replaceTextfield.focus();
-      }
-    });
-  }
-  render() {
-    const {
-      findText,
-      count,
-      shouldFocus,
-      onFind,
-      onFindBlur,
-      onFindNext,
-      onFindPrev,
-      onCancel,
-      replaceText,
-      onReplace,
-      onReplaceAll,
-      dispatchAnalyticsEvent,
-      allowMatchCase,
-      shouldMatchCase,
-      onToggleMatchCase
-    } = this.props;
-    return jsx("div", {
-      css: wrapperStyles
-    }, jsx(Find, {
-      allowMatchCase: allowMatchCase,
-      shouldMatchCase: shouldMatchCase,
-      onToggleMatchCase: onToggleMatchCase,
-      findText: findText,
-      count: count,
-      shouldFocus: shouldFocus,
-      onFind: onFind,
-      onFindBlur: onFindBlur,
-      onFindPrev: onFindPrev,
-      onFindNext: onFindNext,
-      onFindTextfieldRefSet: this.setFindTextfieldRef,
-      onCancel: onCancel,
-      onArrowDown: this.setFocusToReplace
-    }), jsx("hr", {
-      css: ruleStyles,
-      id: "replace-hr-element"
-    }), jsx(Replace, {
-      canReplace: count.total > 0,
-      replaceText: replaceText,
-      onReplace: onReplace,
-      onReplaceAll: onReplaceAll,
-      onReplaceTextfieldRefSet: this.setReplaceTextfieldRef,
-      onArrowUp: this.setFocusToFind,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent
-    }));
-  }
-}
-export default FindReplace;

package/dist/es2019/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -1,122 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
-import React from 'react';
-import { css, jsx } from '@emotion/react';
-import { defineMessages, injectIntl } from 'react-intl-next';
-import { akEditorFloatingPanelZIndex, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
-import { ToolbarButton, TOOLBAR_BUTTON } from '@atlaskit/editor-common/ui-menu';
-import { Dropdown, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
-import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
-import FindReplace from './FindReplace';
-import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
-import { ToolTipContent, findKeymapByDescription, tooltip } from '../../../keymaps';
-import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
-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 toolbarButtonWrapperFullWith = css`
-  flex-grow: 1;
-`;
-const wrapper = css`
-  display: flex;
-  flex-direction: column;
-`;
-const messages = defineMessages({
-  findReplaceToolbarButton: {
-    id: 'fabric.editor.findReplaceToolbarButton',
-    defaultMessage: 'Find and replace',
-    description: '"Find" highlights all instances of a word or phrase on the document, and "Replace" changes one or all of those instances to something else'
-  }
-});
-class FindReplaceToolbarButton extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "toggleOpen", () => {
-      if (this.props.isActive) {
-        this.props.onCancel({
-          triggerMethod: TRIGGER_METHOD.TOOLBAR
-        });
-      } else {
-        this.props.onActivate();
-      }
-    });
-  }
-  render() {
-    const {
-      popupsMountPoint,
-      popupsBoundariesElement,
-      popupsScrollableElement,
-      isReducedSpacing,
-      findText,
-      replaceText,
-      isActive,
-      index,
-      numMatches,
-      intl: {
-        formatMessage
-      },
-      takeFullWidth
-    } = this.props;
-    const title = formatMessage(messages.findReplaceToolbarButton);
-    const stackBelowOtherEditorFloatingPanels = akEditorFloatingPanelZIndex - 1;
-    const keymap = findKeymapByDescription('Find');
-    return jsx("div", {
-      css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWith]
-    }, jsx(Dropdown, {
-      mountTo: popupsMountPoint,
-      boundariesElement: popupsBoundariesElement,
-      scrollableElement: popupsScrollableElement,
-      isOpen: isActive,
-      handleEscapeKeydown: () => {
-        if (isActive) {
-          this.props.onCancel({
-            triggerMethod: TRIGGER_METHOD.KEYBOARD
-          });
-        }
-      },
-      fitWidth: 352,
-      zIndex: stackBelowOtherEditorFloatingPanels,
-      arrowKeyNavigationProviderOptions: {
-        type: ArrowKeyNavigationType.MENU,
-        disableArrowKeyNavigation: true
-      },
-      trigger: jsx(ToolbarButton, {
-        buttonId: TOOLBAR_BUTTON.FIND_REPLACE,
-        spacing: isReducedSpacing ? 'none' : 'default',
-        selected: isActive,
-        title: jsx(ToolTipContent, {
-          description: title,
-          keymap: keymap
-        }),
-        iconBefore: jsx(EditorSearchIcon, {
-          label: title
-        }),
-        onClick: this.toggleOpen,
-        "aria-expanded": isActive,
-        "aria-haspopup": true,
-        "aria-label": keymap ? tooltip(keymap, title) : title,
-        "aria-keyshortcuts": getAriaKeyshortcuts(keymap)
-      })
-    }, jsx("div", {
-      css: wrapper
-    }, jsx(FindReplace, _extends({
-      findText: findText,
-      replaceText: replaceText,
-      count: {
-        index,
-        total: numMatches
-      }
-    }, this.props)))));
-  }
-}
-export default injectIntl(FindReplaceToolbarButton);