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

package/dist/esm/ui/Find.js

@@ -13,8 +13,10 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import debounce from 'lodash/debounce';
 import rafSchd from 'raf-schd';
-import { defineMessages, injectIntl } from 'react-intl-next';
+import { injectIntl } from 'react-intl-next';
 import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
+import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
+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';
@@ -22,45 +24,8 @@ 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 var FIND_DEBOUNCE_MS = 100;
-var messages = defineMessages({
-  find: {
-    id: 'fabric.editor.find',
-    defaultMessage: 'Find',
-    description: 'The word or phrase to search for on the document'
-  },
-  matchCase: {
-    id: 'fabric.editor.matchCase',
-    defaultMessage: 'Match case',
-    description: 'Toggle whether should also match case when searching for text'
-  },
-  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'
-  },
-  noResultsFound: {
-    id: 'fabric.editor.noResultsFound',
-    defaultMessage: 'No results',
-    description: 'No matches were found for the word or phrase that was searched for'
-  },
-  resultsCount: {
-    id: 'fabric.editor.resultsCount',
-    description: 'Text for selected search match position and total results count',
-    defaultMessage: '{selectedMatchPosition} of {totalResultsCount}'
-  }
-});
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var Find = /*#__PURE__*/function (_React$Component) {
   _inherits(Find, _React$Component);
@@ -105,6 +70,7 @@ var Find = /*#__PURE__*/function (_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)
@@ -177,7 +143,8 @@ var Find = /*#__PURE__*/function (_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
@@ -217,21 +184,19 @@ var Find = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this3 = this;
+      var _this$state2,
+        _this3 = this;
       // 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(function () {
-            // focus after input is synced if find text provided
-            if (_this3.props.findText) {
-              _this3.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(function () {
+          // focus after input is synced if find text provided
+          if (_this3.props.findText) {
+            _this3.focusFindTextfield();
+          }
+        });
       }
     }
   }, {
@@ -253,50 +218,90 @@ var Find = /*#__PURE__*/function (_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')) {
+        var 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
+        }));
+      }
     }
   }]);
   return Find;

package/dist/esm/ui/FindReplace.js

@@ -12,22 +12,53 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @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
 var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(FindReplace, _React$PureComponent);
   var _super = _createSuper(FindReplace);
