@atlaskit/editor-core 171.0.1 → 172.0.0

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

@@ -0,0 +1,186 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { Component } from 'react';
+import { css, jsx } from '@emotion/react';
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import Layer from '../Layer';
+import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { N0, DN50, DN600, N50A, N60A, N900 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
+const packageName = "@atlaskit/editor-core";
+const packageVersion = "172.0.0";
+const halfFocusRing = 1;
+const dropOffset = `0, ${gridSize()}px`;
+
+class DropList extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "wrapperStyles", css`
+    ${this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'}
+    transition-duration: 0.2s;
+    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
+  `);
+
+    _defineProperty(this, "triggerStyles", css`
+    transition-duration: 0.2s;
+    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
+    ${this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'}
+  `);
+
+    _defineProperty(this, "menuWrapper", theme => {
+      return css`
+      color: ${themed({
+        light: token('color.text', N900),
+        dark: token('color.text', DN600)
+      })(theme)};
+      background-color: ${themed({
+        light: token('elevation.surface.overlay', N0),
+        dark: token('elevation.surface.overlay', DN50)
+      })(theme)};
+      border-radius: ${borderRadius()}px;
+      box-shadow: 0 ${gridSize() / 2}px ${gridSize()}px -${gridSize() / 4}px ${N50A},
+        0 0 1px ${N60A};
+      box-sizing: border-box;
+      overflow: auto;
+      padding: ${gridSize() / 2}px 0;
+      max-height: 90vh;
+    `;
+    });
+
+    _defineProperty(this, "componentDidMount", () => {
+      this.setContentWidth(); // We use a captured event here to avoid a radio or checkbox dropdown item firing its
+      // click event first, which would cause a re-render of the element and prevent DropList
+      // from detecting the actual source of this original click event.
+
+      document.addEventListener('click', this.handleClickOutside, true);
+      document.addEventListener('keydown', this.handleEsc);
+    });
+
+    _defineProperty(this, "componentDidUpdate", () => {
+      if (this.props.isOpen) {
+        this.setContentWidth();
+      }
+    });
+
+    _defineProperty(this, "componentWillUnmount", () => {
+      document.removeEventListener('click', this.handleClickOutside, true);
+      document.removeEventListener('keydown', this.handleEsc);
+    });
+
+    _defineProperty(this, "setContentWidth", () => {
+      const {
+        dropContentRef,
+        triggerRef
+      } = this;
+      const {
+        shouldFitContainer
+      } = this.props; // We need to manually set the content width to match the trigger width
+
+      if (shouldFitContainer && dropContentRef && triggerRef) {
+        dropContentRef.style.width = `${triggerRef.offsetWidth - halfFocusRing * 2}px`;
+      }
+    });
+
+    _defineProperty(this, "handleEsc", event => {
+      if ((event.key === 'Escape' || event.key === 'Esc') && this.props.isOpen) {
+        this.close(event);
+      }
+    });
+
+    _defineProperty(this, "handleClickOutside", event => {
+      if (this.props.isOpen) {
+        if (event.target instanceof Node) {
+          // Rather than check for the target within the entire DropList, we specify the trigger/content.
+          // This aids with future effort in scroll-locking DropList when isMenuFixed is enabled; the scroll
+          // blanket which stretches to the viewport should not stop 'close' from being triggered.
+          const withinTrigger = this.triggerRef && this.triggerRef.contains(event.target);
+          const withinContent = this.dropContentRef && this.dropContentRef.contains(event.target);
+
+          if (!withinTrigger && !withinContent) {
+            this.close(event);
+          }
+        }
+      }
+    });
+
+    _defineProperty(this, "close", event => {
+      if (this.props.onOpenChange) {
+        this.props.onOpenChange({
+          isOpen: false,
+          event
+        });
+      }
+    });
+
+    _defineProperty(this, "handleContentRef", ref => {
+      this.dropContentRef = ref; // If the dropdown has just been opened, we focus on the containing element so the
+      // user can tab to the first dropdown item. We will only receive this ref if isOpen
+      // is true or null, so no need to check for truthiness here.
+
+      if (ref) {
+        ref.focus();
+      }
+    });
+
+    _defineProperty(this, "handleTriggerRef", ref => {
+      this.triggerRef = ref;
+    });
+  }
+
+  getChildContext() {
+    return {
+      shouldAllowMultilineItems: false
+    };
+  }
+
+  render() {
+    const {
+      children,
+      isOpen,
+      position,
+      trigger,
+      onPositioned,
+      testId
+    } = this.props;
+    let layerContent = isOpen ? jsx("div", {
+      css: theme => this.menuWrapper({
+        theme: theme
+      }),
+      "data-role": "droplistContent",
+      "data-testid": testId && `${testId}--content`,
+      ref: this.handleContentRef
+    }, children) : null;
+    return jsx("div", {
+      css: this.wrapperStyles
+    }, jsx(Layer, {
+      content: layerContent,
+      offset: dropOffset,
+      position: position,
+      onPositioned: onPositioned
+    }, jsx("div", {
+      css: this.triggerStyles,
+      ref: this.handleTriggerRef
+    }, trigger)));
+  }
+
+}
+
+const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
+export default withAnalyticsContext({
+  componentName: 'droplist',
+  packageName,
+  packageVersion
+})(withAnalyticsEvents({
+  onOpenChange: createAndFireEventOnAtlaskit({
+    action: 'toggled',
+    actionSubject: 'droplist',
+    attributes: {
+      componentName: 'droplist',
+      packageName,
+      packageVersion
+    }
+  })
+})(DropList));

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

