@atlaskit/editor-core 172.1.1 → 172.2.0

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

@@ -1,294 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = require("@emotion/react");
-
-var _DropList = _interopRequireDefault(require("../DropList"));
-
-var _menu = require("@atlaskit/menu");
-
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
-var _ui = require("@atlaskit/editor-common/ui");
-
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
-var _withOuterListeners = _interopRequireDefault(require("../with-outer-listeners"));
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _components = require("@atlaskit/theme/components");
-
-var _tokens = require("@atlaskit/tokens");
-
-var _excluded = ["children"];
-
-var _templateObject, _templateObject2, _templateObject3;
-
-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; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
-
-var buttonStyles = function buttonStyles(isActive) {
-  return function (theme) {
-    if (isActive) {
-      /**
-       * Hack for item to imitate old dropdown-menu selected styles
-       */
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n    "])), (0, _tokens.token)('color.background.selected', '#6c798f'), (0, _tokens.token)('color.text', '#fff'));
-    } else {
-      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      > span:active[aria-disabled='false'] {\n        background-color: ", ";\n      }\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n    "])), (0, _components.themed)({
-        light: (0, _tokens.token)('color.text', _colors.N900),
-        dark: (0, _tokens.token)('color.text', _colors.DN600)
-      })(theme), (0, _components.themed)({
-        light: (0, _tokens.token)('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)'),
-        dark: (0, _tokens.token)('color.background.neutral.subtle.hovered', 'rgb(59, 71, 92)')
-      })(theme), (0, _components.themed)({
-        light: (0, _tokens.token)('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)'),
-        dark: (0, _tokens.token)('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)')
-      })(theme), (0, _components.themed)({
-        light: (0, _tokens.token)('color.text.disabled', _colors.N70),
-        dark: (0, _tokens.token)('color.text.disabled', _colors.DN80)
-      })(theme));
-    }
-  };
-};
-
-var DropListWithOutsideListeners = (0, _withOuterListeners.default)(_DropList.default);
-/**
- * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
- * dropdown-menu outside of "overflow: hidden" containers when needed.
- *
- * Also it controls popper's placement.
- */
-
-var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(DropdownMenuWrapper, _PureComponent);
-
-  var _super = _createSuper(DropdownMenuWrapper);
-
-  function DropdownMenuWrapper() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, DropdownMenuWrapper);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      popupPlacement: ['bottom', 'left']
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRef", function (target) {
-      _this.setState({
-        target: target || undefined
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updatePopupPlacement", function (placement) {
-      var previousPlacement = _this.state.popupPlacement;
-
-      if (placement[0] !== previousPlacement[0] || placement[1] !== previousPlacement[1]) {
-        _this.setState({
-          popupPlacement: placement
-        });
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClose", function () {
-      if (_this.props.onOpenChange) {
-        _this.props.onOpenChange({
-          isOpen: false
-        });
-      }
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(DropdownMenuWrapper, [{
-    key: "renderDropdownMenu",
-    value: function renderDropdownMenu() {
-      var _this2 = this;
-
-      var _this$state = this.state,
-          target = _this$state.target,
-          popupPlacement = _this$state.popupPlacement;
-      var _this$props = this.props,
-          items = _this$props.items,
-          mountTo = _this$props.mountTo,
-          boundariesElement = _this$props.boundariesElement,
-          scrollableElement = _this$props.scrollableElement,
-          offset = _this$props.offset,
-          fitHeight = _this$props.fitHeight,
-          fitWidth = _this$props.fitWidth,
-          isOpen = _this$props.isOpen,
-          zIndex = _this$props.zIndex,
-          shouldUseDefaultRole = _this$props.shouldUseDefaultRole;
-      return (0, _react2.jsx)(_ui.Popup, {
-        target: isOpen ? target : undefined,
-        mountTo: mountTo,
-        boundariesElement: boundariesElement,
-        scrollableElement: scrollableElement,
-        onPlacementChanged: this.updatePopupPlacement,
-        fitHeight: fitHeight,
-        fitWidth: fitWidth,
-        zIndex: zIndex || _editorSharedStyles.akEditorFloatingPanelZIndex,
-        offset: offset
-      }, (0, _react2.jsx)(DropListWithOutsideListeners, {
-        isOpen: true,
-        appearance: "tall",
-        position: popupPlacement.join(' '),
-        shouldFlip: false,
-        shouldFitContainer: true,
-        isTriggerNotTabbable: true,
-        handleClickOutside: this.handleClose,
-        handleEscapeKeydown: this.handleClose
-      }, (0, _react2.jsx)("div", {
-        style: {
-          height: 0,
-          minWidth: fitWidth || 0
-        }
-      }), items.map(function (group, index) {
-        return (0, _react2.jsx)(_menu.MenuGroup, {
-          key: index,
-          role: shouldUseDefaultRole ? 'group' : 'menu'
-        }, group.items.map(function (item) {
-          var _item$key;
-
-          return (0, _react2.jsx)(DropdownMenuItem, {
-            key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : String(item.content),
-            item: item,
-            onItemActivated: _this2.props.onItemActivated,
-            shouldUseDefaultRole: _this2.props.shouldUseDefaultRole,
-            onMouseEnter: _this2.props.onMouseEnter,
-            onMouseLeave: _this2.props.onMouseLeave
-          });
-        }));
-      })));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          children = _this$props2.children,
-          isOpen = _this$props2.isOpen;
-      return (0, _react2.jsx)("div", {
-        css: wrapper
-      }, (0, _react2.jsx)("div", {
-        ref: this.handleRef
-      }, children), isOpen ? this.renderDropdownMenu() : null);
-    }
-  }]);
-  return DropdownMenuWrapper;
-}(_react.PureComponent);
-
-exports.default = DropdownMenuWrapper;
-
-var DropdownMenuItemCustomComponent = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var children = props.children,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return (0, _react2.jsx)("span", (0, _extends2.default)({
-    ref: ref
-  }, rest), children);
-});
-
-function DropdownMenuItem(_ref) {
-  var _item$key2;
-
-  var item = _ref.item,
-      onItemActivated = _ref.onItemActivated,
-      shouldUseDefaultRole = _ref.shouldUseDefaultRole,
-      _onMouseEnter = _ref.onMouseEnter,
-      _onMouseLeave = _ref.onMouseLeave;
-
-  // onClick and value.name are the action indicators in the handlers
-  // If neither are present, don't wrap in an Item.
-  if (!item.onClick && !(item.value && item.value.name)) {
-    return (0, _react2.jsx)("span", {
-      key: String(item.content)
-    }, item.content);
-  }
-
-  var dropListItem = (0, _react2.jsx)("div", {
-    css: function css(theme) {
-      return buttonStyles(item.isActive)({
-        theme: theme
-      });
-    }
-  }, (0, _react2.jsx)(_menu.CustomItem, {
-    item: item,
-    key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),
-    role: shouldUseDefaultRole ? 'button' : 'menuitem',
-    iconBefore: item.elemBefore,
-    iconAfter: item.elemAfter,
-    isDisabled: item.isDisabled,
-    onClick: function onClick() {
-      return onItemActivated && onItemActivated({
-        item: item
-      });
-    },
-    "aria-label": item['aria-label'] || String(item.content),
-    "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
-    onMouseDown: function onMouseDown(e) {
-      e.preventDefault();
-    },
-    component: DropdownMenuItemCustomComponent,
-    onMouseEnter: function onMouseEnter() {
-      return _onMouseEnter && _onMouseEnter({
-        item: item
-      });
-    },
-    onMouseLeave: function onMouseLeave() {
-      return _onMouseLeave && _onMouseLeave({
-        item: item
-      });
-    }
-  }, item.content));
-
-  if (item.tooltipDescription) {
-    var _item$key3;
-
-    return (0, _react2.jsx)(_tooltip.default, {
-      key: (_item$key3 = item.key) !== null && _item$key3 !== void 0 ? _item$key3 : String(item.content),
-      content: item.tooltipDescription,
-      position: item.tooltipPosition
-    }, dropListItem);
-  }
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 
-  return dropListItem;
-}
+var _default = _uiMenu.DropdownMenu;
+exports.default = _default;

