@atlaskit/editor-core 221.1.3 → 221.2.1

package/dist/cjs/ui/Toolbar/ToolbarComponentsWrapper-emotion.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarComponentsWrapperEmotion = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `ToolbarInner.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 toolbarComponentsWrapperEmotionStyles = (0, _react.css)((0, _defineProperty2.default)({
+  display: 'flex'
+}, "@media (max-width: ".concat(_editorSharedStyles.akEditorMobileMaxWidth, "px)"), {
+  justifyContent: 'space-between'
+}));
+var ToolbarComponentsWrapperEmotion = exports.ToolbarComponentsWrapperEmotion = function ToolbarComponentsWrapperEmotion(_ref) {
+  var children = _ref.children,
+    dataVc = _ref['data-vc'];
+  return (0, _react.jsx)("div", {
+    css: toolbarComponentsWrapperEmotionStyles,
+    "data-vc": dataVc
+  }, children);
+};

package/dist/cjs/ui/Toolbar/ToolbarInner.js

@@ -10,22 +10,18 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _ToolbarComponentsWrapperCompiled = require("./ToolbarComponentsWrapper-compiled");
+var _ToolbarComponentsWrapperEmotion = require("./ToolbarComponentsWrapper-emotion");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
- * @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
-var toolbarComponentsWrapper = (0, _react2.css)((0, _defineProperty2.default)({
-  display: 'flex'
-}, "@media (max-width: ".concat(_editorSharedStyles.akEditorMobileMaxWidth, "px)"), {
-  justifyContent: 'space-between'
-}));
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var ToolbarComponentsWrapperMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, _ToolbarComponentsWrapperCompiled.ToolbarComponentsWrapperCompiled, _ToolbarComponentsWrapperEmotion.ToolbarComponentsWrapperEmotion);
 
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -66,8 +62,7 @@ var ToolbarInner = exports.ToolbarInner = /*#__PURE__*/function (_React$Componen
         // Hiding toolbar in SSR until the dependency of screen width is resolved in SSR environment.
         return null;
       }
-      return (0, _react2.jsx)("div", {
-        css: toolbarComponentsWrapper,
+      return /*#__PURE__*/_react.default.createElement(ToolbarComponentsWrapperMigration, {
         "data-vc": "toolbar-inner"
       }, items.map(function (component, key) {
         var element = component({

package/dist/cjs/ui/Toolbar/ToolbarSizeDetectorWrapper-compiled.compiled.css

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

package/dist/cjs/ui/Toolbar/ToolbarSizeDetectorWrapper-compiled.js

@@ -0,0 +1,29 @@
+/* ToolbarSizeDetectorWrapper-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 `ToolbarWithSizeDetector.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.ToolbarSizeDetectorWrapperCompiled = void 0;
+require("./ToolbarSizeDetectorWrapper-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 toolbarSizeDetectorWrapperCompiledStyles = {
+  root: "_1bsb1osq _kqswh2mm"
+};
+var ToolbarSizeDetectorWrapperCompiled = exports.ToolbarSizeDetectorWrapperCompiled = function ToolbarSizeDetectorWrapperCompiled(_ref) {
+  var children = _ref.children,
+    style = _ref.style;
+  return /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: (0, _runtime.ax)([toolbarSizeDetectorWrapperCompiledStyles.root])
+  }, children);
+};

