@atlaskit/editor-common 65.0.0 → 66.0.0

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

@@ -1,5 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import React, { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
-import styled, { css } from 'styled-components';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
@@ -38,13 +42,22 @@ const EXPAND_EXPANDED_BORDER_COLOR = themed({
   light: colors.N40A,
   dark: colors.DN50
 });
-export const ExpandIconWrapper = styled.div`
+export const ExpandIconWrapper = ({
+  children,
+  expanded
+}) => {
+  return jsx("div", {
+    css: props => expanded ? [expandIconWrapperStyle(props), expandIconWrapperExpandedStyle] : expandIconWrapperStyle(props)
+  }, children);
+};
+
+const expandIconWrapperStyle = props => css`
   cursor: pointer;
   display: flex;
   color: ${themed({
   light: colors.N90,
   dark: '#d9dde3'
-})};
+})(props)};
   border-radius: ${gridSize() / 2}px;
   width: 24px;
   height: 24px;
@@ -54,69 +67,85 @@ export const ExpandIconWrapper = styled.div`
   }
 
   svg {
-    ${props => props.expanded ? 'transform: rotate(90deg);' : ''}
     transition: transform 0.2s ${akEditorSwoopCubicBezier};
   }
 `;
-export const ExpandLayoutWrapper = styled.div`
+
+const expandIconWrapperExpandedStyle = css`
+  svg {
+    transform: rotate(90deg);
+  }
+`;
+export const expandLayoutWrapperStyle = css`
   width: ${gridSize() * 3}px;
   height: ${gridSize() * 3}px;
 `;
-const ContainerStyles = css`
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${({
-  expanded,
-  focused
-}) => {
-  const expandedBorderColor = expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR;
-  return focused ? EXPAND_FOCUSED_BORDER_COLOR : expandedBorderColor;
-}};
-  border-radius: ${BORDER_RADIUS}px;
-  min-height: 25px;
-  background: ${({
-  expanded
-}) => !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND};
-  margin: ${props => `${gridSize() / 2 / fontSize()}rem ${// Only only these margins if the expand isn't editable
-// and is the root level expand.
-props['data-node-type'] === 'expand' ? `-${akLayoutGutterOffset}px` : `0`} 0`};
+export const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx("div", _extends({
+    css: expandLayoutWrapperStyle
+  }, rest, {
+    ref: ref
+  }), children);
+});
 
