@atlaskit/editor-core 172.1.1 → 172.2.0

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

@@ -1,137 +1 @@
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { colors } from '@atlaskit/theme';
-import { DEFAULT_BORDER_COLOR } from './common';
-import { darkPanelColors } from '@atlaskit/editor-common/panel';
-export const panelBackgroundPalette = [{
-  label: 'White',
-  value: colors.N0
-}, {
-  label: 'Light blue',
-  value: colors.B50
-}, {
-  label: 'Light teal',
-  value: colors.T50
-}, {
-  label: 'Light green',
-  value: colors.G50
-}, {
-  label: 'Light yellow',
-  value: colors.Y50
-}, {
-  label: 'Light red',
-  value: colors.R50
-}, {
-  label: 'Light purple',
-  value: colors.P50
-}, {
-  label: 'Light gray',
-  value: colors.N20
-}, {
-  label: 'Blue',
-  value: colors.B75
-}, {
-  label: 'Teal',
-  value: colors.T75
-}, {
-  label: 'Green',
-  value: colors.G75
-}, {
-  label: 'Yellow',
-  value: colors.Y75
-}, {
-  label: 'Red',
-  value: colors.R75
-}, {
-  label: 'Purple',
-  value: colors.P75
-}, {
-  label: 'Gray',
-  value: colors.N60
-}, {
-  label: 'Dark blue',
-  value: colors.B100
-}, {
-  label: 'Dark teal',
-  value: colors.T100
-}, {
-  label: 'Dark green',
-  value: colors.G200
-}, {
-  label: 'Dark yellow',
-  value: colors.Y200
-}, {
-  label: 'Dark red',
-  value: colors.R100
-}, {
-  label: 'Dark purple',
-  value: colors.P100
-}].map(color => ({ ...color,
-  border: DEFAULT_BORDER_COLOR
-}));
-export const panelDarkModeBackgroundPalette = [{
-  label: 'Dark gray',
-  value: darkPanelColors.DarkGray
-}, {
-  label: 'Dark blue',
-  value: darkPanelColors.B1200S
-}, {
-  label: 'Dark teal',
-  value: darkPanelColors.T1200S
-}, {
-  label: 'Dark green',
-  value: darkPanelColors.G1200S
-}, {
-  label: 'Dark yellow',
-  value: darkPanelColors.Y1200S
-}, {
-  label: 'Dark red',
-  value: darkPanelColors.R1200S
-}, {
-  label: 'Dark purple',
-  value: darkPanelColors.P1200S
-}, {
-  label: 'Gray',
-  value: darkPanelColors.Gray
-}, {
-  label: 'blue',
-  value: darkPanelColors.B900
-}, {
-  label: 'teal',
-  value: darkPanelColors.T900
-}, {
-  label: 'green',
-  value: darkPanelColors.G900
-}, {
-  label: 'yellow',
-  value: darkPanelColors.Y900
-}, {
-  label: 'red',
-  value: darkPanelColors.R900
-}, {
-  label: 'purple',
-  value: darkPanelColors.P900
-}, {
-  label: 'Light gray',
-  value: darkPanelColors.LightGray
-}, {
-  label: 'Light blue',
-  value: darkPanelColors.B800S
-}, {
-  label: 'Light teal',
-  value: darkPanelColors.T900S
-}, {
-  label: 'Light green',
-  value: darkPanelColors.G900S
-}, {
-  label: 'Light yellow',
-  value: darkPanelColors.Y800S
-}, {
-  label: 'Light red',
-  value: darkPanelColors.R800S
-}, {
-  label: 'Light purple',
-  value: darkPanelColors.P800S
-}].map(color => ({ ...color,
-  border: DEFAULT_BORDER_COLOR
-}));
+export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from '@atlaskit/editor-common/ui-color';

package/dist/es2019/ui/ColorPalette/Palettes/statusColorPalette.js

