@atlaskit/smart-card 38.7.2 → 38.8.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/smart-card
 
+## 38.8.0
+
+### Minor Changes
+
+- [#166380](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166380)
+  [`769ada2231863`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/769ada2231863) -
+  Adds optional FlexibleUI property for enabling the SnippetRenderer
+
 ## 38.7.2
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "38.7.2"
+  packageVersion: "38.8.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/views/ResolvedView.js

@@ -74,6 +74,10 @@ var ResolvedView = function ResolvedView(_ref) {
     }];
   }, []);
   var status = cardState.status;
+  var uiOptions = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? _utils.FlexibleCardUiOptions : _utils.FlexibleCardUiOptionsOld;
+  if ((0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer')) {
+    uiOptions.enableSnippetRenderer = true;
+  }
   return /*#__PURE__*/React.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
@@ -83,7 +87,7 @@ var ResolvedView = function ResolvedView(_ref) {
     origin: "smartLinkCard",
     actionOptions: actionOptions,
     testId: testId,
-    ui: (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? _utils.FlexibleCardUiOptions : _utils.FlexibleCardUiOptionsOld,
+    ui: uiOptions,
     url: url
   }, /*#__PURE__*/React.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, _utils.titleBlockOptions, {
     metadata: titleMetadata,

package/dist/cjs/view/FlexibleCard/components/blocks/snippet-block/index.js

@@ -27,7 +27,7 @@ var MINIMUM_MAX_LINES = 1;
  * @see Block
  */
 var SnippetBlock = function SnippetBlock(_ref) {
-  var _blockProps$size2, _cardContext$ui2, _ref2, _context$meta$objectI, _context$meta, _context$meta$resourc, _context$meta2, _context$meta$tenantI, _context$meta3;
+  var _useFlexibleUiOptionC, _blockProps$size2, _cardContext$ui2, _ref2, _context$meta$objectI, _context$meta, _context$meta$resourc, _context$meta2, _context$meta$tenantI, _context$meta3;
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
     _ref$status = _ref.status,
@@ -44,6 +44,8 @@ var SnippetBlock = function SnippetBlock(_ref) {
   var renderers = (0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks
   (0, _renderers.useSmartLinkRenderers)() : undefined;
+  var enableSnippetRenderer = (0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer') ? // eslint-disable-next-line react-hooks/rules-of-hooks
+  (_useFlexibleUiOptionC = (0, _flexibleUiContext.useFlexibleUiOptionContext)()) === null || _useFlexibleUiOptionC === void 0 ? void 0 : _useFlexibleUiOptionC.enableSnippetRenderer : undefined;
   var cardContext = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks
   (0, _flexibleUiContext.useFlexibleCardContext)() : undefined;
@@ -62,7 +64,7 @@ var SnippetBlock = function SnippetBlock(_ref) {
     maxLines: snippetMaxLines,
     content: text
   });
-  if (!(0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer')) {
+  if (!(0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer') || !enableSnippetRenderer) {
     var _blockProps$size, _cardContext$ui;
     return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? {
       size: (_blockProps$size = blockProps.size) !== null && _blockProps$size !== void 0 ? _blockProps$size : cardContext === null || cardContext === void 0 || (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size

package/dist/cjs/view/HoverCard/components/HoverCardContent.js

@@ -114,6 +114,10 @@ var HoverCardContent = function HoverCardContent(_ref) {
     position: _constants.SmartLinkPosition.Center,
     subtitle: subtitle
   };
+  var uiOptions = (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? _styled.flexibleUiOptions : _styled.flexibleUiOptionsOld;
+  if ((0, _platformFeatureFlags.fg)('cc-ai-linking-platform-snippet-renderer')) {
+    uiOptions.enableSnippetRenderer = true;
+  }
   var flexibleCardProps = {
     appearance: _constants.CardDisplay.HoverCardPreview,
     cardState: cardState,
@@ -122,7 +126,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     origin: 'smartLinkPreviewHoverCard',
     renderers: renderers,
     actionOptions: actionOptions,
-    ui: (0, _platformFeatureFlags.fg)('platform-linking-flexible-card-context') ? _styled.flexibleUiOptions : _styled.flexibleUiOptionsOld,
+    ui: uiOptions,
     url: url,
     children: null
   };

package/dist/cjs/view/LinkUrl/index.js

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "38.7.2",
+  packageVersion: "38.8.0",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "38.7.2"
+  packageVersion: "38.8.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/views/ResolvedView.js

@@ -58,6 +58,10 @@ const ResolvedView = ({
     hideIcon: true
   }], []);
   const status = cardState.status;
+  const uiOptions = fg('platform-linking-flexible-card-context') ? FlexibleCardUiOptions : FlexibleCardUiOptionsOld;
+  if (fg('cc-ai-linking-platform-snippet-renderer')) {
+    uiOptions.enableSnippetRenderer = true;
+  }
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -67,7 +71,7 @@ const ResolvedView = ({
     origin: "smartLinkCard",
     actionOptions: actionOptions,
     testId: testId,
-    ui: fg('platform-linking-flexible-card-context') ? FlexibleCardUiOptions : FlexibleCardUiOptionsOld,
+    ui: uiOptions,
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockOptions, {
     metadata: titleMetadata,

package/dist/es2019/view/FlexibleCard/components/blocks/snippet-block/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkStatus } from '../../../../../constants';
-import { useFlexibleCardContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { useFlexibleCardContext, useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import { useSmartLinkRenderers } from '../../../../../state/renderers';
 import { Snippet } from '../../elements';
 import { getMaxLines } from '../../utils';
@@ -25,13 +25,15 @@ const SnippetBlock = ({
   isHidden = false,
   ...blockProps
 }) => {
-  var _blockProps$size2, _cardContext$ui2, _ref, _context$meta$objectI, _context$meta, _context$meta$resourc, _context$meta2, _context$meta$tenantI, _context$meta3;
+  var _useFlexibleUiOptionC, _blockProps$size2, _cardContext$ui2, _ref, _context$meta$objectI, _context$meta, _context$meta$resourc, _context$meta2, _context$meta$tenantI, _context$meta3;
   const context = fg('cc-ai-linking-platform-snippet-renderer') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useFlexibleUiContext() : undefined;
   const renderers = fg('cc-ai-linking-platform-snippet-renderer') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useSmartLinkRenderers() : undefined;
+  const enableSnippetRenderer = fg('cc-ai-linking-platform-snippet-renderer') ? // eslint-disable-next-line react-hooks/rules-of-hooks
+  (_useFlexibleUiOptionC = useFlexibleUiOptionContext()) === null || _useFlexibleUiOptionC === void 0 ? void 0 : _useFlexibleUiOptionC.enableSnippetRenderer : undefined;
   const cardContext = fg('platform-linking-flexible-card-context') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useFlexibleCardContext() : undefined;
@@ -50,7 +52,7 @@ const SnippetBlock = ({
     maxLines: snippetMaxLines,
     content: text
   });
-  if (!fg('cc-ai-linking-platform-snippet-renderer')) {
+  if (!fg('cc-ai-linking-platform-snippet-renderer') || !enableSnippetRenderer) {
     var _blockProps$size, _cardContext$ui;
     return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, fg('platform-linking-flexible-card-context') ? {
       size: (_blockProps$size = blockProps.size) !== null && _blockProps$size !== void 0 ? _blockProps$size : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size

package/dist/es2019/view/HoverCard/components/HoverCardContent.js

@@ -105,6 +105,10 @@ const HoverCardContent = ({
     position: SmartLinkPosition.Center,
     subtitle: subtitle
   };
+  const uiOptions = fg('platform-linking-flexible-card-context') ? flexibleUiOptions : flexibleUiOptionsOld;
+  if (fg('cc-ai-linking-platform-snippet-renderer')) {
+    uiOptions.enableSnippetRenderer = true;
+  }
   const flexibleCardProps = {
     appearance: CardDisplay.HoverCardPreview,
     cardState: cardState,
@@ -113,7 +117,7 @@ const HoverCardContent = ({
     origin: 'smartLinkPreviewHoverCard',
     renderers: renderers,
     actionOptions,
-    ui: fg('platform-linking-flexible-card-context') ? flexibleUiOptions : flexibleUiOptionsOld,
+    ui: uiOptions,
     url: url,
     children: null
   };

package/dist/es2019/view/LinkUrl/index.js

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "38.7.2",
+  packageVersion: "38.8.0",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "38.7.2"
+  packageVersion: "38.8.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/views/ResolvedView.js

@@ -65,6 +65,10 @@ var ResolvedView = function ResolvedView(_ref) {
     }];
   }, []);
   var status = cardState.status;
+  var uiOptions = fg('platform-linking-flexible-card-context') ? FlexibleCardUiOptions : FlexibleCardUiOptionsOld;
+  if (fg('cc-ai-linking-platform-snippet-renderer')) {
+    uiOptions.enableSnippetRenderer = true;
+  }
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -74,7 +78,7 @@ var ResolvedView = function ResolvedView(_ref) {
     origin: "smartLinkCard",
     actionOptions: actionOptions,
     testId: testId,
-    ui: fg('platform-linking-flexible-card-context') ? FlexibleCardUiOptions : FlexibleCardUiOptionsOld,
+    ui: uiOptions,
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockOptions, {
     metadata: titleMetadata,

package/dist/esm/view/FlexibleCard/components/blocks/snippet-block/index.js

@@ -4,7 +4,7 @@ var _excluded = ["maxLines", "status", "testId", "text", "isHidden"];
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkStatus } from '../../../../../constants';
-import { useFlexibleCardContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { useFlexibleCardContext, useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import { useSmartLinkRenderers } from '../../../../../state/renderers';
 import { Snippet } from '../../elements';
 import { getMaxLines } from '../../utils';
@@ -20,7 +20,7 @@ var MINIMUM_MAX_LINES = 1;
  * @see Block
  */
 var SnippetBlock = function SnippetBlock(_ref) {
-  var _blockProps$size2, _cardContext$ui2, _ref2, _context$meta$objectI, _context$meta, _context$meta$resourc, _context$meta2, _context$meta$tenantI, _context$meta3;
+  var _useFlexibleUiOptionC, _blockProps$size2, _cardContext$ui2, _ref2, _context$meta$objectI, _context$meta, _context$meta$resourc, _context$meta2, _context$meta$tenantI, _context$meta3;
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
     _ref$status = _ref.status,
@@ -37,6 +37,8 @@ var SnippetBlock = function SnippetBlock(_ref) {
   var renderers = fg('cc-ai-linking-platform-snippet-renderer') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useSmartLinkRenderers() : undefined;
+  var enableSnippetRenderer = fg('cc-ai-linking-platform-snippet-renderer') ? // eslint-disable-next-line react-hooks/rules-of-hooks
+  (_useFlexibleUiOptionC = useFlexibleUiOptionContext()) === null || _useFlexibleUiOptionC === void 0 ? void 0 : _useFlexibleUiOptionC.enableSnippetRenderer : undefined;
   var cardContext = fg('platform-linking-flexible-card-context') ?
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useFlexibleCardContext() : undefined;
@@ -55,7 +57,7 @@ var SnippetBlock = function SnippetBlock(_ref) {
     maxLines: snippetMaxLines,
     content: text
   });
-  if (!fg('cc-ai-linking-platform-snippet-renderer')) {
+  if (!fg('cc-ai-linking-platform-snippet-renderer') || !enableSnippetRenderer) {
     var _blockProps$size, _cardContext$ui;
     return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, fg('platform-linking-flexible-card-context') ? {
       size: (_blockProps$size = blockProps.size) !== null && _blockProps$size !== void 0 ? _blockProps$size : cardContext === null || cardContext === void 0 || (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size

package/dist/esm/view/HoverCard/components/HoverCardContent.js

@@ -105,6 +105,10 @@ var HoverCardContent = function HoverCardContent(_ref) {
     position: SmartLinkPosition.Center,
     subtitle: subtitle
   };
+  var uiOptions = fg('platform-linking-flexible-card-context') ? flexibleUiOptions : flexibleUiOptionsOld;
+  if (fg('cc-ai-linking-platform-snippet-renderer')) {
+    uiOptions.enableSnippetRenderer = true;
+  }
   var flexibleCardProps = {
     appearance: CardDisplay.HoverCardPreview,
     cardState: cardState,
@@ -113,7 +117,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     origin: 'smartLinkPreviewHoverCard',
     renderers: renderers,
     actionOptions: actionOptions,
-    ui: fg('platform-linking-flexible-card-context') ? flexibleUiOptions : flexibleUiOptionsOld,
+    ui: uiOptions,
     url: url,
     children: null
   };

package/dist/esm/view/LinkUrl/index.js

@@ -13,7 +13,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "38.7.2",
+  packageVersion: "38.8.0",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/dist/types/view/FlexibleCard/types.d.ts

@@ -137,6 +137,10 @@ export type FlexibleUiOptions = {
      * This is passed to the portal component.
      */
     zIndex?: number;
+    /**
+     * Flag to enable specific SmartCard components to directly enable or disable the SnippetRennderer override
+     */
+    enableSnippetRenderer?: boolean;
 };
 /**
  * Retry options used if Smart Link resolves to an errored state.

package/dist/types-ts4.5/view/FlexibleCard/types.d.ts

@@ -137,6 +137,10 @@ export type FlexibleUiOptions = {
      * This is passed to the portal component.
      */
     zIndex?: number;
+    /**
+     * Flag to enable specific SmartCard components to directly enable or disable the SnippetRennderer override
+     */
+    enableSnippetRenderer?: boolean;
 };
 /**
  * Retry options used if Smart Link resolves to an errored state.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "38.7.2",
+	"version": "38.8.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -96,7 +96,7 @@
 		"@atlaskit/analytics-listeners": "^9.0.0",
 		"@atlaskit/css-reset": "^7.3.0",
 		"@atlaskit/link-test-helpers": "^8.0.0",
-		"@atlaskit/media-test-helpers": "^36.0.0",
+		"@atlaskit/media-test-helpers": "^36.1.0",
 		"@atlaskit/react-ufo": "^3.13.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/visual-regression": "workspace:^",