package/dist/cjs/ui/Toolbar/ToolbarSizeDetectorWrapper-emotion.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarSizeDetectorWrapperEmotion = 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 `ToolbarWithSizeDetector.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 toolbarSizeDetectorWrapperEmotionStyles = (0, _react.css)({
+  width: '100%',
+  position: 'relative'
+});
+var ToolbarSizeDetectorWrapperEmotion = exports.ToolbarSizeDetectorWrapperEmotion = function ToolbarSizeDetectorWrapperEmotion(_ref) {
+  var children = _ref.children,
+    style = _ref.style;
+  return (0, _react.jsx)("div", {
+    css: toolbarSizeDetectorWrapperEmotionStyles,
+    style: style
+  }, children);
+};

package/dist/cjs/ui/Toolbar/ToolbarWithSizeDetector.js

@@ -8,27 +8,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.ToolbarWithSizeDetector = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _types = require("@atlaskit/editor-common/types");
+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 _widthDetector = require("@atlaskit/width-detector");
 var _isFullPage = require("../../utils/is-full-page");
 var _hooks = require("./hooks");
 var _Toolbar = require("./Toolbar");
 var _toolbarSize = require("./toolbar-size");
+var _ToolbarSizeDetectorWrapperCompiled = require("./ToolbarSizeDetectorWrapper-compiled");
+var _ToolbarSizeDetectorWrapperEmotion = require("./ToolbarSizeDetectorWrapper-emotion");
 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); }
-/**
- * @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
-
-var toolbar = (0, _react2.css)({
-  width: '100%',
-  position: 'relative'
-});
+var ToolbarSizeDetectorWrapperMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, _ToolbarSizeDetectorWrapperCompiled.ToolbarSizeDetectorWrapperCompiled, _ToolbarSizeDetectorWrapperEmotion.ToolbarSizeDetectorWrapperEmotion);
 var ToolbarWithSizeDetector = exports.ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
   var ref = _react.default.useRef(null);
   var _React$useState = _react.default.useState(undefined),
@@ -54,14 +49,21 @@ var ToolbarWithSizeDetector = exports.ToolbarWithSizeDetector = function Toolbar
       return isPreviewPanelResponsivenessEnabled ? 'fit-content' : '254px';
     }
   }, [props.appearance, props.hasMinWidth, props.twoLineEditorToolbar]);
-  return (0, _react2.jsx)("div", {
-    css: toolbar,
-    style: {
+  var memoizedWrapperStyle = (0, _react.useMemo)(function () {
+    return {
       minWidth: minWidthValue
-    }
-  }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
+    };
+  }, [minWidthValue]);
+  var wrapperStyle = (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true) ? memoizedWrapperStyle : {
+    minWidth: minWidthValue
+  };
+  return /*#__PURE__*/_react.default.createElement(ToolbarSizeDetectorWrapperMigration
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- minWidth is computed dynamically from props.hasMinWidth, props.appearance, props.twoLineEditorToolbar, and the platform_editor_preview_panel_responsiveness experiment, so it cannot be expressed as a static css value.
+  , {
+    style: wrapperStyle
+  }, /*#__PURE__*/_react.default.createElement(_widthDetector.WidthObserver, {
     setWidth: setWidth
-  }), props.editorView && toolbarSize ? (0, _react2.jsx)(_Toolbar.Toolbar, {
+  }), props.editorView && toolbarSize ? /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, {
     toolbarSize: toolbarSize,
     items: props.items,
     editorView: props.editorView,
@@ -77,7 +79,7 @@ var ToolbarWithSizeDetector = exports.ToolbarWithSizeDetector = function Toolbar
     containerElement: props.containerElement,
     hasMinWidth: props.hasMinWidth,
     twoLineEditorToolbar: props.twoLineEditorToolbar
-  }) : (0, _react2.jsx)("div", {
+  }) : /*#__PURE__*/_react.default.createElement("div", {
     ref: ref
   }));
 };

package/dist/cjs/version-wrapper.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-var version = exports.version = "221.1.2";
+var version = exports.version = "221.2.0";

package/dist/es2019/ui/Appearance/Comment/FixedToolbar-compiled.compiled.css

@@ -0,0 +1,20 @@
+
+._2rko12c2{border-radius:var(--ds-radius-medium,6px) var(--ds-radius-medium,6px) 0 0}
+._2rko15b0{border-radius:var(--ds-radius-xlarge,9pt) var(--ds-radius-xlarge,9pt) 0 0}
+._2rko1cku{border-radius:var(--ds-radius-small,3px) var(--ds-radius-small,3px) 0 0}._10ytglyw.show-keyline{box-shadow:none}
+._16qsglyw{box-shadow:none}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._1cuzidpf .block-type-btn{padding-left:0}
+._1e0c1txw{display:flex}
+._1khpidpf >div>div:first-of-type:not(style){margin-left:0}
+._3pwj1osq span svg{max-width:100%}
+._4cvr1h6o{align-items:center}
+._4t3i1wug{height:auto}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._kqswh2mm{position:relative}
+._lg5oidpf >div>style:first-of-type+*{margin-left:0}
+._n3tdidpf{padding-bottom:0}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+@media (max-width:490px){._1q27esu3>div>div:first-of-type>div:nth-of-type(2){justify-content:flex-end}._16ec1txw>div>div:first-of-type>div:nth-of-type(2){display:flex}._1uq61sxn>div{flex-direction:column-reverse}._cnpmh9n0>div{align-items:end}._1djy1txw>div{display:flex}._17mgesu3>div{justify-content:flex-end}}

package/dist/es2019/ui/Appearance/Comment/FixedToolbar-compiled.js

@@ -0,0 +1,26 @@
+/* FixedToolbar-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 `Toolbar.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import "./FixedToolbar-compiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
+const fixedToolbarCompiledStyles = {
+  mainToolbarWrapper: "_kqswh2mm _4cvr1h6o _ca0qu2gc _u5f3u2gc _n3tdidpf _19bvv47k _1e0c1txw _4t3i1wug _bfhkvuon _16qsglyw _1khpidpf _lg5oidpf _1cuzidpf",
+  mainToolbarWithoutLeftPadding: "_ca0qu2gc _u5f3u2gc _n3tdidpf _19bvu2gc",
+  mainToolbarTwoLine: "_1uq61sxn _cnpmh9n0 _1djy1txw _17mgesu3 _1q27esu3 _16ec1txw",
+  mainToolbarWrapperVisualRefresh: "_3pwj1osq",
+  mainToolbarWithRadius: "_2rko1cku",
+  mainToolbarRadius: "_2rko12c2",
+  editorModernisationToolbar: "_2rko15b0 _10ytglyw"
+};
+export const FixedToolbarCompiled = props => /*#__PURE__*/React.createElement("div", {
+  "data-testid": "ak-editor-main-toolbar",
+  className: ax([fixedToolbarCompiledStyles.mainToolbarWrapper, props.twoLineEditorToolbar && fixedToolbarCompiledStyles.mainToolbarTwoLine, fixedToolbarCompiledStyles.mainToolbarWrapperVisualRefresh, props.isNewToolbarEnabled && fixedToolbarCompiledStyles.mainToolbarWithoutLeftPadding, !expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && fg('platform_editor_comments_border_radius') && fixedToolbarCompiledStyles.mainToolbarWithRadius, expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && fixedToolbarCompiledStyles.mainToolbarRadius, props.isEditorModernisationEnabled && fixedToolbarCompiledStyles.editorModernisationToolbar])
+}, props.children);

