@atlaskit/smart-card 44.9.10 → 44.10.0

package/dist/cjs/__tests__/vr-tests/__snapshots__/link-url-connect-button/linkurl-default-state--default.png

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

package/dist/cjs/common/ui/icons/utils.js

@@ -13,7 +13,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../constants");
 var _utils = require("../../../utils");
 var _excluded = ["size"],
-  _excluded2 = ["size"],
+  _excluded2 = ["size", "isTiledIcon"],
   _excluded3 = ["shape", "UNSAFE_circleReplacementComponent"];
 /**
  * Maps IconTile appearance to the icon glyph color token to use when rendering
@@ -91,6 +91,7 @@ var renderIconPerSize = exports.renderIconPerSize = function renderIconPerSize(O
 var renderIconTile = exports.renderIconTile = function renderIconTile(Icon, appearance) {
   return function (_ref2) {
     var size = _ref2.size,
+      isTiledIcon = _ref2.isTiledIcon,
       props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
     var tileSize = transformSmartLinkSizeToIconTileSize(size);
     if (tileSize === undefined) {
@@ -112,7 +113,11 @@ var renderIconTile = exports.renderIconTile = function renderIconTile(Icon, appe
       tileProps = (0, _objectWithoutProperties2.default)(props, _excluded3);
     return /*#__PURE__*/_react.default.createElement(_icon.IconTile, (0, _extends2.default)({
       appearance: appearance,
-      icon: Icon,
+      icon: isTiledIcon ? function (iconProps) {
+        return /*#__PURE__*/_react.default.createElement(Icon, (0, _extends2.default)({}, iconProps, {
+          spacing: "spacious"
+        }));
+      } : Icon,
       size: tileSize
     }, tileProps));
   };

package/dist/cjs/state/hooks/use-intersection-observer/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
+var _utils = require("../../../utils");
 // This property enables the intersection observer to be run once the
 // HTML element being observed is within `X` px of the target container it is
 // being compared to. Since the default container is the `document`, we set this
