@atlaskit/editor-core 168.0.0 → 169.1.1

package/dist/es2019/plugins/toolbar-lists-indentation/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import ToolbarListsIndentation from './ui';
+import WithPluginState from '../../ui/WithPluginState';
+import { ToolbarSize } from '../../ui/Toolbar/types';
+import { pluginKey as listPluginKey } from '../list/pm-plugins/main';
+
+const toolbarListsIndentationPlugin = ({
+  showIndentationButtons
+}) => ({
+  name: 'toolbarListsIndentation',
+
+  primaryToolbarComponent({
+    editorView,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement,
+    toolbarSize,
+    disabled,
+    isToolbarReducedSpacing
+  }) {
+    const isSmall = toolbarSize < ToolbarSize.L;
+    return /*#__PURE__*/React.createElement(WithPluginState, {
+      plugins: {
+        listState: listPluginKey
+      },
+      render: ({
+        listState: listState
+      }) => {
+        if (!listState) {
+          return null;
+        }
+
+        return /*#__PURE__*/React.createElement(ToolbarListsIndentation, {
+          isSmall: isSmall,
+          isReducedSpacing: isToolbarReducedSpacing,
+          disabled: disabled,
+          editorView: editorView,
+          popupsMountPoint: popupsMountPoint,
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsScrollableElement: popupsScrollableElement,
+          bulletListActive: listState.bulletListActive,
+          bulletListDisabled: listState.bulletListDisabled,
+          orderedListActive: listState.orderedListActive,
+          orderedListDisabled: listState.orderedListDisabled,
+          showIndentationButtons: !!showIndentationButtons
+        });
+      }
+    });
+  }
+
+});
+
+export default toolbarListsIndentationPlugin;

package/dist/es2019/plugins/toolbar-lists-indentation/types.js

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

package/dist/es2019/plugins/toolbar-lists-indentation/ui/Toolbar.js

@@ -0,0 +1,94 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
+import NumberListIcon from '@atlaskit/icon/glyph/editor/number-list';
+import IndentIcon from '@atlaskit/icon/glyph/editor/indent';
+import OutdentIcon from '@atlaskit/icon/glyph/editor/outdent';
+import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, indent as toggleIndentKeymap, outdent as toggleOutdentKeymap, ToolTipContent } from '../../../keymaps';
+import ToolbarButton, { TOOLBAR_BUTTON } from '../../../ui/ToolbarButton';
+import { messages } from '../../list/messages';
+import { messages as indentationMessages } from '../../indentation/messages';
+import { buttonGroupStyle, separatorStyles } from '../../../ui/styles';
+export function Toolbar(props) {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    disabled,
+    isReducedSpacing,
+    bulletListActive,
+    bulletListDisabled,
+    orderedListActive,
+    orderedListDisabled,
+    showIndentationButtons,
+    onItemActivated
+  } = props;
+  const labelUnorderedList = formatMessage(messages.unorderedList);
+  const labelOrderedList = formatMessage(messages.orderedList);
+
+  const handleOnItemActivated = buttonName => event => onItemActivated({
+    editorView: props.editorView,
+    buttonName
+  });
+
+  return jsx("span", {
+    css: buttonGroupStyle
+  }, jsx(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.BULLET_LIST,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleOnItemActivated('bullet_list'),
+    selected: bulletListActive,
+    "aria-pressed": bulletListActive,
+    "aria-label": labelUnorderedList,
+    disabled: bulletListDisabled || disabled,
+    title: jsx(ToolTipContent, {
+      description: labelUnorderedList,
+      keymap: toggleBulletListKeymap
+    }),
+    iconBefore: jsx(BulletListIcon, {
+      label: ""
+    })
+  }), jsx(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleOnItemActivated('ordered_list'),
+    selected: orderedListActive,
+    "aria-pressed": orderedListActive,
+    "aria-label": labelOrderedList,
+    disabled: orderedListDisabled || disabled,
+    title: jsx(ToolTipContent, {
+      description: labelOrderedList,
+      keymap: toggleOrderedListKeymap
+    }),
+    iconBefore: jsx(NumberListIcon, {
+      label: ""
+    })
+  }), showIndentationButtons && jsx(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.INDENT,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleOnItemActivated('indent'),
+    iconBefore: jsx(IndentIcon, {
+      label: ""
+    }),
+    disabled: true,
+    title: jsx(ToolTipContent, {
+      description: formatMessage(indentationMessages.indent),
+      keymap: toggleIndentKeymap
+    })
+  }), showIndentationButtons && jsx(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.OUTDENT,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleOnItemActivated('outdent'),
+    iconBefore: jsx(OutdentIcon, {
+      label: ""
+    }),
+    disabled: true,
+    title: jsx(ToolTipContent, {
+      description: formatMessage(indentationMessages.outdent),
+      keymap: toggleOutdentKeymap
+    })
+  }), jsx("span", {
+    css: separatorStyles
+  }));
+}