package/dist/es2019/ui/Appearance/Comment/FixedToolbar-emotion.js

@@ -0,0 +1,91 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `Toolbar.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
+import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
+const mainToolbarWrapperStyleNew = css({
+  position: 'relative',
+  alignItems: 'center',
+  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0`,
+  display: 'flex',
+  height: 'auto',
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  boxShadow: 'none',
+  paddingLeft: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:first-of-type:not(style), > style:first-of-type + *': {
+      marginLeft: 0
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.block-type-btn': {
+    paddingLeft: 0
+  }
+});
+
+/** keep default padding for entire toolbar */
+const mainToolbarWithoutLeftPadding = css({
+  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0`
+});
+const mainToolbarTwoLineStylesNew = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& > div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+      flexDirection: 'column-reverse',
+      alignItems: 'end',
+      display: 'flex',
+      justifyContent: 'flex-end'
+    },
+    /* make this more explicit for a toolbar */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:first-of-type': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+        '> div:nth-of-type(2)': {
+          justifyContent: 'flex-end',
+          display: 'flex'
+        }
+      }
+    }
+  }
+});
+const mainToolbarWrapperStylesVisualRefresh = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'span svg': {
+    maxWidth: '100%'
+  }
+});
+const mainToolbarWithRadiusStyle = css({
+  borderRadius: `${"var(--ds-radius-small, 3px)"} ${"var(--ds-radius-small, 3px)"} 0 0`
+});
+const mainToolbarRadius = css({
+  borderRadius: `${"var(--ds-radius-medium, 6px)"} ${"var(--ds-radius-medium, 6px)"} 0 0`
+});
+const editorModernisationToolbarStyle = css({
+  borderRadius: `${"var(--ds-radius-xlarge, 12px)"} ${"var(--ds-radius-xlarge, 12px)"} 0 0`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.show-keyline': {
+    boxShadow: 'none'
+  }
+});
+export const FixedToolbarEmotion = props =>
+// eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+jsx("div", {
+  css: [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, mainToolbarWrapperStylesVisualRefresh, props.isNewToolbarEnabled && mainToolbarWithoutLeftPadding, !expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && fg('platform_editor_comments_border_radius') && mainToolbarWithRadiusStyle, expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && mainToolbarRadius, props.isEditorModernisationEnabled && editorModernisationToolbarStyle],
+  "data-testid": "ak-editor-main-toolbar"
+}, props.children);

package/dist/es2019/ui/Appearance/Comment/StickyToolbar-compiled.compiled.css

@@ -0,0 +1,25 @@
+
+._2rko12c2{border-radius:var(--ds-radius-medium,6px) var(--ds-radius-medium,6px) 0 0}
+._2rko15b0{border-radius:var(--ds-radius-xlarge,9pt) var(--ds-radius-xlarge,9pt) 0 0}
+._2rko1cku{border-radius:var(--ds-radius-small,3px) var(--ds-radius-small,3px) 0 0}
+._v56416gf{transition:box-shadow .2s ease-in-out}._10ytglyw.show-keyline{box-shadow:none}
+._10ytl2q5.show-keyline{box-shadow:0 2px 0 0 var(--ds-background-accent-gray-subtlest,#f0f1f2)}
+._16qsglyw{box-shadow:none}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._1cuzidpf .block-type-btn{padding-left:0}
+._1e0c1txw{display:flex}
+._1khpidpf >div>div:first-of-type:not(style){margin-left:0}
+._1pbybfng{z-index:500}
+._3pwj1osq span svg{max-width:100%}
+._4cvr1h6o{align-items:center}
+._4t3i1wug{height:auto}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._kqsw1if8{position:sticky}
+._kqswh2mm{position:relative}
+._lg5oidpf >div>style:first-of-type+*{margin-left:0}
+._n3tdidpf{padding-bottom:0}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+@media (max-width:490px){._1q27esu3>div>div:first-of-type>div:nth-of-type(2){justify-content:flex-end}._16ec1txw>div>div:first-of-type>div:nth-of-type(2){display:flex}._1uq61sxn>div{flex-direction:column-reverse}._cnpmh9n0>div{align-items:end}._1djy1txw>div{display:flex}._17mgesu3>div{justify-content:flex-end}}

package/dist/es2019/ui/Appearance/Comment/StickyToolbar-compiled.js

@@ -0,0 +1,51 @@
+/* StickyToolbar-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 `Toolbar.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+import "./StickyToolbar-compiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useEffect, useMemo, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
+const akEditorMenuZIndex = 500;
+const akEditorToolbarKeylineHeight = 2;
+const stickyToolbarCompiledStyles = {
+  mainToolbarWrapper: "_kqswh2mm _4cvr1h6o _ca0qu2gc _u5f3u2gc _n3tdidpf _19bvv47k _1e0c1txw _4t3i1wug _bfhkvuon _16qsglyw _1khpidpf _lg5oidpf _1cuzidpf",
+  mainToolbarWithPadding: "_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc",
+  mainToolbarTwoLine: "_1uq61sxn _cnpmh9n0 _1djy1txw _17mgesu3 _1q27esu3 _16ec1txw",
+  mainToolbarWrapperVisualRefresh: "_3pwj1osq",
+  mainToolbarWithRadius: "_2rko1cku",
+  mainToolbarRadius: "_2rko12c2",
+  editorModernisationToolbar: "_2rko15b0 _10ytglyw",
+  stickyToolbarWrapper: "_v56416gf _kqsw1if8 _n3tdu2gc _1pbybfng _10ytl2q5"
+};
+export const StickyToolbarCompiled = props => {
+  const [top, setTop] = useState(0);
+
+  // ED-15802: if externalToolbarRef is passed in, set top to externalToolbarRef?.current?.clientHeight
+  // else if offsetTop is a number set top to offsetTop
+  // otherwise top is 0 as initial state
+  useEffect(() => {
+    var _props$externalToolba, _props$externalToolba2;
+    if ((_props$externalToolba = props.externalToolbarRef) !== null && _props$externalToolba !== void 0 && (_props$externalToolba2 = _props$externalToolba.current) !== null && _props$externalToolba2 !== void 0 && _props$externalToolba2.clientHeight) {
+      setTop(props.externalToolbarRef.current.clientHeight);
+    } else {
+      setTop(props.offsetTop || 0);
+    }
+  }, [props.externalToolbarRef, props.offsetTop]);
+  const wrapperStyle = useMemo(() => ({
+    top: `${top}px`
+  }), [top]);
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- top is computed dynamically from externalToolbarRef height / offsetTop and cannot be a static css value
+    style: wrapperStyle,
+    "data-testid": "ak-editor-main-toolbar"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax([stickyToolbarCompiledStyles.mainToolbarWrapper, props.twoLineEditorToolbar && stickyToolbarCompiledStyles.mainToolbarTwoLine, stickyToolbarCompiledStyles.mainToolbarWrapperVisualRefresh, stickyToolbarCompiledStyles.stickyToolbarWrapper, props.isNewToolbarEnabled && stickyToolbarCompiledStyles.mainToolbarWithPadding, expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && stickyToolbarCompiledStyles.mainToolbarRadius, !expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && fg('platform_editor_comments_border_radius') && stickyToolbarCompiledStyles.mainToolbarWithRadius, props.isEditorModernisationEnabled && stickyToolbarCompiledStyles.editorModernisationToolbar, 'show-keyline'])
+  }, props.children);
+};