@@ -33,7 +34,7 @@ var useIntersectionObserver = function useIntersectionObserver(_ref) {
     }
   }, []);
   (0, _react.useEffect)(function () {
-    if (!ref.current) {
+    if (!(0, _utils.isIntersectionObserverSupported)() || !ref.current) {
       return;
     }
     var intersectionObserver = new IntersectionObserver(onIntersection, {

package/dist/cjs/state/hooks/use-smart-link-seen-event/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSmartLinkSeenEvent = useSmartLinkSeenEvent;
+var _react = require("react");
+var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
+var _SmartLinkAnalyticsContext = require("../../../utils/analytics/SmartLinkAnalyticsContext");
+var _flexible = require("../../../utils/flexible");
+/**
+ * Fires `ui.smartLink.seen` once when a smart link with status `unauthorized`
+ * enters the viewport. Uses refs internally so it never causes re-renders,
+ * which is important for SSR.
+ */
+function useSmartLinkSeenEvent(_ref) {
+  var appearance = _ref.appearance,
+    children = _ref.children,
+    id = _ref.id,
+    ui = _ref.ui,
+    _ref$url = _ref.url,
+    url = _ref$url === void 0 ? '' : _ref$url;
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  var _useSmartLinkAnalytic = (0, _SmartLinkAnalyticsContext.useSmartLinkAnalyticsUtils)(),
+    getByUrl = _useSmartLinkAnalytic.getByUrl;
+  var getAnalyticsProps = (0, _react.useCallback)(function () {
+    var isFlexibleUi = (0, _flexible.isFlexibleUiCard)(children, ui);
+    var display = isFlexibleUi ? 'flexible' : appearance;
+    return {
+      display: display,
+      id: id
+    };
+  }, [appearance, children, id, ui]);
+  var statusRef = (0, _react.useRef)();
+  var analyticsPropsRef = (0, _react.useRef)(null);
+  var hasIntersectedRef = (0, _react.useRef)(false);
+  var hasFiredSeenRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    analyticsPropsRef.current = getAnalyticsProps();
+  }, [getAnalyticsProps]);
+  var maybeFireSeenEvent = (0, _react.useCallback)(function () {
+    if (!hasFiredSeenRef.current && hasIntersectedRef.current && statusRef.current === 'unauthorized') {
+      var payload = getByUrl(url, analyticsPropsRef.current);
+      fireEvent('ui.smartLink.seen', payload === null || payload === void 0 ? void 0 : payload.attributes);
+      hasFiredSeenRef.current = true;
+    }
+  }, [fireEvent, getByUrl, url]);
+  var onIntersecting = (0, _react.useCallback)(function () {
+    if (hasIntersectedRef.current) {
+      return;
+    }
+    hasIntersectedRef.current = true;
+    maybeFireSeenEvent();
+  }, [maybeFireSeenEvent]);
+  var onStatusSettled = (0, _react.useCallback)(function (status) {
+    statusRef.current = status;
+    maybeFireSeenEvent();
+  }, [maybeFireSeenEvent]);
+  return (0, _react.useMemo)(function () {
+    return {
+      onIntersecting: onIntersecting,
+      onStatusSettled: onStatusSettled
+    };
+  }, [onIntersecting, onStatusSettled]);
+}

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

@@ -5,11 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSmartLinkAnalyticsContext = exports.SmartLinkAnalyticsContext = void 0;
+exports.useSmartLinkAnalyticsUtils = exports.useSmartLinkAnalyticsContext = exports.SmartLinkAnalyticsContext = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
 var _resolvedAttributes = require("@atlaskit/link-analytics/resolved-attributes");
 var _linkProvider = require("@atlaskit/link-provider");
 var _linkingCommon = require("@atlaskit/linking-common");
@@ -34,12 +33,9 @@ var getSmartLinkAnalyticsContext = function getSmartLinkAnalyticsContext(_ref) {
     status = _ref.status,
     url = _ref.url,
     error = _ref.error;
-  var isHyperlinkConnectExperimentEnabled = _featureGateJsClient.default.getExperimentValue('platform_linking_bluelink_connect_confluence', 'isEnabled', false) || _featureGateJsClient.default.getExperimentValue('platform_linking_bluelink_connect_jira', 'isEnabled', false);
-  var resolvedAttributes = isHyperlinkConnectExperimentEnabled ? getExtendedResolvedAttributes({
+  var resolvedAttributes = getExtendedResolvedAttributes({
     url: url,
     displayCategory: display === 'url' ? 'link' : 'smartLink'
-  }, response, status, error) : getExtendedResolvedAttributes({
-    url: url
   }, response, status, error);
   return {
     source: source,
@@ -53,13 +49,40 @@ var getSmartLinkAnalyticsContext = function getSmartLinkAnalyticsContext(_ref) {
  * Provides an analytics context data to supply attributes to events based on a URL
  * and the link state in the store
  */
+var useSmartLinkAnalyticsUtils = exports.useSmartLinkAnalyticsUtils = function useSmartLinkAnalyticsUtils() {
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    store = _useSmartLinkContext.store;
+  var getByUrl = (0, _react.useCallback)(function (url, props) {
+    var state = store ? (0, _linkingCommon.getUrl)(store, url) : undefined;
+    return getSmartLinkAnalyticsContext({
+      display: props === null || props === void 0 ? void 0 : props.display,
+      id: props === null || props === void 0 ? void 0 : props.id,
+      response: state === null || state === void 0 ? void 0 : state.details,
+      source: props === null || props === void 0 ? void 0 : props.source,
+      status: state === null || state === void 0 ? void 0 : state.status,
+      url: url,
+      error: state === null || state === void 0 ? void 0 : state.error
+    });
+  }, [store]);
+  return (0, _react.useMemo)(function () {
+    return {
+      getByUrl: getByUrl
+    };
+  }, [getByUrl]);
+};
+
+/**
+ * Provides an analytics context data to supply attributes to events based on a URL
+ * and the link state in the store
+ * @deprecated Use useSmartLinkAnalyticsUtils instead
+ */
 var useSmartLinkAnalyticsContext = exports.useSmartLinkAnalyticsContext = function useSmartLinkAnalyticsContext(_ref2) {
   var display = _ref2.display,
     id = _ref2.id,
     source = _ref2.source,
     url = _ref2.url;
-  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
-    store = _useSmartLinkContext.store;
+  var _useSmartLinkContext2 = (0, _linkProvider.useSmartLinkContext)(),
+    store = _useSmartLinkContext2.store;
   var state = store ? (0, _linkingCommon.getUrl)(store, url) : undefined;
   return (0, _react.useMemo)(function () {
     return getSmartLinkAnalyticsContext({

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: "0.0.0-development" || ''
+  packageVersion: "44.9.11" || ''
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -7,22 +7,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _useIntersectionObserver = _interopRequireDefault(require("../../../state/hooks/use-intersection-observer"));
-var _utils = require("../../../utils");
+var _useSmartLinkSeenEvent = require("../../../state/hooks/use-smart-link-seen-event");
 var _cardLoaderWrapper = _interopRequireDefault(require("../card-loader-wrapper"));
 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 withCardIntersectionObserver = function withCardIntersectionObserver(Component) {
   return function (props) {
     // TODO: NAVX-4682: Add feature parity to LazyIntersectionObserverCard for no lazy loading
-    var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isIntersected = _useState2[0],
-      setIsIntersected = _useState2[1];
-    var onIntersecting = (0, _react.useCallback)(function () {
-      setIsIntersected(true);
-    }, []);
+    var appearance = props.appearance,
+      children = props.children,
+      id = props.id,
+      onErrorCallback = props.onError,
+      ui = props.ui,
+      _props$url = props.url,
+      url = _props$url === void 0 ? '' : _props$url;
+    var _useSmartLinkSeenEven = (0, _useSmartLinkSeenEvent.useSmartLinkSeenEvent)({
+        appearance: appearance,
+        children: children,
+        id: id,
+        ui: ui,
+        url: url
+      }),
+      onIntersecting = _useSmartLinkSeenEven.onIntersecting,
+      onStatusSettled = _useSmartLinkSeenEven.onStatusSettled;
+    var onError = (0, _react.useCallback)(function (data) {
+      if (data !== null && data !== void 0 && data.status) {
+        onStatusSettled(data.status);
+      }
+      onErrorCallback === null || onErrorCallback === void 0 || onErrorCallback(data);
+    }, [onStatusSettled, onErrorCallback]);
     var ref = (0, _useIntersectionObserver.default)({
       onIntersecting: onIntersecting
     });
@@ -30,17 +44,8 @@ var withCardIntersectionObserver = function withCardIntersectionObserver(Compone
       appearance: props.appearance,
       ref: ref
     }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
-      isIntersected: isIntersected
+      onError: onError
     })));
   };
 };
-var withCardIntersectionObserverFallback = function withCardIntersectionObserverFallback(Component) {
-  return function (props) {
-    return /*#__PURE__*/_react.default.createElement(_cardLoaderWrapper.default, {
-      appearance: props.appearance
-    }, /*#__PURE__*/_react.default.createElement(Component, props));
-  };
-};
-var _default = exports.default = function _default(Component) {
-  return (0, _utils.isIntersectionObserverSupported)() ? withCardIntersectionObserver(Component) : withCardIntersectionObserverFallback(Component);
-};
+var _default = exports.default = withCardIntersectionObserver;

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

@@ -13,6 +13,7 @@ var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react
 var _state = require("../../../state");
 var _ufoExperiences = require("../../../state/analytics/ufoExperiences");
 var _useIntersectionObserver = _interopRequireDefault(require("../../../state/hooks/use-intersection-observer"));
+var _useSmartLinkSeenEvent = require("../../../state/hooks/use-smart-link-seen-event");
 var _shouldSample = require("../../../utils/shouldSample");
 var _cardLoaderWrapper = _interopRequireDefault(require("../card-loader-wrapper"));
 var _component = require("../component");
@@ -82,25 +83,44 @@ var LazyIntersectionObserverCardNew = function LazyIntersectionObserverCardNew(p
     _useState8 = (0, _slicedToArray2.default)(_useState7, 1),
     shouldSendRenderedUFOEvent = _useState8[0];
   var appearance = props.appearance,
-    url = props.url,
-    id = props.id;
+    children = props.children,
+    id = props.id,
+    onErrorCallback = props.onError,
+    ui = props.ui,
+    url = props.url;
   var prefetch = (0, _state.usePrefetch)(url);
   var ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  var _useSmartLinkSeenEven = (0, _useSmartLinkSeenEvent.useSmartLinkSeenEvent)({
+      appearance: appearance,
+      children: children,
+      id: id,
+      ui: ui,
+      url: url
+    }),
+    onSeenIntersecting = _useSmartLinkSeenEven.onIntersecting,
+    onStatusSettled = _useSmartLinkSeenEven.onStatusSettled;
+  var onError = (0, _react.useCallback)(function (data) {
+    if (data !== null && data !== void 0 && data.status) {
+      onStatusSettled(data.status);
+    }
+    onErrorCallback === null || onErrorCallback === void 0 || onErrorCallback(data);
+  }, [onStatusSettled, onErrorCallback]);
   var onIntersection = (0, _react.useCallback)(function (isIntersecting) {
     if (isIntersecting) {
       if (shouldSendRenderedUFOEvent) {
         (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
       }
+      onSeenIntersecting();
       setIsIntersected(true);
     } else {
       prefetch();
     }
-  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  }, [id, onSeenIntersecting, prefetch, shouldSendRenderedUFOEvent]);
   var ref = (0, _useIntersectionObserver.default)({
     onIntersection: onIntersection
   });
   var content = isIntersected ? /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, (0, _extends2.default)({}, props, {
-    isIntersected: true
+    onError: onError
   })) : /*#__PURE__*/_react.default.createElement(ComponentObserver, {
     ref: ref
   }, /*#__PURE__*/_react.default.createElement(_LoadingCardLink.LoadingCardLink, props));