@atlaskit/editor-common 78.11.3 → 78.11.5

package/dist/es2019/extensibility/Extension/styles.js

@@ -43,7 +43,7 @@ export const placeholderFallback = css({
 export const placeholderFallbackParams = css({
   display: 'inline-block',
   maxWidth: '200px',
-  marginLeft: '5px',
+  marginLeft: "var(--ds-space-050, 4px)",
   color: `var(--ds-text-subtlest, ${N70})`,
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -210,7 +210,6 @@ export class ExtensionComponent extends Component {
       /** We don't want this error to block renderer */
       /** We keep rendering the default content */
     }
-
     return null;
   }
 }

package/dist/es2019/extensibility/ExtensionNodeWrapper.js

@@ -1,16 +1,7 @@
-/** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/react';
-import classnames from 'classnames';
 import { ZERO_WIDTH_SPACE } from '../utils';
-const styles = css({
-  '&.inline-extension': {
-    display: 'inline-block'
-  }
-});
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
- * Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
  * else wrap with a div (for multi bodied extensions)
  *
  * @param param0
@@ -18,14 +9,5 @@ const styles = css({
  */
 export const ExtensionNodeWrapper = ({
   children,
-  nodeType,
-  showMacroInteractionDesignUpdates
-}) => {
-  const wrapperClassNames = classnames({
-    'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates
-  });
-  return jsx("span", {
-    className: wrapperClassNames,
-    css: styles
-  }, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
-};
+  nodeType
+}) => /*#__PURE__*/React.createElement("span", null, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);

package/dist/es2019/extensibility/MultiBodiedExtension/index.js

@@ -7,7 +7,7 @@ import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { useSharedPluginState } from '../../hooks';
-import { sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
+import { removeMargins, sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
 import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import { WithPluginState } from '../../with-plugin-state';
 import ExtensionLozenge from '../Extension/Lozenge';
@@ -87,7 +87,7 @@ const MultiBodiedExtensionWithWidth = ({
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
   const containerCssExtended = css(sharedMultiBodiedExtensionStyles.mbeExtensionContainer, {
-    [`.multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1})`]: sharedMultiBodiedExtensionStyles.extensionFrameContent
+    [`.multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(${activeChildIndex + 1})`]: css(sharedMultiBodiedExtensionStyles.extensionFrameContent, showMacroInteractionDesignUpdates && removeMargins)
   });
   const shouldBreakout =
   // Extension should breakout when the layout is set to 'full-width' or 'wide'.
@@ -108,6 +108,12 @@ const MultiBodiedExtensionWithWidth = ({
   const wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
     'remove-margin-top': showMacroInteractionDesignUpdates
   });
+  const containerClassNames = classnames('multiBodiedExtension--container', {
+    'remove-padding': showMacroInteractionDesignUpdates
+  });
+  const navigationClassNames = classnames('multiBodiedExtension--navigation', {
+    'remove-margins': showMacroInteractionDesignUpdates
+  });
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
     node: node,
@@ -119,12 +125,12 @@ const MultiBodiedExtensionWithWidth = ({
     "data-testid": "multiBodiedExtension--wrapper",
     style: mbeWrapperStyles
   }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
-    className: "multiBodiedExtension--container",
+    className: containerClassNames,
     css: containerCssExtended,
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
   }, jsx("nav", {
-    className: "multiBodiedExtension-navigation",
+    className: navigationClassNames,
     css: sharedMultiBodiedExtensionStyles.mbeNavigation,
     "data-testid": "multiBodiedExtension-navigation"
   }, extensionHandlerResult), jsx("article", {

package/dist/es2019/extensibility/extensionNodeView.js

@@ -28,8 +28,7 @@ export class ExtensionNode extends ReactNodeView {
   render(props, forwardRef) {
     var _props$extensionNodeV;
     return /*#__PURE__*/React.createElement(ExtensionNodeWrapper, {
-      nodeType: this.node.type.name,
-      showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
+      nodeType: this.node.type.name
     }, /*#__PURE__*/React.createElement(Extension, {
       editorView: this.view,
       node: this.node,

package/dist/es2019/extensions/types/field-definitions.js

@@ -2,6 +2,7 @@
 //   Thereby they _always_ need a value for submission
 //
 // You can do that through `defaultValue`, or `isRequired: true`
+
 export const isFieldset = field => {
   return field.type === 'fieldset';
 };

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -30,7 +30,7 @@ export const visuallyHiddenStyles = css`
   clip-path: inset(50%);
   height: 1px;
   width: 1px;
-  margin: -1px;
+  margin: ${"var(--ds-space-negative-025, -2px)"};
   overflow: hidden;
   padding: 0;
   position: absolute;

package/dist/es2019/link/LinkSearch/LinkSearchList.js

@@ -4,20 +4,20 @@ import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
 import { N30 } from '@atlaskit/theme/colors';
 import LinkSearchListItem from './LinkSearchListItem';
-const listContainer = css`
-  padding-top: 0;
-  margin-top: ${"var(--ds-space-150, 12px)"};
-  border-top: 1px solid ${`var(--ds-border, ${N30})`};
-`;
-const spinnerContainer = css`
-  text-align: center;
-  min-height: 80px;
-  margin-top: 30px;
-`;
-export const linkSearchList = css`
-  padding: 0;
-  list-style: none;
-`;
+const listContainer = css({
+  paddingTop: 0,
+  marginTop: "var(--ds-space-150, 12px)",
+  borderTop: `1px solid ${`var(--ds-border, ${N30})`}`
+});
+const spinnerContainer = css({
+  textAlign: 'center',
+  minHeight: '80px',
+  marginTop: "var(--ds-space-400, 32px)"
+});
+export const linkSearchList = css({
+  padding: 0,
+  listStyle: 'none'
+});
 export default class LinkSearchList extends PureComponent {
   render() {
     const {

package/dist/es2019/link/LinkSearch/LinkSearchListItem.js

@@ -4,6 +4,7 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, N300, N800 } from '@atlaskit/theme/colors';
@@ -37,7 +38,7 @@ export const containerName = css({
 });
 const iconStyle = css({
   minWidth: '16px',
-  marginTop: '3px',
+  marginTop: "var(--ds-space-050, 4px)",
   marginRight: "var(--ds-space-150, 12px)",
   img: {
     maxWidth: '16px'

package/dist/es2019/link/LinkSearch/ToolbarComponents.js

@@ -1,20 +1,19 @@
 import { css } from '@emotion/react';
 import { RECENT_SEARCH_WIDTH_IN_PX, RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX } from '../../ui';
-export const inputWrapper = css`
-  display: flex;
-  line-height: 0;
-  padding: 5px 0;
-  align-items: center;
-`;
-export const container = css`
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  padding: 0;
-
-  width: ${RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX}px;
-  line-height: initial;
-`;
-export const containerWithProvider = css`
-  width: ${RECENT_SEARCH_WIDTH_IN_PX}px;
-`;
+export const inputWrapper = css({
+  display: 'flex',
+  lineHeight: 0,
+  padding: `${"var(--ds-space-075, 6px)"} 0`,
+  alignItems: 'center'
+});
+export const container = css({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'auto',
+  padding: 0,
+  width: `${RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX}px`,
+  lineHeight: 'initial'
+});
+export const containerWithProvider = css({
+  width: `${RECENT_SEARCH_WIDTH_IN_PX}px`
+});

package/dist/es2019/link/LinkSearch/index.js

@@ -22,7 +22,6 @@ class RecentLink extends React.Component {
       if (!inputMethod) {
         return; // No call submit, if there is nothing to submit
       }
-
       switch (inputMethod) {
         case INPUT_METHOD.MANUAL:
           {

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.11.3";
+const packageVersion = "78.11.5";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -199,6 +199,7 @@ function getPortalChildren({
 // nodeViews: {
 //   [nodeViewName: string]: NodeViewProducer
 // }
+
 // This return of this function is intended to be the value of a key
 // in a ProseMirror nodeViews object.
 export function getInlineNodeViewProducer({

package/dist/es2019/resizer/Resizer.js

@@ -3,7 +3,7 @@ import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, u
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
 import Tooltip from '@atlaskit/tooltip';
-import { handleWrapperClass, resizerDangerClassName, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerHoverZoneClassName, resizerItemClassName } from '../styles/shared/resizer';
+import { handleWrapperClass, resizerDangerClassName, resizerExtendedZone, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerHoverZoneClassName, resizerItemClassName } from '../styles/shared/resizer';
 const SUPPORTED_HANDLES = ['left', 'right'];
 const ResizerNext = (props, ref) => {
   const [isResizing, setIsResizing] = useState(false);
@@ -96,7 +96,7 @@ const ResizerNext = (props, ref) => {
     [resizerDangerClassName]: appearance === 'danger'
   });
   const resizerZoneClassName = classnames(resizerHoverZoneClassName, {
-    'is-extended': needExtendedResizeZone
+    [resizerExtendedZone]: needExtendedResizeZone
   });
   const handleComponent = useMemo(() => {
     return SUPPORTED_HANDLES.reduce((result, position) => {
@@ -108,7 +108,6 @@ const ResizerNext = (props, ref) => {
         type: "button",
         tabIndex: -1 //We want to control focus on this button ourselves
       });
-
       if ((!handleHighlight || handleHighlight === 'none') && !handleTooltipContent) {
         return {
           ...result,

package/dist/es2019/selection/gap-cursor/styles.js

@@ -42,10 +42,10 @@ export const gapCursorStyles = css`
         height: 100%;
       }
       &.-left span::after {
-        left: -3px;
+        left: ${"var(--ds-space-negative-050, -4px)"};
       }
       &.-right span::after {
-        right: -3px;
+        right: ${"var(--ds-space-negative-050, -4px)"};
       }
       & span[layout='full-width'],
       & span[layout='wide'],

package/dist/es2019/styles/shared/embedCard.js

@@ -1,24 +1,20 @@
 import { css } from '@emotion/react';
-export const embedCardStyles = css`
-  .ProseMirror {
-    .embedCardView-content-wrap[layout^='wrap-'] {
-      max-width: 100%;
-    }
-
-    .embedCardView-content-wrap[layout='wrap-left'] {
-      float: left;
-    }
-
-    .embedCardView-content-wrap[layout='wrap-right'] {
-      float: right;
-    }
-
-    .embedCardView-content-wrap[layout='wrap-right']
-      + .embedCardView-content-wrap[layout='wrap-left'] {
-      clear: both;
+export const embedCardStyles = css({
+  '.ProseMirror': {
+    ".embedCardView-content-wrap[layout^='wrap-']": {
+      maxWidth: '100%'
+    },
+    ".embedCardView-content-wrap[layout='wrap-left']": {
+      float: 'left'
+    },
+    ".embedCardView-content-wrap[layout='wrap-right']": {
+      float: 'right'
+    },
+    ".embedCardView-content-wrap[layout='wrap-right'] + .embedCardView-content-wrap[layout='wrap-left']": {
+      clear: 'both'
     }
   }
-`;
-export const embedSpacingStyles = css`
-  margin: 0 10px;
-`;
+});
+export const embedSpacingStyles = css({
+  margin: `0 ${"var(--ds-space-150, 12px)"}`
+});

package/dist/es2019/styles/shared/grid.js

@@ -2,35 +2,31 @@ import { css } from '@emotion/react';
 import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
 import { B200, N30A } from '@atlaskit/theme/colors';
 export const GRID_GUTTER = 12;
-export const gridStyles = css`
-  .gridParent {
-    width: calc(100% + ${GRID_GUTTER * 2}px);
-    margin-left: ${"var(--ds-space-negative-150, -12px)"}; // Negative GRID_GUTTER
-    margin-right: ${"var(--ds-space-negative-150, -12px)"}; // Negative GRID_GUTTER
-    transform: scale(1);
-    z-index: ${akEditorGridLineZIndex};
+export const gridStyles = css({
+  '.gridParent': {
+    width: `calc(100% + ${GRID_GUTTER * 2}px)`,
+    marginLeft: "var(--ds-space-negative-150, -12px)",
+    marginRight: "var(--ds-space-negative-150, -12px)",
+    transform: 'scale(1)',
+    zIndex: akEditorGridLineZIndex
+  },
+  '.gridContainer': {
+    position: 'fixed',
+    height: '100vh',
+    width: '100%',
+    pointerEvents: 'none'
+  },
+  '.gridLine': {
+    borderLeft: `1px solid ${`var(--ds-border, ${N30A})`}`,
+    display: 'inline-block',
+    boxSizing: 'border-box',
+    height: '100%',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    marginLeft: '-1px',
+    transition: 'border-color 0.15s linear',
+    zIndex: 0
+  },
+  '.highlight': {
+    borderLeft: `1px solid ${`var(--ds-border-focused, ${B200})`}`
   }
-
-  .gridContainer {
-    position: fixed;
-    height: 100vh;
-    width: 100%;
-    pointer-events: none;
-  }
-
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352
-  .gridLine {
-    border-left: 1px solid ${`var(--ds-border, ${N30A})`};
-    display: inline-block;
-    box-sizing: border-box;
-    height: 100%;
-    margin-left: -1px;
-
-    transition: border-color 0.15s linear;
-    z-index: 0;
-  }
-
-  .highlight {
-    border-left: 1px solid ${`var(--ds-border-focused, ${B200})`};
-  }
-`;
+});

package/dist/es2019/styles/shared/indentation.js

@@ -1,4 +1,6 @@
 import { css } from '@emotion/react';
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const indentationSharedStyles = css`
   .fabric-editor-indentation-mark {
     &[data-level='1'] {

package/dist/es2019/styles/shared/panel.js

@@ -200,7 +200,7 @@ export const panelSharedStylesWithoutPrefix = () => css`
   }
 
   .ak-editor-panel__content {
-    margin: 1px 0 1px;
+    margin: ${"var(--ds-space-025, 2px)"} 0 ${"var(--ds-space-025, 2px)"};
     flex: 1 0 0;
     /*
       https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox

package/dist/es2019/styles/shared/resizer.js

@@ -5,9 +5,9 @@ import { B200, B50, N60 } from '@atlaskit/theme/colors';
   Styles in this file are based on
   packages/editor/editor-core/src/plugins/media/styles.ts
 */
-
 export const resizerItemClassName = 'resizer-item';
 export const resizerHoverZoneClassName = 'resizer-hover-zone';
+export const resizerExtendedZone = 'resizer-is-extended';
 export const resizerHandleClassName = 'resizer-handle';
 export const resizerHandleTrackClassName = `${resizerHandleClassName}-track`;
 export const resizerHandleThumbClassName = `${resizerHandleClassName}-thumb`;
@@ -191,14 +191,17 @@ export const resizerStyles = css`
     display: inline-block;
     width: 100%;
 
-    &.is-extended {
+    &.${resizerExtendedZone} {
       padding: 0 ${"var(--ds-space-150, 12px)"};
       left: ${"var(--ds-space-negative-150, -12px)"};
     }
   }
 
   // This below style is here to make sure the image width is correct when nested in a table
-  table .${resizerHoverZoneClassName} {
+  table
+    .${resizerHoverZoneClassName},
+    table
+    .${resizerHoverZoneClassName}.${resizerExtendedZone} {
     padding: unset;
     left: unset;
   }

package/dist/es2019/styles/shared/shadow.js

@@ -22,70 +22,41 @@ const shadowWidth = 8;
  *      background-attachment: local, local, scroll, scroll;
  */
 
-const shadowSharedStyle = css`
-  &
-    .${shadowClassNames.RIGHT_SHADOW}::before,
-    .${shadowClassNames.RIGHT_SHADOW}::after,
-    .${shadowClassNames.LEFT_SHADOW}::before,
-    .${shadowClassNames.LEFT_SHADOW}::after {
-    display: none;
-    position: absolute;
-    pointer-events: none;
-    z-index: ${akEditorShadowZIndex};
-    width: ${shadowWidth}px;
-    content: '';
-    /* Scrollbar is outside the content in IE, inset in other browsers. */
-    height: calc(100%);
+const shadowSharedStyle = css({
+  [`& .${shadowClassNames.RIGHT_SHADOW}::before, .${shadowClassNames.RIGHT_SHADOW}::after, .${shadowClassNames.LEFT_SHADOW}::before, .${shadowClassNames.LEFT_SHADOW}::after`]: {
+    display: 'none',
+    position: 'absolute',
+    pointerEvents: 'none',
+    zIndex: akEditorShadowZIndex,
+    width: `${shadowWidth}px`,
+    content: "''",
+    height: 'calc(100%)'
+  },
+  [`& .${shadowClassNames.RIGHT_SHADOW}, .${shadowClassNames.LEFT_SHADOW}`]: {
+    position: 'relative'
+  },
+  [`& .${shadowClassNames.LEFT_SHADOW}::before`]: {
+    background: `linear-gradient( to left, transparent 0, ${`var(--ds-shadow-overflow-spread, ${N40A})`} ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}% ), linear-gradient( to right, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
+    top: '0px',
+    left: 0,
+    display: 'block'
+  },
+  [`& .${shadowClassNames.RIGHT_SHADOW}::after`]: {
+    background: `linear-gradient( to right, transparent 0, ${`var(--ds-shadow-overflow-spread, ${N40A})`} ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}% ), linear-gradient( to left, ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px, transparent 1px )`,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    left: `calc(100% - ${shadowWidth}px)`,
+    top: '0px',
+    display: 'block'
+  },
+  [`& .${shadowObserverClassNames.SENTINEL_LEFT}`]: {
+    height: '100%',
+    width: '0px',
+    minWidth: '0px'
+  },
+  [`& .${shadowObserverClassNames.SENTINEL_RIGHT}`]: {
+    height: '100%',
+    width: '0px',
+    minWidth: '0px'
   }
-
-  & .${shadowClassNames.RIGHT_SHADOW}, .${shadowClassNames.LEFT_SHADOW} {
-    position: relative;
-  }
-
-  & .${shadowClassNames.LEFT_SHADOW}::before {
-    background: linear-gradient(
-        to left,
-        transparent 0,
-        ${`var(--ds-shadow-overflow-spread, ${N40A})`}
-          ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}%
-      ),
-      linear-gradient(
-        to right,
-        ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
-        transparent 1px
-      );
-    top: 0px;
-    left: 0;
-    display: block;
-  }
-
-  & .${shadowClassNames.RIGHT_SHADOW}::after {
-    background: linear-gradient(
-        to right,
-        transparent 0,
-        ${`var(--ds-shadow-overflow-spread, ${N40A})`}
-          ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}%
-      ),
-      linear-gradient(
-        to left,
-        ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
-        transparent 1px
-      );
-    left: calc(100% - ${shadowWidth}px);
-    top: 0px;
-    display: block;
-  }
-
-  & .${shadowObserverClassNames.SENTINEL_LEFT} {
-    height: 100%;
-    width: 0px;
-    min-width: 0px;
-  }
-
-  & .${shadowObserverClassNames.SENTINEL_RIGHT} {
-    height: 100%;
-    width: 0px;
-    min-width: 0px;
-  }
-`;
+});
 export { shadowSharedStyle };

package/dist/es2019/ui/Announcer/announcer.js

@@ -9,8 +9,10 @@ import React, { forwardRef, memo, useEffect, useState } from 'react';
 
 // Note: Text won't be announced if the text message doesn't change after the render.
 // For using a forced announcement in this case, set the 'key' attribute - key={Date.now()}
+
 // Note: Flag 'contentRendered' resolves bug with duplicates messages (NVDA + Firefox)
 // https://github.com/nvaccess/nvda/labels/bug%2Fdouble-speaking
+
 let timer;
 const Announcer = /*#__PURE__*/forwardRef(({
   ariaAtomic = 'true',

package/dist/es2019/ui/ContextPanel/context.js

@@ -15,6 +15,7 @@ import React from 'react';
 // positionedOverEditor is used to determine whether the context panel is positioned over the Editor so we are
 // able to position and add margins to handle certain elements like inline comment dialogues overlapping the context
 // panel
+
 export const ContextPanel = /*#__PURE__*/React.createContext({
   width: 0,
   positionedOverEditor: false,

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

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.11.3";
+const packageVersion = "78.11.5";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl-next';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { B300, N200, N200A, N300A, N30A, N40A, N50A, N90 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { fontSize } from '@atlaskit/theme/constants';
 export const messages = defineMessages({
   collapseNode: {
     id: 'fabric.editor.collapseNode',
@@ -121,9 +121,8 @@ const containerStyles = styleProps => {
 const contentStyles = styleProps => () => css`
     padding-top: ${styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"};
     padding-right: ${"var(--ds-space-100, 8px)"};
-    // TODO: Migrate away from gridSize
-    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px
-    padding-left: ${gridSize() * 4 - gridSize() / 2}px;
+    padding-left: ${"var(--ds-space-300, 24px)"};
+    margin-left: ${"var(--ds-space-050, 4px)"};
     display: flow-root;
 
     // The follow rules inside @supports block are added as a part of ED-8893

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

@@ -128,7 +128,6 @@ export default class Layer extends Component {
           boundariesElement: 'viewport',
           padding: 0 // leave 0 pixels between popper and the boundariesElement
         },
-
         preventOverflow: {
           enabled: false,
           escapeWithReference: true