@atlaskit/renderer 105.0.4 → 105.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

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.4";
+var packageVersion = "105.1.0";
 
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "105.0.4",
+	"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.4";
+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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "105.0.4",
+	"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.4";
+var packageVersion = "105.1.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "105.0.4",
+	"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.4",
+  "version": "105.1.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,19 +31,19 @@
     "@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.13.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",

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"