package/dist/es2019/ui/Appearance/Comment/StickyToolbar-emotion.js

@@ -0,0 +1,128 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `Toolbar.tsx`.
+ *
+ * Cleanup: delete this file once the experiment has shipped.
+ */
+
+import { useEffect, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- intentional: emotion fallback for compiled migration
+import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
+const akEditorMenuZIndex = 500;
+const akEditorToolbarKeylineHeight = 2;
+const mainToolbarWrapperStyleNew = css({
+  position: 'relative',
+  alignItems: 'center',
+  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 0`,
+  display: 'flex',
+  height: 'auto',
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
+  boxShadow: 'none',
+  paddingLeft: "var(--ds-space-250, 20px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '> div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:first-of-type:not(style), > style:first-of-type + *': {
+      marginLeft: 0
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.block-type-btn': {
+    paddingLeft: 0
+  }
+});
+const mainToolbarWithPadding = css({
+  padding: `${"var(--ds-space-100, 8px)"}`
+});
+const mainToolbarTwoLineStylesNew = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& > div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+      flexDirection: 'column-reverse',
+      alignItems: 'end',
+      display: 'flex',
+      justifyContent: 'flex-end'
+    },
+    /* make this more explicit for a toolbar */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> div:first-of-type': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+        '> div:nth-of-type(2)': {
+          justifyContent: 'flex-end',
+          display: 'flex'
+        }
+      }
+    }
+  }
+});
+const mainToolbarWrapperStylesVisualRefresh = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  'span svg': {
+    maxWidth: '100%'
+  }
+});
+const mainToolbarWithRadiusStyle = css({
+  borderRadius: `${"var(--ds-radius-small, 3px)"} ${"var(--ds-radius-small, 3px)"} 0 0`
+});
+const mainToolbarRadius = css({
+  borderRadius: `${"var(--ds-radius-medium, 6px)"} ${"var(--ds-radius-medium, 6px)"} 0 0`
+});
+const editorModernisationToolbarStyle = css({
+  borderRadius: `${"var(--ds-radius-xlarge, 12px)"} ${"var(--ds-radius-xlarge, 12px)"} 0 0`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.show-keyline': {
+    boxShadow: 'none'
+  }
+});
+const stickyToolbarWrapperStyleNew = css({
+  position: 'sticky',
+  paddingBottom: "var(--ds-space-100, 8px)",
+  zIndex: akEditorMenuZIndex,
+  transition: 'box-shadow ease-in-out 0.2s',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '&.show-keyline': {
+    boxShadow: `0 ${akEditorToolbarKeylineHeight}px 0 0 ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"}`
+  }
+});
+export const StickyToolbarEmotion = props => {
+  const [top, setTop] = useState(0);
+
+  // ED-15802: if externalToolbarRef is passed in, set top to externalToolbarRef?.current?.clientHeight
+  // else if offsetTop is a number set top to offsetTop
+  // otherwise top is 0 as initial state
+  useEffect(() => {
+    var _props$externalToolba, _props$externalToolba2;
+    if ((_props$externalToolba = props.externalToolbarRef) !== null && _props$externalToolba !== void 0 && (_props$externalToolba2 = _props$externalToolba.current) !== null && _props$externalToolba2 !== void 0 && _props$externalToolba2.clientHeight) {
+      setTop(props.externalToolbarRef.current.clientHeight);
+    } else {
+      setTop(props.offsetTop || 0);
+    }
+  }, [props.externalToolbarRef, props.offsetTop]);
+  const wrapperStyle = {
+    top: `${top}px`
+  };
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+    jsx("div", {
+      css: [mainToolbarWrapperStyleNew, props.twoLineEditorToolbar && mainToolbarTwoLineStylesNew, mainToolbarWrapperStylesVisualRefresh, stickyToolbarWrapperStyleNew, props.isNewToolbarEnabled && mainToolbarWithPadding, expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && mainToolbarRadius, !expValEquals('platform_editor_comment_editor_border_radius', 'isEnabled', true) && fg('platform_editor_comments_border_radius') && mainToolbarWithRadiusStyle, props.isEditorModernisationEnabled && editorModernisationToolbarStyle]
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- top is computed dynamically from externalToolbarRef height / offsetTop and cannot be a static css value
+      ,
+      style: wrapperStyle,
+      "data-testid": "ak-editor-main-toolbar"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: 'show-keyline'
+    }, props.children)
+  );
+};