@atlaskit/editor-core 221.9.0 → 221.9.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-core
 
+## 221.9.1
+
+### Patch Changes
+
+- [`c9c84b6b7437c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c9c84b6b7437c) -
+  refactor context panel styles
+
 ## 221.9.0
 
 ### Minor Changes

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

@@ -5,7 +5,6 @@
 ._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%}

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

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ContextPanelWrapperCompiled = exports.ContextPanelContentCompiled = void 0;
 require("./index-compiled.compiled.css");
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -23,46 +24,68 @@ var _excluded = ["children", "customWidth", "visible", "disableAnimation"],
  */
 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 getContextPanelWidthStyle = function getContextPanelWidthStyle(_ref) {
+  var customWidth = _ref.customWidth,
+    visible = _ref.visible;
+  if (!visible) {
+    return {
+      width: 0
+    };
+  }
+  if (customWidth) {
+    return {
+      width: "".concat(customWidth, "px")
+    };
+  }
+  return undefined;
+};
 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);
+var ContextPanelWrapperCompiled = exports.ContextPanelWrapperCompiled = function ContextPanelWrapperCompiled(_ref2) {
+  var children = _ref2.children,
+    customWidth = _ref2.customWidth,
+    visible = _ref2.visible,
+    disableAnimation = _ref2.disableAnimation,
+    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var widthStyle = (0, _react.useMemo)(function () {
+    return getContextPanelWidthStyle({
+      customWidth: customWidth,
+      visible: visible
+    });
+  }, [customWidth, visible]);
   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
+    style: widthStyle
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, rest, {
-    className: (0, _runtime.ax)([panelStyles.panel, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
+    className: (0, _runtime.ax)([panelStyles.panel, customWidth && "", disableAnimation && panelStyles.disablePanelAnimation])
   }), children);
 };
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-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);
+var ContextPanelContentCompiled = exports.ContextPanelContentCompiled = function ContextPanelContentCompiled(_ref3) {
+  var children = _ref3.children,
+    customWidth = _ref3.customWidth,
+    visible = _ref3.visible,
+    disableAnimation = _ref3.disableAnimation,
+    hasPadding = _ref3.hasPadding,
+    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
+  var widthStyle = (0, _react.useMemo)(function () {
+    return getContextPanelWidthStyle({
+      customWidth: customWidth,
+      visible: visible
+    });
+  }, [customWidth, visible]);
   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
+    style: widthStyle
     // 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])
+    className: (0, _runtime.ax)([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", disableAnimation && panelStyles.disablePanelAnimation])
   }), children);
 };

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.8.3";
+var version = exports.version = "221.9.0";

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

@@ -5,7 +5,6 @@
 ._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%}

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

@@ -9,12 +9,27 @@ import { ax, ix } from "@compiled/react/runtime";
  *
  * Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
  */
-
+import { useMemo } from 'react';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 const ANIM_SPEED_MS = 500;
+const getContextPanelWidthStyle = ({
+  customWidth,
+  visible
+}) => {
+  if (!visible) {
+    return {
+      width: 0
+    };
+  }
+  if (customWidth) {
+    return {
+      width: `${customWidth}px`
+    };
+  }
+  return undefined;
+};
 const panelStyles = {
   panel: "_v5648l2w _1reo15vq _18m915vq _1bsbnklw _4t3i1osq _16qshh4h",
-  panelHidden: "_1bsbidpf",
   disablePanelAnimation: "_v564glyw",
   content: "_v564e1q5 _vchhusvi _1bsbnklw _4t3i1osq _18m91wug",
   padding: "_ca0qpxbi _u5f3pxbi _n3tdze3t _19bvpxbi",
@@ -26,15 +41,19 @@ export const ContextPanelWrapperCompiled = ({
   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);
+}) => {
+  const widthStyle = useMemo(() => getContextPanelWidthStyle({
+    customWidth,
+    visible
+  }), [customWidth, visible]);
+  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: widthStyle
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, rest, {
+    className: ax([panelStyles.panel, customWidth && "", disableAnimation && panelStyles.disablePanelAnimation])
+  }), children);
+};
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const ContextPanelContentCompiled = ({
@@ -44,12 +63,16 @@ export const ContextPanelContentCompiled = ({
   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);
+}) => {
+  const widthStyle = useMemo(() => getContextPanelWidthStyle({
+    customWidth,
+    visible
+  }), [customWidth, visible]);
+  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: widthStyle
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, rest, {
+    className: ax([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", disableAnimation && panelStyles.disablePanelAnimation])
+  }), children);
+};

package/dist/es2019/version-wrapper.js

@@ -1,3 +1,3 @@
 export const name = "@atlaskit/editor-core";
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export const version = "221.8.3";
+export const version = "221.9.0";

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

@@ -5,7 +5,6 @@
 ._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%}

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

@@ -12,49 +12,71 @@ import { ax, ix } from "@compiled/react/runtime";
  *
  * Cleanup: delete this file once the `platform_editor_core_non_ecc_static_css` experiment has shipped.
  */
-
+import { useMemo } from 'react';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 var ANIM_SPEED_MS = 500;
+var getContextPanelWidthStyle = function getContextPanelWidthStyle(_ref) {
+  var customWidth = _ref.customWidth,
+    visible = _ref.visible;
+  if (!visible) {
+    return {
+      width: 0
+    };
+  }
+  if (customWidth) {
+    return {
+      width: "".concat(customWidth, "px")
+    };
+  }
+  return undefined;
+};
 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);
+export var ContextPanelWrapperCompiled = function ContextPanelWrapperCompiled(_ref2) {
+  var children = _ref2.children,
+    customWidth = _ref2.customWidth,
+    visible = _ref2.visible,
+    disableAnimation = _ref2.disableAnimation,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var widthStyle = useMemo(function () {
+    return getContextPanelWidthStyle({
+      customWidth: customWidth,
+      visible: visible
+    });
+  }, [customWidth, visible]);
   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
+    style: widthStyle
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, rest, {
-    className: ax([panelStyles.panel, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
+    className: ax([panelStyles.panel, customWidth && "", disableAnimation && panelStyles.disablePanelAnimation])
   }), children);
 };
 
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-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);
+export var ContextPanelContentCompiled = function ContextPanelContentCompiled(_ref3) {
+  var children = _ref3.children,
+    customWidth = _ref3.customWidth,
+    visible = _ref3.visible,
+    disableAnimation = _ref3.disableAnimation,
+    hasPadding = _ref3.hasPadding,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var widthStyle = useMemo(function () {
+    return getContextPanelWidthStyle({
+      customWidth: customWidth,
+      visible: visible
+    });
+  }, [customWidth, visible]);
   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
+    style: widthStyle
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, rest, {
-    className: ax([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", !visible && panelStyles.panelHidden, disableAnimation && panelStyles.disablePanelAnimation])
+    className: ax([panelStyles.content, hasPadding && panelStyles.padding, customWidth && "", disableAnimation && panelStyles.disablePanelAnimation])
   }), children);
 };

package/dist/esm/version-wrapper.js

@@ -1,3 +1,3 @@
 export var name = "@atlaskit/editor-core";
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export var version = "221.8.3";
+export var version = "221.9.0";

package/dist/types/ui/Appearance/FullPage/FullPageToolbarNext.d.ts

@@ -1,7 +1,6 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
- * @jsxFrag
  */
 import React from 'react';
 import type { OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';

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

@@ -1,14 +1,3 @@
-/**
- * @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;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "221.9.0",
+	"version": "221.9.1",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"