@atlaskit/smart-card 44.9.10 → 44.10.0

package/dist/es2019/view/CardWithUrl/card-intersection-observer/index.js

@@ -1,14 +1,34 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import useIntersectionObserver from '../../../state/hooks/use-intersection-observer';
-import { isIntersectionObserverSupported } from '../../../utils';
+import { useSmartLinkSeenEvent } from '../../../state/hooks/use-smart-link-seen-event';
 import CardLoaderWrapper from '../card-loader-wrapper';
 const withCardIntersectionObserver = Component => props => {
   // TODO: NAVX-4682: Add feature parity to LazyIntersectionObserverCard for no lazy loading
-  const [isIntersected, setIsIntersected] = useState(false);
-  const onIntersecting = useCallback(() => {
-    setIsIntersected(true);
-  }, []);
+  const {
+    appearance,
+    children,
+    id,
+    onError: onErrorCallback,
+    ui,
+    url = ''
+  } = props;
+  const {
+    onIntersecting,
+    onStatusSettled
+  } = useSmartLinkSeenEvent({
+    appearance,
+    children,
+    id,
+    ui,
+    url
+  });
+  const onError = useCallback(data => {
+    if (data !== null && data !== void 0 && data.status) {
+      onStatusSettled(data.status);
+    }
+    onErrorCallback === null || onErrorCallback === void 0 ? void 0 : onErrorCallback(data);
+  }, [onStatusSettled, onErrorCallback]);
   const ref = useIntersectionObserver({
     onIntersecting
   });
@@ -16,10 +36,7 @@ const withCardIntersectionObserver = Component => props => {
     appearance: props.appearance,
     ref: ref
   }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-    isIntersected: isIntersected
+    onError: onError
   })));
 };
-const withCardIntersectionObserverFallback = Component => props => /*#__PURE__*/React.createElement(CardLoaderWrapper, {
-  appearance: props.appearance
-}, /*#__PURE__*/React.createElement(Component, props));
-export default (Component => isIntersectionObserverSupported() ? withCardIntersectionObserver(Component) : withCardIntersectionObserverFallback(Component));
+export default withCardIntersectionObserver;

package/dist/es2019/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.js

@@ -4,6 +4,7 @@ import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { usePrefetch } from '../../../state';
 import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
 import useIntersectionObserver from '../../../state/hooks/use-intersection-observer';
+import { useSmartLinkSeenEvent } from '../../../state/hooks/use-smart-link-seen-event';
 import { shouldSample } from '../../../utils/shouldSample';
 import CardLoaderWrapper from '../card-loader-wrapper';
 import { CardWithUrlContent } from '../component';
@@ -62,26 +63,46 @@ const LazyIntersectionObserverCardNew = props => {
   const [shouldSendRenderedUFOEvent] = useState(shouldSample());
   const {
     appearance,
-    url,
-    id
+    children,
+    id,
+    onError: onErrorCallback,
+    ui,
+    url
   } = props;
   const prefetch = usePrefetch(url);
   const ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  const {
+    onIntersecting: onSeenIntersecting,
+    onStatusSettled
+  } = useSmartLinkSeenEvent({
+    appearance,
+    children,
+    id,
+    ui,
+    url
+  });
+  const onError = useCallback(data => {
+    if (data !== null && data !== void 0 && data.status) {
+      onStatusSettled(data.status);
+    }
+    onErrorCallback === null || onErrorCallback === void 0 ? void 0 : onErrorCallback(data);
+  }, [onStatusSettled, onErrorCallback]);
   const onIntersection = useCallback(isIntersecting => {
     if (isIntersecting) {
       if (shouldSendRenderedUFOEvent) {
         startUfoExperience('smart-link-rendered', id);
       }
+      onSeenIntersecting();
       setIsIntersected(true);
     } else {
       prefetch();
     }
-  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  }, [id, onSeenIntersecting, prefetch, shouldSendRenderedUFOEvent]);
   const ref = useIntersectionObserver({
     onIntersection
   });
   const content = isIntersected ? /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
-    isIntersected: true
+    onError: onError
   })) : /*#__PURE__*/React.createElement(ComponentObserver, {
     ref: ref
   }, /*#__PURE__*/React.createElement(LoadingCardLink, props));

