@atlaskit/renderer 120.2.3 → 120.2.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 120.2.4
+
+### Patch Changes
+
+- [#185241](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185241)
+  [`0d1bffce3fedd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d1bffce3fedd) -
+  [ux] View embed as block card when page width smaller or equal to 600px
+- Updated dependencies
+
 ## 120.2.3
 
 ### Patch Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = EmbedCard;
+exports.default = exports.EmbedOrBlockCardInternal = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
@@ -15,11 +15,14 @@ var _linkProvider = require("@atlaskit/link-provider");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _fallback = require("./fallback");
 var _style = require("../../ui/Renderer/style");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _PortalContext = require("../../ui/Renderer/PortalContext");
+var _blockCard = _interopRequireDefault(require("./blockCard"));
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -46,7 +49,7 @@ var uIMediaSingleLayoutStyles = (0, _react.css)({
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
-function EmbedCard(props) {
+function EmbedCardInternal(props) {
   var _smartLinks$frameStyl;
   var url = props.url,
     data = props.data,
@@ -219,4 +222,47 @@ function EmbedCard(props) {
       }, cardComponent)))))
     );
   }));
-}
+}
+var EmbedOrBlockCardInternal = exports.EmbedOrBlockCardInternal = function EmbedOrBlockCardInternal(_ref5) {
+  var url = _ref5.url,
+    data = _ref5.data,
+    eventHandlers = _ref5.eventHandlers,
+    portal = _ref5.portal,
+    originalHeight = _ref5.originalHeight,
+    originalWidth = _ref5.originalWidth,
+    embedWidth = _ref5.width,
+    layout = _ref5.layout,
+    rendererAppearance = _ref5.rendererAppearance,
+    isInsideOfBlockNode = _ref5.isInsideOfBlockNode,
+    smartLinks = _ref5.smartLinks,
+    isInsideOfInlineExtension = _ref5.isInsideOfInlineExtension;
+  var _useContext = (0, _react2.useContext)(_ui.WidthContext),
+    width = _useContext.width;
+  var viewAsBlockCard = width && width <= _editorSharedStyles.akEditorFullPageNarrowBreakout;
+  return viewAsBlockCard ? (0, _react.jsx)(_blockCard.default, {
+    url: url,
+    data: data,
+    eventHandlers: eventHandlers,
+    portal: portal,
+    layout: layout,
+    rendererAppearance: rendererAppearance,
+    smartLinks: smartLinks
+  }) : (0, _react.jsx)(EmbedCardInternal, {
+    url: url,
+    data: data,
+    eventHandlers: eventHandlers,
+    portal: portal,
+    originalHeight: originalHeight,
+    originalWidth: originalWidth,
+    width: embedWidth,
+    layout: layout,
+    rendererAppearance: rendererAppearance,
+    isInsideOfBlockNode: isInsideOfBlockNode,
+    smartLinks: smartLinks,
+    isInsideOfInlineExtension: isInsideOfInlineExtension
+  });
+};
+var EmbedCardWithCondition = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true);
+}, EmbedOrBlockCardInternal, EmbedCardInternal);
+var _default = exports.default = EmbedCardWithCondition;

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

@@ -63,7 +63,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "120.2.2";
+var packageVersion = "120.2.3";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/cjs/ui/annotations/hooks/use-events.js

@@ -94,9 +94,6 @@ var useHasFocusEvent = exports.useHasFocusEvent = function useHasFocusEvent(_ref
     };
     var removeFocus = function removeFocus() {
       setHasFocus(false);
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
     };
     var removeHoverEffect = function removeHoverEffect() {
       setIsHovered(false);
@@ -200,9 +197,6 @@ var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnno
         annotations: [],
         clickElementTarget: undefined
       });
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
     };
     if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);

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

@@ -9,14 +9,17 @@ import { useContext, useState, useRef } from 'react';
 import { Card, EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { SmartCardContext } from '@atlaskit/link-provider';
-import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
+import { akEditorDefaultLayoutWidth, akEditorFullPageNarrowBreakout, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { usePortal } from '../../ui/Renderer/PortalContext';
+import BlockCard from './blockCard';
 const embedCardWrapperStyles = css({
   width: '100%',
   height: '100%',
@@ -37,7 +40,7 @@ const uIMediaSingleLayoutStyles = css({
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
-export default function EmbedCard(props) {
+function EmbedCardInternal(props) {
   var _smartLinks$frameStyl;
   const {
     url,
@@ -207,4 +210,47 @@ export default function EmbedCard(props) {
       }, cardComponent)))))
     );
   }));
-}
+}
+export const EmbedOrBlockCardInternal = ({
+  url,
+  data,
+  eventHandlers,
+  portal,
+  originalHeight,
+  originalWidth,
+  width: embedWidth,
+  layout,
+  rendererAppearance,
+  isInsideOfBlockNode,
+  smartLinks,
+  isInsideOfInlineExtension
+}) => {
+  const {
+    width
+  } = useContext(WidthContext);
+  const viewAsBlockCard = width && width <= akEditorFullPageNarrowBreakout;
+  return viewAsBlockCard ? jsx(BlockCard, {
+    url: url,
+    data: data,
+    eventHandlers: eventHandlers,
+    portal: portal,
+    layout: layout,
+    rendererAppearance: rendererAppearance,
+    smartLinks: smartLinks
+  }) : jsx(EmbedCardInternal, {
+    url: url,
+    data: data,
+    eventHandlers: eventHandlers,
+    portal: portal,
+    originalHeight: originalHeight,
+    originalWidth: originalWidth,
+    width: embedWidth,
+    layout: layout,
+    rendererAppearance: rendererAppearance,
+    isInsideOfBlockNode: isInsideOfBlockNode,
+    smartLinks: smartLinks,
+    isInsideOfInlineExtension: isInsideOfInlineExtension
+  });
+};
+const EmbedCardWithCondition = componentWithCondition(() => expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true), EmbedOrBlockCardInternal, EmbedCardInternal);
+export default EmbedCardWithCondition;

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

@@ -49,7 +49,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "120.2.2";
+const packageVersion = "120.2.3";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/ui/annotations/hooks/use-events.js

@@ -89,9 +89,6 @@ export const useHasFocusEvent = ({
     };
     const removeFocus = () => {
       setHasFocus(false);
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
     };
     const removeHoverEffect = () => {
       setIsHovered(false);
@@ -193,9 +190,6 @@ export const useAnnotationClickEvent = props => {
         annotations: [],
         clickElementTarget: undefined
       });
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
     };
     if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);

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

@@ -10,14 +10,17 @@ import { useContext, useState, useRef } from 'react';
 import { Card, EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { SmartCardContext } from '@atlaskit/link-provider';
-import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
+import { akEditorDefaultLayoutWidth, akEditorFullPageNarrowBreakout, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { usePortal } from '../../ui/Renderer/PortalContext';
+import BlockCard from './blockCard';
 var embedCardWrapperStyles = css({
   width: '100%',
   height: '100%',
@@ -38,7 +41,7 @@ var uIMediaSingleLayoutStyles = css({
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
-export default function EmbedCard(props) {
+function EmbedCardInternal(props) {
   var _smartLinks$frameStyl;
   var url = props.url,
     data = props.data,
@@ -211,4 +214,47 @@ export default function EmbedCard(props) {
       }, cardComponent)))))
     );
   }));
-}
+}
+export var EmbedOrBlockCardInternal = function EmbedOrBlockCardInternal(_ref5) {
+  var url = _ref5.url,
+    data = _ref5.data,
+    eventHandlers = _ref5.eventHandlers,
+    portal = _ref5.portal,
+    originalHeight = _ref5.originalHeight,
+    originalWidth = _ref5.originalWidth,
+    embedWidth = _ref5.width,
+    layout = _ref5.layout,
+    rendererAppearance = _ref5.rendererAppearance,
+    isInsideOfBlockNode = _ref5.isInsideOfBlockNode,
+    smartLinks = _ref5.smartLinks,
+    isInsideOfInlineExtension = _ref5.isInsideOfInlineExtension;
+  var _useContext = useContext(WidthContext),
+    width = _useContext.width;
+  var viewAsBlockCard = width && width <= akEditorFullPageNarrowBreakout;
+  return viewAsBlockCard ? jsx(BlockCard, {
+    url: url,
+    data: data,
+    eventHandlers: eventHandlers,
+    portal: portal,
+    layout: layout,
+    rendererAppearance: rendererAppearance,
+    smartLinks: smartLinks
+  }) : jsx(EmbedCardInternal, {
+    url: url,
+    data: data,
+    eventHandlers: eventHandlers,
+    portal: portal,
+    originalHeight: originalHeight,
+    originalWidth: originalWidth,
+    width: embedWidth,
+    layout: layout,
+    rendererAppearance: rendererAppearance,
+    isInsideOfBlockNode: isInsideOfBlockNode,
+    smartLinks: smartLinks,
+    isInsideOfInlineExtension: isInsideOfInlineExtension
+  });
+};
+var EmbedCardWithCondition = componentWithCondition(function () {
+  return expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true);
+}, EmbedOrBlockCardInternal, EmbedCardInternal);
+export default EmbedCardWithCondition;

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

@@ -54,7 +54,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "120.2.2";
+var packageVersion = "120.2.3";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/ui/annotations/hooks/use-events.js

@@ -87,9 +87,6 @@ export var useHasFocusEvent = function useHasFocusEvent(_ref2) {
     };
     var removeFocus = function removeFocus() {
       setHasFocus(false);
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
     };
     var removeHoverEffect = function removeHoverEffect() {
       setIsHovered(false);
@@ -193,9 +190,6 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
         annotations: [],
         clickElementTarget: undefined
       });
-      if (document.activeElement instanceof HTMLElement) {
-        document.activeElement.blur();
-      }
     };
     if (!isAnnotationManagerEnabled) {
       updateSubscriber.on(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);

package/dist/types/react/nodes/embedCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,7 +8,7 @@ import type { SmartLinksOptions } from '../../types/smartLinksOptions';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
 import type { RendererAppearance } from '../../ui/Renderer/types';
-export default function EmbedCard(props: {
+type EmbedCardInternalProps = {
     url?: string;
     data?: object;
     eventHandlers?: EventHandlers;
@@ -20,4 +21,7 @@ export default function EmbedCard(props: {
     isInsideOfBlockNode?: boolean;
     smartLinks?: SmartLinksOptions;
     isInsideOfInlineExtension?: boolean;
-}): jsx.JSX.Element;
+};
+export declare const EmbedOrBlockCardInternal: ({ url, data, eventHandlers, portal, originalHeight, originalWidth, width: embedWidth, layout, rendererAppearance, isInsideOfBlockNode, smartLinks, isInsideOfInlineExtension, }: EmbedCardInternalProps) => jsx.JSX.Element;
+declare const EmbedCardWithCondition: import("react").FC<EmbedCardInternalProps>;
+export default EmbedCardWithCondition;

package/dist/types-ts4.5/react/nodes/embedCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,7 +8,7 @@ import type { SmartLinksOptions } from '../../types/smartLinksOptions';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
 import type { RendererAppearance } from '../../ui/Renderer/types';
-export default function EmbedCard(props: {
+type EmbedCardInternalProps = {
     url?: string;
     data?: object;
     eventHandlers?: EventHandlers;
@@ -20,4 +21,7 @@ export default function EmbedCard(props: {
     isInsideOfBlockNode?: boolean;
     smartLinks?: SmartLinksOptions;
     isInsideOfInlineExtension?: boolean;
-}): jsx.JSX.Element;
+};
+export declare const EmbedOrBlockCardInternal: ({ url, data, eventHandlers, portal, originalHeight, originalWidth, width: embedWidth, layout, rendererAppearance, isInsideOfBlockNode, smartLinks, isInsideOfInlineExtension, }: EmbedCardInternalProps) => jsx.JSX.Element;
+declare const EmbedCardWithCondition: import("react").FC<EmbedCardInternalProps>;
+export default EmbedCardWithCondition;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "120.2.3",
+	"version": "120.2.4",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,11 +37,11 @@
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/emoji": "^69.3.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
-		"@atlaskit/icon": "^27.6.0",
+		"@atlaskit/icon": "^27.7.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-datasource": "^4.14.0",
 		"@atlaskit/media-card": "^79.4.0",
-		"@atlaskit/media-client": "^35.1.0",
+		"@atlaskit/media-client": "^35.2.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
 		"@atlaskit/media-filmstrip": "^51.0.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.10.0",
+		"@atlaskit/tmp-editor-statsig": "^9.12.0",
 		"@atlaskit/tokens": "^5.6.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",