@atlaskit/editor-plugin-find-replace 6.0.9 → 6.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/ui/FindReplace.js +4 -61
  3. package/dist/cjs/ui/Replace.js +232 -310
  4. package/dist/es2019/ui/FindReplace.js +4 -53
  5. package/dist/es2019/ui/Replace.js +213 -302
  6. package/dist/esm/ui/FindReplace.js +4 -61
  7. package/dist/esm/ui/Replace.js +234 -317
  8. package/dist/types/ui/FindReplace.d.ts +0 -7
  9. package/dist/types/ui/Replace.d.ts +0 -11
  10. package/dist/types-ts4.5/ui/FindReplace.d.ts +0 -7
  11. package/dist/types-ts4.5/ui/Replace.d.ts +0 -11
  12. package/package.json +9 -12
  13. package/dist/cjs/ui/ReplaceNext.js +0 -277
  14. package/dist/es2019/ui/ReplaceNext.js +0 -242
  15. package/dist/esm/ui/ReplaceNext.js +0 -267
  16. package/dist/types/ui/ReplaceNext.d.ts +0 -39
  17. package/dist/types-ts4.5/ui/ReplaceNext.d.ts +0 -39
package/dist/esm/ui/Replace.js CHANGED
@@ -1,351 +1,268 @@
1
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/createClass";
3
- import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
4
- import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
5
- import _inherits from "@babel/runtime/helpers/inherits";
6
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
7
- function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
8
- function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
9
- /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
10
- /**
11
- * @jsxRuntime classic
12
- * @jsx jsx
13
- */
14
- import React, { Fragment } from 'react';
15
-
16
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
- import { css, jsx } from '@emotion/react';
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ import React, { useState, useRef, useEffect } from 'react';
18
3
  import { injectIntl } from 'react-intl-next';
19
4
  import Button from '@atlaskit/button/new';
20
5
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
21
6
  import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
22
- import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
23
- import { Label, ValidMessage } from '@atlaskit/form';
7
+ import { ValidMessage } from '@atlaskit/form';
24
8
  import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down';
25
9
  import ChevronUpIcon from '@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up';
26
10
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
27
- import { Inline, xcss } from '@atlaskit/primitives';
11
+ import { Box, Inline, Text, xcss } from '@atlaskit/primitives';
28
12
  import Textfield from '@atlaskit/textfield';
29
13
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
30
14
  import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
