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

package/dist/es2019/ui/FindReplace.js

@@ -4,15 +4,45 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Find from './Find';
 import Replace from './Replace';
-import { ruleStyles, wrapperStyles } from './styles';
+import { ruleStyles, wrapperPaddingStyles, wrapperStyles } from './styles';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class FindReplace extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     _defineProperty(this, "findTextfield", null);
     _defineProperty(this, "replaceTextfield", null);
+    _defineProperty(this, "handleTabNavigation", event => {
+      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
+    });
+    _defineProperty(this, "setFindTyped", value => {
+      if (getBooleanFF('platform.editor.a11y-find-replace')) {
+        this.setState({
+          findTyped: value
+        });
+      }
+    });
     _defineProperty(this, "setFindTextfieldRef", findTextfieldRef => {
       this.findTextfield = findTextfieldRef.current;
     });
@@ -29,6 +59,19 @@ class FindReplace extends React.PureComponent {
         this.replaceTextfield.focus();
       }
     });
+    this.modalRef = /*#__PURE__*/React.createRef();
+  }
+  componentDidMount() {
+    if (getBooleanFF('platform.editor.a11y-find-replace')) {
+      // eslint-disable-next-line
+      window.addEventListener('keydown', this.handleTabNavigation);
+    }
+  }
+  componentWillUnmount() {
+    if (getBooleanFF('platform.editor.a11y-find-replace')) {
+      // eslint-disable-next-line
+      window.removeEventListener('keydown', this.handleTabNavigation);
+    }
   }
   render() {
     const {
@@ -48,8 +91,10 @@ class FindReplace extends React.PureComponent {
       shouldMatchCase,
       onToggleMatchCase
     } = this.props;
+    const focusToolbarButton = getBooleanFF('platform.editor.a11y-find-replace') ? this.props.focusToolbarButton || (() => {}) : () => {};
     return jsx("div", {
-      css: wrapperStyles
+      ref: this.modalRef,
+      css: getBooleanFF('platform.editor.a11y-find-replace') ? [wrapperStyles, wrapperPaddingStyles] : wrapperStyles
     }, jsx(Find, {
       allowMatchCase: allowMatchCase,
       shouldMatchCase: shouldMatchCase,
@@ -63,8 +108,10 @@ class FindReplace extends React.PureComponent {
       onFindNext: onFindNext,
       onFindTextfieldRefSet: this.setFindTextfieldRef,
       onCancel: onCancel,
-      onArrowDown: this.setFocusToReplace
-    }), jsx("hr", {
+      onArrowDown: this.setFocusToReplace,
+      findTyped: this.state.findTyped,
+      setFindTyped: this.setFindTyped
+    }), !getBooleanFF('platform.editor.a11y-find-replace') && jsx("hr", {
       css: ruleStyles,
       id: "replace-hr-element"
     }), jsx(Replace, {
@@ -74,7 +121,14 @@ class FindReplace extends React.PureComponent {
       onReplaceAll: onReplaceAll,
       onReplaceTextfieldRefSet: this.setReplaceTextfieldRef,
       onArrowUp: this.setFocusToFind,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent
+      onCancel: onCancel,
+      count: count,
+      onFindPrev: onFindPrev,
+      onFindNext: onFindNext,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      findTyped: this.state.findTyped,
+      setFindTyped: this.setFindTyped,
+      focusToolbarButton: focusToolbarButton
     }));
   }
 }

package/dist/es2019/ui/FindReplaceToolbarButton.js

@@ -10,6 +10,7 @@ import { findKeymapByDescription, getAriaKeyshortcuts, tooltip, ToolTipContent }
 import { ArrowKeyNavigationType, Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { akEditorFloatingPanelZIndex, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import FindReplace from './FindReplace';
 const toolbarButtonWrapper = css`
   display: flex;
@@ -37,19 +38,36 @@ const messages = defineMessages({
     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'
   }
 });
+const dropdownWidthNewDesign = 382;
+const dropdownWidthOldDesign = 352;
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class FindReplaceToolbarButton extends React.PureComponent {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "state", {
+      openedByClick: false
+    });
     _defineProperty(this, "toggleOpen", () => {
       if (this.props.isActive) {
         this.props.onCancel({
           triggerMethod: TRIGGER_METHOD.TOOLBAR
         });
       } else {
+        this.setState({
+          openedByClick: true
+        });
         this.props.onActivate();
       }
     });
+    _defineProperty(this, "focusToolbarButton", () => {
+      if (this.state.openedByClick && this.toolbarButtonRef.current) {
+        this.toolbarButtonRef.current.focus();
+      }
+      this.setState({
+        openedByClick: false
+      });
+    });
+    _defineProperty(this, "toolbarButtonRef", /*#__PURE__*/React.createRef());
   }
   render() {
     const {
@@ -82,9 +100,17 @@ class FindReplaceToolbarButton extends React.PureComponent {
           this.props.onCancel({
             triggerMethod: TRIGGER_METHOD.KEYBOARD
           });
+          if (getBooleanFF('platform.editor.a11y-find-replace')) {
+            if (this.state.openedByClick && this.toolbarButtonRef.current) {
+              this.toolbarButtonRef.current.focus();
+            }
+            this.setState({
+              openedByClick: false
+            });
+          }
         }
       },
-      fitWidth: 352,
+      fitWidth: getBooleanFF('platform.editor.a11y-find-replace') ? dropdownWidthNewDesign : dropdownWidthOldDesign,
       zIndex: stackBelowOtherEditorFloatingPanels,
       arrowKeyNavigationProviderOptions: {
         type: ArrowKeyNavigationType.MENU,
@@ -105,7 +131,8 @@ class FindReplaceToolbarButton extends React.PureComponent {
         "aria-expanded": isActive,
         "aria-haspopup": true,
         "aria-label": keymap ? tooltip(keymap, title) : title,
-        "aria-keyshortcuts": getAriaKeyshortcuts(keymap)
+        "aria-keyshortcuts": getAriaKeyshortcuts(keymap),
+        ref: getBooleanFF('platform.editor.a11y-find-replace') ? this.toolbarButtonRef : null
       })
     }, jsx("div", {
       css: wrapper
@@ -115,7 +142,8 @@ class FindReplaceToolbarButton extends React.PureComponent {
       count: {
         index,
         total: numMatches
-      }
+      },
+      focusToolbarButton: this.focusToolbarButton
     }, this.props)))));
   }
 }

package/dist/es2019/ui/FindReplaceTooltipButton.js

@@ -19,7 +19,8 @@ export class FindReplaceTooltipButton extends React.PureComponent {
       icon,
       keymapDescription,
       disabled,
-      isPressed
+      isPressed,
+      appearance
     } = this.props;
     const pressedProps = {
       ...(typeof isPressed === 'boolean' && {
@@ -34,8 +35,9 @@ export class FindReplaceTooltipButton extends React.PureComponent {
       hideTooltipOnClick: true,
       position: 'top'
     }, /*#__PURE__*/React.createElement(Button, _extends({
+      id: "afterInputSection",
       label: title,
-      appearance: "subtle",
+      appearance: appearance,
       testId: title,
       ref: this.buttonRef,
       iconBefore: icon,
@@ -47,5 +49,6 @@ export class FindReplaceTooltipButton extends React.PureComponent {
   }
 }
 _defineProperty(FindReplaceTooltipButton, "defaultProps", {
-  keymapDescription: 'no-keymap'
+  keymapDescription: 'no-keymap',
+  appearance: 'subtle'
 });

package/dist/es2019/ui/Replace.js

@@ -1,13 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /** @jsx jsx */
-import React from 'react';
+import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import { Label, ValidMessage } from '@atlaskit/form';
+import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Textfield from '@atlaskit/textfield';
-import { replaceSectionButtonStyles, sectionWrapperStyles } from './styles';
+import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
+import { NextPreviousItem, orderOneStyles, orderZeroStyles, replaceSectionButtonStyles, sectionWrapperJustified, sectionWrapperStyles, sectionWrapperStylesAlternate, textFieldWrapper } from './styles';
 const messages = defineMessages({
   replaceWith: {
     id: 'fabric.editor.replaceWith',
@@ -23,6 +28,36 @@ const messages = 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'
   }
 });
 
@@ -31,6 +66,8 @@ 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;
@@ -42,6 +79,14 @@ class Replace extends React.PureComponent {
         triggerMethod: TRIGGER_METHOD.BUTTON,
         replaceText: this.state.replaceText
       });
+      // 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);
@@ -76,6 +121,14 @@ class Replace extends 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);
     }));
     _defineProperty(this, "handleCompositionStart", () => {
       this.setState({
@@ -89,6 +142,28 @@ class Replace extends React.PureComponent {
       // 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
+      });
+    });
+    _defineProperty(this, "handleFindPrevClick", () => {
+      if (this.isComposing) {
+        return;
+      }
+      this.props.onFindPrev({
+        triggerMethod: TRIGGER_METHOD.BUTTON
+      });
+    });
     const {
       replaceText: _replaceText,
       intl: {
@@ -97,11 +172,23 @@ class Replace extends React.PureComponent {
     } = props;
     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 = jsx(ChevronDownIcon, {
+      label: this.findNext
+    });
+    this.findPrevIcon = jsx(ChevronUpIcon, {
+      label: this.findPrevious
+    });
+    this.closeFindReplaceDialog = formatMessage(messages.closeFindReplaceDialog);
   }
   componentDidMount() {
     this.props.onReplaceTextfieldRefSet(this.replaceTextfieldRef);
@@ -118,15 +205,112 @@ class Replace extends React.PureComponent {
         isComposing: false
       });
     }
+    if (getBooleanFF('platform.editor.a11y-find-replace')) {
+      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
+      });
+    }
+    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
+      replaceText,
+      isHelperMessageVisible,
+      replaceCount
     } = this.state;
     const {
-      canReplace
+      canReplace,
+      count,
+      intl: {
+        formatMessage
+      }
     } = this.props;
-    return jsx("div", {
+    const resultsReplace = formatMessage(messages.replaceSuccess, {
+      numberOfMatches: replaceCount,
+      matchPluralSingularNoun: replaceCount > 1 ? formatMessage(messages.matchPluralNoun) : formatMessage(messages.matchSingularNoun)
+    });
+    return getBooleanFF('platform.editor.a11y-find-replace') ? jsx(Fragment, null, jsx("div", {
+      css: [sectionWrapperStyles, sectionWrapperStylesAlternate]
+    }, jsx("div", {
+      css: textFieldWrapper
+    }, jsx(Label, {
+      htmlFor: "replace-text-field"
+    }, "Replace with"), jsx(Textfield, {
+      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 && 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 ? resultsReplace.replace(/ /, '\u00a0') : resultsReplace)))), jsx("div", {
+      css: [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified]
+    }, jsx("div", {
+      css: orderOneStyles
+    }, jsx("div", {
+      css: NextPreviousItem
+    }, jsx(FindReplaceTooltipButton, {
+      title: this.findNext,
+      icon: this.findNextIcon,
+      keymapDescription: 'Enter',
+      onClick: this.handleFindNextClick,
+      disabled: count.total <= 1
+    })), jsx("div", {
+      css: NextPreviousItem
+    }, jsx(FindReplaceTooltipButton, {
+      title: this.findPrevious,
+      icon: this.findPrevIcon,
+      keymapDescription: 'Shift Enter',
+      onClick: this.handleFindPrevClick,
+      disabled: count.total <= 1
+    })), jsx(Button, {
+      css: replaceSectionButtonStyles,
+      testId: this.replace,
+      id: "replace-button",
+      onClick: this.handleReplaceClick,
+      isDisabled: !canReplace
+    }, this.replace), jsx(Button, {
+      css: replaceSectionButtonStyles,
+      appearance: "primary",
+      testId: this.replaceAll,
+      id: "replaceAll-button",
+      onClick: this.handleReplaceAllClick,
+      isDisabled: !canReplace
+    }, this.replaceAll)), jsx("div", {
+      css: orderZeroStyles
+    }, jsx(Button, {
+      css: replaceSectionButtonStyles,
+      appearance: "subtle",
+      testId: this.closeFindReplaceDialog,
+      onClick: this.clearSearch
+    }, this.closeFindReplaceDialog)))) : jsx("div", {
       css: sectionWrapperStyles
     }, jsx(Textfield, {
       name: "replace",

package/dist/es2019/ui/styles.js

@@ -3,8 +3,17 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N30A, N60 } from '@atlaskit/theme/colors';
-export const replaceSectionButtonStyles = css({
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { N30A } from '@atlaskit/theme/colors';
+import { fontSize as getFontSize,
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+gridSize as getGridSize } from '@atlaskit/theme/constants';
+const fontSize = getFontSize();
+const gridSize = getGridSize();
+export const replaceSectionButtonStyles = getBooleanFF('platform.editor.a11y-find-replace') ? css({
+  marginLeft: "var(--ds-space-050, 4px)",
+  marginRight: "var(--ds-space-050, 2px)"
+}) : css({
   marginLeft: "var(--ds-space-050, 4px)"
 });
 export const ruleStyles = css({
@@ -22,6 +31,9 @@ export const wrapperStyles = css({
     margin: `0px ${"var(--ds-space-050, 4px)"}`
   }
 });
+export const wrapperPaddingStyles = css({
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"}`
+});
 export const sectionWrapperStyles = css`
   display: flex;
 
@@ -36,8 +48,50 @@ export const sectionWrapperStyles = css`
     flex: 1 1 auto;
   }
 `;
+export const sectionWrapperStylesAlternate = css`
+  display: flex;
+  padding: ${"var(--ds-space-100, 8px)"};
+
+  & > * {
+    height: unset;
+  }
+`;
+export const sectionWrapperJustified = css`
+  justify-content: space-between;
+  font-size: ${relativeFontSizeToBase16(14)};
+`;
+export const textFieldWrapper = css`
+  flex: 1 100%;
+  flex-wrap: wrap;
+
+  #find-text-field,
+  #replace-text-field {
+    height: ${gridSize * 4.5 / fontSize}em;
+  }
+
+  label {
+    font-size: ${relativeFontSizeToBase16(14)};
+    line-height: ${gridSize * 2}px;
+  }
+`;
+export const afterInputSection = css`
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+`;
+export const matchCaseSection = css`
+  padding-right: ${"var(--ds-space-100, 8px)"};
+
+  button {
+    width: 20px;
+    height: 20px;
+  }
+`;
+export const NextPreviousItem = css`
+  padding: 0px 3px;
+`;
 export const countStyles = css({
-  color: `${`var(--ds-text-subtlest, ${N60})`}`,
+  color: `${"var(--ds-text-subtlest, #626F86)"}`,
   fontSize: `${relativeFontSizeToBase16(12)}`,
   flex: '0 0 auto',
   justifyContent: 'center',
@@ -45,6 +99,16 @@ export const countStyles = css({
   marginLeft: "var(--ds-space-050, 4px)",
   marginRight: "var(--ds-space-100, 8px)"
 });
+export const countStylesAlternateStyles = css({
+  display: 'inline-flex',
+  height: '32px'
+});
 export const countWrapperStyles = css({
   alignItems: 'center'
+});
+export const orderZeroStyles = css({
+  order: '0'
+});
+export const orderOneStyles = css({
+  order: '1'
 });

package/dist/esm/styles.js

@@ -1,11 +1,24 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _css;
 /* 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 var searchMatchClass = 'search-match';
 export var selectedSearchMatchClass = 'selected-search-match';
-export var findReplaceStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    background-color: ", ";\n  }\n\n  .", " {\n    background-color: ", ";\n    color: white;\n  }\n"])), searchMatchClass, B75, selectedSearchMatchClass, B200);
+export var findReplaceStyles = css((_css = {}, _defineProperty(_css, ".".concat(searchMatchClass), getBooleanFF('platform.editor.a11y-find-replace') ? {
+  borderRadius: '3px',
+  backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
+  boxShadow: "var(--ds-shadow-raised, ".concat("0 1px 1px 0 ".concat(N50A, ", 0 0 1px 0 ").concat(N60A), ")") + ', inset 0 0 0 1px ' + "var(--ds-border-input, ".concat("".concat(N40A), ")")
+} : {
+  backgroundColor: B75
+}), _defineProperty(_css, ".".concat(selectedSearchMatchClass), getBooleanFF('platform.editor.a11y-find-replace') ? {
+  backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+} : {
+  backgroundColor: B200,
+  color: 'white'
+}), _css));