@atlaskit/editor-common 69.2.1 → 69.3.0

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

@@ -0,0 +1,68 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import chromatism from 'chromatism';
+import { injectIntl } from 'react-intl-next';
+import { N0, N500 } from '@atlaskit/theme/colors';
+import Color from './Color';
+import { colorPaletteWrapper } from './styles';
+
+/**
+ * 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
+ */
+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
+    /** this is not new usage - old code extracted from editor-core */
+
+    /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+    ,
+    checkMarkColor: getContrastColor(value, [N0, N500])
+    /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+  })))));
+};
+
+export default injectIntl(ColorPalette);

package/dist/es2019/ui-color/ColorPalette/styles.js

@@ -0,0 +1,7 @@
+import { css } from '@emotion/react';
+import { gridSize } from '@atlaskit/theme/constants';
+export const colorPaletteWrapper = css`
+  padding: 0 ${gridSize()}px;
+  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */
+  display: flex;
+`;

package/dist/es2019/ui-color/index.js

@@ -0,0 +1,8 @@
+export { default as ColorPalette } from './ColorPalette';
+export { default as Color } from './ColorPalette/Color';
+export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/cellBackgroundColorPalette';
+export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
+export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
+export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
+export { textColorPalette, textColorPaletteExtended } from './ColorPalette/Palettes/textColorPalette';
+export { DEFAULT_BORDER_COLOR } from './ColorPalette/Palettes/common';

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

@@ -0,0 +1,83 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import { withReactEditorViewOuterListeners } from '../../ui-react';
+import DropdownList from '../../ui/DropList';
+import Popup from '../../ui/Popup';
+
+/**
+ * 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 = withReactEditorViewOuterListeners(Dropdown);
+export default DropdownWithOuterListeners;

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

@@ -0,0 +1,244 @@
+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 { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { CustomItem, MenuGroup } from '@atlaskit/menu';
+import { DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
+import Tooltip from '@atlaskit/tooltip';
+import { withReactEditorViewOuterListeners } from '../../ui-react';
+import DropList from '../../ui/DropList';
+import Popup from '../../ui/Popup';
+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 = withReactEditorViewOuterListeners(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;
+}

package/dist/es2019/ui-menu/DropdownMenu/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui-menu/ToolbarButton/index.js

@@ -0,0 +1,94 @@
+/** @jsx jsx */
+import React, { useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
+import { FabricChannel } from '@atlaskit/analytics-listeners';
+import Tooltip from '@atlaskit/tooltip';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
+import Button from './styles';
+export const TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
+const buttonWrapper = css`
+  display: flex;
+  height: 100%;
+`;
+const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    buttonId,
+    testId,
+    className = '',
+    href,
+    iconAfter,
+    iconBefore,
+    disabled,
+    selected,
+    spacing,
+    target,
+    children,
+    hideTooltip,
+    title,
+    titlePosition = 'top',
+    item,
+    'aria-label': ariaLabel,
+    'aria-haspopup': ariaHasPopup,
+    'aria-expanded': ariaExpanded,
+    'aria-pressed': ariaPressed,
+    onClick,
+    onItemClick
+  } = props;
+  const handleClick = useCallback((event, analyticsEvent) => {
+    if (disabled) {
+      return;
+    }
+
+    if (buttonId) {
+      analyticsEvent.update(payload => ({ ...payload,
+        action: ACTION.CLICKED,
+        actionSubject: ACTION_SUBJECT.TOOLBAR_BUTTON,
+        actionSubjectId: buttonId,
+        eventType: EVENT_TYPE.UI
+      })).fire(FabricChannel.editor);
+    }
+
+    if (onClick) {
+      onClick(event);
+    }
+
+    if (item && onItemClick) {
+      onItemClick(item);
+    }
+  }, [disabled, onClick, onItemClick, item, buttonId]);
+  const id = buttonId ? `editor-toolbar__${buttonId}` : undefined;
+  const button = jsx(Button, {
+    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;
+  }
+
+  const tooltipContent = !hideTooltip ? title : null;
+  return jsx(Tooltip, {
+    content: tooltipContent,
+    hideTooltipOnClick: true,
+    position: titlePosition
+  }, jsx("div", {
+    css: buttonWrapper
+  }, button));
+});
+export default ToolbarButton;

