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

package/dist/esm/ui/Replace.js

@@ -9,31 +9,19 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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 */
-import React from 'react';
+import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
-import { defineMessages, injectIntl } from 'react-intl-next';
+import { 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 { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
+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';
-var messages = defineMessages({
-  replaceWith: {
-    id: 'fabric.editor.replaceWith',
-    defaultMessage: 'Replace with',
-    description: 'The value that will replace the word or phrase that was searched for'
-  },
-  replace: {
-    id: 'fabric.editor.replace',
-    defaultMessage: 'Replace',
-    description: 'Replace only the currently selected instance of the word or phrase'
-  },
-  replaceAll: {
-    id: 'fabric.editor.replaceAll',
-    defaultMessage: 'Replace all',
-    description: 'Replace all instances of the word or phrase throughout the entire document'
-  }
-});
-
+import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
+import { NextPreviousItem, orderOneStyles, orderZeroStyles, replaceSectionButtonStyles, sectionWrapperJustified, sectionWrapperStyles, sectionWrapperStylesAlternate, textFieldWrapper } from './styles';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var Replace = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Replace, _React$PureComponent);
@@ -43,6 +31,8 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
     _classCallCheck(this, Replace);
     _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "replaceTextfieldRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "successReplacementMessageRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "isComposing", false);
     _defineProperty(_assertThisInitialized(_this), "skipWhileComposing", function (fn) {
       if (_this.state.isComposing) {
         return;
@@ -55,6 +45,14 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
           triggerMethod: 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);
       });
     });
     _defineProperty(_assertThisInitialized(_this), "handleReplaceChange", function (event) {
@@ -93,6 +91,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);
       });
     });
     _defineProperty(_assertThisInitialized(_this), "handleCompositionStart", function () {
@@ -107,15 +113,49 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
       // type for React.CompositionEvent doesn't set type for target correctly
       _this.updateReplaceValue(event.target.value);
     });
+    _defineProperty(_assertThisInitialized(_this), "clearSearch", function () {
+      _this.props.onCancel({
+        triggerMethod: TRIGGER_METHOD.BUTTON
+      });
+      _this.props.focusToolbarButton && _this.props.focusToolbarButton();
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleFindNextClick", function () {
+      if (_this.isComposing) {
+        return;
+      }
+      _this.props.onFindNext({
+        triggerMethod: TRIGGER_METHOD.BUTTON
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleFindPrevClick", function () {
+      if (_this.isComposing) {
+        return;
+      }
+      _this.props.onFindPrev({
+        triggerMethod: 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 = jsx(ChevronDownIcon, {
+      label: _this.findNext
+    });
+    _this.findPrevIcon = jsx(ChevronUpIcon, {
+      label: _this.findPrevious
+    });
+    _this.closeFindReplaceDialog = formatMessage(messages.closeFindReplaceDialog);
     return _this;
   }
   _createClass(Replace, [{
@@ -134,13 +174,112 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
           isComposing: false
         });
       }
+      if (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 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 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(/ /, "\xA0") : 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/esm/ui/styles.js

@@ -1,12 +1,21 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
+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 */
 import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N30A, N60 } from '@atlaskit/theme/colors';
-export var 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';
+var fontSize = getFontSize();
+var gridSize = getGridSize();
+export var 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 var ruleStyles = css({
@@ -24,9 +33,18 @@ export var wrapperStyles = css({
     margin: "0px ".concat("var(--ds-space-050, 4px)")
   }
 });
+export var wrapperPaddingStyles = css({
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)")
+});
 export var sectionWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
+export var sectionWrapperStylesAlternate = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", ";\n\n  & > * {\n    height: unset;\n  }\n"])), "var(--ds-space-100, 8px)");
+export var sectionWrapperJustified = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  justify-content: space-between;\n  font-size: ", ";\n"])), relativeFontSizeToBase16(14));
+export var textFieldWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, relativeFontSizeToBase16(14), gridSize * 2);
+export var afterInputSection = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n"])));
+export var matchCaseSection = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding-right: ", ";\n\n  button {\n    width: 20px;\n    height: 20px;\n  }\n"])), "var(--ds-space-100, 8px)");
+export var NextPreviousItem = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0px 3px;\n"])));
 export var countStyles = css({
-  color: "".concat("var(--ds-text-subtlest, ".concat(N60, ")")),
+  color: "var(--ds-text-subtlest, #626F86)",
   fontSize: "".concat(relativeFontSizeToBase16(12)),
   flex: '0 0 auto',
   justifyContent: 'center',
@@ -34,6 +52,16 @@ export var countStyles = css({
   marginLeft: "var(--ds-space-050, 4px)",
   marginRight: "var(--ds-space-100, 8px)"
 });
+export var countStylesAlternateStyles = css({
+  display: 'inline-flex',
+  height: '32px'
+});
 export var countWrapperStyles = css({
   alignItems: 'center'
+});
+export var orderZeroStyles = css({
+  order: '0'
+});
+export var orderOneStyles = css({
+  order: '1'
 });

package/dist/types/ui/Find.d.ts

@@ -24,6 +24,8 @@ export type FindProps = {
         triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR | TRIGGER_METHOD.BUTTON;
     }) => void;
     onArrowDown: () => void;
+    setFindTyped: (value: boolean) => void;
+    findTyped: boolean;
 } & MatchCaseProps;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
     findText?: string | undefined;
@@ -45,6 +47,8 @@ declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
         triggerMethod: TRIGGER_METHOD.BUTTON | TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR;
     }) => void;
     onArrowDown: () => void;
+    setFindTyped: (value: boolean) => void;
+    findTyped: boolean;
 } & MatchCaseProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<{
         findText?: string | undefined;
@@ -66,6 +70,8 @@ declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
             triggerMethod: TRIGGER_METHOD.BUTTON | TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR;
         }) => void;
         onArrowDown: () => void;