@@ -1,8 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { PureComponent } from 'react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
-import DropdownList from '@atlaskit/droplist';
+import { PureComponent } from 'react';
+import DropdownList from '../DropList';
 import { Popup } from '@atlaskit/editor-common/ui';
 import withOuterListeners from '../with-outer-listeners';
 
@@ -63,12 +62,9 @@ export class Dropdown extends PureComponent {
         minWidth: fitWidth || 0
       }
     }, /*#__PURE__*/React.createElement(DropdownList, {
-      disabled: true,
       isOpen: true,
       onOpenChange: onOpenChange,
-      appearance: "tall",
       position: popupPlacement.join(' '),
-      shouldFlip: false,
       shouldFitContainer: true
     }, children)));
   }

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

@@ -1,42 +1,63 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
-import { PureComponent } from 'react';
-import { css, jsx } from '@emotion/react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
-import DropList from '@atlaskit/droplist'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
-import Item, { ItemGroup } from '@atlaskit/item';
+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 DropListWithOutsideListeners = withOuterListeners(DropList);
-/**
- * Hack for item to imitate old dropdown-menu selected styles
- */
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4500
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-const itemWrapper = css`
-  && > span,
-  && > span:hover {
-    background: #6c798f;
-    color: #fff;
+const buttonStyles = isActive => theme => {
+  if (isActive) {
+    /**
+     * Hack for item to imitate old dropdown-menu selected styles
+     */
+    // TODO: https://product-fabric.atlassian.net/browse/DSP-4500
+
+    /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+    return css`
+      > span,
+      > span:hover {
+        background: #6c798f;
+        color: #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[aria-disabled='true'] {
+        color: ${themed({
+      light: token('color.text.disabled', N70),
+      dark: token('color.text.disabled', DN80)
+    })(theme)};
+      }
+    `;
   }
-`;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+};
 
-const itemContentWrapper = css`
-  margin-left: 8px;
-`;
+const DropListWithOutsideListeners = withOuterListeners(DropList);
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
  * dropdown-menu outside of "overflow: hidden" containers when needed.
@@ -79,56 +100,6 @@ export default class DropdownMenuWrapper extends PureComponent {
     });
   }
 
