@atlaskit/smart-card 34.10.4 → 34.10.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/smart-card
 
+## 34.10.5
+
+### Patch Changes
+
+- [#109069](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109069)
+  [`94a79aaaf7581`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/94a79aaaf7581) -
+  Fix an issue where the ui props in FlexibleCard container was not passed down to its children when
+  compiled styles is used.
+
 ## 34.10.4
 
 ### 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: "34.10.4"
+  packageVersion: "34.10.5"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/utils/flexible.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isFlexibleUiTitleBlock = exports.isFlexibleUiPreviewBlock = exports.isFlexibleUiFooterBlock = exports.isFlexibleUiElement = exports.isFlexibleUiCard = exports.isFlexibleUiBlock = void 0;
+exports.isStyleCacheProvider = exports.isFlexibleUiTitleBlock = exports.isFlexibleUiPreviewBlock = exports.isFlexibleUiFooterBlock = exports.isFlexibleUiElement = exports.isFlexibleUiCard = exports.isFlexibleUiBlock = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _blocks = _interopRequireWildcard(require("../view/FlexibleCard/components/blocks"));
@@ -92,7 +92,6 @@ var _isFlexibleUiElement = exports.isFlexibleUiElement = function isFlexibleUiEl
   return false;
 };
 var _isFlexibleUiTitleBlock = exports.isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
