@atlaskit/editor-core 166.0.4 → 167.0.0

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -15,19 +15,16 @@ export const scale = (tableRef, options, domAtPos) => {
     node,
     containerWidth,
     previousContainerWidth,
-    dynamicTextSizing,
     prevNode,
     start,
     isBreakoutEnabled,
     layoutChanged
   } = options;
   const maxSize = getLayoutSize(node.attrs.layout, containerWidth, {
-    dynamicTextSizing,
     isBreakoutEnabled
   });
   const prevTableWidth = getTableWidth(prevNode);
   const previousMaxSize = getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
-    dynamicTextSizing,
     isBreakoutEnabled
   });
   let newWidth = maxSize; // adjust table width if layout is updated

package/dist/es2019/plugins/table/transforms/column-width.js

@@ -140,8 +140,7 @@ export const rescaleColumns = (table, view) => tr => {
     table: table.node,
     tableStart: table.start,
     state,
-    layout,
-    dynamicTextSizing: true
+    layout
   });
   let resizeState = getResizeState({
     minWidth: tableCellMinWidth,

package/dist/es2019/plugins/table/transforms/fix-tables.js

@@ -117,9 +117,7 @@ export const fixAutoSizedTable = (view, tableNode, tableRef, tablePos, opts) =>
   const colWidths = parseDOMColumnWidths(domAtPos, tableNode, tableStart, tableRef);
   const totalContentWidth = colWidths.reduce((acc, current) => acc + current, 0);
   const tableLayout = getLayoutBasedOnWidth(totalContentWidth);
-  const maxLayoutSize = getLayoutSize(tableLayout, opts.containerWidth, {
-    dynamicTextSizing: opts.dynamicTextSizing
-  }); // Content width will generally not meet the constraints of the layout
+  const maxLayoutSize = getLayoutSize(tableLayout, opts.containerWidth, {}); // Content width will generally not meet the constraints of the layout
   // whether it be below or above, so we scale our columns widths
   // to meet these requirements
 

package/dist/es2019/plugins/table/ui/FloatingContextualButton/styles.js

@@ -2,11 +2,13 @@ import { css } from '@emotion/react';
 import { N0, N20 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { contextualMenuTriggerSize } from '../consts';
+import { token } from '@atlaskit/tokens'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4462
+
 export const tableFloatingCellButtonStyles = css`
   > div {
-    background: ${N20};
+    background: ${token('color.background.neutral', N20)};
     border-radius: ${borderRadius()}px;
-    border: 2px solid ${N0};
+    border: 2px solid ${token('color.border.inverse', N0)};
     display: flex;
     height: ${contextualMenuTriggerSize - 2}px;
     flex-direction: column;

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/styles.js

@@ -4,11 +4,12 @@ import { N60A, N90 } from '@atlaskit/theme/colors';
 import { contextualMenuDropdownWidth } from '../consts';
 import { TableCssClassName as ClassName } from '../../types';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export const tablePopupStyles = css`
   .${ClassName.CONTEXTUAL_SUBMENU} {
     border-radius: ${borderRadius()}px;
-    background: white;
-    box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
+    background: ${token('elevation.surface.overlay', 'white')};
+    box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
     display: block;
     position: absolute;
     top: 0;
@@ -36,7 +37,7 @@ export const tablePopupStyles = css`
       content: '›';
       margin-left: 4px;
       line-height: 20px;
-      color: ${N90};
+      color: ${token('color.icon', N90)};
     }
   }
 `;

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -7,6 +7,7 @@ import { scrollbarStyles } from '../../../ui/styles';
 import { TableCssClassName as ClassName } from '../types';
 import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
 import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles';
+import { token } from '@atlaskit/tokens';
 const cornerControlHeight = tableToolbarSize + 1;
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
@@ -39,20 +40,21 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
       margin-bottom: ${columnControlsDecorationHeight}px;
     }
   }
-}`;
+}`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
+
 export const tableStyles = props => {
   var _props$featureFlags;
 
   return css`
   .${ClassName.LAYOUT_BUTTON} button {
-    background: ${N20A};
-    color: ${N300};
+    background: ${token('color.background.neutral', N20A)};
+    color: ${token('color.icon', N300)};
     cursor: none;
   }
 
   .${ClassName.LAYOUT_BUTTON}:not(.${ClassName.IS_RESIZING}) button:hover {
-    background: ${B300};
-    color: white !important;
+    background: ${token('color.background.neutral.hovered', B300)};
+    color: ${token('color.icon', 'white')} !important;
     cursor: pointer;
   }
 
@@ -93,14 +95,13 @@ export const tableStyles = props => {
     /* Ends Delete button */
 
     /* sticky styles */
-    .${ClassName.TABLE_STICKY} .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-child {
+    .${ClassName.TABLE_STICKY} .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
       margin-top: ${stickyRowOffsetTop + 2}px;
       width: ${akEditorTableNumberColumnWidth}px;
 
       position: fixed !important;
       z-index: ${akEditorStickyHeaderZIndex} !important;
-
-      box-shadow: 0px -${stickyRowOffsetTop}px white;
+      box-shadow: 0px -${stickyRowOffsetTop}px ${token('elevation.surface', 'white')};
       border-right: 0 none;
       /* top set by NumberColumn component */
     }
@@ -109,7 +110,7 @@ export const tableStyles = props => {
       position: fixed !important;
       /* needs to be above row controls */
       z-index: ${akEditorSmallZIndex} !important;
-      background: white;
+      background: ${token('elevation.surface', 'white')};
 
       width: ${tableToolbarSize}px;
       height: ${tableToolbarSize}px;
@@ -133,13 +134,14 @@ export const tableStyles = props => {
       position: fixed !important;
       z-index: ${akEditorStickyHeaderZIndex} !important;
       display: flex;
-      border-left: ${tableToolbarSize}px solid white;
+      border-left: ${tableToolbarSize}px solid
+        ${token('elevation.surface', 'white')};
       margin-left: -${tableToolbarSize}px;
     }
 
     .${ClassName.TABLE_STICKY} col:first-of-type {
       /* moving rows out of a table layout does weird things in Chrome */
-      border-right: 1px solid green;
+      border-right: 1px solid ${token('elevation.surface', 'green')};
     }
 
     tr.sticky {
@@ -156,12 +158,12 @@ export const tableStyles = props => {
       grid-auto-flow: column;
 
       /* background for where controls apply */
-      background: white;
+      background: ${token('elevation.surface', 'white')};
       box-sizing: content-box;
 
       margin-top: 2px;
 
-      box-shadow: 0 6px 4px -4px ${N40A};
+      box-shadow: ${token('elevation.shadow.overflow', `0 6px 4px -4px ${N40A}`)};
       margin-left: -1px;
 
       &.no-pointer-events {
@@ -191,7 +193,7 @@ export const tableStyles = props => {
     }
 
     /* add left edge for first cell */
-    .${ClassName.TABLE_STICKY} tr.sticky > th:first-child {
+    .${ClassName.TABLE_STICKY} tr.sticky > th:first-of-type {
       margin-left: 0px;
     }
 
@@ -241,12 +243,13 @@ export const tableStyles = props => {
 
     .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
       .${ClassName.NUMBERED_COLUMN}
-      .${ClassName.NUMBERED_COLUMN_BUTTON}:first-child {
+      .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
       margin-top: ${tableControlsSpacing + 2}px;
     }
 
     .${ClassName.CORNER_CONTROLS}.sticky {
-      border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid white;
+      border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid
+        ${token('elevation.surface', 'white')};
     }
 
     ${(_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : ''}
@@ -410,7 +413,7 @@ export const tableStyles = props => {
           right: 0;
           bottom: 0;
         }
-        .${ClassName.CONTROLS_BUTTON_OVERLAY}:first-child {
+        .${ClassName.CONTROLS_BUTTON_OVERLAY}:first-of-type {
           top: 0;
         }
       `)}
