@atlaskit/renderer 85.0.0 → 89.0.0

package/dist/es2019/react/nodes/taskItem.js

@@ -35,6 +35,7 @@ export default class TaskItem extends PureComponent {
         objectAri: objectAri,
         taskId: localId,
         isDone: state === 'DONE',
+        isRenderer: true,
         disabled: disabled,
         taskDecisionProvider: taskDecisionProvider,
         contextIdentifierProvider: contextIdentifierProvider,

package/dist/es2019/render-document.js

@@ -4,6 +4,7 @@ import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaski
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from './analytics/enums';
 import { PLATFORM } from './analytics/events';
 import { trackUnsupportedContentLevels } from './analytics/unsupported-content';
+import { transformMediaLinkMarks } from '@atlaskit/adf-utils';
 const SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
 
 const withStopwatch = cb => {
@@ -26,7 +27,22 @@ export const renderDocument = (doc, serializer, schema = defaultSchema, adfStage
     time: sanitizeTime
   } = withStopwatch(() => {
     if (useSpecBasedValidator) {
-      return validateADFEntity(schema, doc, dispatchAnalyticsEvent);
+      // link mark on mediaSingle is deprecated, need to move link mark to child media node
+      // https://product-fabric.atlassian.net/browse/ED-14043
+      const {
+        transformedAdf,
+        isTransformed
+      } = transformMediaLinkMarks(doc);
+
+      if (isTransformed && dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          action: ACTION.MEDIA_LINK_TRANSFORMED,
+          actionSubject: ACTION_SUBJECT.RENDERER,
+          eventType: EVENT_TYPE.OPERATIONAL
+        });
+      }
+
+      return validateADFEntity(schema, transformedAdf || doc, dispatchAnalyticsEvent);
     }
 
     return getValidDocument(doc, schema, adfStage);

package/dist/es2019/types/smartLinksOptions.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/Renderer/breakout-ssr.js

@@ -45,13 +45,16 @@ export const breakoutInlineScriptContext = `
 `;
 
 function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
-  function findUp(element, selector) {
+  const MEDIA_NODE_TYPE = 'mediaSingle';
+  const WIDE_LAYOUT_MODES = ['full-width', 'wide'];
+
+  function findUp(element, condition) {
     if (!element) {
       return;
     }
 
     while (element.parentElement) {
-      if (element.parentElement.classList.contains(selector)) {
+      if (condition(element)) {
         return element.parentElement;
       }
 
@@ -59,7 +62,11 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
     }
   }
 
-  const renderer = findUp(document.querySelector('[data-breakout-script-id="' + id + '"]'), 'ak-renderer-wrapper');
+  const renderer = findUp(document.querySelector('[data-breakout-script-id="' + id + '"]'), elem => {
+    var _elem$parentElement;
+
+    return !!((_elem$parentElement = elem.parentElement) !== null && _elem$parentElement !== void 0 && _elem$parentElement.classList.contains('ak-renderer-wrapper'));
+  });
 
   if (!renderer) {
     return;
@@ -76,7 +83,7 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
           const node = maybeNode;
           const mode = node.dataset.mode || node.dataset.layout || '';
 
-          if (!mode || !['full-width', 'wide'].includes(mode)) {
+          if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
 
@@ -99,9 +106,43 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
             }
           }
         });
+      } else if (
+      /**
+       * The mutation observer is only called once per added node.
+       * The above condition only deals with direct children of <div class="ak-renderer-document" />
+       * When it is initially called on the direct children, not all the sub children have loaded.
+       * So nested media elements which are not immediately loaded as sub children are not availabe in the above conditional.
+       * Thus adding this conditional to deal with all meida elements directly.
+       */
+      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
+        applyMediaBreakout(item.target);
       }
     });
   });
