@atlaskit/editor-core 187.45.3 → 187.46.0

package/dist/esm/plugins/floating-toolbar/index.js

@@ -18,7 +18,7 @@ import { hideConfirmDialog } from './pm-plugins/toolbar-data/commands';
 import { ConfirmationModal } from './ui/ConfirmationModal';
 import { ToolbarLoader } from './ui/ToolbarLoader';
 import { findNode } from './utils';
-import { ErrorBoundary } from '../../ui/ErrorBoundary';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
 export var getRelevantConfig = function getRelevantConfig(selection, configs) {
   // node selections always take precedence, see if

package/dist/esm/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-factory.js

@@ -1,4 +1,4 @@
-import { pluginFactory } from '../../../../utils/plugin-state-factory';
+import { pluginFactory } from '@atlaskit/editor-common/utils';
 import { pluginKey } from './plugin-key';
 import { reducer } from './reducer';
 var _pluginFactory = pluginFactory(pluginKey, reducer),

package/dist/esm/plugins/floating-toolbar/ui/Dropdown.js

@@ -16,7 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import UiDropdown from '../../../ui/Dropdown';
+import { DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import DropdownMenu, { itemSpacing, menuItemDimensions } from './DropdownMenu';
 var dropdownExpandContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0px ", ";\n"])), "var(--ds-space-negative-050, -4px)");

package/dist/esm/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -10,11 +10,11 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { EmojiPicker } from '@atlaskit/emoji';
 import Tooltip from '@atlaskit/tooltip';
 import EditorEmojiAddIcon from './EditorEmojiAddIcon';
-import withOuterListeners from '../../../ui/with-outer-listeners';
+import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 
 // helps adjusts position of popup
 var emojiPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-var EmojiPickerWithListener = withOuterListeners(EmojiPicker);
+var EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPicker);
 export var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = React.useRef(null);
   var _React$useState = React.useState(false),

package/dist/esm/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react';
 import Loadable from 'react-loadable';
 import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
 import ButtonGroup from '@atlaskit/button/button-group';
-import { nodeToJSON } from '../../../utils';
+import { nodeToJSON } from '@atlaskit/editor-common/utils';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import Separator from './Separator';
 var noop = function noop() {

package/dist/esm/plugins/floating-toolbar/ui/Toolbar.js

@@ -26,8 +26,8 @@ import Select from './Select';
 import Separator from './Separator';
 import Input from './Input';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
-import ColorPickerButton from '../../../ui/ColorPickerButton';
-import { backgroundPaletteTooltipMessages } from '../../../ui/ColorPalette';
+import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
+import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
 import { EmojiPickerButton } from './EmojiPickerButton';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';

package/dist/esm/plugins/panel/toolbar.js

@@ -15,7 +15,7 @@ import { panelBackgroundPalette } from '../../ui/ColorPalette/Palettes/panelBack
 import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
 import { findPanel } from './utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';
+import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID, withAnalytics } from '../analytics';
 import { messages } from './message';

package/dist/esm/plugins/text-color/pm-plugins/main.js

@@ -4,8 +4,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { textColorPalette } from '../../../ui/ColorPalette/Palettes/textColorPalette';
-import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
+import { textColorPalette } from '@atlaskit/editor-common/ui-color';
+import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
 import { getDisabledState } from '../utils/disabled';
 export { DEFAULT_COLOR } from '../utils/color';

package/dist/esm/ui/ConfigPanel/Fields/ColorPicker.js

@@ -7,13 +7,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { jsx, css } from '@emotion/react';
 import { Fragment } from 'react';
 import { Field } from '@atlaskit/form';
-import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
+import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { validate as _validate } from '../utils';
 import { requiredIndicator } from './common/RequiredIndicator';
 import { headingSizes } from '@atlaskit/theme/typography';
 import FieldMessages from '../FieldMessages';
-import ColorPickerButton from '../../ColorPickerButton';
-import { chartsColorPaletteTooltipMessages } from '../../../ui/ColorPalette';
+import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
+import { chartsColorPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
 /*
     NOTE: color used here are not yet in atlaskit code
     this is part of extended color pack from ADG, which is yet to be release

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

@@ -1,22 +1,2 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
-import _extends from "@babel/runtime/helpers/extends";
-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) { _defineProperty(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; }
-import { Dropdown as DropdownComponent, KeyDownHandlerContext } from '@atlaskit/editor-common/ui-menu';
-import React, { useContext } from 'react';
-var Dropdown = /*#__PURE__*/React.memo(function (_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  var keyDownHandlerContext = useContext(KeyDownHandlerContext);
-  return (
-    /*#__PURE__*/
-    //This context is to handle the tab, Arrow Right/Left key events for dropdown.
-    //Default context has the void callbacks for above key events
-    React.createElement(DropdownComponent, _extends({
-      arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
-        keyDownHandlerContext: keyDownHandlerContext
-      })
-    }, props))
-  );
-});
+import { DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
 export default Dropdown;

package/dist/esm/utils/index.js

@@ -1,8 +1,7 @@
 import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
-import { JSONTransformer } from '@atlaskit/editor-json-transformer';
 import { FakeTextCursorSelection } from '../plugins/fake-text-cursor/cursor';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-export { isEmptyNode, isSelectionInsideLastNodeInDocument, checkNodeDown, insideTableCell, isInListItem } from '@atlaskit/editor-common/utils';
+export { isEmptyNode, isSelectionInsideLastNodeInDocument, checkNodeDown, insideTableCell, isInListItem, toJSON, nodeToJSON } from '@atlaskit/editor-common/utils';
 export { insideTable } from '@atlaskit/editor-common/core-utils';
 export { findFarthestParentNode, nodesBetweenChanged, getNodesCount } from './document';
 export { isParagraph, isText, isLinkMark } from './nodes';
@@ -61,13 +60,6 @@ export function isMarkTypeAllowedInCurrentSelection(markType, state) {
     return allowedInActiveMarks;
   });
 }
