@atlaskit/editor-core 219.9.4 → 219.9.6

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

@@ -1,54 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable jsdoc/require-jsdoc -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
-
-/* 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 */
-import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl';
 import Transition from 'react-transition-group/Transition';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { contextPanelMessages } from '@atlaskit/editor-common/messages';
-import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+import { akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { ContextPanelContentCompiled, ContextPanelWrapperCompiled } from './index-compiled';
+import { ContextPanelContentEmotion, ContextPanelWrapperEmotion } from './index-emotion';
 const ANIM_SPEED_MS = 500;
-const panelHidden = css({
-  width: 0
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export 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'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export 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`
-});
+const ContextPanelWrapperMigration = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true), ContextPanelWrapperCompiled, ContextPanelWrapperEmotion);
+const ContextPanelContentMigration = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true), ContextPanelContentCompiled, ContextPanelContentEmotion);
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class SwappableContentAreaInner extends React.PureComponent {
@@ -82,7 +49,7 @@ class SwappableContentAreaInner extends React.PureComponent {
       }
       const animSpeedMs = fg('platform_editor_disable_context_panel_animation') ? 0 : ANIM_SPEED_MS;
       const onExited = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? this.handleTransitionExited : () => this.unsetPluginContent();
-      return jsx(Transition, {
+      return /*#__PURE__*/React.createElement(Transition, {
         timeout: this.state.mounted ? animSpeedMs : 0,
         in: !!pluginContent,
         mountOnEnter: true,
@@ -98,7 +65,7 @@ class SwappableContentAreaInner extends React.PureComponent {
         return;
       }
       const animSpeedMs = fg('platform_editor_disable_context_panel_animation') ? 0 : ANIM_SPEED_MS;
-      return jsx(Transition, {
+      return /*#__PURE__*/React.createElement(Transition, {
         timeout: this.state.mounted ? animSpeedMs : 0,
         in: isVisible,
         mountOnEnter: true,
@@ -133,35 +100,34 @@ class SwappableContentAreaInner extends React.PureComponent {
     const userVisible = !!this.props.visible;
     const visible = userVisible || !!this.state.currentPluginContent;
     const hasPadding = this.props.hasPadding === undefined ? true : this.props.hasPadding;
-    const customPanelWidthStyles = css({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
-      width: `${this.props.customWidth}px`,
-      overflowX: 'hidden'
-    });
-    return jsx(ContextPanelConsumer, null, ({
+    const disableAnimation = fg('platform_editor_disable_context_panel_animation');
+    return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
       broadcastWidth
     }) => {
       var _this$props$intl, _this$props$intl2;
       const contextPanelWidth = visible ? width : 0;
       broadcastWidth(contextPanelWidth);
-      return jsx("div", {
-        css: [panel,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
-        this.props.customWidth && customPanelWidthStyles, !visible && panelHidden, fg('platform_editor_disable_context_panel_animation') && disablePanelAnimation],
-        "data-testid": "context-panel-panel",
+      return /*#__PURE__*/React.createElement(ContextPanelWrapperMigration, {
+        customWidth: this.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": ((_this$props$intl = this.props.intl) === null || _this$props$intl === void 0 ? void 0 : _this$props$intl.formatMessage(contextPanelMessages.panelLabel)) || '',
         "aria-modal": "false",
         role: "dialog"
-      }, jsx("div", {
+      }, /*#__PURE__*/React.createElement(ContextPanelContentMigration, {
+        customWidth: this.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: fg('platform_editor_nov_a11y_fixes') ? 0 : undefined,
         role: fg('platform_editor_nov_a11y_fixes') ? 'region' : undefined,
-        "aria-label": fg('platform_editor_nov_a11y_fixes') ? (_this$props$intl2 = this.props.intl) === null || _this$props$intl2 === void 0 ? void 0 : _this$props$intl2.formatMessage(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
-        this.props.customWidth && customPanelWidthStyles, !visible && panelHidden, fg('platform_editor_disable_context_panel_animation') && disablePanelAnimation]
+        "aria-label": fg('platform_editor_nov_a11y_fixes') ? (_this$props$intl2 = this.props.intl) === null || _this$props$intl2 === void 0 ? void 0 : _this$props$intl2.formatMessage(contextPanelMessages.panelContentLabel) : undefined
       }, this.showPluginContent() || this.showProvidedContent(userVisible)));
     });
   }
@@ -175,7 +141,7 @@ export function ContextPanel(props) {
     return states === null || states === void 0 ? void 0 : (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
   });
   const firstContent = contextPanelContents && contextPanelContents.find(Boolean);
-  return jsx(SwappableContentArea
+  return /*#__PURE__*/React.createElement(SwappableContentArea
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, props, {

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "219.9.3";
+export const version = "219.9.5";

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

@@ -14,6 +14,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';
@@ -160,7 +161,7 @@ export var FullPageEditor = function 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: toolbarDockingPosition !== null && toolbarDockingPosition !== void 0 ? toolbarDockingPosition : toolbarDocking,
     beforeIcon: props.primaryToolbarIconBefore,
     editorAPI: editorAPI,

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

@@ -132,7 +132,15 @@ export var FullPageToolbarNext = function FullPageToolbarNext(_ref4) {
       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/esm/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/esm/ui/ContextPanel/index-compiled.js

@@ -0,0 +1,58 @@
+/* index-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "customWidth", "visible", "disableAnimation"],
+  _excluded2 = ["children", "customWidth", "visible", "disableAnimation", "hasPadding"];
+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';
+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"
+};
+export var ContextPanelWrapperCompiled = function ContextPanelWrapperCompiled(_ref) {
+  var children = _ref.children,
+    customWidth = _ref.customWidth,
+    visible = _ref.visible,
+    disableAnimation = _ref.disableAnimation,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__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: "".concat(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 var ContextPanelContentCompiled = function ContextPanelContentCompiled(_ref2) {
+  var children = _ref2.children,
+    customWidth = _ref2.customWidth,
+    visible = _ref2.visible,
+    disableAnimation = _ref2.disableAnimation,
+    hasPadding = _ref2.hasPadding,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__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: "".concat(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/esm/ui/ContextPanel/index-emotion.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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.
+ */
+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';
+var ANIM_SPEED_MS = 500;
+var panelHidden = css({
+  width: 0
+});
+var 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: "".concat(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(akEditorSwoopCubicBezier),
+  overflow: 'hidden',
+  boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, #0B120E24)")
+});
+var disablePanelAnimation = css({
+  transition: 'none'
+});
+var 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 ".concat(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(akEditorContextPanelWidth, "px"),
+  height: '100%',
+  overflowY: 'auto'
+});
+var paddingStyles = css({
+  padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px")
+});
+export var ContextPanelWrapperEmotion = function ContextPanelWrapperEmotion(_ref) {
+  var children = _ref.children,
+    customWidth = _ref.customWidth,
+    visible = _ref.visible,
+    disableAnimation = _ref.disableAnimation,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var customPanelWidthStyles = useMemo(function () {
+    return customWidth ? 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 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 var ContextPanelContentEmotion = function ContextPanelContentEmotion(_ref2) {
+  var children = _ref2.children,
+    customWidth = _ref2.customWidth,
+    visible = _ref2.visible,
+    disableAnimation = _ref2.disableAnimation,
+    hasPadding = _ref2.hasPadding,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  var customPanelWidthStyles = useMemo(function () {
+    return customWidth ? 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 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);
+};

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

@@ -10,54 +10,25 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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
- */
 import React from 'react';
-
-/* 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 */
-import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl';
 import Transition from 'react-transition-group/Transition';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { contextPanelMessages } from '@atlaskit/editor-common/messages';
-import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+import { akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { ContextPanelContentCompiled, ContextPanelWrapperCompiled } from './index-compiled';
+import { ContextPanelContentEmotion, ContextPanelWrapperEmotion } from './index-emotion';
 var ANIM_SPEED_MS = 500;
-var panelHidden = css({
-  width: 0
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var 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: "".concat(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(akEditorSwoopCubicBezier),
-  overflow: 'hidden',
-  boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, #0B120E24)")
-});
-var disablePanelAnimation = css({
-  transition: 'none'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var 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 ".concat(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(akEditorContextPanelWidth, "px"),
-  height: '100%',
-  overflowY: 'auto'
-});
-var paddingStyles = css({
-  padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px")
-});
+var ContextPanelWrapperMigration = componentWithCondition(function () {
+  return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, ContextPanelWrapperCompiled, ContextPanelWrapperEmotion);
+var ContextPanelContentMigration = componentWithCondition(function () {
+  return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true);
+}, ContextPanelContentCompiled, ContextPanelContentEmotion);
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
@@ -92,7 +63,7 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
       var onExited = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? _this.handleTransitionExited : function () {
         return _this.unsetPluginContent();
       };
-      return jsx(Transition, {
+      return /*#__PURE__*/React.createElement(Transition, {
         timeout: _this.state.mounted ? animSpeedMs : 0,
         in: !!pluginContent,
         mountOnEnter: true,
@@ -106,7 +77,7 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
       var animSpeedMs = fg('platform_editor_disable_context_panel_animation') ? 0 : ANIM_SPEED_MS;
-      return jsx(Transition, {
+      return /*#__PURE__*/React.createElement(Transition, {
         timeout: _this.state.mounted ? animSpeedMs : 0,
         in: isVisible,
         mountOnEnter: true,
@@ -141,34 +112,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 = 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 jsx(ContextPanelConsumer, null, function (_ref) {
+      var disableAnimation = fg('platform_editor_disable_context_panel_animation');
+      return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref) {
         var _this2$props$intl, _this2$props$intl2;
         var broadcastWidth = _ref.broadcastWidth;
         var contextPanelWidth = visible ? width : 0;
         broadcastWidth(contextPanelWidth);
-        return 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, fg('platform_editor_disable_context_panel_animation') && disablePanelAnimation],
-          "data-testid": "context-panel-panel",
+        return /*#__PURE__*/React.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(contextPanelMessages.panelLabel)) || '',
           "aria-modal": "false",
           role: "dialog"
-        }, jsx("div", {
+        }, /*#__PURE__*/React.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: fg('platform_editor_nov_a11y_fixes') ? 0 : undefined,
           role: fg('platform_editor_nov_a11y_fixes') ? 'region' : undefined,
-          "aria-label": fg('platform_editor_nov_a11y_fixes') ? (_this2$props$intl2 = _this2.props.intl) === null || _this2$props$intl2 === void 0 ? void 0 : _this2$props$intl2.formatMessage(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, fg('platform_editor_disable_context_panel_animation') && disablePanelAnimation]
+          "aria-label": fg('platform_editor_nov_a11y_fixes') ? (_this2$props$intl2 = _this2.props.intl) === null || _this2$props$intl2 === void 0 ? void 0 : _this2$props$intl2.formatMessage(contextPanelMessages.panelContentLabel) : undefined
         }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
       });
     }
@@ -191,7 +161,7 @@ export 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 jsx(SwappableContentArea
+  return /*#__PURE__*/React.createElement(SwappableContentArea
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, props, {

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "219.9.3";
+export var version = "219.9.5";

package/dist/types/ui/ContextPanel/index-compiled.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * Compiled migration: platform_editor_core_non_ecc_static_css
+ */
+/**
+ * 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 type { HTMLAttributes } from 'react';
+export interface ContextPanelWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    customWidth?: number;
+    disableAnimation: boolean;
+    visible: boolean;
+}
+export interface ContextPanelContentProps extends HTMLAttributes<HTMLDivElement> {
+    customWidth?: number;
+    disableAnimation: boolean;
+    hasPadding: boolean;
+    visible: boolean;
+}
+export declare const ContextPanelWrapperCompiled: ({ children, customWidth, visible, disableAnimation, ...rest }: ContextPanelWrapperProps) => React.JSX.Element;
+export declare const ContextPanelContentCompiled: ({ children, customWidth, visible, disableAnimation, hasPadding, ...rest }: ContextPanelContentProps) => React.JSX.Element;

package/dist/types/ui/ContextPanel/index-emotion.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+import { jsx } from '@emotion/react';
+export interface ContextPanelWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    customWidth?: number;
+    disableAnimation: boolean;
+    visible: boolean;
+}
+export interface ContextPanelContentProps extends HTMLAttributes<HTMLDivElement> {
+    customWidth?: number;
+    disableAnimation: boolean;
+    hasPadding: boolean;
+    visible: boolean;
+}
+export declare const ContextPanelWrapperEmotion: ({ children, customWidth, visible, disableAnimation, ...rest }: ContextPanelWrapperProps) => jsx.JSX.Element;
+export declare const ContextPanelContentEmotion: ({ children, customWidth, visible, disableAnimation, hasPadding, ...rest }: ContextPanelContentProps) => jsx.JSX.Element;

package/dist/types/ui/ContextPanel/index.d.ts

@@ -1,10 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
-import { jsx } from '@emotion/react';
-import type { SerializedStyles } from '@emotion/react';
 import type { IntlShape, WithIntlProps } from 'react-intl';
 import type { OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';
 import type { ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
@@ -16,8 +10,6 @@ export type Props = {
     hasPadding?: boolean;
     visible: boolean;
 };
-export declare const panel: SerializedStyles;
-export declare const content: SerializedStyles;
 type SwappableContentAreaProps = {
     editorView?: EditorView;
     intl: IntlShape;
@@ -26,5 +18,5 @@ type SwappableContentAreaProps = {
 export declare const SwappableContentArea: React.FC<WithIntlProps<SwappableContentAreaProps>> & {
     WrappedComponent: React.ComponentType<SwappableContentAreaProps>;
 };
-export declare function ContextPanel(props: Props): jsx.JSX.Element;
+export declare function ContextPanel(props: Props): React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ContextPanel/index-compiled.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * Compiled migration: platform_editor_core_non_ecc_static_css
+ */
+/**
+ * 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 type { HTMLAttributes } from 'react';
+export interface ContextPanelWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    customWidth?: number;
+    disableAnimation: boolean;
+    visible: boolean;
+}
+export interface ContextPanelContentProps extends HTMLAttributes<HTMLDivElement> {
+    customWidth?: number;
+    disableAnimation: boolean;
+    hasPadding: boolean;
+    visible: boolean;
+}
+export declare const ContextPanelWrapperCompiled: ({ children, customWidth, visible, disableAnimation, ...rest }: ContextPanelWrapperProps) => React.JSX.Element;
+export declare const ContextPanelContentCompiled: ({ children, customWidth, visible, disableAnimation, hasPadding, ...rest }: ContextPanelContentProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/ContextPanel/index-emotion.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+import { jsx } from '@emotion/react';
+export interface ContextPanelWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    customWidth?: number;
+    disableAnimation: boolean;
+    visible: boolean;
+}
+export interface ContextPanelContentProps extends HTMLAttributes<HTMLDivElement> {
+    customWidth?: number;
+    disableAnimation: boolean;
+    hasPadding: boolean;
+    visible: boolean;
+}
+export declare const ContextPanelWrapperEmotion: ({ children, customWidth, visible, disableAnimation, ...rest }: ContextPanelWrapperProps) => jsx.JSX.Element;
+export declare const ContextPanelContentEmotion: ({ children, customWidth, visible, disableAnimation, hasPadding, ...rest }: ContextPanelContentProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/ContextPanel/index.d.ts

@@ -1,10 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
-import { jsx } from '@emotion/react';
-import type { SerializedStyles } from '@emotion/react';
 import type { IntlShape, WithIntlProps } from 'react-intl';
 import type { OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';
 import type { ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
@@ -18,8 +12,6 @@ export type Props = {
     hasPadding?: boolean;
     visible: boolean;
 };
-export declare const panel: SerializedStyles;
-export declare const content: SerializedStyles;
 type SwappableContentAreaProps = {
     editorView?: EditorView;
     intl: IntlShape;
@@ -28,5 +20,5 @@ type SwappableContentAreaProps = {
 export declare const SwappableContentArea: React.FC<WithIntlProps<SwappableContentAreaProps>> & {
     WrappedComponent: React.ComponentType<SwappableContentAreaProps>;
 };
-export declare function ContextPanel(props: Props): jsx.JSX.Element;
+export declare function ContextPanel(props: Props): React.JSX.Element;
 export {};