-  transition: background 0.3s ${akEditorSwoopCubicBezier},
-    border-color 0.3s ${akEditorSwoopCubicBezier};
-  padding: ${gridSize}px;
+const containerStyles = styleProps => {
+  const {
+    expanded,
+    focused
+  } = styleProps;
+  const marginTop = `${gridSize() / 2 / fontSize()}rem`;
+  const marginBottom = 0; // Only only these margins if the expand isn't editable
+  // and is the root level expand.
 
-  &:hover {
-    border: 1px solid ${themed({
-  light: colors.N50A,
-  dark: colors.DN50
-})};
-    background: ${EXPAND_SELECTED_BACKGROUND};
-  }
+  const marginHorizontal = styleProps['data-node-type'] === 'expand' ? `-${akLayoutGutterOffset}px` : 0;
+  const margin = `${marginTop} ${marginHorizontal} ${marginBottom}`;
+  return themeProps => css`
+    border-width: 1px;
+    border-style: solid;
+    border-color: ${focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR};
+    border-radius: ${BORDER_RADIUS}px;
+    min-height: 25px;
+    background: ${!expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps)};
+    margin: ${margin};
+
+    transition: background 0.3s ${akEditorSwoopCubicBezier},
+      border-color 0.3s ${akEditorSwoopCubicBezier};
+    padding: ${gridSize()}px;
+
+    &:hover {
+      border: 1px solid
+        ${themed({
+    light: colors.N50A,
+    dark: colors.DN50
+  })(themeProps)};
+      background: ${EXPAND_SELECTED_BACKGROUND(themeProps)};
+    }
 
-  td > &:first-child {
-    margin-top: 0;
+    td > &:first-child {
+      margin-top: 0;
+    }
+  `;
+};
+
+const contentStyles = styleProps => themeProps => css`
+  padding-top: ${styleProps.expanded ? gridSize() : 0}px;
+  padding-right: ${gridSize()}px;
+  padding-left: ${gridSize() * 4 - gridSize() / 2}px;
+  display: flow-root;
+
+  // The follow rules inside @supports block are added as a part of ED-8893
+  // The fix is targeting mobile bridge on iOS 12 or below,
+  // We should consider remove this fix when we no longer support iOS 12
+  @supports not (display: flow-root) {
+    width: 100%;
+    box-sizing: border-box;
   }
-`;
-const ContentStyles = css`
-  ${({
-  expanded
-}) => {
-  return css`
-      padding-top: ${expanded ? gridSize() : 0}px;
-      padding-right: ${gridSize()}px;
-      padding-left: ${gridSize() * 4 - gridSize() / 2}px;
-      display: table;
-      display: flow-root;
-
-      // The follow rules inside @supports block are added as a part of ED-8893
-      // The fix is targeting mobile bridge on iOS 12 or below,
-      // We should consider remove this fix when we no longer support iOS 12
-      @supports not (display: flow-root) {
-        width: 100%;
-        box-sizing: border-box;
-      }
-
-      ${!expanded ? `
+
+  ${!styleProps.expanded ? `
         .expand-content-wrapper, .nestedExpand-content-wrapper {
           /* We visually hide the content here to preserve the content during copy+paste */
           width: 100%;
@@ -128,10 +157,9 @@ const ContentStyles = css`
           user-select: none;
         }
       ` : ''}
-    `;
-}};
 `;
-const TitleInputStyles = css`
+
+const titleInputStyles = props => css`
   outline: none;
   border: none;
   font-size: ${relativeFontSizeToBase16(fontSize())};
@@ -140,7 +168,7 @@ const TitleInputStyles = css`
   color: ${themed({
   light: colors.N200A,
   dark: colors.DN600
-})};
+})(props)};
   background: transparent;
   display: flex;
   flex: 1;
@@ -152,10 +180,11 @@ const TitleInputStyles = css`
     color: ${themed({
   light: colors.N200A,
   dark: colors.DN600
-})};
+})(props)};
   }
 `;
-const TitleContainerStyles = css`
+
+const titleContainerStyles = props => css`
   padding: 0;
   display: flex;
   align-items: flex-start;
@@ -166,7 +195,7 @@ const TitleContainerStyles = css`
   color: ${themed({
   light: colors.N300A,
   dark: colors.DN600
-})};
+})(props)};
   overflow: hidden;
   cursor: pointer;
   // Prevent browser selection being inside the title container
@@ -176,9 +205,10 @@ const TitleContainerStyles = css`
     outline: 0;
   }
 `;
+
 export const sharedExpandStyles = {
-  TitleInputStyles,
-  TitleContainerStyles,
-  ContainerStyles,
-  ContentStyles
+  titleInputStyles,
+  titleContainerStyles,
+  containerStyles,
+  contentStyles
 };

package/dist/es2019/ui/{IntlNextErrorBoundary → IntlErrorBoundary}/index.js

@@ -9,7 +9,7 @@ const isMissingIntlProviderInAncestryError = err => {
   return err === null || err === void 0 ? void 0 : (_err$toString = err.toString()) === null || _err$toString === void 0 ? void 0 : _err$toString.includes('<IntlProvider> needs to exist in the component ancestry');
 };
 
