@atlaskit/editor-plugin-find-replace 0.2.0 → 0.3.0

package/dist/cjs/ui/Replace.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,13 +13,20 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _form = require("@atlaskit/form");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
+var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _FindReplaceTooltipButton = require("./FindReplaceTooltipButton");
 var _styles = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */ /** @jsx jsx */
 var messages = (0, _reactIntlNext.defineMessages)({
@@ -36,6 +44,36 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.editor.replaceAll',
     defaultMessage: 'Replace all',
     description: 'Replace all instances of the word or phrase throughout the entire document'
+  },
+  replaceSuccess: {
+    id: 'fabric.editor.replaceSuccess',
+    defaultMessage: '{numberOfMatches} {matchPluralSingularNoun} replaced',
+    description: 'Text when replacement succesfully done'
+  },
+  matchSingularNoun: {
+    id: 'fabric.editor.match.singular',
+    defaultMessage: 'match',
+    description: 'Singular "Match" noun'
+  },
+  matchPluralNoun: {
+    id: 'fabric.editor.match.plural',
+    defaultMessage: 'matches',
+    description: 'Plural "Match" noun'
+  },
+  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'
   }
 });
 
@@ -48,6 +86,8 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
     (0, _classCallCheck2.default)(this, Replace);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "replaceTextfieldRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "successReplacementMessageRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isComposing", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "skipWhileComposing", function (fn) {
       if (_this.state.isComposing) {
         return;
@@ -60,6 +100,14 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
           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)((0, _assertThisInitialized2.default)(_this), "handleReplaceChange", function (event) {
@@ -98,6 +146,14 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
         _this.props.onReplaceAll({
           replaceText: _this.state.replaceText
         });
+        _this.setState({
+          isHelperMessageVisible: true
+        });
+        _this.triggerSuccessReplacementMessageUpdate(_this.props.count.total);
+        _this.setState({
+          replaceCount: _this.props.count.total
+        });
+        _this.props.setFindTyped(false);
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCompositionStart", function () {
@@ -112,15 +168,49 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
       // type for React.CompositionEvent doesn't set type for target correctly
       _this.updateReplaceValue(event.target.value);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clearSearch", function () {
+      _this.props.onCancel({
+        triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
+      });
+      _this.props.focusToolbarButton && _this.props.focusToolbarButton();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFindNextClick", function () {
+      if (_this.isComposing) {
+        return;
+      }
+      _this.props.onFindNext({
+        triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFindPrevClick", function () {
+      if (_this.isComposing) {
+        return;
+      }
+      _this.props.onFindPrev({
+        triggerMethod: _analytics.TRIGGER_METHOD.BUTTON
+      });
+    });
     var _replaceText = props.replaceText,
       formatMessage = props.intl.formatMessage;
     _this.state = {
       replaceText: _replaceText || '',
-      isComposing: false
+      isComposing: false,
+      isHelperMessageVisible: false,
+      fakeSuccessReplacementMessageUpdate: false,
+      replaceCount: 0
     };
     _this.replaceWith = formatMessage(messages.replaceWith);
     _this.replace = formatMessage(messages.replace);
     _this.replaceAll = formatMessage(messages.replaceAll);
+    _this.findNext = formatMessage(messages.findNext);
+    _this.findPrevious = formatMessage(messages.findPrevious);
+    _this.findNextIcon = (0, _react2.jsx)(_chevronDown.default, {
+      label: _this.findNext
+    });
+    _this.findPrevIcon = (0, _react2.jsx)(_chevronUp.default, {
+      label: _this.findPrevious
+    });
+    _this.closeFindReplaceDialog = formatMessage(messages.closeFindReplaceDialog);
     return _this;
   }
   (0, _createClass2.default)(Replace, [{
@@ -139,13 +229,112 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
           isComposing: false
         });
       }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace')) {
+        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 replaceText = this.state.replaceText;
-      var canReplace = this.props.canReplace;
-      return (0, _react2.jsx)("div", {
+      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.replaceSuccess, {
+        numberOfMatches: replaceCount,
+        matchPluralSingularNoun: replaceCount > 1 ? formatMessage(messages.matchPluralNoun) : formatMessage(messages.matchSingularNoun)
+      });
+      return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
+        css: [_styles.sectionWrapperStyles, _styles.sectionWrapperStylesAlternate]
+      }, (0, _react2.jsx)("div", {
+        css: _styles.textFieldWrapper
+      }, (0, _react2.jsx)(_form.Label, {
+        htmlFor: "replace-text-field"
+      }, "Replace with"), (0, _react2.jsx)(_textfield.default, {
+        name: "replace",
+        id: "replace-text-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 ? resultsReplace.replace(/ /, "\xA0") : resultsReplace)))), (0, _react2.jsx)("div", {
+        css: [_styles.sectionWrapperStyles, _styles.sectionWrapperStylesAlternate, _styles.sectionWrapperJustified]
+      }, (0, _react2.jsx)("div", {
+        css: _styles.orderOneStyles
+      }, (0, _react2.jsx)("div", {
+        css: _styles.NextPreviousItem
+      }, (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+        title: this.findNext,
+        icon: this.findNextIcon,
+        keymapDescription: 'Enter',
+        onClick: this.handleFindNextClick,
+        disabled: count.total <= 1
+      })), (0, _react2.jsx)("div", {
+        css: _styles.NextPreviousItem
+      }, (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+        title: this.findPrevious,
+        icon: this.findPrevIcon,
+        keymapDescription: 'Shift Enter',
+        onClick: this.handleFindPrevClick,
+        disabled: count.total <= 1
+      })), (0, _react2.jsx)(_standardButton.default, {
+        css: _styles.replaceSectionButtonStyles,
+        testId: this.replace,
+        id: "replace-button",
+        onClick: this.handleReplaceClick,
+        isDisabled: !canReplace
+      }, this.replace), (0, _react2.jsx)(_standardButton.default, {
+        css: _styles.replaceSectionButtonStyles,
+        appearance: "primary",
+        testId: this.replaceAll,
+        id: "replaceAll-button",
+        onClick: this.handleReplaceAllClick,
+        isDisabled: !canReplace
+      }, this.replaceAll)), (0, _react2.jsx)("div", {
+        css: _styles.orderZeroStyles
+      }, (0, _react2.jsx)(_standardButton.default, {
+        css: _styles.replaceSectionButtonStyles,
+        appearance: "subtle",
+        testId: this.closeFindReplaceDialog,
+        onClick: this.clearSearch
+      }, this.closeFindReplaceDialog)))) : (0, _react2.jsx)("div", {
         css: _styles.sectionWrapperStyles
       }, (0, _react2.jsx)(_textfield.default, {
         name: "replace",

package/dist/cjs/ui/styles.js

@@ -4,16 +4,23 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyles = exports.sectionWrapperStyles = exports.ruleStyles = exports.replaceSectionButtonStyles = exports.countWrapperStyles = exports.countStyles = void 0;
+exports.wrapperStyles = exports.wrapperPaddingStyles = exports.textFieldWrapper = exports.sectionWrapperStylesAlternate = exports.sectionWrapperStyles = exports.sectionWrapperJustified = exports.ruleStyles = exports.replaceSectionButtonStyles = exports.orderZeroStyles = exports.orderOneStyles = exports.matchCaseSection = exports.countWrapperStyles = exports.countStylesAlternateStyles = exports.countStyles = exports.afterInputSection = exports.NextPreviousItem = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
+var _constants = require("@atlaskit/theme/constants");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
-var replaceSectionButtonStyles = exports.replaceSectionButtonStyles = (0, _react.css)({
+var fontSize = (0, _constants.fontSize)();
+var gridSize = (0, _constants.gridSize)();
+var replaceSectionButtonStyles = exports.replaceSectionButtonStyles = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-find-replace') ? (0, _react.css)({
+  marginLeft: "var(--ds-space-050, 4px)",
+  marginRight: "var(--ds-space-050, 2px)"
+}) : (0, _react.css)({
   marginLeft: "var(--ds-space-050, 4px)"
 });
 var ruleStyles = exports.ruleStyles = (0, _react.css)({
@@ -31,9 +38,18 @@ var wrapperStyles = exports.wrapperStyles = (0, _react.css)({
     margin: "0px ".concat("var(--ds-space-050, 4px)")
   }
 });
+var wrapperPaddingStyles = exports.wrapperPaddingStyles = (0, _react.css)({
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)")
+});
 var sectionWrapperStyles = exports.sectionWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n\n  & > * {\n    display: inline-flex;\n    height: 32px;\n    flex: 0 0 auto;\n  }\n\n  & > [data-ds--text-field--container] {\n    display: flex;\n    flex: 1 1 auto;\n  }\n"])));
+var sectionWrapperStylesAlternate = exports.sectionWrapperStylesAlternate = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", ";\n\n  & > * {\n    height: unset;\n  }\n"])), "var(--ds-space-100, 8px)");
+var sectionWrapperJustified = exports.sectionWrapperJustified = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: space-between;\n  font-size: ", ";\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(14));
+var textFieldWrapper = exports.textFieldWrapper = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 100%;\n  flex-wrap: wrap;\n\n  #find-text-field,\n  #replace-text-field {\n    height: ", "em;\n  }\n\n  label {\n    font-size: ", ";\n    line-height: ", "px;\n  }\n"])), gridSize * 4.5 / fontSize, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), gridSize * 2);
+var afterInputSection = exports.afterInputSection = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n"])));
+var matchCaseSection = exports.matchCaseSection = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  padding-right: ", ";\n\n  button {\n    width: 20px;\n    height: 20px;\n  }\n"])), "var(--ds-space-100, 8px)");
+var NextPreviousItem = exports.NextPreviousItem = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 3px;\n"])));
 var countStyles = exports.countStyles = (0, _react.css)({
-  color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N60, ")")),
+  color: "var(--ds-text-subtlest, #626F86)",
   fontSize: "".concat((0, _editorSharedStyles.relativeFontSizeToBase16)(12)),
   flex: '0 0 auto',
   justifyContent: 'center',
@@ -41,6 +57,16 @@ var countStyles = exports.countStyles = (0, _react.css)({
   marginLeft: "var(--ds-space-050, 4px)",
   marginRight: "var(--ds-space-100, 8px)"
 });
+var countStylesAlternateStyles = exports.countStylesAlternateStyles = (0, _react.css)({
+  display: 'inline-flex',
+  height: '32px'
+});
 var countWrapperStyles = exports.countWrapperStyles = (0, _react.css)({
   alignItems: 'center'
+});
+var orderZeroStyles = exports.orderZeroStyles = (0, _react.css)({
+  order: '0'
+});
+var orderOneStyles = exports.orderOneStyles = (0, _react.css)({
+  order: '1'
 });

package/dist/es2019/styles.js

@@ -1,18 +1,25 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+/* eslint-disable */
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4290
 import { css } from '@emotion/react';
-import { B200, B75 } from '@atlaskit/theme/colors';
+import { B200, B75, N40A, N50A, N60A } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const searchMatchClass = 'search-match';
 export const selectedSearchMatchClass = 'selected-search-match';
-export const findReplaceStyles = css`
-  .${searchMatchClass} {
-    background-color: ${B75};
+export const findReplaceStyles = css({
+  [`.${searchMatchClass}`]: getBooleanFF('platform.editor.a11y-find-replace') ? {
+    borderRadius: '3px',
+    backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
+    boxShadow: `var(--ds-shadow-raised, ${`0 1px 1px 0 ${N50A}, 0 0 1px 0 ${N60A}`})` + ', inset 0 0 0 1px ' + `var(--ds-border-input, ${`${N40A}`})`
+  } : {
+    backgroundColor: B75
+  },
+  [`.${selectedSearchMatchClass}`]: getBooleanFF('platform.editor.a11y-find-replace') ? {
+    backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+  } : {
+    backgroundColor: B200,
+    color: 'white'
   }
-
-  .${selectedSearchMatchClass} {
-    background-color: ${B200};
-    color: white;
-  }
-`;
+});