+
+  const applyMediaBreakout = card => {
+    // width was already set by another breakout script
+    if (card.style.width) {
+      return;
+    }
+
+    const tableParent = findUp(card, elem => elem instanceof HTMLTableCellElement); // only apply the breakout to media elements not nested inside table
+    // table sizing is not based on percentage width
+
+    if (tableParent) {
+      return;
+    }
+
+    const mode = card.dataset.mode || card.dataset.layout || '';
+    const width = card.dataset.width;
+
+    if (WIDE_LAYOUT_MODES.includes(mode)) {
+      card.style.width = '100%';
+    } else if (width) {
+      card.style.width = `${width}%`;
+    }
+  };
+
   observer.observe(renderer, {
     childList: true,
     subtree: true

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

@@ -183,6 +183,7 @@ export class Renderer extends PureComponent {
       allowMediaLinking: props.media && props.media.allowLinking,
       surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
       media: props.media,
+      smartLinks: props.smartLinks,
       allowCopyToClipboard: props.allowCopyToClipboard,
       allowCustomPanels: props.allowCustomPanels,
       allowAnnotations: props.allowAnnotations,

package/dist/es2019/ui/SortingIcon.js

@@ -3,7 +3,9 @@ import styled from 'styled-components';
 import Tooltip from '@atlaskit/tooltip';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N20, N30 } from '@atlaskit/theme/colors';
-import { SortOrder } from '@atlaskit/editor-common/types'; // We use data url here because of this issue:
+import { SortOrder } from '@atlaskit/editor-common/types';
+import { sortingIconMessages } from '../messages';
+import { injectIntl } from 'react-intl-next'; // We use data url here because of this issue:
 // https://product-fabric.atlassian.net/browse/ED-8001
 // Remove this workaround if Firefox has fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
 
@@ -69,30 +71,40 @@ const getClassName = status => {
   }
 };
 
-const getTooltipTitle = status => {
+const getTooltipTitle = (intl, isSortingAllowed, status) => {
+  const {
+    noOrderLabel,
+    ascOrderLabel,
+    descOrderLabel,
+    invalidLabel
+  } = sortingIconMessages;
+
+  if (!isSortingAllowed) {
+    return intl.formatMessage(invalidLabel);
+  }
+
   switch (status) {
     case SortOrder.NO_ORDER:
-      return 'Sort column A to Z';
+      return intl.formatMessage(noOrderLabel);
 
     case SortOrder.ASC:
-      return 'Sort column Z to A';
+      return intl.formatMessage(ascOrderLabel);
 
     case SortOrder.DESC:
-      return 'Clear sorting';
+      return intl.formatMessage(descOrderLabel);
   }
 
   return '';
 };
 
-const notAllowedTooltip = `⚠️  You can't sort a table with merged cell`;
-
 const SortingIcon = ({
   isSortingAllowed,
-  sortOrdered
+  sortOrdered,
+  intl
 }) => {
   const activated = sortOrdered !== SortOrder.NO_ORDER;
   const wrapperClassName = !isSortingAllowed ? StatusClassNames.SORTING_NOT_ALLOWED : '';
-  const content = isSortingAllowed ? getTooltipTitle(sortOrdered) : notAllowedTooltip;
+  const content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
   return /*#__PURE__*/React.createElement(Tooltip, {
     delay: 0,
     content: content,
@@ -104,4 +116,4 @@ const SortingIcon = ({
   })));
 };
 
-export default SortingIcon;
+export default injectIntl(SortingIcon);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "85.0.0",
+	"version": "89.0.0",
 	"sideEffects": false
 }

package/dist/esm/analytics/enums.js

@@ -31,6 +31,7 @@ export var ACTION;
   ACTION["CREATE_NOT_ALLOWED"] = "createNotAllowed";
   ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_SUCCEEDED"] = "unsupportedContentLevelsTrackingSucceeded";
   ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_ERRORED"] = "unsupportedContentLevelsTrackingErrored";
+  ACTION["MEDIA_LINK_TRANSFORMED"] = "mediaLinkTransformed";
 })(ACTION || (ACTION = {}));
 
 export var ACTION_SUBJECT;

package/dist/esm/messages.js

