@atlaskit/editor-common 116.46.0 → 116.48.0

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 (92) hide show
  1. package/CHANGELOG.md +74 -0
  2. package/afm-cc/tsconfig.json +3 -0
  3. package/afm-products/tsconfig.json +3 -0
  4. package/dist/cjs/element-browser/components/ViewMore.js +1 -1
  5. package/dist/cjs/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js +1 -1
  6. package/dist/cjs/extensions/UnknownMacroPlaceholder.js +1 -1
  7. package/dist/cjs/icons/shared/PanelErrorIcon.js +1 -1
  8. package/dist/cjs/icons/shared/PanelInfoIcon.js +1 -1
  9. package/dist/cjs/icons/shared/PanelNoteIcon.js +1 -1
  10. package/dist/cjs/icons/shared/PanelSuccessIcon.js +1 -1
  11. package/dist/cjs/icons/shared/PanelWarningIcon.js +1 -1
  12. package/dist/cjs/messages/syncBlock.js +30 -0
  13. package/dist/cjs/monitoring/error.js +1 -1
  14. package/dist/cjs/styles/shared/sync-block.js +7 -1
  15. package/dist/cjs/table/NewSortingIcon.js +1 -1
  16. package/dist/cjs/ui/DropList/index.js +1 -1
  17. package/dist/cjs/ui/Layer/index.js +138 -18
  18. package/dist/cjs/ui/Shortcut/index.js +1 -1
  19. package/dist/cjs/ui/Toolbar/ButtonGroup.js +1 -1
  20. package/dist/cjs/ui/Toolbar/DropdownTriggerWrapper.js +1 -1
  21. package/dist/cjs/ui/Toolbar/DropdownWrapper.js +1 -1
  22. package/dist/cjs/ui/Toolbar/ExpandIcon.js +1 -1
  23. package/dist/cjs/ui/Toolbar/Separator.js +1 -1
  24. package/dist/cjs/ui-color/ColorPalette/Palettes/lightBackgroundPaletteTooltipMessages.js +5 -45
  25. package/dist/cjs/ui-color/ColorPalette/Palettes/paletteMessages.js +0 -60
  26. package/dist/cjs/ui-color/ColorPalette/Palettes/panelBackgroundPaletteNew.js +106 -0
  27. package/dist/cjs/ui-color/index.js +7 -7
  28. package/dist/cjs/vanilla-tooltip/index.js +9 -1
  29. package/dist/es2019/element-browser/components/ViewMore.js +1 -1
  30. package/dist/es2019/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js +1 -1
  31. package/dist/es2019/extensions/UnknownMacroPlaceholder.js +1 -1
  32. package/dist/es2019/icons/shared/PanelErrorIcon.js +1 -1
  33. package/dist/es2019/icons/shared/PanelInfoIcon.js +1 -1
  34. package/dist/es2019/icons/shared/PanelNoteIcon.js +1 -1
  35. package/dist/es2019/icons/shared/PanelSuccessIcon.js +1 -1
  36. package/dist/es2019/icons/shared/PanelWarningIcon.js +1 -1
  37. package/dist/es2019/messages/syncBlock.js +30 -0
  38. package/dist/es2019/monitoring/error.js +1 -1
  39. package/dist/es2019/styles/shared/sync-block.js +7 -1
  40. package/dist/es2019/table/NewSortingIcon.js +1 -1
  41. package/dist/es2019/ui/DropList/index.js +1 -1
  42. package/dist/es2019/ui/Layer/index.js +120 -13
  43. package/dist/es2019/ui/Shortcut/index.js +1 -1
  44. package/dist/es2019/ui/Toolbar/ButtonGroup.js +1 -1
  45. package/dist/es2019/ui/Toolbar/DropdownTriggerWrapper.js +1 -1
  46. package/dist/es2019/ui/Toolbar/DropdownWrapper.js +1 -1
  47. package/dist/es2019/ui/Toolbar/ExpandIcon.js +1 -1
  48. package/dist/es2019/ui/Toolbar/Separator.js +1 -1
  49. package/dist/es2019/ui-color/ColorPalette/Palettes/lightBackgroundPaletteTooltipMessages.js +5 -45
  50. package/dist/es2019/ui-color/ColorPalette/Palettes/paletteMessages.js +0 -60
  51. package/dist/es2019/ui-color/ColorPalette/Palettes/panelBackgroundPaletteNew.js +95 -0
  52. package/dist/es2019/ui-color/index.js +1 -1
  53. package/dist/es2019/vanilla-tooltip/index.js +10 -2
  54. package/dist/esm/element-browser/components/ViewMore.js +1 -1
  55. package/dist/esm/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js +1 -1
  56. package/dist/esm/extensions/UnknownMacroPlaceholder.js +1 -1
  57. package/dist/esm/icons/shared/PanelErrorIcon.js +1 -1
  58. package/dist/esm/icons/shared/PanelInfoIcon.js +1 -1
  59. package/dist/esm/icons/shared/PanelNoteIcon.js +1 -1
  60. package/dist/esm/icons/shared/PanelSuccessIcon.js +1 -1
  61. package/dist/esm/icons/shared/PanelWarningIcon.js +1 -1
  62. package/dist/esm/messages/syncBlock.js +30 -0
  63. package/dist/esm/monitoring/error.js +1 -1
  64. package/dist/esm/styles/shared/sync-block.js +7 -1
  65. package/dist/esm/table/NewSortingIcon.js +1 -1
  66. package/dist/esm/ui/DropList/index.js +1 -1
  67. package/dist/esm/ui/Layer/index.js +138 -19
  68. package/dist/esm/ui/Shortcut/index.js +1 -1
  69. package/dist/esm/ui/Toolbar/ButtonGroup.js +1 -1
  70. package/dist/esm/ui/Toolbar/DropdownTriggerWrapper.js +1 -1
  71. package/dist/esm/ui/Toolbar/DropdownWrapper.js +1 -1
  72. package/dist/esm/ui/Toolbar/ExpandIcon.js +1 -1
  73. package/dist/esm/ui/Toolbar/Separator.js +1 -1
  74. package/dist/esm/ui-color/ColorPalette/Palettes/lightBackgroundPaletteTooltipMessages.js +5 -45
  75. package/dist/esm/ui-color/ColorPalette/Palettes/paletteMessages.js +0 -60
  76. package/dist/esm/ui-color/ColorPalette/Palettes/panelBackgroundPaletteNew.js +99 -0
  77. package/dist/esm/ui-color/index.js +1 -1
  78. package/dist/esm/vanilla-tooltip/index.js +10 -2
  79. package/dist/types/messages/syncBlock.d.ts +30 -0
  80. package/dist/types/styles/shared/sync-block.d.ts +6 -5
  81. package/dist/types/ui/Layer/index.d.ts +3 -26
  82. package/dist/types/ui/Layer/internal/helpers.d.ts +1 -1
  83. package/dist/types/ui-color/ColorPalette/Palettes/lightBackgroundPaletteTooltipMessages.d.ts +1 -41
  84. package/dist/types/ui-color/ColorPalette/Palettes/paletteMessages.d.ts +0 -60
  85. package/dist/types/ui-color/ColorPalette/Palettes/panelBackgroundPaletteNew.d.ts +2 -0
  86. package/dist/types/ui-color/index.d.ts +1 -1
  87. package/package.json +12 -4
  88. package/ui-color/ColorPalette/panelBackgroundPaletteNew/package.json +10 -0
  89. package/dist/cjs/ui-color/ColorPalette/Palettes/cellBackgroundColorPaletteNew.js +0 -28
  90. package/dist/es2019/ui-color/ColorPalette/Palettes/cellBackgroundColorPaletteNew.js +0 -21
  91. package/dist/esm/ui-color/ColorPalette/Palettes/cellBackgroundColorPaletteNew.js +0 -21
  92. package/dist/types/ui-color/ColorPalette/Palettes/cellBackgroundColorPaletteNew.d.ts +0 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,79 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 116.48.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`ff72ee885c82b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff72ee885c82b) -
8
+ [ux] Prompt users with a feedback flag after undoing or deleting a synced block, and open the
9
+ product feedback collector only when they choose Give feedback. Keep the prompt UI and scoped
10
+ action alignment in the synced block plugin while preserving Flag's built-in action buttons.
11
+
12
+ Products check and persist the prompt allowance around the shared flag lifecycle:
13
+
14
+ ```ts
15
+ {
16
+ shouldShowFeedbackPrompt: () => !feedbackStorage.has('prompt-shown'),
17
+ onFeedbackPromptShown: () => feedbackStorage.set('prompt-shown', true),
18
+ onGiveFeedback: (context) => openFeedbackCollector(context),
19
+ }
20
+ ```
21
+
22
+ - [`17014b0e91a7f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/17014b0e91a7f) -
23
+ Update the synced locations activation empty state
24
+ - [`7cecf41634d18`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7cecf41634d18) -
25
+ Revert the lime, orange, and magenta table cell background color options.
26
+
27
+ ### Patch Changes
28
+
29
+ - [`6902b31db1608`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6902b31db1608) -
30
+ Consolidate direct Popper.js callers behind `@atlaskit/popper` compatibility entry points and
31
+ feature-gated consumer adapters.
32
+
33
+ `@atlaskit/popper` now exposes compatibility entry points so existing direct `popper.js` /
34
+ `react-popper` callers can move their dependency ownership onto `@atlaskit/popper` without a full
35
+ rewrite:
36
+ - `@atlaskit/popper/react-popper` re-exports the React `usePopper` hook and `Manager` / `Popper` /
37
+ `Reference` render-prop components.
38
+ - `@atlaskit/popper/unsafe-imperative` re-exports the raw Popper.js v2 `createPopper` for
39
+ non-React, imperative callers. This is an escape hatch for existing callers only. Do not use it
40
+ for new code; build new overlays on `@atlaskit/top-layer` instead.
41
+
42
+ ```ts
43
+ // Imperative callers (migrating away from a direct `@popperjs/core` / `popper.js` import):
44
+ import { createPopper } from '@atlaskit/popper/unsafe-imperative';
45
+
46
+ const instance = createPopper(referenceElement, popperElement, {
47
+ placement: 'bottom-start',
48
+ });
49
+
50
+ // React callers (migrating away from a direct `react-popper` import):
51
+ import { usePopper } from '@atlaskit/popper/react-popper';
52
+
53
+ const { styles, attributes } = usePopper(referenceElement, popperElement, {
54
+ placement: 'bottom-start',
55
+ });
56
+ ```
57
+
58
+ - [`04f47b1369740`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/04f47b1369740) -
59
+ Clarify source synced block labels and show more of referenced titles
60
+ - Updated dependencies
61
+
62
+ ## 116.47.0
63
+
64
+ ### Minor Changes
65
+
66
+ - [`7a9ec6f1fa018`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7a9ec6f1fa018) -
67
+ [EDITOR-7592] Add a new panel background color palette with expanded colors behind the lovability
68
+ experiment and patch gate.
69
+
70
+ ### Patch Changes
71
+
72
+ - [`472c37e82078b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/472c37e82078b) -
73
+ [ux] Fixed the source synced block placeholder disappearing after placing the cursor inside an
74
+ empty block and then clicking away from the editor.
75
+ - Updated dependencies
76
+
3
77
  ## 116.46.0
4
78
 
5
79
  ### Minor Changes
@@ -139,6 +139,9 @@
139
139
  {
140
140
  "path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
141
141
  },
142
+ {
143
+ "path": "../../../design-system/popper/afm-cc/tsconfig.json"
144
+ },
142
145
  {
143
146
  "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
144
147
  },
@@ -139,6 +139,9 @@
139
139
  {
140
140
  "path": "../../../platform/feature-flags-react/afm-products/tsconfig.json"
141
141
  },
142
+ {
143
+ "path": "../../../design-system/popper/afm-products/tsconfig.json"
144
+ },
142
145
  {
143
146
  "path": "../../../design-system/primitives/afm-products/tsconfig.json"
144
147
  },
@@ -1,4 +1,4 @@
1
- /* ViewMore.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* ViewMore.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -1,4 +1,4 @@
1
- /* ExtensionFloatingLabel.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* ExtensionFloatingLabel.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _typeof = require("@babel/runtime/helpers/typeof");
@@ -1,4 +1,4 @@
1
- /* UnknownMacroPlaceholder.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* UnknownMacroPlaceholder.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -1,4 +1,4 @@
1
- /* PanelErrorIcon.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* PanelErrorIcon.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _typeof = require("@babel/runtime/helpers/typeof");
@@ -1,4 +1,4 @@
1
- /* PanelInfoIcon.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* PanelInfoIcon.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _typeof = require("@babel/runtime/helpers/typeof");
@@ -1,4 +1,4 @@
1
- /* PanelNoteIcon.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* PanelNoteIcon.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _typeof = require("@babel/runtime/helpers/typeof");
@@ -1,4 +1,4 @@
1
- /* PanelSuccessIcon.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* PanelSuccessIcon.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _typeof = require("@babel/runtime/helpers/typeof");
@@ -1,4 +1,4 @@
1
- /* PanelWarningIcon.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* PanelWarningIcon.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _typeof = require("@babel/runtime/helpers/typeof");
@@ -46,6 +46,11 @@ var syncBlockMessages = exports.syncBlockMessages = (0, _reactIntl.defineMessage
46
46
  defaultMessage: 'Synced block',
47
47
  description: 'Label which appears above the synced block when it is selected'
48
48
  },
49
+ sourceSyncedBlockLabel: {
50
+ id: 'fabric.editor.sourceSyncedBlock.label.text',
51
+ defaultMessage: 'Source synced block',
52
+ description: 'Label which identifies the editable source synced block when it is selected'
53
+ },
49
54
  unsyncedBlockLabel: {
50
55
  id: 'fabric.editor.unsyncedBlock.label.text',
51
56
  defaultMessage: 'Unsynced block',
@@ -206,6 +211,26 @@ var syncBlockMessages = exports.syncBlockMessages = (0, _reactIntl.defineMessage
206
211
  defaultMessage: 'You appear to be offline. Please connect to the internet to create synced content.',
207
212
  description: 'Description in flag which appears when a sync block cannot be created in offline mode'
208
213
  },
214
+ feedbackFlagTitle: {
215
+ id: 'editor-common.messages.syncBlock.feedbackFlagTitle',
216
+ defaultMessage: 'Help us improve Synced blocks',
217
+ description: 'Title of the flag inviting users to give feedback about synced blocks'
218
+ },
219
+ feedbackFlagDescription: {
220
+ id: 'editor-common.messages.syncBlock.feedbackFlagDescription',
221
+ defaultMessage: 'We’d love your feedback. This quick survey should take less than a minute.',
222
+ description: 'Description of the flag inviting users to give feedback about synced blocks'
223
+ },
224
+ feedbackFlagGiveFeedback: {
225
+ id: 'editor-common.messages.syncBlock.feedbackFlagGiveFeedback',
226
+ defaultMessage: 'Give feedback',
227
+ description: 'Action that opens the synced blocks feedback collector'
228
+ },
229
+ feedbackFlagNoThanks: {
230
+ id: 'editor-common.messages.syncBlock.feedbackFlagNoThanks',
231
+ defaultMessage: 'No thanks',
232
+ description: 'Action that dismisses the synced blocks feedback invitation'
233
+ },
209
234
  loadingSyncedContent: {
210
235
  id: 'fabric.editor.syncedBlockLoadingSyncedContent',
211
236
  defaultMessage: 'Loading synced content',
@@ -321,6 +346,11 @@ var syncBlockMessages = exports.syncBlockMessages = (0, _reactIntl.defineMessage
321
346
  defaultMessage: 'Copy and paste synced blocks to reuse in other locations.',
322
347
  description: 'Message shown in the synced location dropdown menu when no shared locations are found'
323
348
  },
349
+ syncedLocationDropdownActivationNoResults: {
350
+ id: 'editor-common.messages.syncBlock.syncedLocationDropdownActivationNoResults',
351
+ defaultMessage: 'To reuse content, copy and paste this block to sync to other locations',
352
+ description: 'Instruction shown in the activation synced locations dropdown when a synced block has no references. It explains how to create the first reference.'
353
+ },
324
354
  syncedLocationDropdownLearnMoreLink: {
325
355
  id: 'fabric.editor.syncedLocationDropdownLearnMoreLink',
326
356
  defaultMessage: 'Learn more about synced blocks',
@@ -28,7 +28,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
28
28
  var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
29
29
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
30
30
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
31
- var packageVersion = "116.45.0";
31
+ var packageVersion = "116.47.0";
32
32
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
33
33
  // Remove URL as it has UGC
34
34
  // Ignored via go/ees007
@@ -20,7 +20,13 @@ var BodiedSyncBlockSharedCssClassName = exports.BodiedSyncBlockSharedCssClassNam
20
20
  prefix: bodiedPrefix,
21
21
  renderer: "".concat(bodiedPrefix, "__renderer"),
22
22
  content: "".concat(bodiedPrefix, "__content"),
23
- selectionInside: "".concat(bodiedPrefix, "__selection_inside")
23
+ selectionInside: "".concat(bodiedPrefix, "__selection_inside"),
24
+ // Applied by the node view when the block holds nothing but a single empty paragraph.
25
+ // Emptiness is derived from the ProseMirror document rather than the rendered DOM, because
26
+ // decorations (for example the selection marker's cursor widget) and ProseMirror's own
27
+ // separator/trailing-break hack nodes are injected as children of that paragraph and make
28
+ // DOM-shape heuristics unreliable. See EDITOR-8327.
29
+ empty: "".concat(bodiedPrefix, "__empty")
24
30
  };
25
31
 
26
32
  // Constant labelClassName value here has been inlined in css from EditorContentContainer, if you need to make
@@ -1,4 +1,4 @@
1
- /* NewSortingIcon.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* NewSortingIcon.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _typeof = require("@babel/runtime/helpers/typeof");
@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
24
24
  * @jsx jsx
25
25
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
26
26
  var packageName = "@atlaskit/editor-common";
27
- var packageVersion = "116.45.0";
27
+ var packageVersion = "116.47.0";
28
28
  var halfFocusRing = 1;
29
29
  var dropOffset = '0, 8';
30
30
  var fadeIn = (0, _react2.keyframes)({
@@ -5,7 +5,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = void 0;
8
+ exports.default = Layer;
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
10
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
10
11
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
11
12
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -15,6 +16,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
15
16
  var _react = _interopRequireWildcard(require("react"));
16
17
  var _popper = _interopRequireDefault(require("popper.js"));
17
18
  var _rafSchd = _interopRequireDefault(require("raf-schd"));
19
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
20
+ var _popper2 = require("@atlaskit/popper/popper");
18
21
  var _helpers = require("./internal/helpers");
19
22
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
20
23
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -36,14 +39,26 @@ var defaultState = {
36
39
  originalHeight: null,
37
40
  maxHeight: null
38
41
  };
42
+ function defaultOnPositioned() {}
43
+ var defaultProps = {
44
+ boundariesElement: 'viewport',
45
+ children: null,
46
+ content: null,
47
+ offset: '0, 0',
48
+ position: 'right middle',
49
+ zIndex: 400,
50
+ lockScroll: false,
51
+ isAlwaysFixed: false,
52
+ onPositioned: defaultOnPositioned
53
+ };
39
54
 
40
55
  // Ignored via go/ees005
41
56
  // eslint-disable-next-line @repo/internal/react/no-class-components
42
- var Layer = exports.default = /*#__PURE__*/function (_Component) {
43
- function Layer(props) {
57
+ var LegacyLayer = /*#__PURE__*/function (_Component) {
58
+ function LegacyLayer(props) {
44
59
  var _this;
45
- (0, _classCallCheck2.default)(this, Layer);
46
- _this = _callSuper(this, Layer, [props]);
60
+ (0, _classCallCheck2.default)(this, LegacyLayer);
61
+ _this = _callSuper(this, LegacyLayer, [props]);
47
62
  (0, _defineProperty2.default)(_this, "targetRef", /*#__PURE__*/_react.default.createRef());
48
63
  (0, _defineProperty2.default)(_this, "contentRef", /*#__PURE__*/_react.default.createRef());
49
64
  (0, _defineProperty2.default)(_this, "extractStyles", function (state) {
@@ -68,8 +83,8 @@ var Layer = exports.default = /*#__PURE__*/function (_Component) {
68
83
  _this.extractStyles = (0, _rafSchd.default)(_this.extractStyles.bind(_this));
69
84
  return _this;
70
85
  }
71
- (0, _inherits2.default)(Layer, _Component);
72
- return (0, _createClass2.default)(Layer, [{
86
+ (0, _inherits2.default)(LegacyLayer, _Component);
87
+ return (0, _createClass2.default)(LegacyLayer, [{
73
88
  key: "componentDidMount",
74
89
  value: function componentDidMount() {
75
90
  this.applyPopper(this.props);
@@ -199,14 +214,119 @@ var Layer = exports.default = /*#__PURE__*/function (_Component) {
199
214
  }]);
200
215
  }(_react.Component);
201
216
  // working with extract-react-types
202
- (0, _defineProperty2.default)(Layer, "defaultProps", {
203
- boundariesElement: 'viewport',
204
- children: null,
205
- content: null,
206
- offset: '0, 0',
207
- position: 'right middle',
208
- zIndex: 400,
209
- lockScroll: false,
210
- isAlwaysFixed: false,
211
- onPositioned: function onPositioned() {}
212
- });
217
+ (0, _defineProperty2.default)(LegacyLayer, "defaultProps", defaultProps);
218
+ function parseOffset(_ref) {
219
+ var offset = _ref.offset;
220
+ var _offset$split = offset.split(','),
221
+ _offset$split2 = (0, _slicedToArray2.default)(_offset$split, 2),
222
+ rawSkidding = _offset$split2[0],
223
+ rawDistance = _offset$split2[1];
224
+ var skidding = Number.parseFloat(rawSkidding);
225
+ var distance = Number.parseFloat(rawDistance);
226
+ return [Number.isFinite(skidding) ? skidding : 0, Number.isFinite(distance) ? distance : 0];
227
+ }
228
+ var popperInteropModifiers = [{
229
+ name: 'flip',
230
+ enabled: false
231
+ }, {
232
+ name: 'preventOverflow',
233
+ enabled: false
234
+ }, {
235
+ name: 'hide',
236
+ enabled: false
237
+ }];
238
+ function usePopperInteropModifiers(_ref2) {
239
+ var onPositioned = _ref2.onPositioned;
240
+ var onPositionedRef = (0, _react.useRef)(onPositioned);
241
+ var hasPositionedRef = (0, _react.useRef)(false);
242
+ (0, _react.useLayoutEffect)(function () {
243
+ onPositionedRef.current = onPositioned;
244
+ }, [onPositioned]);
245
+ return (0, _react.useMemo)(function () {
246
+ return [].concat(popperInteropModifiers, [{
247
+ name: 'editorLayerFirstPositioned',
248
+ enabled: true,
249
+ // React Popper commits calculated styles in `write`; the legacy callback ran afterwards.
250
+ phase: 'afterWrite',
251
+ fn: function fn() {
252
+ if (hasPositionedRef.current) {
253
+ return;
254
+ }
255
+ hasPositionedRef.current = true;
256
+ onPositionedRef.current();
257
+ }
258
+ }]);
259
+ }, []);
260
+ }
261
+ function PopperInterop(_ref3) {
262
+ var children = _ref3.children,
263
+ content = _ref3.content,
264
+ offset = _ref3.offset,
265
+ onPositioned = _ref3.onPositioned,
266
+ position = _ref3.position,
267
+ strategy = _ref3.strategy;
268
+ var targetRef = (0, _react.useRef)(null);
269
+ var _useState = (0, _react.useState)(null),
270
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
271
+ referenceElement = _useState2[0],
272
+ setReferenceElement = _useState2[1];
273
+ var modifiers = usePopperInteropModifiers({
274
+ onPositioned: onPositioned
275
+ });
276
+ // Popper v2 compares the offset prop by reference, so memoise to avoid re-running positioning every render.
277
+ var parsedOffset = (0, _react.useMemo)(function () {
278
+ return parseOffset({
279
+ offset: offset
280
+ });
281
+ }, [offset]);
282
+ (0, _react.useLayoutEffect)(function () {
283
+ var _targetRef$current;
284
+ var actualTarget = (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.children[0];
285
+ setReferenceElement(actualTarget instanceof HTMLElement ? actualTarget : null);
286
+ }, [children]);
287
+ return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
288
+ ref: targetRef
289
+ }, children), content && referenceElement ? /*#__PURE__*/_react.default.createElement(_popper2.Popper, {
290
+ modifiers: modifiers,
291
+ offset: parsedOffset,
292
+ placement: (0, _helpers.positionPropToPopperPosition)(position),
293
+ referenceElement: referenceElement,
294
+ strategy: strategy
295
+ }, function (_ref4) {
296
+ var ref = _ref4.ref,
297
+ style = _ref4.style;
298
+ return /*#__PURE__*/_react.default.createElement("div", {
299
+ ref: ref,
300
+ style: style
301
+ }, content);
302
+ }) : /*#__PURE__*/_react.default.createElement("div", null));
303
+ }
304
+
305
+ /** Selects the reversible Popper v1 or ADS wrapper implementation. */
306
+ function Layer(_ref5) {
307
+ var _ref5$children = _ref5.children,
308
+ children = _ref5$children === void 0 ? defaultProps.children : _ref5$children,
309
+ _ref5$content = _ref5.content,
310
+ content = _ref5$content === void 0 ? defaultProps.content : _ref5$content,
311
+ _ref5$offset = _ref5.offset,
312
+ offset = _ref5$offset === void 0 ? defaultProps.offset : _ref5$offset,
313
+ _ref5$onPositioned = _ref5.onPositioned,
314
+ onPositioned = _ref5$onPositioned === void 0 ? defaultProps.onPositioned : _ref5$onPositioned,
315
+ _ref5$position = _ref5.position,
316
+ position = _ref5$position === void 0 ? defaultProps.position : _ref5$position;
317
+ if ((0, _platformFeatureFlags.fg)('platform-dst-popper-consolidation')) {
318
+ return /*#__PURE__*/_react.default.createElement(PopperInterop, {
319
+ content: content,
320
+ offset: offset,
321
+ onPositioned: onPositioned,
322
+ position: position,
323
+ strategy: "absolute"
324
+ }, children);
325
+ }
326
+ return /*#__PURE__*/_react.default.createElement(LegacyLayer, {
327
+ content: content,
328
+ offset: offset,
329
+ onPositioned: onPositioned,
330
+ position: position
331
+ }, children);
332
+ }
@@ -1,4 +1,4 @@
1
- /* index.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* index.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -1,4 +1,4 @@
1
- /* ButtonGroup.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* ButtonGroup.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -1,4 +1,4 @@
1
- /* DropdownTriggerWrapper.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* DropdownTriggerWrapper.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -1,4 +1,4 @@
1
- /* DropdownWrapper.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* DropdownWrapper.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -1,4 +1,4 @@
1
- /* ExpandIcon.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* ExpandIcon.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -1,4 +1,4 @@
1
- /* Separator.tsx generated by @compiled/babel-plugin v0.40.0 */
1
+ /* Separator.tsx generated by @compiled/babel-plugin v2.0.0 */
2
2
  "use strict";
3
3
 
4
4
  var _typeof = require("@babel/runtime/helpers/typeof");
@@ -66,6 +66,11 @@ var lightBackgroundPaletteTooltipMessages = exports.lightBackgroundPaletteToolti
66
66
  defaultMessage: 'Bold yellow',
67
67
  description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold yellow color option.'
68
68
  },
69
+ '#EFDD4E': {
70
+ id: 'fabric.theme.bold-yellow-new',
71
+ defaultMessage: 'Bold yellow',
72
+ description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold yellow color option.'
73
+ },
69
74
  '#FFEBE6': {
70
75
  id: 'fabric.theme.subtle-red',
71
76
  defaultMessage: 'Subtle red',
@@ -110,50 +115,5 @@ var lightBackgroundPaletteTooltipMessages = exports.lightBackgroundPaletteToolti
110
115
  id: 'fabric.theme.bold-gray',
111
116
  defaultMessage: 'Bold gray',
112
117
  description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold gray color option.'
113
- },
114
- '#EFFFD6': {
115
- id: 'fabric.theme.subtle-lime',
116
- defaultMessage: 'Subtle lime',
117
- description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the subtle lime color option.'
118
- },
119
- '#D3F1A7': {
120
- id: 'fabric.theme.lime',
121
- defaultMessage: 'Lime',
122
- description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the lime color option.'
123
- },
124
- '#BDE97C': {
125
- id: 'fabric.theme.bold-lime',
126
- defaultMessage: 'Bold lime',
127
- description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold lime color option.'
128
- },
129
- '#FFF5DB': {
130
- id: 'fabric.theme.subtle-orange',
131
- defaultMessage: 'Subtle orange',
132
- description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the subtle orange color option.'
133
- },
134
- '#FCE4A6': {
135
- id: 'fabric.theme.orange',
136
- defaultMessage: 'Orange',
137
- description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the orange color option.'
138
- },
139
- '#FBD779': {
140
- id: 'fabric.theme.bold-orange',
141
- defaultMessage: 'Bold orange',
142
- description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold orange color option.'
143
- },
144
- '#FFECF8': {
145
- id: 'fabric.theme.subtle-magenta',
146
- defaultMessage: 'Subtle magenta',
147
- description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the subtle magenta color option.'
148
- },
149
- '#FDD0EC': {
150
- id: 'fabric.theme.magenta',
151
- defaultMessage: 'Magenta',
152
- description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the magenta color option.'
153
- },
154
- '#FCB6E1': {
155
- id: 'fabric.theme.bold-magenta',
156
- defaultMessage: 'Bold magenta',
157
- description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold magenta color option.'
158
118
  }
159
119
  });
@@ -156,66 +156,6 @@ var _default_1 = (0, _reactIntl.defineMessages)({
156
156
  defaultMessage: 'Bold gray',
157
157
  description: 'Tooltip label for the bold gray color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
158
158
  },
159
- 'subtle-lime': {
160
- id: 'fabric.theme.subtle-lime',
161
- defaultMessage: 'Subtle lime',
162
- description: 'Tooltip label for the subtle lime color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
163
- },
164
- 'bold-lime': {
165
- id: 'fabric.theme.bold-lime',
166
- defaultMessage: 'Bold lime',
167
- description: 'Tooltip label for the bold lime color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
168
- },
169
- 'subtle-orange': {
170
- id: 'fabric.theme.subtle-orange',
171
- defaultMessage: 'Subtle orange',
172
- description: 'Tooltip label for the subtle orange color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
173
- },
174
- 'bold-orange': {
175
- id: 'fabric.theme.bold-orange',
176
- defaultMessage: 'Bold orange',
177
- description: 'Tooltip label for the bold orange color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
178
- },
179
- 'subtle-magenta': {
180
- id: 'fabric.theme.subtle-magenta',
181
- defaultMessage: 'Subtle magenta',
182
- description: 'Tooltip label for the subtle magenta color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
183
- },
184
- 'bold-magenta': {
185
- id: 'fabric.theme.bold-magenta',
186
- defaultMessage: 'Bold magenta',
187
- description: 'Tooltip label for the bold magenta color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
188
- },
189
- 'bold-blue': {
190
- id: 'fabric.theme.bold-blue',
191
- defaultMessage: 'Bold blue',
192
- description: 'Tooltip label for the bold blue color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
193
- },
194
- 'bold-teal': {
195
- id: 'fabric.theme.bold-teal',
196
- defaultMessage: 'Bold teal',
197
- description: 'Tooltip label for the bold teal color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
198
- },
199
- 'bold-green': {
200
- id: 'fabric.theme.bold-green',
201
- defaultMessage: 'Bold green',
202
- description: 'Tooltip label for the bold green color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
203
- },
204
- 'bold-yellow': {
205
- id: 'fabric.theme.bold-yellow',
206
- defaultMessage: 'Bold yellow',
207
- description: 'Tooltip label for the bold yellow color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
208
- },
209
- 'bold-red': {
210
- id: 'fabric.theme.bold-red',
211
- defaultMessage: 'Bold red',
212
- description: 'Tooltip label for the bold red color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
213
- },
214
- 'bold-purple': {
215
- id: 'fabric.theme.bold-purple',
216
- defaultMessage: 'Bold purple',
217
- description: 'Tooltip label for the bold purple color swatch displayed in the editor toolbar color palette when users select text or highlight colors.'
218
- },
219
159
  // Colors only used in highlight palette
220
160
  'no-color': {
221
161
  id: 'fabric.theme.no-color',