@atlaskit/editor-core 219.9.15 → 219.9.17

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-core
 
+## 219.9.17
+
+### Patch Changes
+
+- [`906fe47a3e48f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/906fe47a3e48f) -
+  Migrates MainToolbar and MainToolbarWrapper to compiled CSS
+- [`6d50881d7019e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d50881d7019e) -
+  Migrate composable editor styles
+
+## 219.9.16
+
+### Patch Changes
+
+- [`3b52ed6492f99`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3b52ed6492f99) -
+  Fix layout column blank-space focus for vertical alignment
+- Updated dependencies
+
 ## 219.9.15
 
 ### Patch Changes

package/dist/cjs/composable-editor/core-editor.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +10,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _v = _interopRequireDefault(require("uuid/v4"));
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
@@ -30,12 +30,9 @@ var _useMeasureEditorMountTime = _interopRequireDefault(require("./hooks/useMeas
 var _useMemoEditorProps = _interopRequireDefault(require("./hooks/useMemoEditorProps"));
 var _useProviderFactory = _interopRequireDefault(require("./hooks/useProviderFactory"));
 var _sendDurationAnalytics = _interopRequireDefault(require("./utils/sendDurationAnalytics"));
+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); }
 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; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
-// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 /**
@@ -96,7 +93,7 @@ function Editor(passedProps) {
     }
   }, [onSaveFromProps]);
   var isFullPageAppearance = Boolean(props.appearance && ['full-page', 'full-width'].concat((0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_synced_block', true) ? ['max'] : [])).includes(props.appearance));
-  return (0, _react2.jsx)(_react.Fragment, null, isFullPageAppearance ? (0, _react2.jsx)(_editorInpMetrics.EditorINPMetrics, null) : null, (0, _react2.jsx)(_editorInternal.EditorInternal, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, isFullPageAppearance ? /*#__PURE__*/_react.default.createElement(_editorInpMetrics.EditorINPMetrics, null) : null, /*#__PURE__*/_react.default.createElement(_editorInternal.EditorInternal, {
     props: props,
     handleAnalyticsEvent: handleAnalyticsEvent,
     createAnalyticsEvent: createAnalyticsEvent,
@@ -135,11 +132,11 @@ function CoreEditor(props) {
     };
   }, [props.appearance]);
   var memodEditorFeatureFlags = useMemoEditorFeatureFlags(props.featureFlags);
-  return (0, _react2.jsx)(_analyticsNamespacedContext.FabricEditorAnalyticsContext
+  return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricEditorAnalyticsContext
   // @ts-expect-error Type 'string' is not assignable to type '"editorCore" | "renderer"'.
   , {
     data: data
-  }, (0, _react2.jsx)(Editor
+  }, /*#__PURE__*/_react.default.createElement(Editor
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , (0, _extends2.default)({}, props, {

package/dist/cjs/composable-editor/editor-internal-compiled.compiled.css

@@ -0,0 +1,3 @@
+._1bsb1osq{width:100%}
+._4t3i1osq{height:100%}
+._kqswh2mm{position:relative}

package/dist/cjs/composable-editor/editor-internal-compiled.js

@@ -0,0 +1,27 @@
+/* editor-internal-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+/**
+ * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `editor-internal.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorInternalContainerCompiled = void 0;
+require("./editor-internal-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+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); }
+var editorContainerCompiledStyles = {
+  root: "_kqswh2mm _1bsb1osq _4t3i1osq"
+};
+var EditorInternalContainerCompiled = exports.EditorInternalContainerCompiled = function EditorInternalContainerCompiled(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([editorContainerCompiledStyles.root])
+  }, children);
+};

package/dist/cjs/composable-editor/editor-internal-emotion.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorInternalContainerEmotion = void 0;
+var _react = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `editor-internal.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: emotion fallback for compiled migration
+
+var editorContainerEmotionStyles = (0, _react.css)({
+  position: 'relative',
+  width: '100%',
+  height: '100%'
+});
+var EditorInternalContainerEmotion = exports.EditorInternalContainerEmotion = function EditorInternalContainerEmotion(_ref) {
+  var children = _ref.children;
+  return (0, _react.jsx)("div", {
+    css: editorContainerEmotionStyles
+  }, children);
+};

package/dist/cjs/composable-editor/editor-internal.js

@@ -1,17 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EditorInternal = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _portal = require("@atlaskit/editor-common/portal");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _ErrorBoundary = _interopRequireDefault(require("../create-editor/ErrorBoundary"));
 var _ReactEditorView = _interopRequireDefault(require("../create-editor/ReactEditorView"));
@@ -20,17 +21,15 @@ var _IntlProviderIfMissingWrapper = require("../ui/IntlProviderIfMissingWrapper/
 var _featureFlagsFromProps = require("../utils/feature-flags-from-props");
 var _RenderTracking = require("../utils/performance/components/RenderTracking");
 var _BaseThemeWrapper = require("./BaseThemeWrapper");
+var _editorInternalCompiled = require("./editor-internal-compiled");
+var _editorInternalEmotion = require("./editor-internal-emotion");
 var _getBaseFontSize = require("./utils/getBaseFontSize");
+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); }
 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; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var editorContainerStyles = (0, _react2.css)({
-  position: 'relative',
-  width: '100%',
-  height: '100%'
-});
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var EditorInternalContainerMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, _editorInternalCompiled.EditorInternalContainerCompiled, _editorInternalEmotion.EditorInternalContainerEmotion);
 var DEFAULT_VALUE_PROP_TO_IGNORE = ['defaultValue'];
 
 /**
@@ -68,23 +67,21 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
     nodeViewPortalProviderAPI = _usePortalProvider4[0],
     NodeViewPortalRenderer = _usePortalProvider4[1];
   var propsToIgnore = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? DEFAULT_VALUE_PROP_TO_IGNORE : ['defaultValue'];
-  return (0, _react2.jsx)(_react.Fragment, null, renderTrackingEnabled && (0, _react2.jsx)(_RenderTracking.RenderTracking, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, renderTrackingEnabled && /*#__PURE__*/_react.default.createElement(_RenderTracking.RenderTracking, {
     componentProps: props,
     action: _analytics.ACTION.RE_RENDERED,
     actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
     handleAnalyticsEvent: handleAnalyticsEvent,
     propsToIgnore: propsToIgnore,
     useShallow: useShallow
-  }), (0, _react2.jsx)(_ErrorBoundary.default, {
+  }), /*#__PURE__*/_react.default.createElement(_ErrorBoundary.default, {
     errorTracking: true,
     createAnalyticsEvent: createAnalyticsEvent,
     contextIdentifierProvider: props.contextIdentifierProvider,
     featureFlags: featureFlags
-  }, (0, _react2.jsx)("div", {
-    css: editorContainerStyles
-  }, (0, _react2.jsx)(_EditorContext.default, {
+  }, /*#__PURE__*/_react.default.createElement(EditorInternalContainerMigration, null, /*#__PURE__*/_react.default.createElement(_EditorContext.default, {
     editorActions: editorActions
-  }, (0, _react2.jsx)(_IntlProviderIfMissingWrapper.IntlProviderIfMissingWrapper, null, (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ReactEditorView.default, {
+  }, /*#__PURE__*/_react.default.createElement(_IntlProviderIfMissingWrapper.IntlProviderIfMissingWrapper, null, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReactEditorView.default, {
     editorProps: overriddenEditorProps,
     createAnalyticsEvent: createAnalyticsEvent,
     portalProviderAPI: portalProviderAPI,
@@ -105,9 +102,9 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
         dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
         editorRef = _ref2.editorRef,
         editorAPI = _ref2.editorAPI;
-      return (0, _react2.jsx)(_BaseThemeWrapper.BaseThemeWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_BaseThemeWrapper.BaseThemeWrapper, {
         baseFontSize: (0, _getBaseFontSize.getBaseFontSize)(props.appearance, props.contentMode)
-      }, (0, _react2.jsx)(AppearanceComponent, {
+      }, /*#__PURE__*/_react.default.createElement(AppearanceComponent, {
         innerRef: editorRef,
         editorAPI: editorAPI
         // Ignored via go/ees005
@@ -148,5 +145,5 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
         preset: preset
       }));
     }
-  }), (0, _react2.jsx)(PortalRenderer, null), (0, _react2.jsx)(NodeViewPortalRenderer, null)))))));
+  }), /*#__PURE__*/_react.default.createElement(PortalRenderer, null), /*#__PURE__*/_react.default.createElement(NodeViewPortalRenderer, null)))))));
 });