-var transformer = new JSONTransformer();
-export function toJSON(node) {
-  return transformer.encode(node);
-}
-export function nodeToJSON(node) {
-  return transformer.encodeNode(node);
-}
 
 /**
  * Repeating string for multiple times

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.45.3";
+export var version = "187.46.0";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/actions/index.d.ts

@@ -22,7 +22,7 @@ export default class EditorActions<T = any> implements EditorActionsOptions<T> {
     blur(): boolean;
     clear(): boolean;
     __temporaryFixForConfigPanel(): Promise<void>;
-    getValue(): Promise<import("@atlaskit/editor-json-transformer/types").JSONDocNode | T | undefined>;
+    getValue(): Promise<T | import("@atlaskit/editor-json-transformer/types").JSONDocNode | undefined>;
     getNodeByLocalId(id: string): Node | undefined;
     getNodeByFragmentLocalId(id: string): Node | undefined;
     /**

package/dist/types/plugins/find-replace/ui/FindReplaceToolbarButton.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
-import { FindReplaceProps } from './FindReplace';
-import { DispatchAnalyticsEvent } from '../../analytics/types';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { FindReplaceProps } from './FindReplace';
+import type { DispatchAnalyticsEvent } from '../../analytics/types';
 export interface FindReplaceToolbarButtonProps extends Omit<FindReplaceProps, 'count'> {
     index: number;
     numMatches: number;

package/dist/types/plugins/floating-toolbar/pm-plugins/toolbar-data/commands.d.ts

@@ -1,3 +1,3 @@
-import { Command } from '../../../../types/command';
+import { Command } from '@atlaskit/editor-common/types';
 export declare const showConfirmDialog: (buttonIndex: number) => Command;
 export declare const hideConfirmDialog: () => Command;

package/dist/types/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin.d.ts

@@ -1,3 +1,3 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { Dispatch } from '../../../../event-dispatcher';
+import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 export declare const createPlugin: (dispatch: Dispatch) => SafePlugin<import("@atlaskit/editor-plugin-floating-toolbar").FloatingToolbarPluginData>;

package/dist/types/plugins/text-color/pm-plugins/main.d.ts

@@ -1,7 +1,7 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { Dispatch } from '../../../event-dispatcher';
-import type { PaletteColor } from '../../../ui/ColorPalette/Palettes/type';
+import type { PaletteColor } from '@atlaskit/editor-common/ui-color';
 export { DEFAULT_COLOR } from '../utils/color';
 export type TextColorPluginState = {
     palette: Array<PaletteColor>;

package/dist/types/ui/ConfigPanel/Fields/ColorPicker.d.ts

@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/react';
 import type { ColorField } from '@atlaskit/editor-common/extensions';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import type { PaletteColor } from '../../../ui/ColorPalette/Palettes';
+import type { PaletteColor } from '@atlaskit/editor-common/ui-color';
 import type { OnFieldChange } from '../types';
 export declare const colorPalette: PaletteColor[];
 /**

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

@@ -1,7 +1,3 @@
-import React from 'react';
-declare const Dropdown: React.FC<any>;
-export type OpenChangedEvent = {
-    isOpen: boolean;
-    event: MouseEvent | KeyboardEvent;
-};
+import { DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
+export type { OpenChangedEvent } from '@atlaskit/editor-common/ui';
 export default Dropdown;

package/dist/types/utils/index.d.ts

@@ -1,7 +1,7 @@
-import type { MarkType, Node, ResolvedPos, Slice } from '@atlaskit/editor-prosemirror/model';
+import type { MarkType, ResolvedPos, Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
-import type { JSONDocNode, JSONNode } from '@atlaskit/editor-json-transformer';
-export { isEmptyNode, isSelectionInsideLastNodeInDocument, checkNodeDown, insideTableCell, isInListItem, } from '@atlaskit/editor-common/utils';
+import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
+export { isEmptyNode, isSelectionInsideLastNodeInDocument, checkNodeDown, insideTableCell, isInListItem, toJSON, nodeToJSON, } from '@atlaskit/editor-common/utils';
 export { insideTable } from '@atlaskit/editor-common/core-utils';
 export { findFarthestParentNode, nodesBetweenChanged, getNodesCount, } from './document';
 export { isParagraph, isText, isLinkMark } from './nodes';
@@ -16,8 +16,6 @@ export declare function getCursor(selection: Selection): ResolvedPos | undefined
  * allowed.
  */
 export declare function isMarkTypeAllowedInCurrentSelection(markType: MarkType, state: EditorState): boolean;