package/dist/es2019/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -0,0 +1,149 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
+import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, indent as toggleIndentKeymap, outdent as toggleOutdentKeymap, tooltip } from '../../../keymaps';
+import DropdownMenu from '../../../ui/DropdownMenu';
+import ToolbarButton from '../../../ui/ToolbarButton';
+import { wrapperStyle, expandIconWrapperStyle, shortcutStyle, separatorStyles } from '../../../ui/styles';
+import { messages as listMessages } from '../../list/messages';
+import { messages as indentationMessages } from '../../indentation/messages';
+export function ToolbarDropdown(props) {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    disabled,
+    isReducedSpacing,
+    bulletListActive,
+    orderedListActive,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement,
+    onItemActivated
+  } = props;
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const labelLists = formatMessage(listMessages.lists);
+
+  const onOpenChange = attrs => {
+    setIsDropdownOpen(attrs.isDropdownOpen);
+  };
+
+  const handleTriggerClick = () => {
+    onOpenChange({
+      isDropdownOpen: !isDropdownOpen
+    });
+  };
+
+  const items = useItems(props);
+
+  const handleOnItemActivated = ({
+    item
+  }) => {
+    setIsDropdownOpen(false);
+    return onItemActivated({
+      editorView: props.editorView,
+      buttonName: item.value.name
+    });
+  };
+
+  return jsx("span", {
+    css: wrapperStyle
+  }, jsx(DropdownMenu, {
+    items: items,
+    onItemActivated: handleOnItemActivated,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen,
+    onOpenChange: onOpenChange,
+    fitHeight: 188,
+    fitWidth: 175,
+    shouldUseDefaultRole: true
+  }, jsx(ToolbarButton, {
+    spacing: isReducedSpacing ? 'none' : 'default',
+    selected: bulletListActive || orderedListActive,
+    "aria-expanded": isDropdownOpen,
+    "aria-haspopup": true,
+    "aria-label": labelLists,
+    disabled: disabled,
+    onClick: handleTriggerClick,
+    title: labelLists,
+    iconBefore: jsx("span", {
+      css: wrapperStyle
+    }, jsx(BulletListIcon, {
+      label: labelLists
+    }), jsx("span", {
+      css: expandIconWrapperStyle
+    }, jsx(ExpandIcon, {
+      label: ""
+    })))
+  })), jsx("span", {
+    css: separatorStyles
+  }));
+}
+
+function useItems(props) {
+  const {
+    formatMessage
+  } = useIntl();
+  const labelUnorderedList = formatMessage(listMessages.unorderedList);
+  const labelOrderedList = formatMessage(listMessages.orderedList);
+  let items = [{
+    key: 'unorderedList',
+    content: labelUnorderedList,
+    value: {
+      name: 'bullet_list'
+    },
+    isDisabled: props.bulletListDisabled,
+    isActive: Boolean(props.bulletListActive),
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(toggleBulletListKeymap))
+  }, {
+    key: 'orderedList',
+    content: labelOrderedList,
+    value: {
+      name: 'ordered_list'
+    },
+    isDisabled: props.orderedListDisabled,
+    isActive: Boolean(props.orderedListActive),
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(toggleOrderedListKeymap))
+  }];
+
+  if (props.showIndentationButtons) {
+    const labelIndent = formatMessage(indentationMessages.indent);
+    const labelOutdent = formatMessage(indentationMessages.outdent);
+    items.push({
+      key: 'indent',
+      content: labelIndent,
+      value: {
+        name: 'indent'
+      },
+      isDisabled: true,
+      isActive: false,
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(toggleIndentKeymap))
+    }, {
+      key: 'outdent',
+      content: labelOutdent,
+      value: {
+        name: 'outdent'
+      },
+      isDisabled: true,
+      isActive: false,
+      elemAfter: jsx("div", {
+        css: shortcutStyle
+      }, tooltip(toggleOutdentKeymap))
+    });
+  }
+
+  return [{
+    items
+  }];
+}

