@atlaskit/smart-card 34.2.2 → 34.4.0

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

@@ -7,15 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../constants");
+var _indexOld = _interopRequireDefault(require("./indexOld"));
 var _resolved = _interopRequireDefault(require("./resolved"));
 var _excluded = ["status", "testId", "overrideUrl"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /**
  * Represents a PreviewBlock, which typically contains media or other large format content.
  * @public
@@ -29,9 +26,16 @@ var PreviewBlock = function PreviewBlock(_ref) {
     testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
     overrideUrl = _ref.overrideUrl,
     blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)(_resolved.default, (0, _extends2.default)({}, blockProps, {
+  return /*#__PURE__*/_react.default.createElement(_resolved.default, (0, _extends2.default)({}, blockProps, {
     testId: testId,
     overrideUrl: overrideUrl
   }));
 };
-var _default = exports.default = PreviewBlock;
+var Exported = function Exported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(PreviewBlock, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_indexOld.default, props);
+  }
+};
+var _default = exports.default = Exported;

package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/indexOld.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("@emotion/react");
+var _constants = require("../../../../../constants");
+var _indexOld = _interopRequireDefault(require("./resolved/indexOld"));
+var _excluded = ["status", "testId", "overrideUrl"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+/**
+ * Represents a PreviewBlock, which typically contains media or other large format content.
+ * @public
+ * @param {PreviewBlockProps} PreviewBlock
+ * @see Block
+ */
+var PreviewBlock = function PreviewBlock(_ref) {
+  var _ref$status = _ref.status,
+    status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
+    overrideUrl = _ref.overrideUrl,
+    blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react.jsx)(_indexOld.default, (0, _extends2.default)({}, blockProps, {
+    testId: testId,
+    overrideUrl: overrideUrl
+  }));
+};
+var _default = exports.default = PreviewBlock;

package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/resolved/index.compiled.css

@@ -0,0 +1,15 @@
+._10aa1osq [data-smart-element-media=image]{width:100%}
+._154iidpf{top:0}
+._18u01ivi{margin-left:calc(var(--container-gap-left)*-1)}
+._1bsb795p{width:calc(var(--preview-block-width))}
+._1ltvidpf{left:0}
+._1t26n7od [data-smart-element-media=image]{aspect-ratio:unset}
+._1xi2idpf{right:0}
+._2hwxc10g{margin-right:calc(var(--container-gap-right)*-1)}
+._94n5idpf{bottom:0}
+._dmhj1ya9:last-of-type{margin-bottom:calc(var(--container-padding)*-1)}
+._e0oi1ya9:first-of-type{margin-top:calc(var(--container-padding)*-1)}
+._kqswstnw{position:absolute}
+._mr051dfr [data-smart-element-media=image]{object-fit:cover}
+._rjuj1osq [data-smart-element-media=image]{height:100%}
+._ze72n7od [data-smart-element-media=image]{padding-top:unset}

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

@@ -1,26 +1,23 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _constants = require("../../../../../../constants");
 var _elements = require("../../../elements");
 var _block = _interopRequireDefault(require("../../block"));
-var _excluded = ["ignoreContainerPadding", "onError", "overrideCss", "placement", "testId", "overrideUrl"];
-var _templateObject;
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _excluded = ["ignoreContainerPadding", "onError", "className", "placement", "testId", "overrideUrl"];
+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; }
 /**
  * Due to its placement on the left/right and ignoreContainerPadding prop
  * rely on its parent container styling, css variables are declared in
@@ -36,26 +33,10 @@ var _templateObject;
  * @param placement
  * @param ignoreContainerPadding
  */
