@atlaskit/editor-plugin-find-replace 6.0.8 → 6.1.0

package/dist/cjs/ui/Replace.js

@@ -6,19 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _form = require("@atlaskit/form");
 var _chevronDownHipchatChevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down"));
 var _chevronUpHipchatChevronUp = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up"));
@@ -26,331 +19,260 @@ var _primitives = require("@atlaskit/primitives");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _FindReplaceTooltipButton = require("./FindReplaceTooltipButton");
-var _uiStyles = require("./ui-styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */ /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-var sectionWrapperStyles = (0, _react2.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'
-  }
+
+var replaceContainerStyles = (0, _primitives.xcss)({
+  padding: 'space.100'
+});
+var replaceWithLabelStyle = (0, _primitives.xcss)({
+  paddingBottom: 'space.050'
 });
-var sectionWrapperStylesAlternate = (0, _react2.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'
-  }
+var actionButtonContainerStyles = (0, _primitives.xcss)({
+  paddingTop: 'space.200'
 });
-var sectionWrapperJustified = (0, _react2.css)({
+var actionButtonParentInlineStyles = (0, _primitives.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: (0, _editorSharedStyles.relativeFontSizeToBase16)(14)
+  flexDirection: 'row-reverse'
 });
-var sectionWrapperFlexWrap = (0, _react2.css)({
-  flexWrap: 'wrap-reverse',
-  gap: "var(--ds-space-075, 6px)"
+var actionButtonParentInlineStylesNew = (0, _primitives.xcss)({
+  justifyContent: 'space-between',
+  flexDirection: 'row-reverse',
+  flexWrap: 'wrap'
 });
-var orderOneStyles = (0, _react2.css)({
-  order: '1'
+var actionButtonInlineStyles = (0, _primitives.xcss)({
+  gap: 'space.075'
 });
-var orderOneStylesNew = (0, _react2.css)({
-  order: '1',
-  marginLeft: 'auto'
+var closeButtonInlineStyles = (0, _primitives.xcss)({
+  marginRight: 'auto'
 });
-// eslint-disable-next-line @repo/internal/react/no-class-components
-var Replace = /*#__PURE__*/function (_React$PureComponent) {
-  function Replace(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, Replace);
-    _this = _callSuper(this, Replace, [props]);
-    (0, _defineProperty2.default)(_this, "replaceTextfieldRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)(_this, "successReplacementMessageRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)(_this, "isComposing", false);
-    (0, _defineProperty2.default)(_this, "skipWhileComposing", function (fn) {
-      if (_this.state.isComposing) {
-        return;
-      }
+var Replace = function Replace(_ref) {
+  var canReplace = _ref.canReplace,
+    initialReplaceText = _ref.replaceText,
+    onReplace = _ref.onReplace,
+    onReplaceAll = _ref.onReplaceAll,
+    onReplaceTextfieldRefSet = _ref.onReplaceTextfieldRefSet,
+    onArrowUp = _ref.onArrowUp,
+    onCancel = _ref.onCancel,
+    count = _ref.count,
+    onFindNext = _ref.onFindNext,
+    onFindPrev = _ref.onFindPrev,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    setFindTyped = _ref.setFindTyped,
+    findTyped = _ref.findTyped,
+    focusToolbarButton = _ref.focusToolbarButton,
+    formatMessage = _ref.intl.formatMessage;
+  var _useState = (0, _react.useState)(initialReplaceText || ''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    replaceText = _useState2[0],
+    setReplaceText = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isComposing = _useState4[0],
+    setIsComposing = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isHelperMessageVisible = _useState6[0],
+    setIsHelperMessageVisible = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    fakeSuccessReplacementMessageUpdate = _useState8[0],
+    setFakeSuccessReplacementMessageUpdate = _useState8[1];
+  var _useState9 = (0, _react.useState)(0),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    replaceCount = _useState0[0],
+    setReplaceCount = _useState0[1];
+  var replaceTextfieldRef = (0, _react.useRef)(null);
+  var successReplacementMessageRef = (0, _react.useRef)(null);
+  var replaceWith = formatMessage(_messages.findReplaceMessages.replaceWith);
+  var replaceAll = formatMessage(_messages.findReplaceMessages.replaceAll);
+  var findPrevious = formatMessage(_messages.findReplaceMessages.findPrevious);
+  var closeFindReplaceDialog = formatMessage(_messages.findReplaceMessages.closeFindReplaceDialog);
+  (0, _react.useEffect)(function () {
+    onReplaceTextfieldRefSet(replaceTextfieldRef);
+  }, [onReplaceTextfieldRefSet]);
+  (0, _react.useEffect)(function () {
+    setReplaceText(initialReplaceText || '');
+  }, [initialReplaceText]);
+  var skipWhileComposing = function skipWhileComposing(fn) {
+    if (!isComposing) {
       fn();
-    });
-    (0, _defineProperty2.default)(_this, "handleReplaceClick", function () {
-      return _this.skipWhileComposing(function () {
-        _this.props.onReplace({
-          triggerMethod: _analytics.TRIGGER_METHOD.BUTTON,
-          replaceText: _this.state.replaceText
-        });
-        // for replace button replaceCount always 1;
-        var replaceCount = 1;
-        _this.triggerSuccessReplacementMessageUpdate(replaceCount);
-        _this.setState({
-          isHelperMessageVisible: true,
-          replaceCount: replaceCount
-        });
-        _this.props.setFindTyped(false);
-      });
-    });
-    (0, _defineProperty2.default)(_this, "handleReplaceChange", function (event) {
-      return _this.skipWhileComposing(function () {
-        _this.updateReplaceValue(event.target.value);
-      });
-    });
-    (0, _defineProperty2.default)(_this, "updateReplaceValue", function (replaceText) {
-      var dispatchAnalyticsEvent = _this.props.dispatchAnalyticsEvent;
-      if (dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent({
-          eventType: _analytics.EVENT_TYPE.TRACK,
-          action: _analytics.ACTION.CHANGED_REPLACEMENT_TEXT,
-          actionSubject: _analytics.ACTION_SUBJECT.FIND_REPLACE_DIALOG
-        });
-      }
-      _this.setState({
+    }
+  };
+  var triggerSuccessReplacementMessageUpdate = function triggerSuccessReplacementMessageUpdate(currentReplaceCount) {
+    if (replaceCount === currentReplaceCount) {
+      setFakeSuccessReplacementMessageUpdate(!fakeSuccessReplacementMessageUpdate);
+    }
+    if (successReplacementMessageRef.current) {
+      var ariaLiveRegion = successReplacementMessageRef.current.querySelector('[aria-live="polite"]');
+      ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.removeAttribute('aria-live');
+      ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.setAttribute('aria-live', 'polite');
+    }
+  };
+  var handleReplaceClick = function handleReplaceClick() {
+    return skipWhileComposing(function () {
+      onReplace({
+        triggerMethod: _analytics.TRIGGER_METHOD.BUTTON,
         replaceText: replaceText
       });
+      triggerSuccessReplacementMessageUpdate(1);
+      setIsHelperMessageVisible(true);
+      setReplaceCount(1);
+      setFindTyped(false);
     });
-    (0, _defineProperty2.default)(_this, "handleReplaceKeyDown", function (event) {
-      return _this.skipWhileComposing(function () {
-        if (event.key === 'Enter') {
-          _this.props.onReplace({
-            triggerMethod: _analytics.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();
-        }
-      });
+  };
+  var handleReplaceChange = function handleReplaceChange(event) {
+    return skipWhileComposing(function () {
+      updateReplaceValue(event.target.value);
     });
-    (0, _defineProperty2.default)(_this, "handleReplaceAllClick", function () {
-      return _this.skipWhileComposing(function () {
-        _this.props.onReplaceAll({
-          replaceText: _this.state.replaceText
-        });
-        _this.setState({
-          isHelperMessageVisible: true
-        });
-        if (_this.props.count.totalReplaceable && (0, _expValEquals.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);
-      });
-    });
-    (0, _defineProperty2.default)(_this, "handleCompositionStart", function () {
-      _this.setState({
-        isComposing: true
+  };
+  var updateReplaceValue = function updateReplaceValue(text) {
+    if (dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        action: _analytics.ACTION.CHANGED_REPLACEMENT_TEXT,
+        actionSubject: _analytics.ACTION_SUBJECT.FIND_REPLACE_DIALOG
       });
+    }
+    setReplaceText(text);
+  };
+  var handleReplaceKeyDown = function handleReplaceKeyDown(event) {
+    return skipWhileComposing(function () {
+      if (event.key === 'Enter') {
+        onReplace({
+          triggerMethod: _analytics.TRIGGER_METHOD.KEYBOARD,
+          replaceText: replaceText
+        });
+      } else if (event.key === 'ArrowUp') {
+        onArrowUp();
+      }
     });
-    (0, _defineProperty2.default)(_this, "handleCompositionEnd", function (event) {
-      _this.setState({
-        isComposing: false
+  };
+  var handleReplaceAllClick = function handleReplaceAllClick() {
+    return skipWhileComposing(function () {
+      onReplaceAll({
+        replaceText: replaceText
       });
-      // type for React.CompositionEvent doesn't set type for target correctly
-      _this.updateReplaceValue(event.target.value);
+      setIsHelperMessageVisible(true);
+      if (count.totalReplaceable && (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
+        triggerSuccessReplacementMessageUpdate(count.totalReplaceable);
+        setReplaceCount(count.totalReplaceable);
+      } else {
+        triggerSuccessReplacementMessageUpdate(count.total);
+        setReplaceCount(count.total);
+      }
+      setFindTyped(false);
     });
-    (0, _defineProperty2.default)(_this, "clearSearch", function () {
-      _this.props.onCancel({
-        triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
-      });
-      _this.props.focusToolbarButton && _this.props.focusToolbarButton();
+  };
+  var handleCompositionStart = function handleCompositionStart() {
+    setIsComposing(true);
+  };
+  var handleCompositionEnd = function handleCompositionEnd(event) {
+    setIsComposing(false);
+    // type for React.CompositionEvent doesn't set type for target correctly
+    updateReplaceValue(event.target.value);
+  };
+  var clearSearch = function clearSearch() {
+    onCancel({
+      triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
     });
-    (0, _defineProperty2.default)(_this, "handleFindNextClick", function () {
-      if (_this.isComposing) {
-        return;
-      }
-      _this.props.onFindNext({
+    focusToolbarButton();
+  };
+  var handleFindNextClick = function handleFindNextClick() {
+    if (!isComposing) {
+      onFindNext({
         triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
       });
-    });
-    (0, _defineProperty2.default)(_this, "handleFindPrevClick", function () {
-      if (_this.isComposing) {
-        return;
-      }
-      _this.props.onFindPrev({
+    }
+  };
+  var handleFindPrevClick = function handleFindPrevClick() {
+    if (!isComposing) {
+      onFindPrev({
         triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
       });
-    });
-    var _replaceText = props.replaceText,
-      formatMessage = props.intl.formatMessage;
-    _this.state = {
-      replaceText: _replaceText || '',
-      isComposing: false,
-      isHelperMessageVisible: false,
-      fakeSuccessReplacementMessageUpdate: false,
-      replaceCount: 0
-    };
-    _this.replace = formatMessage(_messages.findReplaceMessages.replace);
-    _this.replaceWith = formatMessage(_messages.findReplaceMessages.replaceWith);
-    _this.replaceAll = formatMessage(_messages.findReplaceMessages.replaceAll);
-    _this.findNext = formatMessage(_messages.findReplaceMessages.findNext);
-    _this.findPrevious = formatMessage(_messages.findReplaceMessages.findPrevious);
-    _this.closeFindReplaceDialog = formatMessage(_messages.findReplaceMessages.closeFindReplaceDialog);
-    return _this;
-  }
-  (0, _inherits2.default)(Replace, _React$PureComponent);
-  return (0, _createClass2.default)(Replace, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.props.onReplaceTextfieldRefSet(this.replaceTextfieldRef);
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref) {
-      var prevReplaceText = _ref.replaceText;
-      var replaceText = this.props.replaceText;
-      if (replaceText && replaceText !== prevReplaceText) {
-        this.setState({
-          replaceText: replaceText,
-          isComposing: false
-        });
-      }
-      var findTextField = document.getElementById('find-text-field');
-      var replaceButton = document.getElementById('replace-button');
-      var 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();
-      }
-    }
-  }, {
-    key: "triggerSuccessReplacementMessageUpdate",
-    value: function 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
-        });
-      }
-      if (this.successReplacementMessageRef && this.successReplacementMessageRef.current) {
-        var ariaLiveRegion = this.successReplacementMessageRef.current.querySelector('[aria-live="polite"]');
-        ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.removeAttribute('aria-live');
-        ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.setAttribute('aria-live', 'polite');
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state2 = this.state,
-        replaceText = _this$state2.replaceText,
-        isHelperMessageVisible = _this$state2.isHelperMessageVisible,
-        replaceCount = _this$state2.replaceCount;
-      var _this$props = this.props,
-        canReplace = _this$props.canReplace,
-        count = _this$props.count,
-        formatMessage = _this$props.intl.formatMessage;
-      var resultsReplace = formatMessage(_messages.findReplaceMessages.replaceSuccess, {
-        numberOfMatches: replaceCount
+  };
+  var resultsReplace = formatMessage(_messages.findReplaceMessages.replaceSuccess, {
+    numberOfMatches: replaceCount
+  });
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: replaceContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: replaceWithLabelStyle
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    id: "replace-text-field-label",
+    size: "medium",
+    weight: "bold",
+    color: "color.text.subtle"
+  }, replaceWith)), /*#__PURE__*/_react.default.createElement(_textfield.default, {
+    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.default.createElement("div", {
+    ref: successReplacementMessageRef
+  }, /*#__PURE__*/_react.default.createElement(_form.ValidMessage, {
+    testId: "message-success-replacement"
+  }, fakeSuccessReplacementMessageUpdate ?
+  // @ts-ignore - TS1501 TypeScript 5.9.2 upgrade
+  resultsReplace.replace(/ /, "\xA0") : resultsReplace)), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: actionButtonContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    xcss: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? [actionButtonInlineStyles, actionButtonParentInlineStylesNew] : [actionButtonInlineStyles, actionButtonParentInlineStyles]
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    xcss: actionButtonInlineStyles
+  }, /*#__PURE__*/_react.default.createElement(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+    title: formatMessage(_messages.findReplaceMessages.findNext),
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/_react.default.createElement(_chevronDownHipchatChevronDown.default, {
+        label: iconProps.label,
+        size: "small"
       });
-      return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
-        css: [sectionWrapperStyles, sectionWrapperStylesAlternate]
-      }, (0, _react2.jsx)("div", {
-        css: _uiStyles.textFieldWrapper
-      }, (0, _react2.jsx)(_form.Label, {
-        htmlFor: "replace-text-field"
-      }, this.replaceWith), (0, _react2.jsx)(_textfield.default, {
-        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 && (0, _react2.jsx)("div", {
-        ref: this.successReplacementMessageRef
-      }, (0, _react2.jsx)(_form.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(/ /, "\xA0") : resultsReplace)))), (0, _react2.jsx)("div", {
-        css: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified, sectionWrapperFlexWrap] : [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified]
-      }, (0, _react2.jsx)("div", {
-        css: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? orderOneStylesNew : orderOneStyles
-      }, (0, _react2.jsx)("div", {
-        css: _uiStyles.nextPreviousItemStyles
-      }, (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
-        title: this.findNext,
-        icon: function icon(iconProps) {
-          return (0, _react2.jsx)(_chevronDownHipchatChevronDown.default, {
-            label: iconProps.label,
-            size: "small"
-          });
-        },
-        iconLabel: this.findNext,
-        keymapDescription: 'Enter',
-        onClick: this.handleFindNextClick,
-        disabled: count.total <= 1
-      })), (0, _react2.jsx)("div", {
-        css: _uiStyles.nextPreviousItemStyles
-      }, (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
-        title: this.findPrevious,
-        icon: function icon(iconProps) {
-          return (0, _react2.jsx)(_chevronUpHipchatChevronUp.default, {
-            label: iconProps.label,
-            size: "small"
-          });
-        },
-        iconLabel: this.findPrevious,
-        keymapDescription: 'Shift Enter',
-        onClick: this.handleFindPrevClick,
-        disabled: count.total <= 1
-      })), (0, _react2.jsx)(_primitives.Inline, {
-        space: "space.075"
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        ,
-        xcss: (0, _primitives.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'
-        })
-      }, (0, _react2.jsx)(_new.default, {
-        testId: this.replace,
-        id: "replace-button",
-        onClick: this.handleReplaceClick,
-        isDisabled: !canReplace
-      }, this.replace), (0, _react2.jsx)(_new.default, {
-        appearance: "primary",
-        testId: this.replaceAll,
-        id: "replaceAll-button",
-        onClick: this.handleReplaceAllClick,
-        isDisabled: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? count.totalReplaceable === 0 : !canReplace
-      }, this.replaceAll))), (0, _react2.jsx)("div", {
-        css: _uiStyles.orderZeroStyles
-      }, (0, _react2.jsx)(_new.default, {
-        appearance: "subtle",
-        testId: this.closeFindReplaceDialog,
-        onClick: this.clearSearch
-      }, this.closeFindReplaceDialog))));
-    }
-  }]);
-}(_react.default.PureComponent);
+    },
+    iconLabel: formatMessage(_messages.findReplaceMessages.findNext),
+    keymapDescription: 'Enter',
+    onClick: handleFindNextClick,
+    disabled: count.total <= 1
+  }), /*#__PURE__*/_react.default.createElement(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+    title: findPrevious,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/_react.default.createElement(_chevronUpHipchatChevronUp.default, {
+        label: iconProps.label,
+        size: "small"
+      });
+    },
+    iconLabel: findPrevious,
+    keymapDescription: 'Shift Enter',
+    onClick: handleFindPrevClick,
+    disabled: count.total <= 1
+  }), /*#__PURE__*/_react.default.createElement(_new.default, {
+    testId: 'Replace',
+    id: "replace-button",
+    onClick: handleReplaceClick,
+    isDisabled: !canReplace
+  }, formatMessage(_messages.findReplaceMessages.replace)), /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "primary",
+    testId: replaceAll,
+    id: "replaceAll-button",
+    onClick: handleReplaceAllClick,
+    isDisabled: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? count.totalReplaceable === 0 : !canReplace
+  }, replaceAll)), (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    xcss: closeButtonInlineStyles
+  }, /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "subtle",
+    testId: closeFindReplaceDialog,
+    onClick: clearSearch
+  }, closeFindReplaceDialog)) : /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "subtle",
+    testId: closeFindReplaceDialog,
+    onClick: clearSearch
+  }, closeFindReplaceDialog))));
+};
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(Replace);

package/dist/es2019/ui/Find.js

@@ -132,7 +132,7 @@ class Find extends React.Component {
       return expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? jsx(TextLetterCaseIcon, {
         LEGACY_size: 'small',
         LEGACY_fallbackIcon: EditorTextStyleIcon,
-        label: expValEquals('platform_editor_find_replace_a11y_fixes', 'isEnabled', true) ? iconProps.label : this.matchCase,
+        label: iconProps.label,
         size: "small"
       }) : jsx(MatchCaseIcon, {
         LEGACY_size: 'small',