@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/es2019/plugins/floating-toolbar/ui/ConfirmationModal.js

@@ -1,36 +1,17 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/standard-button';
-import Modal, { ModalTransition, ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
-import messages from './messages';
+import { SimpleModal } from './SimpleModal';
+import { CheckboxModal } from './CheckboxModal';
+import { ModalTransition } from '@atlaskit/modal-dialog';
 
 const ConfirmationModalImpl = props => {
   const {
-    onConfirm,
-    onClose,
-    options,
-    intl: {
-      formatMessage
-    },
-    testId
+    options
   } = props;
-  const heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(messages.confirmModalDefaultHeading);
-  const okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
-  const cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
-  return /*#__PURE__*/React.createElement(ModalTransition, null, options && /*#__PURE__*/React.createElement(Modal, {
-    onClose: onClose,
-    testId: testId
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
-    appearance: "warning"
-  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options.message)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
-    appearance: "default",
-    onClick: onClose,
-    testId: testId ? `${testId}-cancel-button` : undefined
-  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
-    appearance: "warning",
-    onClick: onConfirm,
-    testId: testId ? `${testId}-confirm-button` : undefined
-  }, okButtonLabel))));
+
+  const renderModel = (isReferentialityDialog = false) => isReferentialityDialog ? /*#__PURE__*/React.createElement(CheckboxModal, props) : /*#__PURE__*/React.createElement(SimpleModal, props);
+
+  return options ? /*#__PURE__*/React.createElement(ModalTransition, null, renderModel(options === null || options === void 0 ? void 0 : options.isReferentialityDialog)) : null;
 };
 
 export const ConfirmationModal = injectIntl(ConfirmationModalImpl);

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

