@atlaskit/smart-card 44.25.1 → 44.26.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/smart-card
 
+## 44.26.1
+
+### Patch Changes
+
+- [`299e30381fd33`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/299e30381fd33) -
+  Update anchor href with cross-product analytics
+- [`6d0485dce81c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d0485dce81c4) -
+  Internal: updated to the new `@atlaskit/top-layer` `Popover`/`Dialog` behaviour where the host
+  element unmounts after the exit animation completes. No consumer action required.
+- Updated dependencies
+
+## 44.26.0
+
+### Minor Changes
+
+- [`92da883bae00d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/92da883bae00d) -
+  Add `useSmartLinkDestinationUrl` hook via new entry point
+  `@atlaskit/smart-card/hook/use-smart-link-destination-url`.
+
+  The hook resolves the XPC-wrapped destination URL for a given Smart Link URL behind the
+  `platform_smartlink_xpc_url_wrapping` feature gate. When the gate is off or the link has not yet
+  resolved, it falls back gracefully to the original URL. This enables consumers (e.g. editor
+  toolbar and overlays) to open the cross-product-parameter-enriched URL without re-implementing
+  SmartCard's internal URL resolution logic.
+
+### Patch Changes
+
+- [`9b6eb080bfa56`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9b6eb080bfa56) -
+  Keep inline Smart Link social proof CTAs together in narrow containers.
+
+  All changes behind feature gate: platform_lp_social_proof_inline_overflow_bug. No public API
+  change.
+
 ## 44.25.1
 
 ### Patch Changes

package/dist/cjs/__tests__/vr-tests/__snapshots__/inline-card/inline-card-unauthorised-with-social-proof-in-narrow-container--default--platform-lp-social-proof-inline-overflow-bug-false.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7e92f235ef67cfff425c2768c61c1501f8d5daa6e0418075997c0de015ea18b2
+size 35855

package/dist/cjs/__tests__/vr-tests/__snapshots__/inline-card/inline-card-unauthorised-with-social-proof-in-narrow-container--default--platform-lp-social-proof-inline-overflow-bug-true.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1ee2641306bded4b5e90d1b509fa83e697a55b5eddb2bda5480fc7c50b0ddcf2
+size 36106

package/dist/cjs/entry-points/hook-use-smart-link-destination-url.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useSmartLinkDestinationUrl", {
+  enumerable: true,
+  get: function get() {
+    return _useDestinationUrl.useDestinationUrl;
+  }
+});
+var _useDestinationUrl = require("../state/hooks/use-destination-url");

package/dist/cjs/state/hooks/use-destination-url/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDestinationUrl = void 0;
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _helpers = require("../../helpers");
+var _store = require("../../store");
+var _useSmartLinkCrossProductUrlWrapper = require("../use-smart-link-cross-product-url-wrapper");
+/**
+ * Returns the resolved destination URL for a Smart Link, with cross-product analytics
+ * parameters appended when the `platform_smartlink_xpc_url_wrapping` feature gate is enabled.
+ *
+ * This is the same URL that SmartCard would navigate to when clicked. Use this as an `href`
+ * wherever you render a link to a Smart Link URL outside of the SmartCard component itself
+ * (e.g. toolbar buttons, overlays).
+ *
+ * Falls back to the raw `url` when:
+ * - The link has not yet resolved
+ * - The feature gate is disabled
+ * - The link is not a first-party Atlassian link
+ *
+ * @example
+ * const href = useSmartLinkDestinationUrl(url);
+ *
+ * Use as <a href={href} target="_blank">Open link</a>
+ */
+var useDestinationUrlImplementation = function useDestinationUrlImplementation(url) {
+  var state = (0, _store.useSmartCardState)(url);
+  var appendCrossProductAnalyticsParams = (0, _useSmartLinkCrossProductUrlWrapper.useSmartLinkCrossProductUrlWrapper)({
+    details: state.details
+  });
+  var resolvedUrl = (0, _helpers.getClickUrl)(url, state.details);
+  return appendCrossProductAnalyticsParams(resolvedUrl);
+};
+var useDestinationUrl = exports.useDestinationUrl = (0, _platformFeatureFlagsReact.functionWithFG)('platform_smartlink_xpc_url_wrapping', useDestinationUrlImplementation, function (url) {
+  return url;
+});