package/dist/es2019/plugins/toolbar-lists-indentation/ui/index.js

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { onItemActivated } from './onItemActivated';
+import { ToolbarDropdown } from './ToolbarDropdown';
+import { Toolbar } from './Toolbar';
+export default function ToolbarListsIndentation(props) {
+  const {
+    disabled,
+    isSmall,
+    isReducedSpacing,
+    bulletListActive,
+    bulletListDisabled,
+    orderedListActive,
+    orderedListDisabled,
+    showIndentationButtons,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement
+  } = props;
+
+  if (isSmall) {
+    return jsx(ToolbarDropdown, {
+      editorView: props.editorView,
+      isReducedSpacing: isReducedSpacing,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      bulletListActive: bulletListActive,
+      bulletListDisabled: bulletListDisabled,
+      showIndentationButtons: showIndentationButtons,
+      orderedListActive: orderedListActive,
+      orderedListDisabled: orderedListDisabled,
+      disabled: disabled,
+      onItemActivated: onItemActivated
+    });
+  }
+
+  return jsx(Toolbar, {
+    editorView: props.editorView,
+    isReducedSpacing: isReducedSpacing,
+    bulletListActive: bulletListActive,
+    bulletListDisabled: bulletListDisabled,
+    showIndentationButtons: showIndentationButtons,
+    orderedListActive: orderedListActive,
+    orderedListDisabled: orderedListDisabled,
+    disabled: disabled,
+    onItemActivated: onItemActivated
+  });
+}

package/dist/es2019/plugins/toolbar-lists-indentation/ui/onItemActivated.js

@@ -0,0 +1,35 @@
+import { toggleBulletList, toggleOrderedList } from '../../list/commands';
+import { INPUT_METHOD } from '../../analytics';
+export function onItemActivated({
+  buttonName,
+  editorView
+}) {
+  switch (buttonName) {
+    case 'bullet_list':
+      toggleBulletList(editorView, INPUT_METHOD.TOOLBAR);
+      break;
+
+    case 'ordered_list':
+      toggleOrderedList(editorView, INPUT_METHOD.TOOLBAR);
+      break;
+
+    case 'indent':
+      editorView.someProp('handleKeyDown', handleKeyDown => handleKeyDown(editorView, new KeyboardEvent('keydown', {
+        bubbles: true,
+        cancelable: true,
+        key: 'Tab',
+        code: 'Tab'
+      })));
+      break;
+
+    case 'outdent':
+      editorView.someProp('handleKeyDown', handleKeyDown => handleKeyDown(editorView, new KeyboardEvent('keydown', {
+        bubbles: true,
+        cancelable: true,
+        shiftKey: true,
+        key: 'Tab',
+        code: 'Tab'
+      })));
+      break;
+  }
+}

package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
-import { jsx, css } from '@emotion/react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
-import { ItemGroup } from '@atlaskit/item';
-import { ICON_HEIGHT, itemTheme, ITEM_PADDING } from './TypeAheadListItem';
+import { jsx, css } from '@emotion/react';
+import { MenuGroup } from '@atlaskit/menu';
+import { ICON_HEIGHT, ITEM_PADDING } from './TypeAheadListItem';
 import { VariableSizeList as List } from 'react-window';
 import { ResizeObserverProvider } from './hooks/use-resize-observer';
 import { useDynamicListHeightCalculation } from './hooks/use-dynamic-list-height-calculation';
@@ -100,12 +99,11 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
 
   const estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
   const height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, fitHeight);
-  return jsx(ItemGroup, {
+  return jsx(MenuGroup, {
     role: "listbox",
     "aria-live": "polite",
     "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
-    "aria-relevant": "additions removals",
-    theme: itemTheme
+    "aria-relevant": "additions removals"
   }, jsx(ResizeObserverProvider, null, jsx(UpdateListItemHeightContext.Provider, {
     value: setListItemHeight
   }, jsx(ListItemActionsContext.Provider, {
@@ -125,9 +123,12 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     height: height,
     overscanCount: 3,
     css: css`
-                    // temporary solution before we migrated off dst/item
-                    & span[class^='ItemParts__Before'] {
-                      margin-right: 12px;
+                    button {
+                      padding: 12px 12px 11px;
+
+                      span:last-child span:last-child {
+                        white-space: normal;
+                      }
                     }
                   `
   }, DynamicHeightListItem))))));

package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -1,11 +1,10 @@
 /** @jsx jsx */
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
 import { css, jsx } from '@emotion/react';
