@atlaskit/editor-common 72.2.0 → 72.2.2

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

@@ -8,44 +8,31 @@ import { calculatePlacement, calculatePosition, findOverflowScrollParent, valida
 export default class Popup extends React.Component {
   constructor(...args) {
     var _window;
-
     super(...args);
-
     _defineProperty(this, "rafIds", new Set());
-
     _defineProperty(this, "state", {
       validPosition: true
     });
-
     _defineProperty(this, "popupRef", /*#__PURE__*/React.createRef());
-
     _defineProperty(this, "placement", ['', '']);
-
     _defineProperty(this, "handleRef", popup => {
       if (!popup) {
         return;
       }
-
       this.initPopup(popup);
     });
-
     _defineProperty(this, "scheduledUpdatePosition", rafSchedule(props => {
       this.updatePosition(this.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);
-
     _defineProperty(this, "initFocusTrap", rafSchedule(() => {
       const popup = this.popupRef.current;
-
       if (!popup) {
         return;
       }
-
       const trapConfig = {
         clickOutsideDeactivates: true,
         escapeDeactivates: true,
@@ -57,7 +44,6 @@ export default class Popup extends React.Component {
       this.focusTrap.activate();
     }));
   }
-
   /**
    * Calculates new popup position
    */
@@ -78,18 +64,14 @@ export default class Popup extends React.Component {
       rect,
       preventOverflow
     } = props;
-
     if (!target || !popup) {
       return {};
     }
-
     const placement = calculatePlacement(target, boundariesElement || document.body, fitWidth, fitHeight, alignX, alignY, forcePlacement, preventOverflow);
-
     if (onPlacementChanged && this.placement.join('') !== placement.join('')) {
       onPlacementChanged(placement);
       this.placement = placement;
     }
-
     let position = calculatePosition({
       placement,
       popup,
@@ -105,7 +87,6 @@ export default class Popup extends React.Component {
       validPosition: validatePosition(target)
     };
   }
-
   updatePosition(props = this.props, state = this.state) {
     const {
       popup
@@ -114,7 +95,6 @@ export default class Popup extends React.Component {
       position,
       validPosition
     } = this.calculatePosition(props, popup);
-
     if (position && validPosition) {
       this.setState({
         position,
@@ -122,7 +102,6 @@ export default class Popup extends React.Component {
       });
     }
   }
-
   cannotSetPopup(popup, target, overflowScrollParent) {
     /**
      * Check whether:
@@ -134,23 +113,20 @@ export default class Popup extends React.Component {
      */
     return !target || document.body.contains(target) && popup.offsetParent && !popup.offsetParent.contains(target) || overflowScrollParent && !overflowScrollParent.contains(popup.offsetParent);
   }
+
   /**
    * Popup initialization.
    * Checks whether it's possible to position popup along given target, and if it's not throws an error.
    */
-
-
   initPopup(popup) {
     this.popupRef.current = popup;
     const {
       target
     } = this.props;
     const overflowScrollParent = findOverflowScrollParent(popup);
-
     if (this.cannotSetPopup(popup, target, overflowScrollParent)) {
       return;
     }
-
     this.setState({
       popup
     });
@@ -165,95 +141,78 @@ export default class Popup extends React.Component {
      * So, calling scheduledUpdatePosition to position popup on next request animation frame,
      * which is currently working for most of the floating toolbar and other popups.
      */
-
     this.scheduledUpdatePosition(this.props);
-
     if (this.props.focusTrap) {
       this.initFocusTrap();
     }
   }
-
   UNSAFE_componentWillReceiveProps(newProps) {
     // We are delaying `updatePosition` otherwise it happens before the children
     // get rendered and we end up with a wrong position
     this.scheduledUpdatePosition(newProps);
   }
-
   /**
    * Cancels the initialisation of the focus trap if it has not yet occured
    * Deactivates the focus trap if it exists
    */
   destroyFocusTrap() {
     var _this$focusTrap;
-
     this.initFocusTrap.cancel();
     (_this$focusTrap = this.focusTrap) === null || _this$focusTrap === void 0 ? void 0 : _this$focusTrap.deactivate();
   }
+
   /**
    * Handle pausing, unpausing, and initialising (if not yet initialised) of the focus trap
    */
-
-
   handleChangedFocusTrapProp(prevProps) {
     if (prevProps.focusTrap !== this.props.focusTrap) {
       // If currently set to disable, then pause the trap if it exists
       if (!this.props.focusTrap) {
         var _this$focusTrap2;
-
         return (_this$focusTrap2 = this.focusTrap) === null || _this$focusTrap2 === void 0 ? void 0 : _this$focusTrap2.pause();
-      } // If set to enabled and trap already exists, unpause
-
+      }
 
+      // If set to enabled and trap already exists, unpause
       if (this.focusTrap) {
         this.focusTrap.unpause();
-      } // Else initialise the focus trap
-
+      }
 
+      // Else initialise the focus trap
       return this.initFocusTrap();
     }
   }
-
   componentDidUpdate(prevProps) {
     this.handleChangedFocusTrapProp(prevProps);
   }
-
   componentDidMount() {
     window.addEventListener('resize', this.onResize);
     const {
       stick
     } = this.props;
     this.scrollParentElement = findOverflowScrollParent(this.props.target);
-
     if (this.scrollParentElement && this.resizeObserver) {
       this.resizeObserver.observe(this.scrollParentElement);
     }
-
     if (stick) {
       this.scrollElement = this.scrollParentElement;
     } else {
       this.scrollElement = this.props.scrollableElement;
     }
-
     if (this.scrollElement) {
       this.scrollElement.addEventListener('scroll', this.onResize);
     }
   }
-
   componentWillUnmount() {
     window.removeEventListener('resize', this.onResize);
-
     if (this.scrollElement) {
       this.scrollElement.removeEventListener('scroll', this.onResize);
     }
-
     if (this.scrollParentElement && this.resizeObserver) {
       this.resizeObserver.unobserve(this.scrollParentElement);
     }
-
     this.scheduledUpdatePosition.cancel();
     this.destroyFocusTrap();
   }
-
   renderPopup() {
     const {
       position
@@ -261,11 +220,9 @@ export default class Popup extends React.Component {
     const {
       shouldRenderPopup
     } = this.props;
-
     if (shouldRenderPopup && !shouldRenderPopup(position || {})) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       ref: this.handleRef,
       style: {
@@ -274,12 +231,12 @@ export default class Popup extends React.Component {
         ...position,
         ...this.props.style
       },
-      "aria-label": this.props.ariaLabel || 'Popup' // Indicates component is an editor pop. Required for focus handling in Message.tsx
+      "aria-label": this.props.ariaLabel || 'Popup'
+      // Indicates component is an editor pop. Required for focus handling in Message.tsx
       ,
       "data-editor-popup": true
     }, this.props.children);
   }
-
   render() {
     const {
       target,
@@ -288,25 +245,20 @@ export default class Popup extends React.Component {
     const {
       validPosition
     } = this.state;
-
     if (!target || !validPosition) {
       return null;
     }
-
     if (mountTo) {
       return /*#__PURE__*/createPortal(this.renderPopup(), mountTo);
-    } // Without mountTo property renders popup as is,
-    // which means it will be cropped by "overflow: hidden" container.
-
+    }
 
+    // Without mountTo property renders popup as is,
+    // which means it will be cropped by "overflow: hidden" container.
     return this.renderPopup();
   }
-
 }
-
 _defineProperty(Popup, "defaultProps", {
   offset: [0, 0],
   allowOutOfBound: false
 });
-
 export { findOverflowScrollParent } from './utils';

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

@@ -4,23 +4,20 @@ export function isBody(elem) {
 export function isTextNode(elem) {
   return elem && elem.nodeType === 3;
 }
+
 /**
  * Decides if given fitHeight fits below or above the target taking boundaries into account.
  */
-
 export function getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement, preventOverflow) {
   if (forcePlacement && alignY) {
     return alignY;
   }
-
   if (!fitHeight) {
     return 'bottom';
   }
-
   if (isTextNode(target)) {
     target = target.parentElement;
   }
-
   const boundariesClientRect = boundariesElement.getBoundingClientRect();
   const {
     height: boundariesHeight
@@ -31,38 +28,34 @@ export function getVerticalPlacement(target, boundariesElement, fitHeight, align
     height: targetHeight
   } = target.getBoundingClientRect();
   const spaceAbove = targetTop - (boundariesTop - boundariesElement.scrollTop);
-  const spaceBelow = boundariesTop + boundariesHeight - (targetTop + targetHeight); // Force vertical placement to bottom if the space above doesn't accomodate the fitHeight
+  const spaceBelow = boundariesTop + boundariesHeight - (targetTop + targetHeight);
 
+  // Force vertical placement to bottom if the space above doesn't accomodate the fitHeight
   if (preventOverflow) {
     if (spaceAbove <= fitHeight) {
       return 'bottom';
     }
   }
-
   if (spaceBelow >= fitHeight || spaceBelow >= spaceAbove) {
     return 'bottom';
   }
-
   return 'top';
 }
+
 /**
  * Decides if given fitWidth fits to the left or to the right of the target taking boundaries into account.
  */
-
 export function getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement, preventOverflow) {
   // force placement unless preventOverflow is enabled
   if (forcePlacement && alignX && !preventOverflow) {
     return alignX;
   }
-
   if (!fitWidth) {
     return alignX || 'left';
   }
-
   if (isTextNode(target)) {
     target = target.parentElement;
   }
-
   const {
     left: targetLeft,
     width: targetWidth
@@ -73,19 +66,16 @@ export function getHorizontalPlacement(target, boundariesElement, fitWidth, alig
   } = boundariesElement.getBoundingClientRect();
   const spaceLeft = targetLeft - boundariesLeft + targetWidth;
   const spaceRight = boundariesLeft + boundariesWidth - targetLeft;
-
   if (alignX && spaceLeft > fitWidth && spaceRight > fitWidth) {
     return alignX;
   } else if (spaceRight >= fitWidth || spaceRight >= spaceLeft && !alignX) {
     return 'left';
   }
-
   return 'right';
 }
 export function calculatePlacement(target, boundariesElement, fitWidth, fitHeight, alignX, alignY, forcePlacement, preventOverflow) {
   return [getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement, preventOverflow), getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement, preventOverflow)];
 }
-
 const calculateHorizontalPlacement = ({
   placement,
   targetLeft,
@@ -101,7 +91,6 @@ const calculateHorizontalPlacement = ({
   allowOutOfBounds = false
 }) => {
   const position = {};
-
   if (placement === 'left') {
     position.left = Math.ceil(targetLeft - popupOffsetParentLeft + (isPopupParentBody ? 0 : popupOffsetParentScrollLeft) + offset[0]);
   } else if (placement === 'center') {
@@ -112,32 +101,26 @@ const calculateHorizontalPlacement = ({
   } else {
     position.right = Math.ceil(popupOffsetParentRight - targetRight - (isPopupParentBody ? 0 : popupOffsetParentScrollLeft) + offset[0]);
   }
-
   if (!allowOutOfBounds) {
     if (position.left !== undefined) {
       position.left = getPopupXInsideParent(position.left, popupClientWidth, popupOffsetParentClientWidth);
     }
-
     if (position.right !== undefined) {
       position.right = getPopupXInsideParent(position.right, popupClientWidth, popupOffsetParentClientWidth);
     }
   }
-
   return position;
 };
-
 const getPopupXInsideParent = (x, popupClientWidth, popupOffsetParentClientWidth) => {
   // minimum distance the popup can be from the edge of its parent
-  const minPopupMargin = 1; // prevent going too far right
-
+  const minPopupMargin = 1;
+  // prevent going too far right
   if (popupOffsetParentClientWidth < x + popupClientWidth) {
     x = popupOffsetParentClientWidth - popupClientWidth - minPopupMargin;
-  } // prevent going too far left
-
-
+  }
+  // prevent going too far left
   return Math.max(minPopupMargin, x);
 };
-
 const calculateVerticalStickBottom = ({
   target,
   targetTop,
@@ -147,13 +130,12 @@ const calculateVerticalStickBottom = ({
   position
 }) => {
   const scrollParent = findOverflowScrollParent(target);
-  const newPos = { ...position
+  const newPos = {
+    ...position
   };
-
   if (scrollParent) {
     let topOffsetTop = targetTop - scrollParent.getBoundingClientRect().top;
     let targetEnd = targetHeight + topOffsetTop;
-
     if (scrollParent.clientHeight - targetEnd <= popup.clientHeight + offset[1] * 2 && topOffsetTop < scrollParent.clientHeight) {
       const scroll = targetEnd - scrollParent.clientHeight + offset[1] * 2;
       let top = newPos.top || 0;
@@ -161,10 +143,8 @@ const calculateVerticalStickBottom = ({
       newPos.top = top;
     }
   }
-
   return newPos;
 };
-
 const calculateVerticalStickTop = ({
   target,
   targetTop,
@@ -176,19 +156,17 @@ const calculateVerticalStickTop = ({
   placement
 }) => {
   const scrollParent = findOverflowScrollParent(target);
-  const newPos = { ...position
+  const newPos = {
+    ...position
   };
-
   if (scrollParent) {
     const {
       top: scrollParentTop
     } = scrollParent.getBoundingClientRect();
     const topBoundary = targetTop - scrollParentTop;
     const scrollParentScrollTop = scrollParent.scrollTop;
-
     if (topBoundary < 0) {
       const isBelowNodeBoundary = targetTop + (scrollParentScrollTop - scrollParentTop) + targetHeight + offset[1] < scrollParentScrollTop;
-
       if (placement === 'top') {
         if (isBelowNodeBoundary) {
           newPos.bottom = popupOffsetParentHeight - (topBoundary + popupOffsetParent.scrollTop + targetHeight);
@@ -196,7 +174,6 @@ const calculateVerticalStickTop = ({
           newPos.bottom = topBoundary + (newPos.bottom || 0);
         }
       }
-
       if (placement === 'start') {
         if (isBelowNodeBoundary) {
           newPos.top = topBoundary + popupOffsetParent.scrollTop + targetHeight;
@@ -206,10 +183,8 @@ const calculateVerticalStickTop = ({
       }
     }
   }
-
   return newPos;
 };
-
 const calculateVerticalPlacement = ({
   placement,
   targetTop,
@@ -222,7 +197,6 @@ const calculateVerticalPlacement = ({
   offset
 }) => {
   const position = {};
-
   if (placement === 'top') {
     position.bottom = Math.ceil(popupOffsetParentHeight - (targetTop - popupOffsetParentTop) - (isPopupParentBody ? 0 : popupOffsetParentScrollTop) - borderBottomWidth + offset[1]);
   } else if (placement === 'start') {
@@ -231,15 +205,13 @@ const calculateVerticalPlacement = ({
     let top = Math.ceil(targetTop - popupOffsetParentTop + targetHeight + (isPopupParentBody ? 0 : popupOffsetParentScrollTop) - borderBottomWidth + offset[1]);
     position.top = top;
   }
-
   return position;
 };
+
 /**
  * Calculates relative coordinates for placing popup along with the target.
  * Uses placement from calculatePlacement.
  */
-
-
 export function calculatePosition({
   placement,
   target,
@@ -250,23 +222,18 @@ export function calculatePosition({
   rect
 }) {
   let position = {};
-
   if (!target || !popup || !popup.offsetParent) {
     return position;
   }
-
   if (isTextNode(target)) {
     target = target.parentElement;
   }
-
   const popupOffsetParent = popup.offsetParent;
   const offsetParentStyle = popupOffsetParent.style;
   let borderBottomWidth = 0;
-
   if (offsetParentStyle && offsetParentStyle.borderBottomWidth) {
     borderBottomWidth = parseInt(offsetParentStyle.borderBottomWidth, 10);
   }
-
   const [verticalPlacement, horizontalPlacement] = placement;
   const {
     top: popupOffsetParentTop,
@@ -293,10 +260,10 @@ export function calculatePosition({
     borderBottomWidth,
     offset
   });
-  position = { ...position,
+  position = {
+    ...position,
     ...verticalPosition
   };
-
   if ((verticalPlacement === 'top' || verticalPlacement === 'start') && stick) {
     position = calculateVerticalStickTop({
       target,
@@ -310,7 +277,6 @@ export function calculatePosition({
       placement: verticalPlacement
     });
   }
-
   if (verticalPlacement !== 'top' && verticalPlacement !== 'start' && stick) {
     position = calculateVerticalStickBottom({
       target,
@@ -321,7 +287,6 @@ export function calculatePosition({
       position
     });
   }
-
   const horizontalPosition = calculateHorizontalPlacement({
     placement: horizontalPlacement,
     targetLeft,
@@ -336,7 +301,8 @@ export function calculatePosition({
     offset,
     allowOutOfBounds
   });
-  position = { ...position,
+  position = {
+    ...position,
     ...horizontalPosition
   };
   return position;
@@ -346,28 +312,23 @@ export function validatePosition(popup) {
   if (!popup || !popup.offsetParent) {
     return false;
   }
-
   return true;
 }
+
 /**
  * Traverse DOM Tree upwards looking for popup parents with "overflow: scroll".
  */
-
 export function findOverflowScrollParent(popup) {
   let parent = popup;
-
   if (!parent) {
     return false;
   }
-
   while (parent = parent.parentElement) {
     // IE11 on Window 8 doesn't show styles from CSS when accessing through element.style property.
     const style = window.getComputedStyle(parent);
-
     if (style.overflow === 'scroll' || style.overflowX === 'scroll' || style.overflowY === 'scroll' || parent.classList.contains('fabric-editor-popup-scroll-parent')) {
       return parent;
     }
   }
-
   return false;
 }

package/dist/es2019/ui/PortalProvider/PortalProviderThemesProvider.js

@@ -7,7 +7,8 @@ export function PortalProviderThemeProviders(props) {
     children,
     mode
   } = props;
-  const styledComponentsAndEmotionTheme = React.useMemo( // This return value should only be one of the following
+  const styledComponentsAndEmotionTheme = React.useMemo(
+  // This return value should only be one of the following
   // - { [CHANNEL]: { mode },
   // - { theme: { [CHANNEL]: { mode } }
   // However, it appears that consumers have inconsistent expectations