package/dist/cjs/ui/Toolbar/types.js

@@ -3,37 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToolbarWidthsFullPage = exports.ToolbarWidths = exports.ToolbarSize = void 0;
-var ToolbarSize;
-exports.ToolbarSize = ToolbarSize;
-
-(function (ToolbarSize) {
-  ToolbarSize[ToolbarSize["XXL"] = 6] = "XXL";
-  ToolbarSize[ToolbarSize["XL"] = 5] = "XL";
-  ToolbarSize[ToolbarSize["L"] = 4] = "L";
-  ToolbarSize[ToolbarSize["M"] = 3] = "M";
-  ToolbarSize[ToolbarSize["S"] = 2] = "S";
-  ToolbarSize[ToolbarSize["XXXS"] = 1] = "XXXS";
-})(ToolbarSize || (exports.ToolbarSize = ToolbarSize = {}));
-
-var ToolbarWidths;
-exports.ToolbarWidths = ToolbarWidths;
-
-(function (ToolbarWidths) {
-  ToolbarWidths[ToolbarWidths["XXL"] = 610] = "XXL";
-  ToolbarWidths[ToolbarWidths["XL"] = 540] = "XL";
-  ToolbarWidths[ToolbarWidths["L"] = 460] = "L";
-  ToolbarWidths[ToolbarWidths["M"] = 450] = "M";
-  ToolbarWidths[ToolbarWidths["S"] = 370] = "S";
-})(ToolbarWidths || (exports.ToolbarWidths = ToolbarWidths = {}));
-
-var ToolbarWidthsFullPage;
-exports.ToolbarWidthsFullPage = ToolbarWidthsFullPage;
+Object.defineProperty(exports, "ToolbarSize", {
+  enumerable: true,
+  get: function get() {
+    return _types.ToolbarSize;
+  }
+});
+Object.defineProperty(exports, "ToolbarWidths", {
+  enumerable: true,
+  get: function get() {
+    return _types.ToolbarWidths;
+  }
+});
+Object.defineProperty(exports, "ToolbarWidthsFullPage", {
+  enumerable: true,
+  get: function get() {
+    return _types.ToolbarWidthsFullPage;
+  }
+});
 