-  renderItem(item) {
-    const {
-      onItemActivated,
-      onMouseEnter,
-      onMouseLeave,
-      shouldUseDefaultRole
-    } = this.props; // 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: item.isActive ? itemWrapper : '',
-      key: item.key || item.content
-    }, jsx(Item, {
-      role: shouldUseDefaultRole ? 'button' : 'menuitem',
-      elemBefore: item.elemBefore,
-      elemAfter: item.elemAfter,
-      isDisabled: item.isDisabled,
-      onClick: () => onItemActivated && onItemActivated({
-        item
-      }),
-      onMouseEnter: () => onMouseEnter && onMouseEnter({
-        item
-      }),
-      onMouseLeave: () => onMouseLeave && onMouseLeave({
-        item
-      }),
-      className: item.className,
-      "aria-label": item.label || String(item.content),
-      "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined
-    }, jsx("span", {
-      css: !!item.elemBefore ? itemContentWrapper : ''
-    }, item.content)));
-
-    if (item.tooltipDescription) {
-      return jsx(Tooltip, {
-        key: item.key || item.content,
-        content: item.tooltipDescription,
-        position: item.tooltipPosition
-      }, dropListItem);
-    }
-
-    return dropListItem;
-  }
-
   renderDropdownMenu() {
     const {
       target,
@@ -170,10 +141,21 @@ export default class DropdownMenuWrapper extends PureComponent {
         height: 0,
         minWidth: fitWidth || 0
       }
-    }), items.map((group, index) => jsx(ItemGroup, {
+    }), items.map((group, index) => jsx(MenuGroup, {
       key: index,
       role: shouldUseDefaultRole ? 'group' : 'menu'
-    }, group.items.map(item => this.renderItem(item))))));
+    }, 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() {
@@ -188,4 +170,71 @@ export default class DropdownMenuWrapper extends PureComponent {
     }, 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/ElementBrowser/components/ElementList/ElementList.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import React, { Fragment, memo, useCallback, useEffect, useMemo } from 'react';
+import React, { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { Collection } from 'react-virtualized/dist/commonjs/Collection';
@@ -15,13 +15,13 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../..
 import IconFallback from '../../../../plugins/quick-insert/assets/fallback';
 import { itemIcon } from '../../../../plugins/type-ahead/ui/TypeAheadListItem';
 import { shortcutStyle } from '../../../styles';
-import { ELEMENT_LIST_PADDING, SCROLLBAR_THUMB_COLOR, SCROLLBAR_TRACK_COLOR, SCROLLBAR_WIDTH } from '../../constants';
+import { ELEMENT_LIST_PADDING, SCROLLBAR_WIDTH } from '../../constants';
 import useContainerWidth from '../../hooks/use-container-width';
 import useFocus from '../../hooks/use-focus';
 import { Modes } from '../../types';
 import cellSizeAndPositionGetter from './cellSizeAndPositionGetter';
 import EmptyState from './EmptyState';
-import { getColumnCount } from './utils';
+import { getColumnCount, getScrollbarWidth } from './utils';
 
 function ElementList({
   items,
@@ -39,6 +39,7 @@ function ElementList({
     containerWidth,
     ContainerWidthMonitor
   } = useContainerWidth();
+  const [scrollbarWidth, setScrollbarWidth] = useState(SCROLLBAR_WIDTH);
   const fullMode = mode === Modes.full;
   useEffect(() => {
     /**
@@ -47,8 +48,13 @@ function ElementList({
      **/
     if (fullMode && containerWidth > 0) {
       setColumnCount(getColumnCount(containerWidth));
+      const updatedScrollbarWidth = getScrollbarWidth();
+
+      if (updatedScrollbarWidth > 0) {
+        setScrollbarWidth(updatedScrollbarWidth);
+      }
     }
-  }, [fullMode, containerWidth, setColumnCount]);
+  }, [fullMode, containerWidth, setColumnCount, scrollbarWidth]);
   const onExternalLinkClick = useCallback(() => {
     fireAnalyticsEvent(createAnalyticsEvent)({
       payload: {
@@ -96,7 +102,7 @@ function ElementList({
   }) => jsx(Collection, {
     cellCount: items.length,
     cellRenderer: cellRenderer,
-    cellSizeAndPositionGetter: cellSizeAndPositionGetter(containerWidth),
+    cellSizeAndPositionGetter: cellSizeAndPositionGetter(containerWidth - ELEMENT_LIST_PADDING * 2, scrollbarWidth),
     height: height,
     width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
 
@@ -218,22 +224,6 @@ const ItemContent = /*#__PURE__*/memo(({
 }, keyshortcut))), description && jsx("p", {
   css: itemDescription
 }, description))));
-const scrollbarStyle = css`
-  ::-webkit-scrollbar {
-    width: ${SCROLLBAR_WIDTH}px;
-  }
-  ::-webkit-scrollbar-track-piece {
-    background: ${SCROLLBAR_TRACK_COLOR};
-  }
-  ::-webkit-scrollbar-thumb {
-    background: ${SCROLLBAR_THUMB_COLOR};
-  }
-
-  /** Firefox **/
-  scrollbar-color: ${SCROLLBAR_THUMB_COLOR} ${SCROLLBAR_TRACK_COLOR};
-
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-`;
 const elementItemsWrapper = css`
   flex: 1;
   flex-flow: row wrap;
@@ -243,7 +233,6 @@ const elementItemsWrapper = css`
   padding: ${ELEMENT_LIST_PADDING}px; // For Focus outline
 
   .ReactVirtualized__Collection {
-    ${scrollbarStyle};
     border-radius: 3px; // Standard border-radius across other components like Search or Item.
     outline: none;
 

package/dist/es2019/ui/ElementBrowser/components/ElementList/cellSizeAndPositionGetter.js

@@ -1,4 +1,4 @@
-import { ELEMENT_ITEM_HEIGHT, SCROLLBAR_WIDTH } from '../../constants';
+import { ELEMENT_ITEM_HEIGHT } from '../../constants';
 import { generateVirtualizedContainerDatum } from './utils';
 /**
  * Callback responsible for returning size and offset/position information
@@ -6,7 +6,7 @@ import { generateVirtualizedContainerDatum } from './utils';
  * https://github.com/bvaughn/react-virtualized/blob/master/docs/Collection.md
  **/
 
-export default function cellSizeAndPositionGetter(containerWidth) {
+export default function cellSizeAndPositionGetter(containerWidth, scrollbarWidth) {
   const GUTTER_SIZE = 4;
   /**
    * Save the currently rendered columnY positions.
@@ -22,7 +22,7 @@ export default function cellSizeAndPositionGetter(containerWidth) {
       availableWidth
     } = generateVirtualizedContainerDatum(containerWidth, {
       gutterSize: GUTTER_SIZE,
-      scrollbarWidth: SCROLLBAR_WIDTH
+      scrollbarWidth
     });
     const width = Math.floor(availableWidth / columnCount);
     const height = ELEMENT_ITEM_HEIGHT;

package/dist/es2019/ui/ElementBrowser/components/ElementList/utils.js

@@ -1,4 +1,4 @@
-import { ELEMENT_LIST_PADDING, FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS } from '../../constants';
+import { ELEMENT_LIST_PADDING, FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS, SCROLLBAR_WIDTH } from '../../constants';
 export function getColumnCount(clientWidth) {
   const {
     small,
@@ -25,9 +25,33 @@ export function generateVirtualizedContainerDatum(containerWidth, options) {
     scrollbarWidth
   } = options;
   const columnCount = getColumnCount(containerWidth);
-  const availableWidth = containerWidth - (scrollbarWidth + ELEMENT_LIST_PADDING * 2);
+  const availableWidth = containerWidth - (scrollbarWidth + ELEMENT_LIST_PADDING);
   return {
     availableWidth,
     columnCount
   };
+}
+let CALCULATED_SCROLLBAR_WIDTH;
+export function getScrollbarWidth() {
+  if (!CALCULATED_SCROLLBAR_WIDTH) {
+    var _container$parentNode;
+
+    const container = document.createElement('div');
+    container.style.visibility = 'hidden';
+    container.style.overflow = 'scroll';
+    document.body.appendChild(container);
+    const innerContainer = document.createElement('div');
+    container.appendChild(innerContainer);
+    const scrollbarWidth = container.offsetWidth - innerContainer.offsetWidth;
+    (_container$parentNode = container.parentNode) === null || _container$parentNode === void 0 ? void 0 : _container$parentNode.removeChild(container);
+
+    if (scrollbarWidth) {
+      CALCULATED_SCROLLBAR_WIDTH = scrollbarWidth;
+      return scrollbarWidth;
+    }
+
+    return SCROLLBAR_WIDTH;
+  } else {
+    return CALCULATED_SCROLLBAR_WIDTH;
+  }
 }

package/dist/es2019/ui/ElementBrowser/constants.js

@@ -17,10 +17,7 @@ export const SIDEBAR_HEADING_PADDING_LEFT = '12px';
 export const INLINE_SIDEBAR_HEIGHT = '54px';
 export const SEARCH_ITEM_MARGIN = '12px';
 export const SEARCH_ITEM_HEIGHT_WIDTH = '20px';
-export const SCROLLBAR_WIDTH = GRID_SIZE; // TODO: https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-365
-
-export const SCROLLBAR_THUMB_COLOR = '#eeeeee';
-export const SCROLLBAR_TRACK_COLOR = 'rgba(255, 255, 255, 0)';
+export const SCROLLBAR_WIDTH = 15;
 export const ELEMENT_LIST_PADDING = 2;
 export const MODAL_WRAPPER_PADDING = 16;
 export const ELEMENT_ITEM_HEIGHT = 75;