@atlaskit/smart-card 25.7.3 → 25.9.0

package/dist/es2019/extractors/flexible/index.js

@@ -1,6 +1,6 @@
 import { extractSummary } from '../common/primitives';
 import { extractLinkIcon } from './icon';
-import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractOwnedBy } from './utils';
+import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractLocation, extractOwnedBy } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink } from '@atlaskit/linking-common/extractors';
 import extractPriority from './extract-priority';
@@ -42,6 +42,7 @@ const extractFlexibleUiContext = ({
     downloadAction: extractDownloadAction(data),
     latestCommit: extractLatestCommit(data),
     linkIcon: extractLinkIcon(response, renderers),
+    location: extractLocation(data),
     modifiedBy: extractModifiedBy(data),
     modifiedOn: extractDateUpdated(data),
     preview: extractPreview(data),

package/dist/es2019/extractors/flexible/utils.js

@@ -38,4 +38,16 @@ export const extractTargetBranch = data => extractLinkName(data['atlassian:merge
 export const extractChecklistProgress = data => {
   const checkItemsObj = extractValue(data, 'atlassian:checkItems');
   return checkItemsObj ? `${checkItemsObj.checkedItems}/${checkItemsObj.totalItems}` : undefined;
+};
+export const extractLocation = data => {
+  const {
+    url,
+    name
+  } = extractValue(data, 'location') || {};
+  if (url && name && typeof url === 'string') {
+    return {
+      text: name,
+      url
+    };
+  }
 };

package/dist/es2019/state/actions/index.js

@@ -16,14 +16,21 @@ export const useSmartCardActions = (id, url, analytics) => {
     getState,
     dispatch
   } = store;
-  const {
-    details,
-    status,
-    metadataStatus
-  } = getState()[url] || {
-    status: SmartLinkStatus.Pending,
-    details: undefined
-  };
+  const getSmartLinkState = useCallback(() => {
+    var _getState$url;
+    const {
+      details,
+      status,
+      metadataStatus
+    } = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : {
+      status: SmartLinkStatus.Pending
+    };
+    return {
+      details,
+      status,
+      metadataStatus
+    };
+  }, [getState, url]);
   const setMetadataStatus = useCallback(metadataStatus => {
     dispatch(cardAction(ACTION_UPDATE_METADATA_STATUS, {
       url
@@ -31,6 +38,9 @@ export const useSmartCardActions = (id, url, analytics) => {
   }, [dispatch, url]);
   const resolve = useCallback(async (resourceUrl = url, isReloading = false, isMetadataRequest = false) => resolveUrl(resourceUrl, isReloading, isMetadataRequest, id), [id, resolveUrl, url]);
   const register = useCallback(() => {
+    const {
+      details
+    } = getSmartLinkState();
     if (!details) {
       dispatch(cardAction(ACTION_RESOLVING, {
         url
@@ -38,23 +48,33 @@ export const useSmartCardActions = (id, url, analytics) => {
       setMetadataStatus('pending');
     }
     return resolve();
-  }, [details, resolve, dispatch, url, setMetadataStatus]);
+  }, [getSmartLinkState, resolve, dispatch, url, setMetadataStatus]);
   const reload = useCallback(() => {
+    const {
+      details
+    } = getSmartLinkState();
     const definitionId = getDefinitionId(details);
     if (definitionId) {
       getByDefinitionId(definitionId, getState()).map(url => resolve(url, true));
     } else {
       resolve(url, true);
     }
-  }, [details, url, getState, resolve]);
+  }, [getSmartLinkState, url, getState, resolve]);
   const loadMetadata = useCallback(() => {
+    const {
+      metadataStatus
+    } = getSmartLinkState();
     //metadataStatus will be undefined for SSR links only
     if (metadataStatus === undefined) {
       setMetadataStatus('pending');
       return resolve(url, false, true);
     }
-  }, [metadataStatus, resolve, setMetadataStatus, url]);
+  }, [getSmartLinkState, resolve, setMetadataStatus, url]);
   const authorize = useCallback(appearance => {
+    const {
+      details,
+      status
+    } = getSmartLinkState();
     const definitionId = getDefinitionId(details);
     const extensionKey = getExtensionKey(details);
     const services = getServices(details);
@@ -106,7 +126,7 @@ export const useSmartCardActions = (id, url, analytics) => {
         reload();
       });
     }
-  }, [analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload, details, status]);
+  }, [getSmartLinkState, analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload]);
   const invoke = useCallback(async (opts, appearance) => {
     const {
       key,

package/dist/es2019/state/hooks/use-resolve/index.js

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
 import { addMetadataToExperience } from '../../analytics';
 import { getStatus } from '../../helpers';
 import { ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, ACTION_RESOLVED, ACTION_UPDATE_METADATA_STATUS, APIError, cardAction } from '@atlaskit/linking-common';
@@ -98,18 +99,26 @@ const useResolve = () => {
       return;
     }
 
-    //if a link resolves normally, metadata will also always be resolved
-    setMetadataStatus(resourceUrl, 'resolved');
-    // Dispatch Analytics and resolved card action - including unauthorized states.
-    if (isReloading) {
-      dispatch(cardAction(ACTION_RELOADING, {
-        url: resourceUrl
-      }, response));
-    } else {
-      dispatch(cardAction(ACTION_RESOLVED, {
-        url: resourceUrl
-      }, response, undefined, undefined, isMetadataRequest));
-    }
+    /**
+     * Using unstable_batchedUpdates because this store update happens async and trigers a rerender
+     * more info:
+     * https://github.com/facebook/react/blob/v18.2.0/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L113
+     * https://react-redux.js.org/api/batch
+     */
+    unstable_batchedUpdates(() => {
+      //if a link resolves normally, metadata will also always be resolved
+      setMetadataStatus(resourceUrl, 'resolved');
+      // Dispatch Analytics and resolved card action - including unauthorized states.
+      if (isReloading) {
+        dispatch(cardAction(ACTION_RELOADING, {
+          url: resourceUrl
+        }, response));
+      } else {
+        dispatch(cardAction(ACTION_RESOLVED, {
+          url: resourceUrl
+        }, response, undefined, undefined, isMetadataRequest));
+      }
+    });
   }, [dispatch, handleResolvedLinkError, hasAuthFlowSupported, setMetadataStatus]);
   return useCallback(async (url, isReloading = false, isMetadataRequest = false, id = '') => {
     const {

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

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getResolvedAttributes, getUrlAttributes } from '@atlaskit/link-analytics/resolved-attributes';
+import { isFlexibleUiCard } from '../flexible';
+import { CardDisplay } from '../../constants';
+import { useSmartCardState as useSmartLinkState } from '../../state/store';
+export const SmartLinkAnalyticsContext = ({
+  children,
+  url,
+  appearance,
+  id
+}) => {
+  const {
+    details,
+    status
+  } = useSmartLinkState(url);
+  const resolvedAttributes = getResolvedAttributes({
+    url
+  }, details, status);
+  const {
+    urlHash
+  } = getUrlAttributes(url);
+  const isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
+  const display = isFlexibleUi ? CardDisplay.Flexible : appearance;
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      attributes: {
+        ...resolvedAttributes,
+        urlHash,
+        display,
+        id
+      }
+    }
+  }, children);
+};

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -71,7 +71,10 @@ const FlexibleResolvedView = ({
     }, {
       name: ElementName.State
     }],
-    hideRetry: true
+    hideRetry: true,
+    subtitle: [{
+      name: ElementName.Location
+    }]
   }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: metadata,
     maxLines: 1

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

@@ -12,7 +12,8 @@ import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
 import { CardDisplay } from '../../constants';
 import { fireLinkClickedEvent } from '../../utils/analytics/click';
-export function CardWithUrlContent({
+import { SmartLinkAnalyticsContext } from '../../utils/analytics/SmartLinkAnalyticsContext';
+function Component({
   id,
   url,
   isSelected,
@@ -254,4 +255,9 @@ export function CardWithUrlContent({
         onIframeFocus: onIframeFocus
       });
   }
-}
+}
+export const CardWithUrlContent = props => /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
+  url: props.url,
+  appearance: props.appearance,
+  id: props.id
+}, /*#__PURE__*/React.createElement(Component, props));

