@atlaskit/editor-plugin-find-replace 3.1.1 → 3.1.3

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 (13) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/ui/Replace.js +43 -3
  3. package/dist/cjs/ui/ReplaceNext.js +17 -2
  4. package/dist/cjs/ui/styles.js +93 -2
  5. package/dist/es2019/ui/Replace.js +44 -4
  6. package/dist/es2019/ui/ReplaceNext.js +17 -2
  7. package/dist/es2019/ui/styles.js +208 -0
  8. package/dist/esm/ui/Replace.js +44 -4
  9. package/dist/esm/ui/ReplaceNext.js +17 -2
  10. package/dist/esm/ui/styles.js +92 -1
  11. package/dist/types/ui/styles.d.ts +1 -0
  12. package/dist/types-ts4.5/ui/styles.d.ts +1 -0
  13. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-find-replace
2
2
 
3
+ ## 3.1.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#180962](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/180962)
8
+ [`1aa3eabc00314`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1aa3eabc00314) -
9
+ ED-28376 clean up usage of !important in find and replace styles
10
+ - Updated dependencies
11
+
12
+ ## 3.1.2
13
+
14
+ ### Patch Changes
15
+
16
+ - [#183007](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/183007)
17
+ [`a1cfc7e470ca7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a1cfc7e470ca7) -
18
+ [ux] ED-28316 wrap find and replace close button to next line if it would overflow
19
+
3
20
  ## 3.1.1
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/ui/Replace.js CHANGED
@@ -18,9 +18,11 @@ var _reactIntlNext = require("react-intl-next");
18
18
  var _new = _interopRequireDefault(require("@atlaskit/button/new"));
19
19
  var _analytics = require("@atlaskit/editor-common/analytics");
20
20
  var _messages = require("@atlaskit/editor-common/messages");
21
+ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
21
22
  var _form = require("@atlaskit/form");
22
23
  var _chevronDownHipchatChevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down"));
23
24
  var _chevronUpHipchatChevronUp = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up"));
25
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
24
26
  var _primitives = require("@atlaskit/primitives");
25
27
  var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
26
28
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -32,6 +34,44 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
32
34
  * @jsxRuntime classic
33
35
  * @jsx jsx
34
36
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
37
+ var sectionWrapperStyles = (0, _react2.css)({
38
+ display: 'flex',
39
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
40
+ '& > *': {
41
+ display: 'inline-flex',
42
+ height: '32px',
43
+ flex: '0 0 auto'
44
+ },
45
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
46
+ '& > [data-ds--text-field--container]': {
47
+ display: 'flex',
48
+ flex: '1 1 auto'
49
+ }
50
+ });
51
+ var sectionWrapperStylesAlternate = (0, _react2.css)({
52
+ display: 'flex',
53
+ padding: "var(--ds-space-100, 8px)",
54
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
55
+ '& > *': {
56
+ height: 'unset'
57
+ }
58
+ });
59
+ var sectionWrapperJustified = (0, _react2.css)({
60
+ justifyContent: 'space-between',
61
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
62
+ fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(14)
63
+ });
64
+ var sectionWrapperFlexWrap = (0, _react2.css)({
65
+ flexWrap: 'wrap-reverse',
66
+ gap: "var(--ds-space-075, 6px)"
67
+ });
68
+ var orderOneStyles = (0, _react2.css)({
69
+ order: '1'
70
+ });
71
+ var orderOneStylesNew = (0, _react2.css)({
72
+ order: '1',
73
+ marginLeft: 'auto'
74
+ });
35
75
  // eslint-disable-next-line @repo/internal/react/no-class-components
36
76
  var Replace = /*#__PURE__*/function (_React$PureComponent) {
37
77
  function Replace(props) {
@@ -221,7 +261,7 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
221
261
  numberOfMatches: replaceCount
222
262
  });
223
263
  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
224
- css: [_uiStyles.sectionWrapperStyles, _uiStyles.sectionWrapperStylesAlternate]
264
+ css: [sectionWrapperStyles, sectionWrapperStylesAlternate]
225
265
  }, (0, _react2.jsx)("div", {
226
266
  css: _uiStyles.textFieldWrapper
227
267
  }, (0, _react2.jsx)(_form.Label, {
@@ -251,9 +291,9 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
251
291
  // Ignored via go/ees005
252
292
  // eslint-disable-next-line require-unicode-regexp
253
293
  resultsReplace.replace(/ /, "\xA0") : resultsReplace)))), (0, _react2.jsx)("div", {
254
- css: [_uiStyles.sectionWrapperStyles, _uiStyles.sectionWrapperStylesAlternate, _uiStyles.sectionWrapperJustified]
294
+ css: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified, sectionWrapperFlexWrap] : [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified]
255
295
  }, (0, _react2.jsx)("div", {
256
- css: _uiStyles.orderOneStyles
296
+ css: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? orderOneStylesNew : orderOneStyles
257
297
  }, (0, _react2.jsx)("div", {
258
298
  css: _uiStyles.nextPreviousItemStyles
259
299
  }, (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
package/dist/cjs/ui/ReplaceNext.js CHANGED
@@ -15,6 +15,7 @@ var _messages = require("@atlaskit/editor-common/messages");
15
15
  var _form = require("@atlaskit/form");
16
16
  var _chevronDownHipchatChevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down"));
17
17
  var _chevronUpHipchatChevronUp = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up"));
18
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
19
  var _primitives = require("@atlaskit/primitives");
19
20
  var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
20
21
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -33,9 +34,17 @@ var actionButtonParentInlineStyles = (0, _primitives.xcss)({
33
34
  justifyContent: 'space-between',
34
35
  flexDirection: 'row-reverse'
35
36
  });
37
+ var actionButtonParentInlineStylesNew = (0, _primitives.xcss)({
38
+ justifyContent: 'space-between',
39
+ flexDirection: 'row-reverse',
40
+ flexWrap: 'wrap'
41
+ });
36
42
  var actionButtonInlineStyles = (0, _primitives.xcss)({
37
43
  gap: 'space.075'
38
44
  });
45
+ var closeButtonInlineStyles = (0, _primitives.xcss)({
46
+ marginRight: 'auto'
47
+ });
39
48
  var Replace = function Replace(_ref) {
40
49
  var canReplace = _ref.canReplace,
41
50
  initialReplaceText = _ref.replaceText,
@@ -212,7 +221,7 @@ var Replace = function Replace(_ref) {
212
221
  }, fakeSuccessReplacementMessageUpdate ? resultsReplace.replace(/ /, "\xA0") : resultsReplace)), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
213
222
  xcss: actionButtonContainerStyles
214
223
  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
215
- xcss: [actionButtonInlineStyles, actionButtonParentInlineStyles]
224
+ xcss: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? [actionButtonInlineStyles, actionButtonParentInlineStylesNew] : [actionButtonInlineStyles, actionButtonParentInlineStyles]
216
225
  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
217
226
  xcss: actionButtonInlineStyles
218
227
  }, /*#__PURE__*/_react.default.createElement(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
@@ -250,7 +259,13 @@ var Replace = function Replace(_ref) {
250
259
  id: "replaceAll-button",
251
260
  onClick: handleReplaceAllClick,
252
261
  isDisabled: (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? count.totalReplaceable === 0 : !canReplace
253
- }, replaceAll)), /*#__PURE__*/_react.default.createElement(_new.default, {
262
+ }, replaceAll)), (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
263
+ xcss: closeButtonInlineStyles
264
+ }, /*#__PURE__*/_react.default.createElement(_new.default, {
265
+ appearance: "subtle",
266
+ testId: closeFindReplaceDialog,
267
+ onClick: clearSearch
268
+ }, closeFindReplaceDialog)) : /*#__PURE__*/_react.default.createElement(_new.default, {
254
269
  appearance: "subtle",
255
270
  testId: closeFindReplaceDialog,
256
271
  onClick: clearSearch
package/dist/cjs/ui/styles.js CHANGED
@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.selectedSearchMatchClass = exports.selectedBlockSearchMatchClass = exports.searchMatchTextClass = exports.searchMatchExpandTitleClass = exports.searchMatchClass = exports.findReplaceStylesNewYellow = exports.findReplaceStylesNewMagenta = exports.findReplaceStyles = exports.darkModeSearchMatchClass = exports.blockSearchMatchClass = void 0;
7
+ exports.selectedSearchMatchClass = exports.selectedBlockSearchMatchClass = exports.searchMatchTextClass = exports.searchMatchExpandTitleClass = exports.searchMatchClass = exports.findReplaceStylesNewYellow = exports.findReplaceStylesNewMagentaNoImportant = exports.findReplaceStylesNewMagenta = exports.findReplaceStyles = exports.darkModeSearchMatchClass = exports.blockSearchMatchClass = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  var _colors = require("@atlaskit/theme/colors");
11
11
  var _styles = require("@atlaskit/editor-common/styles");
12
- var _css2, _css3;
12
+ var _css2, _css3, _css4;
13
13
  /* eslint-disable @atlaskit/editor/no-re-export */
14
14
  // Entry file in package.json
15
15
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
@@ -222,4 +222,95 @@ var findReplaceStylesNewMagenta = exports.findReplaceStylesNewMagenta = (0, _rea
222
222
  })), ".".concat(searchMatchExpandTitleClass, ".").concat(selectedSearchMatchClass, ".").concat(darkModeSearchMatchClass, " > .").concat(_styles.expandClassNames.titleContainer, " > .").concat(_styles.expandClassNames.inputContainer), {
223
223
  boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t"),
224
224
  backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
225
+ })));
226
+ var findReplaceStylesNewMagentaNoImportant = exports.findReplaceStylesNewMagentaNoImportant = (0, _react.css)((_css4 = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css4, ".".concat(searchMatchTextClass), {
227
+ borderRadius: "var(--ds-space-050, 4px)",
228
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", "\n\t\t"),
229
+ // we need to use !important here as we need to override inline selection styles
230
+ backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)".concat(" !important"),
231
+ color: "var(--ds-text, #172B4D)"
232
+ }), ".".concat(searchMatchTextClass, ".").concat(selectedSearchMatchClass), {
233
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)", "\n\t\t"),
234
+ // we need to use !important here as we need to override inline selection styles
235
+ backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)".concat(" !important")
236
+ }), ".".concat(searchMatchTextClass, ".").concat(darkModeSearchMatchClass), {
237
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #50253F)", "\n\t\t"),
238
+ backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #50253F)",
239
+ color: "var(--ds-text-inverse, #FFFFFF)"
240
+ }), ".".concat(searchMatchTextClass, ".").concat(selectedSearchMatchClass, ".").concat(darkModeSearchMatchClass), {
241
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t"),
242
+ backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
243
+ }), ".".concat(blockSearchMatchClass), (0, _defineProperty2.default)({
244
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
245
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
246
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", "\n\t\t\t")
247
+ }
248
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
249
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-magenta-subtler, #FDD0EC)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)")
250
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass), (0, _defineProperty2.default)({
251
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
252
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
253
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)", "\n\t\t\t")
254
+ }
255
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
256
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)")
257
+ })), ".".concat(blockSearchMatchClass, ".embedCardView-content-wrap.ak-editor-selected-node,\n\t .").concat(blockSearchMatchClass, ".statusView-content-wrap.ak-editor-selected-node,\n\t .").concat(blockSearchMatchClass, ".mentionView-content-wrap.ak-editor-selected-node,\n\t .").concat(blockSearchMatchClass, ".inlineCardView-content-wrap.ak-editor-selected-node,\n\t .").concat(blockSearchMatchClass, ".ak-editor-selected-node"), (0, _defineProperty2.default)({
258
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
259
+ '.loader-wrapper>div::after': {
260
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
261
+ }
262
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
263
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)")
264
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".ak-editor-selected-node"), (0, _defineProperty2.default)({
265
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
266
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
267
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
268
+ }
269
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
270
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)")
271
+ })), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass), (0, _defineProperty2.default)({
272
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
273
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
274
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #50253F)", "\n\t\t\t")
275
+ }
276
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
277
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-magenta-bolder-pressed, #50253F)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder, #AE4787)")
278
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".").concat(darkModeSearchMatchClass), (0, _defineProperty2.default)({
279
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
280
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
281
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t\t")
282
+ }
283
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
284
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder, #AE4787)")
285
+ })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css4, ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node, .").concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".mentionView-content-wrap.ak-editor-selected-node"), (0, _defineProperty2.default)({
286
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
287
+ '.loader-wrapper>div::after': {
288
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #50253F)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
289
+ }
290
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
291
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-magenta-bolder-pressed, #50253F)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder, #AE4787)")
292
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), (0, _defineProperty2.default)({
293
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
294
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
295
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
296
+ }
297
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
298
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder, #AE4787)")
299
+ })), ".".concat(searchMatchExpandTitleClass, " > .").concat(_styles.expandClassNames.titleContainer, " > .").concat(_styles.expandClassNames.inputContainer), (0, _defineProperty2.default)({
300
+ borderRadius: "var(--ds-space-050, 4px)",
301
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", "\n\t\t"),
302
+ backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)"
303
+ }, ".".concat(_styles.expandClassNames.titleInput), {
304
+ color: "var(--ds-text, #172B4D)"
305
+ })), ".".concat(searchMatchExpandTitleClass, ".").concat(selectedSearchMatchClass, " > .").concat(_styles.expandClassNames.titleContainer, " > .").concat(_styles.expandClassNames.inputContainer), {
306
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)", "\n\t\t"),
307
+ backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"
308
+ }), ".".concat(searchMatchExpandTitleClass, ".").concat(darkModeSearchMatchClass, " > .").concat(_styles.expandClassNames.titleContainer, " > .").concat(_styles.expandClassNames.inputContainer), (0, _defineProperty2.default)({
309
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #50253F)", "\n\t\t"),
310
+ backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #50253F)"
311
+ }, ".".concat(_styles.expandClassNames.titleInput), {
312
+ color: "var(--ds-text-inverse, #FFFFFF)"
313
+ })), ".".concat(searchMatchExpandTitleClass, ".").concat(selectedSearchMatchClass, ".").concat(darkModeSearchMatchClass, " > .").concat(_styles.expandClassNames.titleContainer, " > .").concat(_styles.expandClassNames.inputContainer), {
314
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t"),
315
+ backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
225
316
  })));
package/dist/es2019/ui/Replace.js CHANGED
@@ -7,19 +7,59 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
7
7
  import React, { Fragment } from 'react';
8
8
 
9
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
- import { jsx } from '@emotion/react';
10
+ import { css, jsx } from '@emotion/react';
11
11
  import { injectIntl } from 'react-intl-next';
12
12
  import Button from '@atlaskit/button/new';
13
13
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
14
14
  import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
15
+ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
15
16
  import { Label, ValidMessage } from '@atlaskit/form';
16
17
  import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down';
17
18
  import ChevronUpIcon from '@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up';
19
+ import { fg } from '@atlaskit/platform-feature-flags';
18
20
  import { Inline, xcss } from '@atlaskit/primitives';
19
21
  import Textfield from '@atlaskit/textfield';
20
22
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
21
23
  import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
22
- import { nextPreviousItemStyles, orderOneStyles, orderZeroStyles, sectionWrapperJustified, sectionWrapperStyles, sectionWrapperStylesAlternate, textFieldWrapper } from './ui-styles';
24
+ import { nextPreviousItemStyles, orderZeroStyles, textFieldWrapper } from './ui-styles';
25
+ const sectionWrapperStyles = css({
26
+ display: 'flex',
27
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
28
+ '& > *': {
29
+ display: 'inline-flex',
30
+ height: '32px',
31
+ flex: '0 0 auto'
32
+ },
33
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
34
+ '& > [data-ds--text-field--container]': {
35
+ display: 'flex',
36
+ flex: '1 1 auto'
37
+ }
38
+ });
39
+ const sectionWrapperStylesAlternate = css({
40
+ display: 'flex',
41
+ padding: "var(--ds-space-100, 8px)",
42
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
43
+ '& > *': {
44
+ height: 'unset'
45
+ }
46
+ });
47
+ const sectionWrapperJustified = css({
48
+ justifyContent: 'space-between',
49
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
50
+ fontSize: relativeFontSizeToBase16(14)
51
+ });
52
+ const sectionWrapperFlexWrap = css({
53
+ flexWrap: 'wrap-reverse',
54
+ gap: "var(--ds-space-075, 6px)"
55
+ });
56
+ const orderOneStyles = css({
57
+ order: '1'
58
+ });
59
+ const orderOneStylesNew = css({
60
+ order: '1',
61
+ marginLeft: 'auto'
62
+ });
23
63
  // eslint-disable-next-line @repo/internal/react/no-class-components
24
64
  class Replace extends React.PureComponent {
25
65
  constructor(props) {
@@ -232,9 +272,9 @@ class Replace extends React.PureComponent {
232
272
  // Ignored via go/ees005
233
273
  // eslint-disable-next-line require-unicode-regexp
234
274
  resultsReplace.replace(/ /, '\u00a0') : resultsReplace)))), jsx("div", {
235
- css: [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified]
275
+ css: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified, sectionWrapperFlexWrap] : [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified]
236
276
  }, jsx("div", {
237
- css: orderOneStyles
277
+ css: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? orderOneStylesNew : orderOneStyles
238
278
  }, jsx("div", {
239
279
  css: nextPreviousItemStyles
240
280
  }, jsx(FindReplaceTooltipButton, {
package/dist/es2019/ui/ReplaceNext.js CHANGED
@@ -6,6 +6,7 @@ import { findReplaceMessages as messages } from '@atlaskit/editor-common/message
6
6
  import { ValidMessage } from '@atlaskit/form';
7
7
  import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down';
8
8
  import ChevronUpIcon from '@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { Box, Inline, Text, xcss } from '@atlaskit/primitives';
10
11
  import Textfield from '@atlaskit/textfield';
11
12
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -23,9 +24,17 @@ const actionButtonParentInlineStyles = xcss({
23
24
  justifyContent: 'space-between',
24
25
  flexDirection: 'row-reverse'
25
26
  });
27
+ const actionButtonParentInlineStylesNew = xcss({
28
+ justifyContent: 'space-between',
29
+ flexDirection: 'row-reverse',
30
+ flexWrap: 'wrap'
31
+ });
26
32
  const actionButtonInlineStyles = xcss({
27
33
  gap: 'space.075'
28
34
  });
35
+ const closeButtonInlineStyles = xcss({
36
+ marginRight: 'auto'
37
+ });
29
38
  const Replace = ({
30
39
  canReplace,
31
40
  replaceText: initialReplaceText,
@@ -182,7 +191,7 @@ const Replace = ({
182
191
  }, fakeSuccessReplacementMessageUpdate ? resultsReplace.replace(/ /u, '\u00a0') : resultsReplace)), /*#__PURE__*/React.createElement(Box, {
183
192
  xcss: actionButtonContainerStyles
184
193
  }, /*#__PURE__*/React.createElement(Inline, {
185
- xcss: [actionButtonInlineStyles, actionButtonParentInlineStyles]
194
+ xcss: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? [actionButtonInlineStyles, actionButtonParentInlineStylesNew] : [actionButtonInlineStyles, actionButtonParentInlineStyles]
186
195
  }, /*#__PURE__*/React.createElement(Inline, {
187
196
  xcss: actionButtonInlineStyles
188
197
  }, /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
@@ -216,7 +225,13 @@ const Replace = ({
216
225
  id: "replaceAll-button",
217
226
  onClick: handleReplaceAllClick,
218
227
  isDisabled: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? count.totalReplaceable === 0 : !canReplace
219
- }, replaceAll)), /*#__PURE__*/React.createElement(Button, {
228
+ }, replaceAll)), expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? /*#__PURE__*/React.createElement(Inline, {
229
+ xcss: closeButtonInlineStyles
230
+ }, /*#__PURE__*/React.createElement(Button, {
231
+ appearance: "subtle",
232
+ testId: closeFindReplaceDialog,
233
+ onClick: clearSearch
234
+ }, closeFindReplaceDialog)) : /*#__PURE__*/React.createElement(Button, {
220
235
  appearance: "subtle",
221
236
  testId: closeFindReplaceDialog,
222
237
  onClick: clearSearch
package/dist/es2019/ui/styles.js CHANGED
@@ -418,6 +418,214 @@ export const findReplaceStylesNewMagenta = css({
418
418
  },
419
419
  /** Dark mode */
420
420
 
421
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
422
+ [`.${searchMatchExpandTitleClass}.${darkModeSearchMatchClass} > .${expandClassNames.titleContainer} > .${expandClassNames.inputContainer}`]: {
423
+ boxShadow: `
424
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
425
+ inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-pressed, #50253F)"}
426
+ `,
427
+ backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #50253F)",
428
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
429
+ [`.${expandClassNames.titleInput}`]: {
430
+ color: "var(--ds-text-inverse, #FFFFFF)"
431
+ }
432
+ },
433
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
434
+ [`.${searchMatchExpandTitleClass}.${selectedSearchMatchClass}.${darkModeSearchMatchClass} > .${expandClassNames.titleContainer} > .${expandClassNames.inputContainer}`]: {
435
+ boxShadow: `
436
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
437
+ inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"}
438
+ `,
439
+ backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
440
+ }
441
+ });
442
+ export const findReplaceStylesNewMagentaNoImportant = css({
443
+ /** Text match styles */
444
+
445
+ /** Light mode */
446
+
447
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
448
+ [`.${searchMatchTextClass}`]: {
449
+ borderRadius: "var(--ds-space-050, 4px)",
450
+ boxShadow: `
451
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"},
452
+ inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"}
453
+ `,
454
+ // we need to use !important here as we need to override inline selection styles
455
+ backgroundColor: `${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"} !important`,
456
+ color: "var(--ds-text, #172B4D)"
457
+ },
458
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
459
+ [`.${searchMatchTextClass}.${selectedSearchMatchClass}`]: {
460
+ boxShadow: `
461
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"},
462
+ inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"}
463
+ `,
464
+ // we need to use !important here as we need to override inline selection styles
465
+ backgroundColor: `${"var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"} !important`
466
+ },
467
+ /** Dark mode */
468
+
469
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
470
+ [`.${searchMatchTextClass}.${darkModeSearchMatchClass}`]: {
471
+ boxShadow: `
472
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
473
+ inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-pressed, #50253F)"}
474
+ `,
475
+ backgroundColor: `${"var(--ds-background-accent-magenta-bolder-pressed, #50253F)"}`,
476
+ color: "var(--ds-text-inverse, #FFFFFF)"
477
+ },
478
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
479
+ [`.${searchMatchTextClass}.${selectedSearchMatchClass}.${darkModeSearchMatchClass}`]: {
480
+ boxShadow: `
481
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
482
+ inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"}
483
+ `,
484
+ backgroundColor: `${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"}`
485
+ },
486
+ /** Block match styles */
487
+
488
+ /** Light mode */
489
+
490
+ /** Without node selection */
491
+ [`.${blockSearchMatchClass}`]: {
492
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
493
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
494
+ boxShadow: `
495
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"},
496
+ inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"}
497
+ `
498
+ },
499
+ [`${inlineCardSelector}, ${statusSelector}, ${mentionSelector}, ${dateSelector}`]: {
500
+ boxShadow: `0px 0px 0px 4px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"}`
501
+ }
502
+ },
503
+ [`.${blockSearchMatchClass}.${selectedBlockSearchMatchClass}`]: {
504
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
505
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
506
+ boxShadow: `
507
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"},
508
+ inset 0 0 0 4px ${"var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"}
509
+ `
510
+ },
511
+ [`${inlineCardSelector}, ${statusSelector}, ${mentionSelector}, ${dateSelector}`]: {
512
+ boxShadow: `0px 0px 0px 4px ${"var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"}`
513
+ }
514
+ },
515
+ /** With node selection */
516
+
517
+ // We need to include the embedCardView and statusView classes to have higher specificity than the default selected state styles
518
+ [`.${blockSearchMatchClass}.embedCardView-content-wrap.ak-editor-selected-node,
519
+ .${blockSearchMatchClass}.statusView-content-wrap.ak-editor-selected-node,
520
+ .${blockSearchMatchClass}.mentionView-content-wrap.ak-editor-selected-node,
521
+ .${blockSearchMatchClass}.inlineCardView-content-wrap.ak-editor-selected-node,
522
+ .${blockSearchMatchClass}.ak-editor-selected-node`]: {
523
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
524
+ '.loader-wrapper>div::after': {
525
+ boxShadow: `
526
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"},
527
+ inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"},
528
+ 0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
529
+ `
530
+ },
531
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
532
+ [`${inlineCardSelector}, ${statusSelector}, ${mentionSelector}, ${dateSelector}`]: {
533
+ boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"}`
534
+ }
535
+ },
536
+ [`.${blockSearchMatchClass}.${selectedBlockSearchMatchClass}.ak-editor-selected-node`]: {
537
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
538
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
539
+ boxShadow: `
540
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"},
541
+ inset 0 0 0 4px ${"var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"},
542
+ 0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
543
+ `
544
+ },
545
+ [`${inlineCardSelector}, ${statusSelector}, ${mentionSelector}, ${dateSelector}`]: {
546
+ boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"}`
547
+ }
548
+ },
549
+ /** Dark mode */
550
+ /** Without node selection */
551
+ [`.${blockSearchMatchClass}.${darkModeSearchMatchClass}`]: {
552
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
553
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
554
+ boxShadow: `
555
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
556
+ inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-pressed, #50253F)"}
557
+ `
558
+ },
559
+ [`${inlineCardSelector}, ${statusSelector}, ${mentionSelector}, ${dateSelector}`]: {
560
+ boxShadow: `0px 0px 0px 4px ${"var(--ds-background-accent-magenta-bolder-pressed, #50253F)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"}`
561
+ }
562
+ },
563
+ [`.${blockSearchMatchClass}.${selectedBlockSearchMatchClass}.${darkModeSearchMatchClass}`]: {
564
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
565
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
566
+ boxShadow: `
567
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
568
+ inset 0 0 0 4px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"}
569
+ `
570
+ },
571
+ [`${inlineCardSelector}, ${statusSelector}, ${mentionSelector}, ${dateSelector}`]: {
572
+ boxShadow: `0px 0px 0px 4px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"}`
573
+ }
574
+ },
575
+ /** With node selection */
576
+ [`.${blockSearchMatchClass}.${darkModeSearchMatchClass}.ak-editor-selected-node, .${blockSearchMatchClass}.${darkModeSearchMatchClass}.mentionView-content-wrap.ak-editor-selected-node`]: {
577
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
578
+ '.loader-wrapper>div::after': {
579
+ boxShadow: `
580
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
581
+ inset 0 0 0 5px ${"var(--ds-background-accent-magenta-bolder-pressed, #50253F)"},
582
+ 0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
583
+ `
584
+ },
585
+ [`${inlineCardSelector}, ${statusSelector}, ${mentionSelector}, ${dateSelector}`]: {
586
+ boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-magenta-bolder-pressed, #50253F)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"}`
587
+ }
588
+ },
589
+ [`.${blockSearchMatchClass}.${selectedBlockSearchMatchClass}.${darkModeSearchMatchClass}.ak-editor-selected-node`]: {
590
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
591
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
592
+ boxShadow: `
593
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"},
594
+ inset 0 0 0 4px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"},
595
+ 0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}
596
+ `
597
+ },
598
+ [`${inlineCardSelector}, ${statusSelector}, ${mentionSelector}, ${dateSelector}`]: {
599
+ boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-magenta-bolder-hovered, #943D73)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-magenta-bolder, #AE4787)"}`
600
+ }
601
+ },
602
+ /** Expand title match styles */
603
+
604
+ /** Light mode */
605
+
606
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
607
+ [`.${searchMatchExpandTitleClass} > .${expandClassNames.titleContainer} > .${expandClassNames.inputContainer}`]: {
608
+ borderRadius: "var(--ds-space-050, 4px)",
609
+ boxShadow: `
610
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"},
611
+ inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtler, #FDD0EC)"}
612
+ `,
613
+ backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
614
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
615
+ [`.${expandClassNames.titleInput}`]: {
616
+ color: "var(--ds-text, #172B4D)"
617
+ }
618
+ },
619
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
620
+ [`.${searchMatchExpandTitleClass}.${selectedSearchMatchClass} > .${expandClassNames.titleContainer} > .${expandClassNames.inputContainer}`]: {
621
+ boxShadow: `
622
+ inset 0 0 0 1px ${"var(--ds-background-accent-magenta-subtler-pressed, #E774BB)"},
623
+ inset 0 0 0 5px ${"var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"}
624
+ `,
625
+ backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"
626
+ },
627
+ /** Dark mode */
628
+
421
629
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
422
630
  [`.${searchMatchExpandTitleClass}.${darkModeSearchMatchClass} > .${expandClassNames.titleContainer} > .${expandClassNames.inputContainer}`]: {
423
631
  boxShadow: `
package/dist/esm/ui/Replace.js CHANGED
@@ -14,19 +14,59 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
14
14
  import React, { Fragment } from 'react';
15
15
 
16
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
- import { jsx } from '@emotion/react';
17
+ import { css, jsx } from '@emotion/react';
18
18
  import { injectIntl } from 'react-intl-next';
19
19
  import Button from '@atlaskit/button/new';
20
20
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TRIGGER_METHOD } from '@atlaskit/editor-common/analytics';
21
21
  import { findReplaceMessages as messages } from '@atlaskit/editor-common/messages';
22
+ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
22
23
  import { Label, ValidMessage } from '@atlaskit/form';
23
24
  import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down';
24
25
  import ChevronUpIcon from '@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up';
26
+ import { fg } from '@atlaskit/platform-feature-flags';
25
27
  import { Inline, xcss } from '@atlaskit/primitives';
26
28
  import Textfield from '@atlaskit/textfield';
27
29
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
28
30
  import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
29
- import { nextPreviousItemStyles, orderOneStyles, orderZeroStyles, sectionWrapperJustified, sectionWrapperStyles, sectionWrapperStylesAlternate, textFieldWrapper } from './ui-styles';
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
+ }
45
+ });
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
+ }
53
+ });
54
+ var sectionWrapperJustified = css({
55
+ 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)
58
+ });
59
+ var sectionWrapperFlexWrap = css({
60
+ flexWrap: 'wrap-reverse',
61
+ gap: "var(--ds-space-075, 6px)"
62
+ });
63
+ var orderOneStyles = css({
64
+ order: '1'
65
+ });
66
+ var orderOneStylesNew = css({
67
+ order: '1',
68
+ marginLeft: 'auto'
69
+ });
30
70
  // eslint-disable-next-line @repo/internal/react/no-class-components
31
71
  var Replace = /*#__PURE__*/function (_React$PureComponent) {
32
72
  function Replace(props) {
@@ -246,9 +286,9 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
246
286
  // Ignored via go/ees005
247
287
  // eslint-disable-next-line require-unicode-regexp
248
288
  resultsReplace.replace(/ /, "\xA0") : resultsReplace)))), jsx("div", {
249
- css: [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified]
289
+ css: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified, sectionWrapperFlexWrap] : [sectionWrapperStyles, sectionWrapperStylesAlternate, sectionWrapperJustified]
250
290
  }, jsx("div", {
251
- css: orderOneStyles
291
+ css: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? orderOneStylesNew : orderOneStyles
252
292
  }, jsx("div", {
253
293
  css: nextPreviousItemStyles
254
294
  }, jsx(FindReplaceTooltipButton, {
package/dist/esm/ui/ReplaceNext.js CHANGED
@@ -7,6 +7,7 @@ import { findReplaceMessages as messages } from '@atlaskit/editor-common/message
7
7
  import { ValidMessage } from '@atlaskit/form';
8
8
  import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down';
9
9
  import ChevronUpIcon from '@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
10
11
  import { Box, Inline, Text, xcss } from '@atlaskit/primitives';
11
12
  import Textfield from '@atlaskit/textfield';
12
13
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -24,9 +25,17 @@ var actionButtonParentInlineStyles = xcss({
24
25
  justifyContent: 'space-between',
25
26
  flexDirection: 'row-reverse'
26
27
  });
28
+ var actionButtonParentInlineStylesNew = xcss({
29
+ justifyContent: 'space-between',
30
+ flexDirection: 'row-reverse',
31
+ flexWrap: 'wrap'
32
+ });
27
33
  var actionButtonInlineStyles = xcss({
28
34
  gap: 'space.075'
29
35
  });
36
+ var closeButtonInlineStyles = xcss({
37
+ marginRight: 'auto'
38
+ });
30
39
  var Replace = function Replace(_ref) {
31
40
  var canReplace = _ref.canReplace,
32
41
  initialReplaceText = _ref.replaceText,
@@ -203,7 +212,7 @@ var Replace = function Replace(_ref) {
203
212
  }, fakeSuccessReplacementMessageUpdate ? resultsReplace.replace(/ /, "\xA0") : resultsReplace)), /*#__PURE__*/React.createElement(Box, {
204
213
  xcss: actionButtonContainerStyles
205
214
  }, /*#__PURE__*/React.createElement(Inline, {
206
- xcss: [actionButtonInlineStyles, actionButtonParentInlineStyles]
215
+ xcss: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? [actionButtonInlineStyles, actionButtonParentInlineStylesNew] : [actionButtonInlineStyles, actionButtonParentInlineStyles]
207
216
  }, /*#__PURE__*/React.createElement(Inline, {
208
217
  xcss: actionButtonInlineStyles
209
218
  }, /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
@@ -241,7 +250,13 @@ var Replace = function Replace(_ref) {
241
250
  id: "replaceAll-button",
242
251
  onClick: handleReplaceAllClick,
243
252
  isDisabled: expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? count.totalReplaceable === 0 : !canReplace
244
- }, replaceAll)), /*#__PURE__*/React.createElement(Button, {
253
+ }, replaceAll)), expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? /*#__PURE__*/React.createElement(Inline, {
254
+ xcss: closeButtonInlineStyles
255
+ }, /*#__PURE__*/React.createElement(Button, {
256
+ appearance: "subtle",
257
+ testId: closeFindReplaceDialog,
258
+ onClick: clearSearch
259
+ }, closeFindReplaceDialog)) : /*#__PURE__*/React.createElement(Button, {
245
260
  appearance: "subtle",
246
261
  testId: closeFindReplaceDialog,
247
262
  onClick: clearSearch
package/dist/esm/ui/styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- var _css2, _css3;
2
+ var _css2, _css3, _css4;
3
3
  /* eslint-disable @atlaskit/editor/no-re-export */
4
4
  // Entry file in package.json
5
5
 
@@ -217,4 +217,95 @@ export var findReplaceStylesNewMagenta = css((_css3 = {}, _defineProperty(_defin
217
217
  })), ".".concat(searchMatchExpandTitleClass, ".").concat(selectedSearchMatchClass, ".").concat(darkModeSearchMatchClass, " > .").concat(expandClassNames.titleContainer, " > .").concat(expandClassNames.inputContainer), {
218
218
  boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t"),
219
219
  backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
220
+ })));
221
+ export var findReplaceStylesNewMagentaNoImportant = css((_css4 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css4, ".".concat(searchMatchTextClass), {
222
+ borderRadius: "var(--ds-space-050, 4px)",
223
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", "\n\t\t"),
224
+ // we need to use !important here as we need to override inline selection styles
225
+ backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)".concat(" !important"),
226
+ color: "var(--ds-text, #172B4D)"
227
+ }), ".".concat(searchMatchTextClass, ".").concat(selectedSearchMatchClass), {
228
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)", "\n\t\t"),
229
+ // we need to use !important here as we need to override inline selection styles
230
+ backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)".concat(" !important")
231
+ }), ".".concat(searchMatchTextClass, ".").concat(darkModeSearchMatchClass), {
232
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #50253F)", "\n\t\t"),
233
+ backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #50253F)",
234
+ color: "var(--ds-text-inverse, #FFFFFF)"
235
+ }), ".".concat(searchMatchTextClass, ".").concat(selectedSearchMatchClass, ".").concat(darkModeSearchMatchClass), {
236
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t"),
237
+ backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
238
+ }), ".".concat(blockSearchMatchClass), _defineProperty({
239
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
240
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
241
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", "\n\t\t\t")
242
+ }
243
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
244
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-magenta-subtler, #FDD0EC)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)")
245
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass), _defineProperty({
246
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
247
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
248
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)", "\n\t\t\t")
249
+ }
250
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
251
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)")
252
+ })), ".".concat(blockSearchMatchClass, ".embedCardView-content-wrap.ak-editor-selected-node,\n\t .").concat(blockSearchMatchClass, ".statusView-content-wrap.ak-editor-selected-node,\n\t .").concat(blockSearchMatchClass, ".mentionView-content-wrap.ak-editor-selected-node,\n\t .").concat(blockSearchMatchClass, ".inlineCardView-content-wrap.ak-editor-selected-node,\n\t .").concat(blockSearchMatchClass, ".ak-editor-selected-node"), _defineProperty({
253
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
254
+ '.loader-wrapper>div::after': {
255
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
256
+ }
257
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
258
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)")
259
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".ak-editor-selected-node"), _defineProperty({
260
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
261
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
262
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
263
+ }
264
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
265
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)")
266
+ })), ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass), _defineProperty({
267
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
268
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
269
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #50253F)", "\n\t\t\t")
270
+ }
271
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
272
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-magenta-bolder-pressed, #50253F)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder, #AE4787)")
273
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".").concat(darkModeSearchMatchClass), _defineProperty({
274
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
275
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
276
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t\t")
277
+ }
278
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
279
+ boxShadow: "0px 0px 0px 4px ".concat("var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder, #AE4787)")
280
+ })), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css4, ".".concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node, .").concat(blockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".mentionView-content-wrap.ak-editor-selected-node"), _defineProperty({
281
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
282
+ '.loader-wrapper>div::after': {
283
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #50253F)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
284
+ }
285
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
286
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-magenta-bolder-pressed, #50253F)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder, #AE4787)")
287
+ })), ".".concat(blockSearchMatchClass, ".").concat(selectedBlockSearchMatchClass, ".").concat(darkModeSearchMatchClass, ".ak-editor-selected-node"), _defineProperty({
288
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
289
+ '[data-smart-link-container="true"], .loader-wrapper>div::after': {
290
+ boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
291
+ }
292
+ }, "".concat(inlineCardSelector, ", ").concat(statusSelector, ", ").concat(mentionSelector, ", ").concat(dateSelector), {
293
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-magenta-bolder, #AE4787)")
294
+ })), ".".concat(searchMatchExpandTitleClass, " > .").concat(expandClassNames.titleContainer, " > .").concat(expandClassNames.inputContainer), _defineProperty({
295
+ borderRadius: "var(--ds-space-050, 4px)",
296
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtler, #FDD0EC)", "\n\t\t"),
297
+ backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)"
298
+ }, ".".concat(expandClassNames.titleInput), {
299
+ color: "var(--ds-text, #172B4D)"
300
+ })), ".".concat(searchMatchExpandTitleClass, ".").concat(selectedSearchMatchClass, " > .").concat(expandClassNames.titleContainer, " > .").concat(expandClassNames.inputContainer), {
301
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-subtler-pressed, #E774BB)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)", "\n\t\t"),
302
+ backgroundColor: "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)"
303
+ }), ".".concat(searchMatchExpandTitleClass, ".").concat(darkModeSearchMatchClass, " > .").concat(expandClassNames.titleContainer, " > .").concat(expandClassNames.inputContainer), _defineProperty({
304
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-pressed, #50253F)", "\n\t\t"),
305
+ backgroundColor: "var(--ds-background-accent-magenta-bolder-pressed, #50253F)"
306
+ }, ".".concat(expandClassNames.titleInput), {
307
+ color: "var(--ds-text-inverse, #FFFFFF)"
308
+ })), ".".concat(searchMatchExpandTitleClass, ".").concat(selectedSearchMatchClass, ".").concat(darkModeSearchMatchClass, " > .").concat(expandClassNames.titleContainer, " > .").concat(expandClassNames.inputContainer), {
309
+ boxShadow: "\n\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-magenta-bolder, #AE4787)", ",\n\t\tinset 0 0 0 5px ", "var(--ds-background-accent-magenta-bolder-hovered, #943D73)", "\n\t\t"),
310
+ backgroundColor: "var(--ds-background-accent-magenta-bolder-hovered, #943D73)"
220
311
  })));
package/dist/types/ui/styles.d.ts CHANGED
@@ -8,3 +8,4 @@ export declare const searchMatchExpandTitleClass = "search-match-expand-title";
8
8
  export declare const findReplaceStyles: import("@emotion/react").SerializedStyles;
9
9
  export declare const findReplaceStylesNewYellow: import("@emotion/react").SerializedStyles;
10
10
  export declare const findReplaceStylesNewMagenta: import("@emotion/react").SerializedStyles;
11
+ export declare const findReplaceStylesNewMagentaNoImportant: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/ui/styles.d.ts CHANGED
@@ -8,3 +8,4 @@ export declare const searchMatchExpandTitleClass = "search-match-expand-title";
8
8
  export declare const findReplaceStyles: import("@emotion/react").SerializedStyles;
9
9
  export declare const findReplaceStylesNewYellow: import("@emotion/react").SerializedStyles;
10
10
  export declare const findReplaceStylesNewMagenta: import("@emotion/react").SerializedStyles;
11
+ export declare const findReplaceStylesNewMagentaNoImportant: import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-find-replace",
3
- "version": "3.1.1",
3
+ "version": "3.1.3",
4
4
  "description": "find replace plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -48,8 +48,8 @@
48
48
  "@atlaskit/primitives": "^14.10.0",
49
49
  "@atlaskit/textfield": "^8.0.0",
50
50
  "@atlaskit/theme": "^19.0.0",
51
- "@atlaskit/tmp-editor-statsig": "^9.1.0",
52
- "@atlaskit/tokens": "^5.4.0",
51
+ "@atlaskit/tmp-editor-statsig": "^9.4.0",
52
+ "@atlaskit/tokens": "^5.5.0",
53
53
  "@atlaskit/tooltip": "^20.3.0",
54
54
  "@babel/runtime": "^7.0.0",
55
55
  "@emotion/react": "^11.7.1",