31
- import { nextPreviousItemStyles, orderZeroStyles, textFieldWrapper } from './ui-styles';
32
- var sectionWrapperStyles = css({
33
- display: 'flex',
34
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
35
- '& > *': {
36
- display: 'inline-flex',
37
- height: '32px',
38
- flex: '0 0 auto'
39
- },
40
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
41
- '& > [data-ds--text-field--container]': {
42
- display: 'flex',
43
- flex: '1 1 auto'
44
- }
15
+ var replaceContainerStyles = xcss({
16
+ padding: 'space.100'
45
17
  });
46
- var sectionWrapperStylesAlternate = css({
47
- display: 'flex',
48
- padding: "var(--ds-space-100, 8px)",
49
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
50
- '& > *': {
51
- height: 'unset'
52
- }
18
+ var replaceWithLabelStyle = xcss({
19
+ paddingBottom: 'space.050'
53
20
  });
54
- var sectionWrapperJustified = css({
21
+ var actionButtonContainerStyles = xcss({
22
+ paddingTop: 'space.200'
23
+ });
24
+ var actionButtonParentInlineStyles = xcss({
55
25
  justifyContent: 'space-between',
56
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
57
- fontSize: relativeFontSizeToBase16(14)
26
+ flexDirection: 'row-reverse'
58
27
  });
59
- var sectionWrapperFlexWrap = css({
60
- flexWrap: 'wrap-reverse',
61
- gap: "var(--ds-space-075, 6px)"
28
+ var actionButtonParentInlineStylesNew = xcss({
29
+ justifyContent: 'space-between',
30
+ flexDirection: 'row-reverse',
31
+ flexWrap: 'wrap'
62
32
  });
63
- var orderOneStyles = css({
64
- order: '1'
33
+ var actionButtonInlineStyles = xcss({
34
+ gap: 'space.075'
65
35
  });
66
- var orderOneStylesNew = css({
67
- order: '1',
68
- marginLeft: 'auto'
36
+ var closeButtonInlineStyles = xcss({
37
+ marginRight: 'auto'
69
38
  });
70
- // eslint-disable-next-line @repo/internal/react/no-class-components
71
- var Replace = /*#__PURE__*/function (_React$PureComponent) {
72
- function Replace(props) {
73
- var _this;
74
- _classCallCheck(this, Replace);
75
- _this = _callSuper(this, Replace, [props]);
76
- _defineProperty(_this, "replaceTextfieldRef", /*#__PURE__*/React.createRef());
77
- _defineProperty(_this, "successReplacementMessageRef", /*#__PURE__*/React.createRef());
78
- _defineProperty(_this, "isComposing", false);
79
- _defineProperty(_this, "skipWhileComposing", function (fn) {
80
- if (_this.state.isComposing) {
81
- return;
82
- }
39
+ var Replace = function Replace(_ref) {
40
+ var canReplace = _ref.canReplace,
41
+ initialReplaceText = _ref.replaceText,
42
+ onReplace = _ref.onReplace,
43
+ onReplaceAll = _ref.onReplaceAll,
44
+ onReplaceTextfieldRefSet = _ref.onReplaceTextfieldRefSet,
45
+ onArrowUp = _ref.onArrowUp,
46
+ onCancel = _ref.onCancel,
47
+ count = _ref.count,
48
+ onFindNext = _ref.onFindNext,
49
+ onFindPrev = _ref.onFindPrev,
50
+ dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
51
+ setFindTyped = _ref.setFindTyped,
52
+ findTyped = _ref.findTyped,
53
+ focusToolbarButton = _ref.focusToolbarButton,
54
+ formatMessage = _ref.intl.formatMessage;
55
+ var _useState = useState(initialReplaceText || ''),
56
+ _useState2 = _slicedToArray(_useState, 2),
57
+ replaceText = _useState2[0],
58
+ setReplaceText = _useState2[1];
59
+ var _useState3 = useState(false),
60
+ _useState4 = _slicedToArray(_useState3, 2),
61
+ isComposing = _useState4[0],
62
+ setIsComposing = _useState4[1];
63
+ var _useState5 = useState(false),
64
+ _useState6 = _slicedToArray(_useState5, 2),
65
+ isHelperMessageVisible = _useState6[0],
66
+ setIsHelperMessageVisible = _useState6[1];
67
+ var _useState7 = useState(false),
68
+ _useState8 = _slicedToArray(_useState7, 2),
69
+ fakeSuccessReplacementMessageUpdate = _useState8[0],
70
+ setFakeSuccessReplacementMessageUpdate = _useState8[1];
71
+ var _useState9 = useState(0),
72
+ _useState0 = _slicedToArray(_useState9, 2),
73
+ replaceCount = _useState0[0],
74
+ setReplaceCount = _useState0[1];
75
+ var replaceTextfieldRef = useRef(null);
76
+ var successReplacementMessageRef = useRef(null);
77
+ var replaceWith = formatMessage(messages.replaceWith);
78
+ var replaceAll = formatMessage(messages.replaceAll);
79
+ var findPrevious = formatMessage(messages.findPrevious);
80
+ var closeFindReplaceDialog = formatMessage(messages.closeFindReplaceDialog);
81
+ useEffect(function () {
82
+ onReplaceTextfieldRefSet(replaceTextfieldRef);
83
+ }, [onReplaceTextfieldRefSet]);
84
+ useEffect(function () {
85
+ setReplaceText(initialReplaceText || '');
86
+ }, [initialReplaceText]);
87
+ var skipWhileComposing = function skipWhileComposing(fn) {
88
+ if (!isComposing) {
83
89
  fn();
84
- });
85
- _defineProperty(_this, "handleReplaceClick", function () {
86
- return _this.skipWhileComposing(function () {
87
- _this.props.onReplace({
88
- triggerMethod: TRIGGER_METHOD.BUTTON,
89
- replaceText: _this.state.replaceText
90
- });
91
- // for replace button replaceCount always 1;
92
- var replaceCount = 1;
93
- _this.triggerSuccessReplacementMessageUpdate(replaceCount);
94
- _this.setState({
95
- isHelperMessageVisible: true,
96
- replaceCount: replaceCount
97
- });
98
- _this.props.setFindTyped(false);
99
- });
100
- });
101
- _defineProperty(_this, "handleReplaceChange", function (event) {
102
- return _this.skipWhileComposing(function () {
103
- _this.updateReplaceValue(event.target.value);
104
- });
105
- });
106
- _defineProperty(_this, "updateReplaceValue", function (replaceText) {
107
- var dispatchAnalyticsEvent = _this.props.dispatchAnalyticsEvent;
108
- if (dispatchAnalyticsEvent) {
109
- dispatchAnalyticsEvent({
110
- eventType: EVENT_TYPE.TRACK,
111
- action: ACTION.CHANGED_REPLACEMENT_TEXT,
112
- actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG
113
- });
114
- }
115
- _this.setState({
90
+ }
91
+ };
92
+ var triggerSuccessReplacementMessageUpdate = function triggerSuccessReplacementMessageUpdate(currentReplaceCount) {
93
+ if (replaceCount === currentReplaceCount) {
94
+ setFakeSuccessReplacementMessageUpdate(!fakeSuccessReplacementMessageUpdate);
95
+ }
96
+ if (successReplacementMessageRef.current) {
97
+ var ariaLiveRegion = successReplacementMessageRef.current.querySelector('[aria-live="polite"]');
98
+ ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.removeAttribute('aria-live');
99
+ ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.setAttribute('aria-live', 'polite');
100
+ }
101
+ };
102
+ var handleReplaceClick = function handleReplaceClick() {
103
+ return skipWhileComposing(function () {
104
+ onReplace({
105
+ triggerMethod: TRIGGER_METHOD.BUTTON,
116
106
  replaceText: replaceText
117
107
  });
108
+ triggerSuccessReplacementMessageUpdate(1);
109
+ setIsHelperMessageVisible(true);
110
+ setReplaceCount(1);
111
+ setFindTyped(false);
118
112
  });
119
- _defineProperty(_this, "handleReplaceKeyDown", function (event) {
120
- return _this.skipWhileComposing(function () {
121
- if (event.key === 'Enter') {
122
- _this.props.onReplace({
123
- triggerMethod: TRIGGER_METHOD.KEYBOARD,
124
- replaceText: _this.state.replaceText
125
- });
126
- } else if (event.key === 'ArrowUp') {
127
- // we want to move focus between find & replace texfields when user hits up/down arrows
128
- _this.props.onArrowUp();
129
- }
130
- });
131
- });
132
- _defineProperty(_this, "handleReplaceAllClick", function () {
133
- return _this.skipWhileComposing(function () {
134
- _this.props.onReplaceAll({
135
- replaceText: _this.state.replaceText
136
- });
137
- _this.setState({
138
- isHelperMessageVisible: true
139
- });
140
- if (_this.props.count.totalReplaceable && expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
141
- _this.triggerSuccessReplacementMessageUpdate(_this.props.count.totalReplaceable);
142
- _this.setState({
143
- replaceCount: _this.props.count.totalReplaceable
144
- });
145
- } else {
146
- _this.triggerSuccessReplacementMessageUpdate(_this.props.count.total);
147
- _this.setState({
148
- replaceCount: _this.props.count.total
149
- });
150
- }
151
- _this.props.setFindTyped(false);
152
- });
113
+ };
114
+ var handleReplaceChange = function handleReplaceChange(event) {
115
+ return skipWhileComposing(function () {
116
+ updateReplaceValue(event.target.value);
153
117
  });
154
- _defineProperty(_this, "handleCompositionStart", function () {
155
- _this.setState({
156
- isComposing: true
118
+ };
119
+ var updateReplaceValue = function updateReplaceValue(text) {
120
+ if (dispatchAnalyticsEvent) {
121
+ dispatchAnalyticsEvent({
122
+ eventType: EVENT_TYPE.TRACK,
123
+ action: ACTION.CHANGED_REPLACEMENT_TEXT,
124
+ actionSubject: ACTION_SUBJECT.FIND_REPLACE_DIALOG
157
125
  });
126
+ }
127
+ setReplaceText(text);
128
+ };
129
+ var handleReplaceKeyDown = function handleReplaceKeyDown(event) {
130
+ return skipWhileComposing(function () {
131
+ if (event.key === 'Enter') {
132
+ onReplace({
133
+ triggerMethod: TRIGGER_METHOD.KEYBOARD,
134
+ replaceText: replaceText
135
+ });
136
+ } else if (event.key === 'ArrowUp') {
137
+ onArrowUp();
138
+ }
158
139
  });
159
- _defineProperty(_this, "handleCompositionEnd", function (event) {
160
- _this.setState({
161
- isComposing: false
140
+ };
141
+ var handleReplaceAllClick = function handleReplaceAllClick() {
142
+ return skipWhileComposing(function () {
143
+ onReplaceAll({
144
+ replaceText: replaceText
162
145
  });
163
- // type for React.CompositionEvent doesn't set type for target correctly
164
- _this.updateReplaceValue(event.target.value);
146
+ setIsHelperMessageVisible(true);
147
+ if (count.totalReplaceable && expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true)) {
148
+ triggerSuccessReplacementMessageUpdate(count.totalReplaceable);
149
+ setReplaceCount(count.totalReplaceable);
150
+ } else {
151
+ triggerSuccessReplacementMessageUpdate(count.total);
152
+ setReplaceCount(count.total);
153
+ }
154
+ setFindTyped(false);
165
155
  });
166
- _defineProperty(_this, "clearSearch", function () {
167
- _this.props.onCancel({
168
- triggerMethod: TRIGGER_METHOD.BUTTON
169
- });
170
- _this.props.focusToolbarButton && _this.props.focusToolbarButton();
156
+ };
157
+ var handleCompositionStart = function handleCompositionStart() {
158
+ setIsComposing(true);
159
+ };
160
+ var handleCompositionEnd = function handleCompositionEnd(event) {
161
+ setIsComposing(false);
162
+ // type for React.CompositionEvent doesn't set type for target correctly
163
+ updateReplaceValue(event.target.value);
164
+ };
165
+ var clearSearch = function clearSearch() {
166
+ onCancel({
167
+ triggerMethod: TRIGGER_METHOD.BUTTON
171
168
  });
172
- _defineProperty(_this, "handleFindNextClick", function () {
173
- if (_this.isComposing) {
174
- return;
175
- }
176
- _this.props.onFindNext({
169
+ focusToolbarButton();
170
+ };
171
+ var handleFindNextClick = function handleFindNextClick() {
172
+ if (!isComposing) {
173
+ onFindNext({
177
174
  triggerMethod: TRIGGER_METHOD.BUTTON
178
175
  });
179
- });
180
- _defineProperty(_this, "handleFindPrevClick", function () {
181
- if (_this.isComposing) {
182
- return;
183
- }
184
- _this.props.onFindPrev({
176
+ }
177
+ };
178
+ var handleFindPrevClick = function handleFindPrevClick() {
179
+ if (!isComposing) {
180
+ onFindPrev({
185
181
  triggerMethod: TRIGGER_METHOD.BUTTON
186
182
  });
187
- });
188
- var _replaceText = props.replaceText,
189
- formatMessage = props.intl.formatMessage;
190
- _this.state = {
191
- replaceText: _replaceText || '',
192
- isComposing: false,
193
- isHelperMessageVisible: false,
194
- fakeSuccessReplacementMessageUpdate: false,
195
- replaceCount: 0
196
- };
197
- _this.replace = formatMessage(messages.replace);
198
- _this.replaceWith = formatMessage(messages.replaceWith);
199
- _this.replaceAll = formatMessage(messages.replaceAll);
200
- _this.findNext = formatMessage(messages.findNext);
201
- _this.findPrevious = formatMessage(messages.findPrevious);
202
- _this.closeFindReplaceDialog = formatMessage(messages.closeFindReplaceDialog);
203
- return _this;
204
- }
205
- _inherits(Replace, _React$PureComponent);
206
- return _createClass(Replace, [{
207
- key: "componentDidMount",
208
- value: function componentDidMount() {
209
- this.props.onReplaceTextfieldRefSet(this.replaceTextfieldRef);
210
183
  }
211
- }, {
212
- key: "componentDidUpdate",
213
- value: function componentDidUpdate(_ref) {
214
- var prevReplaceText = _ref.replaceText;
215
- var replaceText = this.props.replaceText;
216
- if (replaceText && replaceText !== prevReplaceText) {
217
- this.setState({
218
- replaceText: replaceText,
219
- isComposing: false
220
- });
221
- }
222
- var findTextField = document.getElementById('find-text-field');
223
- var replaceButton = document.getElementById('replace-button');
224
- var replaceAllButton = document.getElementById('replaceAll-button');
225
- if (((replaceButton === null || replaceButton === void 0 ? void 0 : replaceButton.tabIndex) === -1 || (replaceAllButton === null || replaceAllButton === void 0 ? void 0 : replaceAllButton.tabIndex) === -1) && findTextField) {
226
- findTextField.focus();
227
- }
228
- }
229
- }, {
230
- key: "triggerSuccessReplacementMessageUpdate",
231
- value: function triggerSuccessReplacementMessageUpdate(currentReplaceCount) {
232
- var _this$state;
233
- if (((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.replaceCount) === currentReplaceCount) {
234
- this.setState({
235
- fakeSuccessReplacementMessageUpdate: !this.state.fakeSuccessReplacementMessageUpdate
236
- });
237
- }
238
- if (this.successReplacementMessageRef && this.successReplacementMessageRef.current) {
239
- var ariaLiveRegion = this.successReplacementMessageRef.current.querySelector('[aria-live="polite"]');
240
- ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.removeAttribute('aria-live');
241
- ariaLiveRegion === null || ariaLiveRegion === void 0 || ariaLiveRegion.setAttribute('aria-live', 'polite');
242
- }
243
- }
244
- }, {
245
- key: "render",
246
- value: function render() {
247
- var _this$state2 = this.state,
248
- replaceText = _this$state2.replaceText,
249
- isHelperMessageVisible = _this$state2.isHelperMessageVisible,
250
- replaceCount = _this$state2.replaceCount;
251
- var _this$props = this.props,
252
- canReplace = _this$props.canReplace,
253
- count = _this$props.count,
254
- formatMessage = _this$props.intl.formatMessage;
255
- var resultsReplace = formatMessage(messages.replaceSuccess, {
256
- numberOfMatches: replaceCount
184
+ };
185
+ var resultsReplace = formatMessage(messages.replaceSuccess, {
186
+ numberOfMatches: replaceCount
187
+ });
188
+ return /*#__PURE__*/React.createElement(Box, {
189
+ xcss: replaceContainerStyles
190
+ }, /*#__PURE__*/React.createElement(Box, {
191
+ xcss: replaceWithLabelStyle
192
+ }, /*#__PURE__*/React.createElement(Text, {
193
+ id: "replace-text-field-label",
194
+ size: "medium",
195
+ weight: "bold",
196
+ color: "color.text.subtle"
197
+ }, replaceWith)), /*#__PURE__*/React.createElement(Textfield, {
198
+ name: "replace",
199
+ "aria-labelledby": "replace-text-field-label",
200
+ testId: "replace-field",
201
+ appearance: "standard",
202
+ defaultValue: replaceText,
203
+ ref: replaceTextfieldRef,
204
+ autoComplete: "off",
205
+ onChange: handleReplaceChange,
206
+ onKeyDown: handleReplaceKeyDown,
207
+ onCompositionStart: handleCompositionStart,
208
+ onCompositionEnd: handleCompositionEnd
209
+ }), isHelperMessageVisible && !findTyped && /*#__PURE__*/React.createElement("div", {
210
+ ref: successReplacementMessageRef
211
+ }, /*#__PURE__*/React.createElement(ValidMessage, {
212
+ testId: "message-success-replacement"
213
+ }, fakeSuccessReplacementMessageUpdate ?
214
+ // @ts-ignore - TS1501 TypeScript 5.9.2 upgrade
215
+ resultsReplace.replace(/ /, "\xA0") : resultsReplace)), /*#__PURE__*/React.createElement(Box, {
216
+ xcss: actionButtonContainerStyles
217
+ }, /*#__PURE__*/React.createElement(Inline, {
218
+ xcss: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? [actionButtonInlineStyles, actionButtonParentInlineStylesNew] : [actionButtonInlineStyles, actionButtonParentInlineStyles]
219
+ }, /*#__PURE__*/React.createElement(Inline, {
220
+ xcss: actionButtonInlineStyles
221
+ }, /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
222
+ title: formatMessage(messages.findNext),
223
+ icon: function icon(iconProps) {
224
+ return /*#__PURE__*/React.createElement(ChevronDownIcon, {
225
+ label: iconProps.label,
226
+ size: "small"
257
227
  });
258
- return jsx(Fragment, null, jsx("div", {
259
- css: [sectionWrapperStyles, sectionWrapperStylesAlternate]
260
- }, jsx("div", {
261
- css: textFieldWrapper
262
- }, jsx(Label, {
263
- htmlFor: "replace-text-field"
264
- }, this.replaceWith), jsx(Textfield, {
265
- name: "replace",
266
- id: "replace-text-field",
267
- testId: "replace-field",
268
- appearance: "standard",
269
- defaultValue: replaceText,
270
- ref: this.replaceTextfieldRef,
271
- autoComplete: "off",
272
- onChange: this.handleReplaceChange,
273
- onKeyDown: this.handleReplaceKeyDown,
274
- onCompositionStart: this.handleCompositionStart,
275
- onCompositionEnd: this.handleCompositionEnd
276
- }), isHelperMessageVisible && this.props.findTyped === false && jsx("div", {
277
- ref: this.successReplacementMessageRef
278
- }, jsx(ValidMessage, {
279
- testId: "message-success-replacement"
280
- },
281
- /*
282
- Replacement needed to trigger the SR announcement if message hasn't changed. e.g Replace button clicked twice.
283
- '\u00a0' is value for &nbsp
284
- */
285
- this.state.fakeSuccessReplacementMessageUpdate ?
286
- // Ignored via go/ees005
287
- // eslint-disable-next-line require-unicode-regexp
288
- resultsReplace.replace(/ /, "\xA0") : resultsReplace)))), jsx("div", {
289
- css: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified, sectionWrapperFlexWrap] : [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified]
290
- }, jsx("div", {
291
- css: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? orderOneStylesNew : orderOneStyles
292
- }, jsx("div", {
293
- css: nextPreviousItemStyles
294
- }, jsx(FindReplaceTooltipButton, {
295
- title: this.findNext,
296
- icon: function icon(iconProps) {
297
- return jsx(ChevronDownIcon, {
298
- label: iconProps.label,
299
- size: "small"
300
- });
301
- },
302
- iconLabel: this.findNext,
303
- keymapDescription: 'Enter',
304
- onClick: this.handleFindNextClick,
305
- disabled: count.total <= 1
306
- })), jsx("div", {
307
- css: nextPreviousItemStyles
308
- }, jsx(FindReplaceTooltipButton, {
309
- title: this.findPrevious,
310
- icon: function icon(iconProps) {
311
- return jsx(ChevronUpIcon, {
312
- label: iconProps.label,
313
- size: "small"
314
- });
315
- },
316
- iconLabel: this.findPrevious,
317
- keymapDescription: 'Shift Enter',
318
- onClick: this.handleFindPrevClick,
319
- disabled: count.total <= 1
320
- })), jsx(Inline, {
321
- space: "space.075"
322
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
323
- ,
324
- xcss: xcss({
325
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
326
- paddingInlineStart: 'space.050',
327
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
328
- paddingInlineEnd: 'space.025'
329
- })
330
- }, jsx(Button, {
331
- testId: this.replace,
332
- id: "replace-button",
333
- onClick: this.handleReplaceClick,
334
- isDisabled: !canReplace
335
- }, this.replace), jsx(Button, {
336
- appearance: "primary",
337
- testId: this.replaceAll,
338
- id: "replaceAll-button",
339
- onClick: this.handleReplaceAllClick,
340
- isDisabled: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? count.totalReplaceable === 0 : !canReplace
341
- }, this.replaceAll))), jsx("div", {
342
- css: orderZeroStyles
343
- }, jsx(Button, {
344
- appearance: "subtle",
345
- testId: this.closeFindReplaceDialog,
346
- onClick: this.clearSearch
347
- }, this.closeFindReplaceDialog))));
348
- }
349
- }]);
350
- }(React.PureComponent);
228
+ },
229
+ iconLabel: formatMessage(messages.findNext),
230
+ keymapDescription: 'Enter',
231
+ onClick: handleFindNextClick,
232
+ disabled: count.total <= 1
233
+ }), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
234
+ title: findPrevious,
235
+ icon: function icon(iconProps) {
236
+ return /*#__PURE__*/React.createElement(ChevronUpIcon, {
237
+ label: iconProps.label,
238
+ size: "small"
239
+ });
240
+ },
241
+ iconLabel: findPrevious,
242
+ keymapDescription: 'Shift Enter',
243
+ onClick: handleFindPrevClick,
244
+ disabled: count.total <= 1
245
+ }), /*#__PURE__*/React.createElement(Button, {
246
+ testId: 'Replace',
247
+ id: "replace-button",
248
+ onClick: handleReplaceClick,
249
+ isDisabled: !canReplace
250
+ }, formatMessage(messages.replace)), /*#__PURE__*/React.createElement(Button, {
251
+ appearance: "primary",
252
+ testId: replaceAll,
253
+ id: "replaceAll-button",
254
+ onClick: handleReplaceAllClick,
255
+ isDisabled: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? count.totalReplaceable === 0 : !canReplace
256
+ }, replaceAll)), expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? /*#__PURE__*/React.createElement(Inline, {
257
+ xcss: closeButtonInlineStyles
258
+ }, /*#__PURE__*/React.createElement(Button, {
259
+ appearance: "subtle",
260
+ testId: closeFindReplaceDialog,
261
+ onClick: clearSearch
262
+ }, closeFindReplaceDialog)) : /*#__PURE__*/React.createElement(Button, {
263
+ appearance: "subtle",
264
+ testId: closeFindReplaceDialog,
265
+ onClick: clearSearch
266
+ }, closeFindReplaceDialog))));
267
+ };
351
268
  export default injectIntl(Replace);
package/dist/types/ui/FindReplace.d.ts CHANGED
@@ -42,13 +42,6 @@ declare class FindReplace extends React.PureComponent<FindReplaceProps> {
42
42
  private replaceTextfield?;
43
43
  private modalRef;
44
44
  constructor(props: FindReplaceProps);
45
- componentDidMount(): void;
46
- componentWillUnmount(): void;
47
- /**
48
- * Delete this function on cleanup of
49
- * editor_a11y_refactor_find_replace_style
50
- */
51
- handleTabNavigation: (event: KeyboardEvent) => void;
52
45
  state: {
53
46
  findTyped: boolean;
54
47
  };
package/dist/types/ui/Replace.d.ts CHANGED
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import React from 'react';
6
2
  import type { WrappedComponentProps } from 'react-intl-next';
7
3
  import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
@@ -37,13 +33,6 @@ export type ReplaceProps = {
37
33
  replaceText?: string;
38
34
  setFindTyped: (value: boolean) => void;
39
35
  };
40
- export type ReplaceState = {
41
- fakeSuccessReplacementMessageUpdate: boolean;
42
- isComposing: boolean;
43
- isHelperMessageVisible: boolean;
44
- replaceCount: number;
45
- replaceText: string;
46
- };
47
36
  declare const _default: React.FC<import("react-intl-next").WithIntlProps<ReplaceProps & WrappedComponentProps>> & {
48
37
  WrappedComponent: React.ComponentType<ReplaceProps & WrappedComponentProps>;
49
38
  };
package/dist/types-ts4.5/ui/FindReplace.d.ts CHANGED
@@ -42,13 +42,6 @@ declare class FindReplace extends React.PureComponent<FindReplaceProps> {
42
42
  private replaceTextfield?;
43
43
  private modalRef;
44
44
  constructor(props: FindReplaceProps);
45
- componentDidMount(): void;
46
- componentWillUnmount(): void;
47
- /**
48
- * Delete this function on cleanup of
49
- * editor_a11y_refactor_find_replace_style
50
- */
51
- handleTabNavigation: (event: KeyboardEvent) => void;
52
45
  state: {
53
46
  findTyped: boolean;
54
47
  };