-  function FindReplace() {
+  function FindReplace(props) {
     var _this;
     _classCallCheck(this, FindReplace);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "findTextfield", null);
     _defineProperty(_assertThisInitialized(_this), "replaceTextfield", null);
+    _defineProperty(_assertThisInitialized(_this), "handleTabNavigation", function (event) {
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        var modalFindReplace = _this.modalRef.current;
+        if (!modalFindReplace || !modalFindReplace.contains(document.activeElement)) {
+          return;
+        }
+        var focusableElements = Array.from(modalFindReplace.querySelectorAll('[tabindex]:not([tabindex="-1"]), input, button')).filter(function (el) {
+          return el.getAttribute('tabindex') !== '-1';
+        });
+        var currentIndex = focusableElements.findIndex(function (el) {
+          return el === document.activeElement;
+        });
+        var isShiftPressed = event.shiftKey;
+        if (isShiftPressed) {
+          var prevIndex = (currentIndex - 1 + focusableElements.length) % focusableElements.length;
+          focusableElements[prevIndex].focus();
+        } else {
+          var nextIndex = (currentIndex + 1) % focusableElements.length;
+          focusableElements[nextIndex].focus();
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      findTyped: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "setFindTyped", function (value) {
+      if (getBooleanFF('platform.editor.a11y-find-replace')) {
+        _this.setState({
+          findTyped: value
+        });
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "setFindTextfieldRef", function (findTextfieldRef) {
       _this.findTextfield = findTextfieldRef.current;
     });
@@ -44,9 +75,26 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         _this.replaceTextfield.focus();
       }
     });
+    _this.modalRef = /*#__PURE__*/React.createRef();
     return _this;
   }
   _createClass(FindReplace, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (getBooleanFF('platform.editor.a11y-find-replace')) {
+        // eslint-disable-next-line
+        window.addEventListener('keydown', this.handleTabNavigation);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (getBooleanFF('platform.editor.a11y-find-replace')) {
+        // eslint-disable-next-line
+        window.removeEventListener('keydown', this.handleTabNavigation);
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -65,8 +113,10 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         allowMatchCase = _this$props.allowMatchCase,
         shouldMatchCase = _this$props.shouldMatchCase,
         onToggleMatchCase = _this$props.onToggleMatchCase;
+      var focusToolbarButton = getBooleanFF('platform.editor.a11y-find-replace') ? this.props.focusToolbarButton || function () {} : function () {};
       return jsx("div", {
-        css: wrapperStyles
+        ref: this.modalRef,
+        css: getBooleanFF('platform.editor.a11y-find-replace') ? [wrapperStyles, wrapperPaddingStyles] : wrapperStyles
       }, jsx(Find, {
         allowMatchCase: allowMatchCase,
         shouldMatchCase: shouldMatchCase,
@@ -80,8 +130,10 @@ var FindReplace = /*#__PURE__*/function (_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, {
@@ -91,7 +143,14 @@ var FindReplace = /*#__PURE__*/function (_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/esm/ui/FindReplaceToolbarButton.js

@@ -14,23 +14,20 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { defineMessages, injectIntl } from 'react-intl-next';
+import { injectIntl } from 'react-intl-next';
 import { TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
 import { findKeymapByDescription, getAriaKeyshortcuts, tooltip, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
 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';
 var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1 1 auto;\n  flex-grow: 0;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 0 ", ";\n  @media (max-width: ", "px) {\n    justify-content: center;\n    padding: 0;\n  }\n"])), "var(--ds-space-100, 8px)", akEditorMobileMaxWidth);
 var toolbarButtonWrapperFullWith = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
 var wrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-var messages = defineMessages({
-  findReplaceToolbarButton: {
-    id: 'fabric.editor.findReplaceToolbarButton',
-    defaultMessage: 'Find and replace',
-    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'
-  }
-});
+var dropdownWidthNewDesign = 382;
+var dropdownWidthOldDesign = 352;
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(FindReplaceToolbarButton, _React$PureComponent);
@@ -42,15 +39,30 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      openedByClick: false
+    });
     _defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
       if (_this.props.isActive) {
         _this.props.onCancel({
           triggerMethod: TRIGGER_METHOD.TOOLBAR
         });
       } else {
+        _this.setState({
+          openedByClick: true
+        });
         _this.props.onActivate();
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "focusToolbarButton", function () {
+      if (_this.state.openedByClick && _this.toolbarButtonRef.current) {
+        _this.toolbarButtonRef.current.focus();
+      }
+      _this.setState({
+        openedByClick: false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "toolbarButtonRef", /*#__PURE__*/React.createRef());
     return _this;
   }
   _createClass(FindReplaceToolbarButton, [{
@@ -84,9 +96,17 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
             _this2.props.onCancel({
               triggerMethod: TRIGGER_METHOD.KEYBOARD
             });
+            if (getBooleanFF('platform.editor.a11y-find-replace')) {
+              if (_this2.state.openedByClick && _this2.toolbarButtonRef.current) {
+                _this2.toolbarButtonRef.current.focus();
+              }
+              _this2.setState({
+                openedByClick: false
+              });
+            }
           }
         },
-        fitWidth: 352,
+        fitWidth: getBooleanFF('platform.editor.a11y-find-replace') ? dropdownWidthNewDesign : dropdownWidthOldDesign,
         zIndex: stackBelowOtherEditorFloatingPanels,
         arrowKeyNavigationProviderOptions: {
           type: ArrowKeyNavigationType.MENU,
@@ -107,7 +127,8 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_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
@@ -117,7 +138,8 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
         count: {
           index: index,
           total: numMatches
-        }
+        },
+        focusToolbarButton: this.focusToolbarButton
       }, this.props)))));
     }
   }]);

package/dist/esm/ui/FindReplaceTooltipButton.js

@@ -39,7 +39,8 @@ export var FindReplaceTooltipButton = /*#__PURE__*/function (_React$PureComponen
         icon = _this$props.icon,
         keymapDescription = _this$props.keymapDescription,
         disabled = _this$props.disabled,
-        isPressed = _this$props.isPressed;
+        isPressed = _this$props.isPressed,
+        appearance = _this$props.appearance;
       var pressedProps = _objectSpread({}, typeof isPressed === 'boolean' && {
         'aria-pressed': isPressed
       });
@@ -51,8 +52,9 @@ export var FindReplaceTooltipButton = /*#__PURE__*/function (_React$PureComponen
         hideTooltipOnClick: true,
         position: 'top'
       }, /*#__PURE__*/React.createElement(Button, _extends({
+        id: "afterInputSection",
         label: title,
-        appearance: "subtle",
+        appearance: appearance,
         testId: title,
         ref: this.buttonRef,
         iconBefore: icon,
@@ -66,5 +68,6 @@ export var FindReplaceTooltipButton = /*#__PURE__*/function (_React$PureComponen
   return FindReplaceTooltipButton;
 }(React.PureComponent);
 _defineProperty(FindReplaceTooltipButton, "defaultProps", {
-  keymapDescription: 'no-keymap'
+  keymapDescription: 'no-keymap',
+  appearance: 'subtle'
 });