@atlaskit/editor-core 219.9.4 → 219.9.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-core
 
+## 219.9.6
+
+### Patch Changes
+
+- [`41962dd9dccb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/41962dd9dccb2) -
+  NO-ISSUE: adds a default toolbar state so we can render the toolbar on initial load without
+  relying on editor state
+- Updated dependencies
+
+## 219.9.5
+
+### Patch Changes
+
+- [`56bda2bb69c77`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/56bda2bb69c77) -
+  EDITOR-6461 - migrate contextpanel styles
+- Updated dependencies
+
 ## 219.9.4
 
 ### Patch Changes

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

@@ -16,6 +16,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _getPrimaryToolbarComponents = require("../../Toolbar/getPrimaryToolbarComponents");
 var _FullPageContentArea = require("./FullPageContentArea");
@@ -170,7 +171,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
       (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(isToolbarAIFCEnabled)
     }
   }, !isEditorToolbarHidden && (isToolbarAIFCEnabled ? (0, _react2.jsx)(_FullPageToolbarNext.FullPageToolbarNext, {
-    disabled: !!props.disabled,
+    disabled: !!props.disabled || !hasHadInteraction && (0, _expValEquals.expValEquals)('platform_editor_default_toolbar_state', 'isEnabled', true),
     toolbarDockingPosition: toolbarDockingPosition !== null && toolbarDockingPosition !== void 0 ? toolbarDockingPosition : toolbarDocking,
     beforeIcon: props.primaryToolbarIconBefore,
     editorAPI: editorAPI,

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

@@ -141,7 +141,15 @@ var FullPageToolbarNext = exports.FullPageToolbarNext = function FullPageToolbar
       showKeyline: showKeyline || ContextPanelWidth > 0
     }, beforeIcon && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _runtime.ax)([styles.mainToolbarIconBefore, styles.mainToolbarIconBeforeNew])
-    }, beforeIcon), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FirstChildWrapper, null, /*#__PURE__*/_react.default.createElement(_ExcludeFromHydration.default, null, primaryToolbarDockingConfigEnabled && components && visibleToolbarComponents && (0, _toolbar2.isToolbar)(toolbar) && editorView && !(0, _coreUtils.isSSR)() && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
+    }, beforeIcon), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FirstChildWrapper, null, (0, _expValEquals.expValEquals)('platform_editor_default_toolbar_state', 'isEnabled', true) ? primaryToolbarDockingConfigEnabled && components && visibleToolbarComponents && (0, _toolbar2.isToolbar)(toolbar) && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
+      toolbar: toolbar,
+      components: visibleToolbarComponents,
+      editorView: editorView,
+      editorAPI: editorAPI,
+      popupsMountPoint: mountPoint,
+      editorAppearance: "full-page",
+      isDisabled: disabled
+    }) : /*#__PURE__*/_react.default.createElement(_ExcludeFromHydration.default, null, primaryToolbarDockingConfigEnabled && components && visibleToolbarComponents && (0, _toolbar2.isToolbar)(toolbar) && editorView && !(0, _coreUtils.isSSR)() && /*#__PURE__*/_react.default.createElement(_Toolbar.ToolbarNext, {
       toolbar: toolbar,
       components: visibleToolbarComponents,
       editorView: editorView,

package/dist/cjs/ui/ContextPanel/index-compiled.compiled.css

@@ -0,0 +1,15 @@
+
+._v5648l2w{transition:width .5s cubic-bezier(.15,1,.3,1)}
+._v564e1q5{transition:width .6s cubic-bezier(.15,1,.3,1)}
+._v564glyw{transition:none}._16qshh4h{box-shadow:inset 2px 0 0 0 var(--ds-border,#0b120e24)}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bsbidpf{width:0}
+._1bsbnklw{width:20pc}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/ui/ContextPanel/index-compiled.js

@@ -0,0 +1,66 @@
+/* index-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContextPanelWrapperCompiled = exports.ContextPanelContentCompiled = void 0;
+require("./index-compiled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _excluded = ["children", "customWidth", "visible", "disableAnimation"],
+  _excluded2 = ["children", "customWidth", "visible", "disableAnimation", "hasPadding"];
+/**
+ * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `index.tsx`.
+ *
+ * Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
+ */
+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 ANIM_SPEED_MS = 500;
+var panelStyles = {
+  panel: "_v5648l2w _1reo15vq _18m915vq _1bsbnklw _4t3i1osq _16qshh4h",
+  panelHidden: "_1bsbidpf",
+  disablePanelAnimation: "_v564glyw",
+  content: "_v564e1q5 _vchhusvi _1bsbnklw _4t3i1osq _18m91wug",
+  padding: "_ca0qpxbi _u5f3pxbi _n3tdze3t _19bvpxbi",
+  customWidthOverflow: "_1reo15vq"
+};
+var ContextPanelWrapperCompiled = exports.ContextPanelWrapperCompiled = function ContextPanelWrapperCompiled(_ref) {
+  var children = _ref.children,
+    customWidth = _ref.customWidth,
+    visible = _ref.visible,
+    disableAnimation = _ref.disableAnimation,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
+    style: customWidth && visible ? {
+      width: "".concat(customWidth, "px")
+    } : undefined
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, rest, {
+    className: (0, _runtime.ax)([panelStyles.panel, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
+  }), children);
+};
+var ContextPanelContentCompiled = exports.ContextPanelContentCompiled = function ContextPanelContentCompiled(_ref2) {
+  var children = _ref2.children,
+    customWidth = _ref2.customWidth,
+    visible = _ref2.visible,
+    disableAnimation = _ref2.disableAnimation,
+    hasPadding = _ref2.hasPadding,
+    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
+    style: customWidth && visible ? {
+      width: "".concat(customWidth, "px")
+    } : undefined
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, rest, {
+    className: (0, _runtime.ax)([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
+  }), children);
+};

package/dist/cjs/ui/ContextPanel/index-emotion.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContextPanelWrapperEmotion = exports.ContextPanelContentEmotion = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _excluded = ["children", "customWidth", "visible", "disableAnimation"],
+  _excluded2 = ["children", "customWidth", "visible", "disableAnimation", "hasPadding"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `index.tsx`.
+ *
+ * Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` 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 ANIM_SPEED_MS = 500;
+var panelHidden = (0, _react2.css)({
+  width: 0
+});
+var panel = (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
+  width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
+  height: '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
+  transition: "width ".concat(ANIM_SPEED_MS, "ms ").concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+  overflow: 'hidden',
+  boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, #0B120E24)")
+});
+var disablePanelAnimation = (0, _react2.css)({
+  transition: 'none'
+});
+var content = (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
+  transition: "width 600ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+  boxSizing: 'border-box',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
+  height: '100%',
+  overflowY: 'auto'
+});
+var paddingStyles = (0, _react2.css)({
+  padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px")
+});
+var ContextPanelWrapperEmotion = exports.ContextPanelWrapperEmotion = function ContextPanelWrapperEmotion(_ref) {
+  var children = _ref.children,
+    customWidth = _ref.customWidth,
+    visible = _ref.visible,
+    disableAnimation = _ref.disableAnimation,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var customPanelWidthStyles = (0, _react.useMemo)(function () {
+    return customWidth ? (0, _react2.css)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
+      width: "".concat(customWidth, "px"),
+      overflowX: 'hidden'
+    }) : undefined;
+  }, [customWidth]);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: [panel,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
+    customPanelWidthStyles, !visible && panelHidden, disableAnimation && disablePanelAnimation]
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, rest), children);
+};
+var ContextPanelContentEmotion = exports.ContextPanelContentEmotion = function ContextPanelContentEmotion(_ref2) {
+  var children = _ref2.children,
+    customWidth = _ref2.customWidth,
+    visible = _ref2.visible,
+    disableAnimation = _ref2.disableAnimation,
+    hasPadding = _ref2.hasPadding,
+    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var customPanelWidthStyles = (0, _react.useMemo)(function () {
+    return customWidth ? (0, _react2.css)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
+      width: "".concat(customWidth, "px"),
+      overflowX: 'hidden'
+    }) : undefined;
+  }, [customWidth]);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: [content, hasPadding && paddingStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
+    customPanelWidthStyles, !visible && panelHidden, disableAnimation && disablePanelAnimation]
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, rest), children);
+};