@@ -1,51 +1 @@
-import * as colors from '@atlaskit/theme/colors';
-export const lightModeStatusColorPalette = [{
-  label: 'neutral',
-  value: colors.N40,
-  border: colors.N400
-}, {
-  label: 'purple',
-  value: colors.P50,
-  border: colors.P400
-}, {
-  label: 'blue',
-  value: colors.B50,
-  border: colors.B400
-}, {
-  label: 'red',
-  value: colors.R50,
-  border: colors.R400
-}, {
-  label: 'yellow',
-  value: colors.Y75,
-  border: colors.Y400
-}, {
-  label: 'green',
-  value: colors.G50,
-  border: colors.G400
-}];
-export const darkModeStatusColorPalette = [{
-  label: 'neutral',
-  value: '#7F9BB4',
-  border: colors.N400
-}, {
-  label: 'purple',
-  value: '#282249',
-  border: colors.P400
-}, {
-  label: 'blue',
-  value: '#0C294F',
-  border: colors.B400
-}, {
-  label: 'red',
-  value: '#441C13',
-  border: colors.R400
-}, {
-  label: 'yellow',
-  value: '#413001',
-  border: colors.Y400
-}, {
-  label: 'green',
-  value: '#052E21',
-  border: colors.G400
-}];
+export { lightModeStatusColorPalette, darkModeStatusColorPalette } from '@atlaskit/editor-common/ui-color';

package/dist/es2019/ui/ColorPalette/Palettes/textColorPalette.js

@@ -1,25 +1 @@
-import { colorPalette, colorPaletteExtended } from '@atlaskit/adf-schema';
-import getColorMessage from './getColorMessage';
-import paletteMessages from './paletteMessages';
-import { DEFAULT_BORDER_COLOR } from './common';
-
-const mapPaletteColor = (label, color) => {
-  const key = label.toLowerCase().replace(' ', '-');
-  const message = getColorMessage(paletteMessages, key);
-  return {
-    value: color,
-    label,
-    border: DEFAULT_BORDER_COLOR,
-    message
-  };
-}; // row 1
-
-
-export const textColorPalette = [];
-export const textColorPaletteExtended = [];
-colorPalette.forEach((label, color) => {
-  textColorPalette.push(mapPaletteColor(label, color));
-});
-colorPaletteExtended.forEach((label, color) => {
-  textColorPaletteExtended.push(mapPaletteColor(label, color));
-});
+export { textColorPalette, textColorPaletteExtended } from '@atlaskit/editor-common/ui-color';

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

@@ -1,62 +1,2 @@
-/** @jsx jsx */
-import React from 'react';
-import { jsx } from '@emotion/react';
-import chromatism from 'chromatism';
-import Color from './Color';
-import { colorPaletteWrapper } from './styles';
-import { injectIntl } from 'react-intl-next';
-import { N0, N500 } from '@atlaskit/theme/colors';
-
-/**
- * For a given color pick the color from a list of colors with
- * the highest contrast
- *
- * @param color color string, suppports HEX, RGB, RGBA etc.
- * @return Highest contrast color in pool
- */
-export function getContrastColor(color, pool) {
-  return pool.sort((a, b) => chromatism.difference(b, color) - chromatism.difference(a, color))[0];
-}
-
-const ColorPalette = props => {
-  const {
-    palette,
-    cols = 7,
-    onClick,
-    selectedColor,
-    className,
-    intl: {
-      formatMessage
-    }
-  } = props;
-  const colorsPerRow = React.useMemo(() => {
-    return palette.reduce((resultArray, item, index) => {
-      const chunkIndex = Math.floor(index / cols);
-      resultArray[chunkIndex] = resultArray[chunkIndex] || []; // start a new chunk
-
-      resultArray[chunkIndex].push(item);
-      return resultArray;
-    }, []);
-  }, [palette, cols]);
-  return jsx(React.Fragment, null, colorsPerRow.map((row, rowIdx) => jsx("div", {
-    css: colorPaletteWrapper,
-    className: className,
-    key: `row-first-color-${row[0].value}`,
-    role: "radiogroup"
-  }, row.map(({
-    value,
-    label,
-    border,
-    message
-  }, colorIdx) => jsx(Color, {
-    key: value,
-    value: value,
-    borderColor: border,
-    label: message ? formatMessage(message) : label,
-    onClick: onClick,
-    isSelected: value === selectedColor,
-    checkMarkColor: getContrastColor(value, [N0, N500])
-  })))));
-};
-
-export default injectIntl(ColorPalette);
+import { ColorPalette } from '@atlaskit/editor-common/ui-color';
+export default ColorPalette;

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

