@atlaskit/smart-card 34.2.2 → 34.4.0

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

@@ -1,13 +1,9 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useEffect, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { MediaPlacement } from '../../../../../../constants';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback } from 'react';
 import { Preview } from '../../../elements';
 import Block from '../../block';
 /**
@@ -25,42 +21,10 @@ import Block from '../../block';
  * @param placement
  * @param ignoreContainerPadding
  */
-const getPreviewBlockStyles = (placement, ignoreContainerPadding) => {
-  if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
-    const containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
-    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-    return css`
-			position: absolute;
-			top: ${containerPadding};
-			bottom: ${containerPadding};
-			width: calc(var(--preview-block-width) - ${containerPadding});
-
-			${placement === MediaPlacement.Left ? `left: ${containerPadding};` : ''}
-			${placement === MediaPlacement.Right ? `right: ${containerPadding};` : ''}
-
-      [data-smart-element-media='image'] {
-				aspect-ratio: unset;
-				padding-top: unset;
-				width: 100%;
-				height: 100%;
-				object-fit: cover;
-			}
-		`;
-  }
-  if (ignoreContainerPadding) {
-    return 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)'
-      }
-    });
-  }
+const 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"
 };
 
 /**
@@ -72,34 +36,22 @@ const getPreviewBlockStyles = (placement, ignoreContainerPadding) => {
 const PreviewBlockResolvedView = ({
   ignoreContainerPadding = false,
   onError,
-  overrideCss,
+  className,
   placement,
   testId,
   overrideUrl,
   ...blockProps
 }) => {
-  const [styles, setStyles] = useState(overrideCss);
-  const updateStyles = useCallback(() => {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    setStyles(css(getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
-  }, [ignoreContainerPadding, overrideCss, placement]);
-  useEffect(() => {
-    updateStyles();
-  }, [ignoreContainerPadding, overrideCss, placement, updateStyles]);
-  const handleOnLoad = useCallback(() => {
-    updateStyles();
-  }, [updateStyles]);
   const handleOnError = useCallback(() => {
     if (onError) {
       onError();
     }
   }, [onError]);
-  return jsx(Block, _extends({}, blockProps, {
-    overrideCss: styles,
-    testId: `${testId}-resolved-view`
-  }), jsx(Preview, {
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: `${testId}-resolved-view`,
+    className: ax([placement && previewBlockStyles[placement], !placement && ignoreContainerPadding && previewBlockStyles.ignoreContainerPadding])
+  }), /*#__PURE__*/React.createElement(Preview, {
     onError: handleOnError,
-    onLoad: handleOnLoad,
     overrideUrl: overrideUrl
   }));
 };

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

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useEffect, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { MediaPlacement } from '../../../../../../constants';
+import { Preview } from '../../../elements';
+import Block from '../../block';
+/**
+ * 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
+ */
+const getPreviewBlockStyles = (placement, ignoreContainerPadding) => {
+  if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
+    const containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+    return css`
+			position: absolute;
+			top: ${containerPadding};
+			bottom: ${containerPadding};
+			width: calc(var(--preview-block-width) - ${containerPadding});
+
+			${placement === MediaPlacement.Left ? `left: ${containerPadding};` : ''}
+			${placement === MediaPlacement.Right ? `right: ${containerPadding};` : ''}
+
+      [data-smart-element-media='image'] {
+				aspect-ratio: unset;
+				padding-top: unset;
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+		`;
+  }
+  if (ignoreContainerPadding) {
+    return 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
+ */
+const PreviewBlockResolvedView = ({
+  ignoreContainerPadding = false,
+  onError,
+  overrideCss,
+  placement,
+  testId,
+  overrideUrl,
+  ...blockProps
+}) => {
+  const [styles, setStyles] = useState(overrideCss);
+  const updateStyles = useCallback(() => {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    setStyles(css(getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
+  }, [ignoreContainerPadding, overrideCss, placement]);
+  useEffect(() => {
+    updateStyles();
+  }, [ignoreContainerPadding, overrideCss, placement, updateStyles]);
+  const handleOnLoad = useCallback(() => {
+    updateStyles();
+  }, [updateStyles]);
+  const handleOnError = useCallback(() => {
+    if (onError) {
+      onError();
+    }
+  }, [onError]);
+  return jsx(Block, _extends({}, blockProps, {
+    overrideCss: styles,
+    testId: `${testId}-resolved-view`
+  }), jsx(Preview, {
+    onError: handleOnError,
+    onLoad: handleOnLoad,
+    overrideUrl: overrideUrl
+  }));
+};
+export default PreviewBlockResolvedView;

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

@@ -0,0 +1,118 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css } from '@emotion/react';
+import { SmartLinkStatus } from '../../../../../constants';
+import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
+import { Title } from '../../elements';
+import ActionGroup from '../action-group';
+import TitleBlockErroredView from './errored';
+import TitleBlockResolvedView from './resolved';
+import TitleBlockResolvingView from './resolving';
+const getActionStyles = (showOnHover, isOpen) => {
+  if (showOnHover && !isOpen) {
+    return 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
+      }
+    });
+  }
+};
+const getTitleBlockViewComponent = status => {
+  switch (status) {
+    case SmartLinkStatus.Pending:
+    case SmartLinkStatus.Resolving:
+      return TitleBlockResolvingView;
+    case SmartLinkStatus.Resolved:
+      return TitleBlockResolvedView;
+    case SmartLinkStatus.Unauthorized:
+    case SmartLinkStatus.Forbidden:
+    case SmartLinkStatus.NotFound:
+    case SmartLinkStatus.Errored:
+    case SmartLinkStatus.Fallback:
+    default:
+      return TitleBlockErroredView;
+  }
+};
+
+/**
+ * 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
+ */
+const TitleBlock = ({
+  actions = [],
+  anchorTarget,
+  hideTitleTooltip,
+  maxLines,
+  onActionMenuOpenChange,
+  onClick,
+  overrideCss,
+  status = SmartLinkStatus.Fallback,
+  showActionOnHover,
+  testId = 'smart-block-title',
+  text,
+  icon,
+  theme,
+  hideRetry,
+  metadataPosition,
+  hideIcon = false,
+  ...props
+}) => {
+  if (hideRetry && props.retry) {
+    delete props.retry;
+  }
+  const [actionDropdownOpen, setActionDropdownOpen] = useState(false);
+  const onDropdownOpenChange = useCallback(isOpen => {
+    setActionDropdownOpen(isOpen);
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  const actionGroup = actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: onDropdownOpenChange
+  });
+  const actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  const combinedCss = css(actionStyles, overrideCss);
+  const overrideText = !!text ? {
+    text
+  } : {};
+  const onMouseDown = useMouseDownEvent();
+  const title = /*#__PURE__*/React.createElement(Title, _extends({
+    hideTooltip: hideTitleTooltip,
+    maxLines: maxLines,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    target: anchorTarget,
+    theme: theme
+  }, overrideText));
+  const Component = getTitleBlockViewComponent(status);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    actionGroup: actionGroup,
+    overrideCss: combinedCss,
+    testId: testId,
+    title: title,
+    metadataPosition: metadataPosition,
+    hideIcon: hideIcon,
+    icon: icon
+  }));
+};
+export default TitleBlock;

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

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { Box } from '@atlaskit/primitives';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
+import { LinkIcon } from '../../../elements';
+import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+const actionStyles = 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'
+  }
+});
+const actionHoverStyles = 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
+ */
+const getMessageStyles = (size, hasAction) => {
+  const sizeStyles = getLinkSizeStyles(size);
+  return 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
+  getTruncateStyles(1, 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)"} 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
+ */
+const TitleBlockErroredView = ({
+  actionGroup,
+  retry,
+  position,
+  testId,
+  title,
+  icon,
+  hideIcon,
+  ...blockProps
+}) => {
+  const {
+    descriptor,
+    onClick,
+    values
+  } = retry || {};
+  const {
+    size = SmartLinkSize.Medium
+  } = blockProps;
+  const hasAction = onClick !== undefined;
+  return jsx(Block, _extends({}, blockProps, {
+    testId: `${testId}-errored-view`
+  }), !hideIcon && jsx(LinkIcon, {
+    overrideIcon: icon,
+    position: position
+  }), title, descriptor && jsx(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    align: SmartLinkAlignment.Right
+  }, jsx(Box
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  , {
+    xcss: getMessageStyles(size, hasAction),
+    onClick: onClick,
+    testId: `${testId}-errored-view-message`,
+    tabIndex: hasAction ? 0 : -1
+  }, jsx(FormattedMessage, _extends({}, descriptor, {
+    values: values
+  })))), actionGroup);
+};
+export default TitleBlockErroredView;

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

