@atlaskit/editor-core 153.1.4 → 154.0.0

package/dist/cjs/plugins/type-ahead/ui/InputQuery.js

@@ -17,7 +17,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _w3cKeyname = require("w3c-keyname");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _constants = require("../constants");
 
@@ -67,7 +67,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
   var ref = (0, _react.useRef)(document.createElement('span'));
   var cleanedInputContent = (0, _react.useCallback)(function () {
     var raw = ref.current.textContent || '';
-    return raw.replace(_editorCommon.ZERO_WIDTH_SPACE, '');
+    return raw.replace(_utils.ZERO_WIDTH_SPACE, '');
   }, []);
   var onKeyUp = (0, _react.useCallback)(function (event) {
     var text = cleanedInputContent();
@@ -105,7 +105,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         break;
 
       case 'Backspace':
-        if (raw === _editorCommon.ZERO_WIDTH_SPACE || raw.length === 0 || (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
+        if (raw === _utils.ZERO_WIDTH_SPACE || raw.length === 0 || (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
           event.stopPropagation();
           event.preventDefault();
           cancel({
@@ -219,18 +219,18 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
         return;
       }
 
-      if (e.inputType === 'historyUndo' && (((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.length) === 0 || target.textContent === _editorCommon.ZERO_WIDTH_SPACE)) {
+      if (e.inputType === 'historyUndo' && (((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.length) === 0 || target.textContent === _utils.ZERO_WIDTH_SPACE)) {
         e.preventDefault();
         e.stopPropagation();
         close();
         return;
       }
 
-      if (e.data != null && target.textContent === _editorCommon.ZERO_WIDTH_SPACE) {
+      if (e.data != null && target.textContent === _utils.ZERO_WIDTH_SPACE) {
         element.textContent = ''; // We need to change the content on Safari
         // and set the cursor at the right place
 
-        if (_editorCommon.browser.safari) {
+        if (_utils.browser.safari) {
           e.preventDefault();
           var dataElement = document.createTextNode(e.data);
           element.appendChild(dataElement);
@@ -246,7 +246,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
 
     var onInput = null;
 
-    if (_editorCommon.browser.safari) {
+    if (_utils.browser.safari) {
       // On Safari, for reasons beyond my understanding,
       // The undo behavior is totally different from other browsers
       // That why we need to have an specific branch only for Safari.
@@ -280,7 +280,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
       element.removeEventListener('keydown', keyDown);
       element.removeEventListener('beforeinput', beforeinput);
 
-      if (_editorCommon.browser.safari) {
+      if (_utils.browser.safari) {
         element.removeEventListener('input', onInput);
       }
     };
@@ -289,7 +289,7 @@ var InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
 
     if (ref.current && forceFocus) {
-      ref.current.textContent = hasReopenQuery ? reopenQuery : _editorCommon.ZERO_WIDTH_SPACE;
+      ref.current.textContent = hasReopenQuery ? reopenQuery : _utils.ZERO_WIDTH_SPACE;
       requestAnimationFrame(function () {
         if (!(ref !== null && ref !== void 0 && ref.current)) {
           return;

package/dist/cjs/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -17,7 +17,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -113,7 +113,7 @@ var TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
   // we need to send the event again
   // eslint-disable-next-line react-hooks/exhaustive-deps
   triggerHandler]);
-  return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+  return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
     target: anchorElement,
     mountTo: popupsMountPoint,

package/dist/cjs/plugins/type-ahead/ui/hooks/use-resize-observer.js

@@ -9,7 +9,7 @@ exports.useResizeObserver = exports.ResizeObserverProvider = exports.ResizeObser
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -22,7 +22,7 @@ exports.ResizeObserverContext = ResizeObserverContext;
 var ResizeObserverProvider = /*#__PURE__*/_react.default.memo(function (_ref) {
   var children = _ref.children;
   var instance = (0, _react.useMemo)(function () {
-    if (!_editorCommon.browser.supportsResizeObserver) {
+    if (!_utils.browser.supportsResizeObserver) {
       return null;
     }
 

package/dist/cjs/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -115,12 +115,13 @@ var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: handleUndo,
         disabled: !canUndo || disabled,
+        "aria-label": labelUndo,
         title: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
           description: labelUndo,
           keymap: _keymaps.undo
         }),
         iconBefore: /*#__PURE__*/_react.default.createElement(_undo.default, {
-          label: labelUndo
+          label: ""
         }),
         testId: "ak-editor-toolbar-button-undo"
       }), /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
@@ -133,9 +134,10 @@ var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
           keymap: _keymaps.redo
         }),
         iconBefore: /*#__PURE__*/_react.default.createElement(_redo.default, {
-          label: labelRedo
+          label: ""
         }),
-        testId: "ak-editor-toolbar-button-redo"
+        testId: "ak-editor-toolbar-button-redo",
+        "aria-label": labelRedo
       }), /*#__PURE__*/_react.default.createElement(_styles.Separator, null));
     }
   }]);

package/dist/cjs/plugins/unsupported-content/index.js

@@ -9,7 +9,7 @@ var _prosemirrorState = require("prosemirror-state");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _nodeviews = require("../../nodeviews");
 
@@ -25,16 +25,16 @@ var createPlugin = function createPlugin(_ref) {
     key: pluginKey,
     props: {
       nodeViews: {
-        confluenceUnsupportedBlock: _nodeviews.ReactNodeView.fromComponent(_editorCommon.UnsupportedBlock, portalProviderAPI, eventDispatcher, {
+        confluenceUnsupportedBlock: _nodeviews.ReactNodeView.fromComponent(_ui.UnsupportedBlock, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent: dispatchAnalyticsEvent
         }, undefined, hasIntlContext),
-        confluenceUnsupportedInline: _nodeviews.ReactNodeView.fromComponent(_editorCommon.UnsupportedInline, portalProviderAPI, eventDispatcher, {
+        confluenceUnsupportedInline: _nodeviews.ReactNodeView.fromComponent(_ui.UnsupportedInline, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent: dispatchAnalyticsEvent
         }, undefined, hasIntlContext),
-        unsupportedBlock: _nodeviews.ReactNodeView.fromComponent(_editorCommon.UnsupportedBlock, portalProviderAPI, eventDispatcher, {
+        unsupportedBlock: _nodeviews.ReactNodeView.fromComponent(_ui.UnsupportedBlock, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent: dispatchAnalyticsEvent
         }, undefined, hasIntlContext),
-        unsupportedInline: _nodeviews.ReactNodeView.fromComponent(_editorCommon.UnsupportedInline, portalProviderAPI, eventDispatcher, {
+        unsupportedInline: _nodeviews.ReactNodeView.fromComponent(_ui.UnsupportedInline, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent: dispatchAnalyticsEvent
         }, undefined, hasIntlContext)
       }

package/dist/cjs/profiler/render-count.js

@@ -15,7 +15,7 @@ var _uuid = _interopRequireDefault(require("uuid"));
 
 var _useComponentRendererTracking = require("../utils/react-hooks/use-component-renderer-tracking");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -42,7 +42,7 @@ var CoreRenderCountProfiler = function CoreRenderCountProfiler(_ref) {
   var onRender = function onRender(_ref2) {
     var renderCount = _ref2.renderCount;
 
-    var profiler = _editorCommon.RenderCountProfiler.getInstance({
+    var profiler = _utils.RenderCountProfiler.getInstance({
       store: window
     });
 
@@ -66,7 +66,7 @@ var CoreRenderCountProfiler = function CoreRenderCountProfiler(_ref) {
 var RenderCountProfiler = function RenderCountProfiler(_ref3) {
   var componentId = _ref3.componentId;
 
-  var profiler = _editorCommon.RenderCountProfiler.getInstance({
+  var profiler = _utils.RenderCountProfiler.getInstance({
     store: window
   });
 

package/dist/cjs/ui/Addon/ClickAreaMobile/index.js

@@ -41,7 +41,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * doesn't exceed the viewport, or whether it overflows it).
  */
 var ClickWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  ", "\n"])), function (props) {
-  return props.persistScrollGutter !== true && "min-height: ".concat(props.minHeight, "vh");
+  return props.isExpanded && props.minHeight && "min-height: ".concat(props.minHeight, "px");
 });
 
 ClickWrapper.displayName = 'ClickWrapper';
@@ -106,7 +106,8 @@ var ClickAreaMobile = /*#__PURE__*/function (_React$Component) {
         minHeight: this.props.minHeight,
         persistScrollGutter: this.props.persistScrollGutter,
         onClick: this.handleClick,
-        innerRef: this.clickElementRef
+        innerRef: this.clickElementRef,
+        isExpanded: this.props.isExpanded
       }, this.props.children);
     }
   }]);

package/dist/cjs/ui/Alignment/AlignmentButton/index.js

@@ -27,6 +27,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ToolbarButton = _interopRequireDefault(require("../../ToolbarButton"));
 
+var _keymaps = require("../../../keymaps");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -66,12 +68,17 @@ var AlignmentButton = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
           label = _this$props2.label,
           isSelected = _this$props2.isSelected,
-          content = _this$props2.content;
+          content = _this$props2.content,
+          shortcut = _this$props2.shortcut;
       return /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
         disabled: false,
         selected: isSelected,
-        title: label,
+        title: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+          description: label,
+          keymap: shortcut
+        }),
         "aria-label": label,
+        "aria-pressed": isSelected,
         onClick: this.onClick,
         iconBefore: content
       });

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

@@ -31,6 +31,8 @@ var _messages = require("./messages");
 
 var _styles = require("./styles");
 
+var _keymaps = require("../../keymaps");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -41,12 +43,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var alignmentOptions = [{
   title: _messages.alignmentMessages.alignLeft,
+  shortcut: _keymaps.alignLeft,
   value: 'start'
 }, {
   title: _messages.alignmentMessages.alignCenter,
   value: 'center'
 }, {
   title: _messages.alignmentMessages.alignRight,
+  shortcut: _keymaps.alignRight,
   value: 'end'
 }];
 
@@ -75,13 +79,15 @@ var Alignment = /*#__PURE__*/function (_PureComponent) {
         }
       }, alignmentOptions.map(function (alignment) {
         var value = alignment.value,
-            title = alignment.title;
+            title = alignment.title,
+            shortcut = alignment.shortcut;
         var message = intl.formatMessage(title);
         return /*#__PURE__*/_react.default.createElement(_AlignmentButton.default, {
           content: _iconMap.iconMap[value],
           key: value,
           value: value,
           label: message,
+          shortcut: shortcut,
           onClick: onClick,
           isSelected: value === selectedAlignment
         });

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

@@ -53,7 +53,7 @@ var _commonStyles = require("../../../plugins/table/ui/common-styles.css");
 
 var _WithFlash = _interopRequireDefault(require("../../WithFlash"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -165,7 +165,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         containerElement: _this.containerElement
       }), /*#__PURE__*/_react.default.createElement(_Toolbar2.MainToolbarCustomComponentsSlot, null, customPrimaryToolbarComponents)), /*#__PURE__*/_react.default.createElement(_Addon.ClickAreaBlock, {
         editorView: editorView
-      }, /*#__PURE__*/_react.default.createElement(_editorCommon.WidthConsumer, null, function (_ref2) {
+      }, /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
         var width = _ref2.width;
         return /*#__PURE__*/_react.default.createElement(ContentArea, {
           innerRef: function innerRef(ref) {

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

@@ -95,7 +95,7 @@ var FullPageEditor = /*#__PURE__*/function (_React$Component) {
       return false;
     }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function () {
-      _this.scheduledKeylineUpdate = _this.updateToolbarKeyline();
+      _this.updateToolbarKeyline();
     });
     return _this;
   }
@@ -109,10 +109,7 @@ var FullPageEditor = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       window.removeEventListener('resize', this.handleResize);
-
-      if (this.scheduledKeylineUpdate) {
-        cancelAnimationFrame(this.scheduledKeylineUpdate);
-      }
+      this.updateToolbarKeyline.cancel();
     }
   }, {
     key: "render",

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FullPageContentArea = exports.CONTENT_AREA_TEST_ID = void 0;
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _context = require("../../ContextPanel/context");
 
@@ -27,7 +27,7 @@ var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 exports.CONTENT_AREA_TEST_ID = CONTENT_AREA_TEST_ID;
 
 var FullPageContentArea = /*#__PURE__*/_react.default.memo(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_editorCommon.WidthConsumer, null, function (_ref) {
+  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
     return /*#__PURE__*/_react.default.createElement(_context.ContextPanelConsumer, null, function (_ref2) {
       var positionedOverEditor = _ref2.positionedOverEditor;

package/dist/cjs/ui/AppearanceComponents/Mobile.js

@@ -49,11 +49,13 @@ function MobileAppearance(_ref) {
         mobileDimensions = _ref2.mobileDimensions;
     var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
     var minHeight = 100;
+    var currentIsExpanded = true; // isExpanded prop should always be true for Hybrid Editor
 
     if (mobileDimensions) {
       var keyboardHeight = mobileDimensions.keyboardHeight,
           windowHeight = mobileDimensions.windowHeight,
-          mobilePaddingTop = mobileDimensions.mobilePaddingTop;
+          mobilePaddingTop = mobileDimensions.mobilePaddingTop,
+          isExpanded = mobileDimensions.isExpanded;
       /*
         We calculate the min-height based on the windowHeight - keyboardHeight - paddingTop.
         This is needed due to scrolling issues when there is no content to scroll (like, only having 1 paragraph),
@@ -61,9 +63,16 @@ function MobileAppearance(_ref) {
         is scrolled nevertheless, and it gives the sensation that the content was lost.
       */
 
-      var keyboardHeightVh = keyboardHeight * 100 / windowHeight;
-      var paddingVh = mobilePaddingTop * 100 / windowHeight;
-      minHeight = 100 - keyboardHeightVh - paddingVh;
+      if (!persistScrollGutter) {
+        // in iOS Hybrid Editor windowHeight doesn't exclude keyboardHeight
+        // in Android keyboardHeight is always set to -1;
+        minHeight = windowHeight - keyboardHeight - 2 * mobilePaddingTop;
+      } else {
+        // in iOS Compact Editor windowHeight excludes keyboardHeight
+        minHeight = windowHeight - mobilePaddingTop; // isExpanded can be true of false for Compact editor
+
+        currentIsExpanded = isExpanded;
+      }
     }
 
     return /*#__PURE__*/_react.default.createElement(_WithFlash.default, {
@@ -74,7 +83,8 @@ function MobileAppearance(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_Addon.ClickAreaMobile, {
       editorView: editorView || undefined,
       minHeight: minHeight,
-      persistScrollGutter: persistScrollGutter
+      persistScrollGutter: persistScrollGutter,
+      isExpanded: currentIsExpanded
     }, /*#__PURE__*/_react.default.createElement(ContentArea, null, /*#__PURE__*/_react.default.createElement("div", {
       className: "ak-editor-content-area"
     }, children)))));

package/dist/cjs/ui/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.panelBackgroundPalette = void 0;
+exports.panelDarkModeBackgroundPalette = exports.panelBackgroundPalette = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -13,76 +13,147 @@ var _theme = require("@atlaskit/theme");
 
 var _common = require("./common");
 
+var _styles = require("@atlaskit/editor-common/styles");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var panelBackgroundPalette = [{
-  label: 'Doctor',
+  label: 'White',
   value: _theme.colors.N0
 }, {
-  label: 'Pixie dust',
+  label: 'Light blue',
   value: _theme.colors.B50
 }, {
-  label: "Gram's sofa",
+  label: 'Light teal',
   value: _theme.colors.T50
 }, {
-  label: 'The smell',
+  label: 'Light green',
   value: _theme.colors.G50
 }, {
-  label: 'James blonde',
+  label: 'Light yellow',
   value: _theme.colors.Y50
 }, {
-  label: 'Rosie',
+  label: 'Light red',
   value: _theme.colors.R50
 }, {
-  label: 'Lavender secret',
+  label: 'Light purple',
   value: _theme.colors.P50
 }, {
-  label: "Gram's hair",
+  label: 'Light gray',
   value: _theme.colors.N20
 }, {
-  label: 'Schwag',
+  label: 'Blue',
   value: _theme.colors.B75
 }, {
-  label: 'Arctic chill',
+  label: 'Teal',
   value: _theme.colors.T75
 }, {
-  label: 'Mintie',
+  label: 'Green',
   value: _theme.colors.G75
 }, {
-  label: 'Dandelion whisper',
+  label: 'Yellow',
   value: _theme.colors.Y75
 }, {
-  label: 'Bondi sunburn',
+  label: 'Red',
   value: _theme.colors.R75
 }, {
-  label: 'Phantom mist',
+  label: 'Purple',
   value: _theme.colors.P75
 }, {
-  label: 'Sentinel',
+  label: 'Gray',
   value: _theme.colors.N60
 }, {
-  label: 'Arvo breeze',
+  label: 'Dark blue',
   value: _theme.colors.B100
 }, {
-  label: 'Hairy fairy',
+  label: 'Dark teal',
   value: _theme.colors.T100
 }, {
-  label: 'Green tea',
+  label: 'Dark green',
   value: _theme.colors.G200
 }, {
-  label: 'Pub mix',
+  label: 'Dark yellow',
   value: _theme.colors.Y200
 }, {
-  label: 'Alexandria',
+  label: 'Dark red',
   value: _theme.colors.R100
 }, {
-  label: 'Herky jerky',
+  label: 'Dark purple',
   value: _theme.colors.P100
 }].map(function (color) {
   return _objectSpread(_objectSpread({}, color), {}, {
     border: _common.DEFAULT_BORDER_COLOR
   });
 });
-exports.panelBackgroundPalette = panelBackgroundPalette;
+exports.panelBackgroundPalette = panelBackgroundPalette;
+var panelDarkModeBackgroundPalette = [{
+  label: 'Dark gray',
+  value: _styles.darkPanelColors.DarkGray
+}, {
+  label: 'Dark blue',
+  value: _styles.darkPanelColors.B1200S
+}, {
+  label: 'Dark teal',
+  value: _styles.darkPanelColors.T1200S
+}, {
+  label: 'Dark green',
+  value: _styles.darkPanelColors.G1200S
+}, {
+  label: 'Dark yellow',
+  value: _styles.darkPanelColors.Y1200S
+}, {
+  label: 'Dark red',
+  value: _styles.darkPanelColors.R1200S
+}, {
+  label: 'Dark purple',
+  value: _styles.darkPanelColors.P1200S
+}, {
+  label: 'Gray',
+  value: _styles.darkPanelColors.Gray
+}, {
+  label: 'blue',
+  value: _styles.darkPanelColors.B900
+}, {
+  label: 'teal',
+  value: _styles.darkPanelColors.T900
+}, {
+  label: 'green',
+  value: _styles.darkPanelColors.G900
+}, {
+  label: 'yellow',
+  value: _styles.darkPanelColors.Y900
+}, {
+  label: 'red',
+  value: _styles.darkPanelColors.R900
+}, {
+  label: 'purple',
+  value: _styles.darkPanelColors.P900
+}, {
+  label: 'Light gray',
+  value: _styles.darkPanelColors.LightGray
+}, {
+  label: 'Light blue',
+  value: _styles.darkPanelColors.B800S
+}, {
+  label: 'Light teal',
+  value: _styles.darkPanelColors.T900S
+}, {
+  label: 'Light green',
+  value: _styles.darkPanelColors.G900S
+}, {
+  label: 'Light yellow',
+  value: _styles.darkPanelColors.Y800S
+}, {
+  label: 'Light red',
+  value: _styles.darkPanelColors.R800S
+}, {
+  label: 'Light purple',
+  value: _styles.darkPanelColors.P800S
+}].map(function (color) {
+  return _objectSpread(_objectSpread({}, color), {}, {
+    border: _common.DEFAULT_BORDER_COLOR
+  });
+});
+exports.panelDarkModeBackgroundPalette = panelDarkModeBackgroundPalette;

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

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 
@@ -57,7 +57,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
     setIsPopupOpen(!isPopupOpen);
   };
 
-  var ColorPaletteWithListeners = (0, _editorCommon.withOuterListeners)(_ColorPalette.default);
+  var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_ColorPalette.default);
 
   var onColorSelected = function onColorSelected(color, label) {
     setIsPopupOpen(false);
@@ -91,7 +91,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
       return;
     }
 
-    return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+    return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
       target: buttonRef.current,
       fitHeight: 350,
       fitWidth: 350,

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

@@ -27,7 +27,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _droplist = _interopRequireDefault(require("@atlaskit/droplist"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _withOuterListeners = _interopRequireDefault(require("../with-outer-listeners"));
 
@@ -86,7 +86,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
           fitHeight = _this$props.fitHeight,
           fitWidth = _this$props.fitWidth,
           zIndex = _this$props.zIndex;
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.Popup, {
+      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
         target: target,
         mountTo: mountTo,
         boundariesElement: boundariesElement,