@atlaskit/editor-plugin-find-replace 6.0.9 → 6.1.1

package/dist/es2019/ui/FindReplace.js

@@ -9,11 +9,9 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Find from './Find';
 import Replace from './Replace';
-import ReplaceNext from './ReplaceNext';
 import { ruleStyles, wrapperPaddingStyles, wrapperStyles } from './ui-styles';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class FindReplace extends React.PureComponent {
@@ -21,32 +19,6 @@ class FindReplace extends React.PureComponent {
     super(props);
     _defineProperty(this, "findTextfield", null);
     _defineProperty(this, "replaceTextfield", null);
-    /**
-     * Delete this function on cleanup of
-     * editor_a11y_refactor_find_replace_style
-     */
-    _defineProperty(this, "handleTabNavigation", event => {
-      if (fg('editor_a11y_refactor_find_replace_style')) {
-        return;
-      }
-      if (event.key === 'Tab') {
-        event.preventDefault();
-        const modalFindReplace = this.modalRef.current;
-        if (!modalFindReplace || !modalFindReplace.contains(document.activeElement)) {
-          return;
-        }
-        const focusableElements = Array.from(modalFindReplace.querySelectorAll('[tabindex]:not([tabindex="-1"]), input, button')).filter(el => el.getAttribute('tabindex') !== '-1');
-        const currentIndex = focusableElements.findIndex(el => el === document.activeElement);
-        const isShiftPressed = event.shiftKey;
-        if (isShiftPressed) {
-          const prevIndex = (currentIndex - 1 + focusableElements.length) % focusableElements.length;
-          focusableElements[prevIndex].focus();
-        } else {
-          const nextIndex = (currentIndex + 1) % focusableElements.length;
-          focusableElements[nextIndex].focus();
-        }
-      }
-    });
     _defineProperty(this, "state", {
       findTyped: false
     });
@@ -73,14 +45,6 @@ class FindReplace extends React.PureComponent {
     });
     this.modalRef = /*#__PURE__*/React.createRef();
   }