-  var _node$type3;
   if (!(0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
     return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _blocks.TitleBlock;
   }
@@ -102,7 +101,7 @@ var _isFlexibleUiTitleBlock = exports.isFlexibleUiTitleBlock = function isFlexib
   if (node.type === _blocks.TitleBlock) {
     return true;
   }
-  if (typeof node.type !== 'string' && ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'StyleCacheProvider' && node.props.children) {
+  if (isStyleCacheProvider(node)) {
     // Component wrapped with compiled at runtime, check for children
     var isChildrenValid = true;
     _react.default.Children.map(node.props.children, function (child) {
@@ -122,6 +121,10 @@ var _isFlexibleUiTitleBlock = exports.isFlexibleUiTitleBlock = function isFlexib
   }
   return false;
 };
+var isStyleCacheProvider = exports.isStyleCacheProvider = function isStyleCacheProvider(node) {
+  var _node$type3;
+  return typeof node.type !== 'string' && ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'StyleCacheProvider' && node.props.children;
+};
 var _isFlexibleUiPreviewBlock = exports.isFlexibleUiPreviewBlock = function isFlexibleUiPreviewBlock(node) {
   var _node$type4;
   if (!(0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -1,6 +1,4 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.0 */
-/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
-/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -17,6 +15,8 @@ Object.defineProperty(exports, "getContainerStyles", {
 });
 require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactMagneticDi = require("react-magnetic-di");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -28,11 +28,16 @@ var _flexible = require("../../../../utils/flexible");
 var _hoverCardControl = _interopRequireDefault(require("./hover-card-control"));
 var _indexOld = _interopRequireWildcard(require("./indexOld"));
 var _layeredLink = _interopRequireDefault(require("./layered-link"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _excluded = ["containerSize"];
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
 /**
  * Eventually these exports should be removed on FF clean up bandicoots-compiled-migration-smartcard
  */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getChildrenOptions = exports.getChildrenOptions = function getChildrenOptions(children, context) {
   var options = {};
   if ((0, _utils.isFlexUiPreviewPresent)(context)) {
@@ -55,18 +60,31 @@ var getChildrenOptions = exports.getChildrenOptions = function getChildrenOption
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
   return _react.default.Children.map(children, function (child) {
     if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
-      var blockSize = child.props.size;
-      var size = blockSize || containerSize;
       if ((0, _flexible.isFlexibleUiTitleBlock)(child)) {
-        return /*#__PURE__*/_react.default.cloneElement(child, {
-          // @ts-expect-error
-          onClick: onClick,
-          retry: retry,
-          size: size,
-          status: status,
-          theme: containerTheme
-        });
+        if ((0, _flexible.isStyleCacheProvider)(child)) {
+          return updateChildren(child, {
+            onClick: onClick,
+            retry: retry,
+            containerSize: containerSize,
+            status: status,
+            theme: containerTheme
+          });
+        } else {
+          var _blockSize = child.props.size;
+          var _size = _blockSize || containerSize;
+          return /*#__PURE__*/_react.default.cloneElement(child, {
+            // @ts-expect-error
+            onClick: onClick,
+            retry: retry,
+            size: _size,
+            status: status,
+            theme: containerTheme
+          });
+        }
       }
+      var blockSize = child.props.size;
+      var size = blockSize || containerSize;
+
       // @ts-expect-error
       return /*#__PURE__*/_react.default.cloneElement(child, {
         size: size,
@@ -75,6 +93,25 @@ var renderChildren = function renderChildren(children, containerSize, containerT
     }
   });
 };
+var updateChildren = function updateChildren(node, _ref) {
+  var containerSize = _ref.containerSize,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var updatedChildren = _react.default.Children.map(node.props.children, function (child) {
+    if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiTitleBlock)(child)) {
+      var _ref2 = child.props,
+        blockSize = _ref2.size;
+      var size = blockSize || containerSize;
+      return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({}, props), {}, {
+        size: size
+      }));
+    } else {
+      return child;
+    }
+  });
+  return /*#__PURE__*/_react.default.cloneElement(node, {
+    children: updatedChildren
+  });
+};
 var getTitleBlockProps = function getTitleBlockProps(children) {
   var block = _react.default.Children.toArray(children).find(function (child) {
     return (0, _flexible.isFlexibleUiTitleBlock)(child);
@@ -84,13 +121,13 @@ var getTitleBlockProps = function getTitleBlockProps(children) {
   }
 };
 var getLayeredLink = function getLayeredLink(testId, context, children, onClick) {
-  var _ref = context || {},
-    title = _ref.title,
-    _ref$url = _ref.url,
-    url = _ref$url === void 0 ? '' : _ref$url;
-  var _ref2 = getTitleBlockProps(children) || {},
-    target = _ref2.anchorTarget,
-    text = _ref2.text;
+  var _ref3 = context || {},
+    title = _ref3.title,
+    _ref3$url = _ref3.url,
+    url = _ref3$url === void 0 ? '' : _ref3$url;
+  var _ref4 = getTitleBlockProps(children) || {},
+    target = _ref4.anchorTarget,
+    text = _ref4.text;
   return /*#__PURE__*/_react.default.createElement(_layeredLink.default, {
     onClick: onClick,
     target: target,
@@ -218,29 +255,29 @@ var previewOnRightStyleMap = {
  * @internal
  * @see Block
  */
-var ContainerNew = function ContainerNew(_ref3) {
-  var children = _ref3.children,
-    _ref3$clickableContai = _ref3.clickableContainer,
-    clickableContainer = _ref3$clickableContai === void 0 ? false : _ref3$clickableContai,
-    _ref3$hideBackground = _ref3.hideBackground,
-    hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
-    _ref3$hideElevation = _ref3.hideElevation,
-    hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
-    _ref3$hidePadding = _ref3.hidePadding,
-    hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
-    onClick = _ref3.onClick,
-    retry = _ref3.retry,
-    _ref3$showHoverPrevie = _ref3.showHoverPreview,
-    showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
-    hoverPreviewOptions = _ref3.hoverPreviewOptions,
-    actionOptions = _ref3.actionOptions,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? _constants.SmartLinkSize.Medium : _ref3$size,
-    status = _ref3.status,
-    _ref3$testId = _ref3.testId,
-    testId = _ref3$testId === void 0 ? 'smart-links-container' : _ref3$testId,
-    _ref3$theme = _ref3.theme,
-    theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
+var ContainerNew = function ContainerNew(_ref5) {
+  var children = _ref5.children,
+    _ref5$clickableContai = _ref5.clickableContainer,
+    clickableContainer = _ref5$clickableContai === void 0 ? false : _ref5$clickableContai,
+    _ref5$hideBackground = _ref5.hideBackground,
+    hideBackground = _ref5$hideBackground === void 0 ? false : _ref5$hideBackground,
+    _ref5$hideElevation = _ref5.hideElevation,
+    hideElevation = _ref5$hideElevation === void 0 ? false : _ref5$hideElevation,
+    _ref5$hidePadding = _ref5.hidePadding,
+    hidePadding = _ref5$hidePadding === void 0 ? false : _ref5$hidePadding,
+    onClick = _ref5.onClick,
+    retry = _ref5.retry,
+    _ref5$showHoverPrevie = _ref5.showHoverPreview,
+    showHoverPreview = _ref5$showHoverPrevie === void 0 ? false : _ref5$showHoverPrevie,
+    hoverPreviewOptions = _ref5.hoverPreviewOptions,
+    actionOptions = _ref5.actionOptions,
+    _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? _constants.SmartLinkSize.Medium : _ref5$size,
+    status = _ref5.status,
+    _ref5$testId = _ref5.testId,
+    testId = _ref5$testId === void 0 ? 'smart-links-container' : _ref5$testId,
+    _ref5$theme = _ref5.theme,
+    theme = _ref5$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref5$theme;
   var padding = hidePadding ? '0rem' : getPadding(size);
   var gap = getGap(size);
   var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);

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: "34.10.4",
+  packageVersion: "34.10.5",
   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: "34.10.4"
+  packageVersion: "34.10.5"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/utils/flexible.js

@@ -72,7 +72,6 @@ export const isFlexibleUiElement = node => {
   return false;
 };
 export const isFlexibleUiTitleBlock = node => {
-  var _node$type3;
   if (!fg('bandicoots-compiled-migration-smartcard')) {
     return /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
   }
@@ -82,7 +81,7 @@ export const isFlexibleUiTitleBlock = node => {
   if (node.type === TitleBlock) {
     return true;
   }
-  if (typeof node.type !== 'string' && ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'StyleCacheProvider' && node.props.children) {
+  if (isStyleCacheProvider(node)) {
     // Component wrapped with compiled at runtime, check for children
     let isChildrenValid = true;
     React.Children.map(node.props.children, child => {
@@ -102,6 +101,10 @@ export const isFlexibleUiTitleBlock = node => {
   }
   return false;
 };
+export const isStyleCacheProvider = node => {
+  var _node$type3;
+  return typeof node.type !== 'string' && ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'StyleCacheProvider' && node.props.children;
+};
 export const isFlexibleUiPreviewBlock = node => {
   var _node$type4;
   if (!fg('bandicoots-compiled-migration-smartcard')) {

package/dist/es2019/view/FlexibleCard/components/container/index.js

@@ -10,7 +10,7 @@ import { N40 } from '@atlaskit/theme/colors';
 import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
-import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
+import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock, isStyleCacheProvider } from '../../../../utils/flexible';
 import HoverCardControl from './hover-card-control';
 import ContainerOld from './indexOld';
 import LayeredLink from './layered-link';
@@ -39,29 +39,68 @@ export const getChildrenOptions = (children, context) => {
   }
   return options;
 };
-const renderChildren = (children, containerSize, containerTheme, status, retry, onClick) => React.Children.map(children, child => {
-  if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
-    const {
-      size: blockSize
-    } = child.props;
-    const size = blockSize || containerSize;
-    if (isFlexibleUiTitleBlock(child)) {
+const renderChildren = (children, containerSize, containerTheme, status, retry, onClick) => {
+  return React.Children.map(children, child => {
+    if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
+      if (isFlexibleUiTitleBlock(child)) {
+        if (isStyleCacheProvider(child)) {
+          return updateChildren(child, {
+            onClick,
+            retry,
+            containerSize,
+            status,
+            theme: containerTheme
+          });
+        } else {
+          const {
+            size: blockSize
+          } = child.props;
+          const size = blockSize || containerSize;
+          return /*#__PURE__*/React.cloneElement(child, {
+            // @ts-expect-error
+            onClick,
+            retry,
+            size,
+            status,
+            theme: containerTheme
+          });
+        }
+      }
+      const {
+        size: blockSize
+      } = child.props;
+      const size = blockSize || containerSize;
+
+      // @ts-expect-error
       return /*#__PURE__*/React.cloneElement(child, {
-        // @ts-expect-error
-        onClick,
-        retry,
         size,
-        status,
-        theme: containerTheme
+        status
       });
     }
-    // @ts-expect-error
-    return /*#__PURE__*/React.cloneElement(child, {
-      size,
-      status
-    });
-  }
-});
+  });
+};
+const updateChildren = (node, {
+  containerSize,
+  ...props
+}) => {
+  const updatedChildren = React.Children.map(node.props.children, child => {
+    if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiTitleBlock(child)) {
+      const {
+        size: blockSize
+      } = child.props;
+      const size = blockSize || containerSize;
+      return /*#__PURE__*/React.cloneElement(child, {
+        ...props,
+        size
+      });
+    } else {
+      return child;
+    }
+  });
+  return /*#__PURE__*/React.cloneElement(node, {
+    children: updatedChildren
+  });
+};
 const getTitleBlockProps = children => {
   const block = React.Children.toArray(children).find(child => isFlexibleUiTitleBlock(child));
   if ( /*#__PURE__*/React.isValidElement(block)) {

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: "34.10.4",
+  packageVersion: "34.10.5",
   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: "34.10.4"
+  packageVersion: "34.10.5"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/utils/flexible.js

@@ -84,7 +84,6 @@ var _isFlexibleUiElement = function isFlexibleUiElement(node) {
 };
 export { _isFlexibleUiElement as isFlexibleUiElement };
 var _isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
-  var _node$type3;
   if (!fg('bandicoots-compiled-migration-smartcard')) {
     return /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
   }
@@ -94,7 +93,7 @@ var _isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
   if (node.type === TitleBlock) {
     return true;
   }
-  if (typeof node.type !== 'string' && ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'StyleCacheProvider' && node.props.children) {
+  if (isStyleCacheProvider(node)) {
     // Component wrapped with compiled at runtime, check for children
     var isChildrenValid = true;
     React.Children.map(node.props.children, function (child) {
@@ -115,6 +114,10 @@ var _isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
   return false;
 };
 export { _isFlexibleUiTitleBlock as isFlexibleUiTitleBlock };
+export var isStyleCacheProvider = function isStyleCacheProvider(node) {
+  var _node$type3;
+  return typeof node.type !== 'string' && ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'StyleCacheProvider' && node.props.children;
+};
 var _isFlexibleUiPreviewBlock = function isFlexibleUiPreviewBlock(node) {
   var _node$type4;
   if (!fg('bandicoots-compiled-migration-smartcard')) {

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -1,8 +1,14 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.0 */
-/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
-/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["containerSize"];
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+
 import React, { useContext } from 'react';
 import { di } from 'react-magnetic-di';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -10,7 +16,7 @@ import { N40 } from '@atlaskit/theme/colors';
 import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
-import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
+import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock, isStyleCacheProvider } from '../../../../utils/flexible';
 import HoverCardControl from './hover-card-control';
 import ContainerOld from './indexOld';
 import LayeredLink from './layered-link';
@@ -40,18 +46,31 @@ export var getChildrenOptions = function getChildrenOptions(children, context) {
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
   return React.Children.map(children, function (child) {
     if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
-      var blockSize = child.props.size;
-      var size = blockSize || containerSize;
       if (isFlexibleUiTitleBlock(child)) {
-        return /*#__PURE__*/React.cloneElement(child, {
-          // @ts-expect-error
-          onClick: onClick,
-          retry: retry,
-          size: size,
-          status: status,
-          theme: containerTheme
-        });
+        if (isStyleCacheProvider(child)) {
+          return updateChildren(child, {
+            onClick: onClick,
+            retry: retry,
+            containerSize: containerSize,
+            status: status,
+            theme: containerTheme
+          });
+        } else {
+          var _blockSize = child.props.size;
+          var _size = _blockSize || containerSize;
+          return /*#__PURE__*/React.cloneElement(child, {
+            // @ts-expect-error
+            onClick: onClick,
+            retry: retry,
+            size: _size,
+            status: status,
+            theme: containerTheme
+          });
+        }
       }
+      var blockSize = child.props.size;
+      var size = blockSize || containerSize;
+
       // @ts-expect-error
       return /*#__PURE__*/React.cloneElement(child, {
         size: size,
@@ -60,6 +79,25 @@ var renderChildren = function renderChildren(children, containerSize, containerT
     }
   });
 };
+var updateChildren = function updateChildren(node, _ref) {
+  var containerSize = _ref.containerSize,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var updatedChildren = React.Children.map(node.props.children, function (child) {
+    if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiTitleBlock(child)) {
+      var _ref2 = child.props,
+        blockSize = _ref2.size;
+      var size = blockSize || containerSize;
+      return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, props), {}, {
+        size: size
+      }));
+    } else {
+      return child;
+    }
+  });
+  return /*#__PURE__*/React.cloneElement(node, {
+    children: updatedChildren
+  });
+};
 var getTitleBlockProps = function getTitleBlockProps(children) {
   var block = React.Children.toArray(children).find(function (child) {
     return isFlexibleUiTitleBlock(child);
@@ -69,13 +107,13 @@ var getTitleBlockProps = function getTitleBlockProps(children) {
   }
 };
 var getLayeredLink = function getLayeredLink(testId, context, children, onClick) {
-  var _ref = context || {},
-    title = _ref.title,
-    _ref$url = _ref.url,
-    url = _ref$url === void 0 ? '' : _ref$url;
-  var _ref2 = getTitleBlockProps(children) || {},
-    target = _ref2.anchorTarget,
-    text = _ref2.text;
+  var _ref3 = context || {},
+    title = _ref3.title,
+    _ref3$url = _ref3.url,
+    url = _ref3$url === void 0 ? '' : _ref3$url;
+  var _ref4 = getTitleBlockProps(children) || {},
+    target = _ref4.anchorTarget,
+    text = _ref4.text;
   return /*#__PURE__*/React.createElement(LayeredLink, {
     onClick: onClick,
     target: target,
@@ -203,29 +241,29 @@ var previewOnRightStyleMap = {
  * @internal
  * @see Block
  */
-var ContainerNew = function ContainerNew(_ref3) {
-  var children = _ref3.children,
-    _ref3$clickableContai = _ref3.clickableContainer,
-    clickableContainer = _ref3$clickableContai === void 0 ? false : _ref3$clickableContai,
-    _ref3$hideBackground = _ref3.hideBackground,
-    hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
-    _ref3$hideElevation = _ref3.hideElevation,
-    hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
-    _ref3$hidePadding = _ref3.hidePadding,
-    hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
-    onClick = _ref3.onClick,
-    retry = _ref3.retry,
-    _ref3$showHoverPrevie = _ref3.showHoverPreview,
-    showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
-    hoverPreviewOptions = _ref3.hoverPreviewOptions,
-    actionOptions = _ref3.actionOptions,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? SmartLinkSize.Medium : _ref3$size,
-    status = _ref3.status,
-    _ref3$testId = _ref3.testId,
-    testId = _ref3$testId === void 0 ? 'smart-links-container' : _ref3$testId,
-    _ref3$theme = _ref3.theme,
-    theme = _ref3$theme === void 0 ? SmartLinkTheme.Link : _ref3$theme;
+var ContainerNew = function ContainerNew(_ref5) {
+  var children = _ref5.children,
+    _ref5$clickableContai = _ref5.clickableContainer,
+    clickableContainer = _ref5$clickableContai === void 0 ? false : _ref5$clickableContai,
+    _ref5$hideBackground = _ref5.hideBackground,
+    hideBackground = _ref5$hideBackground === void 0 ? false : _ref5$hideBackground,
+    _ref5$hideElevation = _ref5.hideElevation,
+    hideElevation = _ref5$hideElevation === void 0 ? false : _ref5$hideElevation,
+    _ref5$hidePadding = _ref5.hidePadding,
+    hidePadding = _ref5$hidePadding === void 0 ? false : _ref5$hidePadding,
+    onClick = _ref5.onClick,
+    retry = _ref5.retry,
+    _ref5$showHoverPrevie = _ref5.showHoverPreview,
+    showHoverPreview = _ref5$showHoverPrevie === void 0 ? false : _ref5$showHoverPrevie,
+    hoverPreviewOptions = _ref5.hoverPreviewOptions,
+    actionOptions = _ref5.actionOptions,
+    _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? SmartLinkSize.Medium : _ref5$size,
+    status = _ref5.status,
+    _ref5$testId = _ref5.testId,
+    testId = _ref5$testId === void 0 ? 'smart-links-container' : _ref5$testId,
+    _ref5$theme = _ref5.theme,
+    theme = _ref5$theme === void 0 ? SmartLinkTheme.Link : _ref5$theme;
   var padding = hidePadding ? '0rem' : getPadding(size);
   var gap = getGap(size);
   var context = useContext(FlexibleUiContext);

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: "34.10.4",
+  packageVersion: "34.10.5",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/dist/types/utils/flexible.d.ts

@@ -3,5 +3,6 @@ export declare const isFlexibleUiCard: (children?: React.ReactNode) => boolean;
 export declare const isFlexibleUiBlock: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiElement: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiTitleBlock: (node: React.ReactNode) => boolean;
+export declare const isStyleCacheProvider: (node: React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>) => any;
 export declare const isFlexibleUiPreviewBlock: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiFooterBlock: (node: React.ReactNode) => boolean;

package/dist/types-ts4.5/utils/flexible.d.ts

@@ -3,5 +3,6 @@ export declare const isFlexibleUiCard: (children?: React.ReactNode) => boolean;
 export declare const isFlexibleUiBlock: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiElement: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiTitleBlock: (node: React.ReactNode) => boolean;
+export declare const isStyleCacheProvider: (node: React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>) => any;
 export declare const isFlexibleUiPreviewBlock: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiFooterBlock: (node: React.ReactNode) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "34.10.4",
+	"version": "34.10.5",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"