@atlaskit/smart-card 30.2.2 → 30.2.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/smart-card
 
+## 30.2.4
+
+### Patch Changes
+
+- [#161848](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161848)
+  [`b3284704393ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b3284704393ce) -
+  Migrate analytics for smartlinkiframe
+
+## 30.2.3
+
+### Patch Changes
+
+- [#163278](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163278)
+  [`fbaa7de32c0b2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fbaa7de32c0b2) -
+  Update FlexibleCard block prop children types
+
 ## 30.2.2
 
 ### Patch Changes

package/analytics.spec.yaml

@@ -2,22 +2,33 @@ common:
   product: media
 
 context:
-  PackageMetaData: &PackageMetaDataContext
+  PackageMetaDataContext: &PackageMetaDataContext
     packageName:
       type: string
       description: name of the package the event was fired from
     packageVersion:
       type: string
       description: version of the package the event was fired from
-
-  ResolvedAttributes: &ResolvedAttributes
+  ResolvedContext: &ResolvedContext
     status:
-      type: ['pending', 'resolving', 'resolved', 'errored', 'fallback', 'unauthorized', 'forbidden', 'not_found']
+      type:
+        [
+          'pending',
+          'resolving',
+          'resolved',
+          'errored',
+          'fallback',
+          'unauthorized',
+          'forbidden',
+          'not_found',
+        ]
       description: The status of the link resolution at the time of the event.
       required: false
     statusDetails:
       type: string
-      description: Provides further information of the resolved status. May be different for different status values
+      description:
+        Provides further information of the resolved status. May be different for different status
+        values
       required: false
     displayCategory:
       type: ['smartLink', 'link']
@@ -72,36 +83,40 @@ context:
       required: false
       description: An indicator that a link can be converted to datasource view
 
-aiInteractionAttributes: &aiInteractionAttributes
+attributes:
+  AiInteractionAttributes: &AiInteractionAttributes
     aiFeatureName:
       type: string
       description: The name of the AI feature as shared with AI team
     proactiveAIGenerated:
       type: number
-      description: Attribute that captures the fact that an AI generated result was proactively served to a user.
+      description:
+        Attribute that captures the fact that an AI generated result was proactively served to a
+        user.
     userGeneratedAI:
       type: number
-      description: Attribute that captures the fact that a user interaction with a feature lead to generation of an AI result.
-
+      description:
+        Attribute that captures the fact that a user interaction with a feature lead to generation
+        of an AI result.
 
 events:
   - button clicked (aiSummary):
       type: ui
       description: fired when an ai summary is clicked
       attributes:
-        <<: [*PackageMetaDataContext, *ResolvedAttributes]
+        <<: [*PackageMetaDataContext, *ResolvedContext]
 
   - button clicked (copySummary):
       type: ui
       description: fired when the copy ai summary button is clicked
       attributes:
-        <<: [*PackageMetaDataContext, *ResolvedAttributes]
+        <<: [*PackageMetaDataContext, *ResolvedContext]
 
   - summary viewed:
       type: ui
       description: fired when a summary is viewed
       attributes:
-        <<: [*PackageMetaDataContext, *ResolvedAttributes]
+        <<: [*PackageMetaDataContext, *ResolvedContext]
         fromCache:
           required: false
           type: boolean
@@ -111,19 +126,19 @@ events:
       type: ui
       description: fired when a summary error is viewed
       attributes:
-        <<: [*PackageMetaDataContext, *ResolvedAttributes]
+        <<: [*PackageMetaDataContext, *ResolvedContext]
 
   - summary success:
       type: operational
       description: fired when a summary request finishes with a successful response
       attributes:
-        <<: [*PackageMetaDataContext, *ResolvedAttributes]
+        <<: [*PackageMetaDataContext, *ResolvedContext]
 
   - summary failed:
       type: operational
       description: fired when a summary request finishes with a failed response
       attributes:
-        <<: [*PackageMetaDataContext, *ResolvedAttributes]
+        <<: [*PackageMetaDataContext, *ResolvedContext]
         reason:
           required: false
           type: string
@@ -133,36 +148,35 @@ events:
           type: boolean
           description: True if the error should be counted towards the SLO.
 
-
   - aiInteraction initiated:
       type: track
       description: fired when an explicit request is made to use an AI-powered feature
       attributes:
-        <<: [*PackageMetaDataContext, *aiInteractionAttributes]
+        <<: [*PackageMetaDataContext, *AiInteractionAttributes]
 
   - button clicked (automationAction):
       type: ui
       description: fired when the automation action button is clicked
       attributes:
-        <<: [*PackageMetaDataContext, *ResolvedAttributes]
+        <<: [*PackageMetaDataContext, *ResolvedContext]
 
   - button clicked (relatedLinks):
       type: ui
       description: fired when the related links action button is clicked
       attributes:
-        <<: [*PackageMetaDataContext, *ResolvedAttributes]
+        <<: [*PackageMetaDataContext, *ResolvedContext]
 
   - modal opened (relatedLinks):
       type: ui
       description: fired when related links modal is opened
       attributes:
-        <<: [*PackageMetaDataContext, *ResolvedAttributes]
+        <<: [*PackageMetaDataContext, *ResolvedContext]
 
   - modal closed (relatedLinks):
       type: ui
       description: fired when related links modal is closed
       attributes:
-        <<: [*PackageMetaDataContext, *ResolvedAttributes]
+        <<: [*PackageMetaDataContext, *ResolvedContext]
         dwellTime:
           required: true
           type: number
@@ -170,9 +184,9 @@ events:
 
   - relatedLinks success:
       type: operational
-      description: fired when related links are retrieved succesfully
+      description: fired when related links are retrieved successfully
       attributes:
-        <<: [*PackageMetaDataContext, *ResolvedAttributes]
+        <<: [*PackageMetaDataContext, *ResolvedContext]
         incomingCount:
           type: number
           required: true
@@ -186,8 +200,57 @@ events:
       type: operational
       description: fired when related links retrieval fails
       attributes:
-        <<: [*PackageMetaDataContext, *ResolvedAttributes]
+        <<: [*PackageMetaDataContext, *ResolvedContext]
         reason:
           required: true
           type: string
           description: failure reason
+  - smartLinkIframe dwelled:
+      type: ui
+      description: fired when a user dwells their cursor on a Smart Link's iframe
+      attributes:
+        <<: [*PackageMetaDataContext, *ResolvedContext]
+        id:
+          required: true
+          type: string
+          description: The unique ID for this Smart Link
+        display:
+          required: true
+          type: ['inline', 'block', 'embed', 'embedPreview', 'flexible', 'hoverCardPreview']
+          description: Whether the card was an Inline, Block, Embed or Flexible UI
+        definitionId:
+          required: false
+          type: string
+          description: The definitionId of the Smart Link resolver invoked.
+        location:
+          required: false
+          type: string
+          description: Where the Smart Link is currently rendered
+        dwellTime:
+          required: true
+          type: number
+          description: Total seconds that the user has dwelled on this iframe
+        dwellPercentVisible:
+          required: true
+          type: number
+          description: Percentage element was visible at end of dwell
+  - smartLinkIframe focus:
+      type: ui
+      description: fires when a user clicks or tabs into a Smart Link's iframe.
+      attributes:
+        id:
+          required: true
+          type: string
+          description: The unique ID for this Smart Link.
+        display:
+          required: true
+          type: ['inline', 'block', 'embed', 'embedPreview', 'flexible', 'hoverCardPreview']
+          description: Whether the card was an Inline, Block, Embed or Flexible UI.
+        definitionId:
+          required: false
+          type: string
+          description: The definitionId of the Smart Link resolver invoked.
+        location:
+          required: false
+          type: string
+          description: Where the Smart Link is currently rendered.

package/dist/cjs/state/analytics/useSmartLinkAnalytics.js

@@ -36,7 +36,6 @@ var applyCommonAttributes = function applyCommonAttributes(event, commonAttribut
  * Can be provided to Card via the analyticsEvents prop to change the analytics events.
  *
  * @param url URL of the link
- * @param dispatchAnalytics dispatchAnalytics function
  * @param id fallback id of the events sent if no id is available
  * @param defaultLocation location attribute to be used
  * @returns
@@ -187,6 +186,7 @@ var useSmartLinkAnalytics = exports.useSmartLinkAnalytics = function useSmartLin
        * @param dwellTime Total seconds that the user has dwelled on this iframe
        * @param dwellPercentVisible Percentage element was visible at end of dwell
        * @returns
+       * @deprecated
        */
       iframeDwelledEvent: function iframeDwelledEvent(_ref4) {
         var id = _ref4.id,
@@ -222,6 +222,7 @@ var useSmartLinkAnalytics = exports.useSmartLinkAnalytics = function useSmartLin
        * @param location Where the Smart Link is currently rendered.
        * @param destinationProduct The product the Smart Link is linked to.
        * @returns
+       * @deprecated
        */
       iframeFocusedEvent: function iframeFocusedEvent(_ref5) {
         var id = _ref5.id,

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

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

package/dist/cjs/view/BlockCard/views/flexible/utils/index.js

@@ -91,7 +91,7 @@ var getSimulatedBetterMetadata = exports.getSimulatedBetterMetadata = function g
         }, {
           name: _constants.ElementName.ModifiedOn
         }];
-      } else if (isJiraPlan && (0, _platformFeatureFlags.fg)('smart_links_for_plans')) {
+      } else if (isJiraPlan && (0, _platformFeatureFlags.fg)('smart_links_for_plans_platform')) {
         topMetadata = [{
           name: _constants.ElementName.OwnedByGroup
         }, {

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

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.CardWithUrlContent = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useAnalyticsEvents2 = require("../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../constants");
 var _state = require("../../state");
 var _helpers = require("../../state/helpers");
@@ -51,8 +53,10 @@ function Component(_ref) {
     removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
     resolvingPlaceholder = _ref.resolvingPlaceholder,
     truncateInline = _ref.truncateInline;
-  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
-    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useAnalyticsEventsNe = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
 
   // Get state, actions for this card.
   var _useSmartLink = (0, _state.useSmartLink)(id, url),
@@ -156,29 +160,49 @@ function Component(_ref) {
     }
   }, [isFlexibleUi, appearance, state.status, url, definitionId, extensionKey, analytics.ui, id, canBeDatasource]);
   var onIframeDwell = (0, _react.useCallback)(function (dwellTime, dwellPercentVisible) {
-    analytics.ui.iframeDwelledEvent({
-      id: id,
-      display: isFlexibleUi ? 'flexible' : appearance,
-      status: state.status,
-      definitionId: definitionId,
-      extensionKey: extensionKey,
-      destinationProduct: product,
-      destinationSubproduct: subproduct,
-      dwellTime: dwellTime,
-      dwellPercentVisible: dwellPercentVisible
-    });
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct]);
+    if ((0, _platformFeatureFlags.fg)('smart-card-migrate-smartlinkiframe-analytics')) {
+      fireEvent('ui.smartLinkIframe.dwelled', {
+        id: id,
+        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+        location: null,
+        display: isFlexibleUi ? 'flexible' : appearance,
+        dwellPercentVisible: dwellPercentVisible,
+        dwellTime: dwellTime
+      });
+    } else {
+      analytics.ui.iframeDwelledEvent({
+        id: id,
+        display: isFlexibleUi ? 'flexible' : appearance,
+        status: state.status,
+        definitionId: definitionId,
+        extensionKey: extensionKey,
+        destinationProduct: product,
+        destinationSubproduct: subproduct,
+        dwellTime: dwellTime,
+        dwellPercentVisible: dwellPercentVisible
+      });
+    }
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct, fireEvent]);
   var onIframeFocus = (0, _react.useCallback)(function () {
-    analytics.ui.iframeFocusedEvent({
-      id: id,
-      display: isFlexibleUi ? 'flexible' : appearance,
-      status: state.status,
-      definitionId: definitionId,
-      extensionKey: extensionKey,
-      destinationProduct: product,
-      destinationSubproduct: subproduct
-    });
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct]);
+    if ((0, _platformFeatureFlags.fg)('smart-card-migrate-smartlinkiframe-analytics')) {
+      fireEvent('ui.smartLinkIframe.focus', {
+        id: id,
+        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+        location: null,
+        display: isFlexibleUi ? 'flexible' : appearance
+      });
+    } else {
+      analytics.ui.iframeFocusedEvent({
+        id: id,
+        display: isFlexibleUi ? 'flexible' : appearance,
+        status: state.status,
+        definitionId: definitionId,
+        extensionKey: extensionKey,
+        destinationProduct: product,
+        destinationSubproduct: subproduct
+      });
+    }
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct, fireEvent]);
   if (isFlexibleUi) {
     var cardState = state;
     if (error) {

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

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

package/dist/es2019/state/analytics/useSmartLinkAnalytics.js

@@ -22,7 +22,6 @@ const applyCommonAttributes = (event, commonAttributes) => {
  * Can be provided to Card via the analyticsEvents prop to change the analytics events.
  *
  * @param url URL of the link
- * @param dispatchAnalytics dispatchAnalytics function
  * @param id fallback id of the events sent if no id is available
  * @param defaultLocation location attribute to be used
  * @returns
@@ -170,6 +169,7 @@ export const useSmartLinkAnalytics = (url, id, defaultLocation) => {
      * @param dwellTime Total seconds that the user has dwelled on this iframe
      * @param dwellPercentVisible Percentage element was visible at end of dwell
      * @returns
+     * @deprecated
      */
     iframeDwelledEvent: ({
       id,
@@ -204,6 +204,7 @@ export const useSmartLinkAnalytics = (url, id, defaultLocation) => {
      * @param location Where the Smart Link is currently rendered.
      * @param destinationProduct The product the Smart Link is linked to.
      * @returns
+     * @deprecated
      */
     iframeFocusedEvent: ({
       id,

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

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

package/dist/es2019/view/BlockCard/views/flexible/utils/index.js

@@ -85,7 +85,7 @@ export const getSimulatedBetterMetadata = cardDetails => {
         }, {
           name: ElementName.ModifiedOn
         }];
-      } else if (isJiraPlan && fg('smart_links_for_plans')) {
+      } else if (isJiraPlan && fg('smart_links_for_plans_platform')) {
         topMetadata = [{
           name: ElementName.OwnedByGroup
         }, {

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

@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CardDisplay } from '../../constants';
 import { useSmartLink } from '../../state';
 import { getCanBeDatasource, getClickUrl, getDefinitionId, getExtensionKey, getProduct, getResourceType, getServices, getSubproduct, isFinalState } from '../../state/helpers';
@@ -44,6 +46,9 @@ function Component({
 }) {
   const {
     createAnalyticsEvent
+  } = useAnalyticsEventsNext();
+  const {
+    fireEvent
   } = useAnalyticsEvents();
 
   // Get state, actions for this card.
@@ -143,29 +148,49 @@ function Component({
     }
   }, [isFlexibleUi, appearance, state.status, url, definitionId, extensionKey, analytics.ui, id, canBeDatasource]);
   const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
-    analytics.ui.iframeDwelledEvent({
-      id,
-      display: isFlexibleUi ? 'flexible' : appearance,
-      status: state.status,
-      definitionId,
-      extensionKey,
-      destinationProduct: product,
-      destinationSubproduct: subproduct,
-      dwellTime: dwellTime,
-      dwellPercentVisible: dwellPercentVisible
-    });
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct]);
+    if (fg('smart-card-migrate-smartlinkiframe-analytics')) {
+      fireEvent('ui.smartLinkIframe.dwelled', {
+        id,
+        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+        location: null,
+        display: isFlexibleUi ? 'flexible' : appearance,
+        dwellPercentVisible,
+        dwellTime
+      });
+    } else {
+      analytics.ui.iframeDwelledEvent({
+        id,
+        display: isFlexibleUi ? 'flexible' : appearance,
+        status: state.status,
+        definitionId,
+        extensionKey,
+        destinationProduct: product,
+        destinationSubproduct: subproduct,
+        dwellTime: dwellTime,
+        dwellPercentVisible: dwellPercentVisible
+      });
+    }
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct, fireEvent]);
   const onIframeFocus = useCallback(() => {
-    analytics.ui.iframeFocusedEvent({
-      id,
-      display: isFlexibleUi ? 'flexible' : appearance,
-      status: state.status,
-      definitionId,
-      extensionKey,
-      destinationProduct: product,
-      destinationSubproduct: subproduct
-    });
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct]);
+    if (fg('smart-card-migrate-smartlinkiframe-analytics')) {
+      fireEvent('ui.smartLinkIframe.focus', {
+        id,
+        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+        location: null,
+        display: isFlexibleUi ? 'flexible' : appearance
+      });
+    } else {
+      analytics.ui.iframeFocusedEvent({
+        id,
+        display: isFlexibleUi ? 'flexible' : appearance,
+        status: state.status,
+        definitionId,
+        extensionKey,
+        destinationProduct: product,
+        destinationSubproduct: subproduct
+      });
+    }
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct, fireEvent]);
   if (isFlexibleUi) {
     let cardState = state;
     if (error) {

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

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

package/dist/esm/state/analytics/useSmartLinkAnalytics.js

@@ -29,7 +29,6 @@ var applyCommonAttributes = function applyCommonAttributes(event, commonAttribut
  * Can be provided to Card via the analyticsEvents prop to change the analytics events.
  *
  * @param url URL of the link
- * @param dispatchAnalytics dispatchAnalytics function
  * @param id fallback id of the events sent if no id is available
  * @param defaultLocation location attribute to be used
  * @returns
@@ -180,6 +179,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, id, defau
        * @param dwellTime Total seconds that the user has dwelled on this iframe
        * @param dwellPercentVisible Percentage element was visible at end of dwell
        * @returns
+       * @deprecated
        */
       iframeDwelledEvent: function iframeDwelledEvent(_ref4) {
         var id = _ref4.id,
@@ -215,6 +215,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, id, defau
        * @param location Where the Smart Link is currently rendered.
        * @param destinationProduct The product the Smart Link is linked to.
        * @returns
+       * @deprecated
        */
       iframeFocusedEvent: function iframeFocusedEvent(_ref5) {
         var id = _ref5.id,

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

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

package/dist/esm/view/BlockCard/views/flexible/utils/index.js

@@ -85,7 +85,7 @@ export var getSimulatedBetterMetadata = function getSimulatedBetterMetadata(card
         }, {
           name: ElementName.ModifiedOn
         }];
-      } else if (isJiraPlan && fg('smart_links_for_plans')) {
+      } else if (isJiraPlan && fg('smart_links_for_plans_platform')) {
         topMetadata = [{
           name: ElementName.OwnedByGroup
         }, {

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

@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CardDisplay } from '../../constants';
 import { useSmartLink } from '../../state';
 import { getCanBeDatasource, getClickUrl, getDefinitionId, getExtensionKey, getProduct, getResourceType, getServices, getSubproduct, isFinalState } from '../../state/helpers';
@@ -41,8 +43,10 @@ function Component(_ref) {
     removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
     resolvingPlaceholder = _ref.resolvingPlaceholder,
     truncateInline = _ref.truncateInline;
+  var _useAnalyticsEventsNe = useAnalyticsEventsNext(),
+    createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
   var _useAnalyticsEvents = useAnalyticsEvents(),
-    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+    fireEvent = _useAnalyticsEvents.fireEvent;
 
   // Get state, actions for this card.
   var _useSmartLink = useSmartLink(id, url),
@@ -146,29 +150,49 @@ function Component(_ref) {
     }
   }, [isFlexibleUi, appearance, state.status, url, definitionId, extensionKey, analytics.ui, id, canBeDatasource]);
   var onIframeDwell = useCallback(function (dwellTime, dwellPercentVisible) {
-    analytics.ui.iframeDwelledEvent({
-      id: id,
-      display: isFlexibleUi ? 'flexible' : appearance,
-      status: state.status,
-      definitionId: definitionId,
-      extensionKey: extensionKey,
-      destinationProduct: product,
-      destinationSubproduct: subproduct,
-      dwellTime: dwellTime,
-      dwellPercentVisible: dwellPercentVisible
-    });
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct]);
+    if (fg('smart-card-migrate-smartlinkiframe-analytics')) {
+      fireEvent('ui.smartLinkIframe.dwelled', {
+        id: id,
+        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+        location: null,
+        display: isFlexibleUi ? 'flexible' : appearance,
+        dwellPercentVisible: dwellPercentVisible,
+        dwellTime: dwellTime
+      });
+    } else {
+      analytics.ui.iframeDwelledEvent({
+        id: id,
+        display: isFlexibleUi ? 'flexible' : appearance,
+        status: state.status,
+        definitionId: definitionId,
+        extensionKey: extensionKey,
+        destinationProduct: product,
+        destinationSubproduct: subproduct,
+        dwellTime: dwellTime,
+        dwellPercentVisible: dwellPercentVisible
+      });
+    }
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct, fireEvent]);
   var onIframeFocus = useCallback(function () {
-    analytics.ui.iframeFocusedEvent({
-      id: id,
-      display: isFlexibleUi ? 'flexible' : appearance,
-      status: state.status,
-      definitionId: definitionId,
-      extensionKey: extensionKey,
-      destinationProduct: product,
-      destinationSubproduct: subproduct
-    });
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct]);
+    if (fg('smart-card-migrate-smartlinkiframe-analytics')) {
+      fireEvent('ui.smartLinkIframe.focus', {
+        id: id,
+        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+        location: null,
+        display: isFlexibleUi ? 'flexible' : appearance
+      });
+    } else {
+      analytics.ui.iframeFocusedEvent({
+        id: id,
+        display: isFlexibleUi ? 'flexible' : appearance,
+        status: state.status,
+        definitionId: definitionId,
+        extensionKey: extensionKey,
+        destinationProduct: product,
+        destinationSubproduct: subproduct
+      });
+    }
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct, fireEvent]);
   if (isFlexibleUi) {
     var cardState = state;
     if (error) {

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

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

package/dist/types/common/analytics/generated/analytics.types.d.ts

@@ -3,14 +3,14 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::b519212dc7ce398897c4e790498adb64>>
+ * @codegen <<SignedSource::86bf439a8a42bc5afbfacd43626136ae>>
  * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen smart-card
  */
-export type PackageMetaDataType = {
+export type PackageMetaDataContextType = {
     packageName: string;
     packageVersion: string;
 };
-export type ResolvedAttributesType = {
+export type ResolvedContextType = {
     status: 'pending' | 'resolving' | 'resolved' | 'errored' | 'fallback' | 'unauthorized' | 'forbidden' | 'not_found' | null;
     statusDetails: string | null;
     displayCategory: 'smartLink' | 'link';
@@ -53,6 +53,20 @@ export type RelatedLinksSuccessAttributesType = {
 export type RelatedLinksFailedAttributesType = {
     reason: string;
 };
+export type SmartLinkIframeDwelledAttributesType = {
+    id: string;
+    display: 'inline' | 'block' | 'embed' | 'embedPreview' | 'flexible' | 'hoverCardPreview';
+    definitionId: string | null;
+    location: string | null;
+    dwellTime: number;
+    dwellPercentVisible: number;
+};
+export type SmartLinkIframeFocusAttributesType = {
+    id: string;
+    display: 'inline' | 'block' | 'embed' | 'embedPreview' | 'flexible' | 'hoverCardPreview';
+    definitionId: string | null;
+    location: string | null;
+};
 export type AnalyticsEventAttributes = {
     /**
      * fired when an ai summary is clicked */
@@ -88,10 +102,16 @@ export type AnalyticsEventAttributes = {
      * fired when related links modal is closed */
     'ui.modal.closed.relatedLinks': ModalClosedRelatedLinksAttributesType;
     /**
-     * fired when related links are retrieved succesfully */
+     * fired when related links are retrieved successfully */
     'operational.relatedLinks.success': RelatedLinksSuccessAttributesType;
     /**
      * fired when related links retrieval fails */
     'operational.relatedLinks.failed': RelatedLinksFailedAttributesType;
+    /**
+     * fired when a user dwells their cursor on a Smart Link's iframe */
+    'ui.smartLinkIframe.dwelled': SmartLinkIframeDwelledAttributesType;
+    /**
+     * fires when a user clicks or tabs into a Smart Link's iframe. */
+    'ui.smartLinkIframe.focus': SmartLinkIframeFocusAttributesType;
 };
 export type EventKey = keyof AnalyticsEventAttributes;

package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts

@@ -7,7 +7,6 @@ import { type AnalyticsName, type AnalyticsPayload } from '../../utils/types';
  * Can be provided to Card via the analyticsEvents prop to change the analytics events.
  *
  * @param url URL of the link
- * @param dispatchAnalytics dispatchAnalytics function
  * @param id fallback id of the events sent if no id is available
  * @param defaultLocation location attribute to be used
  * @returns
@@ -65,6 +64,7 @@ export declare const useSmartLinkAnalytics: (url: string, id?: string, defaultLo
          * @param dwellTime Total seconds that the user has dwelled on this iframe
          * @param dwellPercentVisible Percentage element was visible at end of dwell
          * @returns
+         * @deprecated
          */
         iframeDwelledEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, dwellTime, dwellPercentVisible, }: UiIframeDwelledEventProps) => void;
         /**
@@ -77,6 +77,7 @@ export declare const useSmartLinkAnalytics: (url: string, id?: string, defaultLo
          * @param location Where the Smart Link is currently rendered.
          * @param destinationProduct The product the Smart Link is linked to.
          * @returns
+         * @deprecated
          */
         iframeFocusedEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, }: UiIframeFocusedEventProps) => void;
         /**

package/dist/types/view/FlexibleCard/components/blocks/related-urls-block/resolving/index.d.ts

@@ -1,16 +1,5 @@
-import React from 'react';
+/// <reference types="react" />
 import { type BlockProps } from '../../types';
-export declare const RelatedUrlsBlockResolvingView: ({ testId, ...blockProps }: {
-    direction?: import("../../../../../..").SmartLinkDirection | undefined;
-    overrideCss?: import("@emotion/serialize").SerializedStyles | undefined;
-    size?: import("../../../../../..").SmartLinkSize | undefined;
-    status?: import("../../../../../../constants").SmartLinkStatus | undefined;
-    testId?: string | undefined;
-    blockRef?: React.Ref<HTMLDivElement> | undefined;
-    onRender?: (() => void) | undefined;
-    onTransitionEnd?: (() => void) | undefined;
-} & {
-    children?: React.ReactNode;
-} & {
+export declare const RelatedUrlsBlockResolvingView: ({ testId, ...blockProps }: BlockProps & {
     testId?: string | undefined;
 }) => JSX.Element;

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

@@ -1,16 +1,22 @@
-import { type PropsWithChildren, type Ref } from 'react';
+import { type ReactNode, type Ref } from 'react';
 import { type SerializedStyles } from '@emotion/react';
 import { type ActionName, type ElementName, type SmartLinkDirection, type SmartLinkSize, type SmartLinkStatus } from '../../../../constants';
 import { type ActionProps } from '../actions/action/types';
-export type BlockProps = PropsWithChildren<{
+export type BlockProps = {
     /**
-     * The direction that the block should arrange it's elements. Can be vertical
+     * React children
+     */
+    children?: ReactNode | undefined;
+    /**
+     * The direction that the block should arrange its elements. Can be vertical
      * or horizontal. Default is horizontal.
      * @internal
      */
     direction?: SmartLinkDirection;
     /**
      * Any additional CSS properties to apply to the block.
+     * The use of this prop is **strongly** discouraged.
+     * `@emotion/react` will be replaced with compiled.
      */
     overrideCss?: SerializedStyles;
     /**
@@ -44,7 +50,7 @@ export type BlockProps = PropsWithChildren<{
      * @internal
      */
     onTransitionEnd?: () => void;
-}>;
+};
 /**
  * Used to represent a metadata element to be rendered.
  */

package/dist/types-ts4.5/common/analytics/generated/analytics.types.d.ts

@@ -3,14 +3,14 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::b519212dc7ce398897c4e790498adb64>>
+ * @codegen <<SignedSource::86bf439a8a42bc5afbfacd43626136ae>>
  * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen smart-card
  */
-export type PackageMetaDataType = {
+export type PackageMetaDataContextType = {
     packageName: string;
     packageVersion: string;
 };
-export type ResolvedAttributesType = {
+export type ResolvedContextType = {
     status: 'pending' | 'resolving' | 'resolved' | 'errored' | 'fallback' | 'unauthorized' | 'forbidden' | 'not_found' | null;
     statusDetails: string | null;
     displayCategory: 'smartLink' | 'link';
@@ -53,6 +53,20 @@ export type RelatedLinksSuccessAttributesType = {
 export type RelatedLinksFailedAttributesType = {
     reason: string;
 };
+export type SmartLinkIframeDwelledAttributesType = {
+    id: string;
+    display: 'inline' | 'block' | 'embed' | 'embedPreview' | 'flexible' | 'hoverCardPreview';
+    definitionId: string | null;
+    location: string | null;
+    dwellTime: number;
+    dwellPercentVisible: number;
+};
+export type SmartLinkIframeFocusAttributesType = {
+    id: string;
+    display: 'inline' | 'block' | 'embed' | 'embedPreview' | 'flexible' | 'hoverCardPreview';
+    definitionId: string | null;
+    location: string | null;
+};
 export type AnalyticsEventAttributes = {
     /**
      * fired when an ai summary is clicked */
@@ -88,10 +102,16 @@ export type AnalyticsEventAttributes = {
      * fired when related links modal is closed */
     'ui.modal.closed.relatedLinks': ModalClosedRelatedLinksAttributesType;
     /**
-     * fired when related links are retrieved succesfully */
+     * fired when related links are retrieved successfully */
     'operational.relatedLinks.success': RelatedLinksSuccessAttributesType;
     /**
      * fired when related links retrieval fails */
     'operational.relatedLinks.failed': RelatedLinksFailedAttributesType;
+    /**
+     * fired when a user dwells their cursor on a Smart Link's iframe */
+    'ui.smartLinkIframe.dwelled': SmartLinkIframeDwelledAttributesType;
+    /**
+     * fires when a user clicks or tabs into a Smart Link's iframe. */
+    'ui.smartLinkIframe.focus': SmartLinkIframeFocusAttributesType;
 };
 export type EventKey = keyof AnalyticsEventAttributes;

package/dist/types-ts4.5/state/analytics/useSmartLinkAnalytics.d.ts

@@ -7,7 +7,6 @@ import { type AnalyticsName, type AnalyticsPayload } from '../../utils/types';
  * Can be provided to Card via the analyticsEvents prop to change the analytics events.
  *
  * @param url URL of the link
- * @param dispatchAnalytics dispatchAnalytics function
  * @param id fallback id of the events sent if no id is available
  * @param defaultLocation location attribute to be used
  * @returns
@@ -65,6 +64,7 @@ export declare const useSmartLinkAnalytics: (url: string, id?: string, defaultLo
          * @param dwellTime Total seconds that the user has dwelled on this iframe
          * @param dwellPercentVisible Percentage element was visible at end of dwell
          * @returns
+         * @deprecated
          */
         iframeDwelledEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, dwellTime, dwellPercentVisible, }: UiIframeDwelledEventProps) => void;
         /**
@@ -77,6 +77,7 @@ export declare const useSmartLinkAnalytics: (url: string, id?: string, defaultLo
          * @param location Where the Smart Link is currently rendered.
          * @param destinationProduct The product the Smart Link is linked to.
          * @returns
+         * @deprecated
          */
         iframeFocusedEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, }: UiIframeFocusedEventProps) => void;
         /**

package/dist/types-ts4.5/view/FlexibleCard/components/blocks/related-urls-block/resolving/index.d.ts

@@ -1,16 +1,5 @@
-import React from 'react';
+/// <reference types="react" />
 import { type BlockProps } from '../../types';
-export declare const RelatedUrlsBlockResolvingView: ({ testId, ...blockProps }: {
-    direction?: import("../../../../../..").SmartLinkDirection | undefined;
-    overrideCss?: import("@emotion/serialize").SerializedStyles | undefined;
-    size?: import("../../../../../..").SmartLinkSize | undefined;
-    status?: import("../../../../../../constants").SmartLinkStatus | undefined;
-    testId?: string | undefined;
-    blockRef?: React.Ref<HTMLDivElement> | undefined;
-    onRender?: (() => void) | undefined;
-    onTransitionEnd?: (() => void) | undefined;
-} & {
-    children?: React.ReactNode;
-} & {
+export declare const RelatedUrlsBlockResolvingView: ({ testId, ...blockProps }: BlockProps & {
     testId?: string | undefined;
 }) => JSX.Element;

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

@@ -1,16 +1,22 @@
-import { type PropsWithChildren, type Ref } from 'react';
+import { type ReactNode, type Ref } from 'react';
 import { type SerializedStyles } from '@emotion/react';
 import { type ActionName, type ElementName, type SmartLinkDirection, type SmartLinkSize, type SmartLinkStatus } from '../../../../constants';
 import { type ActionProps } from '../actions/action/types';
-export type BlockProps = PropsWithChildren<{
+export type BlockProps = {
     /**
-     * The direction that the block should arrange it's elements. Can be vertical
+     * React children
+     */
+    children?: ReactNode | undefined;
+    /**
+     * The direction that the block should arrange its elements. Can be vertical
      * or horizontal. Default is horizontal.
      * @internal
      */
     direction?: SmartLinkDirection;
     /**
      * Any additional CSS properties to apply to the block.
+     * The use of this prop is **strongly** discouraged.
+     * `@emotion/react` will be replaced with compiled.
      */
     overrideCss?: SerializedStyles;
     /**
@@ -44,7 +50,7 @@ export type BlockProps = PropsWithChildren<{
      * @internal
      */
     onTransitionEnd?: () => void;
-}>;
+};
 /**
  * Used to represent a metadata element to be rendered.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "30.2.2",
+	"version": "30.2.4",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -171,7 +171,10 @@
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
 		},
-		"smart_links_for_plans": {
+		"smart_links_for_plans_platform": {
+			"type": "boolean"
+		},
+		"smart-card-migrate-smartlinkiframe-analytics": {
 			"type": "boolean"
 		}
 	}