-var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreContainerPadding) {
-  if (placement === _constants.MediaPlacement.Left || placement === _constants.MediaPlacement.Right) {
-    var containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
-    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tbottom: ", ";\n\t\t\twidth: calc(var(--preview-block-width) - ", ");\n\n\t\t\t", "\n\t\t\t", "\n\n      [data-smart-element-media='image'] {\n\t\t\t\taspect-ratio: unset;\n\t\t\t\tpadding-top: unset;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\t\t\t}\n\t\t"])), containerPadding, containerPadding, containerPadding, placement === _constants.MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === _constants.MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
-  }
-  if (ignoreContainerPadding) {
-    return (0, _react2.css)({
-      marginLeft: 'calc(var(--container-gap-left) * -1)',
-      marginRight: 'calc(var(--container-gap-right) * -1)',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '&:first-of-type': {
-        marginTop: 'calc(var(--container-padding) * -1)'
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '&:last-of-type': {
-        marginBottom: 'calc(var(--container-padding) * -1)'
-      }
-    });
-  }
+var previewBlockStyles = {
+  left: "_kqswstnw _154iidpf _94n5idpf _1bsb795p _1ltvidpf _1t26n7od _ze72n7od _10aa1osq _rjuj1osq _mr051dfr",
+  right: "_kqswstnw _154iidpf _94n5idpf _1bsb795p _1xi2idpf _1t26n7od _ze72n7od _10aa1osq _rjuj1osq _mr051dfr",
+  ignoreContainerPadding: "_18u01ivi _2hwxc10g _e0oi1ya9 _dmhj1ya9"
 };
 
 /**
@@ -68,36 +49,21 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
   var _ref$ignoreContainerP = _ref.ignoreContainerPadding,
     ignoreContainerPadding = _ref$ignoreContainerP === void 0 ? false : _ref$ignoreContainerP,
     onError = _ref.onError,
-    overrideCss = _ref.overrideCss,
+    className = _ref.className,
     placement = _ref.placement,
     testId = _ref.testId,
     overrideUrl = _ref.overrideUrl,
     blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(overrideCss),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    styles = _useState2[0],
-    setStyles = _useState2[1];
-  var updateStyles = (0, _react.useCallback)(function () {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    setStyles((0, _react2.css)(getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
-  }, [ignoreContainerPadding, overrideCss, placement]);
-  (0, _react.useEffect)(function () {
-    updateStyles();
-  }, [ignoreContainerPadding, overrideCss, placement, updateStyles]);
-  var handleOnLoad = (0, _react.useCallback)(function () {
-    updateStyles();
-  }, [updateStyles]);
   var handleOnError = (0, _react.useCallback)(function () {
     if (onError) {
       onError();
     }
   }, [onError]);
-  return (0, _react2.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
-    overrideCss: styles,
-    testId: "".concat(testId, "-resolved-view")
-  }), (0, _react2.jsx)(_elements.Preview, {
+  return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view"),
+    className: (0, _runtime.ax)([placement && previewBlockStyles[placement], !placement && ignoreContainerPadding && previewBlockStyles.ignoreContainerPadding])
+  }), /*#__PURE__*/React.createElement(_elements.Preview, {
     onError: handleOnError,
-    onLoad: handleOnLoad,
     overrideUrl: overrideUrl
   }));
 };