-(function (ToolbarWidthsFullPage) {
-  ToolbarWidthsFullPage[ToolbarWidthsFullPage["XXL"] = 650] = "XXL";
-  ToolbarWidthsFullPage[ToolbarWidthsFullPage["XL"] = 580] = "XL";
-  ToolbarWidthsFullPage[ToolbarWidthsFullPage["L"] = 540] = "L";
-  ToolbarWidthsFullPage[ToolbarWidthsFullPage["M"] = 490] = "M";
-  ToolbarWidthsFullPage[ToolbarWidthsFullPage["S"] = 410] = "S";
-})(ToolbarWidthsFullPage || (exports.ToolbarWidthsFullPage = ToolbarWidthsFullPage = {}));
+var _types = require("@atlaskit/editor-common/types");

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

@@ -1,129 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TOOLBAR_BUTTON = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = require("@emotion/react");
-
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
-var _analyticsListeners = require("@atlaskit/analytics-listeners");
-
-var _styles = _interopRequireDefault(require("./styles"));
-
-var _enums = require("../../plugins/analytics/types/enums");
-
-var _toolbarButton = require("../../plugins/analytics/types/toolbar-button");
-
-var _templateObject;
-
-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; }
-
-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 TOOLBAR_BUTTON = _toolbarButton.TOOLBAR_ACTION_SUBJECT_ID;
-exports.TOOLBAR_BUTTON = TOOLBAR_BUTTON;
-var buttonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n"])));
-
-var ToolbarButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var buttonId = props.buttonId,
-      testId = props.testId,
-      _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      href = props.href,
-      iconAfter = props.iconAfter,
-      iconBefore = props.iconBefore,
-      disabled = props.disabled,
-      selected = props.selected,
-      spacing = props.spacing,
-      target = props.target,
-      children = props.children,
-      hideTooltip = props.hideTooltip,
-      title = props.title,
-      _props$titlePosition = props.titlePosition,
-      titlePosition = _props$titlePosition === void 0 ? 'top' : _props$titlePosition,
-      item = props.item,
-      ariaLabel = props['aria-label'],
-      ariaHasPopup = props['aria-haspopup'],
-      ariaExpanded = props['aria-expanded'],
-      ariaPressed = props['aria-pressed'],
-      onClick = props.onClick,
-      onItemClick = props.onItemClick;
-  var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
-    if (disabled) {
-      return;
-    }
-
-    if (buttonId) {
-      analyticsEvent.update(function (payload) {
-        return _objectSpread(_objectSpread({}, payload), {}, {
-          action: _enums.ACTION.CLICKED,
-          actionSubject: _enums.ACTION_SUBJECT.TOOLBAR_BUTTON,
-          actionSubjectId: buttonId,
-          eventType: _enums.EVENT_TYPE.UI
-        });
-      }).fire(_analyticsListeners.FabricChannel.editor);
-    }
-
-    if (onClick) {
-      onClick(event);
-    }
-
-    if (item && onItemClick) {
-      onItemClick(item);
-    }
-  }, [disabled, onClick, onItemClick, item, buttonId]);
-  var id = buttonId ? "editor-toolbar__".concat(buttonId) : undefined;
-  var button = (0, _react2.jsx)(_styles.default, {
-    id: id,
-    ref: ref,
-    appearance: "subtle",
-    testId: testId,
-    className: className,
-    href: href,
-    iconAfter: iconAfter,
-    iconBefore: iconBefore,
-    isDisabled: disabled,
-    isSelected: selected,
-    onClick: handleClick,
-    spacing: spacing || 'default',
-    target: target,
-    shouldFitContainer: true,
-    "aria-expanded": ariaExpanded,
-    "aria-haspopup": ariaHasPopup,
-    "aria-label": ariaLabel,
-    "aria-pressed": ariaPressed
-  }, children);
-
-  if (!title) {
-    return button;
+Object.defineProperty(exports, "TOOLBAR_BUTTON", {
+  enumerable: true,
+  get: function get() {
+    return _uiMenu.TOOLBAR_BUTTON;
   }
-
-  var tooltipContent = !hideTooltip ? title : null;
-  return (0, _react2.jsx)(_tooltip.default, {
-    content: tooltipContent,
-    hideTooltipOnClick: true,
-    position: titlePosition
-  }, (0, _react2.jsx)("div", {
-    css: buttonWrapper
-  }, button));
 });
+exports.default = void 0;
+
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 
-var _default = ToolbarButton;
+var _default = _uiMenu.ToolbarButton;
 exports.default = _default;

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

@@ -31,8 +31,6 @@ var _eventDispatcher = require("../../event-dispatcher");
 
 var _analytics = require("../../plugins/analytics");
 
-var _consts = require("../../plugins/analytics/consts");
-
 var _pluginKey = require("../../plugins/analytics/plugin-key");
 
 var _getParticipantsCount = require("../../plugins/collab-edit/get-participants-count");
@@ -145,7 +143,7 @@ var WithPluginState = /*#__PURE__*/function (_React$Component) {
 
       if (eventDispatcher) {
         var dispatch = (0, _eventDispatcher.createDispatch)(eventDispatcher);
-        dispatch(_consts.analyticsEventKey, {
+        dispatch(_utils.analyticsEventKey, {
           payload: payload
         });
       }

package/dist/cjs/ui/styles.js

@@ -5,52 +5,60 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyle = exports.wrapperSmallStyle = exports.triggerWrapperStyles = exports.shortcutStyle = exports.separatorStyles = exports.scrollbarStyles = exports.expandIconWrapperStyle = exports.dropShadow = exports.clickSelectWrapperStyle = exports.cellColourPreviewStyles = exports.buttonGroupStyle = exports.buttonContentStyle = exports.buttonContentReducedSpacingStyle = void 0;
+exports.expandIconWrapperStyle = exports.dropShadow = exports.clickSelectWrapperStyle = exports.cellColourPreviewStyles = exports.buttonGroupStyle = exports.buttonContentStyle = exports.buttonContentReducedSpacingStyle = void 0;
+Object.defineProperty(exports, "scrollbarStyles", {
+  enumerable: true,
+  get: function get() {
+    return _scrollbar.scrollbarStyles;
+  }
+});
+exports.separatorStyles = void 0;
+Object.defineProperty(exports, "shortcutStyle", {
+  enumerable: true,
+  get: function get() {
+    return _shortcut.shortcutStyle;
+  }
+});
+exports.wrapperStyle = exports.wrapperSmallStyle = exports.triggerWrapperStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = require("@emotion/react");
 
-var _constants = require("@atlaskit/theme/constants");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+// TODO ED-15449 delete this style when deleting editor-core table
+var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
+};
 
-var akGridSize = (0, _constants.gridSize)() + 'px';
-var buttonGroupStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
+exports.cellColourPreviewStyles = cellColourPreviewStyles;
+var buttonGroupStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
 exports.buttonGroupStyle = buttonGroupStyle;
-var separatorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), (0, _tokens.token)('color.border', _colors.N30));
+var separatorStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), (0, _tokens.token)('color.border', _colors.N30));
 exports.separatorStyles = separatorStyles;