@@ -35,13 +35,15 @@ export default class Dropdown extends Component {
     _defineProperty(this, "renderArrayOptions", options => {
       const {
         showSelected,
-        dispatchCommand
+        dispatchCommand,
+        editorView
       } = this.props;
       return jsx(DropdownMenu, {
         hide: this.hide,
         dispatchCommand: dispatchCommand,
         items: options,
-        showSelected: showSelected
+        showSelected: showSelected,
+        editorView: editorView
       });
     });
 
@@ -64,6 +66,14 @@ export default class Dropdown extends Component {
 
       (_document$querySelect = document.querySelector(`[data-testid=${this.props.buttonTestId}]`)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.focus();
     });
+
+    _defineProperty(this, "onOpenChanged", openChangedEvent => {
+      if (!openChangedEvent.isOpen && openChangedEvent.event instanceof KeyboardEvent) {
+        var _openChangedEvent$eve;
+
+        ((_openChangedEvent$eve = openChangedEvent.event) === null || _openChangedEvent$eve === void 0 ? void 0 : _openChangedEvent$eve.key) === 'Escape' ? this.hideonEsc() : this.hide();
+      }
+    });
   }
 
   render() {
@@ -82,7 +92,8 @@ export default class Dropdown extends Component {
       disabled,
       tooltip,
       buttonTestId,
-      dropdownWidth
+      dropdownWidth,
+      editorView
     } = this.props;
     let trigger;
 
@@ -129,9 +140,11 @@ export default class Dropdown extends Component {
       isOpen: isOpen,
       handleClickOutside: this.hide,
       handleEscapeKeydown: this.hideonEsc,
+      onOpenChange: this.onOpenChanged,
       fitWidth: fitWidth + fitTolerance,
       fitHeight: fitHeight + fitTolerance,
-      trigger: trigger
+      trigger: trigger,
+      editorView: editorView
     }, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
       hide: this.hide,
       dispatchCommand

package/dist/es2019/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import { useState, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -8,7 +9,6 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
-import { token } from '@atlaskit/tokens';
 export const menuItemDimensions = {
   width: 175,
   height: 32
@@ -34,65 +34,110 @@ const menuContainer = css`
 export const itemSpacing = gridSize() / 2;
 const DropdownButtonItem = ButtonItem;
 
+const DropdownMenuItem = ({
+  item,
+  hide,
+  dispatchCommand,
+  editorView,
+  iconBefore
+}) => {
+  const [tooltipContent, setTooltipContent] = useState(item.tooltip || '');
+  const handleTooltipMouseOut = useCallback(() => {
+    setTooltipContent('');
+  }, []);
+  const handleItemMouseDown = useCallback(e => {
+    e.preventDefault();
+  }, []);
+  const handleItemMouseOver = useCallback(e => {
+    setTooltipContent(item.tooltip || '');
+
+    if (item.onMouseOver) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseOver);
+    }
+  }, [item.tooltip, item.onMouseOver, dispatchCommand]);
+  const handleItemMouseEnter = useCallback(e => {
+    if (item.onMouseEnter) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseEnter);
+    }
+  }, [item.onMouseEnter, dispatchCommand]);
+  const handleItemMouseLeave = useCallback(e => {
+    if (item.onMouseLeave) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseLeave);
+    }
+  }, [item.onMouseLeave, dispatchCommand]);
+  const handleItemOnFocus = useCallback(e => {
+    if (item.onFocus) {
+      e.preventDefault();
+      dispatchCommand(item.onFocus);
+    }
+  }, [item.onFocus, dispatchCommand]);
+  const handleItemOnBlur = useCallback(e => {
+    if (item.onBlur) {
+      e.preventDefault();
+      dispatchCommand(item.onBlur);
+    }
+  }, [item.onBlur, dispatchCommand]);
+  const handleItemClick = useCallback(() => {
+    /**
+     * The order of dispatching the event and hide() is important, because
+     * the ClickAreaBlock will be relying on the element to calculate the
+     * click coordinate.
+     * For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
+     */
+    dispatchCommand(item.onClick);
+    hide();
+
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+    }
+  }, [dispatchCommand, item.onClick, hide, editorView]);
+  const itemContent = jsx(DropdownButtonItem, {
+    iconBefore: iconBefore,
+    iconAfter: item.elemAfter,
+    onClick: handleItemClick,
+    "data-testid": item.testId,
+    isDisabled: item.disabled,
+    onMouseDown: handleItemMouseDown,
+    onMouseOver: handleItemMouseOver,
+    onMouseEnter: handleItemMouseEnter,
+    onMouseLeave: handleItemMouseLeave,
+    onFocus: handleItemOnFocus,
+    onBlur: handleItemOnBlur
+  }, item.title);
+
+  if (tooltipContent) {
+    return jsx(Tooltip, {
+      content: tooltipContent
+    }, jsx("div", {
+      onMouseOut: handleTooltipMouseOut
+    }, itemContent));
+  }
+
+  return itemContent;
+};
+
 class Dropdown extends Component {
   render() {
     const {
       hide,
       dispatchCommand,
       items,
-      intl
+      intl,
+      editorView
     } = this.props;
     return jsx("div", {
       css: menuContainer
-    }, items.filter(item => !item.hidden).map((item, idx) => {
-      const itemContent = jsx(DropdownButtonItem, {
-        key: idx,
-        iconBefore: this.renderSelected(item, intl),
-        iconAfter: item.elemAfter,
-        onClick: () => {
-          /**
-           * The order of dispatching the event and hide() is important, because
-           * the ClickAreaBlock will be relying on the element to calculate the
-           * click coordinate.
-           * For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
-           */
-          dispatchCommand(item.onClick);
-          hide();
-        },
-        "data-testid": item.testId,
-        isDisabled: item.disabled,
-        onMouseDown: e => {
-          e.preventDefault();
-        },
-        onMouseOver: e => {
-          if (item.onMouseOver) {
-            e.preventDefault();
-            dispatchCommand(item.onMouseOver);
-          }
-        },
-        onMouseEnter: e => {
-          if (item.onMouseEnter) {
-            e.preventDefault();
-            dispatchCommand(item.onMouseEnter);
-          }
-        },
-        onMouseLeave: e => {
-          if (item.onMouseLeave) {
-            e.preventDefault();
-            dispatchCommand(item.onMouseLeave);
-          }
-        }
-      }, item.title);
-
-      if (item.tooltip) {
-        return jsx(Tooltip, {
-          key: idx,
-          content: item.tooltip
-        }, itemContent);
-      }
-
-      return itemContent;
-    }));
+    }, items.filter(item => !item.hidden).map((item, idx) => jsx(DropdownMenuItem, {
+      key: idx,
+      item: item,
+      hide: hide,
+      dispatchCommand: dispatchCommand,
+      editorView: editorView,
+      iconBefore: this.renderSelected(item, intl)
+    })));
   }
 
   renderSelected(item, intl) {
@@ -105,7 +150,7 @@ class Dropdown extends Component {
 
     if (showSelected && selected) {
       return jsx(EditorDoneIcon, {
-        primaryColor: token('color.icon.selected', B400),
+        primaryColor: `var(--ds-icon-selected, ${B400})`,
         size: "small",
         label: intl.formatMessage(messages.confirmModalOK)
       });

package/dist/es2019/plugins/floating-toolbar/ui/EditorEmojiAddIcon.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { token } from '@atlaskit/tokens';
 export default function EditorEmojiAddIcon() {
   return /*#__PURE__*/React.createElement("svg", {
     width: 24,
@@ -10,7 +9,7 @@ export default function EditorEmojiAddIcon() {
   }, /*#__PURE__*/React.createElement("rect", {
     width: 24,
     height: 24,
-    fill: token('color.background.neutral.subtle', 'white'),
+    fill: "var(--ds-background-neutral-subtle, white)",
     fillOpacity: "0.01"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",

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

@@ -19,10 +19,10 @@ const emojiPickerWrapper = css`
   margin-bottom: -12px;
   margin-top: -4px;
 `;
+const EmojiPickerWithListener = withOuterListeners(EmojiPicker);
 export const EmojiPickerButton = props => {
   const buttonRef = React.useRef(null);
   const [isPopupOpen, setIsPopupOpen] = React.useState(false);
-  const EmojiPickerWithListener = withOuterListeners(EmojiPicker);
   React.useEffect(() => {
     if (props.setDisableParentScroll) {
       props.setDisableParentScroll(isPopupOpen);

package/dist/es2019/plugins/floating-toolbar/ui/ScrollButtons.js

@@ -2,7 +2,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { gridSize } from '@atlaskit/theme/constants';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
@@ -15,7 +14,7 @@ const toolbarScrollButtons = css`
   grid-template-columns: 1fr 1fr;
   grid-gap: ${akGridSize / 2}px;
   padding: ${akGridSize / 2}px ${akGridSize}px;
-  border-left: solid ${token('color.border', N30)} 1px;
+  border-left: solid ${`var(--ds-border, ${N30})`} 1px;
   flex-shrink: 0;
   align-items: center;
 `;
@@ -27,13 +26,10 @@ export default (({
   node,
   disabled
 }) => {
-  var _scrollContainerRef$c, _scrollContainerRef$c2;
-
   const buttonsContainerRef = useRef(null);
   const [needScroll, setNeedScroll] = useState(false);
   const [canScrollLeft, setCanScrollLeft] = useState(true);
   const [canScrollRight, setCanScrollRight] = useState(true);
-  const items = Array.from(((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : (_scrollContainerRef$c2 = _scrollContainerRef$c.firstChild) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.childNodes) || {});
   const scheduledSetCanScroll = rafSchedule(() => {
     const {
       scrollLeft,
@@ -47,87 +43,42 @@ export default (({
   const onScroll = () => scheduledSetCanScroll();
 
   const scrollLeft = () => {
-    // find the first item partially visible
-    for (const [itemIndex, item] of items.reverse().entries()) {
-      var _scrollContainerRef$c3;
-
-      const {
-        left: itemLeft,
-        width: itemWidth
-      } = item.getBoundingClientRect();
-      const {
-        left: scrollContainerLeft = 0,
-        width: scrollContainerWidth = 0
-      } = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.getBoundingClientRect()) || {}; // if item is partially visible on the left, scroll to it so it became the last item visible
-
-      if (itemLeft <= scrollContainerLeft) {
-        var _scrollContainerRef$c4, _scrollContainerRef$c5;
-
-        const gap = scrollContainerWidth - itemWidth;
-        let scrollTo = item.offsetLeft - gap; // if scrollTo is same as current scrollLeft
-
-        if (Math.floor(scrollTo) === Math.floor((scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : (_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.scrollLeft) || 0)) {
-          // if this is the first item, scroll to the beginning, otherwise find next item to scroll to
-          if (itemIndex === items.length - 1) {
-            scrollTo = 0;
-          } else {
-            continue;
-          }
-        }
+    var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
 
-        scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : (_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollTo({
-          top: 0,
-          left: scrollTo,
-          behavior: 'smooth'
-        });
-        break;
-      }
-    }
+    const {
+      width: scrollContainerWidth = 0
+    } = ((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.getBoundingClientRect()) || {};
+    const scrollLeft = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.scrollLeft) || 0; // scroll to current position - scroll container width
+
+    let scrollTo = scrollLeft - scrollContainerWidth;
+    (_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
   };
 
   const scrollRight = () => {
-    // find the last item partially visible
-    for (const item of items) {
-      var _scrollContainerRef$c6;
-
-      const {
-        left: itemLeft,
-        width: itemWidth
-      } = item.getBoundingClientRect();
-      const {
-        left: scrollContainerLeft = 0,
-        width: scrollContainerWidth = 0
-      } = ((_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.getBoundingClientRect()) || {}; // if item is partially visible on the right
+    var _scrollContainerRef$c4, _scrollContainerRef$c5, _scrollContainerRef$c6;
 
-      if (itemLeft + itemWidth >= scrollContainerLeft + scrollContainerWidth) {
-        var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
-
-        let scrollTo = item.offsetLeft; // if the item is longer than the entire container width, just scroll past it
-
-        if (itemWidth >= scrollContainerWidth && (((_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollLeft) || 0) >= itemLeft - 1) {
-          scrollTo = item.offsetLeft + item.offsetWidth;
-        } // if scrollTo is same as current scrollLeft, find next item to scroll to
-
-
-        if (Math.floor(scrollTo) === Math.floor((scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : (_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : _scrollContainerRef$c8.scrollLeft) || 0)) {
-          continue;
-        }
-
-        (_scrollContainerRef$c9 = scrollContainerRef.current) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.scrollTo({
-          top: 0,
-          left: scrollTo,
-          behavior: 'smooth'
-        });
-        break;
-      }
-    }
+    const {
+      width: scrollContainerWidth = 0
+    } = ((_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.getBoundingClientRect()) || {};
+    const scrollLeft = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollLeft) || 0; // scroll to current position + scroll container width
+
+    let scrollTo = scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
   };
 
   const resizeObserver = new ResizeObserver(t => {
-    var _scrollContainerRef$c10, _scrollContainerRef$c11, _scrollContainerRef$c12;
+    var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
 
-    const widthNeededToShowAllItems = ((_scrollContainerRef$c10 = scrollContainerRef.current) === null || _scrollContainerRef$c10 === void 0 ? void 0 : _scrollContainerRef$c10.scrollWidth) || 0;
-    const availableSpace = (_scrollContainerRef$c11 = scrollContainerRef.current) === null || _scrollContainerRef$c11 === void 0 ? void 0 : (_scrollContainerRef$c12 = _scrollContainerRef$c11.parentNode) === null || _scrollContainerRef$c12 === void 0 ? void 0 : _scrollContainerRef$c12.offsetWidth;
+    const widthNeededToShowAllItems = ((_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollWidth) || 0;
+    const availableSpace = (_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : (_scrollContainerRef$c9 = _scrollContainerRef$c8.parentNode) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.offsetWidth;
 
     if (availableSpace >= widthNeededToShowAllItems) {
       setNeedScroll(false);
@@ -160,7 +111,8 @@ export default (({
   }, [node, scrollContainerRef]);
   return needScroll ? jsx("div", {
     ref: buttonsContainerRef,
-    css: toolbarScrollButtons
+    css: toolbarScrollButtons,
+    className: "scroll-buttons"
   }, jsx(Button, {
     title: intl.formatMessage(messages.floatingToolbarScrollLeft),
     icon: jsx(LeftIcon, {

package/dist/es2019/plugins/floating-toolbar/ui/Separator.js

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const separator = css`
-  background: ${token('color.border', N30)};
+  background: ${`var(--ds-border, ${N30})`};
   width: 1px;
   height: 20px;
   margin: 0 4px;

package/dist/es2019/plugins/floating-toolbar/ui/SimpleModal.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+import Modal, { ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
+import messages from './messages';
+export const SimpleModal = props => {
+  const {
+    onConfirm,
+    onClose,
+    options,
+    intl: {
+      formatMessage
+    },
+    testId
+  } = props;
+  const heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(messages.confirmModalDefaultHeading);
+  const okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
+  const cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
+  return /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    onClick: onClose,
+    testId: testId ? `${testId}-cancel-button` : undefined
+  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: () => onConfirm(),
+    testId: testId ? `${testId}-confirm-button` : undefined
+  }, okButtonLabel)));
+};