package/dist/cjs/ui/ContextPanel/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ContextPanel = ContextPanel;
-exports.panel = exports.content = exports.SwappableContentArea = void 0;
+exports.SwappableContentArea = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -14,7 +14,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 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 _reactIntl = require("react-intl");
 var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
 var _contextPanel = require("@atlaskit/editor-common/context-panel");
@@ -22,46 +21,21 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 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 _indexCompiled = require("./index-compiled");
+var _indexEmotion = require("./index-emotion");
 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; }
 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; })(); } /* eslint-disable jsdoc/require-jsdoc -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */ /**
- * @jsxRuntime classic
- * @jsx jsx
- */ /* eslint-disable @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable jsdoc/require-jsdoc -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
 var ANIM_SPEED_MS = 500;
-var panelHidden = (0, _react2.css)({
-  width: 0
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var panel = exports.panel = (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
-  width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
-  height: '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
-  transition: "width ".concat(ANIM_SPEED_MS, "ms ").concat(_editorSharedStyles.akEditorSwoopCubicBezier),
-  overflow: 'hidden',
-  boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, #0B120E24)")
-});
-var disablePanelAnimation = (0, _react2.css)({
-  transition: 'none'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var content = exports.content = (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
-  transition: "width 600ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
-  boxSizing: 'border-box',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
-  height: '100%',
-  overflowY: 'auto'
-});
-var paddingStyles = (0, _react2.css)({
-  padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px")
-});
+var ContextPanelWrapperMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, _indexCompiled.ContextPanelWrapperCompiled, _indexEmotion.ContextPanelWrapperEmotion);
+var ContextPanelContentMigration = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, _indexCompiled.ContextPanelContentCompiled, _indexEmotion.ContextPanelContentEmotion);
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
@@ -96,7 +70,7 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
       var onExited = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? _this.handleTransitionExited : function () {
         return _this.unsetPluginContent();
       };
-      return (0, _react2.jsx)(_Transition.default, {
+      return /*#__PURE__*/_react.default.createElement(_Transition.default, {
         timeout: _this.state.mounted ? animSpeedMs : 0,
         in: !!pluginContent,
         mountOnEnter: true,
@@ -110,7 +84,7 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
       var animSpeedMs = (0, _platformFeatureFlags.fg)('platform_editor_disable_context_panel_animation') ? 0 : ANIM_SPEED_MS;
-      return (0, _react2.jsx)(_Transition.default, {
+      return /*#__PURE__*/_react.default.createElement(_Transition.default, {
         timeout: _this.state.mounted ? animSpeedMs : 0,
         in: isVisible,
         mountOnEnter: true,
@@ -145,34 +119,33 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
       var userVisible = !!this.props.visible;
       var visible = userVisible || !!this.state.currentPluginContent;
       var hasPadding = this.props.hasPadding === undefined ? true : this.props.hasPadding;
-      var customPanelWidthStyles = (0, _react2.css)({
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
-        width: "".concat(this.props.customWidth, "px"),
-        overflowX: 'hidden'
-      });
-      return (0, _react2.jsx)(_contextPanel.ContextPanelConsumer, null, function (_ref) {
+      var disableAnimation = (0, _platformFeatureFlags.fg)('platform_editor_disable_context_panel_animation');
+      return /*#__PURE__*/_react.default.createElement(_contextPanel.ContextPanelConsumer, null, function (_ref) {
         var _this2$props$intl, _this2$props$intl2;
         var broadcastWidth = _ref.broadcastWidth;
         var contextPanelWidth = visible ? width : 0;
         broadcastWidth(contextPanelWidth);
-        return (0, _react2.jsx)("div", {
-          css: [panel,
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
-          _this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden, (0, _platformFeatureFlags.fg)('platform_editor_disable_context_panel_animation') && disablePanelAnimation],
-          "data-testid": "context-panel-panel",
+        return /*#__PURE__*/_react.default.createElement(ContextPanelWrapperMigration, {
+          customWidth: _this2.props.customWidth,
+          visible: visible,
+          disableAnimation: disableAnimation,
+          "data-testid": "context-panel-panel"
+          // eslint-disable-next-line @atlassian/a11y/no-empty-aria-label -- Pre-existing; intl should always resolve a label here
+          ,
           "aria-label": ((_this2$props$intl = _this2.props.intl) === null || _this2$props$intl === void 0 ? void 0 : _this2$props$intl.formatMessage(_messages.contextPanelMessages.panelLabel)) || '',
           "aria-modal": "false",
           role: "dialog"
-        }, (0, _react2.jsx)("div", {
+        }, /*#__PURE__*/_react.default.createElement(ContextPanelContentMigration, {
+          customWidth: _this2.props.customWidth,
+          visible: visible,
+          disableAnimation: disableAnimation,
+          hasPadding: hasPadding,
           "data-testid": "context-panel-content"
           // Adding tabIndex=0 here to make content focusable as it is a scrollable region
           ,
           tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_nov_a11y_fixes') ? 0 : undefined,
           role: (0, _platformFeatureFlags.fg)('platform_editor_nov_a11y_fixes') ? 'region' : undefined,
-          "aria-label": (0, _platformFeatureFlags.fg)('platform_editor_nov_a11y_fixes') ? (_this2$props$intl2 = _this2.props.intl) === null || _this2$props$intl2 === void 0 ? void 0 : _this2$props$intl2.formatMessage(_messages.contextPanelMessages.panelContentLabel) : undefined,
-          css: [content, hasPadding && paddingStyles,
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
-          _this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden, (0, _platformFeatureFlags.fg)('platform_editor_disable_context_panel_animation') && disablePanelAnimation]
+          "aria-label": (0, _platformFeatureFlags.fg)('platform_editor_nov_a11y_fixes') ? (_this2$props$intl2 = _this2.props.intl) === null || _this2$props$intl2 === void 0 ? void 0 : _this2$props$intl2.formatMessage(_messages.contextPanelMessages.panelContentLabel) : undefined
         }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
       });
     }
@@ -195,7 +168,7 @@ function ContextPanel(props) {
     return states === null || states === void 0 || (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
   });
   var firstContent = contextPanelContents && contextPanelContents.find(Boolean);
-  return (0, _react2.jsx)(SwappableContentArea
+  return /*#__PURE__*/_react.default.createElement(SwappableContentArea
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , (0, _extends2.default)({}, props, {

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "219.9.3";
+var version = exports.version = "219.9.5";

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -13,6 +13,7 @@ import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getPrimaryToolbarComponents } from '../../Toolbar/getPrimaryToolbarComponents';
 import { FullPageContentArea } from './FullPageContentArea';
@@ -155,7 +156,7 @@ export const FullPageEditor = props => {
       FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(isToolbarAIFCEnabled)
     }
   }, !isEditorToolbarHidden && (isToolbarAIFCEnabled ? jsx(FullPageToolbarNext, {
-    disabled: !!props.disabled,
+    disabled: !!props.disabled || !hasHadInteraction && expValEquals('platform_editor_default_toolbar_state', 'isEnabled', true),
     toolbarDockingPosition: (_toolbarDockingPositi = toolbarDockingPosition) !== null && _toolbarDockingPositi !== void 0 ? _toolbarDockingPositi : toolbarDocking,
     beforeIcon: props.primaryToolbarIconBefore,
     editorAPI: editorAPI,

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbarNext.js

@@ -131,7 +131,15 @@ export const FullPageToolbarNext = ({
     showKeyline: showKeyline || ContextPanelWidth > 0
   }, beforeIcon && /*#__PURE__*/React.createElement("div", {
     className: ax([styles.mainToolbarIconBefore, styles.mainToolbarIconBeforeNew])
-  }, beforeIcon), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FirstChildWrapper, null, /*#__PURE__*/React.createElement(ExcludeFromHydration, null, primaryToolbarDockingConfigEnabled && components && visibleToolbarComponents && isToolbar(toolbar) && editorView && !isSSR() && /*#__PURE__*/React.createElement(ToolbarNext, {
+  }, beforeIcon), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FirstChildWrapper, null, expValEquals('platform_editor_default_toolbar_state', 'isEnabled', true) ? primaryToolbarDockingConfigEnabled && components && visibleToolbarComponents && isToolbar(toolbar) && /*#__PURE__*/React.createElement(ToolbarNext, {
+    toolbar: toolbar,
+    components: visibleToolbarComponents,
+    editorView: editorView,
+    editorAPI: editorAPI,
+    popupsMountPoint: mountPoint,
+    editorAppearance: "full-page",
+    isDisabled: disabled
+  }) : /*#__PURE__*/React.createElement(ExcludeFromHydration, null, primaryToolbarDockingConfigEnabled && components && visibleToolbarComponents && isToolbar(toolbar) && editorView && !isSSR() && /*#__PURE__*/React.createElement(ToolbarNext, {
     toolbar: toolbar,
     components: visibleToolbarComponents,
     editorView: editorView,

package/dist/es2019/ui/ContextPanel/index-compiled.compiled.css

@@ -0,0 +1,15 @@
+
+._v5648l2w{transition:width .5s cubic-bezier(.15,1,.3,1)}
+._v564e1q5{transition:width .6s cubic-bezier(.15,1,.3,1)}
+._v564glyw{transition:none}._16qshh4h{box-shadow:inset 2px 0 0 0 var(--ds-border,#0b120e24)}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bsbidpf{width:0}
+._1bsbnklw{width:20pc}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/ui/ContextPanel/index-compiled.js

@@ -0,0 +1,53 @@
+/* index-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./index-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+/**
+ * Compiled branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `index.tsx`.
+ *
+ * Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
+ */
+
+import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+const ANIM_SPEED_MS = 500;
+const panelStyles = {
+  panel: "_v5648l2w _1reo15vq _18m915vq _1bsbnklw _4t3i1osq _16qshh4h",
+  panelHidden: "_1bsbidpf",
+  disablePanelAnimation: "_v564glyw",
+  content: "_v564e1q5 _vchhusvi _1bsbnklw _4t3i1osq _18m91wug",
+  padding: "_ca0qpxbi _u5f3pxbi _n3tdze3t _19bvpxbi",
+  customWidthOverflow: "_1reo15vq"
+};
+export const ContextPanelWrapperCompiled = ({
+  children,
+  customWidth,
+  visible,
+  disableAnimation,
+  ...rest
+}) => /*#__PURE__*/React.createElement("div", _extends({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
+  style: customWidth && visible ? {
+    width: `${customWidth}px`
+  } : undefined
+  // eslint-disable-next-line react/jsx-props-no-spreading
+}, rest, {
+  className: ax([panelStyles.panel, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
+}), children);
+export const ContextPanelContentCompiled = ({
+  children,
+  customWidth,
+  visible,
+  disableAnimation,
+  hasPadding,
+  ...rest
+}) => /*#__PURE__*/React.createElement("div", _extends({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic width cannot be expressed as static compiled CSS
+  style: customWidth && visible ? {
+    width: `${customWidth}px`
+  } : undefined
+  // eslint-disable-next-line react/jsx-props-no-spreading
+}, rest, {
+  className: ax([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
+}), children);

package/dist/es2019/ui/ContextPanel/index-emotion.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/**
+ * Emotion fallback branch of the `platform_editor_core_non_ecc_static_css` experiment.
+ * Used via `componentWithCondition` in `index.tsx`.
+ *
+ * Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
+ */
+import { useMemo } 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 { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+const ANIM_SPEED_MS = 500;
+const panelHidden = css({
+  width: 0
+});
+const panel = 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
+  width: `${akEditorContextPanelWidth}px`,
+  height: '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
+  transition: `width ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier}`,
+  overflow: 'hidden',
+  boxShadow: `inset 2px 0 0 0 ${"var(--ds-border, #0B120E24)"}`
+});
+const disablePanelAnimation = css({
+  transition: 'none'
+});
+const content = 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
+  transition: `width 600ms ${akEditorSwoopCubicBezier}`,
+  boxSizing: 'border-box',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  width: `${akEditorContextPanelWidth}px`,
+  height: '100%',
+  overflowY: 'auto'
+});
+const paddingStyles = css({
+  padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0px`
+});
+export const ContextPanelWrapperEmotion = ({
+  children,
+  customWidth,
+  visible,
+  disableAnimation,
+  ...rest
+}) => {
+  const customPanelWidthStyles = useMemo(() => customWidth ? css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
+    width: `${customWidth}px`,
+    overflowX: 'hidden'
+  }) : undefined, [customWidth]);
+  return jsx("div", _extends({
+    css: [panel,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
+    customPanelWidthStyles, !visible && panelHidden, disableAnimation && disablePanelAnimation]
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, rest), children);
+};
+export const ContextPanelContentEmotion = ({
+  children,
+  customWidth,
+  visible,
+  disableAnimation,
+  hasPadding,
+  ...rest
+}) => {
+  const customPanelWidthStyles = useMemo(() => customWidth ? css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
+    width: `${customWidth}px`,
+    overflowX: 'hidden'
+  }) : undefined, [customWidth]);
+  return jsx("div", _extends({
+    css: [content, hasPadding && paddingStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
+    customPanelWidthStyles, !visible && panelHidden, disableAnimation && disablePanelAnimation]
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, rest), children);
+};