@@ -467,7 +470,7 @@ export const tableStyles = props => {
           background-color: ${tableToolbarSelectedColor};
           position: relative;
           z-index: ${akEditorUnitZIndex};
-          color: ${N0};
+          color: ${token('color.text.inverse', N0)};
         }
       }
     }
@@ -481,13 +484,13 @@ export const tableStyles = props => {
         background-color: ${tableToolbarSelectedColor};
         position: relative;
         z-index: ${akEditorUnitZIndex};
-        color: ${N0};
+        color: ${token('color.text.inverse', N0)};
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
         background-color: ${tableToolbarDeleteColor};
         border: 1px solid ${tableBorderDeleteColor};
         border-left: 0;
-        color: ${R500};
+        color: ${token('color.text.inverse', R500)};
         position: relative;
         z-index: ${akEditorUnitZIndex};
       }
@@ -509,12 +512,12 @@ export const tableStyles = props => {
        * cell when center/right aligned.
        */
       th.${ClassName.TABLE_HEADER_CELL} > .fabric-editor-block-mark {
-        > h1:first-child,
-        > h2:first-child,
-        > h3:first-child,
-        > h4:first-child,
-        > h5:first-child,
-        > h6:first-child {
+        > h1:first-of-type,
+        > h2:first-of-type,
+        > h3:first-of-type,
+        > h4:first-of-type,
+        > h5:first-of-type,
+        > h6:first-of-type {
           margin-top: 0;
         }
       }
@@ -532,7 +535,6 @@ export const tableStyles = props => {
         right: 0;
         top: 0;
         bottom: 0;
-        opacity: 0.3;
         pointer-events: none;
       }
       .${ClassName.SELECTED_CELL} {

package/dist/es2019/plugins/table/ui/consts.js

@@ -1,4 +1,4 @@
-import { B200, B300, B75, N0, N20, R50, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
+import { B200, B300, N0, N20, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
@@ -7,30 +7,33 @@ import { themed } from '@atlaskit/theme/components';
 /**
  * Basic colors added to prevent content overflow in table cells.
  */
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4135
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 
 export const tableCellBackgroundColor = themed({
   light: N0,
   dark: DN30
 });
 export const tableToolbarColor = themed({
-  light: token('color.background.neutral', akEditorTableToolbar),
-  dark: token('color.background.neutral', akEditorTableToolbarDark)
+  light: akEditorTableToolbar,
+  dark: akEditorTableToolbarDark
 });
 export const tableTextColor = themed({
-  light: N200,
-  dark: DN400
+  light: token('color.text.subtlest', N200),
+  dark: token('color.text.subtlest', DN400)
 });
 export const tableBorderColor = themed({
   light: token('color.border', akEditorTableBorder),
   dark: token('color.border', akEditorTableBorderDark)
 });
-export const tableFloatingControlsColor = N20;
-export const tableCellSelectedColor = B75;
-export const tableToolbarSelectedColor = B200;
-export const tableBorderSelectedColor = B300;
-export const tableCellDeleteColor = R50;
-export const tableBorderDeleteColor = R400;
-export const tableToolbarDeleteColor = R75;
+export const tableFloatingControlsColor = token('color.background.neutral', N20); // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
+
+export const tableCellSelectedColor = token('color.blanket.selected', 'rgba(179, 212, 255, 0.3)');
+export const tableToolbarSelectedColor = token('color.background.selected.bold', B200);
+export const tableBorderSelectedColor = token('color.border.selected', B300);
+export const tableCellDeleteColor = token('color.blanket.danger', 'rgba(255, 235, 230, 0.3)');
+export const tableBorderDeleteColor = token('color.border.danger', R400);
+export const tableToolbarDeleteColor = token('color.background.danger.bold', R75);
 export const tableBorderRadiusSize = 3;
 export const tablePadding = 8;
 export const tableScrollbarOffset = 15;

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -5,6 +5,7 @@ import { N40A, B300, N300, R300, N20A, N60A, N0, Y50, Y200 } from '@atlaskit/the
 import { tableToolbarColor, tableBorderColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, lineMarkerOffsetFromColumnControls, lineMarkerSize, columnControlsDecorationHeight, columnControlsZIndex, columnControlsSelectedZIndex, resizeHandlerAreaWidth, resizeLineWidth, resizeHandlerZIndex, tableToolbarSize, tableInsertColumnButtonSize, tableDeleteButtonSize, tableControlsSpacing } from './consts';
 import { TableCssClassName as ClassName } from '../types';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 
 const InsertLine = cssString => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
@@ -80,14 +81,14 @@ export const HeaderButton = (props, cssString) => css`
   }
 
   .active .${ClassName.CONTROLS_BUTTON} {
-    color: ${N0};
+    color: ${token('color.icon.inverse', N0)};
     background-color: ${tableToolbarSelectedColor};
     border-color: ${tableBorderSelectedColor};
   }
 `;
 export const HeaderButtonHover = () => css`
   .${ClassName.CONTROLS_BUTTON}:hover {
-    color: ${N0};
+    color: ${token('color.icon.inverse', N0)};
     background-color: ${tableToolbarSelectedColor};
     border-color: ${tableBorderSelectedColor};
     cursor: pointer;
@@ -115,9 +116,9 @@ const InsertButton = () => css`
   }
   .${ClassName.CONTROLS_INSERT_BUTTON} {
     ${Button(`
-      background: white;
-      box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
-      color: ${N300};
+      background: ${token('elevation.surface.overlay', 'white')};
+      box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
+      color: ${token('color.icon', N300)};
     `)}
   }
   .${ClassName.CONTROLS_INSERT_LINE} {
@@ -130,8 +131,8 @@ const InsertButton = () => css`
 
 const InsertButtonHover = () => css`
   .${ClassName.CONTROLS_INSERT_BUTTON}:hover {
-    background: ${B300};
-    color: white;
+    background: ${token('color.background.brand.bold', B300)};
+    color: ${token('color.icon.inverse', 'white')};
     cursor: pointer;
   }
 `;
@@ -156,11 +157,11 @@ export const insertRowButtonWrapper = css`
 export const columnControlsLineMarker = props => css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
     table
-    tr:first-child
+    tr:first-of-type
     td,
   .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
     table
-    tr:first-child
+    tr:first-of-type
     th {
     position: relative;
 
@@ -181,18 +182,21 @@ export const DeleteButton = css`
   .${ClassName.CONTROLS_DELETE_BUTTON_WRAP} {
     .${ClassName.CONTROLS_DELETE_BUTTON} {
       ${Button(`
-        background: ${N20A};
-        color: ${N300};
+        background: ${token('color.background.neutral', N20A)};
+        color: ${token('color.icon', N300)};
       `)}
     }
   }
 
   .${ClassName.CONTROLS_DELETE_BUTTON}:hover {
-    background: ${R300};
-    color: white;
+    background: ${token('color.background.danger.bold', R300)};
+    color: ${token('color.icon.inverse', 'white')};
     cursor: pointer;
   }
-`;
+`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4451
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 export const OverflowShadow = props => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
@@ -235,6 +239,7 @@ export const OverflowShadow = props => css`
     }
   }
 `;
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 const columnHeaderButton = (props, cssString) => css`
   background: ${tableToolbarColor(props)};
@@ -251,7 +256,7 @@ const columnHeaderButton = (props, cssString) => css`
 `;
 
 const columnHeaderButtonSelected = css`
-  color: ${N0};
+  color: ${token('color.text.inverse', N0)};
   background-color: ${tableToolbarSelectedColor};
   border-color: ${tableBorderSelectedColor};
   z-index: ${columnControlsSelectedZIndex};
@@ -287,10 +292,10 @@ export const columnControlsDecoration = props => css`
   }
 
   table
-    tr:first-child
+    tr:first-of-type
     td.${ClassName.TABLE_CELL},
     table
-    tr:first-child
+    tr:first-of-type
     th.${ClassName.TABLE_HEADER_CELL} {
     &.${ClassName.COLUMN_SELECTED},
       &.${ClassName.HOVERED_COLUMN},
@@ -311,11 +316,11 @@ export const columnControlsDecoration = props => css`
 
   .${ClassName.TABLE_SELECTED}
     table
-    tr:first-child
+    tr:first-of-type
     td.${ClassName.TABLE_CELL},
     .${ClassName.TABLE_SELECTED}
     table
-    tr:first-child
+    tr:first-of-type
     th.${ClassName.TABLE_HEADER_CELL} {
     .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
       ${columnHeaderButtonSelected};
@@ -347,8 +352,8 @@ export const hoveredWarningCell = css`
   :not(.${ClassName.IS_RESIZING})
     .${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
     td.${ClassName.HOVERED_CELL_WARNING} {
-      background-color: ${Y50} !important; // We need to override the background-color added to the cell
-      border: 1px solid ${Y200};
+      background-color: ${token('color.background.warning', Y50)} !important; // We need to override the background-color added to the cell
+      border: 1px solid ${token('color.border.warning', Y200)};
     }
   }
 `;
@@ -379,11 +384,11 @@ export const resizeHandle = css`
     }
 
     table
-      tr:first-child
+      tr:first-of-type
       th.${ClassName.WITH_RESIZE_LINE}
       .${ClassName.RESIZE_HANDLE_DECORATION}::after,
       table
-      tr:first-child
+      tr:first-of-type
       td.${ClassName.WITH_RESIZE_LINE}
       .${ClassName.RESIZE_HANDLE_DECORATION}::after {
       top: -${tableToolbarSize + tableCellBorderWidth}px;

package/dist/es2019/plugins/table/utils/decoration.js

@@ -76,10 +76,7 @@ export const createColumnControlsDecoration = selection => {
     element.dataset.startIndex = `${index}`;
     index += colspan;
     element.dataset.endIndex = `${index}`;
-    return Decoration.widget(cell.pos + 1, // Do not delay the rendering for this Decoration
-    // because we need to always render all controls
-    // to keep the order safe
-    element, {
+    return Decoration.widget(cell.pos + 1, () => element, {
       key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${index}`,
       // this decoration should be the first one, even before gap cursor.
       side: -100

package/dist/es2019/plugins/table/utils/paste.js

@@ -62,6 +62,8 @@ export const transformSliceToFixHardBreakProblemOnCopyFromCell = (slice, schema)
   return slice;
 };
 export const transformSliceToRemoveOpenTable = (slice, schema) => {
+  var _slice$content$firstC;
+
   // we're removing the table, tableRow and tableCell reducing the open depth by 3
   const depthDecrement = 3; // Case 1: A slice entirely within a single CELL
 
@@ -69,17 +71,15 @@ export const transformSliceToRemoveOpenTable = (slice, schema) => {
   slice.openStart >= 4 && slice.openEnd >= 4 && // slice is a table node
   slice.content.childCount === 1 && slice.content.firstChild.type === schema.nodes.table) {
     return new Slice(flatmap(slice.content, unwrapContentFromTable), slice.openStart - depthDecrement, slice.openEnd - depthDecrement);
-  } // Case 2: A slice starting inside a table and finishing outside
-  // slice.openStart can only be >= 4 if its a TextSelection. CellSelection would give openStart = 1
-
-
-  if (slice.openStart >= 4 && slice.content.firstChild.type === schema.nodes.table) {
-    return new Slice(flatmap(slice.content, removeTableFromFirstChild), slice.openStart - depthDecrement, slice.openEnd);
-  } // Case 3: A slice starting outside a table and finishing inside
+  } // Case 2: A slice starting within a CELL and ending outside the table
 
 
-  if (slice.openEnd >= 4 && slice.content.lastChild.type === schema.nodes.table) {
-    return new Slice(flatmap(slice.content, removeTableFromLastChild), slice.openStart, slice.openEnd - depthDecrement);
+  if ( // starts inside of a cell but ends outside of the starting table
+  slice.openStart >= 4 && // slice starts from a table node (and spans across more than one node)
+  slice.content.childCount > 1 && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type) === schema.nodes.table) {
+    // repoint the slice's cutting depth so that cell content where the slice starts
+    // does not get lifted out of the cell on paste
+    return new Slice(slice.content, 1, slice.openEnd);
   }
 
   return slice;

package/dist/es2019/plugins/type-ahead/index.js

@@ -151,12 +151,13 @@ const typeAheadPlugin = options => {
       containerElement,
       popupsMountPoint,
       popupsBoundariesElement,
-      popupsScrollableElement
+      popupsScrollableElement,
+      wrapperElement
     }) {
       popupMountRef.current = {
-        popupsMountPoint: popupsMountPoint || containerElement || undefined,
+        popupsMountPoint: popupsMountPoint || wrapperElement || undefined,
         popupsBoundariesElement,
-        popupsScrollableElement
+        popupsScrollableElement: popupsScrollableElement || containerElement || undefined
       };
       return /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {

package/dist/es2019/plugins/type-ahead/pm-plugins/decorations.js

@@ -12,6 +12,7 @@ import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
 import { StatsModifier } from '../stats-modifier';
 import { getTypeAheadQuery } from '../utils';
 import { closeTypeAhead } from '../transforms/close-type-ahead';
+import { token } from '@atlaskit/tokens';
 export const factoryDecorations = ({
   intl,
   popupMountRef,
@@ -56,7 +57,7 @@ export const factoryDecorations = ({
 
       typeaheadComponent.dataset.editorPopup = 'true';
       typeaheadComponent.dataset.typeAhead = TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
-      typeaheadComponent.style.color = B400;
+      typeaheadComponent.style.color = token('color.text.accent.blue', B400);
       typeaheadComponent.style.backgroundColor = 'transparent';
 
       const onUndoRedo = inputType => {

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

@@ -11,14 +11,14 @@ import { DynamicHeightListItem, SelectedIndexContext, ListItemActionsContext, Up
 import { injectIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
 const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
-const LIST_MAX_HEIGHT = 380;
 const LIST_WIDTH = 320;
 const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   items,
   selectedIndex,
   onItemHover,
   onItemClick,
-  intl
+  intl,
+  fitHeight
 }) => {
   const listRef = useRef();
   const redrawListAtIndex = useCallback(index => {
@@ -41,7 +41,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     redrawListAtIndex,
     getFirstVisibleIndex,
     listLength: items.length,
-    listMaxHeight: LIST_MAX_HEIGHT,
+    listMaxHeight: fitHeight,
     listItemEstimatedHeight: LIST_ITEM_ESTIMATED_HEIGHT
   });
   const onItemsRendered = useCallback(props => {
@@ -99,7 +99,7 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   }
 
   const estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
-  const height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, LIST_MAX_HEIGHT);
+  const height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, fitHeight);
   return jsx(ItemGroup, {
     role: "listbox",
     "aria-live": "polite",

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

@@ -10,6 +10,7 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import IconFallback from '../../quick-insert/assets/fallback';
 import { shortcutStyle } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { token } from '@atlaskit/tokens';
 export const ICON_HEIGHT = 40;
 export const ICON_WIDTH = 40;
 export const ITEM_PADDING = 12;
@@ -30,20 +31,20 @@ export const itemTheme = {
     hover: {
       // background: colors.transparent, transparent is not a thing
       text: colorsText,
-      secondaryText: N200
+      secondaryText: token('color.text.subtlest', N200)
     },
     selected: {
       background: themed({
-        light: N20,
-        dark: DN70
+        light: token('color.background.neutral.subtle.hovered', N20),
+        dark: token('color.background.neutral.subtle.hovered', DN70)
       }),
       text: themed({
-        light: N800,
-        dark: DN600
+        light: token('color.text', N800),
+        dark: token('color.text', DN600)
       }),
       secondaryText: themed({
-        light: N200,
-        dark: DN300
+        light: token('color.text.subtlest', N200),
+        dark: token('color.text.subtlest', DN300)
       })
     }
   }
@@ -52,7 +53,7 @@ export const itemIcon = css`
   width: ${ICON_WIDTH}px;
   height: ${ICON_HEIGHT}px;
   overflow: hidden;
-  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */
+  border: 1px solid ${token('color.border', 'rgba(223, 225, 229, 0.5)')}; /* N60 at 50% */
   border-radius: ${borderRadius()}px;
   box-sizing: border-box;
 
@@ -76,7 +77,7 @@ const itemText = css`
   white-space: initial;
   .item-description {
     font-size: ${relativeFontSizeToBase16(11.67)};
-    color: ${N200};
+    color: ${token('color.text.subtlest', N200)};
     margin-top: 4px;
   }
 `;