@atlaskit/editor-common 115.5.1 → 115.6.0

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

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "115.5.0";
+const packageVersion = "115.5.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/es2019/ui/FloatingToolbar/Button.js

@@ -5,8 +5,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { Pulse } from '../Pulse/Pulse';
-import { iconOnlySpacing } from './iconOnlySpacing';
-import { getButtonStyles } from './styles';
+import { getButtonStyles, iconOnlySpacing } from './styles';
 const customSizeAndPadding = {
   minWidth: "var(--ds-space-400, 32px)",
   padding: `0px ${"var(--ds-space-050, 4px)"}`

package/dist/es2019/ui/FloatingToolbar/styles.js

@@ -1,3 +1,11 @@
+export const iconOnlySpacing = {
+  '&&': {
+    padding: '0px'
+  },
+  '& > span': {
+    margin: '0px'
+  }
+};
 const getStyles = (property, {
   appearance = 'default',
   state = 'default',
@@ -46,5 +54,4 @@ const colorVisualRefresh = {
 export const getButtonStyles = props => ({
   background: getStyles(backgroundVisualRefresh, props),
   color: getStyles(colorVisualRefresh, props)
-});
-// eslint-disable-next-line @atlaskit/editor/no-re-export
+});

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

@@ -1,4 +1,3 @@
-import { POSITION_ATTRIBUTE_ENUM } from './POSITION_ATTRIBUTE_ENUM';
 const positionMap = {
   'top left': {
     position: 'top-start',
@@ -49,10 +48,13 @@ const positionMap = {
     animation: 'left'
   }
 };
+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;
-}
-// eslint-disable-next-line @atlaskit/editor/no-re-export
+}

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

@@ -1,10 +1,24 @@
 import { akEditorBreakoutPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
-import { calcColumnsFromPx } from './calcColumnsFromPx';
-import { calcPxFromColumns } from './calcPxFromColumns';
-import { calcPxFromPct } from './calcPxFromPct';
-import { wrappedLayouts } from './wrappedLayouts';
+import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
 const validWidthModes = ['center', 'wrap-left', 'wrap-right', 'align-start', 'align-end'];
 export const layoutSupportsWidth = layout => validWidthModes.indexOf(layout) > -1;
+export function calcPxFromColumns(columns, lineLength, gridSize) {
+  const maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth / gridSize * columns - MEDIA_SINGLE_GUTTER_SIZE;
+}
+export function calcColumnsFromPx(width, lineLength, gridSize) {
+  const maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return (width + MEDIA_SINGLE_GUTTER_SIZE) * gridSize / maxWidth;
+}
+export function calcPxFromPct(pct, lineLength) {
+  const maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth * pct - MEDIA_SINGLE_GUTTER_SIZE;
+}
+export function calcPctFromPx(width, lineLength) {
+  const maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return (width + MEDIA_SINGLE_GUTTER_SIZE) / maxWidth;
+}
+export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
 export const calcPctWidth = (containerWidth, pctWidth, origWidth, origHeight) => pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
 export const calcMediaPxWidth = opts => {
   const {
@@ -66,14 +80,4 @@ export const snapToGrid = (gridWidth, width, height, lineLength, gridSize) => {
     height: height / width * alignedWidth,
     width: alignedWidth
   };
-};
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { calcPxFromColumns } from './calcPxFromColumns';
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { calcColumnsFromPx } from './calcColumnsFromPx';
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { calcPxFromPct } from './calcPxFromPct';
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { calcPctFromPx } from './calcPctFromPx';
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { wrappedLayouts } from './wrappedLayouts';
+};

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

@@ -12,8 +12,8 @@ import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from
 import { fg } from '@atlaskit/platform-feature-flags';
 import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
 import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
-import { getMediaSinglePixelWidth } from '../../media-single/getMediaSinglePixelWidth';
-import { shouldAddDefaultWrappedWidth } from '../../utils/shouldAddDefaultWrappedWidth';
+import { getMediaSinglePixelWidth } from '../../media-single/utils';
+import { shouldAddDefaultWrappedWidth } from '../../utils/rich-media-utils';
 import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 /**
  * MediaSingle

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

@@ -12,8 +12,6 @@ import { akEditorDefaultLayoutWidth, akEditorFullPageMaxWidth, akEditorFullWidth
 import { fg } from '@atlaskit/platform-feature-flags';
 import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
-import { calcResizedWidth } from './calcResizedWidth';
-import { roundToClosestEvenPxValue } from './roundToClosestEvenPxValue';
 function float(layout) {
   switch (layout) {
     case 'wrap-right':
@@ -95,6 +93,29 @@ export function calcLegacyWidthForInline(layout, width, containerWidth = 0, full
       return isResized ? `${width}px` : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth) : getWidthIfDefaultMode(width, containerWidth);
   }
 }
+
+/**
+ * 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.
+ * @param layout
+ * @param width
+ * @param containerWidth
+ * @example
+ */
+export function calcResizedWidth(layout, width, containerWidth = 0
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) {
+  switch (layout) {
+    case 'wide':
+      return calcWideWidth(containerWidth);
+    case 'full-width':
+      return calcBreakoutWidth(layout, containerWidth);
+    default:
+      return `${width}px`;
+  }
+}
 function calcMargin(layout) {
   switch (layout) {
     case 'wrap-right':
@@ -125,6 +146,28 @@ function isImageAligned(layout) {
       return '';
   }
 }
+
+/**
+ * Reduces the given CSS width value to the next lowest even pixel value if the value is in px.
+ * This is to mitigate subpixel rendering issues of embedded smart links.
+ *
+ * @param widthValue CSS width value to be rounded
+ * @returns Reduced CSS width value where px value given, or otherwise the original value
+ * @example
+ */
+
+// widthValue could be a string in px, rem or percentage, e.g. "800px", "100%", etc.
+export function roundToClosestEvenPxValue(widthValue) {
+  try {
+    if (widthValue.endsWith('px')) {
+      const pxWidth = parseInt(widthValue.slice(0, -2));
+      return `${pxWidth - pxWidth % 2}px`;
+    }
+    return widthValue;
+  } catch {
+    return widthValue;
+  }
+}
 /**
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
@@ -311,8 +354,4 @@ export const MediaBorderGapFiller = ({
       borderRadius
     }
   });
-};
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { calcResizedWidth } from './calcResizedWidth';
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { roundToClosestEvenPxValue } from './roundToClosestEvenPxValue';
+};

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

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { ShadowObserver } from './shadowObserver';
-import { shadowObserverClassNames } from './shadowObserverClassNames';
+import { ShadowObserver, shadowObserverClassNames } from './shadowObserver';
 export const shadowClassNames = {
   RIGHT_SHADOW: 'right-shadow',
   LEFT_SHADOW: 'left-shadow'

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

@@ -1,7 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { ShadowKeys } from './ShadowKeys';
-import { shadowObserverClassNames } from './shadowObserverClassNames';
+export let ShadowKeys = /*#__PURE__*/function (ShadowKeys) {
+  ShadowKeys["SHOW_LEFT_SHADOW"] = "showLeftShadow";
+  ShadowKeys["SHOW_RIGHT_SHADOW"] = "showRightShadow";
+  return ShadowKeys;
+}({});
+export const shadowObserverClassNames = {
+  SENTINEL_LEFT: 'sentinel-left',
+  SENTINEL_RIGHT: 'sentinel-right',
+  SHADOW_CONTAINER: 'with-shadow-observer'
+};
 const requestIdleCallback = fn => {
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -75,8 +83,4 @@ export class ShadowObserver {
       this.sentinels = {};
     }
   }
-}
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { ShadowKeys } from './ShadowKeys';
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { shadowObserverClassNames } from './shadowObserverClassNames';
+}

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

@@ -8,8 +8,7 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { calculatePlacement, calculatePosition, findOverflowScrollParent } from './utils';
-import { validatePosition } from './validatePosition';
+import { calculatePlacement, calculatePosition, findOverflowScrollParent, validatePosition } from './utils';
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export default class Popup extends React.Component {

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

@@ -1,5 +1,10 @@
-import { isBody } from './isBody';
-import { isTextNode } from './isTextNode';
+export function isBody(elem) {
+  return elem === document.body;
+}
+export function isTextNode(elem) {
+  return elem && elem.nodeType === 3;
+}
+
 /**
  * Decides if given fitHeight fits below or above the target taking boundaries into account.
  */
@@ -324,6 +329,13 @@ export function calculatePosition({
   };
   return position;
 }
+export function validatePosition(popup) {
+  // popup.offsetParent does not exist if the popup element is not mounted
+  if (!popup || !popup.offsetParent) {
+    return false;
+  }
+  return true;
+}
 
 /**
  * Traverse DOM Tree upwards looking for popup parents with "overflow: scroll".
@@ -354,10 +366,4 @@ function isElementNode(node) {
 // Helper function to check if the passed node is of HTMLElement class
 function isHTMLElementNode(node) {
   return isElementNode(node) && node.namespaceURI === 'http://www.w3.org/1999/xhtml';
-}
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { isBody } from './isBody';
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { isTextNode } from './isTextNode';
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { validatePosition } from './validatePosition';
+}

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

@@ -6,8 +6,7 @@ import { akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { richMediaClassName } from '../../styles';
 import { gridTypeForLayout } from '../../utils';
-import { handleSides } from './handleSides';
-import { snapTo } from './snapTo';
+import { handleSides, snapTo } from './utils';
 const getResizeAnalyticsEvent = (type, size, layout) => {
   const actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
   return {

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

@@ -1,6 +1,12 @@
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { snapTo } from './snapTo';
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { handleSides } from './handleSides';
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { imageAlignmentMap } from './imageAlignmentMap';
+export const snapTo = (target, points) => {
+  return points.length === 0 ?
+  // extreme last case if there are no points somehow
+  target : points.reduce((point, closest) => {
+    return Math.abs(closest - target) < Math.abs(point - target) ? closest : point;
+  });
+};
+export const handleSides = ['left', 'right'];
+export const imageAlignmentMap = {
+  left: 'start',
+  right: 'end'
+};

package/dist/es2019/ui/index.js

@@ -5,24 +5,17 @@ export { AssistiveText } from './AssistiveText/AssistiveText';
 export { default as Caption } from './Caption';
 export { default as MediaSingle } from './MediaSingle';
 export { MediaSingleDimensionHelper, MediaBorderGapFiller } from './MediaSingle/styled';
-export { calcColumnsFromPx } from './MediaSingle/calcColumnsFromPx';
-export { calcPctFromPx } from './MediaSingle/calcPctFromPx';
-export { calcPxFromColumns } from './MediaSingle/calcPxFromColumns';
-export { calcPxFromPct } from './MediaSingle/calcPxFromPct';
-export { layoutSupportsWidth, snapToGrid, calcMediaPxWidth } from './MediaSingle/grid';
-export { wrappedLayouts } from './MediaSingle/wrappedLayouts';
+export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts } from './MediaSingle/grid';
 export { mediaLinkStyle } from './MediaSingle/link';
 export { default as Popup } from './Popup';
 export { findOverflowScrollParent } from './Popup/utils';
 export { default as UnsupportedBlock } from './UnsupportedBlock';
 export { default as UnsupportedInline } from './UnsupportedInline';
 export { BaseTheme, mapBreakpointToLayoutMaxWidth } from './BaseTheme';
-export { PlainOutsideClickTargetRefContext } from './PlainOutsideClickTargetRefContext';
-export { default as withOuterListeners } from './with-outer-listeners';
+export { default as withOuterListeners, PlainOutsideClickTargetRefContext } from './with-outer-listeners';
 export { WidthContext, WidthConsumer, WidthProvider, createWidthContext, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
-export { ShadowObserver } from './OverflowShadow/shadowObserver';
-export { shadowObserverClassNames } from './OverflowShadow/shadowObserverClassNames';
+export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shadowObserver';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
@@ -35,9 +28,7 @@ export { SmallerEditIcon } from './FloatingToolbar/SmallerEditIcon';
 export { RECENT_SEARCH_WIDTH_IN_PX, RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, LINKPICKER_HEIGHT_IN_PX } from './LinkSearch/const';
 export { ContextPanelProvider, ContextPanelWidthProvider, ContextPanelConsumer, ContextPanel } from './ContextPanel/context';
 export { default as Resizer } from './ResizerLegacy';
-export { handleSides } from './ResizerLegacy/handleSides';
-export { imageAlignmentMap } from './ResizerLegacy/imageAlignmentMap';
-export { snapTo } from './ResizerLegacy/snapTo';
+export { snapTo, handleSides, imageAlignmentMap } from './ResizerLegacy/utils';
 export { wrapperStyle } from './ResizerLegacy/styled';
 export { panelTextInput } from './PanelTextInput/styles';
 export { default as PanelTextInput } from './PanelTextInput';

package/dist/es2019/ui/with-outer-listeners.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
-import { PlainOutsideClickTargetRefContext } from './PlainOutsideClickTargetRefContext';
+// Use this context to pass in the reference of the element that should be considered as the outside click target
+// The outside click target is the element that should be clicked outside of to trigger the `handleClickOutside` event
+export const PlainOutsideClickTargetRefContext = /*#__PURE__*/React.createContext(() => {});
 export default function withOuterListeners(Component) {
   return class WithOutsideClick extends PureComponent {
     constructor(...args) {
@@ -56,6 +58,4 @@ export default function withOuterListeners(Component) {
       , this.props));
     }
   };
-}
-// eslint-disable-next-line @atlaskit/editor/no-re-export
-export { PlainOutsideClickTargetRefContext } from './PlainOutsideClickTargetRefContext';
+}

package/dist/es2019/ui-color/ColorPalette/Palettes/highlightColorPalette.js

@@ -8,8 +8,8 @@ import { jsx } from '@emotion/react';
 import { backgroundColorPalette } from '@atlaskit/adf-schema';
 import { useThemeObserver } from '@atlaskit/tokens';
 import getColorMessage from './getColorMessage';
-import { mapPaletteColor } from './mapPaletteColor';
 import paletteMessages from './paletteMessages';
+import { mapPaletteColor } from './textColorPalette';
 export const REMOVE_HIGHLIGHT_COLOR = '#00000000';
 
 // Custom icon ejection - these icons have been migrated away from the deprecated Custom / SVG components to native SVG. Please review whether this icon should be contributed to @atlaskit/icon-lab or whether it can be replaced by an existing icon from either @atlaskit/icon or @atlaskit/icon-lab
@@ -42,6 +42,7 @@ export const EditorDiagonalLineIcon = () => {
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     jsx(DiagonalLineGlyph, {
+      "aria-label": "",
       style: {
         color: primaryColor
       }