@atlaskit/editor-common 72.1.2 → 72.2.1

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

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import Popper from 'popper.js'; // eslint-disable-line import/extensions
-
 import rafSchedule from 'raf-schd';
 import { positionPropToPopperPosition } from './internal/helpers';
 const defaultState = {
@@ -22,13 +21,11 @@ const defaultState = {
 };
 export default class Layer extends Component {
   // working with extract-react-types
+
   constructor(props) {
     super(props);
-
     _defineProperty(this, "targetRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "contentRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "extractStyles", state => {
       if (state) {
         const popperHeight = state.offsets.popper.height;
@@ -47,78 +44,69 @@ export default class Layer extends Component {
         });
       }
     });
-
     this.state = defaultState;
     this.extractStyles = rafSchedule(this.extractStyles.bind(this));
   }
-
   componentDidMount() {
     this.applyPopper(this.props);
   }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     this.applyPopper(nextProps);
   }
-
   componentDidUpdate(prevProps, prevState) {
     const {
       onPositioned
     } = this.props;
     const {
       hasExtractedStyles
-    } = this.state; // This flag is set the first time the position is calculated from Popper and applied to the content
+    } = this.state;
 
+    // This flag is set the first time the position is calculated from Popper and applied to the content
     if (!prevState.hasExtractedStyles && hasExtractedStyles && onPositioned) {
       onPositioned();
     }
   }
-
   componentWillUnmount() {
     // this.extractStyles.cancel();
     if (this.popper) {
       this.popper.destroy();
     }
   }
+
   /* Calculate the max height of the popper if it's height is greater than the viewport to prevent
    * the bottom of the popper not being viewable.
    * Only works if the popper uses viewport as the boundary and has a fixed position ancestor.
    */
-
-
   calculateMaxHeight(originalHeight, currentHeight, positionTop, cssPosition) {
     let DocumentElementClientHeight = 0;
-
     if (document.documentElement) {
       DocumentElementClientHeight = document.documentElement.clientHeight;
     }
-
     if (cssPosition !== 'fixed') {
       return null;
     }
-
     const viewportHeight = Math.max(DocumentElementClientHeight, window.innerHeight || 0);
-    return viewportHeight < originalHeight && currentHeight + positionTop >= viewportHeight - 50 ? // allow some spacing either side of viewport height
+    return viewportHeight < originalHeight && currentHeight + positionTop >= viewportHeight - 50 ?
+    // allow some spacing either side of viewport height
     viewportHeight - 12 : null;
   }
-
   applyPopper(props) {
     if (!this.targetRef.current || !this.contentRef.current) {
       return;
     }
-
     if (this.popper) {
       this.popper.destroy();
-    } // "new Popper(...)" operation is very expensive when called on virtual DOM.
+    }
+
+    // "new Popper(...)" operation is very expensive when called on virtual DOM.
     // This condition reduces the number of calls so we can run our tests faster
     // (time was reduced from 100s to 13s).
-
-
     if (!props.content) {
       return;
-    } // we wrap our target in a div so that we can safely get a reference to it, but we pass the
-    // actual target to popper
-
+    }
 
+    // we wrap our target in a div so that we can safely get a reference to it, but we pass the
+    // actual target to popper
     const isAlwaysFixed = false;
     const actualTarget = this.targetRef.current.children[0];
     const popperOpts = {
@@ -141,8 +129,8 @@ export default class Layer extends Component {
           flipVariations: true,
           boundariesElement: 'viewport',
           padding: 0 // leave 0 pixels between popper and the boundariesElement
-
         },
+
         preventOverflow: {
           enabled: false,
           escapeWithReference: true
@@ -150,12 +138,10 @@ export default class Layer extends Component {
       },
       positionFixed: isAlwaysFixed
     };
-
     if (actualTarget) {
       this.popper = new Popper(actualTarget, this.contentRef.current, popperOpts);
     }
   }
-
   render() {
     const {
       transform,
@@ -179,9 +165,7 @@ export default class Layer extends Component {
       }
     }, this.props.content));
   }