package/dist/es2019/ui/Find.js

@@ -7,6 +7,7 @@ import debounce from 'lodash/debounce';
 import rafSchd from 'raf-schd';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import { Label } from '@atlaskit/form';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import MatchCaseIcon from '@atlaskit/icon/glyph/emoji/keyboard';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
@@ -14,7 +15,7 @@ import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Textfield from '@atlaskit/textfield';
 import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
-import { countStyles, countWrapperStyles, sectionWrapperStyles } from './styles';
+import { afterInputSection, countStyles, countStylesAlternateStyles, countWrapperStyles, matchCaseSection, sectionWrapperStyles, sectionWrapperStylesAlternate, textFieldWrapper } from './styles';
 export const FIND_DEBOUNCE_MS = 100;
 const messages = defineMessages({
   find: {
@@ -93,6 +94,7 @@ class Find extends React.Component {
         onSynced && onSynced();
         this.debouncedFind(value);
       });
+      this.props.setFindTyped(true);
     });
     // throtlle between animation frames gives better experience on Enter compared to arbitrary value
     // it adjusts based on performance (and document size)
@@ -169,7 +171,8 @@ class Find extends React.Component {
     this.findPrevious = formatMessage(messages.findPrevious);
     this.matchCase = formatMessage(messages.matchCase);
     this.matchCaseIcon = jsx(MatchCaseIcon, {
-      label: this.matchCase
+      label: this.matchCase,
+      size: getBooleanFF('platform.editor.a11y-find-replace') ? 'small' : 'medium'
     });
     this.findNextIcon = jsx(ChevronDownIcon, {
       label: this.findNext
@@ -203,20 +206,18 @@ class Find extends React.Component {
     });
   }
   componentDidUpdate(prevProps) {
+    var _this$state2;
     // 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();
-          }
-        });
-      }
+    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() {
@@ -237,50 +238,90 @@ class Find extends React.Component {
       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
-    }));
+    if (getBooleanFF('platform.editor.a11y-find-replace')) {
+      const elemAfterInput = jsx("div", {
+        css: afterInputSection
+      }, jsx("div", {
+        "aria-live": "polite"
+      }, findText && jsx("span", {
+        "data-testid": "textfield-count",
+        css: [countStyles, countStylesAlternateStyles]
+      }, count.total === 0 ? this.noResultsFound : resultsCount)), allowMatchCase && jsx("div", {
+        css: matchCaseSection
+      }, jsx(FindReplaceTooltipButton, {
+        title: this.matchCase,
+        appearance: "default",
+        icon: this.matchCaseIcon,
+        onClick: this.handleMatchCaseClick,
+        isPressed: shouldMatchCase
+      })));
+      return jsx("div", {
+        css: [sectionWrapperStyles, sectionWrapperStylesAlternate]
+      }, jsx("div", {
+        css: textFieldWrapper
+      }, jsx(Label, {
+        htmlFor: "find-text-field"
+      }, this.find), jsx(Textfield, {
+        name: "find",
+        id: "find-text-field",
+        appearance: "standard",
+        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,
+        elemAfterInput: elemAfterInput
+      })));
+    } else {
+      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);