-export declare function toJSON(node: Node): JSONDocNode;
-export declare function nodeToJSON(node: Node): JSONNode;
 /**
  * Repeating string for multiple times
  */

package/dist/types-ts4.5/actions/index.d.ts

@@ -22,7 +22,7 @@ export default class EditorActions<T = any> implements EditorActionsOptions<T> {
     blur(): boolean;
     clear(): boolean;
     __temporaryFixForConfigPanel(): Promise<void>;
-    getValue(): Promise<import("@atlaskit/editor-json-transformer/types").JSONDocNode | T | undefined>;
+    getValue(): Promise<T | import("@atlaskit/editor-json-transformer/types").JSONDocNode | undefined>;
     getNodeByLocalId(id: string): Node | undefined;
     getNodeByFragmentLocalId(id: string): Node | undefined;
     /**

package/dist/types-ts4.5/plugins/find-replace/ui/FindReplaceToolbarButton.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
-import { FindReplaceProps } from './FindReplace';
-import { DispatchAnalyticsEvent } from '../../analytics/types';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { FindReplaceProps } from './FindReplace';
+import type { DispatchAnalyticsEvent } from '../../analytics/types';
 export interface FindReplaceToolbarButtonProps extends Omit<FindReplaceProps, 'count'> {
     index: number;
     numMatches: number;

package/dist/types-ts4.5/plugins/floating-toolbar/pm-plugins/toolbar-data/commands.d.ts

@@ -1,3 +1,3 @@
-import { Command } from '../../../../types/command';
+import { Command } from '@atlaskit/editor-common/types';
 export declare const showConfirmDialog: (buttonIndex: number) => Command;
 export declare const hideConfirmDialog: () => Command;

package/dist/types-ts4.5/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin.d.ts

@@ -1,3 +1,3 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { Dispatch } from '../../../../event-dispatcher';
+import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 export declare const createPlugin: (dispatch: Dispatch) => SafePlugin<import("@atlaskit/editor-plugin-floating-toolbar").FloatingToolbarPluginData>;

package/dist/types-ts4.5/plugins/text-color/pm-plugins/main.d.ts

@@ -1,7 +1,7 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { Dispatch } from '../../../event-dispatcher';
-import type { PaletteColor } from '../../../ui/ColorPalette/Palettes/type';
+import type { PaletteColor } from '@atlaskit/editor-common/ui-color';
 export { DEFAULT_COLOR } from '../utils/color';
 export type TextColorPluginState = {
     palette: Array<PaletteColor>;

package/dist/types-ts4.5/ui/ConfigPanel/Fields/ColorPicker.d.ts

@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/react';
 import type { ColorField } from '@atlaskit/editor-common/extensions';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import type { PaletteColor } from '../../../ui/ColorPalette/Palettes';
+import type { PaletteColor } from '@atlaskit/editor-common/ui-color';
 import type { OnFieldChange } from '../types';
 export declare const colorPalette: PaletteColor[];
 /**

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

@@ -1,7 +1,3 @@
-import React from 'react';
-declare const Dropdown: React.FC<any>;
-export type OpenChangedEvent = {
-    isOpen: boolean;
-    event: MouseEvent | KeyboardEvent;
-};
+import { DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
+export type { OpenChangedEvent } from '@atlaskit/editor-common/ui';
 export default Dropdown;

package/dist/types-ts4.5/utils/index.d.ts

@@ -1,7 +1,7 @@
-import type { MarkType, Node, ResolvedPos, Slice } from '@atlaskit/editor-prosemirror/model';
+import type { MarkType, ResolvedPos, Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
-import type { JSONDocNode, JSONNode } from '@atlaskit/editor-json-transformer';
-export { isEmptyNode, isSelectionInsideLastNodeInDocument, checkNodeDown, insideTableCell, isInListItem, } from '@atlaskit/editor-common/utils';
+import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
+export { isEmptyNode, isSelectionInsideLastNodeInDocument, checkNodeDown, insideTableCell, isInListItem, toJSON, nodeToJSON, } from '@atlaskit/editor-common/utils';
 export { insideTable } from '@atlaskit/editor-common/core-utils';
 export { findFarthestParentNode, nodesBetweenChanged, getNodesCount, } from './document';
 export { isParagraph, isText, isLinkMark } from './nodes';
@@ -16,8 +16,6 @@ export declare function getCursor(selection: Selection): ResolvedPos | undefined
  * allowed.
  */
 export declare function isMarkTypeAllowedInCurrentSelection(markType: MarkType, state: EditorState): boolean;
-export declare function toJSON(node: Node): JSONDocNode;
-export declare function nodeToJSON(node: Node): JSONNode;
 /**
  * Repeating string for multiple times
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.45.3",
+  "version": "187.46.0",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/date": "^0.10.0",
     "@atlaskit/datetime-picker": "^12.10.0",
-    "@atlaskit/editor-common": "^75.5.0",
+    "@atlaskit/editor-common": "^75.6.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-markdown-transformer": "^5.2.5",
     "@atlaskit/editor-palette": "1.5.1",

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

@@ -1,205 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
-var _ui = require("@atlaskit/editor-common/ui");
-var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _uiColor = require("@atlaskit/editor-common/ui-color");
-var _button = _interopRequireDefault(require("@atlaskit/button"));
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
-var _constants = require("@atlaskit/theme/constants");
-var _ColorPalette = _interopRequireDefault(require("../ColorPalette"));
-var _common = require("../ColorPalette/Palettes/common");
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _consts = require("../../plugins/analytics/consts");
-var _types = require("../../plugins/analytics/types");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-/** @jsx jsx */
-// helps adjusts position of popup
-var colorPickerButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
-var colorPickerExpandContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0px ", ";\n"])), "var(--ds-space-negative-050, -4px)");
-
-// Control the size of color picker buttons and preview
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4134
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-var colorPickerWrapper = function colorPickerWrapper(theme) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: ", " 0px;\n"])), (0, _constants.borderRadius)(), (0, _components.themed)({
-    light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
-  })(theme), _colors.N60A, _colors.N60A, "var(--ds-space-100, 8px)");
-};
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
-var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_ColorPalette.default);
-var ColorPickerButton = function ColorPickerButton(props) {
-  var buttonRef = _react.default.useRef(null);
-  var _React$useState = _react.default.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    isPopupOpen = _React$useState2[0],
-    setIsPopupOpen = _React$useState2[1];
-  var _React$useState3 = _react.default.useState(false),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    isPopupPositioned = _React$useState4[0],
-    setIsPopupPositioned = _React$useState4[1];
-  var _React$useState5 = _react.default.useState(false),
-    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-    isOpenedByKeyboard = _React$useState6[0],
-    setIsOpenedByKeyboard = _React$useState6[1];
-  var togglePopup = function togglePopup() {
-    setIsPopupOpen(!isPopupOpen);
-    if (!isPopupOpen) {
-      setIsOpenedByKeyboard(false);
-      setIsPopupPositioned(false);
-    }
-  };
-  _react.default.useEffect(function () {
-    if (props.setDisableParentScroll) {
-      props.setDisableParentScroll(isPopupOpen);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isPopupOpen]);
-  var focusButton = function focusButton() {
-    var _buttonRef$current;
-    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
-  };
-  var handleEsc = _react.default.useCallback(function () {
-    setIsOpenedByKeyboard(false);
-    setIsPopupPositioned(false);
-    setIsPopupOpen(false);
-    focusButton();
-  }, []);
-  var onPositionCalculated = _react.default.useCallback(function (position) {
-    setIsPopupPositioned(true);
-    return position;
-  }, []);
-  var onChange = props.onChange,
-    createAnalyticsEvent = props.createAnalyticsEvent,
-    colorPalette = props.colorPalette,
-    placement = props.placement,
-    skipFocusButtonAfterPick = props.skipFocusButtonAfterPick;
-  var onColorSelected = _react.default.useCallback(function (color, label) {
-    setIsOpenedByKeyboard(false);
-    setIsPopupOpen(false);
-    setIsPopupPositioned(false);
-    if (onChange) {
-      if (createAnalyticsEvent) {
-        // fire analytics
-        var payload = {
-          action: _types.ACTION.UPDATED,
-          actionSubject: _types.ACTION_SUBJECT.PICKER,
-          actionSubjectId: _types.ACTION_SUBJECT_ID.PICKER_COLOR,
-          attributes: {
-            color: color,
-            label: label,
-            placement: placement
-          },
-          eventType: _types.EVENT_TYPE.TRACK
-        };
-        createAnalyticsEvent(payload).fire(_consts.editorAnalyticsChannel);
-      }
-      var newPalette = colorPalette.find(function (colorPalette) {
-        return colorPalette.value === color;
-      });
-      newPalette && onChange(newPalette);
-    }
-    if (!skipFocusButtonAfterPick) {
-      focusButton();
-    }
-  }, [colorPalette, onChange, createAnalyticsEvent, placement, skipFocusButtonAfterPick]);
-  var renderPopup = function renderPopup() {
-    if (!isPopupOpen || !buttonRef.current) {
-      return;
-    }
-    var selectedColor = props.currentColor || null;
-    var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(props.colorPalette, selectedColor, props.cols),
-      selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
-      selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
-    return (0, _react2.jsx)(_ui.Popup, {
-      target: buttonRef.current,
-      fitHeight: 350,
-      fitWidth: 350,
-      offset: [0, 10],
-      alignX: props.alignX,
-      mountTo: props.setDisableParentScroll ? props.mountPoint : undefined
-      // Confluence inline comment editor has z-index: 500
-      // if the toolbar is scrollable, this will be mounted in the root editor
-      // we need an index of > 500 to display over it
-      ,
-      zIndex: props.setDisableParentScroll ? 600 : undefined,
-      ariaLabel: "Color picker popup",
-      onPositionCalculated: onPositionCalculated
-    }, (0, _react2.jsx)("div", {
-      css: colorPickerWrapper,
-      "data-test-id": "color-picker-menu"
-    }, (0, _react2.jsx)(_uiMenu.ArrowKeyNavigationProvider, {
-      type: _uiMenu.ArrowKeyNavigationType.COLOR,
-      selectedRowIndex: selectedRowIndex,
-      selectedColumnIndex: selectedColumnIndex,
-      closeOnTab: true,
-      handleClose: function handleClose() {
-        return setIsPopupOpen(false);
-      },
-      isOpenedByKeyboard: isOpenedByKeyboard,
-      isPopupPositioned: isPopupPositioned
-    }, (0, _react2.jsx)(ColorPaletteWithListeners, {
-      cols: props.cols,
-      selectedColor: selectedColor,
-      onClick: onColorSelected,
-      handleClickOutside: togglePopup,
-      handleEscapeKeydown: handleEsc,
-      paletteOptions: {
-        palette: props.colorPalette,
-        hexToPaletteColor: props.hexToPaletteColor,
-        paletteColorTooltipMessages: props.paletteColorTooltipMessages
-      }
-    }))));
-  };
-  var title = props.title || '';
-  var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  var buttonStyle = function buttonStyle(theme) {
-    var _props$size, _props$size2, _props$size3;
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 0 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), "var(--ds-background-neutral-subtle, transparent)", /* If custom props size height, override the button base height property */
-    !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", _common.DEFAULT_BORDER_COLOR, (0, _constants.borderRadius)(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px', "var(--ds-space-025, 2px)", (0, _components.themed)({
-      light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")"),
-      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
-    })(theme));
-  };
-  return (0, _react2.jsx)("div", {
-    css: colorPickerButtonWrapper
-  }, (0, _react2.jsx)(_tooltip.default, {
-    content: title,
-    position: "top"
-  }, (0, _react2.jsx)(_button.default, {
-    ref: buttonRef,
-    "aria-label": title,
-    spacing: "compact",
-    onClick: togglePopup,
-    onKeyDown: function onKeyDown(event) {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        togglePopup();
-        setIsOpenedByKeyboard(true);
-      }
-    },
-    css: buttonStyle,
-    iconAfter: (0, _react2.jsx)("span", {
-      css: colorPickerExpandContainer
-    }, (0, _react2.jsx)(_chevronDown.default, {
-      label: ""
-    }))
-  })), renderPopup());
-};
-var _default = (0, _analyticsNext.withAnalyticsContext)({
-  source: 'ConfigPanel'
-})((0, _analyticsNext.withAnalyticsEvents)()(ColorPickerButton));
-exports.default = _default;