-
 }
-
 _defineProperty(Layer, "defaultProps", {
   boundariesElement: 'viewport',
   children: null,

package/dist/es2019/ui/Layer/internal/helpers.js

@@ -52,11 +52,9 @@ export const POSITION_ATTRIBUTE_ENUM = {
   values: ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom left', 'bottom center', 'bottom right', 'left top', 'left middle', 'left bottom'],
   default: 'right middle'
 };
-
 function positionToPopper(position) {
   return position && positionMap[position] ? positionMap[position].position : null;
 }
-
 export function positionPropToPopperPosition(position) {
   return positionToPopper(position) || positionMap[POSITION_ATTRIBUTE_ENUM.default].position;
 }

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

@@ -27,19 +27,15 @@ export default function MediaSingle({
   handleMediaSingleRef
 }) {
   const children = React.Children.toArray(propsChildren);
-
   if (!pctWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
     pctWidth = 50;
-  } // When width is not set we have an absolute height for a given embed.
+  }
+  // When width is not set we have an absolute height for a given embed.
   // When both width and height are set we use them to determine ratio and use that to define
   // embed height in relation to whatever width of an dom element is in runtime
-
-
   const isHeightOnly = width === undefined;
-
   if (pctWidth) {
     const pxWidth = Math.ceil(calcPxFromPct(pctWidth / 100, lineLength || containerWidth || 0));
-
     if (isHeightOnly) {
       width = pxWidth - akEditorMediaResizeHandlerPaddingWide;
     } else if (width !== undefined) {
@@ -48,33 +44,32 @@ export default function MediaSingle({
     }
   } else if (isHeightOnly) {
     // No pctWidth can be found on already existing pages with existing embeds
+
     // It's ok to use Embed specific width, because width can be not set only in embed card.
     // This value will be used only in the case of non `wide` and non `full-width` cases inside MediaSingleDimensionHelper.
     width = DEFAULT_EMBED_CARD_WIDTH - akEditorMediaResizeHandlerPaddingWide;
-  } // Media wrapper controls the height of the box.
+  }
+
+  // Media wrapper controls the height of the box.
   // We can define this height
   // - via height directly
   // - via paddingBottom (if we have both height and width) which is a css trick to represent a ratio
-
-
   let mediaWrapperHeight;
   let paddingBottom;
-
   if (isHeightOnly) {
     mediaWrapperHeight = height;
   } else if (width !== undefined) {
     const mediaWrapperRatio = height / width * 100;
     paddingBottom = `${mediaWrapperRatio.toFixed(3)}%`;
-
     if (nodeType === 'embedCard') {
       // we want to set ratio of whole box (including header) buy knowing ratio of iframe itself
+
       // For some reason importing `embedHeaderHeight` from '@atlaskit/smart-card' breaks
       // packages/editor/editor-core/src/plugins/table/__tests__/unit/toolbar.ts 🤷‍️, but we have a test
       // that uses imported value, so it's should be good.
       paddingBottom = `calc(${paddingBottom} + 32px)`;
     }
   }
-
   const [media, caption] = children;
   return jsx("div", {
     ref: handleMediaSingleRef,

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

@@ -3,27 +3,23 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
-
 function float(layout) {
   switch (layout) {
     case 'wrap-right':
       return 'right';
-
     case 'wrap-left':
       return 'left';
-
     default:
       return 'none';
   }
 }
-
 function getWidthIfFullWidthMode(width) {
   return width > akEditorFullWidthLayoutWidth ? '100%' : `${width}px`;
 }
-
 function getWidthIfDefaultMode(width) {
   return width > akEditorFullPageMaxWidth ? '100%' : `${width}px`;
 }
+
 /**
  * Calculates the image width for non-resized images.
  *
@@ -31,8 +27,6 @@ function getWidthIfDefaultMode(width) {
  * then an image in wide or full-width can not be wider than the image's
  * original width.
  */
-
-
 export function calcLegacyWidth(layout, width, containerWidth = 0, fullWidthMode, isResized) {
   switch (layout) {
     case 'align-start':
@@ -40,76 +34,61 @@ export function calcLegacyWidth(layout, width, containerWidth = 0, fullWidthMode
     case 'wrap-right':
     case 'wrap-left':
       return width > containerWidth / 2 ? 'calc(50% - 12px)' : `${width}px`;
-
     case 'wide':
       return calcWideWidth(containerWidth);
-
     case 'full-width':
       return calcBreakoutWidth(layout, containerWidth);
-
     default:
       return isResized ? `${width}px` : fullWidthMode ? getWidthIfFullWidthMode(width) : getWidthIfDefaultMode(width);
   }
 }
+
 /**
  * Calculates the image width for previously resized images.
  *
  * Wide and full-width images are always that size (960px and 100%); there is
  * no distinction between max-width and width.
  */
-
 export function calcResizedWidth(layout, width, containerWidth = 0) {
   switch (layout) {
     case 'wide':
       return calcWideWidth(containerWidth);
-
     case 'full-width':
       return calcBreakoutWidth(layout, containerWidth);
-
     default:
       return `${width}px`;
   }
 }
-
 function calcMaxWidth(layout, containerWidth) {
   switch (layout) {
     case 'wide':
       return calcWideWidth(containerWidth);
-
     case 'full-width':
       return calcBreakoutWidth(layout, containerWidth);
-
     default:
       return '100%';
   }
 }
-
 function calcMargin(layout) {
   switch (layout) {
     case 'wrap-right':
       return '12px auto 12px 12px';
-
     case 'wrap-left':
       return '12px 12px 12px auto';
-
     default:
       return '24px auto';
   }
 }
-
 function isImageAligned(layout) {
   switch (layout) {
     case 'align-end':
       return 'margin-right: 0';
-
     case 'align-start':
       return 'margin-left: 0';
-
     default:
       return '';
   }
 }
-
 /**
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
@@ -139,7 +118,6 @@ export const MediaSingleDimensionHelper = ({
     transition: width 100ms ease-in;
   }
 `;
-
 const RenderFallbackContainer = ({
   hasFallbackContainer,
   paddingBottom,
@@ -157,7 +135,6 @@ const RenderFallbackContainer = ({
   }
   ` : ''}
 `;
-
 export const mediaWrapperStyle = props => css`
   position: relative;
 

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

@@ -5,7 +5,6 @@ import MentionWithProviders from './mention-with-providers';
 export default class Mention extends PureComponent {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "renderWithProvider", providers => {
       const {
         accessLevel,
@@ -26,10 +25,8 @@ export default class Mention extends PureComponent {
         profilecardProvider: profilecardProvider
       });
     });
-
     this.providerFactory = props.providers || new ProviderFactory();
   }
-
   componentWillUnmount() {
     if (!this.props.providers) {
       // new ProviderFactory is created if no `providers` has been set
@@ -37,7 +34,6 @@ export default class Mention extends PureComponent {
       this.providerFactory.destroy();
     }
   }
-
   render() {
     return /*#__PURE__*/React.createElement(WithProviders, {
       providers: ['mentionProvider', 'profilecardProvider'],
@@ -45,5 +41,4 @@ export default class Mention extends PureComponent {
       renderNode: this.renderWithProvider
     });
   }
-
 }

package/dist/es2019/ui/Mention/mention-with-providers.js

@@ -4,28 +4,22 @@ import React, { PureComponent } from 'react';
 import { ResourcedMention } from '@atlaskit/mention/element';
 import ResourcedMentionWithProfilecard from './mention-with-profilecard';
 const GENERIC_USER_IDS = ['HipChat', 'all', 'here'];
-
 const noop = () => {};
-
 export default class MentionWithProviders extends PureComponent {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "state", {
       profilecardProvider: null
     });
   }
-
   UNSAFE_componentWillMount() {
     this.updateProfilecardProvider(this.props);
   }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.profilecardProvider !== this.props.profilecardProvider) {
       this.updateProfilecardProvider(nextProps);
     }
   }
-
   updateProfilecardProvider(props) {
     // We are not using async/await here to avoid having an intermediate Promise
     // introduced by the transpiler.
@@ -47,7 +41,6 @@ export default class MentionWithProviders extends PureComponent {
       });
     }
   }