-var wrapperStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n\n  margin-left: 0;\n  min-width: auto;\n"])));
+var wrapperStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n\n  margin-left: 0;\n  min-width: auto;\n"])));
 exports.wrapperStyle = wrapperStyle;
-var wrapperSmallStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 4px;\n  min-width: 40px;\n"])));
+var wrapperSmallStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 4px;\n  min-width: 40px;\n"])));
 exports.wrapperSmallStyle = wrapperSmallStyle;
-var expandIconWrapperStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: -8px;\n"])));
+var expandIconWrapperStyle = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: -8px;\n"])));
 exports.expandIconWrapperStyle = expandIconWrapperStyle;
-var triggerWrapperStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+var triggerWrapperStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 exports.triggerWrapperStyles = triggerWrapperStyles;
-var buttonContentStyle = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  flex-direction: column;\n  padding: 6px;\n"])));
+var buttonContentStyle = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  flex-direction: column;\n  padding: 6px;\n"])));
 exports.buttonContentStyle = buttonContentStyle;
-var buttonContentReducedSpacingStyle = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px;\n"]))); // Taken from the style of inline dialog components
+var buttonContentReducedSpacingStyle = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px;\n"]))); // Taken from the style of inline dialog components
 
 exports.buttonContentReducedSpacingStyle = buttonContentReducedSpacingStyle;
-var dropShadow = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: ", ";\n"])), (0, _tokens.token)('elevation.shadow.overlay', "0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25)")); // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
-
+var dropShadow = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: ", ";\n"])), (0, _tokens.token)('elevation.shadow.overlay', "0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25)"));
 exports.dropShadow = dropShadow;
-var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)'), ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)'), ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)'), ";\n  }\n");
-exports.scrollbarStyles = scrollbarStyles;
-var shortcutStyle = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), (0, _tokens.token)('color.background.neutral', 'rgba(223, 225, 229, 0.5)'), (0, _tokens.token)('color.text.subtle', _colors.N100), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), _editorSharedStyles.akEditorMobileMaxWidth);
-exports.shortcutStyle = shortcutStyle;
 var clickSelectWrapperStyle = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: all;\n"])));
-exports.clickSelectWrapperStyle = clickSelectWrapperStyle;
-
-var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
-  return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
-};
-
-exports.cellColourPreviewStyles = cellColourPreviewStyles;
+exports.clickSelectWrapperStyle = clickSelectWrapperStyle;