+        setFindTyped: (value: boolean) => void;
+        findTyped: boolean;
     } & MatchCaseProps & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/ui/FindReplace.d.ts

@@ -30,10 +30,20 @@ export type FindReplaceProps = {
         triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR | TRIGGER_METHOD.BUTTON;
     }) => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+    focusToolbarButton?: () => void;
 } & MatchCaseProps;
 declare class FindReplace extends React.PureComponent<FindReplaceProps> {
     private findTextfield;
     private replaceTextfield?;
+    private modalRef;
+    constructor(props: FindReplaceProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleTabNavigation: (event: KeyboardEvent) => void;
+    state: {
+        findTyped: boolean;
+    };
+    setFindTyped: (value: boolean) => void;
     setFindTextfieldRef: (findTextfieldRef: React.RefObject<HTMLInputElement>) => void;
     setReplaceTextfieldRef: (replaceTextfieldRef: React.RefObject<HTMLInputElement>) => void;
     setFocusToFind: () => void;

package/dist/types/ui/FindReplaceTooltipButton.d.ts

@@ -6,11 +6,13 @@ interface Props {
     onClick: (ref: React.RefObject<HTMLButtonElement>) => void;
     disabled?: boolean;
     isPressed?: boolean;
+    appearance?: 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
 }
 export declare class FindReplaceTooltipButton extends React.PureComponent<Props> {
     private buttonRef;
     static defaultProps: {
         keymapDescription: string;
+        appearance: string;
     };
     handleClick: () => void;
     render(): JSX.Element;

package/dist/types/ui/Replace.d.ts

@@ -15,11 +15,30 @@ export type ReplaceProps = {
     }) => void;
     onReplaceTextfieldRefSet: (ref: React.RefObject<HTMLInputElement>) => void;
     onArrowUp: () => void;
+    onCancel: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR | TRIGGER_METHOD.BUTTON;
+    }) => void;
+    count: {
+        index: number;
+        total: number;
+    };
+    onFindNext: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
+    }) => void;
+    onFindPrev: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
+    }) => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+    setFindTyped: (value: boolean) => void;
+    findTyped: boolean;
+    focusToolbarButton: () => void;
 };
 export type ReplaceState = {
     replaceText: string;
+    fakeSuccessReplacementMessageUpdate: boolean;
     isComposing: boolean;
+    isHelperMessageVisible: boolean;
+    replaceCount: number;
 };
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ReplaceProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<ReplaceProps & WrappedComponentProps<"intl">>;

package/dist/types/ui/styles.d.ts

@@ -1,6 +1,16 @@
 export declare const replaceSectionButtonStyles: import("@emotion/react").SerializedStyles;
 export declare const ruleStyles: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const wrapperPaddingStyles: import("@emotion/react").SerializedStyles;
 export declare const sectionWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const sectionWrapperStylesAlternate: import("@emotion/react").SerializedStyles;
+export declare const sectionWrapperJustified: import("@emotion/react").SerializedStyles;
+export declare const textFieldWrapper: import("@emotion/react").SerializedStyles;
+export declare const afterInputSection: import("@emotion/react").SerializedStyles;
+export declare const matchCaseSection: import("@emotion/react").SerializedStyles;
+export declare const NextPreviousItem: import("@emotion/react").SerializedStyles;
 export declare const countStyles: import("@emotion/react").SerializedStyles;
+export declare const countStylesAlternateStyles: import("@emotion/react").SerializedStyles;
 export declare const countWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const orderZeroStyles: import("@emotion/react").SerializedStyles;
+export declare const orderOneStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/Find.d.ts

@@ -24,6 +24,8 @@ export type FindProps = {
         triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR | TRIGGER_METHOD.BUTTON;
     }) => void;
     onArrowDown: () => void;
+    setFindTyped: (value: boolean) => void;
+    findTyped: boolean;
 } & MatchCaseProps;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
     findText?: string | undefined;
@@ -45,6 +47,8 @@ declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
         triggerMethod: TRIGGER_METHOD.BUTTON | TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR;
     }) => void;
     onArrowDown: () => void;