@@ -14,6 +14,50 @@ export var headingAnchorLinkMessages = defineMessages({
     id: 'fabric.editor.headingLink.failedToCopy',
     defaultMessage: 'Copy failed',
     description: 'failed to copy heading link to clipboard'
+  },
+  copyAriaLabel: {
+    id: 'fabric.editor.headingLink.copyAriaLabel',
+    defaultMessage: 'Copy',
+    description: 'copy aria label for link icon'
+  }
+});
+export var tableCellMessages = defineMessages({
+  noneSortingLabel: {
+    id: 'fabric.editor.headingLink.noneSortingLabel',
+    defaultMessage: 'none',
+    description: 'this table column is not sorted'
+  },
+  ascSortingLabel: {
+    id: 'fabric.editor.headingLink.ascSortingLabel',
+    defaultMessage: 'ascending',
+    description: 'this table column is sorted in ascending order'
+  },
+  descSortingLabel: {
+    id: 'fabric.editor.headingLink.noneSortingLabel',
+    defaultMessage: 'descending',
+    description: 'this table column is sorted in descending order'
+  }
+});
+export var sortingIconMessages = defineMessages({
+  noOrderLabel: {
+    id: 'fabric.editor.headingLink.noOrderLabel',
+    defaultMessage: 'Sort column A to Z',
+    description: 'Sort the column in ascending order'
+  },
+  ascOrderLabel: {
+    id: 'fabric.editor.headingLink.ascOrderLabel',
+    defaultMessage: 'Sort column Z to A',
+    description: 'Sort the column in descending order'
+  },
+  descOrderLabel: {
+    id: 'fabric.editor.headingLink.descOrderLabel',
+    defaultMessage: 'Clear sorting',
+    description: 'clear the sorting from this column'
+  },
+  invalidLabel: {
+    id: 'fabric.editor.headingLink.descOrderLabel',
+    defaultMessage: "\u26A0\uFE0F  You can't sort a table with merged cell",
+    description: 'this sort is invalid for merged cells'
   }
 });
 export var codeBlockCopyButtonMessages = defineMessages({

package/dist/esm/react/hooks/use-observed-width.js

@@ -0,0 +1,80 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import React from 'react';
+var resizeObserver;
+var nodeToCallback = new WeakMap();
+export var useObservedWidth = function useObservedWidth(node, useObservedWidthFlag) {
+  var _React$useState = React.useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      rect = _React$useState2[0],
+      setRect = _React$useState2[1];
+
+  React.useEffect(function () {
+    if (!node || !useObservedWidthFlag) {
+      return;
+    }
+
+    if (!resizeObserver) {
+      resizeObserver = new ResizeObserver(function (entries) {
+        var _iterator = _createForOfIteratorHelper(entries),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var entry = _step.value;
+
+            if (nodeToCallback.has(entry.target)) {
+              nodeToCallback.get(entry.target)(entry.contentRect);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+    }
+
+    nodeToCallback.set(node, function (rect) {
+      var x = rect.x,
+          y = rect.y,
+          width = rect.width,
+          height = rect.height,
+          top = rect.top,
+          left = rect.left,
+          bottom = rect.bottom,
+          right = rect.right;
+      return setRect({
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        top: top,
+        left: left,
+        bottom: bottom,
+        right: right
+      });
+    });
+    resizeObserver.observe(node);
+    return function () {
+      resizeObserver.unobserve(node);
+      nodeToCallback.delete(node);
+    };
+  }, [node, useObservedWidthFlag]);
+  return rect;
+};

package/dist/esm/react/index.js

@@ -193,6 +193,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.allowAnnotations = Boolean(init.allowAnnotations);
     this.surroundTextNodesWithTextWrapper = Boolean(init.surroundTextNodesWithTextWrapper);
     this.media = init.media;
+    this.smartLinks = init.smartLinks;
     this.allowSelectAllTrap = init.allowSelectAllTrap;
   }
 
@@ -557,6 +558,7 @@ var ReactSerializer = /*#__PURE__*/function () {
         fireAnalyticsEvent: this.fireAnalyticsEvent,
         nodeType: node.type.name,
         marks: node.marks,
+        smartLinks: this.smartLinks,
         dataAttributes: {
           // We need to account for depth (path.length gives up depth) here
           // but depth doesnt increment the pos, only accounted for.

package/dist/esm/react/nodes/copy-text-provider.js

@@ -79,7 +79,8 @@ var Provider = CopyTextContext.Provider,
     Consumer = CopyTextContext.Consumer;
 export var CopyArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
+    ref: ref // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
+    ,
     style: {
       position: 'absolute',
       left: '-9999px',

package/dist/esm/react/nodes/heading-anchor.js

@@ -63,11 +63,17 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       var isClicked = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
       _this.setState({
+        // TODO: ED-14403 investigate why this does not translate
         tooltipMessage: _this.props.intl.formatMessage(message),
         isClicked: isClicked
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getCopyAriaLabel", function () {
+      var copyAriaLabel = headingAnchorLinkMessages.copyAriaLabel;
+      return _this.props.intl.formatMessage(copyAriaLabel);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "copyToClipboard", /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
         var copiedHeadingLinkToClipboard, failedToCopyHeadingLink;
@@ -113,9 +119,10 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "renderAnchorButton", function () {
       return /*#__PURE__*/React.createElement(CopyAnchorButton, {
         onMouseLeave: _this.resetMessage,
-        onClick: _this.copyToClipboard
+        onClick: _this.copyToClipboard,
+        "aria-label": _this.state.tooltipMessage
       }, /*#__PURE__*/React.createElement(LinkIcon, {
-        label: "copy",
+        label: _this.getCopyAriaLabel(),
         size: _this.props.level > 3 ? 'small' : 'medium',
         primaryColor: _this.state.isClicked ? B400 : N200
       }));

package/dist/esm/react/nodes/inlineCard.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { Card } from '@atlaskit/smart-card';
+import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
@@ -10,7 +11,8 @@ var InlineCard = function InlineCard(props) {
   var url = props.url,
       data = props.data,
       eventHandlers = props.eventHandlers,
-      portal = props.portal;
+      portal = props.portal,
+      smartLinks = props.smartLinks;
   var onClick = getCardClickHandler(eventHandlers, url);
   var cardProps = {
     url: url,
@@ -18,6 +20,14 @@ var InlineCard = function InlineCard(props) {
     onClick: onClick,
     container: portal
   };
+
+  if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url) {
+    return /*#__PURE__*/React.createElement(CardSSR, {
+      appearance: "inline",
+      url: url
+    });
+  }
+
   return /*#__PURE__*/React.createElement("span", {
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,