package/dist/cjs/ui/Appearance/FullPage/FullPageToolbar.js

@@ -12,27 +12,14 @@ var _reactIntl = require("react-intl");
 var _contextPanel = require("@atlaskit/editor-common/context-panel");
 var _messages = require("@atlaskit/editor-common/messages");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ToolbarPortal = require("../../Toolbar/ToolbarPortal");
 var _ToolbarWithSizeDetector = require("../../Toolbar/ToolbarWithSizeDetector");
 var _BeforeWrapper = require("./BeforeWrapper");
 var _CustomToolbarWrapper = require("./CustomToolbarWrapper");
-var _FullPageToolbarCompiled = require("./FullPageToolbar-compiled");
-var _FullPageToolbarEmotion = require("./FullPageToolbar-emotion");
 var _MainToolbar = require("./MainToolbar");
 var _MainToolbarWrapper = require("./MainToolbarWrapper");
 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); }
-var NonCustomToolbarWrapperMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
-  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
-}, _FullPageToolbarCompiled.NonCustomToolbarWrapperCompiled, _FullPageToolbarEmotion.NonCustomToolbarWrapperEmotion);
-var MainToolbarIconBeforeMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
-  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
-}, _FullPageToolbarCompiled.MainToolbarIconBeforeCompiled, _FullPageToolbarEmotion.MainToolbarIconBeforeEmotion);
-var CustomToolbarWrapperMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
-  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
-}, _FullPageToolbarCompiled.CustomToolbarWrapperCompiled, _FullPageToolbarEmotion.CustomToolbarWrapperEmotion);
 var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
   var _props$primaryToolbar, _useToolbarPortal, _props$customPrimaryT;
   var _useState = (0, _react.useState)(false),