+    setFindTyped: (value: boolean) => void;
+    findTyped: boolean;
 } & MatchCaseProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<{
         findText?: string | undefined;
@@ -66,6 +70,8 @@ declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
             triggerMethod: TRIGGER_METHOD.BUTTON | TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR;
         }) => void;
         onArrowDown: () => void;
+        setFindTyped: (value: boolean) => void;
+        findTyped: boolean;
     } & MatchCaseProps & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types-ts4.5/ui/FindReplace.d.ts

@@ -30,10 +30,20 @@ export type FindReplaceProps = {
         triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR | TRIGGER_METHOD.BUTTON;
     }) => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+    focusToolbarButton?: () => void;
 } & MatchCaseProps;
 declare class FindReplace extends React.PureComponent<FindReplaceProps> {
     private findTextfield;
     private replaceTextfield?;
+    private modalRef;
+    constructor(props: FindReplaceProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleTabNavigation: (event: KeyboardEvent) => void;
+    state: {
+        findTyped: boolean;
+    };
+    setFindTyped: (value: boolean) => void;
     setFindTextfieldRef: (findTextfieldRef: React.RefObject<HTMLInputElement>) => void;
     setReplaceTextfieldRef: (replaceTextfieldRef: React.RefObject<HTMLInputElement>) => void;
     setFocusToFind: () => void;

package/dist/types-ts4.5/ui/FindReplaceTooltipButton.d.ts

@@ -6,11 +6,13 @@ interface Props {
     onClick: (ref: React.RefObject<HTMLButtonElement>) => void;
     disabled?: boolean;
     isPressed?: boolean;
+    appearance?: 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
 }
 export declare class FindReplaceTooltipButton extends React.PureComponent<Props> {
     private buttonRef;
     static defaultProps: {
         keymapDescription: string;
+        appearance: string;
     };
     handleClick: () => void;
     render(): JSX.Element;

package/dist/types-ts4.5/ui/Replace.d.ts

@@ -15,11 +15,30 @@ export type ReplaceProps = {
     }) => void;
     onReplaceTextfieldRefSet: (ref: React.RefObject<HTMLInputElement>) => void;
     onArrowUp: () => void;
+    onCancel: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.TOOLBAR | TRIGGER_METHOD.BUTTON;
+    }) => void;
+    count: {
+        index: number;
+        total: number;
+    };
+    onFindNext: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
+    }) => void;
+    onFindPrev: ({ triggerMethod, }: {
+        triggerMethod: TRIGGER_METHOD.KEYBOARD | TRIGGER_METHOD.BUTTON;
+    }) => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+    setFindTyped: (value: boolean) => void;
+    findTyped: boolean;
+    focusToolbarButton: () => void;
 };
 export type ReplaceState = {
     replaceText: string;
+    fakeSuccessReplacementMessageUpdate: boolean;
     isComposing: boolean;
+    isHelperMessageVisible: boolean;
+    replaceCount: number;
 };
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ReplaceProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<ReplaceProps & WrappedComponentProps<"intl">>;

package/dist/types-ts4.5/ui/styles.d.ts

@@ -1,6 +1,16 @@
 export declare const replaceSectionButtonStyles: import("@emotion/react").SerializedStyles;
 export declare const ruleStyles: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const wrapperPaddingStyles: import("@emotion/react").SerializedStyles;
 export declare const sectionWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const sectionWrapperStylesAlternate: import("@emotion/react").SerializedStyles;
+export declare const sectionWrapperJustified: import("@emotion/react").SerializedStyles;
+export declare const textFieldWrapper: import("@emotion/react").SerializedStyles;
+export declare const afterInputSection: import("@emotion/react").SerializedStyles;
+export declare const matchCaseSection: import("@emotion/react").SerializedStyles;
+export declare const NextPreviousItem: import("@emotion/react").SerializedStyles;
 export declare const countStyles: import("@emotion/react").SerializedStyles;
+export declare const countStylesAlternateStyles: import("@emotion/react").SerializedStyles;
 export declare const countWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const orderZeroStyles: import("@emotion/react").SerializedStyles;
+export declare const orderOneStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-find-replace",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "find replace plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -34,12 +34,13 @@
     "./styles": "./src/styles.ts"
   },
   "dependencies": {
-    "@atlaskit/button": "^17.2.0",
-    "@atlaskit/editor-common": "^77.1.0",
+    "@atlaskit/button": "^17.3.0",
+    "@atlaskit/editor-common": "^77.3.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
+    "@atlaskit/form": "^9.0.5",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/textfield": "^6.0.0",
@@ -52,10 +53,12 @@
     "raf-schd": "^4.0.3"
   },
   "devDependencies": {
+    "@af/visual-regression": "*",
     "@atlaskit/editor-plugin-block-type": "^3.0.0",
     "@atlaskit/editor-plugin-text-formatting": "^0.4.0",
-    "@atlaskit/primitives": "^1.20.0",
+    "@atlaskit/primitives": "^2.0.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@atlassian/feature-flags-test-utils": "^0.2.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
     "mockdate": "^3.0.5",