-import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { DN600, N200, N800 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
-import Item, { itemThemeNamespace } from '@atlaskit/item';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { ButtonItem } from '@atlaskit/menu';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import IconFallback from '../../quick-insert/assets/fallback';
 import { shortcutStyle } from '../../../ui/styles';
@@ -14,41 +13,6 @@ import { token } from '@atlaskit/tokens';
 export const ICON_HEIGHT = 40;
 export const ICON_WIDTH = 40;
 export const ITEM_PADDING = 12;
-export const itemTheme = {
-  [itemThemeNamespace]: {
-    padding: {
-      default: {
-        bottom: ITEM_PADDING,
-        left: ITEM_PADDING,
-        right: ITEM_PADDING,
-        top: ITEM_PADDING
-      }
-    },
-    beforeItemSpacing: {
-      default: () => ITEM_PADDING
-    },
-    borderRadius: () => 0,
-    hover: {
-      // background: colors.transparent, transparent is not a thing
-      text: colorsText,
-      secondaryText: token('color.text.subtlest', N200)
-    },
-    selected: {
-      background: themed({
-        light: token('color.background.neutral.subtle.hovered', N20),
-        dark: token('color.background.neutral.subtle.hovered', DN70)
-      }),
-      text: themed({
-        light: token('color.text', N800),
-        dark: token('color.text', DN600)
-      }),
-      secondaryText: themed({
-        light: token('color.text.subtlest', N200),
-        dark: token('color.text.subtlest', DN300)
-      })
-    }
-  }
-};
 export const itemIcon = css`
   width: ${ICON_WIDTH}px;
   height: ${ICON_HEIGHT}px;
@@ -73,14 +37,20 @@ const itemBody = css`
   justify-content: space-between;
   line-height: 1.4;
 `;
-const itemText = css`
+
+const itemText = theme => css`
   white-space: initial;
+  color: ${themed({
+  light: token('color.text', N800),
+  dark: token('color.text', DN600)
+})(theme)};
   .item-description {
     font-size: ${relativeFontSizeToBase16(11.67)};
     color: ${token('color.text.subtlest', N200)};
     margin-top: 4px;
   }
 `;
+
 const itemAfter = css`
   flex: 0 0 auto;
 `;
@@ -162,26 +132,25 @@ export const TypeAheadListItem = ({
     return customItem;
   }
 
-  return jsx(Item, {
+  return jsx("span", {
+    onMouseMove: onMouseMove
+  }, jsx(ButtonItem, {
     onClick: insertSelectedItem,
-    onMouseMove: onMouseMove,
-    elemBefore: elementIcon,
+    iconBefore: elementIcon,
     isSelected: isSelected,
     "aria-selected": isSelected,
     "aria-label": item.title,
     role: "option",
-    theme: itemTheme
+    description: item.description
   }, jsx("div", {
     css: itemBody
   }, jsx("div", {
     css: itemText
   }, jsx("div", {
     className: "item-title"
-  }, item.title), item.description && jsx("div", {
-    className: "item-description"
-  }, item.description)), jsx("div", {
+  }, item.title)), jsx("div", {
     css: itemAfter
   }, item.keyshortcut && jsx("div", {
     css: shortcutStyle
-  }, item.keyshortcut))));
+  }, item.keyshortcut)))));
 };

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

@@ -1,10 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import Item, { itemThemeNamespace } from '@atlaskit/item'; // AFP-2532 TODO: Fix automatic suppressions below
+import { Section, ButtonItem } from '@atlaskit/menu'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { borderRadius, gridSize } from '@atlaskit/theme';
@@ -94,26 +93,19 @@ const InsertMenu = ({
 const ViewMore = ({
   item
 }) => {
-  const onKeyPress = useCallback(e => {
-    const SPACE_KEY = 32;
-    const ENTER_KEY = 13;
-
-    if (e.which === ENTER_KEY || e.which === SPACE_KEY) {
-      // @ts-ignore We manually transformed "view more" to a quickInsert item
-      // action would always toggle the ModalElementBrowser
-      item.action();
-    }
-  }, [item]);
-  return jsx(Item, {
+  return jsx(Section, {
+    hasSeparator: true
+  }, jsx(ButtonItem, {
     onClick: item.action,
-    elemBefore: jsx("div", {
+    iconBefore: jsx("div", {
       css: itemBefore
     }, item.icon()),
     "aria-describedby": item.title,
     "data-testid": "view-more-elements-item",
-    onKeyPress: onKeyPress,
-    theme: viewMoreItemTheme
-  }, item.title);
+    css: css`
+          padding: 0px 12px;
+        `
+  }, item.title));
 };
 
 const getSvgIconForItem = ({
@@ -173,18 +165,6 @@ const itemBefore = css`
   align-items: center;
   margin-right: ${gridSize() / 2}px;
 `;
-const PADDING_LEFT = 14;
-const HEIGHT = 40;
-const viewMoreItemTheme = {
-  [itemThemeNamespace]: {
-    padding: {
-      default: {
-        left: PADDING_LEFT
-      }
-    },
-    height: HEIGHT
-  }
-};
 const flexWrapperStyles = css`
   display: flex;
   flex: 1;