@@ -1,53 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { Box } from '@atlaskit/primitives';
-import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
+import { SmartLinkAlignment, SmartLinkDirection } from '../../../../../../constants';
 import { LinkIcon } from '../../../elements';
-import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
-const actionStyles = 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'
-  }
-});
-const actionHoverStyles = css({
-  position: 'relative',
-  zIndex: 1,
-  '&:focus': {
-    outlineOffset: "var(--ds-space-negative-025, -2px)"
-  }
-});
-const getMessageStyles = (size, hasAction) => {
-  const sizeStyles = getLinkSizeStyles(size);
-  return 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
-  getTruncateStyles(1, 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)"} solid 2px`
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  hasAction ? actionHoverStyles : '');
-};
+import TitleBlockErroredViewOld from './TitleBlockErroredViewOld';
 
 /**
  * Represents an Errored TitleBlock view.
@@ -56,7 +15,7 @@ const getMessageStyles = (size, hasAction) => {
  * or the backend response was errored or malformed.
  * @see TitleBlock
  */
-const TitleBlockErroredView = ({
+const TitleBlockErroredViewNew = ({
   actionGroup,
   retry,
   position,
@@ -71,27 +30,22 @@ const TitleBlockErroredView = ({
     onClick,
     values
   } = retry || {};
-  const {
-    size = SmartLinkSize.Medium
-  } = blockProps;
   const hasAction = onClick !== undefined;
-  return jsx(Block, _extends({}, blockProps, {
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: `${testId}-errored-view`
-  }), !hideIcon && jsx(LinkIcon, {
+  }), !hideIcon && /*#__PURE__*/React.createElement(LinkIcon, {
     overrideIcon: icon,
     position: position
-  }), title, descriptor && jsx(ElementGroup, {
+  }), title, descriptor && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
-  }, jsx(Box
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  , {
-    xcss: getMessageStyles(size, hasAction),
+  }, /*#__PURE__*/React.createElement(Box, {
     onClick: onClick,
     testId: `${testId}-errored-view-message`,
     tabIndex: hasAction ? 0 : -1
-  }, jsx(FormattedMessage, _extends({}, descriptor, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, descriptor, {
     values: values
   })))), actionGroup);
 };
-export default TitleBlockErroredView;
+export default TitleBlockErroredViewOld;
+export { TitleBlockErroredViewNew };

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/index.compiled.css

@@ -0,0 +1,2 @@
+._1bfhidpf .actions-button-group{opacity:0}
+._wn5xkb7n:hover .actions-button-group, ._h157kb7n .actions-button-group:focus-within{opacity:1}

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

@@ -1,43 +1,34 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkStatus } from '../../../../../constants';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 import { Title } from '../../elements';
 import ActionGroup from '../action-group';
-import TitleBlockErroredView from './errored';
-import TitleBlockResolvedView from './resolved';
-import TitleBlockResolvingView from './resolving';
-const getActionStyles = (showOnHover, isOpen) => {
-  if (showOnHover && !isOpen) {
-    return 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
-      }
-    });
-  }
-};
+import { TitleBlockErroredViewNew } from './errored';
+import { TitleBlockResolvedViewNew } from './resolved';
+import { TitleBlockResolvingViewNew } from './resolving';
+import TitleBlockOld from './TitleBlockOld';
+const styles = null;
+const actionStyles = null;
 const getTitleBlockViewComponent = status => {
   switch (status) {
     case SmartLinkStatus.Pending:
     case SmartLinkStatus.Resolving:
-      return TitleBlockResolvingView;
+      return TitleBlockResolvingViewNew;
     case SmartLinkStatus.Resolved:
-      return TitleBlockResolvedView;
+      return TitleBlockResolvedViewNew;
     case SmartLinkStatus.Unauthorized:
     case SmartLinkStatus.Forbidden:
     case SmartLinkStatus.NotFound:
     case SmartLinkStatus.Errored:
     case SmartLinkStatus.Fallback:
     default:
-      return TitleBlockErroredView;
+      return TitleBlockErroredViewNew;
   }
 };
 