package/dist/cjs/state/hooks/use-smart-link-cross-product-url-wrapper/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSmartLinkCrossProductUrlWrapperGated = exports.getIsFirstPartyLink = void 0;
+exports.useSmartLinkCrossProductUrlWrapperGated = exports.useSmartLinkCrossProductUrlWrapper = exports.getIsFirstPartyLink = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _useCrossProductUrlWrapper = require("@atlaskit/analytics-cross-product/useCrossProductUrlWrapper");
@@ -24,7 +24,7 @@ var identityUrlWrapper = function identityUrlWrapper(url) {
 var useSmartLinkCrossProductUrlWrapperFallback = function useSmartLinkCrossProductUrlWrapperFallback(_args) {
   return identityUrlWrapper;
 };
-var useSmartLinkCrossProductUrlWrapper = function useSmartLinkCrossProductUrlWrapper(_ref) {
+var useSmartLinkCrossProductUrlWrapper = exports.useSmartLinkCrossProductUrlWrapper = function useSmartLinkCrossProductUrlWrapper(_ref) {
   var _effectiveProduct$toL;
   var details = _ref.details;
   var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),

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

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

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

@@ -112,6 +112,21 @@ function Component(_ref) {
 
   // Shared scope guard for all 3P-click handlers.
   var shouldFire3PClickEvent = thirdPartyARI && thirdPartyARI.startsWith(thirdPartyARIPrefix) && (0, _helpers.getClickUrl)(url, state.details) === url && fire3PClickEvent && (0, _platformFeatureFlags.fg)('platform_smartlink_3pclick_analytics');
+  var getDestinationUrl = (0, _react.useCallback)(function () {
+    var _getClickUrl, _appendCrossProductAn;
+    var preferredUrl = (_getClickUrl = (0, _helpers.getClickUrl)(url, state.details)) !== null && _getClickUrl !== void 0 ? _getClickUrl : url;
+    return (_appendCrossProductAn = appendCrossProductAnalyticsParams(preferredUrl)) !== null && _appendCrossProductAn !== void 0 ? _appendCrossProductAn : preferredUrl;
+  }, [appendCrossProductAnalyticsParams, state.details, url]);
+  var updateAnchorHref = (0, _react.useCallback)(function (event, destinationUrl) {
+    if (!(event.currentTarget instanceof HTMLAnchorElement)) {
+      return;
+    }
+
+    // FIXME: destinationUrl should be rendered in the DOM anchor href instead of derived at click time
+    // href is only defined when currentTarget is an anchor element.
+    // Update the anchor href so the browser context menu uses the decorated URL.
+    event.currentTarget.href = destinationUrl;
+  }, []);
 
   // Setup UI handlers.
   var handleClickWrapper = (0, _react.useCallback)(function (event) {
@@ -131,7 +146,6 @@ function Component(_ref) {
       exposure: true
     });
     if ((0, _platformFeatureFlags.fg)('platform_smartlink_xpc_url_wrapping')) {
-      var _appendCrossProductAn;
       // FIXME: InlineCard, BlockCard and EmbedCard call event.preventDefault() internally
       // before the event bubbles up to this handler. This forces us to snapshot
       // event.defaultPrevented before calling onClick to detect whether the consumer
@@ -163,16 +177,14 @@ function Component(_ref) {
         });
         return;
       }
+      var destinationUrl = getDestinationUrl();
+      updateAnchorHref(event, destinationUrl);
 
       // For FlexibleCard, read target from the clicked anchor element (e.g. _blank for links
       // rendered with explicit target). For classic cards, default to _self
       var _getAnchorAttributesF = (0, _clickHelpers.getAnchorAttributesFromEvent)(event),
         anchorTarget = _getAnchorAttributesF.target;
       var target = (0, _utils.isSpecialEvent)(event) ? '_blank' : isFlexibleUi ? anchorTarget : '_self';
-
-      // FIXME: preferredUrl should be rendered in the DOM anchor href instead of derived at click time
-      var preferredUrl = (0, _helpers.getClickUrl)(url, state.details);
-      var destinationUrl = (_appendCrossProductAn = appendCrossProductAnalyticsParams(preferredUrl)) !== null && _appendCrossProductAn !== void 0 ? _appendCrossProductAn : preferredUrl;
       onClick === null || onClick === void 0 || onClick(event, {
         url: url,
         destinationUrl: destinationUrl
@@ -244,7 +256,7 @@ function Component(_ref) {
         (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event);
       }
     }
-  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, onClick, url, appendCrossProductAnalyticsParams, state.details, ari, name, fire3PClickEvent, shouldFire3PClickEvent, isPreviewPanelAvailable, openPreviewPanel, createAnalyticsEvent, disablePreviewPanel]);
+  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, getDestinationUrl, onClick, url, updateAnchorHref, state.details, ari, name, fire3PClickEvent, shouldFire3PClickEvent, isPreviewPanelAvailable, openPreviewPanel, createAnalyticsEvent, disablePreviewPanel]);
 
   // Exposure fires once per eligible mount; click-time reads use no-exposure variant.
   (0, _react.useEffect)(function () {
@@ -256,23 +268,32 @@ function Component(_ref) {
   // Middle-click handler to trigger fire3PClickEvent on middle-clicks.
   // Scope is limited to 3P click analytics to keep the experiment focused.
   var handleFrameAuxClick = (0, _react.useCallback)(function (event) {
+    if ((0, _platformFeatureFlags.fg)('platform_smartlink_xpc_url_wrapping')) {
+      var destinationUrl = getDestinationUrl();
+      updateAnchorHref(event, destinationUrl);
+    }
+
     // isAuxClick filters Windows right-clicks (button === 2) that also fire onAuxClick.
     if ((0, _clickHelpers.isAuxClick)(event) && shouldFire3PClickEvent && (0, _expValEqualsNoExposure.expValEqualsNoExposure)(TRACK_NON_PRIMARY_3P_CLICKS_EXPERIMENT, 'isEnabled', true)) {
       fire3PClickEvent === null || fire3PClickEvent === void 0 || fire3PClickEvent({
         isAuxClick: true
       });
     }
-  }, [fire3PClickEvent, shouldFire3PClickEvent]);
+  }, [fire3PClickEvent, getDestinationUrl, shouldFire3PClickEvent, updateAnchorHref]);
 
   // Right-click handler to trigger fire3PClickEvent on right-clicks.
   // Scope is limited to 3P click analytics to keep the experiment focused.
-  var handleFrameContextMenu = (0, _react.useCallback)(function (_event) {
+  var handleFrameContextMenu = (0, _react.useCallback)(function (event) {
+    if ((0, _platformFeatureFlags.fg)('platform_smartlink_xpc_url_wrapping')) {
+      var destinationUrl = getDestinationUrl();
+      updateAnchorHref(event, destinationUrl);
+    }
     if (shouldFire3PClickEvent && (0, _expValEqualsNoExposure.expValEqualsNoExposure)(TRACK_NON_PRIMARY_3P_CLICKS_EXPERIMENT, 'isEnabled', true)) {
       fire3PClickEvent === null || fire3PClickEvent === void 0 || fire3PClickEvent({
         isContextMenu: true
       });
     }
-  }, [fire3PClickEvent, shouldFire3PClickEvent]);
+  }, [fire3PClickEvent, getDestinationUrl, shouldFire3PClickEvent, updateAnchorHref]);
   var reload = actions.reload;
   var handleAuthorize = (0, _react.useCallback)(function () {
     return actions.authorize(appearance);

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -22,7 +22,7 @@ var _SmartLinkAnalyticsContext = require("../../../utils/analytics/SmartLinkAnal
 var _CustomPopupContainer = require("../components/CustomPopupContainer");
 var _HoverCardContent = _interopRequireDefault(require("../components/HoverCardContent"));
 var _styled = require("../styled");
-var _excluded = ["aria-haspopup", "aria-expanded"];
+var _excluded = ["aria-haspopup", "aria-expanded", "aria-controls"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var HOVER_CARD_SOURCE = exports.HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
 var HOVER_CARD_TRIGGER_WRAPPER = 'hover-card-trigger-wrapper';
@@ -240,6 +240,7 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
   var trigger = (0, _react.useCallback)(function (_ref3) {
     var _ariaHasPopup = _ref3['aria-haspopup'],
       _ariaExpanded = _ref3['aria-expanded'],
+      _ariaControls = _ref3['aria-controls'],
       triggerProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
     return /*#__PURE__*/_react.default.createElement("span", {
       ref: parentSpan

package/dist/cjs/view/InlineCard/UnauthorisedView/index.compiled.css

@@ -1,11 +1,15 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18m915vq{overflow-y:hidden}
+._18m9ewfl{overflow-y:visible}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1bto1l2s{text-overflow:ellipsis}
-._1e0c116y{display:inline-flex}
+._1btozryt{text-overflow:clip}
+._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
+._1nmz9jpi{word-break:break-all}
 ._1reo15vq{overflow-x:hidden}
+._1reoewfl{overflow-x:visible}
 ._1wybtjj4{font-size:.8em}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
 ._4cvr1h6o{align-items:center}
@@ -16,6 +20,7 @@
 ._k48pwu06{font-weight:var(--ds-font-weight-bold,653)}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._o5721btx{white-space:break-spaces}
 ._o5721q9c{white-space:nowrap}
 ._p12f1osq{max-width:100%}
 ._s7n4t94y{vertical-align:1px}

package/dist/cjs/view/InlineCard/UnauthorisedView/index.js

@@ -12,6 +12,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _reactMagneticDi = require("react-magnetic-di");
+var _css = require("@atlaskit/css");
 var _lockLocked = _interopRequireDefault(require("@atlaskit/icon/core/lock-locked"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -38,10 +39,12 @@ var SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD = 30;
 var SOCIAL_PROOF_TRAIT_NAME = 'sl_3p_connected_providers_site_pct';
 var socialProofPillStyles = {
   strong: "_k48pwu06",
-  inlineContainer: "_1e0c116y _4cvr1h6o",
   root: "_2rko12b0 _1e0c1nu9 _4cvr1h6o _vchhusvi _p12f1osq _bfhk1dpa _syazazsu _y3gn18uv _1wybtjj4 _s7n4t94y _ca0qv77o _n3tdv77o _u5f312x7 _19bv12x7 _2hwx1b66 _irr3plhp _1di61gdz",
   label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c",
-  button: "_bfhk1j28 _u5f3ze3t _19bvze3t _ca0qze3t _n3tdze3t"
+  wrappingLabel: "_1reoewfl _18m9ewfl _1btozryt _o5721btx _1nmz9jpi",
+  button: "_bfhk1j28 _u5f3ze3t _19bvze3t _ca0qze3t _n3tdze3t",
+  pressableContents: "_1e0c1bgi",
+  inlineGroup: "_1e0c1nu9"
 };
 
 /**
@@ -110,7 +113,7 @@ var UnauthorisedConnectWithSocialProof = function UnauthorisedConnectWithSocialP
     testId: "".concat(testId, "-social-proof-tag")
   }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "span",
-    xcss: socialProofPillStyles.label
+    xcss: (0, _css.cx)(socialProofPillStyles.label, (0, _platformFeatureFlags.fg)('platform_lp_social_proof_inline_overflow_bug') && socialProofPillStyles.wrappingLabel)
   }, socialProofPillContent)) : null, /*#__PURE__*/_react.default.createElement(_actionButton.ActionButton, {
     onClick: onConnectClick,
     viewType: "unauthorised",
@@ -126,8 +129,11 @@ var UnauthorisedConnectWithSocialProof = function UnauthorisedConnectWithSocialP
     style: {
       font: "inherit"
     },
-    xcss: socialProofPillStyles.button
-  }, buttonContent) : buttonContent;
+    xcss: (0, _css.cx)(socialProofPillStyles.button, (0, _platformFeatureFlags.fg)('platform_lp_social_proof_inline_overflow_bug') && socialProofPillStyles.pressableContents)
+  }, (0, _platformFeatureFlags.fg)('platform_lp_social_proof_inline_overflow_bug') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "span",
+    xcss: socialProofPillStyles.inlineGroup
+  }, buttonContent) : buttonContent) : buttonContent;
 };
 var InlineCardUnauthorizedView = exports.InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref2) {
   var url = _ref2.url,

package/dist/cjs/view/InlineCard/common/action-button/index.compiled.css

@@ -4,6 +4,7 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
+._1nmz4jg8{word-break:normal}
 ._1nmz9jpi{word-break:break-all}
 ._1o0zlb4i{border-bottom-right-radius:var(--ds-radius-xsmall,2px)}
 ._1wybtjj4{font-size:.8em}
@@ -24,6 +25,7 @@
 ._n3tdt94y{padding-bottom:1px}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721btx{white-space:break-spaces}
+._o5721q9c{white-space:nowrap}
 ._qrwqlb4i{border-top-right-radius:var(--ds-radius-xsmall,2px)}
 ._s7n4t94y{vertical-align:1px}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}

package/dist/cjs/view/InlineCard/common/action-button/index.js

@@ -22,6 +22,7 @@ var styles = {
   button: "_1e0c1bgi",
   innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz9jpi",
   innerContainerSocialProofConnect: "_2rko12b0 _syaz15cr _80omtlke _bfhkjmqp _2hwxv77o _1e0c1nu9 _4cvr1h6o _1wybtjj4 _1y1m1u8q _16d9qvcn _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _s7n4t94y _o5721btx _1nmz9jpi _irr31q28 _1di612kk",
+  innerContainerNoWrap: "_o5721q9c _1nmz4jg8",
   enabled: "_syazi7uo _80omtlke _bfhki8nm _irr3plhp _1di61gdz",
   disabled: "_syaz1gmx _80om13gf _bfhk187o",
   unauthorised: "_syaz15cr _80omtlke _bfhkjmqp _qrwqlb4i _1o0zlb4i _13lilb4i _mrkblb4i _ca0qt94y _n3tdt94y _2hwxt94y _k48pi7a9 _irr31q28 _1di612kk"
@@ -51,7 +52,7 @@ var ActionButton = exports.ActionButton = /*#__PURE__*/(0, _react.forwardRef)(fu
       },
       xcss: styles.button
     }), /*#__PURE__*/React.createElement("span", {
-      className: (0, _runtime.ax)([styles.innerContainerSocialProofConnect])
+      className: (0, _runtime.ax)([styles.innerContainerSocialProofConnect, (0, _platformFeatureFlags.fg)('platform_lp_social_proof_inline_overflow_bug') && ""])
     }, children));
   }
   return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({}, props, {

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

@@ -19,7 +19,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "44.25.0",
+  packageVersion: "44.26.0",
   componentName: 'linkUrl'
 };
 var LinkUrl = function LinkUrl(_ref) {

package/dist/es2019/__tests__/vr-tests/__snapshots__/inline-card/inline-card-unauthorised-with-social-proof-in-narrow-container--default--platform-lp-social-proof-inline-overflow-bug-false.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7e92f235ef67cfff425c2768c61c1501f8d5daa6e0418075997c0de015ea18b2
+size 35855

package/dist/es2019/__tests__/vr-tests/__snapshots__/inline-card/inline-card-unauthorised-with-social-proof-in-narrow-container--default--platform-lp-social-proof-inline-overflow-bug-true.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1ee2641306bded4b5e90d1b509fa83e697a55b5eddb2bda5480fc7c50b0ddcf2
+size 36106

package/dist/es2019/entry-points/hook-use-smart-link-destination-url.js

@@ -0,0 +1 @@
+export { useDestinationUrl as useSmartLinkDestinationUrl } from '../state/hooks/use-destination-url';

package/dist/es2019/state/hooks/use-destination-url/index.js

@@ -0,0 +1,32 @@
+import { functionWithFG } from '@atlaskit/platform-feature-flags-react';
+import { getClickUrl } from '../../helpers';
+import { useSmartCardState } from '../../store';
+import { useSmartLinkCrossProductUrlWrapper } from '../use-smart-link-cross-product-url-wrapper';
+
+/**
+ * Returns the resolved destination URL for a Smart Link, with cross-product analytics
+ * parameters appended when the `platform_smartlink_xpc_url_wrapping` feature gate is enabled.
+ *
+ * This is the same URL that SmartCard would navigate to when clicked. Use this as an `href`
+ * wherever you render a link to a Smart Link URL outside of the SmartCard component itself
+ * (e.g. toolbar buttons, overlays).
+ *
+ * Falls back to the raw `url` when:
+ * - The link has not yet resolved
+ * - The feature gate is disabled
+ * - The link is not a first-party Atlassian link
+ *
+ * @example
+ * const href = useSmartLinkDestinationUrl(url);
+ *
+ * Use as <a href={href} target="_blank">Open link</a>
+ */
+const useDestinationUrlImplementation = url => {
+  const state = useSmartCardState(url);
+  const appendCrossProductAnalyticsParams = useSmartLinkCrossProductUrlWrapper({
+    details: state.details
+  });
+  const resolvedUrl = getClickUrl(url, state.details);
+  return appendCrossProductAnalyticsParams(resolvedUrl);
+};
+export const useDestinationUrl = functionWithFG('platform_smartlink_xpc_url_wrapping', useDestinationUrlImplementation, url => url);

package/dist/es2019/state/hooks/use-smart-link-cross-product-url-wrapper/index.js

@@ -10,7 +10,7 @@ export const getIsFirstPartyLink = details => {
 };
 const identityUrlWrapper = url => url;
 const useSmartLinkCrossProductUrlWrapperFallback = _args => identityUrlWrapper;
-const useSmartLinkCrossProductUrlWrapper = ({
+export const useSmartLinkCrossProductUrlWrapper = ({
   details
 }) => {
   var _effectiveProduct$toL;

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

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

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

@@ -102,6 +102,21 @@ function Component({
 
   // Shared scope guard for all 3P-click handlers.
   const shouldFire3PClickEvent = thirdPartyARI && thirdPartyARI.startsWith(thirdPartyARIPrefix) && getClickUrl(url, state.details) === url && fire3PClickEvent && fg('platform_smartlink_3pclick_analytics');
+  const getDestinationUrl = useCallback(() => {
+    var _getClickUrl, _appendCrossProductAn;
+    const preferredUrl = (_getClickUrl = getClickUrl(url, state.details)) !== null && _getClickUrl !== void 0 ? _getClickUrl : url;
+    return (_appendCrossProductAn = appendCrossProductAnalyticsParams(preferredUrl)) !== null && _appendCrossProductAn !== void 0 ? _appendCrossProductAn : preferredUrl;
+  }, [appendCrossProductAnalyticsParams, state.details, url]);
+  const updateAnchorHref = useCallback((event, destinationUrl) => {
+    if (!(event.currentTarget instanceof HTMLAnchorElement)) {
+      return;
+    }
+
+    // FIXME: destinationUrl should be rendered in the DOM anchor href instead of derived at click time
+    // href is only defined when currentTarget is an anchor element.
+    // Update the anchor href so the browser context menu uses the decorated URL.
+    event.currentTarget.href = destinationUrl;
+  }, []);
 
   // Setup UI handlers.
   const handleClickWrapper = useCallback(event => {
@@ -121,7 +136,6 @@ function Component({
       exposure: true
     });
     if (fg('platform_smartlink_xpc_url_wrapping')) {
-      var _appendCrossProductAn;
       // FIXME: InlineCard, BlockCard and EmbedCard call event.preventDefault() internally
       // before the event bubbles up to this handler. This forces us to snapshot
       // event.defaultPrevented before calling onClick to detect whether the consumer
@@ -153,6 +167,8 @@ function Component({
         });
         return;
       }
+      const destinationUrl = getDestinationUrl();
+      updateAnchorHref(event, destinationUrl);
 
       // For FlexibleCard, read target from the clicked anchor element (e.g. _blank for links
       // rendered with explicit target). For classic cards, default to _self
@@ -160,10 +176,6 @@ function Component({
         target: anchorTarget
       } = getAnchorAttributesFromEvent(event);
       const target = isSpecialEvent(event) ? '_blank' : isFlexibleUi ? anchorTarget : '_self';
-
-      // FIXME: preferredUrl should be rendered in the DOM anchor href instead of derived at click time
-      const preferredUrl = getClickUrl(url, state.details);
-      const destinationUrl = (_appendCrossProductAn = appendCrossProductAnalyticsParams(preferredUrl)) !== null && _appendCrossProductAn !== void 0 ? _appendCrossProductAn : preferredUrl;
       onClick === null || onClick === void 0 ? void 0 : onClick(event, {
         url,
         destinationUrl
@@ -235,7 +247,7 @@ function Component({
         fireLinkClickedEvent(createAnalyticsEvent)(event);
       }
     }
-  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, onClick, url, appendCrossProductAnalyticsParams, state.details, ari, name, fire3PClickEvent, shouldFire3PClickEvent, isPreviewPanelAvailable, openPreviewPanel, createAnalyticsEvent, disablePreviewPanel]);
+  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, getDestinationUrl, onClick, url, updateAnchorHref, state.details, ari, name, fire3PClickEvent, shouldFire3PClickEvent, isPreviewPanelAvailable, openPreviewPanel, createAnalyticsEvent, disablePreviewPanel]);
 
   // Exposure fires once per eligible mount; click-time reads use no-exposure variant.
   useEffect(() => {
@@ -247,23 +259,32 @@ function Component({
   // Middle-click handler to trigger fire3PClickEvent on middle-clicks.
   // Scope is limited to 3P click analytics to keep the experiment focused.
   const handleFrameAuxClick = useCallback(event => {
+    if (fg('platform_smartlink_xpc_url_wrapping')) {
+      const destinationUrl = getDestinationUrl();
+      updateAnchorHref(event, destinationUrl);
+    }
+
     // isAuxClick filters Windows right-clicks (button === 2) that also fire onAuxClick.
     if (isAuxClick(event) && shouldFire3PClickEvent && expValEqualsNoExposure(TRACK_NON_PRIMARY_3P_CLICKS_EXPERIMENT, 'isEnabled', true)) {
       fire3PClickEvent === null || fire3PClickEvent === void 0 ? void 0 : fire3PClickEvent({
         isAuxClick: true
       });
     }
-  }, [fire3PClickEvent, shouldFire3PClickEvent]);
+  }, [fire3PClickEvent, getDestinationUrl, shouldFire3PClickEvent, updateAnchorHref]);
 
   // Right-click handler to trigger fire3PClickEvent on right-clicks.
   // Scope is limited to 3P click analytics to keep the experiment focused.
-  const handleFrameContextMenu = useCallback(_event => {
+  const handleFrameContextMenu = useCallback(event => {
+    if (fg('platform_smartlink_xpc_url_wrapping')) {
+      const destinationUrl = getDestinationUrl();
+      updateAnchorHref(event, destinationUrl);
+    }
     if (shouldFire3PClickEvent && expValEqualsNoExposure(TRACK_NON_PRIMARY_3P_CLICKS_EXPERIMENT, 'isEnabled', true)) {
       fire3PClickEvent === null || fire3PClickEvent === void 0 ? void 0 : fire3PClickEvent({
         isContextMenu: true
       });
     }
-  }, [fire3PClickEvent, shouldFire3PClickEvent]);
+  }, [fire3PClickEvent, getDestinationUrl, shouldFire3PClickEvent, updateAnchorHref]);
   const {
     reload
   } = actions;

package/dist/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -214,6 +214,12 @@ export const HoverCardComponent = ({
   const trigger = useCallback(({
     'aria-haspopup': _ariaHasPopup,
     'aria-expanded': _ariaExpanded,
+    // `aria-controls` is also stripped because the trigger wrapper renders
+    // with `role="none"`. axe's `aria-valid-attr-value` rule flags any
+    // `aria-controls` value sitting on a presentational element, since the
+    // element has no semantic role to control. Removing the attribute
+    // keeps the trigger semantically inert without losing functionality.
+    'aria-controls': _ariaControls,
     ...triggerProps
   }) => /*#__PURE__*/React.createElement("span", {
     ref: parentSpan

package/dist/es2019/view/InlineCard/UnauthorisedView/index.compiled.css

@@ -1,11 +1,15 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18m915vq{overflow-y:hidden}
+._18m9ewfl{overflow-y:visible}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1bto1l2s{text-overflow:ellipsis}
-._1e0c116y{display:inline-flex}
+._1btozryt{text-overflow:clip}
+._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
+._1nmz9jpi{word-break:break-all}
 ._1reo15vq{overflow-x:hidden}
+._1reoewfl{overflow-x:visible}
 ._1wybtjj4{font-size:.8em}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
 ._4cvr1h6o{align-items:center}
@@ -16,6 +20,7 @@
 ._k48pwu06{font-weight:var(--ds-font-weight-bold,653)}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._o5721btx{white-space:break-spaces}
 ._o5721q9c{white-space:nowrap}
 ._p12f1osq{max-width:100%}
 ._s7n4t94y{vertical-align:1px}

package/dist/es2019/view/InlineCard/UnauthorisedView/index.js

@@ -5,6 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { di } from 'react-magnetic-di';
+import { cx } from '@atlaskit/css';
 import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable } from '@atlaskit/primitives/compiled';
@@ -31,10 +32,12 @@ const SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD = 30;
 const SOCIAL_PROOF_TRAIT_NAME = 'sl_3p_connected_providers_site_pct';
 const socialProofPillStyles = {
   strong: "_k48pwu06",
-  inlineContainer: "_1e0c116y _4cvr1h6o",
   root: "_2rko12b0 _1e0c1nu9 _4cvr1h6o _vchhusvi _p12f1osq _bfhk1dpa _syazazsu _y3gn18uv _1wybtjj4 _s7n4t94y _ca0qv77o _n3tdv77o _u5f312x7 _19bv12x7 _2hwx1b66 _irr3plhp _1di61gdz",
   label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c",
-  button: "_bfhk1j28 _u5f3ze3t _19bvze3t _ca0qze3t _n3tdze3t"
+  wrappingLabel: "_1reoewfl _18m9ewfl _1btozryt _o5721btx _1nmz9jpi",
+  button: "_bfhk1j28 _u5f3ze3t _19bvze3t _ca0qze3t _n3tdze3t",
+  pressableContents: "_1e0c1bgi",
+  inlineGroup: "_1e0c1nu9"
 };
 
 /**
@@ -102,7 +105,7 @@ const UnauthorisedConnectWithSocialProof = ({
     testId: `${testId}-social-proof-tag`
   }, /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: socialProofPillStyles.label
+    xcss: cx(socialProofPillStyles.label, fg('platform_lp_social_proof_inline_overflow_bug') && socialProofPillStyles.wrappingLabel)
   }, socialProofPillContent)) : null, /*#__PURE__*/React.createElement(ActionButton, {
     onClick: onConnectClick,
     viewType: "unauthorised",
@@ -118,8 +121,11 @@ const UnauthorisedConnectWithSocialProof = ({
     style: {
       font: `inherit`
     },
-    xcss: socialProofPillStyles.button
-  }, buttonContent) : buttonContent;
+    xcss: cx(socialProofPillStyles.button, fg('platform_lp_social_proof_inline_overflow_bug') && socialProofPillStyles.pressableContents)
+  }, fg('platform_lp_social_proof_inline_overflow_bug') ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: socialProofPillStyles.inlineGroup
+  }, buttonContent) : buttonContent) : buttonContent;
 };
 export const InlineCardUnauthorizedView = ({
   url,

package/dist/es2019/view/InlineCard/common/action-button/index.compiled.css

@@ -4,6 +4,7 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
+._1nmz4jg8{word-break:normal}
 ._1nmz9jpi{word-break:break-all}
 ._1o0zlb4i{border-bottom-right-radius:var(--ds-radius-xsmall,2px)}
 ._1wybtjj4{font-size:.8em}
@@ -24,6 +25,7 @@
 ._n3tdt94y{padding-bottom:1px}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721btx{white-space:break-spaces}
+._o5721q9c{white-space:nowrap}
 ._qrwqlb4i{border-top-right-radius:var(--ds-radius-xsmall,2px)}
 ._s7n4t94y{vertical-align:1px}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}

package/dist/es2019/view/InlineCard/common/action-button/index.js

@@ -10,6 +10,7 @@ const styles = {
   button: "_1e0c1bgi",
   innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz9jpi",
   innerContainerSocialProofConnect: "_2rko12b0 _syaz15cr _80omtlke _bfhkjmqp _2hwxv77o _1e0c1nu9 _4cvr1h6o _1wybtjj4 _1y1m1u8q _16d9qvcn _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _s7n4t94y _o5721btx _1nmz9jpi _irr31q28 _1di612kk",
+  innerContainerNoWrap: "_o5721q9c _1nmz4jg8",
   enabled: "_syazi7uo _80omtlke _bfhki8nm _irr3plhp _1di61gdz",
   disabled: "_syaz1gmx _80om13gf _bfhk187o",
   unauthorised: "_syaz15cr _80omtlke _bfhkjmqp _qrwqlb4i _1o0zlb4i _13lilb4i _mrkblb4i _ca0qt94y _n3tdt94y _2hwxt94y _k48pi7a9 _irr31q28 _1di612kk"
@@ -40,7 +41,7 @@ export const ActionButton = /*#__PURE__*/forwardRef(({
       },
       xcss: styles.button
     }), /*#__PURE__*/React.createElement("span", {
-      className: ax([styles.innerContainerSocialProofConnect])
+      className: ax([styles.innerContainerSocialProofConnect, fg('platform_lp_social_proof_inline_overflow_bug') && ""])
     }, children));
   }
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, props, {

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

@@ -9,7 +9,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "44.25.0",
+  packageVersion: "44.26.0",
   componentName: 'linkUrl'
 };
 const LinkUrl = ({

package/dist/esm/__tests__/vr-tests/__snapshots__/inline-card/inline-card-unauthorised-with-social-proof-in-narrow-container--default--platform-lp-social-proof-inline-overflow-bug-false.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7e92f235ef67cfff425c2768c61c1501f8d5daa6e0418075997c0de015ea18b2
+size 35855

package/dist/esm/__tests__/vr-tests/__snapshots__/inline-card/inline-card-unauthorised-with-social-proof-in-narrow-container--default--platform-lp-social-proof-inline-overflow-bug-true.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1ee2641306bded4b5e90d1b509fa83e697a55b5eddb2bda5480fc7c50b0ddcf2
+size 36106

package/dist/esm/entry-points/hook-use-smart-link-destination-url.js

@@ -0,0 +1 @@
+export { useDestinationUrl as useSmartLinkDestinationUrl } from '../state/hooks/use-destination-url';

package/dist/esm/state/hooks/use-destination-url/index.js

@@ -0,0 +1,34 @@
+import { functionWithFG } from '@atlaskit/platform-feature-flags-react';
+import { getClickUrl } from '../../helpers';
+import { useSmartCardState } from '../../store';
+import { useSmartLinkCrossProductUrlWrapper } from '../use-smart-link-cross-product-url-wrapper';
+
+/**
+ * Returns the resolved destination URL for a Smart Link, with cross-product analytics
+ * parameters appended when the `platform_smartlink_xpc_url_wrapping` feature gate is enabled.
+ *
+ * This is the same URL that SmartCard would navigate to when clicked. Use this as an `href`
+ * wherever you render a link to a Smart Link URL outside of the SmartCard component itself
+ * (e.g. toolbar buttons, overlays).
+ *
+ * Falls back to the raw `url` when:
+ * - The link has not yet resolved
+ * - The feature gate is disabled
+ * - The link is not a first-party Atlassian link
+ *
+ * @example
+ * const href = useSmartLinkDestinationUrl(url);
+ *
+ * Use as <a href={href} target="_blank">Open link</a>
+ */
+var useDestinationUrlImplementation = function useDestinationUrlImplementation(url) {
+  var state = useSmartCardState(url);
+  var appendCrossProductAnalyticsParams = useSmartLinkCrossProductUrlWrapper({
+    details: state.details
+  });
+  var resolvedUrl = getClickUrl(url, state.details);
+  return appendCrossProductAnalyticsParams(resolvedUrl);
+};
+export var useDestinationUrl = functionWithFG('platform_smartlink_xpc_url_wrapping', useDestinationUrlImplementation, function (url) {
+  return url;
+});

package/dist/esm/state/hooks/use-smart-link-cross-product-url-wrapper/index.js

@@ -17,7 +17,7 @@ var identityUrlWrapper = function identityUrlWrapper(url) {
 var useSmartLinkCrossProductUrlWrapperFallback = function useSmartLinkCrossProductUrlWrapperFallback(_args) {
   return identityUrlWrapper;
 };
-var useSmartLinkCrossProductUrlWrapper = function useSmartLinkCrossProductUrlWrapper(_ref) {
+export var useSmartLinkCrossProductUrlWrapper = function useSmartLinkCrossProductUrlWrapper(_ref) {
   var _effectiveProduct$toL;
   var details = _ref.details;
   var _useSmartLinkContext = useSmartLinkContext(),

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

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

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

@@ -103,6 +103,21 @@ function Component(_ref) {
 
   // Shared scope guard for all 3P-click handlers.
   var shouldFire3PClickEvent = thirdPartyARI && thirdPartyARI.startsWith(thirdPartyARIPrefix) && getClickUrl(url, state.details) === url && fire3PClickEvent && fg('platform_smartlink_3pclick_analytics');
+  var getDestinationUrl = useCallback(function () {
+    var _getClickUrl, _appendCrossProductAn;
+    var preferredUrl = (_getClickUrl = getClickUrl(url, state.details)) !== null && _getClickUrl !== void 0 ? _getClickUrl : url;
+    return (_appendCrossProductAn = appendCrossProductAnalyticsParams(preferredUrl)) !== null && _appendCrossProductAn !== void 0 ? _appendCrossProductAn : preferredUrl;
+  }, [appendCrossProductAnalyticsParams, state.details, url]);
+  var updateAnchorHref = useCallback(function (event, destinationUrl) {
+    if (!(event.currentTarget instanceof HTMLAnchorElement)) {
+      return;
+    }
+
+    // FIXME: destinationUrl should be rendered in the DOM anchor href instead of derived at click time
+    // href is only defined when currentTarget is an anchor element.
+    // Update the anchor href so the browser context menu uses the decorated URL.
+    event.currentTarget.href = destinationUrl;
+  }, []);
 
   // Setup UI handlers.
   var handleClickWrapper = useCallback(function (event) {
@@ -122,7 +137,6 @@ function Component(_ref) {
       exposure: true
     });
     if (fg('platform_smartlink_xpc_url_wrapping')) {
-      var _appendCrossProductAn;
       // FIXME: InlineCard, BlockCard and EmbedCard call event.preventDefault() internally
       // before the event bubbles up to this handler. This forces us to snapshot
       // event.defaultPrevented before calling onClick to detect whether the consumer
@@ -154,16 +168,14 @@ function Component(_ref) {
         });
         return;
       }
+      var destinationUrl = getDestinationUrl();
+      updateAnchorHref(event, destinationUrl);
 
       // For FlexibleCard, read target from the clicked anchor element (e.g. _blank for links
       // rendered with explicit target). For classic cards, default to _self
       var _getAnchorAttributesF = getAnchorAttributesFromEvent(event),
         anchorTarget = _getAnchorAttributesF.target;
       var target = isSpecialEvent(event) ? '_blank' : isFlexibleUi ? anchorTarget : '_self';
-
-      // FIXME: preferredUrl should be rendered in the DOM anchor href instead of derived at click time
-      var preferredUrl = getClickUrl(url, state.details);
-      var destinationUrl = (_appendCrossProductAn = appendCrossProductAnalyticsParams(preferredUrl)) !== null && _appendCrossProductAn !== void 0 ? _appendCrossProductAn : preferredUrl;
       onClick === null || onClick === void 0 || onClick(event, {
         url: url,
         destinationUrl: destinationUrl
@@ -235,7 +247,7 @@ function Component(_ref) {
         fireLinkClickedEvent(createAnalyticsEvent)(event);
       }
     }
-  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, onClick, url, appendCrossProductAnalyticsParams, state.details, ari, name, fire3PClickEvent, shouldFire3PClickEvent, isPreviewPanelAvailable, openPreviewPanel, createAnalyticsEvent, disablePreviewPanel]);
+  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, getDestinationUrl, onClick, url, updateAnchorHref, state.details, ari, name, fire3PClickEvent, shouldFire3PClickEvent, isPreviewPanelAvailable, openPreviewPanel, createAnalyticsEvent, disablePreviewPanel]);
 
   // Exposure fires once per eligible mount; click-time reads use no-exposure variant.
   useEffect(function () {
@@ -247,23 +259,32 @@ function Component(_ref) {
   // Middle-click handler to trigger fire3PClickEvent on middle-clicks.
   // Scope is limited to 3P click analytics to keep the experiment focused.
   var handleFrameAuxClick = useCallback(function (event) {
+    if (fg('platform_smartlink_xpc_url_wrapping')) {
+      var destinationUrl = getDestinationUrl();
+      updateAnchorHref(event, destinationUrl);
+    }
+
     // isAuxClick filters Windows right-clicks (button === 2) that also fire onAuxClick.
     if (isAuxClick(event) && shouldFire3PClickEvent && expValEqualsNoExposure(TRACK_NON_PRIMARY_3P_CLICKS_EXPERIMENT, 'isEnabled', true)) {
       fire3PClickEvent === null || fire3PClickEvent === void 0 || fire3PClickEvent({
         isAuxClick: true
       });
     }
-  }, [fire3PClickEvent, shouldFire3PClickEvent]);
+  }, [fire3PClickEvent, getDestinationUrl, shouldFire3PClickEvent, updateAnchorHref]);
 
   // Right-click handler to trigger fire3PClickEvent on right-clicks.
   // Scope is limited to 3P click analytics to keep the experiment focused.
-  var handleFrameContextMenu = useCallback(function (_event) {
+  var handleFrameContextMenu = useCallback(function (event) {
+    if (fg('platform_smartlink_xpc_url_wrapping')) {
+      var destinationUrl = getDestinationUrl();
+      updateAnchorHref(event, destinationUrl);
+    }
     if (shouldFire3PClickEvent && expValEqualsNoExposure(TRACK_NON_PRIMARY_3P_CLICKS_EXPERIMENT, 'isEnabled', true)) {
       fire3PClickEvent === null || fire3PClickEvent === void 0 || fire3PClickEvent({
         isContextMenu: true
       });
     }
-  }, [fire3PClickEvent, shouldFire3PClickEvent]);
+  }, [fire3PClickEvent, getDestinationUrl, shouldFire3PClickEvent, updateAnchorHref]);
   var reload = actions.reload;
   var handleAuthorize = useCallback(function () {
     return actions.authorize(appearance);

package/dist/esm/view/HoverCard/components/HoverCardComponent.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["aria-haspopup", "aria-expanded"];
+var _excluded = ["aria-haspopup", "aria-expanded", "aria-controls"];
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
@@ -231,6 +231,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var trigger = useCallback(function (_ref3) {
     var _ariaHasPopup = _ref3['aria-haspopup'],
       _ariaExpanded = _ref3['aria-expanded'],
+      _ariaControls = _ref3['aria-controls'],
       triggerProps = _objectWithoutProperties(_ref3, _excluded);
     return /*#__PURE__*/React.createElement("span", {
       ref: parentSpan

package/dist/esm/view/InlineCard/UnauthorisedView/index.compiled.css

@@ -1,11 +1,15 @@
 
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18m915vq{overflow-y:hidden}
+._18m9ewfl{overflow-y:visible}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._1bto1l2s{text-overflow:ellipsis}
-._1e0c116y{display:inline-flex}
+._1btozryt{text-overflow:clip}
+._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
+._1nmz9jpi{word-break:break-all}
 ._1reo15vq{overflow-x:hidden}
+._1reoewfl{overflow-x:visible}
 ._1wybtjj4{font-size:.8em}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
 ._4cvr1h6o{align-items:center}
@@ -16,6 +20,7 @@
 ._k48pwu06{font-weight:var(--ds-font-weight-bold,653)}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._o5721btx{white-space:break-spaces}
 ._o5721q9c{white-space:nowrap}
 ._p12f1osq{max-width:100%}
 ._s7n4t94y{vertical-align:1px}

package/dist/esm/view/InlineCard/UnauthorisedView/index.js

@@ -5,6 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { di } from 'react-magnetic-di';
+import { cx } from '@atlaskit/css';
 import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable } from '@atlaskit/primitives/compiled';
@@ -31,10 +32,12 @@ var SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD = 30;
 var SOCIAL_PROOF_TRAIT_NAME = 'sl_3p_connected_providers_site_pct';
 var socialProofPillStyles = {
   strong: "_k48pwu06",
-  inlineContainer: "_1e0c116y _4cvr1h6o",
   root: "_2rko12b0 _1e0c1nu9 _4cvr1h6o _vchhusvi _p12f1osq _bfhk1dpa _syazazsu _y3gn18uv _1wybtjj4 _s7n4t94y _ca0qv77o _n3tdv77o _u5f312x7 _19bv12x7 _2hwx1b66 _irr3plhp _1di61gdz",
   label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c",
-  button: "_bfhk1j28 _u5f3ze3t _19bvze3t _ca0qze3t _n3tdze3t"
+  wrappingLabel: "_1reoewfl _18m9ewfl _1btozryt _o5721btx _1nmz9jpi",
+  button: "_bfhk1j28 _u5f3ze3t _19bvze3t _ca0qze3t _n3tdze3t",
+  pressableContents: "_1e0c1bgi",
+  inlineGroup: "_1e0c1nu9"
 };
 
 /**
@@ -103,7 +106,7 @@ var UnauthorisedConnectWithSocialProof = function UnauthorisedConnectWithSocialP
     testId: "".concat(testId, "-social-proof-tag")
   }, /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: socialProofPillStyles.label
+    xcss: cx(socialProofPillStyles.label, fg('platform_lp_social_proof_inline_overflow_bug') && socialProofPillStyles.wrappingLabel)
   }, socialProofPillContent)) : null, /*#__PURE__*/React.createElement(ActionButton, {
     onClick: onConnectClick,
     viewType: "unauthorised",
@@ -119,8 +122,11 @@ var UnauthorisedConnectWithSocialProof = function UnauthorisedConnectWithSocialP
     style: {
       font: "inherit"
     },
-    xcss: socialProofPillStyles.button
-  }, buttonContent) : buttonContent;
+    xcss: cx(socialProofPillStyles.button, fg('platform_lp_social_proof_inline_overflow_bug') && socialProofPillStyles.pressableContents)
+  }, fg('platform_lp_social_proof_inline_overflow_bug') ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: socialProofPillStyles.inlineGroup
+  }, buttonContent) : buttonContent) : buttonContent;
 };
 export var InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref2) {
   var url = _ref2.url,

package/dist/esm/view/InlineCard/common/action-button/index.compiled.css

@@ -4,6 +4,7 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
+._1nmz4jg8{word-break:normal}
 ._1nmz9jpi{word-break:break-all}
 ._1o0zlb4i{border-bottom-right-radius:var(--ds-radius-xsmall,2px)}
 ._1wybtjj4{font-size:.8em}
@@ -24,6 +25,7 @@
 ._n3tdt94y{padding-bottom:1px}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721btx{white-space:break-spaces}
+._o5721q9c{white-space:nowrap}
 ._qrwqlb4i{border-top-right-radius:var(--ds-radius-xsmall,2px)}
 ._s7n4t94y{vertical-align:1px}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}

package/dist/esm/view/InlineCard/common/action-button/index.js

@@ -13,6 +13,7 @@ var styles = {
   button: "_1e0c1bgi",
   innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz9jpi",
   innerContainerSocialProofConnect: "_2rko12b0 _syaz15cr _80omtlke _bfhkjmqp _2hwxv77o _1e0c1nu9 _4cvr1h6o _1wybtjj4 _1y1m1u8q _16d9qvcn _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _s7n4t94y _o5721btx _1nmz9jpi _irr31q28 _1di612kk",
+  innerContainerNoWrap: "_o5721q9c _1nmz4jg8",
   enabled: "_syazi7uo _80omtlke _bfhki8nm _irr3plhp _1di61gdz",
   disabled: "_syaz1gmx _80om13gf _bfhk187o",
   unauthorised: "_syaz15cr _80omtlke _bfhkjmqp _qrwqlb4i _1o0zlb4i _13lilb4i _mrkblb4i _ca0qt94y _n3tdt94y _2hwxt94y _k48pi7a9 _irr31q28 _1di612kk"
@@ -42,7 +43,7 @@ export var ActionButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
       },
       xcss: styles.button
     }), /*#__PURE__*/React.createElement("span", {
-      className: ax([styles.innerContainerSocialProofConnect])
+      className: ax([styles.innerContainerSocialProofConnect, fg('platform_lp_social_proof_inline_overflow_bug') && ""])
     }, children));
   }
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, props, {

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

@@ -12,7 +12,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "44.25.0",
+  packageVersion: "44.26.0",
   componentName: 'linkUrl'
 };
 var LinkUrl = function LinkUrl(_ref) {

package/dist/types/entry-points/hook-use-smart-link-destination-url.d.ts

@@ -0,0 +1 @@
+export { useDestinationUrl as useSmartLinkDestinationUrl } from '../state/hooks/use-destination-url';

package/dist/types/state/hooks/use-destination-url/index.d.ts

@@ -0,0 +1 @@
+export declare const useDestinationUrl: (url: string) => string;

package/dist/types/state/hooks/use-smart-link-cross-product-url-wrapper/index.d.ts

@@ -3,6 +3,6 @@ export declare const getIsFirstPartyLink: (details?: SmartLinkResponse) => boole
 type UseSmartLinkCrossProductUrlWrapperArgs = {
     details?: SmartLinkResponse;
 };
-declare const useSmartLinkCrossProductUrlWrapper: ({ details, }: UseSmartLinkCrossProductUrlWrapperArgs) => ((url: string) => string);
+export declare const useSmartLinkCrossProductUrlWrapper: ({ details, }: UseSmartLinkCrossProductUrlWrapperArgs) => ((url: string) => string);
 export declare const useSmartLinkCrossProductUrlWrapperGated: typeof useSmartLinkCrossProductUrlWrapper;
 export {};

package/dist/types-ts4.5/entry-points/hook-use-smart-link-destination-url.d.ts

@@ -0,0 +1 @@
+export { useDestinationUrl as useSmartLinkDestinationUrl } from '../state/hooks/use-destination-url';

package/dist/types-ts4.5/state/hooks/use-destination-url/index.d.ts

@@ -0,0 +1 @@
+export declare const useDestinationUrl: (url: string) => string;

package/dist/types-ts4.5/state/hooks/use-smart-link-cross-product-url-wrapper/index.d.ts

@@ -3,6 +3,6 @@ export declare const getIsFirstPartyLink: (details?: SmartLinkResponse) => boole
 type UseSmartLinkCrossProductUrlWrapperArgs = {
     details?: SmartLinkResponse;
 };
-declare const useSmartLinkCrossProductUrlWrapper: ({ details, }: UseSmartLinkCrossProductUrlWrapperArgs) => ((url: string) => string);
+export declare const useSmartLinkCrossProductUrlWrapper: ({ details, }: UseSmartLinkCrossProductUrlWrapperArgs) => ((url: string) => string);
 export declare const useSmartLinkCrossProductUrlWrapperGated: typeof useSmartLinkCrossProductUrlWrapper;
 export {};

package/hook/use-smart-link-destination-url/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/smart-card/hook/use-smart-link-destination-url",
+  "main": "../../dist/cjs/entry-points/hook-use-smart-link-destination-url.js",
+  "module": "../../dist/esm/entry-points/hook-use-smart-link-destination-url.js",
+  "module:es2019": "../../dist/es2019/entry-points/hook-use-smart-link-destination-url.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../../dist/types/entry-points/hook-use-smart-link-destination-url.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-points/hook-use-smart-link-destination-url.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "44.25.1",
+	"version": "44.26.1",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
 		"ak-postbuild": "ls -d dist/* | xargs -n 1 copyfiles -u 1 -V src/**/*.{svg,png}"
 	},
 	"dependencies": {
-		"@atlaskit/adf-utils": "^19.32.0",
+		"@atlaskit/adf-utils": "^19.33.0",
 		"@atlaskit/afm-i18n-platform-linking-platform-smart-card": "2.6.0",
 		"@atlaskit/analytics-cross-product": "^1.2.0",
 		"@atlaskit/analytics-gas-types": "^5.1.0",
@@ -87,7 +87,7 @@
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlaskit/theme": "^25.0.0",
 		"@atlaskit/tile": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^94.0.0",
+		"@atlaskit/tmp-editor-statsig": "^95.0.0",
 		"@atlaskit/tokens": "^13.3.0",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@atlaskit/ufo": "^0.5.0",
@@ -244,6 +244,9 @@
 		"platform_sl_3p_preauth_soc_proof_inline_killswitch": {
 			"type": "boolean"
 		},
+		"platform_lp_social_proof_inline_overflow_bug": {
+			"type": "boolean"
+		},
 		"platform_navx_smart_link_icon_label_a11y": {
 			"type": "boolean"
 		},