@@ -52,7 +39,7 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     ToolbarPortal = _ref.Portal;
   var hasToolbarPortal = ToolbarPortal !== _react.default.Fragment;
   var popupsMountPoint = hasToolbarPortal ? undefined : props.popupsMountPoint;
-  var nonCustomToolbar = /*#__PURE__*/_react.default.createElement(NonCustomToolbarWrapperMigration, null, props.beforeIcon && /*#__PURE__*/_react.default.createElement(MainToolbarIconBeforeMigration, null, props.beforeIcon), /*#__PURE__*/_react.default.createElement(_ToolbarWithSizeDetector.ToolbarWithSizeDetector, {
+  var nonCustomToolbar = /*#__PURE__*/_react.default.createElement(_MainToolbar.NonCustomToolbarWrapperMigration, null, props.beforeIcon && /*#__PURE__*/_react.default.createElement(_MainToolbar.MainToolbarIconBeforeMigration, null, props.beforeIcon), /*#__PURE__*/_react.default.createElement(_ToolbarWithSizeDetector.ToolbarWithSizeDetector, {
     editorView: props.editorView,
     editorActions: props.editorActions,
     eventDispatcher: props.eventDispatcher,
@@ -68,7 +55,7 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     hasMinWidth: props.hasMinWidth,
     twoLineEditorToolbar: twoLineEditorToolbar
   }));
-  var customToolbar = /*#__PURE__*/_react.default.createElement(CustomToolbarWrapperMigration, null, !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? /*#__PURE__*/_react.default.createElement(_BeforeWrapper.BeforePrimaryToolbarWrapper, {
+  var customToolbar = /*#__PURE__*/_react.default.createElement(_MainToolbar.CustomToolbarWrapperMigration, null, !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? /*#__PURE__*/_react.default.createElement(_BeforeWrapper.BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: (_props$customPrimaryT = props.customPrimaryToolbarComponents) === null || _props$customPrimaryT === void 0 ? void 0 : _props$customPrimaryT.before
   }) : null, !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.registerToolbarButton({
     popupsBoundariesElement: props.popupsBoundariesElement,

package/dist/cjs/ui/Appearance/FullPage/MainToolbar-compiled.js

@@ -0,0 +1,46 @@
+/* MainToolbar-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+/**
+ * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `MainToolbar.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NonCustomToolbarWrapperCompiled = exports.MainToolbarIconBeforeCompiled = exports.CustomToolbarWrapperCompiled = void 0;
+require("./MainToolbar-compiled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+
+var nonCustomToolbarWrapperCompiledStyles = {
+  root: "_4cvr1h6o _1e0c1txw _16jlkb7n"
+};
+var NonCustomToolbarWrapperCompiled = exports.NonCustomToolbarWrapperCompiled = function NonCustomToolbarWrapperCompiled(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([nonCustomToolbarWrapperCompiledStyles.root])
+  }, children);
+};
+var customToolbarWrapperCompiledStyles = {
+  root: "_4cvr1h6o _1e0c1txw"
+};
+var CustomToolbarWrapperCompiled = exports.CustomToolbarWrapperCompiled = function CustomToolbarWrapperCompiled(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([customToolbarWrapperCompiledStyles.root])
+  }, children);
+};
+var mainToolbarIconBeforeCompiledStyles = {
+  root: "_19pkpxbi _2hwxpxbi _otyrpxbi _18u0pxbi _4t3ixy5q _1bsbxy5q _mlgzkb7n _tuuhkb7n"
+};
+var MainToolbarIconBeforeCompiled = exports.MainToolbarIconBeforeCompiled = function MainToolbarIconBeforeCompiled(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([mainToolbarIconBeforeCompiledStyles.root])
+  }, children);
+};

package/dist/cjs/ui/Appearance/FullPage/{FullPageToolbar-emotion.js → MainToolbar-emotion.js}

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NonCustomToolbarWrapperEmotion = exports.MainToolbarIconBeforeEmotion = exports.CustomToolbarWrapperEmotion = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 /**
  * @jsxRuntime classic
@@ -14,45 +15,45 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
  */
 /**
  * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
- * Used via `componentWithCondition` in `FullPageToolbar.tsx`.
+ * Used via `componentWithCondition` in `MainToolbar.tsx`.
  *
  * Cleanup: delete this file once the experiment has shipped.
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback; jsx required at runtime for @jsxRuntime classic
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
 
-var nonCustomToolbarWrapperStyle = (0, _react.css)({
+var nonCustomToolbarWrapperEmotionStyles = (0, _react2.css)({
   alignItems: 'center',
   display: 'flex',
   flexGrow: 1
 });
-var mainToolbarIconBeforeStyle = (0, _react.css)((0, _defineProperty2.default)({
-  margin: "var(--ds-space-200, 16px)",
-  height: "var(--ds-space-400, 32px)",
-  width: "var(--ds-space-400, 32px)"
-}, "@media (max-width: ".concat(_editorSharedStyles.akEditorMobileMaxWidth, "px)"), {
-  gridColumn: 1,
-  gridRow: 1
-}));
-var customToolbarWrapperStyle = (0, _react.css)({
-  alignItems: 'center',
-  display: 'flex'
-});
 var NonCustomToolbarWrapperEmotion = exports.NonCustomToolbarWrapperEmotion = function NonCustomToolbarWrapperEmotion(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)("div", {
-    css: nonCustomToolbarWrapperStyle
+  return (0, _react2.jsx)("div", {
+    css: nonCustomToolbarWrapperEmotionStyles
   }, children);
 };
-var MainToolbarIconBeforeEmotion = exports.MainToolbarIconBeforeEmotion = function MainToolbarIconBeforeEmotion(_ref2) {
+var customToolbarWrapperEmotionStyles = (0, _react2.css)({
+  alignItems: 'center',
+  display: 'flex'
+});
+var CustomToolbarWrapperEmotion = exports.CustomToolbarWrapperEmotion = function CustomToolbarWrapperEmotion(_ref2) {
   var children = _ref2.children;
-  return (0, _react.jsx)("div", {
-    css: mainToolbarIconBeforeStyle
+  return (0, _react2.jsx)("div", {
+    css: customToolbarWrapperEmotionStyles
   }, children);
 };
-var CustomToolbarWrapperEmotion = exports.CustomToolbarWrapperEmotion = function CustomToolbarWrapperEmotion(_ref3) {
+var mainToolbarIconBeforeEmotionStyles = (0, _react2.css)((0, _defineProperty2.default)({
+  margin: "var(--ds-space-200, 16px)",
+  height: "var(--ds-space-400, 32px)",
+  width: "var(--ds-space-400, 32px)"
+}, "@media (max-width: ".concat(_editorSharedStyles.akEditorMobileMaxWidth, "px)"), {
+  gridColumn: 1,
+  gridRow: 1
+}));
+var MainToolbarIconBeforeEmotion = exports.MainToolbarIconBeforeEmotion = function MainToolbarIconBeforeEmotion(_ref3) {
   var children = _ref3.children;
-  return (0, _react.jsx)("div", {
-    css: customToolbarWrapperStyle
+  return (0, _react2.jsx)("div", {
+    css: mainToolbarIconBeforeEmotionStyles
   }, children);
 };

package/dist/cjs/ui/Appearance/FullPage/MainToolbar.js

@@ -1,74 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.nonCustomToolbarWrapperStyle = exports.mainToolbarSecondChildStyle = exports.mainToolbarIconBeforeStyle = exports.mainToolbarFirstChildStyle = exports.customToolbarWrapperStyle = exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-/* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766 */
-
+exports.NonCustomToolbarWrapperMigration = exports.MainToolbarIconBeforeMigration = exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = exports.CustomToolbarWrapperMigration = void 0;
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _MainToolbarCompiled = require("./MainToolbar-compiled");
+var _MainToolbarEmotion = require("./MainToolbar-emotion");
 var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var mainToolbarIconBeforeStyle = exports.mainToolbarIconBeforeStyle = (0, _react.css)((0, _defineProperty2.default)({
-  margin: "var(--ds-space-200, 16px)",
-  height: "var(--ds-space-400, 32px)",
-  width: "var(--ds-space-400, 32px)"
-}, "@media (max-width: ".concat(_editorSharedStyles.akEditorMobileMaxWidth, "px)"), {
-  gridColumn: 1,
-  gridRow: 1
-}));
-var mainToolbarFirstChild = (0, _react.css)((0, _defineProperty2.default)({
-  display: 'flex',
-  flexGrow: 1
-}, "@media (max-width: ".concat(_editorSharedStyles.akEditorMobileMaxWidth, "px)"), {
-  gridColumn: 1,
-  gridRow: 1
-}));
-var mainToolbarFirstChildTowLine = function mainToolbarFirstChildTowLine() {
-  var editorToolbarHeight = (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)();
-  return (0, _react.css)((0, _defineProperty2.default)({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
-    flex: '1 1 100%',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: editorToolbarHeight,
-    justifyContent: 'flex-end',
-    minWidth: 'fit-content'
-  }));
-};
-var mainToolbarFirstChildStyle = exports.mainToolbarFirstChildStyle = function mainToolbarFirstChildStyle(twoLineEditorToolbar) {
-  return [mainToolbarFirstChild, twoLineEditorToolbar && mainToolbarFirstChildTowLine];
-};
-var mainToolbarSecondChild = (0, _react.css)({
-  minWidth: 'fit-content'
-});
-var mainToolbarSecondChildTwoLine = function mainToolbarSecondChildTwoLine() {
-  var editorToolbarHeight = (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)();
-  return (0, _react.css)((0, _defineProperty2.default)({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
-    display: 'flex',
-    flexGrow: 1,
-    flex: '1 1 100%',
-    margin: 'auto',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: editorToolbarHeight,
-    minWidth: 0
-  }));
-};
-var mainToolbarSecondChildStyle = exports.mainToolbarSecondChildStyle = function mainToolbarSecondChildStyle(twoLineEditorToolbar) {
-  return [mainToolbarSecondChild, twoLineEditorToolbar && mainToolbarSecondChildTwoLine];
-};
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var nonCustomToolbarWrapperStyle = exports.nonCustomToolbarWrapperStyle = (0, _react.css)({
-  alignItems: 'center',
-  display: 'flex',
-  flexGrow: 1
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var customToolbarWrapperStyle = exports.customToolbarWrapperStyle = (0, _react.css)({
-  alignItems: 'center',
-  display: 'flex'
-});
+var NonCustomToolbarWrapperMigration = exports.NonCustomToolbarWrapperMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, _MainToolbarCompiled.NonCustomToolbarWrapperCompiled, _MainToolbarEmotion.NonCustomToolbarWrapperEmotion);
+var CustomToolbarWrapperMigration = exports.CustomToolbarWrapperMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, _MainToolbarCompiled.CustomToolbarWrapperCompiled, _MainToolbarEmotion.CustomToolbarWrapperEmotion);
+var MainToolbarIconBeforeMigration = exports.MainToolbarIconBeforeMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, _MainToolbarCompiled.MainToolbarIconBeforeCompiled, _MainToolbarEmotion.MainToolbarIconBeforeEmotion);

package/dist/cjs/ui/Appearance/FullPage/MainToolbarWrapper-compiled.compiled.css

@@ -0,0 +1,14 @@
+
+._v56419ab{transition:box-shadow .2s cubic-bezier(.15,1,.3,1)}
+._n7zlia51{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._16qs1nax{box-shadow:var(--ds-shadow-overflow,0 0 8px #1e1f2128,0 0 1px #1e1f211e)}
+._16qsglyw{box-shadow:none}
+._1e0c1txw{display:flex}
+._1krdgrf3 object{height:0!important}
+._1o9zidpf{flex-shrink:0}
+._1pby16oo{z-index:510}
+._3pwj1osq span svg{max-width:100%}
+._4cvr1h6o{align-items:center}
+._4t3i17qo{height:var(--ak-editor-fullpage-toolbar-height)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._kqswh2mm{position:relative}
+@media (max-width:868px){._1s5v1g80{flex-wrap:wrap}._8o38zpre{height:calc(var(--ak-editor-fullpage-toolbar-height)*2)}}

package/dist/cjs/ui/Appearance/FullPage/MainToolbarWrapper-compiled.js

@@ -0,0 +1,35 @@
+/* MainToolbarWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+/**
+ * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `MainToolbarWrapper.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainToolbarWrapperCompiled = void 0;
+require("./MainToolbarWrapper-compiled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+
+var styles = {
+  base: "_v56419ab _n7zlia51 _kqswh2mm _4cvr1h6o _16qsglyw _1pby16oo _1e0c1txw _4t3i17qo _1o9zidpf _bfhkvuon _1krdgrf3",
+  flexibleIconSize: "_3pwj1osq",
+  keyline: "_16qs1nax",
+  twoLine: "_1s5v1g80 _8o38zpre"
+};
+var MainToolbarWrapperCompiled = exports.MainToolbarWrapperCompiled = function MainToolbarWrapperCompiled(_ref) {
+  var showKeyline = _ref.showKeyline,
+    twoLineEditorToolbar = _ref.twoLineEditorToolbar,
+    children = _ref.children,
+    testId = _ref['data-testid'];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
+    className: (0, _runtime.ax)([styles.base, styles.flexibleIconSize, showKeyline && styles.keyline, twoLineEditorToolbar && styles.twoLine])
+  }, children);
+};

package/dist/cjs/ui/Appearance/FullPage/MainToolbarWrapper-emotion.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainToolbarWrapperEmotion = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _MainToolbar = require("./MainToolbar");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `MainToolbarWrapper.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
+
+var baseToolbarStyles = (0, _react2.css)({
+  position: 'relative',
+  alignItems: 'center',
+  boxShadow: 'none',
+  borderBottom: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  transition: "box-shadow 200ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
+  display: 'flex',
+  height: 'var(--ak-editor-fullpage-toolbar-height)',
+  flexShrink: 0,
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& object': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    height: '0 !important'
+  }
+});
+var flexibleIconSize = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& span svg': {
+    maxWidth: '100%'
+  }
+});
+var mainToolbarWithKeyline = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #1E1F2128, 0px 0px 1px #1E1F211e)"
+});
+var mainToolbarTwoLineStyle = (0, _react2.css)((0, _defineProperty2.default)({}, "@media (max-width: ".concat(_MainToolbar.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
+  flexWrap: 'wrap',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  height: "calc(var(--ak-editor-fullpage-toolbar-height) * 2)"
+}));
+var MainToolbarWrapperEmotion = exports.MainToolbarWrapperEmotion = function MainToolbarWrapperEmotion(_ref) {
+  var showKeyline = _ref.showKeyline,
+    twoLineEditorToolbar = _ref.twoLineEditorToolbar,
+    children = _ref.children,
+    testId = _ref['data-testid'];
+  return (0, _react2.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [baseToolbarStyles, flexibleIconSize, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle],
+    "data-testid": testId
+  }, children);
+};