@atlaskit/smart-card 26.6.2 → 26.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/smart-card
 
+## 26.7.0
+
+### Minor Changes
+
+- [`c5a897eb81d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5a897eb81d) - add statusDetails attribute
+
+### Patch Changes
+
+- Updated dependencies
+
+## 26.6.3
+
+### Patch Changes
+
+- [`fc0fa5ca4e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fc0fa5ca4e7) - [ux] Fix for a hover card issue introduced in 25.6.17
+
 ## 26.6.2
 
 ### Patch Changes

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

@@ -59,6 +59,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
   var extractedResourceType = (0, _helpers.getResourceType)(details);
   var extractedSubproduct = (0, _helpers.getSubproduct)(details);
   var extractedProduct = (0, _helpers.getProduct)(details);
+  var extractedStatusDetails = (0, _helpers.getStatusDetails)(details);
   var commonAttributes = (0, _react.useMemo)(function () {
     return {
       id: defaultId,
@@ -68,9 +69,10 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatchAnalyti
       destinationObjectType: extractedResourceType,
       destinationSubproduct: extractedSubproduct,
       destinationProduct: extractedProduct,
-      location: defaultLocation
+      location: defaultLocation,
+      statusDetails: extractedStatusDetails
     };
-  }, [defaultId, extractedDefinitionId, extractedExtensionKey, extractedResourceType, extractedSubproduct, extractedProduct, defaultLocation]);
+  }, [defaultId, extractedDefinitionId, extractedExtensionKey, extractedResourceType, extractedSubproduct, extractedProduct, defaultLocation, extractedStatusDetails]);
 
   /** Contains all ui analytics events */
   var ui = (0, _react.useMemo)(function () {

package/dist/cjs/state/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isVisible = exports.isFinalState = exports.isAccessible = exports.hasResolved = exports.getSubproduct = exports.getStatus = exports.getServices = exports.getResourceType = exports.getProduct = exports.getExtensionKey = exports.getDefinitionId = exports.getClickUrl = exports.getByDefinitionId = void 0;
+exports.isVisible = exports.isFinalState = exports.isAccessible = exports.hasResolved = exports.getSubproduct = exports.getStatusDetails = exports.getStatus = exports.getServices = exports.getResourceType = exports.getProduct = exports.getExtensionKey = exports.getDefinitionId = exports.getClickUrl = exports.getByDefinitionId = void 0;
 var _extractVisitUrl = require("../extractors/common/primitives/extractVisitUrl");
 var getByDefinitionId = function getByDefinitionId(definitionId, store) {
   var urls = Object.keys(store);
@@ -86,6 +86,11 @@ var getStatus = function getStatus(_ref3) {
   }
 };
 exports.getStatus = getStatus;
+var getStatusDetails = function getStatusDetails(details) {
+  var _details$meta6, _details$meta6$reques;
+  return details === null || details === void 0 ? void 0 : (_details$meta6 = details.meta) === null || _details$meta6 === void 0 ? void 0 : (_details$meta6$reques = _details$meta6.requestAccess) === null || _details$meta6$reques === void 0 ? void 0 : _details$meta6$reques.accessType;
+};
+exports.getStatusDetails = getStatusDetails;
 var isFinalState = function isFinalState(status) {
   return ['unauthorized', 'forbidden', 'errored', 'resolved', 'not_found'].indexOf(status) > -1;
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.6.2",
+	"version": "26.7.0",
 	"sideEffects": false
 }

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -74,7 +74,7 @@ var LinkWrapper = _styled.default.div(_templateObject || (_templateObject = (0,
   return wrapperStyles(props);
 });
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.LinkWrapper = LinkWrapper;
 var Wrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  margin-top: 10px;\n"])), function (props) {
   return wrapperStyles(props);
@@ -133,7 +133,7 @@ var Title = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _tag
 exports.Title = Title;
 var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.Byline = Byline;
 var Description = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), 18 / 12, 18 * 3);
 exports.Description = Description;

package/dist/cjs/view/EmbedCard/views/UnresolvedView.js

@@ -12,7 +12,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../messages");
 var _utils = require("../../common/utils");
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /** @jsx jsx */
 
 var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {

package/dist/cjs/view/EmbedModal/components/link-info/styled.js

@@ -8,7 +8,7 @@ exports.titleCss = exports.iconCss = exports.containerStyles = exports.actionCss
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 var containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: ", " ", " 14px\n    ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 exports.containerStyles = containerStyles;
 var iconSize = '24px';

package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -14,7 +14,7 @@ var _templateObject, _templateObject2;
 /** @jsx jsx */
 var MAX_COUNT = 4;
 var getStyles = function getStyles(size) {
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-flex;\n    ul {\n      margin-right: 8px;\n    }\n  "])));
   switch (size) {
     case _constants.SmartLinkSize.XLarge:

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/styled.js

@@ -15,7 +15,7 @@ exports.dropdownItemGroupStyles = dropdownItemGroupStyles;
 var sharedBlockStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 0.5rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n"])));
 var contentStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    color: ", ";\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(_colors.N800, ")"));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.contentStyles = contentStyles;
 var linkStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  cursor: pointer;\n  font-size: 0.875rem;\n  margin-top: 10px;\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), sharedBlockStyles, "var(--ds-space-400, 32px)", "var(--ds-space-025, 2px)");
 exports.linkStyles = linkStyles;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/styled.js

@@ -10,7 +10,7 @@ var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3;
 var triggerButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: ", ";\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-border-focused, #388BFF)");
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.triggerButtonStyles = triggerButtonStyles;
 var triggerLozengeStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: calc(-1 * ", ")\n      calc(-1 * ", ")\n      calc(-1 * ", ") -1px;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
 exports.triggerLozengeStyles = triggerLozengeStyles;

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

@@ -71,9 +71,15 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   var initHideCard = (0, _react2.useCallback)(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
+      // because fadeInTimeoutId.current is set by mouseOver which triggers multiple times in a hover,
+      // we want to clear out the reference to signify that there's no in-progress fade in event
+      fadeInTimeoutId.current = undefined;
     }
     if (resolveTimeOutId.current) {
       clearTimeout(resolveTimeOutId.current);
+      // because resolveTimeOutId.current is set by mouseOver which triggers multiple times in a hover,
+      // we want to clear out the reference to signify that there's no in-progress resolve event
+      resolveTimeOutId.current = undefined;
     }
     fadeOutTimeoutId.current = setTimeout(function () {
       return hideCard();
@@ -89,9 +95,15 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       }
       if (fadeInTimeoutId.current) {
         clearTimeout(fadeInTimeoutId.current);
+        // because fadeInTimeoutId.current is set by mouseOver which triggers multiple times in a hover,
+        // we want to clear out the reference to signify that there's no in-progress fade in event
+        fadeInTimeoutId.current = undefined;
       }
       if (resolveTimeOutId.current) {
         clearTimeout(resolveTimeOutId.current);
+        // because resolveTimeOutId.current is set by mouseOver which triggers multiple times in a hover,
+        // we want to clear out the reference to signify that there's no in-progress resolve event
+        resolveTimeOutId.current = undefined;
       }
     };
   }, []);