@@ -1,84 +1,2 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { PureComponent } from 'react';
-import DropdownList from '../DropList';
-import { Popup } from '@atlaskit/editor-common/ui';
-import withOuterListeners from '../with-outer-listeners';
-
-/**
- * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
- * droplist outside of "overflow: hidden" containers when needed.
- *
- * Also it controls popper's placement.
- */
-export class Dropdown extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "handleRef", target => {
-      this.setState({
-        target: target || undefined
-      });
-    });
-
-    _defineProperty(this, "updatePopupPlacement", placement => {
-      this.setState({
-        popupPlacement: placement
-      });
-    });
-
-    this.state = {
-      popupPlacement: ['bottom', 'left']
-    };
-  }
-
-  renderDropdown() {
-    const {
-      target,
-      popupPlacement
-    } = this.state;
-    const {
-      children,
-      mountTo,
-      boundariesElement,
-      scrollableElement,
-      onOpenChange,
-      fitHeight,
-      fitWidth,
-      zIndex
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Popup, {
-      target: target,
-      mountTo: mountTo,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      onPlacementChanged: this.updatePopupPlacement,
-      fitHeight: fitHeight,
-      fitWidth: fitWidth,
-      zIndex: zIndex
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        height: 0,
-        minWidth: fitWidth || 0
-      }
-    }, /*#__PURE__*/React.createElement(DropdownList, {
-      isOpen: true,
-      onOpenChange: onOpenChange,
-      position: popupPlacement.join(' '),
-      shouldFitContainer: true
-    }, children)));
-  }
-
-  render() {
-    const {
-      trigger,
-      isOpen
-    } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      ref: this.handleRef
-    }, trigger), isOpen ? this.renderDropdown() : null);
-  }
-
-}
-const DropdownWithOuterListeners = withOuterListeners(Dropdown);
-export default DropdownWithOuterListeners;
+import { Dropdown } from '@atlaskit/editor-common/ui-menu';
+export default Dropdown;

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