package/dist/es2019/ui-menu/ToolbarButton/styles.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+export default /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref
+  }, props, {
+    style: {
+      alignItems: 'center'
+    }
+  }));
+});

package/dist/es2019/ui-menu/index.js

@@ -0,0 +1,3 @@
+export { default as DropdownMenu } from '../ui-menu/DropdownMenu';
+export { default as ToolbarButton, TOOLBAR_BUTTON } from '../ui-menu/ToolbarButton';
+export { default as Dropdown } from './Dropdown';

package/dist/es2019/ui-react/ReactEditorViewContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+const ReactEditorViewContext = /*#__PURE__*/React.createContext({});
+export default ReactEditorViewContext;

package/dist/es2019/ui-react/index.js

@@ -0,0 +1,2 @@
+export { default as ReactEditorViewContext } from './ReactEditorViewContext';
+export { default as withReactEditorViewOuterListeners } from './with-react-editor-view-outer-listeners';

package/dist/es2019/ui-react/with-react-editor-view-outer-listeners.js

@@ -0,0 +1,103 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+import ReactEditorViewContext from './ReactEditorViewContext';
+
+class WithOutsideClick extends PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "handleClick", evt => {
+      if (!this.props.isActiveComponent) {
+        return;
+      }
+
+      const domNode = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
+
+      if (!domNode || evt.target instanceof Node && !domNode.contains(evt.target)) {
+        if (this.props.handleClickOutside) {
+          this.props.handleClickOutside(evt);
+        }
+      }
+    });
+
+    _defineProperty(this, "handleKeydown", evt => {
+      if (!this.props.isActiveComponent) {
+        return;
+      }
+
+      if (evt.code === 'Escape' && this.props.handleEscapeKeydown) {
+        var _this$props$editorVie;
+
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.props.handleEscapeKeydown(evt);
+
+        if (!((_this$props$editorVie = this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
+          var _this$props$editorVie2;
+
+          (_this$props$editorVie2 = this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
+        }
+
+        return false;
+      } else if (evt.code === 'Enter' && this.props.handleEnterKeydown) {
+        this.props.handleEnterKeydown(evt);
+      }
+    });
+  }
+
+  componentDidMount() {
+    if (this.props.handleClickOutside) {
+      document.addEventListener('click', this.handleClick, false);
+    }
+
+    if (this.props.handleEscapeKeydown) {
+      var _this$props$editorRef;
+
+      (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || document).addEventListener('keydown', this.handleKeydown, false);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.handleClickOutside) {
+      document.removeEventListener('click', this.handleClick, false);
+    }
+
+    if (this.props.handleEscapeKeydown) {
+      var _this$props$editorRef2;
+
+      (((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || document).removeEventListener('keydown', this.handleKeydown, false);
+    }
+  }
+
+  render() {
+    return this.props.children;
+  }
+
+}
+
+function hasIsOpen(props) {
+  return 'isOpen' in props;
+}
+
+export default function withReactEditorViewOuterListeners(Component) {
+  return ({
+    handleClickOutside,
+    handleEnterKeydown,
+    handleEscapeKeydown,
+    ...props
+  }) => {
+    const isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
+    return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, ({
+      editorView,
+      editorRef
+    }) => /*#__PURE__*/React.createElement(WithOutsideClick, {
+      editorView: editorView,
+      editorRef: editorRef,
+      isActiveComponent: isActiveComponent,
+      handleClickOutside: handleClickOutside,
+      handleEnterKeydown: handleEnterKeydown,
+      handleEscapeKeydown: handleEscapeKeydown
+    }, /*#__PURE__*/React.createElement(Component, props)));
+  };
+}