@@ -108,13 +120,18 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     }
   }, [linkState, loadMetadata]);
   var initShowCard = (0, _react2.useCallback)(function (event) {
+    // clearing out fadeOutTimeoutId in case it's already counting down to hide the card
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
     }
+
+    // starting to resolve the hover card if the store doesn't have data about the link yet
     initResolve();
+
     //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
     setMousePosition(event);
-    if (!isOpen) {
+    if (!isOpen && !fadeInTimeoutId.current) {
+      // setting a timeout to show a Hover Card after delay runs out
       fadeInTimeoutId.current = setTimeout(function () {
         //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
         if (parentSpan.current && mousePos.current) {

package/dist/cjs/view/InlineCard/Icon.js

@@ -27,9 +27,9 @@ var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;
   var skeletonCustomStyles = {
     position: 'absolute',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     top: '50%',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     left: '50%',
     transform: 'translate(-50%, -50%)',
     marginRight: "var(--ds-space-050, 4px)"

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

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { getUrl } from '@atlaskit/linking-common';
 import { chunkloadFailedEvent, connectFailedEvent, connectSucceededEvent, context, instrumentEvent, invokeFailedEvent, invokeSucceededEvent, screenAuthPopupEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiActionClickedEvent, uiAuthAlternateAccountEvent, uiAuthEvent, uiCardClickedEvent, uiClosedAuthEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiHoverCardViewedEvent, uiLearnMoreLinkClickedEvent, uiRenderFailedEvent, uiRenderSuccessEvent, uiSmartLinkStatusLozengeButtonClicked, uiSmartLinkStatusListItemButtonClicked, uiSmartLinkStatusOpenPreviewButtonClicked } from '../../utils/analytics';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
-import { getDefinitionId, getExtensionKey, getProduct, getResourceType, getSubproduct } from '../helpers';
+import { getDefinitionId, getExtensionKey, getProduct, getResourceType, getStatusDetails, getSubproduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { trackSmartLinkQuickActionFailed, trackSmartLinkQuickActionStarted, trackSmartLinkQuickActionSuccess, uiIframeDwelledEvent, uiIframeFocusedEvent } from '../../utils/analytics/analytics';
 import { useDispatchAnalytics } from './useDispatchAnalytics';
@@ -47,6 +47,7 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
   const extractedResourceType = getResourceType(details);
   const extractedSubproduct = getSubproduct(details);
   const extractedProduct = getProduct(details);
+  const extractedStatusDetails = getStatusDetails(details);
   const commonAttributes = useMemo(() => ({
     id: defaultId,
     definitionId: extractedDefinitionId,
@@ -55,8 +56,9 @@ export const useSmartLinkAnalytics = (url, _dispatchAnalytics, id, defaultLocati
     destinationObjectType: extractedResourceType,
     destinationSubproduct: extractedSubproduct,
     destinationProduct: extractedProduct,
-    location: defaultLocation
-  }), [defaultId, extractedDefinitionId, extractedExtensionKey, extractedResourceType, extractedSubproduct, extractedProduct, defaultLocation]);
+    location: defaultLocation,
+    statusDetails: extractedStatusDetails
+  }), [defaultId, extractedDefinitionId, extractedExtensionKey, extractedResourceType, extractedSubproduct, extractedProduct, defaultLocation, extractedStatusDetails]);
 
   /** Contains all ui analytics events */
   const ui = useMemo(() => ({

package/dist/es2019/state/helpers.js

@@ -71,6 +71,10 @@ export const getStatus = ({
       return 'resolved';
   }
 };
+export const getStatusDetails = details => {
+  var _details$meta6, _details$meta6$reques;
+  return details === null || details === void 0 ? void 0 : (_details$meta6 = details.meta) === null || _details$meta6 === void 0 ? void 0 : (_details$meta6$reques = _details$meta6.requestAccess) === null || _details$meta6$reques === void 0 ? void 0 : _details$meta6$reques.accessType;
+};
 export const isFinalState = status => {
   return ['unauthorized', 'forbidden', 'errored', 'resolved', 'not_found'].indexOf(status) > -1;
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.6.2",
+	"version": "26.7.0",
 	"sideEffects": false
 }

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

@@ -128,7 +128,7 @@ export const LinkWrapper = styled.div`
   }
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const Wrapper = styled.div`
   ${props => wrapperStyles(props)};
   margin-top: 10px;
@@ -261,7 +261,7 @@ export const Byline = styled.div`
   ${ellipsis('100%')};
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const Description = styled.div`
   margin-top: 7px;
   color: ${`var(--ds-text, ${colors.N800})`};

package/dist/es2019/view/EmbedCard/views/UnresolvedView.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/es2019/view/EmbedModal/components/link-info/styled.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const containerStyles = css`
   align-items: center;
   display: flex;

package/dist/es2019/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -5,7 +5,7 @@ import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 const MAX_COUNT = 4;
 const getStyles = size => {
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   const styles = css`
     display: inline-flex;
     ul {

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/styled.js

@@ -34,7 +34,7 @@ export const contentStyles = css`
   }
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const linkStyles = css`
   ${sharedBlockStyles};
 

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/styled.js

@@ -25,7 +25,7 @@ export const triggerButtonStyles = css`
   }
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const triggerLozengeStyles = css`
   align-items: center;
   display: flex;

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

@@ -53,9 +53,15 @@ export const HoverCardComponent = ({
   const initHideCard = useCallback(() => {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
+      // because fadeInTimeoutId.current is set by mouseOver which triggers multiple times in a hover,
+      // we want to clear out the reference to signify that there's no in-progress fade in event
+      fadeInTimeoutId.current = undefined;
     }
     if (resolveTimeOutId.current) {
       clearTimeout(resolveTimeOutId.current);
+      // because resolveTimeOutId.current is set by mouseOver which triggers multiple times in a hover,
+      // we want to clear out the reference to signify that there's no in-progress resolve event
+      resolveTimeOutId.current = undefined;
     }
     fadeOutTimeoutId.current = setTimeout(() => hideCard(), delay);
   }, [hideCard]);
@@ -69,9 +75,15 @@ export const HoverCardComponent = ({
       }
       if (fadeInTimeoutId.current) {
         clearTimeout(fadeInTimeoutId.current);
+        // because fadeInTimeoutId.current is set by mouseOver which triggers multiple times in a hover,
+        // we want to clear out the reference to signify that there's no in-progress fade in event
+        fadeInTimeoutId.current = undefined;
       }
       if (resolveTimeOutId.current) {
         clearTimeout(resolveTimeOutId.current);
+        // because resolveTimeOutId.current is set by mouseOver which triggers multiple times in a hover,
+        // we want to clear out the reference to signify that there's no in-progress resolve event
+        resolveTimeOutId.current = undefined;
       }
     };
   }, []);
@@ -88,13 +100,18 @@ export const HoverCardComponent = ({
     }
   }, [linkState, loadMetadata]);
   const initShowCard = useCallback(event => {
+    // clearing out fadeOutTimeoutId in case it's already counting down to hide the card
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
     }
+
+    // starting to resolve the hover card if the store doesn't have data about the link yet
     initResolve();
+
     //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
     setMousePosition(event);
-    if (!isOpen) {
+    if (!isOpen && !fadeInTimeoutId.current) {
+      // setting a timeout to show a Hover Card after delay runs out
       fadeInTimeoutId.current = setTimeout(() => {
         //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
         if (parentSpan.current && mousePos.current) {

package/dist/es2019/view/InlineCard/Icon.js

@@ -30,9 +30,9 @@ export const Shimmer = ({
 }) => {
   const skeletonCustomStyles = {
     position: 'absolute',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     top: '50%',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     left: '50%',
     transform: 'translate(-50%, -50%)',
     marginRight: "var(--ds-space-050, 4px)"

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

@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 import { getUrl } from '@atlaskit/linking-common';
 import { chunkloadFailedEvent as _chunkloadFailedEvent, connectFailedEvent as _connectFailedEvent, connectSucceededEvent as _connectSucceededEvent, context, instrumentEvent, invokeFailedEvent as _invokeFailedEvent, invokeSucceededEvent as _invokeSucceededEvent, screenAuthPopupEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiActionClickedEvent, uiAuthAlternateAccountEvent, uiAuthEvent, uiCardClickedEvent, uiClosedAuthEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiHoverCardViewedEvent, uiLearnMoreLinkClickedEvent, uiRenderFailedEvent, uiRenderSuccessEvent, uiSmartLinkStatusLozengeButtonClicked, uiSmartLinkStatusListItemButtonClicked, uiSmartLinkStatusOpenPreviewButtonClicked } from '../../utils/analytics';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
-import { getDefinitionId, getExtensionKey, getProduct, getResourceType, getSubproduct } from '../helpers';
+import { getDefinitionId, getExtensionKey, getProduct, getResourceType, getStatusDetails, getSubproduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { trackSmartLinkQuickActionFailed, trackSmartLinkQuickActionStarted, trackSmartLinkQuickActionSuccess, uiIframeDwelledEvent, uiIframeFocusedEvent } from '../../utils/analytics/analytics';
 import { useDispatchAnalytics } from './useDispatchAnalytics';
@@ -52,6 +52,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
   var extractedResourceType = getResourceType(details);
   var extractedSubproduct = getSubproduct(details);
   var extractedProduct = getProduct(details);
+  var extractedStatusDetails = getStatusDetails(details);
   var commonAttributes = useMemo(function () {
     return {
       id: defaultId,
@@ -61,9 +62,10 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, _dispatch
       destinationObjectType: extractedResourceType,
       destinationSubproduct: extractedSubproduct,
       destinationProduct: extractedProduct,
-      location: defaultLocation
+      location: defaultLocation,
+      statusDetails: extractedStatusDetails
     };
-  }, [defaultId, extractedDefinitionId, extractedExtensionKey, extractedResourceType, extractedSubproduct, extractedProduct, defaultLocation]);
+  }, [defaultId, extractedDefinitionId, extractedExtensionKey, extractedResourceType, extractedSubproduct, extractedProduct, defaultLocation, extractedStatusDetails]);
 
   /** Contains all ui analytics events */
   var ui = useMemo(function () {

package/dist/esm/state/helpers.js

@@ -68,6 +68,10 @@ export var getStatus = function getStatus(_ref3) {
       return 'resolved';
   }
 };
+export var getStatusDetails = function getStatusDetails(details) {
+  var _details$meta6, _details$meta6$reques;
+  return details === null || details === void 0 ? void 0 : (_details$meta6 = details.meta) === null || _details$meta6 === void 0 ? void 0 : (_details$meta6$reques = _details$meta6.requestAccess) === null || _details$meta6$reques === void 0 ? void 0 : _details$meta6$reques.accessType;
+};
 export var isFinalState = function isFinalState(status) {
   return ['unauthorized', 'forbidden', 'errored', 'resolved', 'not_found'].indexOf(status) > -1;
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.6.2",
+	"version": "26.7.0",
 	"sideEffects": false
 }

package/dist/esm/view/EmbedCard/components/styled.js

@@ -59,7 +59,7 @@ export var LinkWrapper = styled.div(_templateObject || (_templateObject = _tagge
   return wrapperStyles(props);
 });
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  margin-top: 10px;\n"])), function (props) {
   return wrapperStyles(props);
 });
@@ -107,7 +107,7 @@ export var ContentWrapper = styled.div(_templateObject8 || (_templateObject8 = _
 export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N900, ")"), 20 / 16, 20 * 4);
 export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), 18 / 12, 18 * 3);
 export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-050, 4px)");
 export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: ", " 0 ", "\n    ", ";\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-space-050, 4px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref13) {

package/dist/esm/view/EmbedCard/views/UnresolvedView.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/esm/view/EmbedModal/components/link-info/styled.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: ", " ", " 14px\n    ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 var iconSize = '24px';
 export var iconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);

package/dist/esm/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -7,7 +7,7 @@ import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 var MAX_COUNT = 4;
 var getStyles = function getStyles(size) {
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n    ul {\n      margin-right: 8px;\n    }\n  "])));
   switch (size) {
     case SmartLinkSize.XLarge:

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/styled.js

@@ -7,7 +7,7 @@ export var dropdownItemGroupStyles = css(_templateObject || (_templateObject = _
 var sharedBlockStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 0.5rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n"])));
 export var contentStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n\n  margin-top: ", ";\n  align-items: flex-start;\n\n  > span,\n  > div {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    color: ", ";\n  }\n"])), sharedBlockStyles, "var(--ds-space-025, 2px)", "var(--ds-text, ".concat(N800, ")"));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var linkStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n\n  cursor: pointer;\n  font-size: 0.875rem;\n  margin-top: 10px;\n  margin-left: ", ";\n  margin-bottom: ", ";\n"])), sharedBlockStyles, "var(--ds-space-400, 32px)", "var(--ds-space-025, 2px)");
 export var textStyles = function textStyles(maxLines) {
   return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  line-height: 1rem;\n  white-space: normal;\n  ", ";\n"])), getTruncateStyles(maxLines));

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/styled.js

@@ -3,6 +3,6 @@ var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 export var triggerButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: ", ";\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-border-focused, #388BFF)");
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var triggerLozengeStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: calc(-1 * ", ")\n      calc(-1 * ", ")\n      calc(-1 * ", ") -1px;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
 export var dropdownItemGroupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  max-height: 300px;\n  overflow-y: auto;\n\n  button {\n    padding: ", " ", ";\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-150, 12px)", "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");

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

@@ -60,9 +60,15 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   var initHideCard = useCallback(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
+      // because fadeInTimeoutId.current is set by mouseOver which triggers multiple times in a hover,
+      // we want to clear out the reference to signify that there's no in-progress fade in event
+      fadeInTimeoutId.current = undefined;
     }
     if (resolveTimeOutId.current) {
       clearTimeout(resolveTimeOutId.current);
+      // because resolveTimeOutId.current is set by mouseOver which triggers multiple times in a hover,
+      // we want to clear out the reference to signify that there's no in-progress resolve event
+      resolveTimeOutId.current = undefined;
     }
     fadeOutTimeoutId.current = setTimeout(function () {
       return hideCard();
@@ -78,9 +84,15 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       }
       if (fadeInTimeoutId.current) {
         clearTimeout(fadeInTimeoutId.current);
+        // because fadeInTimeoutId.current is set by mouseOver which triggers multiple times in a hover,
+        // we want to clear out the reference to signify that there's no in-progress fade in event
+        fadeInTimeoutId.current = undefined;
       }
       if (resolveTimeOutId.current) {
         clearTimeout(resolveTimeOutId.current);
+        // because resolveTimeOutId.current is set by mouseOver which triggers multiple times in a hover,
+        // we want to clear out the reference to signify that there's no in-progress resolve event
+        resolveTimeOutId.current = undefined;
       }
     };
   }, []);
@@ -97,13 +109,18 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     }
   }, [linkState, loadMetadata]);
   var initShowCard = useCallback(function (event) {
+    // clearing out fadeOutTimeoutId in case it's already counting down to hide the card
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
     }
+
+    // starting to resolve the hover card if the store doesn't have data about the link yet
     initResolve();
+
     //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
     setMousePosition(event);
-    if (!isOpen) {
+    if (!isOpen && !fadeInTimeoutId.current) {
+      // setting a timeout to show a Hover Card after delay runs out
       fadeInTimeoutId.current = setTimeout(function () {
         //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
         if (parentSpan.current && mousePos.current) {

package/dist/esm/view/InlineCard/Icon.js

@@ -19,9 +19,9 @@ export var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;
   var skeletonCustomStyles = {
     position: 'absolute',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     top: '50%',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     left: '50%',
     transform: 'translate(-50%, -50%)',
     marginRight: "var(--ds-space-050, 4px)"

package/dist/types/state/helpers.d.ts

@@ -13,4 +13,5 @@ export declare const hasResolved: (details?: JsonLd.Response) => boolean | undef
 export declare const isAccessible: ({ meta: { access } }: JsonLd.Response) => boolean;
 export declare const isVisible: ({ meta: { visibility } }: JsonLd.Response) => boolean;
 export declare const getStatus: ({ meta }: JsonLd.Response) => CardType;
+export declare const getStatusDetails: (details?: JsonLd.Response) => string | undefined;
 export declare const isFinalState: (status: CardType) => boolean;

package/dist/types/utils/analytics/types.d.ts

@@ -14,6 +14,7 @@ export interface CommonEventProps {
     destinationSubproduct?: DestinationSubproduct | string;
     destinationProduct?: DestinationProduct | string;
     location?: string;
+    statusDetails?: string;
 }
 export type ResolvedEventProps = CommonEventProps & {
     id: string;

package/dist/types-ts4.5/state/helpers.d.ts

@@ -13,4 +13,5 @@ export declare const hasResolved: (details?: JsonLd.Response) => boolean | undef
 export declare const isAccessible: ({ meta: { access } }: JsonLd.Response) => boolean;
 export declare const isVisible: ({ meta: { visibility } }: JsonLd.Response) => boolean;
 export declare const getStatus: ({ meta }: JsonLd.Response) => CardType;
+export declare const getStatusDetails: (details?: JsonLd.Response) => string | undefined;
 export declare const isFinalState: (status: CardType) => boolean;

package/dist/types-ts4.5/utils/analytics/types.d.ts

@@ -14,6 +14,7 @@ export interface CommonEventProps {
     destinationSubproduct?: DestinationSubproduct | string;
     destinationProduct?: DestinationProduct | string;
     location?: string;
+    statusDetails?: string;
 }
 export type ResolvedEventProps = CommonEventProps & {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.6.2",
+  "version": "26.7.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,7 +42,7 @@
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.2.0",
-    "@atlaskit/link-analytics": "^8.0.2",
+    "@atlaskit/link-analytics": "^8.1.0",
     "@atlaskit/link-client-extension": "^1.5.0",
     "@atlaskit/linking-common": "^3.1.0",
     "@atlaskit/linking-types": "^8.0.0",
@@ -94,7 +94,7 @@
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/select": "^16.5.0",
-    "@atlaskit/table-tree": "^9.5.0",
+    "@atlaskit/table-tree": "^9.6.0",
     "@atlaskit/tabs": "^13.4.0",
     "@atlaskit/textfield": "^5.5.0",
     "@atlaskit/toggle": "^12.6.0",

package/report.api.md

@@ -377,6 +377,8 @@ interface CommonEventProps {
   location?: string;
   // (undocumented)
   resourceType?: string;
+  // (undocumented)
+  statusDetails?: string;
 }
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -282,6 +282,8 @@ interface CommonEventProps {
     location?: string;
     // (undocumented)
     resourceType?: string;
+    // (undocumented)
+    statusDetails?: string;
 }
 
 // @public (undocumented)