-  componentDidMount() {
-    // eslint-disable-next-line
-    window.addEventListener('keydown', this.handleTabNavigation);
-  }
-  componentWillUnmount() {
-    // eslint-disable-next-line
-    window.removeEventListener('keydown', this.handleTabNavigation);
-  }
   render() {
     const {
       findText,
@@ -102,7 +66,9 @@ class FindReplace extends React.PureComponent {
     } = this.props;
     const focusToolbarButton = this.props.focusToolbarButton || (() => {});
     return jsx("div", {
-      role: 'dialog',
+      role: 'dialog'
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-jsx
+      ,
       "aria-label": 'Find and Replace',
       "aria-modal": false,
       ref: this.modalRef
@@ -129,22 +95,7 @@ class FindReplace extends React.PureComponent {
       role: "presentation",
       css: ruleStyles,
       id: "replace-hr-element"
-    }), fg('editor_a11y_refactor_find_replace_style') ? jsx(ReplaceNext, {
-      canReplace: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? !!isReplaceable : count.total > 0,
-      replaceText: replaceText,
-      onReplace: onReplace,
-      onReplaceAll: onReplaceAll,
-      onReplaceTextfieldRefSet: this.setReplaceTextfieldRef,
-      onArrowUp: this.setFocusToFind,
-      onCancel: onCancel,
-      count: count,
-      onFindPrev: onFindPrev,
-      onFindNext: onFindNext,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      findTyped: this.state.findTyped,
-      setFindTyped: this.setFindTyped,
-      focusToolbarButton: focusToolbarButton
-    }) : jsx(Replace, {
+    }), jsx(Replace, {
       canReplace: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? !!isReplaceable : count.total > 0,
       replaceText: replaceText,
       onReplace: onReplace,

package/dist/es2019/ui/Replace.js

@@ -1,332 +1,243 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { Fragment } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import React, { useState, useRef, useEffect } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
 import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
-import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { Label, ValidMessage } from '@atlaskit/form';
+import { ValidMessage } from '@atlaskit/form';
 import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Inline, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
-import { nextPreviousItemStyles, orderZeroStyles, textFieldWrapper } from './ui-styles';
-const sectionWrapperStyles = css({
-  display: 'flex',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > *': {
-    display: 'inline-flex',
-    height: '32px',
-    flex: '0 0 auto'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > [data-ds--text-field--container]': {
-    display: 'flex',
-    flex: '1 1 auto'
-  }
+const replaceContainerStyles = xcss({
+  padding: 'space.100'
 });
-const sectionWrapperStylesAlternate = css({
-  display: 'flex',
-  padding: "var(--ds-space-100, 8px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > *': {
-    height: 'unset'
-  }
+const replaceWithLabelStyle = xcss({
+  paddingBottom: 'space.050'
+});
+const actionButtonContainerStyles = xcss({
+  paddingTop: 'space.200'
 });
-const sectionWrapperJustified = css({
+const actionButtonParentInlineStyles = xcss({
   justifyContent: 'space-between',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: relativeFontSizeToBase16(14)
+  flexDirection: 'row-reverse'
 });
-const sectionWrapperFlexWrap = css({
-  flexWrap: 'wrap-reverse',
-  gap: "var(--ds-space-075, 6px)"
+const actionButtonParentInlineStylesNew = xcss({
+  justifyContent: 'space-between',
+  flexDirection: 'row-reverse',
+  flexWrap: 'wrap'
 });
-const orderOneStyles = css({
-  order: '1'
+const actionButtonInlineStyles = xcss({
+  gap: 'space.075'
 });
-const orderOneStylesNew = css({
-  order: '1',
-  marginLeft: 'auto'
+const closeButtonInlineStyles = xcss({
+  marginRight: 'auto'
 });
-// eslint-disable-next-line @repo/internal/react/no-class-components
-class Replace extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "replaceTextfieldRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "successReplacementMessageRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "isComposing", false);
-    _defineProperty(this, "skipWhileComposing", fn => {
-      if (this.state.isComposing) {
-        return;
-      }
+const Replace = ({
+  canReplace,
+  replaceText: initialReplaceText,
+  onReplace,
+  onReplaceAll,
+  onReplaceTextfieldRefSet,
+  onArrowUp,
+  onCancel,
+  count,
+  onFindNext,
+  onFindPrev,
+  dispatchAnalyticsEvent,
+  setFindTyped,
+  findTyped,
+  focusToolbarButton,
+  intl: {
+    formatMessage
+  }
+}) => {
+  const [replaceText, setReplaceText] = useState(initialReplaceText || '');
+  const [isComposing, setIsComposing] = useState(false);
+  const [isHelperMessageVisible, setIsHelperMessageVisible] = useState(false);
+  const [fakeSuccessReplacementMessageUpdate, setFakeSuccessReplacementMessageUpdate] = useState(false);
+  const [replaceCount, setReplaceCount] = useState(0);
+  const replaceTextfieldRef = useRef(null);
+  const successReplacementMessageRef = useRef(null);
+  const replaceWith = formatMessage(messages.replaceWith);
+  const replaceAll = formatMessage(messages.replaceAll);
+  const findPrevious = formatMessage(messages.findPrevious);
+  const closeFindReplaceDialog = formatMessage(messages.closeFindReplaceDialog);
+  useEffect(() => {
+    onReplaceTextfieldRefSet(replaceTextfieldRef);
+  }, [onReplaceTextfieldRefSet]);
+  useEffect(() => {
+    setReplaceText(initialReplaceText || '');
+  }, [initialReplaceText]);
+  const skipWhileComposing = fn => {
+    if (!isComposing) {
       fn();
+    }
+  };
+  const triggerSuccessReplacementMessageUpdate = currentReplaceCount => {
+    if (replaceCount === currentReplaceCount) {
+      setFakeSuccessReplacementMessageUpdate(!fakeSuccessReplacementMessageUpdate);
+    }
+    if (successReplacementMessageRef.current) {
+      const ariaLiveRegion = successReplacementMessageRef.current.querySelector('[aria-live="polite"]');
+      ariaLiveRegion === null || ariaLiveRegion === void 0 ? void 0 : ariaLiveRegion.removeAttribute('aria-live');
+      ariaLiveRegion === null || ariaLiveRegion === void 0 ? void 0 : ariaLiveRegion.setAttribute('aria-live', 'polite');
+    }
+  };
+  const handleReplaceClick = () => skipWhileComposing(() => {
+    onReplace({
+      triggerMethod: TRIGGER_METHOD.BUTTON,
+      replaceText
     });
-    _defineProperty(this, "handleReplaceClick", () => this.skipWhileComposing(() => {
-      this.props.onReplace({
-        triggerMethod: TRIGGER_METHOD.BUTTON,
-        replaceText: this.state.replaceText
+    triggerSuccessReplacementMessageUpdate(1);
+    setIsHelperMessageVisible(true);
+    setReplaceCount(1);
+    setFindTyped(false);
+  });
+  const handleReplaceChange = event => skipWhileComposing(() => {
+    updateReplaceValue(event.target.value);
+  });
+  const updateReplaceValue = text => {
+    if (dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        eventType: EVENT_TYPE.TRACK,
+        action: ACTION.CHANGED_REPLACEMENT_TEXT,
+        actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG
       });
-      // for replace button replaceCount always 1;
-      const replaceCount = 1;
-      this.triggerSuccessReplacementMessageUpdate(replaceCount);
-      this.setState({
-        isHelperMessageVisible: true,
-        replaceCount
-      });
-      this.props.setFindTyped(false);
-    }));
-    _defineProperty(this, "handleReplaceChange", event => this.skipWhileComposing(() => {
-      this.updateReplaceValue(event.target.value);
-    }));
-    _defineProperty(this, "updateReplaceValue", replaceText => {
-      const {
-        dispatchAnalyticsEvent
-      } = this.props;
-      if (dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent({
-          eventType: EVENT_TYPE.TRACK,
-          action: ACTION.CHANGED_REPLACEMENT_TEXT,
-          actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG
-        });
-      }
-      this.setState({
+    }
+    setReplaceText(text);
+  };
+  const handleReplaceKeyDown = event => skipWhileComposing(() => {
+    if (event.key === 'Enter') {
+      onReplace({
+        triggerMethod: TRIGGER_METHOD.KEYBOARD,
         replaceText
       });
+    } else if (event.key === 'ArrowUp') {
+      onArrowUp();
+    }
+  });
+  const handleReplaceAllClick = () => skipWhileComposing(() => {
+    onReplaceAll({
+      replaceText
     });
-    _defineProperty(this, "handleReplaceKeyDown", event => this.skipWhileComposing(() => {
-      if (event.key === 'Enter') {
-        this.props.onReplace({
-          triggerMethod: TRIGGER_METHOD.KEYBOARD,
-          replaceText: this.state.replaceText
-        });
-      } else if (event.key === 'ArrowUp') {
-        // we want to move focus between find & replace texfields when user hits up/down arrows
-        this.props.onArrowUp();
-      }
-    }));
-    _defineProperty(this, "handleReplaceAllClick", () => this.skipWhileComposing(() => {
-      this.props.onReplaceAll({
-        replaceText: this.state.replaceText
-      });
-      this.setState({
-        isHelperMessageVisible: true
-      });
-      if (this.props.count.totalReplaceable && expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
-        this.triggerSuccessReplacementMessageUpdate(this.props.count.totalReplaceable);
-        this.setState({
-          replaceCount: this.props.count.totalReplaceable
-        });
-      } else {
-        this.triggerSuccessReplacementMessageUpdate(this.props.count.total);
-        this.setState({
-          replaceCount: this.props.count.total
-        });
-      }
-      this.props.setFindTyped(false);
-    }));
-    _defineProperty(this, "handleCompositionStart", () => {
-      this.setState({
-        isComposing: true
-      });
-    });
-    _defineProperty(this, "handleCompositionEnd", event => {
-      this.setState({
-        isComposing: false
-      });
-      // type for React.CompositionEvent doesn't set type for target correctly
-      this.updateReplaceValue(event.target.value);
-    });
-    _defineProperty(this, "clearSearch", () => {
-      this.props.onCancel({
-        triggerMethod: TRIGGER_METHOD.BUTTON
-      });
-      this.props.focusToolbarButton && this.props.focusToolbarButton();
-    });
-    _defineProperty(this, "handleFindNextClick", () => {
-      if (this.isComposing) {
-        return;
-      }
-      this.props.onFindNext({
-        triggerMethod: TRIGGER_METHOD.BUTTON
-      });
+    setIsHelperMessageVisible(true);
+    if (count.totalReplaceable && expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
+      triggerSuccessReplacementMessageUpdate(count.totalReplaceable);
+      setReplaceCount(count.totalReplaceable);
+    } else {
+      triggerSuccessReplacementMessageUpdate(count.total);
+      setReplaceCount(count.total);
+    }
+    setFindTyped(false);
+  });
+  const handleCompositionStart = () => {
+    setIsComposing(true);
+  };
+  const handleCompositionEnd = event => {
+    setIsComposing(false);
+    // type for React.CompositionEvent doesn't set type for target correctly
+    updateReplaceValue(event.target.value);
+  };
+  const clearSearch = () => {
+    onCancel({
+      triggerMethod: TRIGGER_METHOD.BUTTON
     });
-    _defineProperty(this, "handleFindPrevClick", () => {
-      if (this.isComposing) {
-        return;
-      }
-      this.props.onFindPrev({
+    focusToolbarButton();
+  };
+  const handleFindNextClick = () => {
+    if (!isComposing) {
+      onFindNext({
         triggerMethod: TRIGGER_METHOD.BUTTON
       });
-    });
-    const {
-      replaceText: _replaceText,
-      intl: {
-        formatMessage
-      }
-    } = props;
-    this.state = {
-      replaceText: _replaceText || '',
-      isComposing: false,
-      isHelperMessageVisible: false,
-      fakeSuccessReplacementMessageUpdate: false,
-      replaceCount: 0
-    };
-    this.replace = formatMessage(messages.replace);
-    this.replaceWith = formatMessage(messages.replaceWith);
-    this.replaceAll = formatMessage(messages.replaceAll);
-    this.findNext = formatMessage(messages.findNext);
-    this.findPrevious = formatMessage(messages.findPrevious);
-    this.closeFindReplaceDialog = formatMessage(messages.closeFindReplaceDialog);
-  }
-  componentDidMount() {
-    this.props.onReplaceTextfieldRefSet(this.replaceTextfieldRef);
-  }
-  componentDidUpdate({
-    replaceText: prevReplaceText
-  }) {
-    const {
-      replaceText
-    } = this.props;
-    if (replaceText && replaceText !== prevReplaceText) {
-      this.setState({
-        replaceText,
-        isComposing: false
-      });
-    }
-    const findTextField = document.getElementById('find-text-field');
-    const replaceButton = document.getElementById('replace-button');
-    const replaceAllButton = document.getElementById('replaceAll-button');
-    if (((replaceButton === null || replaceButton === void 0 ? void 0 : replaceButton.tabIndex) === -1 || (replaceAllButton === null || replaceAllButton === void 0 ? void 0 : replaceAllButton.tabIndex) === -1) && findTextField) {
-      findTextField.focus();
     }
-  }
-  triggerSuccessReplacementMessageUpdate(currentReplaceCount) {
-    var _this$state;
-    if (((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.replaceCount) === currentReplaceCount) {
-      this.setState({
-        fakeSuccessReplacementMessageUpdate: !this.state.fakeSuccessReplacementMessageUpdate
+  };
+  const handleFindPrevClick = () => {
+    if (!isComposing) {
+      onFindPrev({
+        triggerMethod: TRIGGER_METHOD.BUTTON
       });
     }
-    if (this.successReplacementMessageRef && this.successReplacementMessageRef.current) {
-      const ariaLiveRegion = this.successReplacementMessageRef.current.querySelector('[aria-live="polite"]');
-      ariaLiveRegion === null || ariaLiveRegion === void 0 ? void 0 : ariaLiveRegion.removeAttribute('aria-live');
-      ariaLiveRegion === null || ariaLiveRegion === void 0 ? void 0 : ariaLiveRegion.setAttribute('aria-live', 'polite');
-    }
-  }
-  render() {
-    const {
-      replaceText,
-      isHelperMessageVisible,
-      replaceCount
-    } = this.state;
-    const {
-      canReplace,
-      count,
-      intl: {
-        formatMessage
-      }
-    } = this.props;
-    const resultsReplace = formatMessage(messages.replaceSuccess, {
-      numberOfMatches: replaceCount
-    });
-    return jsx(Fragment, null, jsx("div", {
-      css: [sectionWrapperStyles, sectionWrapperStylesAlternate]
-    }, jsx("div", {
-      css: textFieldWrapper
-    }, jsx(Label, {
-      htmlFor: "replace-text-field"
-    }, this.replaceWith), jsx(Textfield, {
-      name: "replace",
-      id: "replace-text-field",
-      testId: "replace-field",
-      appearance: "standard",
-      defaultValue: replaceText,
-      ref: this.replaceTextfieldRef,
-      autoComplete: "off",
-      onChange: this.handleReplaceChange,
-      onKeyDown: this.handleReplaceKeyDown,
-      onCompositionStart: this.handleCompositionStart,
-      onCompositionEnd: this.handleCompositionEnd
-    }), isHelperMessageVisible && this.props.findTyped === false && jsx("div", {
-      ref: this.successReplacementMessageRef
-    }, jsx(ValidMessage, {
-      testId: "message-success-replacement"
-    },
-    /*
-    Replacement needed to trigger the SR announcement if message hasn't changed. e.g Replace button clicked twice.
-    '\u00a0' is value for &nbsp
-    */
-    this.state.fakeSuccessReplacementMessageUpdate ?
-    // Ignored via go/ees005
-    // eslint-disable-next-line require-unicode-regexp
-    resultsReplace.replace(/ /, '\u00a0') : resultsReplace)))), jsx("div", {
-      css: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified, sectionWrapperFlexWrap] : [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified]
-    }, jsx("div", {
-      css: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? orderOneStylesNew : orderOneStyles
-    }, jsx("div", {
-      css: nextPreviousItemStyles
-    }, jsx(FindReplaceTooltipButton, {
-      title: this.findNext,
-      icon: iconProps => jsx(ChevronDownIcon, {
-        label: iconProps.label,
-        size: "small"
-      }),
-      iconLabel: this.findNext,
-      keymapDescription: 'Enter',
-      onClick: this.handleFindNextClick,
-      disabled: count.total <= 1
-    })), jsx("div", {
-      css: nextPreviousItemStyles
-    }, jsx(FindReplaceTooltipButton, {
-      title: this.findPrevious,
-      icon: iconProps => jsx(ChevronUpIcon, {
-        label: iconProps.label,
-        size: "small"
-      }),
-      iconLabel: this.findPrevious,
-      keymapDescription: 'Shift Enter',
-      onClick: this.handleFindPrevClick,
-      disabled: count.total <= 1
-    })), jsx(Inline, {
-      space: "space.075"
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      xcss: xcss({
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-        paddingInlineStart: 'space.050',
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-        paddingInlineEnd: 'space.025'
-      })
-    }, jsx(Button, {
-      testId: this.replace,
-      id: "replace-button",
-      onClick: this.handleReplaceClick,
-      isDisabled: !canReplace
-    }, this.replace), jsx(Button, {
-      appearance: "primary",
-      testId: this.replaceAll,
-      id: "replaceAll-button",
-      onClick: this.handleReplaceAllClick,
-      isDisabled: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? count.totalReplaceable === 0 : !canReplace
-    }, this.replaceAll))), jsx("div", {
-      css: orderZeroStyles
-    }, jsx(Button, {
-      appearance: "subtle",
-      testId: this.closeFindReplaceDialog,
-      onClick: this.clearSearch
-    }, this.closeFindReplaceDialog))));
-  }
-}
+  };
+  const resultsReplace = formatMessage(messages.replaceSuccess, {
+    numberOfMatches: replaceCount
+  });
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: replaceContainerStyles
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: replaceWithLabelStyle
+  }, /*#__PURE__*/React.createElement(Text, {
+    id: "replace-text-field-label",
+    size: "medium",
+    weight: "bold",
+    color: "color.text.subtle"
+  }, replaceWith)), /*#__PURE__*/React.createElement(Textfield, {
+    name: "replace",
+    "aria-labelledby": "replace-text-field-label",
+    testId: "replace-field",
+    appearance: "standard",
+    defaultValue: replaceText,
+    ref: replaceTextfieldRef,
+    autoComplete: "off",
+    onChange: handleReplaceChange,
+    onKeyDown: handleReplaceKeyDown,
+    onCompositionStart: handleCompositionStart,
+    onCompositionEnd: handleCompositionEnd
+  }), isHelperMessageVisible && !findTyped && /*#__PURE__*/React.createElement("div", {
+    ref: successReplacementMessageRef
+  }, /*#__PURE__*/React.createElement(ValidMessage, {
+    testId: "message-success-replacement"
+  }, fakeSuccessReplacementMessageUpdate ?
+  // @ts-ignore - TS1501 TypeScript 5.9.2 upgrade
+  resultsReplace.replace(/ /u, '\u00a0') : resultsReplace)), /*#__PURE__*/React.createElement(Box, {
+    xcss: actionButtonContainerStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
+    xcss: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? [actionButtonInlineStyles, actionButtonParentInlineStylesNew] : [actionButtonInlineStyles, actionButtonParentInlineStyles]
+  }, /*#__PURE__*/React.createElement(Inline, {
+    xcss: actionButtonInlineStyles
+  }, /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+    title: formatMessage(messages.findNext),
+    icon: iconProps => /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      label: iconProps.label,
+      size: "small"
+    }),
+    iconLabel: formatMessage(messages.findNext),
+    keymapDescription: 'Enter',
+    onClick: handleFindNextClick,
+    disabled: count.total <= 1
+  }), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+    title: findPrevious,
+    icon: iconProps => /*#__PURE__*/React.createElement(ChevronUpIcon, {
+      label: iconProps.label,
+      size: "small"
+    }),
+    iconLabel: findPrevious,
+    keymapDescription: 'Shift Enter',
+    onClick: handleFindPrevClick,
+    disabled: count.total <= 1
+  }), /*#__PURE__*/React.createElement(Button, {
+    testId: 'Replace',
+    id: "replace-button",
+    onClick: handleReplaceClick,
+    isDisabled: !canReplace
+  }, formatMessage(messages.replace)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    testId: replaceAll,
+    id: "replaceAll-button",
+    onClick: handleReplaceAllClick,
+    isDisabled: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? count.totalReplaceable === 0 : !canReplace
+  }, replaceAll)), expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? /*#__PURE__*/React.createElement(Inline, {
+    xcss: closeButtonInlineStyles
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    testId: closeFindReplaceDialog,
+    onClick: clearSearch
+  }, closeFindReplaceDialog)) : /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    testId: closeFindReplaceDialog,
+    onClick: clearSearch
+  }, closeFindReplaceDialog))));
+};
 export default injectIntl(Replace);