@@ -1,244 +1,2 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-/** @jsx jsx */
-import React, { PureComponent } from 'react';
-import { css, jsx } from '@emotion/react';
-import DropList from '../DropList';
-import { CustomItem, MenuGroup } from '@atlaskit/menu';
-import Tooltip from '@atlaskit/tooltip';
-import { Popup } from '@atlaskit/editor-common/ui';
-import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
-import withOuterListeners from '../with-outer-listeners';
-import { DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
-const wrapper = css`
-  /* tooltip in ToolbarButton is display:block */
-  & > div > div {
-    display: flex;
-  }
-`;
-
-const buttonStyles = isActive => theme => {
-  if (isActive) {
-    /**
-     * Hack for item to imitate old dropdown-menu selected styles
-     */
-    return css`
-      > span,
-      > span:hover,
-      > span:active {
-        background: ${token('color.background.selected', '#6c798f')};
-        color: ${token('color.text', '#fff')};
-      }
-    `;
-  } else {
-    return css`
-      > span:hover[aria-disabled='false'] {
-        color: ${themed({
-      light: token('color.text', N900),
-      dark: token('color.text', DN600)
-    })(theme)};
-        background-color: ${themed({
-      light: token('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)'),
-      dark: token('color.background.neutral.subtle.hovered', 'rgb(59, 71, 92)')
-    })(theme)};
-      }
-      > span:active[aria-disabled='false'] {
-        background-color: ${themed({
-      light: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)'),
-      dark: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)')
-    })(theme)};
-      }
-      > span[aria-disabled='true'] {
-        color: ${themed({
-      light: token('color.text.disabled', N70),
-      dark: token('color.text.disabled', DN80)
-    })(theme)};
-      }
-    `;
-  }
-};
-
-const DropListWithOutsideListeners = withOuterListeners(DropList);
-/**
- * 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.
- */
-
-export default class DropdownMenuWrapper extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      popupPlacement: ['bottom', 'left']
-    });
-
-    _defineProperty(this, "handleRef", target => {
-      this.setState({
-        target: target || undefined
-      });
-    });
-
-    _defineProperty(this, "updatePopupPlacement", placement => {
-      const {
-        popupPlacement: previousPlacement
-      } = this.state;
-
-      if (placement[0] !== previousPlacement[0] || placement[1] !== previousPlacement[1]) {
-        this.setState({
-          popupPlacement: placement
-        });
-      }
-    });
-
-    _defineProperty(this, "handleClose", () => {
-      if (this.props.onOpenChange) {
-        this.props.onOpenChange({
-          isOpen: false
-        });
-      }
-    });
-  }
-
-  renderDropdownMenu() {
-    const {
-      target,
-      popupPlacement
-    } = this.state;
-    const {
-      items,
-      mountTo,
-      boundariesElement,
-      scrollableElement,
-      offset,
-      fitHeight,
-      fitWidth,
-      isOpen,
-      zIndex,
-      shouldUseDefaultRole
-    } = this.props;
-    return jsx(Popup, {
-      target: isOpen ? target : undefined,
-      mountTo: mountTo,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      onPlacementChanged: this.updatePopupPlacement,
-      fitHeight: fitHeight,
-      fitWidth: fitWidth,
-      zIndex: zIndex || akEditorFloatingPanelZIndex,
-      offset: offset
-    }, jsx(DropListWithOutsideListeners, {
-      isOpen: true,
-      appearance: "tall",
-      position: popupPlacement.join(' '),
-      shouldFlip: false,
-      shouldFitContainer: true,
-      isTriggerNotTabbable: true,
-      handleClickOutside: this.handleClose,
-      handleEscapeKeydown: this.handleClose
-    }, jsx("div", {
-      style: {
-        height: 0,
-        minWidth: fitWidth || 0
-      }
-    }), items.map((group, index) => jsx(MenuGroup, {
-      key: index,
-      role: shouldUseDefaultRole ? 'group' : 'menu'
-    }, group.items.map(item => {
-      var _item$key;
-
-      return jsx(DropdownMenuItem, {
-        key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : String(item.content),
-        item: item,
-        onItemActivated: this.props.onItemActivated,
-        shouldUseDefaultRole: this.props.shouldUseDefaultRole,
-        onMouseEnter: this.props.onMouseEnter,
-        onMouseLeave: this.props.onMouseLeave
-      });
-    })))));
-  }
-
-  render() {
-    const {
-      children,
-      isOpen
-    } = this.props;
-    return jsx("div", {
-      css: wrapper
-    }, jsx("div", {
-      ref: this.handleRef
-    }, children), isOpen ? this.renderDropdownMenu() : null);
-  }
-
-}
-const DropdownMenuItemCustomComponent = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    children,
-    ...rest
-  } = props;
-  return jsx("span", _extends({
-    ref: ref
-  }, rest), children);
-});
-
-function DropdownMenuItem({
-  item,
-  onItemActivated,
-  shouldUseDefaultRole,
-  onMouseEnter,
-  onMouseLeave
-}) {
-  var _item$key2;
-
-  // 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 jsx("span", {
-      key: String(item.content)
-    }, item.content);
-  }
-
-  const dropListItem = jsx("div", {
-    css: theme => buttonStyles(item.isActive)({
-      theme
-    })
-  }, jsx(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: () => onItemActivated && onItemActivated({
-      item
-    }),
-    "aria-label": item['aria-label'] || String(item.content),
-    "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
-    onMouseDown: e => {
-      e.preventDefault();
-    },
-    component: DropdownMenuItemCustomComponent,
-    onMouseEnter: () => onMouseEnter && onMouseEnter({
-      item
-    }),
-    onMouseLeave: () => onMouseLeave && onMouseLeave({
-      item
-    })
-  }, item.content));
-
-  if (item.tooltipDescription) {
-    var _item$key3;
-
-    return jsx(Tooltip, {
-      key: (_item$key3 = item.key) !== null && _item$key3 !== void 0 ? _item$key3 : String(item.content),
-      content: item.tooltipDescription,
-      position: item.tooltipPosition
-    }, dropListItem);
-  }
-
-  return dropListItem;
-}
+import { DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+export default DropdownMenu;

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

@@ -1,30 +1 @@
-export let 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 || (ToolbarSize = {}));
-
-export let 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 || (ToolbarWidths = {}));
-
-export let 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 || (ToolbarWidthsFullPage = {}));
+export { ToolbarSize, ToolbarWidths, ToolbarWidthsFullPage } from '@atlaskit/editor-common/types';