package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 import { getBaseStyles, getGapSize, renderChildren } from '../utils';
 import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 const getAlignmentStyles = align => {
@@ -65,12 +65,13 @@ const getHorizontalDirectionStyles = (size, align) => {
     ${getGapStyles(size, align)}
   `;
 };
-export const getElementGroupStyles = (direction, size, align, width) => css`
+export const getElementGroupStyles = (direction, size, align, width, position) => css`
   ${getBaseStyles(direction, size)}
   ${getAlignmentStyles(align)}
   min-width: 10%;
   ${width === SmartLinkWidth.Flexible ? `flex: 1 3;` : ''}
   ${direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : ''}
+  ${position === SmartLinkPosition.Top ? 'align-self: flex-start;' : ''}
 `;
 
 /**
@@ -87,9 +88,10 @@ const ElementGroup = ({
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-group',
-  width = SmartLinkWidth.FitToContent
+  width = SmartLinkWidth.FitToContent,
+  position = SmartLinkPosition.Center
 }) => jsx("div", {
-  css: [getElementGroupStyles(direction, size, align, width), overrideCss],
+  css: [getElementGroupStyles(direction, size, align, width, position), overrideCss],
   "data-smart-element-group": true,
   "data-testid": testId
 }, renderChildren(children, size));

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { css } from '@emotion/react';
 import { LinkIcon } from '../../../elements';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
-import { SmartLinkAlignment, SmartLinkDirection, SmartLinkWidth } from '../../../../../../constants';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkWidth } from '../../../../../../constants';
 import { renderElementItems } from '../../utils';
 
 /**
@@ -29,12 +30,16 @@ const TitleBlockResolvedView = ({
     position: position
   }), /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Vertical,
-    width: SmartLinkWidth.Flexible
+    width: SmartLinkWidth.Flexible,
+    overrideCss: css`
+          gap: 0.25rem;
+        `
   }, title, subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
-    align: SmartLinkAlignment.Right
+    align: SmartLinkAlignment.Right,
+    position: SmartLinkPosition.Top
   }, metadataElements), actionGroup);
 };
 export default TitleBlockResolvedView;

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -15,14 +15,12 @@ export const ElementDisplaySchema = {
   [ElementName.ChecklistProgress]: ['inline'],
   [ElementName.CollaboratorGroup]: ['inline'],
   [ElementName.CommentCount]: ['inline'],
-  [ElementName.ViewCount]: ['inline'],
-  [ElementName.ReactCount]: ['inline'],
-  [ElementName.VoteCount]: ['inline'],
   [ElementName.CreatedBy]: ['inline'],
   [ElementName.CreatedOn]: ['inline'],
   [ElementName.DueOn]: ['inline'],
   [ElementName.LatestCommit]: ['inline'],
   [ElementName.LinkIcon]: ['inline'],
+  [ElementName.Location]: ['inline'],
   [ElementName.ModifiedBy]: ['inline'],
   [ElementName.ModifiedOn]: ['inline'],
   [ElementName.OwnedBy]: ['inline'],
@@ -30,12 +28,15 @@ export const ElementDisplaySchema = {
   [ElementName.Priority]: ['inline'],
   [ElementName.ProgrammingLanguage]: ['inline'],
   [ElementName.Provider]: ['inline'],
+  [ElementName.ReactCount]: ['inline'],
   [ElementName.Snippet]: ['block'],
   [ElementName.SourceBranch]: ['inline'],
   [ElementName.State]: ['inline'],
   [ElementName.SubscriberCount]: ['inline'],
   [ElementName.TargetBranch]: ['inline'],
-  [ElementName.Title]: ['inline']
+  [ElementName.Title]: ['inline'],
+  [ElementName.ViewCount]: ['inline'],
+  [ElementName.VoteCount]: ['inline']
 };
 const getDirectionStyles = direction => {
   switch (direction) {

package/dist/es2019/view/FlexibleCard/components/elements/index.js

@@ -52,6 +52,12 @@ export const LatestCommit = createElement(ElementName.LatestCommit);
  * @see Icon
  */
 export const LinkIcon = createElement(ElementName.LinkIcon);
+/**
+ * Creates a Location Link element.
+ * This represents the location or container of the resource.
+ * @see Link
+ */
+export const Location = createElement(ElementName.Location);
 /**
  * Creates a ModifiedBy Text element using the data from ModifiedBy in the Flexible UI Context.
  * @see Text

package/dist/es2019/view/FlexibleCard/components/elements/link/index.js

@@ -2,7 +2,7 @@
 import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
-import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
+import { SmartLinkInternalTheme, SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 import useMouseDownEvent from '../../../../../state/analytics/useMouseDownEvent';
@@ -14,6 +14,15 @@ const containerStyles = css`
 `;
 const getThemeStyles = theme => {
   switch (theme) {
+    case SmartLinkInternalTheme.Grey:
+      return css`
+        color: ${"var(--ds-text-subtlest, #626F86)"};
+        :hover {
+          color: ${"var(--ds-text-subtlest, #626F86)"};
+          text-decoration: underline;
+        }
+        font-size: 12px;
+      `;
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case SmartLinkTheme.Black:
       return css`

package/dist/es2019/view/FlexibleCard/components/elements/utils.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext } from 'react';
 import { FormattedDate } from 'react-intl-next';
 import { css } from '@emotion/react';
-import { ElementName, IconType } from '../../../../constants';
+import { ElementName, IconType, SmartLinkInternalTheme } from '../../../../constants';
 import Icon from './icon';
 import Link from './link';
 import Lozenge from './lozenge';
@@ -126,6 +126,12 @@ const elementMappings = {
   },
   [ElementName.Title]: {
     component: Link
+  },
+  [ElementName.Location]: {
+    component: Link,
+    props: {
+      theme: SmartLinkInternalTheme.Grey
+    }
   }
 };
 const getContextKey = name => {

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

@@ -9,9 +9,11 @@ import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
 import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
 import { CardDisplay } from '../../../constants';
+import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
 export const HoverCardComponent = ({
   children,
   url,
+  id,
   analyticsHandler,
   analytics,
   canOpen = true,
@@ -112,7 +114,11 @@ export const HoverCardComponent = ({
   }, [closeOnChildClick, hideCard]);
   const content = useCallback(({
     update
-  }) => jsx(HoverCardContent, {
+  }) => jsx(SmartLinkAnalyticsContext, {
+    url: url,
+    appearance: CardDisplay.HoverCardPreview,
+    id: id
+  }, jsx(HoverCardContent, {
     onMouseEnter: initShowCard,
     onMouseLeave: initHideCard,
     analytics: analytics,
@@ -122,8 +128,9 @@ export const HoverCardComponent = ({
     onResolve: update,
     renderers: renderers,
     showServerActions: showServerActions,
-    url: url
-  }), [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url]);
+    url: url,
+    id: id
+  })), [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
   const trigger = useCallback(triggerProps => jsx("span", {
     ref: parentSpan
   }, jsx("span", _extends({}, triggerProps, {

package/dist/es2019/view/HoverCard/styled.js

@@ -43,7 +43,7 @@ export const titleBlockCss = css`
   [data-smart-element-group] {
     // gap between title and subtitle
     gap: 0.06rem;
-
+    display: flex;
     /* subtitle element group */
     > [data-smart-element-group] {
       > span {

package/dist/es2019/view/HoverCard/utils.js

@@ -44,7 +44,7 @@ export const getSimulatedMetadata = (extensionKey = '', data) => {
         metadata: {
           primary: [ElementName.AuthorGroup, ElementName.State, ElementName.DueOn],
           secondary: [ElementName.ReactCount, ElementName.CommentCount, ElementName.AttachmentCount, ElementName.ChecklistProgress],
-          subtitle: []
+          subtitle: [ElementName.Location]
         }
       };
     case 'watermelon-object-provider':

package/dist/esm/constants.js

@@ -63,16 +63,20 @@ export var SmartLinkStatus;
   SmartLinkStatus["Fallback"] = "fallback";
 })(SmartLinkStatus || (SmartLinkStatus = {}));
 export var SmartLinkTheme;
+(function (SmartLinkTheme) {
+  SmartLinkTheme["Black"] = "black";
+  SmartLinkTheme["Link"] = "link";
+})(SmartLinkTheme || (SmartLinkTheme = {}));
+export var SmartLinkInternalTheme;
 
 /**
  * Determines whether the container size will fit to the content
  * or expand to the available width or the parent component.
  * Similar to flex's flex-grow concept.
  */
-(function (SmartLinkTheme) {
-  SmartLinkTheme["Black"] = "black";
-  SmartLinkTheme["Link"] = "link";
-})(SmartLinkTheme || (SmartLinkTheme = {}));
+(function (SmartLinkInternalTheme) {
+  SmartLinkInternalTheme["Grey"] = "grey";
+})(SmartLinkInternalTheme || (SmartLinkInternalTheme = {}));
 export var SmartLinkWidth;
 
 /**
@@ -109,7 +113,9 @@ export var ElementName;
   ElementName["CreatedBy"] = "CreatedBy";
   ElementName["CreatedOn"] = "CreatedOn";
   ElementName["DueOn"] = "DueOn";
+  ElementName["LatestCommit"] = "LatestCommit";
   ElementName["LinkIcon"] = "LinkIcon";
+  ElementName["Location"] = "Location";
   ElementName["ModifiedBy"] = "ModifiedBy";
   ElementName["ModifiedOn"] = "ModifiedOn";
   ElementName["OwnedBy"] = "OwnedBy";
@@ -126,7 +132,6 @@ export var ElementName;
   ElementName["Title"] = "Title";
   ElementName["ViewCount"] = "ViewCount";
   ElementName["VoteCount"] = "VoteCount";
-  ElementName["LatestCommit"] = "LatestCommit";
 })(ElementName || (ElementName = {}));
 export var ActionName;
 

package/dist/esm/extractors/flexible/index.js

@@ -1,6 +1,6 @@
 import { extractSummary } from '../common/primitives';
 import { extractLinkIcon } from './icon';
-import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractOwnedBy } from './utils';
+import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractLocation, extractOwnedBy } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink } from '@atlaskit/linking-common/extractors';
 import extractPriority from './extract-priority';
@@ -42,6 +42,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     downloadAction: extractDownloadAction(data),
     latestCommit: extractLatestCommit(data),
     linkIcon: extractLinkIcon(response, renderers),
+    location: extractLocation(data),
     modifiedBy: extractModifiedBy(data),
     modifiedOn: extractDateUpdated(data),
     preview: extractPreview(data),

package/dist/esm/extractors/flexible/utils.js

@@ -59,4 +59,15 @@ export var extractTargetBranch = function extractTargetBranch(data) {
 export var extractChecklistProgress = function extractChecklistProgress(data) {
   var checkItemsObj = extractValue(data, 'atlassian:checkItems');
   return checkItemsObj ? "".concat(checkItemsObj.checkedItems, "/").concat(checkItemsObj.totalItems) : undefined;
+};
+export var extractLocation = function extractLocation(data) {
+  var _ref = extractValue(data, 'location') || {},
+    url = _ref.url,
+    name = _ref.name;
+  if (url && name && typeof url === 'string') {
+    return {
+      text: name,
+      url: url
+    };
+  }
 };

package/dist/esm/state/actions/index.js

@@ -16,13 +16,20 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     connections = _useSmartLinkContext.connections;
   var getState = store.getState,
     dispatch = store.dispatch;
-  var _ref = getState()[url] || {
-      status: SmartLinkStatus.Pending,
-      details: undefined
-    },
-    details = _ref.details,
-    status = _ref.status,
-    metadataStatus = _ref.metadataStatus;
+  var getSmartLinkState = useCallback(function () {
+    var _getState$url;
+    var _ref = (_getState$url = getState()[url]) !== null && _getState$url !== void 0 ? _getState$url : {
+        status: SmartLinkStatus.Pending
+      },
+      details = _ref.details,
+      status = _ref.status,
+      metadataStatus = _ref.metadataStatus;
+    return {
+      details: details,
+      status: status,
+      metadataStatus: metadataStatus
+    };
+  }, [getState, url]);
   var setMetadataStatus = useCallback(function (metadataStatus) {
     dispatch(cardAction(ACTION_UPDATE_METADATA_STATUS, {
       url: url
@@ -49,6 +56,8 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     }, _callee);
   })), [id, resolveUrl, url]);
   var register = useCallback(function () {
+    var _getSmartLinkState = getSmartLinkState(),
+      details = _getSmartLinkState.details;
     if (!details) {
       dispatch(cardAction(ACTION_RESOLVING, {
         url: url
@@ -56,8 +65,10 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
       setMetadataStatus('pending');
     }
     return resolve();
-  }, [details, resolve, dispatch, url, setMetadataStatus]);
+  }, [getSmartLinkState, resolve, dispatch, url, setMetadataStatus]);
   var reload = useCallback(function () {
+    var _getSmartLinkState2 = getSmartLinkState(),
+      details = _getSmartLinkState2.details;
     var definitionId = getDefinitionId(details);
     if (definitionId) {
       getByDefinitionId(definitionId, getState()).map(function (url) {
@@ -66,15 +77,20 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     } else {
       resolve(url, true);
     }
-  }, [details, url, getState, resolve]);
+  }, [getSmartLinkState, url, getState, resolve]);
   var loadMetadata = useCallback(function () {
+    var _getSmartLinkState3 = getSmartLinkState(),
+      metadataStatus = _getSmartLinkState3.metadataStatus;
     //metadataStatus will be undefined for SSR links only
     if (metadataStatus === undefined) {
       setMetadataStatus('pending');
       return resolve(url, false, true);
     }
-  }, [metadataStatus, resolve, setMetadataStatus, url]);
+  }, [getSmartLinkState, resolve, setMetadataStatus, url]);
   var authorize = useCallback(function (appearance) {
+    var _getSmartLinkState4 = getSmartLinkState(),
+      details = _getSmartLinkState4.details,
+      status = _getSmartLinkState4.status;
     var definitionId = getDefinitionId(details);
     var extensionKey = getExtensionKey(details);
     var services = getServices(details);
@@ -126,7 +142,7 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
         reload();
       });
     }
-  }, [analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload, details, status]);
+  }, [getSmartLinkState, analytics.ui, analytics.screen, analytics.track, analytics.operational, id, reload]);
   var invoke = useCallback( /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(opts, appearance) {
       var key, action, source, markName, response;