package/dist/es2019/view/CardWithUrl/component.js

@@ -1,8 +1,7 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
@@ -19,19 +18,17 @@ import { SmartLinkAnalyticsContext } from '../../utils/analytics/SmartLinkAnalyt
 import { isFlexibleUiCard } from '../../utils/flexible';
 import * as measure from '../../utils/performance';
 import { BlockCard } from '../BlockCard';
-import { EmbedCard, EmbedCardUpdated } from '../EmbedCard';
+import { EmbedCard } from '../EmbedCard';
 import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
 import withCardIntersectionObserver from './card-intersection-observer';
 const thirdPartyARIPrefix = 'ari:third-party';
-const EmbedCardComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardUpdated, EmbedCard);
 function Component({
   id,
   url,
   isSelected,
   isHovered,
-  isIntersected,
   frameStyle,
   platform,
   onClick,
@@ -62,7 +59,6 @@ function Component({
   const {
     fireEvent
   } = useAnalyticsEvents();
-  const hasFiredSeenRef = useRef(false);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
 
   // Get state, actions for this card.
@@ -217,340 +213,6 @@ function Component({
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, rovoActionsCtaShown, state.status]);
-
-  // Fire smartLink seen event once on a successful render card is in the viewport
-  useEffect(() => {
-    if (fg('platform_sl_event_ui_seen')) {
-      if (state.status !== 'unauthorized') return;
-      if (isIntersected && !hasFiredSeenRef.current) {
-        fireEvent('ui.smartLink.seen', {
-          display: appearance
-        });
-        hasFiredSeenRef.current = true;
-      }
-    }
-  }, [state.status, isIntersected, fireEvent, appearance]);
-  const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
-    fireEvent('ui.smartLinkIframe.dwelled', {
-      id,
-      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-      display: isFlexibleUi ? 'flexible' : appearance,
-      dwellPercentVisible,
-      dwellTime
-    });
-  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
-  const onIframeFocus = useCallback(() => {
-    fireEvent('ui.smartLinkIframe.focused', {
-      id,
-      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-      display: isFlexibleUi ? 'flexible' : appearance
-    });
-  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
-  if (isFlexibleUi) {
-    let cardState = state;
-    if (error) {
-      if ((error === null || error === void 0 ? void 0 : error.name) === 'APIError') {
-        cardState = {
-          status: 'errored'
-        };
-      } else {
-        throw error;
-      }
-    }
-    return /*#__PURE__*/React.createElement(FlexibleCard, {
-      id: id,
-      cardState: cardState,
-      placeholderData: placeholderData,
-      onAuthorize: services.length && handleAuthorize || undefined,
-      onClick: handleClickWrapper,
-      origin: "smartLinkCard",
-      renderers: renderers,
-      ui: ui,
-      showHoverPreview: showHoverPreview,
-      hoverPreviewOptions: hoverPreviewOptions,
-      actionOptions: actionOptions,
-      url: url,
-      testId: testId,
-      onResolve: onResolve,
-      onError: onError
-    }, children);
-  }
-
-  // We have to keep this last to prevent hook order from being violated
-  if (error) {
-    throw error;
-  }
-  switch (appearance) {
-    case 'inline':
-      return /*#__PURE__*/React.createElement(InlineCard, {
-        id: id,
-        url: url,
-        renderers: renderers,
-        cardState: state,
-        handleAuthorize: services.length && handleAuthorize || undefined,
-        handleFrameClick: handleClickWrapper,
-        isSelected: isSelected,
-        isHovered: isHovered,
-        onResolve: onResolve,
-        onError: onError,
-        testId: testId,
-        inlinePreloaderStyle: inlinePreloaderStyle,
-        showHoverPreview: showHoverPreview,
-        hoverPreviewOptions: hoverPreviewOptions,
-        actionOptions: actionOptions,
-        removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
-        resolvingPlaceholder: resolvingPlaceholder,
-        truncateInline: truncateInline,
-        hideIconLoadingSkeleton: hideIconLoadingSkeleton
-      });
-    case 'block':
-      return /*#__PURE__*/React.createElement(BlockCard, {
-        id: id,
-        url: url,
-        renderers: renderers,
-        authFlow: config && config.authFlow,
-        cardState: state,
-        handleAuthorize: services.length && handleAuthorize || undefined,
-        handleFrameClick: handleClickWrapper,
-        isSelected: isSelected,
-        onResolve: onResolve,
-        onError: onError,
-        testId: testId,
-        actionOptions: actionOptions,
-        CompetitorPrompt: CompetitorPrompt,
-        hideIconLoadingSkeleton: hideIconLoadingSkeleton
-      });
-    case 'embed':
-      return /*#__PURE__*/React.createElement(EmbedCard, {
-        id: id,
-        url: url,
-        renderers: renderers,
-        cardState: state,
-        iframeUrlType: embedIframeUrlType,
-        handleAuthorize: services.length && handleAuthorize || undefined,
-        handleErrorRetry: handleRetry,
-        handleFrameClick: handleClickWrapper,
-        handleInvoke: handleInvoke,
-        isSelected: isSelected,
-        frameStyle: frameStyle,
-        platform: platform,
-        onResolve: onResolve,
-        onError: onError,
-        testId: testId,
-        inheritDimensions: inheritDimensions,
-        actionOptions: actionOptions,
-        ref: embedIframeRef,
-        onIframeDwell: onIframeDwell,
-        onIframeFocus: onIframeFocus,
-        CompetitorPrompt: CompetitorPrompt,
-        hideIconLoadingSkeleton: hideIconLoadingSkeleton
-      });
-  }
-}
-function ComponentUpdated({
-  id,
-  url,
-  isSelected,
-  isHovered,
-  isIntersected,
-  frameStyle,
-  platform,
-  onClick,
-  appearance,
-  onResolve,
-  onError,
-  testId,
-  actionOptions: actionOptionsProp,
-  inheritDimensions,
-  embedIframeRef,
-  embedIframeUrlType,
-  inlinePreloaderStyle,
-  ui,
-  children,
-  showHoverPreview,
-  hoverPreviewOptions,
-  removeTextHighlightingFromTitle,
-  resolvingPlaceholder,
-  truncateInline,
-  CompetitorPrompt,
-  hideIconLoadingSkeleton,
-  disablePreviewPanel,
-  placeholderData
-}) {
-  const {
-    createAnalyticsEvent
-  } = useAnalyticsEventsNext();
-  const {
-    fireEvent
-  } = useAnalyticsEvents();
-  const hasFiredSeenRef = useRef(false);
-  let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
-
-  // Get state, actions for this card.
-  const {
-    state,
-    actions,
-    config,
-    renderers,
-    error,
-    isPreviewPanelAvailable,
-    openPreviewPanel
-  } = useSmartLink(id, url);
-  const ari = getObjectAri(state.details);
-  const name = getObjectName(state.details);
-  const definitionId = getDefinitionId(state.details);
-  const extensionKey = getExtensionKey(state.details);
-  const resourceType = getResourceType(state.details);
-  const services = getServices(state.details);
-  const thirdPartyARI = getThirdPartyARI(state.details);
-  const firstPartyIdentifier = getFirstPartyIdentifier();
-  const actionOptions = combineActionOptions({
-    actionOptions: actionOptionsProp,
-    platform
-  });
-  const {
-    isEnabled: rovoActionsCtaShown
-  } = useInlineActionNudgeExperiment(url, showHoverPreview, actionOptions);
-  const fire3PClickEvent = fg('platform_smartlink_3pclick_analytics') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useFire3PWorkflowsClickEvent(firstPartyIdentifier, thirdPartyARI) : undefined;
-
-  // Setup UI handlers.
-  const handleClickWrapper = useCallback(event => {
-    const isModifierKeyPressed = isSpecialKey(event) || isSpecialClick(event);
-    fireEvent('ui.smartLink.clicked', {
-      id,
-      display: isFlexibleUi ? CardDisplay.Flexible : appearance,
-      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-      isModifierKeyPressed
-    });
-    if (fg('platform_smartlink_3pclick_analytics')) {
-      if (thirdPartyARI && thirdPartyARI.startsWith(thirdPartyARIPrefix)) {
-        const clickURL = getClickUrl(url, state.details);
-        if (clickURL === url && fire3PClickEvent) {
-          // For questions or concerns about this event,
-          // please reach out to the 3P Workflows Team via Slack in #help-3p-connector-workflow
-          fire3PClickEvent();
-        }
-      }
-    }
-    const isDisablePreviewPanel = disablePreviewPanel && editorExperiment('platform_editor_preview_panel_linking_exp', true, {
-      exposure: true
-    });
-
-    // If preview panel is available and the user clicked on the link,
-    // delegate the click to the preview panel handler
-    if (!isModifierKeyPressed && ari && name && openPreviewPanel && isPreviewPanelAvailable !== null && isPreviewPanelAvailable !== void 0 && isPreviewPanelAvailable({
-      ari
-    }) && !isDisablePreviewPanel) {
-      var _extractSmartLinkEmbe2;
-      event.preventDefault();
-      event.stopPropagation();
-      openPreviewPanel({
-        url,
-        ari,
-        name,
-        iconUrl: getObjectIconUrl(state.details),
-        panelData: {
-          embedUrl: expValEquals('platform_hover_card_preview_panel', 'cohort', 'test') ? (_extractSmartLinkEmbe2 = extractSmartLinkEmbed(state.details)) === null || _extractSmartLinkEmbe2 === void 0 ? void 0 : _extractSmartLinkEmbe2.src : undefined
-        }
-      });
-      fireLinkClickedEvent(createAnalyticsEvent)(event, {
-        attributes: {
-          clickOutcome: 'previewPanel'
-        }
-      });
-      return;
-    } else if (!onClick && !isFlexibleUi) {
-      const clickUrl = getClickUrl(url, state.details);
-
-      // Ctrl+left click on mac typically doesn't trigger onClick
-      // The event could have potentially had `e.preventDefault()` called on it by now
-      // event by smart card internally
-      // If it has been called then only then can `isSpecialEvent` be true.
-      const target = isSpecialEvent(event) ? '_blank' : '_self';
-      window.open(clickUrl, target);
-      fireLinkClickedEvent(createAnalyticsEvent)(event, {
-        attributes: {
-          clickOutcome: target === '_blank' ? 'clickThroughNewTabOrWindow' : 'clickThrough'
-        }
-      });
-    } else {
-      if (onClick) {
-        onClick(event);
-      }
-      fireLinkClickedEvent(createAnalyticsEvent)(event);
-    }
-  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, onClick, url, state.details, ari, name, fire3PClickEvent, isPreviewPanelAvailable, openPreviewPanel, createAnalyticsEvent, thirdPartyARI, disablePreviewPanel]);
-  const handleAuthorize = useCallback(() => actions.authorize(appearance), [actions, appearance]);
-  const handleRetry = useCallback(() => {
-    actions.reload();
-  }, [actions]);
-  const handleInvoke = useCallback(opts => actions.invoke(opts, appearance), [actions, appearance]);
-
-  // NB: for each status change in a Smart Link, a performance mark is created.
-  // Measures are sent relative to the first mark, matching what a user sees.
-  useEffect(() => {
-    measure.mark(id, state.status);
-    if (state.status !== 'pending' && state.status !== 'resolving') {
-      var _state$error4, _state$error5, _state$error6;
-      measure.create(id, state.status);
-      if (state.status === 'resolved') {
-        var _measure$getMeasure$d2, _measure$getMeasure2;
-        fireEvent('operational.smartLink.resolved', {
-          definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-          duration: (_measure$getMeasure$d2 = (_measure$getMeasure2 = measure.getMeasure(id, state.status)) === null || _measure$getMeasure2 === void 0 ? void 0 : _measure$getMeasure2.duration) !== null && _measure$getMeasure$d2 !== void 0 ? _measure$getMeasure$d2 : null
-        });
-      } else if (((_state$error4 = state.error) === null || _state$error4 === void 0 ? void 0 : _state$error4.type) !== 'ResolveUnsupportedError' && ((_state$error5 = state.error) === null || _state$error5 === void 0 ? void 0 : _state$error5.type) !== 'UnsupportedError' && ((_state$error6 = state.error) === null || _state$error6 === void 0 ? void 0 : _state$error6.name) !== 'InvalidUrlError') {
-        fireEvent('operational.smartLink.unresolved', {
-          definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-          reason: state.status,
-          error: state.error === undefined ? null : {
-            name: state.error.name,
-            kind: state.error.kind,
-            type: state.error.type
-          }
-        });
-      }
-    }
-  }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, fireEvent]);
-
-  // NB: once the smart-card has rendered into an end state, we capture
-  // this as a successful render. These can be one of:
-  // - the resolved state: when metadata is shown;
-  // - the unresolved states: viz. forbidden, not_found, unauthorized, errored.
-  useEffect(() => {
-    if (isFinalState(state.status)) {
-      succeedUfoExperience('smart-link-rendered', id || 'NULL', {
-        extensionKey,
-        display: isFlexibleUi ? 'flexible' : appearance
-      });
-
-      // UFO will disregard this if authentication experience has not yet been started
-      succeedUfoExperience('smart-link-authenticated', id || 'NULL', {
-        display: isFlexibleUi ? 'flexible' : appearance
-      });
-      fireEvent('ui.smartLink.renderSuccess', {
-        display: isFlexibleUi ? 'flexible' : appearance,
-        ...(appearance === 'inline' && {
-          rovoActionsCtaShown
-        })
-      });
-    }
-  }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, rovoActionsCtaShown, state.status]);
-
-  // Fire smartLink seen event once on a successful render card is in the viewport
-  useEffect(() => {
-    if (fg('platform_sl_event_ui_seen')) {
-      if (state.status !== 'unauthorized') return;
-      if (isIntersected && !hasFiredSeenRef.current) {
-        fireEvent('ui.smartLink.seen', {
-          display: appearance
-        });
-        hasFiredSeenRef.current = true;
-      }
-    }
-  }, [state.status, isIntersected, fireEvent, appearance]);
   const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id,
@@ -659,7 +321,7 @@ function ComponentUpdated({
         hideIconLoadingSkeleton: hideIconLoadingSkeleton
       });
     case 'embed':
-      return /*#__PURE__*/React.createElement(EmbedCardComponent, {
+      return /*#__PURE__*/React.createElement(EmbedCard, {
         id: id,
         url: url,
         renderers: renderers,
@@ -687,13 +349,12 @@ function ComponentUpdated({
       });
   }
 }
-const CardWithUrlContentComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', ComponentUpdated, Component);
 export const CardWithUrlContent = props => {
   const display = isFlexibleUiCard(props.children, props === null || props === void 0 ? void 0 : props.ui) ? CardDisplay.Flexible : props.appearance;
   return /*#__PURE__*/React.createElement(SmartLinkModalProvider, null, /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
     url: props.url,
     id: props.id,
     display: display
-  }, /*#__PURE__*/React.createElement(CardWithUrlContentComponent, props)));
+  }, /*#__PURE__*/React.createElement(Component, props)));
 };
 export const CardWithUrl = withCardIntersectionObserver(CardWithUrlContent);

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -5,83 +5,10 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 // eslint-disable-next-line no-unused-vars
 
-import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import Tooltip from '@atlaskit/tooltip';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import { handleClickCommon } from '../../common/utils';
 import { className } from './styled';
-const ExpandedFrame = ({
-  isPlaceholder = false,
-  children,
-  onClick,
-  icon,
-  text,
-  isSelected,
-  frameStyle = 'showOnHover',
-  href,
-  minWidth,
-  maxWidth,
-  testId = 'expanded-frame',
-  inheritDimensions,
-  allowScrollBar = false,
-  setOverflow = true,
-  CompetitorPrompt
-}) => {
-  const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
-  const handleClick = event => handleClickCommon(event, onClick);
-  const handleMouseDown = useMouseDownEvent();
-  const CompetitorPromptComponent = CompetitorPrompt && href ? /*#__PURE__*/React.createElement(CompetitorPrompt, {
-    sourceUrl: href,
-    linkType: "embed"
-  }) : null;
-  const renderHeader = () => {
-    return frameStyle !== 'hide' && /*#__PURE__*/React.createElement("div", {
-      className: ax([styles.header, "embed-header"])
-    }, /*#__PURE__*/React.createElement("div", {
-      className: ax([styles.leftSection])
-    }, /*#__PURE__*/React.createElement("div", {
-      className: ax([styles.headerIcon])
-    }, icon), /*#__PURE__*/React.createElement("div", {
-      className: ax([styles.tooltipWrapper])
-    }, !isPlaceholder && /*#__PURE__*/React.createElement(Tooltip, {
-      content: text,
-      hideTooltipOnMouseDown: true
-    }, /*#__PURE__*/React.createElement("a", {
-      href: href,
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      className: ax([styles.headerAnchor])
-    }, text)))), CompetitorPromptComponent);
-  };
-  const interactive = isInteractive();
-  const showBackgroundAlways = frameStyle === 'show' || isSelected && frameStyle !== 'hide';
-  const showBackgroundOnHover = interactive && frameStyle !== 'hide';
-  const renderContent = () => {
-    return /*#__PURE__*/React.createElement("div", {
-      "data-testid": "embed-content-wrapper",
-      // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
-      // See: HOT-107830
-      contentEditable: false,
-      className: ax([styles.contentStyle, setOverflow && allowScrollBar && styles.contentOverflowAuto, interactive && !showBackgroundAlways && !showBackgroundOnHover && styles.contentInteractiveActiveBorder])
-    }, children);
-  };
-  return /*#__PURE__*/React.createElement("div", _extends({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax([styles.linkWrapper, inheritDimensions && styles.linkWrapperInheritDimensions, isSelected && frameStyle !== 'hide' && styles.linkWrapperSelected, showBackgroundAlways && styles.linkWrapperBorderAndBackground, showBackgroundOnHover && !showBackgroundAlways && styles.linkWrapperInteractiveNotHidden, className]),
-    style: {
-      minWidth: minWidth ? `${minWidth}px` : '',
-      maxWidth: maxWidth ? `${maxWidth}px` : ''
-    },
-    "data-testid": testId,
-    "data-trello-do-not-use-override": testId
-    // Due to limitations of testing library, we can't assert ::after
-    ,
-    "data-is-selected": isSelected
-  }, (isPlaceholder || !href) && {
-    'data-wrapper-type': 'default',
-    'data-is-interactive': isInteractive()
-  }), renderHeader(), renderContent());
-};
 const styles = {
   linkWrapper: "_zulpu2gc _kqswh2mm _1e0c1txw _2lx21bp4 _4t3ik5xz _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _uiztglyw _qc5o94zs _14mjpb1k _aetrb3bt _18postnw _15l2idpf _32rxidpf _1x88idpf _19doidpf _1hfk1j28 _1bqqidpf _u94kidpf _1ifiidpf",
   linkWrapperInheritDimensions: "_4t3i1osq",
@@ -97,7 +24,7 @@ const styles = {
   contentInteractiveActiveBorder: "_1jhm1tt7",
   contentOverflowAuto: "_1reo1wug _18m91wug"
 };
-const ExpandedFrameUpdated = ({
+export const ExpandedFrame = ({
   isPlaceholder = false,
   children,
   onClick,
@@ -174,6 +101,4 @@ const ExpandedFrameUpdated = ({
     'data-wrapper-type': 'default',
     'data-is-interactive': isInteractive()
   }), renderHeader(), renderContent());
-};
-const ExpandedFrameWithFG = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', ExpandedFrameUpdated, ExpandedFrame);
-export { ExpandedFrameWithFG as ExpandedFrame };
+};