@@ -49,18 +40,17 @@ const getTitleBlockViewComponent = status => {
  * @public
  * @param {TitleBlockProps} TitleBlockProps
  * @see Block
- * @see TitleBlockResolvingView
- * @see TitleBlockResolvedView
- * @see TitleBlockErroredView
+ * @see TitleBlockResolvingViewNew
+ * @see TitleBlockResolvedViewNew
+ * @see TitleBlockErroredViewNew
  */
-const TitleBlock = ({
+const TitleBlockNew = ({
   actions = [],
   anchorTarget,
   hideTitleTooltip,
   maxLines,
   onActionMenuOpenChange,
   onClick,
-  overrideCss,
   status = SmartLinkStatus.Fallback,
   showActionOnHover,
   testId = 'smart-block-title',
@@ -70,6 +60,7 @@ const TitleBlock = ({
   hideRetry,
   metadataPosition,
   hideIcon = false,
+  className,
   ...props
 }) => {
   if (hideRetry && props.retry) {
@@ -89,9 +80,6 @@ const TitleBlock = ({
     visibleButtonsNum: showActionOnHover ? 1 : 2,
     onDropdownOpenChange: onDropdownOpenChange
   });
-  const actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  const combinedCss = css(actionStyles, overrideCss);
   const overrideText = !!text ? {
     text
   } : {};
@@ -105,14 +93,25 @@ const TitleBlock = ({
     theme: theme
   }, overrideText));
   const Component = getTitleBlockViewComponent(status);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-    actionGroup: actionGroup,
-    overrideCss: combinedCss,
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([showActionOnHover && !actionDropdownOpen && "_1bfhidpf _wn5xkb7n _h157kb7n"])
+  }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    actionGroup: actionGroup
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: className,
     testId: testId,
     title: title,
     metadataPosition: metadataPosition,
     hideIcon: hideIcon,
     icon: icon
-  }));
+  })));
+};
+const TitleBlock = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(TitleBlockNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(TitleBlockOld, props);
+  }
 };
 export default TitleBlock;