-
   render() {
     const {
       accessLevel,
@@ -72,5 +65,4 @@ export default class MentionWithProviders extends PureComponent {
       profilecardProvider: profilecardProvider
     }, actionHandlers));
   }
-
 }

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
@@ -11,7 +12,6 @@ const errorColor = css`
 const validColor = css`
   color: ${`var(--ds-text-success, ${G400})`};
 `;
-
 const messageStyle = props => css`
   ${h200(props)} font-weight: normal;
   color: ${`var(--ds-text-subtlest, ${N200})`};
@@ -19,7 +19,6 @@ const messageStyle = props => css`
   display: flex;
   justify-content: baseline;
 `;
-
 const iconWrapperStyle = css`
   display: flex;
   margin-right: 4px;

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

@@ -10,124 +10,96 @@ export default function overflowShadow(Component, options) {
   return class OverflowShadow extends React.Component {
     constructor(...args) {
       super(...args);
-
       _defineProperty(this, "overflowContainerWidth", 0);
-
       _defineProperty(this, "state", {
         showLeftShadow: false,
         showRightShadow: false
       });
-
       _defineProperty(this, "handleScroll", event => {
         if (!this.overflowContainer || event.target !== this.overflowContainer || options.useShadowObserver) {
           return;
         }
-
         this.updateShadows();
       });
-
       _defineProperty(this, "updateShadows", () => {
         if (options.useShadowObserver) {
           return;
         }
-
         this.setState(prevState => {
           if (!this.overflowContainer) {
             return;
           }
-
           const diff = this.calcOverflowDiff();
           const showRightShadow = diff > 0 && diff > this.overflowContainer.scrollLeft;
           const showLeftShadow = this.showLeftShadow(this.overflowContainer);
-
           if (showLeftShadow !== prevState.showLeftShadow || showRightShadow !== this.state.showRightShadow) {
             return {
               showLeftShadow,
               showRightShadow
             };
           }
-
           return null;
         });
       });
-
       _defineProperty(this, "showLeftShadow", overflowContainer => {
         return !!overflowContainer && overflowContainer.scrollLeft > 0;
       });
-
       _defineProperty(this, "calcOverflowDiff", () => {
         if (!this.overflowContainer) {
           return 0;
         }
-
         this.diff = this.calcScrollableWidth();
         return this.diff - this.overflowContainer.offsetWidth;
       });
-
       _defineProperty(this, "calcScrollableWidth", () => {
         if (!this.scrollable && this.overflowContainer) {
           return this.overflowContainer.scrollWidth;
         }
-
         if (!this.scrollable) {
           return 0;
         }
-
         let width = 0;
-
         for (let i = 0; i < this.scrollable.length; i++) {
           const scrollableElement = this.scrollable[i];
           width += scrollableElement.scrollWidth;
         }
-
         return width;
       });
-
       _defineProperty(this, "handleContainer", container => {
         if (!container || this.container) {
           return;
         }
-
         this.container = container;
         this.overflowContainer = container.querySelector(options.overflowSelector);
-
         if (!this.overflowContainer) {
           this.overflowContainer = container;
         }
-
         if (options.useShadowObserver) {
           this.initShadowObserver();
           return;
         }
-
         this.updateShadows();
         this.overflowContainer.addEventListener('scroll', this.handleScroll);
       });
     }
-
     componentWillUnmount() {
       if (options.useShadowObserver) {
         return this.shadowObserver && this.shadowObserver.dispose();
       }
-
       if (this.overflowContainer) {
         this.overflowContainer.removeEventListener('scroll', this.handleScroll);
       }
-
       this.updateShadows();
     }
-
     componentDidUpdate() {
       if (!options.useShadowObserver) {
         this.updateShadows();
       }
     }
-
     initShadowObserver() {
       if (this.shadowObserver || !this.overflowContainer) {
         return;
       }
-
       this.shadowObserver = new ShadowObserver({
         scrollContainer: this.overflowContainer,
         onUpdateShadows: shadowStates => {
@@ -136,20 +108,17 @@ export default function overflowShadow(Component, options) {
               showLeftShadow,
               showRightShadow
             } = shadowStates;
-
             if (showLeftShadow !== prevState.showLeftShadow || showRightShadow !== prevState.showRightShadow) {
               return {
                 showLeftShadow,
                 showRightShadow
               };
             }
-
             return null;
           });
         }
       });
     }
-
     render() {
       const {
         showLeftShadow,
@@ -161,6 +130,5 @@ export default function overflowShadow(Component, options) {
         shadowClassNames: classNames
       }, this.props));
     }
-
   };
 }

package/dist/es2019/ui/OverflowShadow/shadowObserver.js

@@ -1,42 +1,34 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 export let ShadowKeys;
-
 (function (ShadowKeys) {
   ShadowKeys["SHOW_LEFT_SHADOW"] = "showLeftShadow";
   ShadowKeys["SHOW_RIGHT_SHADOW"] = "showRightShadow";
 })(ShadowKeys || (ShadowKeys = {}));
-
 export const shadowObserverClassNames = {
   SENTINEL_LEFT: 'sentinel-left',
   SENTINEL_RIGHT: 'sentinel-right',
   SHADOW_CONTAINER: 'with-shadow-observer'
 };
-
 const requestIdleCallback = fn => {
   return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.requestAnimationFrame(fn);
 };
-
 const cancelIdleCallback = id => {
   return window.cancelIdleCallback ? window.cancelIdleCallback(id) : window.cancelAnimationFrame(id);
 };
-
 export class ShadowObserver {
   constructor({
     scrollContainer,
     onUpdateShadows
   }) {
     _defineProperty(this, "sentinels", {});
-
     _defineProperty(this, "shadowStates", {
       [ShadowKeys.SHOW_LEFT_SHADOW]: false,
       [ShadowKeys.SHOW_RIGHT_SHADOW]: false
     });
-
     _defineProperty(this, "init", () => {
       if (!this.scrollContainer || this.intersectionObserver) {
         return;
       }
-
       this.sentinels.right = document.createElement('div');
       this.sentinels.right.classList.add(shadowObserverClassNames.SENTINEL_RIGHT);
       this.scrollContainer.appendChild(this.sentinels.right);
@@ -51,26 +43,21 @@ export class ShadowObserver {
       this.intersectionObserver.observe(this.sentinels.left);
       this.intersectionObserver.observe(this.sentinels.right);
     });
-
     _defineProperty(this, "onIntersect", entry => {
       this.requestCallbackId = requestIdleCallback(() => {
         if (entry.target.classList.contains(shadowObserverClassNames.SENTINEL_LEFT)) {
           this.shadowStates[ShadowKeys.SHOW_LEFT_SHADOW] = !entry.isIntersecting;
         }
-
         if (entry.target.classList.contains(shadowObserverClassNames.SENTINEL_RIGHT)) {
           this.shadowStates[ShadowKeys.SHOW_RIGHT_SHADOW] = !entry.isIntersecting;
         }
-
         this.onUpdateShadows(this.shadowStates);
       });
     });
-
     this.scrollContainer = scrollContainer;
     this.onUpdateShadows = onUpdateShadows;
     this.init();
   }
-
   dispose() {
     if (this.intersectionObserver) {
       this.intersectionObserver.disconnect();
@@ -78,5 +65,4 @@ export class ShadowObserver {
       this.requestCallbackId && cancelIdleCallback(this.requestCallbackId);
     }
   }
-
 }