package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/resolved/indexOld.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _constants = require("../../../../../../constants");
+var _elements = require("../../../elements");
+var _block = _interopRequireDefault(require("../../block"));
+var _excluded = ["ignoreContainerPadding", "onError", "overrideCss", "placement", "testId", "overrideUrl"];
+var _templateObject;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+/**
+ * Due to its placement on the left/right and ignoreContainerPadding prop
+ * rely on its parent container styling, css variables are declared in
+ * <Container /> to preset the base values for the preview block styling.
+ *
+ * `--container-padding` is the padding of the Container. This value is based
+ *   on size and hidePadding.
+ * `--container-gap-left` and `--container-gap-right` are the gap or padding of
+ *   the Container depending on whether the container has other preview blocks
+ *   with left/right positioning.
+ * `--preview-block-width` is the size of the preview image in relation to
+ *   the Container width when the placement is left/right.
+ * @param placement
+ * @param ignoreContainerPadding
+ */
+var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreContainerPadding) {
+  if (placement === _constants.MediaPlacement.Left || placement === _constants.MediaPlacement.Right) {
+    var containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tbottom: ", ";\n\t\t\twidth: calc(var(--preview-block-width) - ", ");\n\n\t\t\t", "\n\t\t\t", "\n\n      [data-smart-element-media='image'] {\n\t\t\t\taspect-ratio: unset;\n\t\t\t\tpadding-top: unset;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\t\t\t}\n\t\t"])), containerPadding, containerPadding, containerPadding, placement === _constants.MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === _constants.MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
+  }
+  if (ignoreContainerPadding) {
+    return (0, _react2.css)({
+      marginLeft: 'calc(var(--container-gap-left) * -1)',
+      marginRight: 'calc(var(--container-gap-right) * -1)',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '&:first-of-type': {
+        marginTop: 'calc(var(--container-padding) * -1)'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '&:last-of-type': {
+        marginBottom: 'calc(var(--container-padding) * -1)'
+      }
+    });
+  }
+};
+
+/**
+ * Represents a resolved PreviewBlock, which typically contains media or other large format content.
+ * @public
+ * @param {PreviewBlock} PreviewBlock
+ * @see Block
+ */
+var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
+  var _ref$ignoreContainerP = _ref.ignoreContainerPadding,
+    ignoreContainerPadding = _ref$ignoreContainerP === void 0 ? false : _ref$ignoreContainerP,
+    onError = _ref.onError,
+    overrideCss = _ref.overrideCss,
+    placement = _ref.placement,
+    testId = _ref.testId,
+    overrideUrl = _ref.overrideUrl,
+    blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(overrideCss),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    styles = _useState2[0],
+    setStyles = _useState2[1];
+  var updateStyles = (0, _react.useCallback)(function () {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    setStyles((0, _react2.css)(getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
+  }, [ignoreContainerPadding, overrideCss, placement]);
+  (0, _react.useEffect)(function () {
+    updateStyles();
+  }, [ignoreContainerPadding, overrideCss, placement, updateStyles]);
+  var handleOnLoad = (0, _react.useCallback)(function () {
+    updateStyles();
+  }, [updateStyles]);
+  var handleOnError = (0, _react.useCallback)(function () {
+    if (onError) {
+      onError();
+    }
+  }, [onError]);
+  return (0, _react2.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
+    overrideCss: styles,
+    testId: "".concat(testId, "-resolved-view")
+  }), (0, _react2.jsx)(_elements.Preview, {
+    onError: handleOnError,
+    onLoad: handleOnLoad,
+    overrideUrl: overrideUrl
+  }));
+};
+var _default = exports.default = PreviewBlockResolvedView;

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/TitleBlockOld.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _constants = require("../../../../../constants");
+var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
+var _elements = require("../../elements");
+var _actionGroup = _interopRequireDefault(require("../action-group"));
+var _errored = _interopRequireDefault(require("./errored"));
+var _resolved = _interopRequireDefault(require("./resolved"));
+var _resolving = _interopRequireDefault(require("./resolving"));
+var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "icon", "theme", "hideRetry", "metadataPosition", "hideIcon"]; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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 getActionStyles = function getActionStyles(showOnHover, isOpen) {
+  if (showOnHover && !isOpen) {
+    return (0, _react2.css)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '.actions-button-group': {
+        opacity: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '&:hover .actions-button-group, .actions-button-group:focus-within': {
+        opacity: 1
+      }
+    });
+  }
+};
+var getTitleBlockViewComponent = function getTitleBlockViewComponent(status) {
+  switch (status) {
+    case _constants.SmartLinkStatus.Pending:
+    case _constants.SmartLinkStatus.Resolving:
+      return _resolving.default;
+    case _constants.SmartLinkStatus.Resolved:
+      return _resolved.default;
+    case _constants.SmartLinkStatus.Unauthorized:
+    case _constants.SmartLinkStatus.Forbidden:
+    case _constants.SmartLinkStatus.NotFound:
+    case _constants.SmartLinkStatus.Errored:
+    case _constants.SmartLinkStatus.Fallback:
+    default:
+      return _errored.default;
+  }
+};
+
+/**
+ * Represents a TitleBlock, which is the foundation of Flexible UI.
+ * This contains an icon, the link, and any associated metadata and actions in one block.
+ * The TitleBlock will also render differently given the state of the smart link.
+ * This can be found in the corresponding Resolving, Resolved and Errored views.
+ * @public
+ * @param {TitleBlockProps} TitleBlockProps
+ * @see Block
+ * @see TitleBlockResolvingView
+ * @see TitleBlockResolvedView
+ * @see TitleBlockErroredView
+ */
+var TitleBlock = function TitleBlock(_ref) {
+  var _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    anchorTarget = _ref.anchorTarget,
+    hideTitleTooltip = _ref.hideTitleTooltip,
+    maxLines = _ref.maxLines,
+    onActionMenuOpenChange = _ref.onActionMenuOpenChange,
+    onClick = _ref.onClick,
+    overrideCss = _ref.overrideCss,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
+    showActionOnHover = _ref.showActionOnHover,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-title' : _ref$testId,
+    text = _ref.text,
+    icon = _ref.icon,
+    theme = _ref.theme,
+    hideRetry = _ref.hideRetry,
+    metadataPosition = _ref.metadataPosition,
+    _ref$hideIcon = _ref.hideIcon,
+    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  if (hideRetry && props.retry) {
+    delete props.retry;
+  }
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    actionDropdownOpen = _useState2[0],
+    setActionDropdownOpen = _useState2[1];
+  var onDropdownOpenChange = (0, _react.useCallback)(function (isOpen) {
+    setActionDropdownOpen(isOpen);
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen: isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  var actionGroup = actions.length > 0 && /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: onDropdownOpenChange
+  });
+  var actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  var combinedCss = (0, _react2.css)(actionStyles, overrideCss);
+  var overrideText = !!text ? {
+    text: text
+  } : {};
+  var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
+  var title = /*#__PURE__*/_react.default.createElement(_elements.Title, (0, _extends2.default)({
+    hideTooltip: hideTitleTooltip,
+    maxLines: maxLines,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    target: anchorTarget,
+    theme: theme
+  }, overrideText));
+  var Component = getTitleBlockViewComponent(status);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
+    actionGroup: actionGroup,
+    overrideCss: combinedCss,
+    testId: testId,
+    title: title,
+    metadataPosition: metadataPosition,
+    hideIcon: hideIcon,
+    icon: icon
+  }));
+};
+var _default = exports.default = TitleBlock;

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/errored/TitleBlockErroredViewOld.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
+var _constants = require("../../../../../../constants");
+var _elements = require("../../../elements");
+var _utils = require("../../../utils");
+var _block = _interopRequireDefault(require("../../block"));
+var _elementGroup = _interopRequireDefault(require("../../element-group"));
+var _excluded = ["actionGroup", "retry", "position", "testId", "title", "icon", "hideIcon"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var actionStyles = (0, _react.css)({
+  cursor: 'pointer',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  ':hover': {
+    color: "var(--ds-text-subtle, #8993A4)",
+    textDecoration: 'underline'
+  }
+});
+var actionHoverStyles = (0, _react.css)({
+  position: 'relative',
+  zIndex: 1,
+  '&:focus': {
+    outlineOffset: "var(--ds-space-negative-025, -2px)"
+  }
+});
+
+/**
+ * This function does not work in the component below as it needs to be xcss.
+ * The component instead uses inherited styles
+ */
+var getMessageStyles = function getMessageStyles(size, hasAction) {
+  var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
+  return (0, _react.css)({
+    flex: '1 1 auto',
+    justifyContent: 'flex-end'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  hasAction ? actionStyles : '',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  sizeStyles,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), {
+    color: "var(--ds-text-disabled, #6B778C)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    ':focus': {
+      outline: "var(--ds-border-focused, #388BFF)".concat(" solid 2px")
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  hasAction ? actionHoverStyles : '');
+};
+
+/**
+ * Represents an Errored TitleBlock view.
+ * This will render when a Smart Link did not successfully resolve.
+ * This may be a result of a Smart Link not having the correct credentials,
+ * or the backend response was errored or malformed.
+ * @see TitleBlock
+ */
+var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
+  var actionGroup = _ref.actionGroup,
+    retry = _ref.retry,
+    position = _ref.position,
+    testId = _ref.testId,
+    title = _ref.title,
+    icon = _ref.icon,
+    hideIcon = _ref.hideIcon,
+    blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _ref2 = retry || {},
+    descriptor = _ref2.descriptor,
+    onClick = _ref2.onClick,
+    values = _ref2.values;
+  var _blockProps$size = blockProps.size,
+    size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  var hasAction = onClick !== undefined;
+  return (0, _react.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-errored-view")
+  }), !hideIcon && (0, _react.jsx)(_elements.LinkIcon, {
+    overrideIcon: icon,
+    position: position
+  }), title, descriptor && (0, _react.jsx)(_elementGroup.default, {
+    direction: _constants.SmartLinkDirection.Horizontal,
+    align: _constants.SmartLinkAlignment.Right
+  }, (0, _react.jsx)(_primitives.Box
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  , {
+    xcss: getMessageStyles(size, hasAction),
+    onClick: onClick,
+    testId: "".concat(testId, "-errored-view-message"),
+    tabIndex: hasAction ? 0 : -1
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
+    values: values
+  })))), actionGroup);
+};
+var _default = exports.default = TitleBlockErroredView;

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