-export class IntlNextErrorBoundary extends React.Component {
+export class IntlErrorBoundary extends React.Component {
   constructor(...args) {
     super(...args);
 

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

@@ -1,8 +1,10 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { calcPxFromPct } from './grid';
-import { MediaSingleWrapper, MediaWrapper } from './styled';
+import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 export const DEFAULT_IMAGE_WIDTH = 250;
 export const DEFAULT_IMAGE_HEIGHT = 200;
 export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
@@ -74,13 +76,15 @@ export default function MediaSingle({
   }
 
   const [media, caption] = children;
-  return /*#__PURE__*/React.createElement(MediaSingleWrapper, {
-    innerRef: handleMediaSingleRef,
-    width: width,
-    layout: layout,
-    containerWidth: containerWidth,
-    pctWidth: pctWidth,
-    fullWidthMode: fullWidthMode,
+  return jsx("div", {
+    ref: handleMediaSingleRef,
+    css: MediaSingleDimensionHelper({
+      width,
+      layout,
+      containerWidth,
+      pctWidth,
+      fullWidthMode
+    }),
     "data-layout": layout,
     "data-width": pctWidth,
     "data-node-type": nodeType,
@@ -88,7 +92,7 @@ export default function MediaSingle({
       'is-loading': isLoading,
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     })
-  }, /*#__PURE__*/React.createElement(MediaWrapper, {
+  }, jsx(MediaWrapper, {
     hasFallbackContainer: hasFallbackContainer,
     height: mediaWrapperHeight,
     paddingBottom: paddingBottom

package/dist/es2019/ui/MediaSingle/styled.js

@@ -1,4 +1,6 @@
-import styled, { css } from 'styled-components';
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 
@@ -156,24 +158,20 @@ const RenderFallbackContainer = ({
   ` : ''}
 `;
 
-export const MediaWrapper = styled.div`
+export const mediaWrapperStyle = props => css`
   position: relative;
 
-  ${RenderFallbackContainer}
+  ${RenderFallbackContainer(props)}
 
   /* Editor */
   & > figure {
-    position: ${({
-  hasFallbackContainer
-}) => hasFallbackContainer ? 'absolute' : 'relative'};
+    position: ${props.hasFallbackContainer ? 'absolute' : 'relative'};
     height: 100%;
     width: 100%;
   }
 
   & > div {
-    position: ${({
-  hasFallbackContainer
-}) => hasFallbackContainer ? 'absolute' : 'relative'};
+    position: ${props.hasFallbackContainer ? 'absolute' : 'relative'};
     height: 100%;
     width: 100%;
   }
@@ -192,7 +190,10 @@ export const MediaWrapper = styled.div`
     }
   }
 `;
-export const MediaSingleWrapper = styled.div`
-  ${MediaSingleDimensionHelper};
-`;
+export const MediaWrapper = ({
+  children,
+  ...rest
+}) => jsx("div", {
+  css: mediaWrapperStyle(rest)
+}, children);
 MediaWrapper.displayName = 'WrapperMediaSingle';

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

@@ -6,6 +6,8 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { calculatePlacement, calculatePosition, findOverflowScrollParent, validatePosition } from './utils';
 export default class Popup extends React.Component {
   constructor(...args) {
+    var _window;
+
     super(...args);
 
     _defineProperty(this, "state", {
@@ -25,6 +27,10 @@ export default class Popup extends React.Component {
     _defineProperty(this, "scheduledUpdatePosition", rafSchedule(props => this.updatePosition(props)));
 
     _defineProperty(this, "onResize", () => this.scheduledUpdatePosition(this.props));
+
+    _defineProperty(this, "resizeObserver", (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(() => {
+      this.scheduledUpdatePosition(this.props);
+    }) : undefined);
   }
 
   /**
@@ -147,9 +153,14 @@ export default class Popup extends React.Component {
     const {
       stick
     } = this.props;
+    this.scrollParentElement = findOverflowScrollParent(this.props.target);
+
+    if (this.scrollParentElement && this.resizeObserver) {
+      this.resizeObserver.observe(this.scrollParentElement);
+    }
 
     if (stick) {
-      this.scrollElement = findOverflowScrollParent(this.props.target);
+      this.scrollElement = this.scrollParentElement;
     } else {
       this.scrollElement = this.props.scrollableElement;
     }
@@ -166,6 +177,10 @@ export default class Popup extends React.Component {
       this.scrollElement.removeEventListener('scroll', this.onResize);
     }
 
+    if (this.scrollParentElement && this.resizeObserver) {
+      this.resizeObserver.unobserve(this.scrollParentElement);
+    }
+
     this.scheduledUpdatePosition.cancel();
   }
 

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

@@ -12,7 +12,6 @@ import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
 const blockNodeStyle = css`
-  align-items: center;
   background: ${N30};
   border: 1px dashed ${N50};
   border-radius: ${borderRadius()}px;

package/dist/es2019/ui/index.js

@@ -11,9 +11,7 @@ export { default as withOuterListeners } from './with-outer-listeners';
 export { WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
-export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, ExpandLayoutWrapper } from './Expand';
+export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
 export { clearNextSiblingMarginTopStyle } from './clear-next-sibling-margin-top';
-export { IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlNextErrorBoundary';
-export { IntlLegacyFallbackProvider } from './IntlLegacyFallbackProvider';
-export { LegacyToNextIntlProvider } from './LegacyToNextIntlProvider';
+export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';

package/dist/es2019/utils/compare-props.js

@@ -0,0 +1,99 @@
+import React from 'react';
+export const getKeys = Object.keys;
+export const getKeysAddedRemovedCommon = (object1, object2) => {
+  const oldKeys = object1 !== null ? getKeys(object1) : [];
+  const newKeys = object2 !== null ? getKeys(object2) : [];
+  const removed = oldKeys.filter(key => !newKeys.includes(key));
+  const added = newKeys.filter(key => !oldKeys.includes(key));
+  const common = oldKeys.filter(key => newKeys.includes(key));
+  return {
+    added,
+    common,
+    removed
+  };
+};
+export const serializeValue = value => {
+  const valueType = typeof value;
+
+  if (value === null) {
+    return 'null';
+  } else if (value === undefined) {
+    return 'undefined';
+  } else if (valueType === 'string' || valueType === 'number') {
+    return value;
+  } else if (valueType === 'symbol') {
+    return value.toString();
+  } // Calling toString of function returns whole function text with body.
+  // So, just return function with name.
+  else if (valueType === 'function') {
+    return `function:${value.name}`;
+  } else if (valueType === 'object') {
+    return {
+      type: 'object',
+      keys: Object.keys(value)
+    };
+  }
+};
+export const getPropsDifference = (object1, object2, curDepth = 0, maxDepth = 2, keysToIgnore = []) => {
+  const {
+    added,
+    common,
+    removed
+  } = getKeysAddedRemovedCommon(object1, object2);
+  const changed = [];
+  common.forEach(key => {
+    const value1 = object1[key];
+    const value2 = object2[key];
+    const value1Type = typeof value1;
+    const value2Type = typeof value2; // Do comparision only if values doesn't match (or reference to same object in memory).
+    // Or if key does not exist in keys to ignore.
+
+    if (value1 !== value2 && keysToIgnore.indexOf(key) === -1) {
+      // if both key value are objects and not referencing same object in memory.
+      //  then get recursive difference.
+      if ( /*#__PURE__*/React.isValidElement(value1) || /*#__PURE__*/React.isValidElement(value2)) {
+        changed.push({
+          key,
+          reactElementChanged: true
+        });
+      } else if (value1Type === 'object' && value2Type === 'object') {
+        if (curDepth <= maxDepth) {
+          const difference = getPropsDifference(value1, value2, curDepth + 1, maxDepth);
+          changed.push({
+            key,
+            difference
+          });
+        } else {
+          changed.push({
+            key,
+            maxDepthReached: true
+          });
+        }
+      } else {
+        changed.push({
+          key,
+          oldValue: serializeValue(value1),
+          newValue: serializeValue(value2)
+        });
+      }
+    }
+  });
+  return {
+    added,
+    changed,
+    removed
+  };
+};
+export const getShallowPropsDifference = (object1, object2) => {
+  const {
+    added,
+    common,
+    removed
+  } = getKeysAddedRemovedCommon(object1, object2);
+  const changed = common.filter(key => object1[key] !== object2[key]);
+  return {
+    added,
+    changed,
+    removed
+  };
+};

package/dist/es2019/utils/index.js

@@ -23,4 +23,6 @@ export { shouldForceTracking } from './should-force-tracking';
 export { getModeFromTheme } from './getModeFromTheme';
 export { sniffUserBrowserExtensions } from './browser-extensions';
 export { RenderCountProfiler } from './profiler/render-count';
-export { validateADFEntity, validationErrorHandler } from './validate-using-spec';
+export { validateADFEntity, validationErrorHandler } from './validate-using-spec';
+export { getShallowPropsDifference, getPropsDifference } from './compare-props';
+export { useComponentRenderTracking } from './performance/hooks/use-component-render-tracking';

package/dist/es2019/utils/performance/hooks/use-component-render-tracking/index.js

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react';
+import { uuid } from '@atlaskit/adf-schema';
+import { getPropsDifference, getShallowPropsDifference } from '../../../compare-props';
+export function useComponentRenderTracking({
+  onRender,
+  propsDiffingOptions,
+  zeroBasedCount = true
+}) {
+  const propsRef = useRef();
+  const renderCountRef = useRef(zeroBasedCount ? 0 : 1);
+  const {
+    current: componentId
+  } = useRef(uuid.generate());
+  useEffect(() => {
+    const lastProps = propsRef.current;
+    const renderCount = renderCountRef.current;
+    let propsDifference;
+
+    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled && lastProps) {
+      propsDifference = propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.useShallow ? getShallowPropsDifference(lastProps, propsDiffingOptions.props) : getPropsDifference(lastProps, propsDiffingOptions.props, 0, 2, propsDiffingOptions === null || propsDiffingOptions === void 0 ? void 0 : propsDiffingOptions.propsToIgnore);
+    }
+
+    const result = {
+      renderCount,
+      propsDifference,
+      componentId
+    };
+    onRender(result);
+
+    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled) {
+      propsRef.current = propsDiffingOptions.props;
+    }
+
+    renderCountRef.current = renderCountRef.current + 1;
+  }); // No dependencies run on each render
+}

package/dist/es2019/utils/validator.js

@@ -356,7 +356,7 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
             mediaCollection = collection;
           }
 
-          if (mediaId && mediaCollection && adfStage === 'stage0') {
+          if (mediaId && mediaCollection) {
             return {
               type,
               attrs,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "65.0.0",
+	"version": "66.0.0",
 	"sideEffects": false
 }

package/dist/esm/normalize-feature-flags.js

@@ -1,7 +1,26 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _typeof from "@babel/runtime/helpers/typeof";
 import camelCase from 'lodash/camelCase';
 import kebabCase from 'lodash/kebabCase';
 var EMPTY = {};
+
+function isObjectFlagKey(key, value, objectFlagKeys) {
+  return Boolean(typeof value === 'string' && (objectFlagKeys === null || objectFlagKeys === void 0 ? void 0 : objectFlagKeys.includes(key)));
+}
+
+function isValidJSONObject(value) {
+  try {
+    var result = JSON.parse(value);
+
+    if (_typeof(result) === 'object' && result !== null) {
+      return true;
+    }
+
+    return false;
+  } catch (err) {
+    return false;
+  }
+}
 /**
  * Normalise and filter a free Record<string, unknown> to match
  * the rules for feature flags in editor and renderer
@@ -12,18 +31,27 @@ var EMPTY = {};
  *
  * Output matches
  * 1. cased in camelCase (match [a-zA-Z])
- * 2. has boolean value
+ * 2. has boolean value or object {} value
  *
  * @param rawFeatureFlags
  */
 
-export function normalizeFeatureFlags(rawFeatureFlags) {
+
+export function normalizeFeatureFlags(rawFeatureFlags, options) {
   if (!rawFeatureFlags) {
     return EMPTY;
   }
 
   return Object.entries(rawFeatureFlags).filter(function (e) {
-    return typeof e[1] === 'boolean';
+    if (typeof e[1] === 'boolean') {
+      return true;
+    }
+
+    if (isObjectFlagKey(camelCase(e[0]), e[1], options === null || options === void 0 ? void 0 : options.objectFlagKeys) && isValidJSONObject(e[1])) {
+      return true;
+    }
+
+    return false;
   }).filter(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 1),
         key = _ref2[0];
@@ -40,7 +68,14 @@ export function normalizeFeatureFlags(rawFeatureFlags) {
         key = _ref6[0],
         value = _ref6[1];
 
-    flags[key] = value;
+    if (isObjectFlagKey(key, value, options === null || options === void 0 ? void 0 : options.objectFlagKeys)) {
+      flags[key] = JSON.parse(value);
+    }
+
+    if (typeof value === 'boolean') {
+      flags[key] = value;
+    }
+
     return flags;
   }, {});
 }

package/dist/esm/styles/shared/link.js

@@ -2,6 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 var linkSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  a.blockLink {\n    display: block;\n  }\n"])));
 export { linkSharedStyle };

package/dist/esm/styles/shared/lists.js

@@ -5,4 +5,4 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { bulletListSelector, orderedListSelector } from '@atlaskit/adf-schema';
 import browser from '../../utils/browser';
-export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: 24px;\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    display: table;\n    display: flow-root;\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);
+export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: 24px;\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);