@atlaskit/renderer 105.0.3 → 105.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/renderer
 
+## 105.1.0
+
+### Minor Changes
+
+- [`a40ac7f5614`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a40ac7f5614) - New Smartlinks prop to allow renderer to determine whether smart link component inside AK renderer should show auth tooltip on unauthenticated inline links
+
+### Patch Changes
+
+- [`a1031a55381`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a1031a55381) - [ux][ed-16466] Tooltip that notifies if expand is open or closed should not render on mobile
+- Updated dependencies
+
+## 105.0.4
+
+### Patch Changes
+
+- [`2ff1c66a6ab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ff1c66a6ab) - [ux] ED-16490 fixed bug so big margin will not occur before a Decision node in Renderer on iOS
+
 ## 105.0.3
 
 ### Patch Changes

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

@@ -40,10 +40,15 @@ var InlineCard = function InlineCard(props) {
   };
   var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
 
-  if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url) {
+  var _ref = smartLinks || {},
+      showAuthTooltip = _ref.showAuthTooltip,
+      ssr = _ref.ssr;
+
+  if (ssr && url) {
     return /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
       appearance: "inline",
-      url: url
+      url: url,
+      showAuthTooltip: showAuthTooltip
     });
   }
 
@@ -55,7 +60,8 @@ var InlineCard = function InlineCard(props) {
     unsupportedComponent: _ui.UnsupportedInline
   }, cardProps), /*#__PURE__*/_react.default.createElement(_smartCard.Card, (0, _extends2.default)({
     appearance: "inline",
-    showHoverPreview: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.showHoverPreview
+    showHoverPreview: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.showHoverPreview,
+    showAuthTooltip: showAuthTooltip
   }, cardProps, {
     onResolve: function onResolve(data) {
       if (!data.url || !data.title) {

package/dist/cjs/ui/Expand.js

@@ -39,6 +39,8 @@ var _activeHeaderIdProvider = require("./active-header-id-provider");
 
 var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
 
+var _utils = require("../utils");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -118,7 +120,8 @@ function Expand(_ref) {
       nodeType = _ref.nodeType,
       intl = _ref.intl,
       fireAnalyticsEvent = _ref.fireAnalyticsEvent,
-      nestedHeaderIds = _ref.nestedHeaderIds;
+      nestedHeaderIds = _ref.nestedHeaderIds,
+      rendererAppearance = _ref.rendererAppearance;
 
   var _React$useState = _react.default.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -130,6 +133,9 @@ function Expand(_ref) {
       focused = _React$useState4[0],
       setFocused = _React$useState4[1];
 
+  var isMobile = (0, _react.useMemo)(function () {
+    return (0, _utils.getPlatform)(rendererAppearance) === 'mobile';
+  }, [rendererAppearance]);
   var label = intl.formatMessage(expanded ? _ui.expandMessages.collapseNode : _ui.expandMessages.expandNode);
 
   var _useRef = (0, _react.useRef)((0, _uniqueId2.default)('expand-title-')),
@@ -167,10 +173,15 @@ function Expand(_ref) {
     "aria-expanded": expanded,
     contentEditable: false,
     expanded: expanded
-  }, (0, _react2.jsx)(_tooltip.default, {
+  }, isMobile ? (0, _react2.jsx)(_ui.ExpandIconWrapper, {
+    expanded: expanded
+  }, (0, _react2.jsx)(_chevronRight.default, {
+    label: label
+  })) : (0, _react2.jsx)(_tooltip.default, {
     content: label,
     position: "top",
-    tag: _ui.ExpandLayoutWrapperWithRef
+    tag: _ui.ExpandLayoutWrapperWithRef,
+    testId: 'tooltip'
   }, (0, _react2.jsx)(_ui.ExpandIconWrapper, {
     expanded: expanded
   }, (0, _react2.jsx)(_chevronRight.default, {

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

@@ -102,7 +102,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "105.0.3";
+var packageVersion = "105.1.0";
 
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);

package/dist/cjs/ui/Renderer/style.js

@@ -128,7 +128,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     var themeProps = {
       theme: theme
     };
-    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", "px;\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", "px 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        * .", " {\n          width: 100% !important;\n          left: 0 !important;\n        }\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: -ms-grid;\n        display: grid;\n        -ms-grid-columns: auto 1fr;\n        /* stylelint-enable */\n\n        grid-template-columns: minmax(0, 1fr);\n        position: relative;\n        border-radius: ", "px;\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n\n        & > span {\n          /* stylelint-disable value-no-vendor-prefix */\n          -ms-grid-row: 1;\n          -ms-grid-column: 2;\n          /* stylelint-enable */\n          grid-column: 1;\n        }\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n\n        &:hover button.copy-to-clipboard,\n        .copy-to-clipboard:focus {\n          opacity: 1;\n          position: absolute;\n          height: 32px;\n          width: 32px;\n          right: 6px;\n          top: 4px;\n          padding: 2px;\n        }\n      }\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", "px;\n        & > div + div {\n          margin-left: ", "px;\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
+    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", "px;\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", "px 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        * .", " {\n          width: 100% !important;\n          left: 0 !important;\n        }\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: -ms-grid;\n        display: grid;\n        -ms-grid-columns: auto 1fr;\n        /* stylelint-enable */\n\n        grid-template-columns: minmax(0, 1fr);\n        position: relative;\n        border-radius: ", "px;\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n\n        & > span {\n          /* stylelint-disable value-no-vendor-prefix */\n          -ms-grid-row: 1;\n          -ms-grid-column: 2;\n          /* stylelint-enable */\n          grid-column: 1;\n        }\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n\n        &:hover button.copy-to-clipboard,\n        .copy-to-clipboard:focus {\n          opacity: 1;\n          position: absolute;\n          height: 32px;\n          width: 32px;\n          right: 6px;\n          top: 4px;\n          padding: 2px;\n        }\n      }\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", "px;\n        & > div + div {\n          margin-left: ", "px;\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, #B8C7E0)"
     })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), colors.placeholderText(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({

package/dist/cjs/version.json

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

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

@@ -24,11 +24,16 @@ const InlineCard = props => {
     container: portal
   };
   const featureFlags = useFeatureFlags();
+  const {
+    showAuthTooltip,
+    ssr
+  } = smartLinks || {};
 
-  if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url) {
+  if (ssr && url) {
     return /*#__PURE__*/React.createElement(CardSSR, {
       appearance: "inline",
-      url: url
+      url: url,
+      showAuthTooltip: showAuthTooltip
     });
   }
 
@@ -40,7 +45,8 @@ const InlineCard = props => {
     unsupportedComponent: UnsupportedInline
   }, cardProps), /*#__PURE__*/React.createElement(Card, _extends({
     appearance: "inline",
-    showHoverPreview: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.showHoverPreview
+    showHoverPreview: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.showHoverPreview,
+    showAuthTooltip: showAuthTooltip
   }, cardProps, {
     onResolve: data => {
       if (!data.url || !data.title) {

package/dist/es2019/ui/Expand.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
@@ -13,6 +13,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { injectIntl } from 'react-intl-next';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
 import _uniqueId from 'lodash/uniqueId';
+import { getPlatform } from '../utils';
 const titleStyles = css`
   outline: none;
   border: none;
@@ -102,10 +103,12 @@ function Expand({
   nodeType,
   intl,
   fireAnalyticsEvent,
-  nestedHeaderIds
+  nestedHeaderIds,
+  rendererAppearance
 }) {
   const [expanded, setExpanded] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
+  const isMobile = useMemo(() => getPlatform(rendererAppearance) === 'mobile', [rendererAppearance]);
   const label = intl.formatMessage(expanded ? expandMessages.collapseNode : expandMessages.expandNode);
   const {
     current: id
@@ -136,10 +139,15 @@ function Expand({
     "aria-expanded": expanded,
     contentEditable: false,
     expanded: expanded
-  }, jsx(Tooltip, {
+  }, isMobile ? jsx(ExpandIconWrapper, {
+    expanded: expanded
+  }, jsx(ChevronRightIcon, {
+    label: label
+  })) : jsx(Tooltip, {
     content: label,
     position: "top",
-    tag: ExpandLayoutWrapperWithRef
+    tag: ExpandLayoutWrapperWithRef,
+    testId: 'tooltip'
   }, jsx(ExpandIconWrapper, {
     expanded: expanded
   }, jsx(ChevronRightIcon, {

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

@@ -36,7 +36,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "105.0.3";
+const packageVersion = "105.1.0";
 export class Renderer extends PureComponent {
   /**
    * This is used in measuring the Renderer Mount time and is then

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

@@ -694,7 +694,9 @@ export const rendererStyles = wrapperProps => theme => {
         > div:last-of-type.code-block {
           margin-bottom: ${blockNodesVerticalMargin};
         }
+      }
 
+      & :not([data-node-type='decisionList']) > li {
         ${browser.safari ? codeBlockInListSafariFix : ''}
       }
     `;

package/dist/es2019/version.json

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

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

@@ -23,10 +23,15 @@ var InlineCard = function InlineCard(props) {
   };
   var featureFlags = useFeatureFlags();
 
-  if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url) {
+  var _ref = smartLinks || {},
+      showAuthTooltip = _ref.showAuthTooltip,
+      ssr = _ref.ssr;
+
+  if (ssr && url) {
     return /*#__PURE__*/React.createElement(CardSSR, {
       appearance: "inline",
-      url: url
+      url: url,
+      showAuthTooltip: showAuthTooltip
     });
   }
 
@@ -38,7 +43,8 @@ var InlineCard = function InlineCard(props) {
     unsupportedComponent: UnsupportedInline
   }, cardProps), /*#__PURE__*/React.createElement(Card, _extends({
     appearance: "inline",
-    showHoverPreview: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.showHoverPreview
+    showHoverPreview: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.showHoverPreview,
+    showAuthTooltip: showAuthTooltip
   }, cardProps, {
     onResolve: function onResolve(data) {
       if (!data.url || !data.title) {

package/dist/esm/ui/Expand.js

@@ -5,7 +5,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
@@ -17,6 +17,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { injectIntl } from 'react-intl-next';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
 import _uniqueId from 'lodash/uniqueId';
+import { getPlatform } from '../utils';
 var titleStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", "px;\n  text-align: left;\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, gridSize() / 2);
 
 var Container = function Container(props) {
@@ -88,7 +89,8 @@ function Expand(_ref) {
       nodeType = _ref.nodeType,
       intl = _ref.intl,
       fireAnalyticsEvent = _ref.fireAnalyticsEvent,
-      nestedHeaderIds = _ref.nestedHeaderIds;
+      nestedHeaderIds = _ref.nestedHeaderIds,
+      rendererAppearance = _ref.rendererAppearance;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -100,6 +102,9 @@ function Expand(_ref) {
       focused = _React$useState4[0],
       setFocused = _React$useState4[1];
 
+  var isMobile = useMemo(function () {
+    return getPlatform(rendererAppearance) === 'mobile';
+  }, [rendererAppearance]);
   var label = intl.formatMessage(expanded ? expandMessages.collapseNode : expandMessages.expandNode);
 
   var _useRef = useRef(_uniqueId('expand-title-')),
@@ -137,10 +142,15 @@ function Expand(_ref) {
     "aria-expanded": expanded,
     contentEditable: false,
     expanded: expanded
-  }, jsx(Tooltip, {
+  }, isMobile ? jsx(ExpandIconWrapper, {
+    expanded: expanded
+  }, jsx(ChevronRightIcon, {
+    label: label
+  })) : jsx(Tooltip, {
     content: label,
     position: "top",
-    tag: ExpandLayoutWrapperWithRef
+    tag: ExpandLayoutWrapperWithRef,
+    testId: 'tooltip'
   }, jsx(ExpandIconWrapper, {
     expanded: expanded
   }, jsx(ChevronRightIcon, {

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

@@ -50,7 +50,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "105.0.3";
+var packageVersion = "105.1.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
 

package/dist/esm/ui/Renderer/style.js

@@ -100,7 +100,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     var themeProps = {
       theme: theme
     };
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", "px;\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", "px 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        * .", " {\n          width: 100% !important;\n          left: 0 !important;\n        }\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: -ms-grid;\n        display: grid;\n        -ms-grid-columns: auto 1fr;\n        /* stylelint-enable */\n\n        grid-template-columns: minmax(0, 1fr);\n        position: relative;\n        border-radius: ", "px;\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n\n        & > span {\n          /* stylelint-disable value-no-vendor-prefix */\n          -ms-grid-row: 1;\n          -ms-grid-column: 2;\n          /* stylelint-enable */\n          grid-column: 1;\n        }\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n\n        &:hover button.copy-to-clipboard,\n        .copy-to-clipboard:focus {\n          opacity: 1;\n          position: absolute;\n          height: 32px;\n          width: 32px;\n          right: 6px;\n          top: 4px;\n          padding: 2px;\n        }\n      }\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", "px;\n        & > div + div {\n          margin-left: ", "px;\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n\n        ", "\n      }\n    "])), editorFontSize(themeProps), themed({
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", "px;\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", "px 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        * .", " {\n          width: 100% !important;\n          left: 0 !important;\n        }\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: -ms-grid;\n        display: grid;\n        -ms-grid-columns: auto 1fr;\n        /* stylelint-enable */\n\n        grid-template-columns: minmax(0, 1fr);\n        position: relative;\n        border-radius: ", "px;\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n\n        & > span {\n          /* stylelint-disable value-no-vendor-prefix */\n          -ms-grid-row: 1;\n          -ms-grid-column: 2;\n          /* stylelint-enable */\n          grid-column: 1;\n        }\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n\n        &:hover button.copy-to-clipboard,\n        .copy-to-clipboard:focus {\n          opacity: 1;\n          position: absolute;\n          height: 32px;\n          width: 32px;\n          right: 6px;\n          top: 4px;\n          padding: 2px;\n        }\n      }\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", "px;\n        & > div + div {\n          margin-left: ", "px;\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), editorFontSize(themeProps), themed({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, #B8C7E0)"
     })(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), colors.placeholderText(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({

package/dist/esm/version.json

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

package/dist/types/types/smartLinksOptions.d.ts

@@ -1,3 +1,4 @@
 export interface SmartLinksOptions {
     ssr?: boolean;
+    showAuthTooltip?: boolean;
 }

package/dist/types/ui/Expand.d.ts

@@ -2,6 +2,7 @@
 import React from 'react';
 import { AnalyticsEventPayload } from '../analytics/events';
 import { WrappedComponentProps } from 'react-intl-next';
+import { RendererAppearance } from './Renderer/types';
 export declare type StyleProps = {
     expanded?: boolean;
     focused?: boolean;
@@ -14,6 +15,7 @@ export interface ExpandProps {
     children: React.ReactNode;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     nestedHeaderIds?: Array<string>;
+    rendererAppearance?: RendererAppearance;
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ExpandProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<ExpandProps & WrappedComponentProps<"intl">>;

package/docs/0-intro.tsx

@@ -137,6 +137,15 @@ ${(
   />
 )}
 
+## Theming and dark mode support
+To render certain ADF content correctly in different color themes, such as light and dark mode, this package utilise
+the \`@atlaskit/editor-palette\` package, which converts colors stored in ADF to Atlassian Design Tokens.
+Learn more about this utility in the [Editor Palette docs](/packages/editor/editor-palette).
+
+Full light and dark mode support for the Editor is a work in progress. Currently, the following experiences do not yet support theming:
+- Custom table backgrounds
+- Custom panel backgrounds
+
 ${(
   <Props
     heading="Props"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "105.0.3",
+  "version": "105.1.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,24 +26,24 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^25.1.0",
     "@atlaskit/adf-utils": "^18.0.0",
-    "@atlaskit/analytics-listeners": "^8.3.0",
-    "@atlaskit/analytics-namespaced-context": "^6.5.0",
+    "@atlaskit/analytics-listeners": "^8.5.0",
+    "@atlaskit/analytics-namespaced-context": "^6.6.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/code": "^14.4.0",
-    "@atlaskit/editor-common": "^72.1.0",
+    "@atlaskit/editor-common": "^72.2.0",
     "@atlaskit/editor-json-transformer": "^8.8.0",
-    "@atlaskit/editor-palette": "0.1.0",
+    "@atlaskit/editor-palette": "1.0.0",
     "@atlaskit/editor-shared-styles": "^2.3.0",
     "@atlaskit/emoji": "^67.0.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-card": "^74.4.0",
+    "@atlaskit/media-card": "^74.5.0",
     "@atlaskit/media-client": "^20.0.0",
-    "@atlaskit/media-common": "^2.18.0",
+    "@atlaskit/media-common": "^2.19.0",
     "@atlaskit/media-filmstrip": "^46.1.0",
-    "@atlaskit/media-ui": "^22.2.0",
-    "@atlaskit/media-viewer": "^47.3.0",
-    "@atlaskit/smart-card": "^23.12.0",
+    "@atlaskit/media-ui": "^22.3.0",
+    "@atlaskit/media-viewer": "^47.4.0",
+    "@atlaskit/smart-card": "^23.14.0",
     "@atlaskit/status": "^1.2.0",
     "@atlaskit/task-decision": "^17.5.0",
     "@atlaskit/theme": "^12.2.0",
@@ -71,7 +71,7 @@
     "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/css-reset": "^6.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^178.0.0",
+    "@atlaskit/editor-core": "^178.1.0",
     "@atlaskit/editor-test-helpers": "^18.0.0",
     "@atlaskit/link-provider": "^1.3.0",
     "@atlaskit/logo": "^13.10.0",
@@ -80,7 +80,7 @@
     "@atlaskit/media-test-helpers": "^30.1.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/navigation-next": "^9.0.0",
-    "@atlaskit/profilecard": "^18.1.0",
+    "@atlaskit/profilecard": "^18.2.0",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^7.0.0",
     "@atlaskit/ssr": "*",

package/report.api.md

@@ -625,6 +625,8 @@ export interface Serializer<T> {
 
 // @public (undocumented)
 interface SmartLinksOptions {
+  // (undocumented)
+  showAuthTooltip?: boolean;
   // (undocumented)
   ssr?: boolean;
 }
@@ -735,7 +737,7 @@ type VisitMediaLinkAEP = AEP<
 
 ```json
 {
-  "@atlaskit/link-provider": "^1.3.4",
+  "@atlaskit/link-provider": "^1.3.8",
   "@atlaskit/media-core": "^34.0.1",
   "react": "^16.8.0",
   "react-dom": "^16.8.0"