@@ -4,60 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TitleBlockErroredViewNew = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../../../../../constants");
 var _elements = require("../../../elements");
-var _utils = require("../../../utils");
 var _block = _interopRequireDefault(require("../../block"));
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
+var _TitleBlockErroredViewOld = _interopRequireDefault(require("./TitleBlockErroredViewOld"));
 var _excluded = ["actionGroup", "retry", "position", "testId", "title", "icon", "hideIcon"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var actionStyles = (0, _react.css)({
-  cursor: 'pointer',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover': {
-    color: "var(--ds-text-subtle, #8993A4)",
-    textDecoration: 'underline'
-  }
-});
-var actionHoverStyles = (0, _react.css)({
-  position: 'relative',
-  zIndex: 1,
-  '&:focus': {
-    outlineOffset: "var(--ds-space-negative-025, -2px)"
-  }
-});
-var getMessageStyles = function getMessageStyles(size, hasAction) {
-  var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _react.css)({
-    flex: '1 1 auto',
-    justifyContent: 'flex-end'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  hasAction ? actionStyles : '',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  sizeStyles,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), {
-    color: "var(--ds-text-disabled, #6B778C)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    ':focus': {
-      outline: "var(--ds-border-focused, #388BFF)".concat(" solid 2px")
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  hasAction ? actionHoverStyles : '');
-};
-
 /**
  * Represents an Errored TitleBlock view.
  * This will render when a Smart Link did not successfully resolve.
@@ -65,7 +23,7 @@ var getMessageStyles = function getMessageStyles(size, hasAction) {
  * or the backend response was errored or malformed.
  * @see TitleBlock
  */
-var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
+var TitleBlockErroredViewNew = exports.TitleBlockErroredViewNew = function TitleBlockErroredViewNew(_ref) {
   var actionGroup = _ref.actionGroup,
     retry = _ref.retry,
     position = _ref.position,
@@ -78,26 +36,21 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
     descriptor = _ref2.descriptor,
     onClick = _ref2.onClick,
     values = _ref2.values;
-  var _blockProps$size = blockProps.size,
-    size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
   var hasAction = onClick !== undefined;
-  return (0, _react.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-errored-view")
-  }), !hideIcon && (0, _react.jsx)(_elements.LinkIcon, {
+  }), !hideIcon && /*#__PURE__*/_react.default.createElement(_elements.LinkIcon, {
     overrideIcon: icon,
     position: position
-  }), title, descriptor && (0, _react.jsx)(_elementGroup.default, {
+  }), title, descriptor && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right
-  }, (0, _react.jsx)(_primitives.Box
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  , {
-    xcss: getMessageStyles(size, hasAction),
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     onClick: onClick,
     testId: "".concat(testId, "-errored-view-message"),
     tabIndex: hasAction ? 0 : -1
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
     values: values
   })))), actionGroup);
 };
-var _default = exports.default = TitleBlockErroredView;
+var _default = exports.default = _TitleBlockErroredViewOld.default;