@atlaskit/smart-card 23.14.0 → 23.14.2

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

@@ -15,10 +15,8 @@ export const getContextByStatus = (url, status, details, renderers) => {
         title: url,
         url
       };
-
     case SmartLinkStatus.Resolved:
       return extractFlexibleLinkContext(details, renderers);
-
     case SmartLinkStatus.Unauthorized:
     case SmartLinkStatus.Forbidden:
     case SmartLinkStatus.NotFound:
@@ -35,43 +33,32 @@ export const getContextByStatus = (url, status, details, renderers) => {
       };
   }
 };
-
 const getForbiddenMessageKey = meta => {
   var _meta$requestAccess;
-
   const accessType = meta === null || meta === void 0 ? void 0 : (_meta$requestAccess = meta.requestAccess) === null || _meta$requestAccess === void 0 ? void 0 : _meta$requestAccess.accessType;
-
   switch (accessType) {
     case 'DIRECT_ACCESS':
       return 'join_to_view';
-
     case 'REQUEST_ACCESS':
       return 'request_access_to_view';
-
     case 'PENDING_REQUEST_EXISTS':
       return 'pending_request';
-
     case 'FORBIDDEN':
       return 'forbidden_access';
-
     case 'DENIED_REQUEST_EXISTS':
       return 'request_denied';
-
     default:
       return 'restricted_link';
   }
 };
-
 export const getRetryOptions = (url, status, details, onAuthorize) => {
   var _details$meta, _access$action;
-
   const data = details && details.data || getEmptyJsonLd();
   const provider = extractProvider(data);
   const context = provider === null || provider === void 0 ? void 0 : provider.text;
   const values = context ? {
     context
   } : undefined;
-
   switch (status) {
     case SmartLinkStatus.Forbidden:
       const meta = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
@@ -89,14 +76,12 @@ export const getRetryOptions = (url, status, details, onAuthorize) => {
         onClick,
         values
       };
-
     case SmartLinkStatus.Unauthorized:
       return {
         descriptor: messages.connect_link_account_card_name,
         onClick: onAuthorize ? handleOnClick(onAuthorize) : undefined,
         values
       };
-
     case SmartLinkStatus.NotFound:
       return {
         descriptor: messages.cannot_find_link

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import Popup from '@atlaskit/popup';
 import { jsx } from '@emotion/react';
@@ -35,7 +34,6 @@ export const HoverCardComponent = ({
     if (isOpen) {
       return;
     }
-
     mousePos.current = {
       x: event.clientX,
       y: event.clientY
@@ -52,22 +50,19 @@ export const HoverCardComponent = ({
         status: linkStatus
       });
     }
-
     setIsOpen(false);
   }, [analytics.ui, isOpen, linkStatus]);
   const initHideCard = useCallback(() => {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
-
     fadeOutTimeoutId.current = setTimeout(() => hideCard(), delay);
   }, [hideCard]);
   const initShowCard = useCallback(event => {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
-    } //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
-
-
+    }
+    //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
     setMousePosition(event);
     fadeInTimeoutId.current = setTimeout(() => {
       //Check if its previously closed to avoid firing events when moving between the child and hover card components
@@ -78,9 +73,8 @@ export const HoverCardComponent = ({
           previewInvokeMethod: invokeMethod,
           status: linkStatus
         });
-      } //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
-
-
+      }
+      //If these are undefined then popupOffset is undefined and we fallback to default bottom-start placement
       if (parentSpan.current && mousePos.current) {
         const {
           bottom,
@@ -88,7 +82,6 @@ export const HoverCardComponent = ({
         } = parentSpan.current.getBoundingClientRect();
         popupOffset.current = [mousePos.current.x - left, mousePos.current.y - bottom + CARD_GAP_PX];
       }
-
       setIsOpen(true);
     }, delay);
   }, [isOpen, setMousePosition, analytics.ui, linkStatus]);
@@ -102,11 +95,12 @@ export const HoverCardComponent = ({
     if (actionId === 'preview-content') {
       hideCard();
     }
-  }, [hideCard]); // Stop hover preview content to propagate event to parent.
+  }, [hideCard]);
+
+  // Stop hover preview content to propagate event to parent.
 
   const onChildClick = useCallback(e => {
     e.stopPropagation();
-
     if (closeOnChildClick) {
       hideCard();
     }
@@ -143,6 +137,5 @@ export const HoverCardComponent = ({
     content: content,
     trigger: trigger,
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
-
   });
 };

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

@@ -28,7 +28,6 @@ export const getOpenAction = (url, analytics, onActionClick) => ({
     if (onActionClick) {
       onActionClick('open-content');
     }
-
     window.open(url, '_blank');
     analytics.ui.hoverCardOpenLinkClickedEvent({
       previewDisplay: 'card'
@@ -48,7 +47,6 @@ export const getCopyAction = url => ({
   tooltipMessage: jsx(FormattedMessage, messages.copy_url_to_clipboard),
   testId: 'hover-card-copy-button'
 });
-
 const HoverCardContent = ({
   id = '',
   analytics,
@@ -62,7 +60,6 @@ const HoverCardContent = ({
   onMouseLeave
 }) => {
   var _cardState$details;
-
   const extensionKey = useMemo(() => getExtensionKey(cardState.details), [cardState.details]);
   const actions = useSmartCardActions(id, url, analytics);
   useEffect(() => {
@@ -103,7 +100,6 @@ const HoverCardContent = ({
     children: {}
   };
   const onClickStopPropagation = useCallback(e => e.stopPropagation(), []);
-
   const getCardView = cardState => {
     if (cardState.metadataStatus === 'pending') {
       return jsx(HoverCardLoadingView, {
@@ -111,7 +107,6 @@ const HoverCardContent = ({
         titleBlockProps: titleBlockProps
       });
     }
-
     if (cardState.status === 'unauthorized') {
       return jsx(HoverCardUnauthorisedView, {
         analytics: analytics,
@@ -121,7 +116,6 @@ const HoverCardContent = ({
         url: url
       });
     }
-
     if (cardState.status === 'resolved') {
       return jsx(HoverCardResolvedView, {
         id: id,
@@ -135,10 +129,8 @@ const HoverCardContent = ({
         titleBlockProps: titleBlockProps
       });
     }
-
     return null;
   };
-
   const cardView = getCardView(cardState);
   return cardView ? jsx("div", {
     onMouseEnter: onMouseEnter,
@@ -148,5 +140,4 @@ const HoverCardContent = ({
     css: HoverCardContainer
   }, cardView) : null;
 };
-
 export default HoverCardContent;

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

@@ -3,7 +3,6 @@ import { css } from '@emotion/react';
 import extractPreview from '../../../extractors/flexible/extract-preview';
 import { PreviewBlock, SnippetBlock } from '../../FlexibleCard/components/blocks';
 import { getTransitionStyles } from '../styled';
-
 const SnippetOrPreview = ({
   data,
   snippetHeight
@@ -11,16 +10,17 @@ const SnippetOrPreview = ({
   const transitionStarted = useRef(false);
   const previewBlockRef = useRef(null);
   const [showSnippet, setShowSnippet] = useState(false);
-  const [previewCss, setPreviewCss] = useState(); // Set Preview to a fixed height to enable transitions
+  const [previewCss, setPreviewCss] = useState();
 
+  // Set Preview to a fixed height to enable transitions
   const onPreviewRender = useCallback(() => {
     var _previewBlockRef$curr;
-
     previewBlockRef.current && setPreviewCss(css`
         height: ${(_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height}px;
       `);
-  }, []); // On error set Preview to Snippet height with transition
+  }, []);
 
+  // On error set Preview to Snippet height with transition
   const onPreviewError = useCallback(() => {
     if (transitionStarted.current === false) {
       setPreviewCss(getTransitionStyles(snippetHeight));
@@ -38,5 +38,4 @@ const SnippetOrPreview = ({
     onRender: onPreviewRender
   }) : /*#__PURE__*/React.createElement(SnippetBlock, null);
 };
-
 export default SnippetOrPreview;

package/dist/es2019/view/HoverCard/components/views/resolved/index.js

@@ -15,12 +15,10 @@ export const toFooterActions = (cardActions, onActionClick) => cardActions.map(a
     if (onActionClick) {
       onActionClick(action.id);
     }
-
     return action.invoke();
   },
   testId: action.id
 }));
-
 const HoverCardResolvedView = ({
   flexibleCardProps,
   titleBlockProps,
@@ -33,7 +31,6 @@ const HoverCardResolvedView = ({
   extensionKey
 }) => {
   var _cardState$details;
-
   const showActionableElement = useFeatureFlag('enableActionableElement');
   useEffect(() => {
     // Since this hover view is only rendered on resolved status,
@@ -49,8 +46,8 @@ const HoverCardResolvedView = ({
     primary,
     secondary
   } = useMemo(() => {
-    const types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
-
+    const types = data ? extractType(data) : undefined;
+    //TODO: EDM-3224 deleted simulated and use real JsonLd
     const metadata = extractMetadata(getSimulatedMetadata(extensionKey, types));
     const primary = showActionableElement ? toActionableMetadata(onActionClick, extensionKey, types, cardActions, metadata.primary) : metadata.primary;
     return {
@@ -63,7 +60,6 @@ const HoverCardResolvedView = ({
   const snippetBlockRef = useRef(null);
   const onSnippetRender = useCallback(() => {
     var _snippetBlockRef$curr, _snippetBlockRef$curr2;
-
     snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
   }, []);
   const body = SnippetOrPreview({
@@ -87,5 +83,4 @@ const HoverCardResolvedView = ({
     overrideCss: footerBlockCss
   }));
 };
-
 export default HoverCardResolvedView;

package/dist/es2019/view/HoverCard/components/views/resolving/index.js

@@ -6,7 +6,6 @@ import FlexibleCard from '../../../../FlexibleCard';
 import { TitleBlock } from '../../../../FlexibleCard/components/blocks';
 import { CARD_WIDTH_REM } from '../../../styled';
 import { loadingViewContainer, skeletonContainer } from './styled';
-
 const HoverCardLoadingView = ({
   flexibleCardProps,
   titleBlockProps
@@ -29,5 +28,4 @@ const HoverCardLoadingView = ({
     height: lineHeightRem
   })));
 };
-
 export default HoverCardLoadingView;

package/dist/es2019/view/HoverCard/components/views/unauthorised/index.js

@@ -11,7 +11,6 @@ import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group
 import { LinkIcon } from '../../../../FlexibleCard/components/elements';
 import { ActionName, CardDisplay } from '../../../../../constants';
 import { useSmartCardActions } from '../../../../../state/actions';
-
 const HoverCardUnauthorisedView = ({
   analytics,
   extensionKey,
@@ -21,7 +20,6 @@ const HoverCardUnauthorisedView = ({
   url
 }) => {
   var _cardState$details, _extractProvider;
-
   const {
     cardState
   } = flexibleCardProps;
@@ -70,5 +68,4 @@ const HoverCardUnauthorisedView = ({
     appearance: "primary"
   })));
 };
-
 export default HoverCardUnauthorisedView;

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { jsx } from '@emotion/react';
@@ -9,7 +8,6 @@ import { useSmartLinkAnalytics } from '../../state/analytics';
 import { fireSmartLinkEvent } from '../../utils/analytics';
 import { HoverCardComponent } from './components/HoverCardComponent';
 import { CardDisplay } from '../../constants';
-
 const HoverCardWithErrorBoundary = props => {
   const {
     url,
@@ -37,7 +35,6 @@ const HoverCardWithErrorBoundary = props => {
     analytics: analytics
   }), children));
 };
-
 export const HoverCard = withAnalyticsContext({
   source: 'smartLinkPreviewHoverCard',
   attributes: {

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

@@ -8,8 +8,8 @@ export const flexibleUiOptions = {
   theme: SmartLinkTheme.Black,
   hidePadding: true
 };
-export const CARD_WIDTH_REM = 24; // gap between mouse cursor and hover card
-
+export const CARD_WIDTH_REM = 24;
+// gap between mouse cursor and hover card
 export const CARD_GAP_PX = 10;
 const blockGap = '0.5rem';
 const elementGap = '0.5rem';

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

@@ -12,7 +12,6 @@ export const getSimulatedMetadata = (extensionKey = '', types = []) => {
           }
         };
       }
-
       return {
         metadata: {
           primary: [ElementName.ModifiedOn, ElementName.CreatedBy],
@@ -20,7 +19,6 @@ export const getSimulatedMetadata = (extensionKey = '', types = []) => {
           subtitle: []
         }
       };
-
     case 'confluence-object-provider':
       return {
         metadata: {
@@ -29,7 +27,6 @@ export const getSimulatedMetadata = (extensionKey = '', types = []) => {
           subtitle: []
         }
       };
-
     case 'jira-object-provider':
       return {
         metadata: {
@@ -38,7 +35,6 @@ export const getSimulatedMetadata = (extensionKey = '', types = []) => {
           subtitle: []
         }
       };
-
     case 'trello-object-provider':
       return {
         metadata: {
@@ -47,7 +43,6 @@ export const getSimulatedMetadata = (extensionKey = '', types = []) => {
           subtitle: []
         }
       };
-
     case 'watermelon-object-provider':
       if (types.includes('atlassian:Project')) {
         return {
@@ -58,7 +53,6 @@ export const getSimulatedMetadata = (extensionKey = '', types = []) => {
           }
         };
       }
-
       return {
         metadata: {
           primary: [ElementName.AuthorGroup, ElementName.State, ElementName.DueOn],
@@ -66,7 +60,6 @@ export const getSimulatedMetadata = (extensionKey = '', types = []) => {
           subtitle: []
         }
       };
-
     default:
       return {
         metadata: {
@@ -81,14 +74,13 @@ export const toActionableMetadata = (onActionClick, extensionKey, types = [], ca
   // Actionable State for Jira issue
   if (extensionKey === 'jira-object-provider' && types !== null && types !== void 0 && types.includes('atlassian:Task')) {
     const previewAction = cardActions.find(action => action.id === 'preview-content');
-
     if (previewAction) {
-      return elementItems.map(elementItem => elementItem.name === ElementName.State ? { ...elementItem,
+      return elementItems.map(elementItem => elementItem.name === ElementName.State ? {
+        ...elementItem,
         onClick: () => {
           if (onActionClick) {
             onActionClick(previewAction.id);
           }
-
           return previewAction.invoke({
             isReloadRequired: true
           });
@@ -96,6 +88,5 @@ export const toActionableMetadata = (onActionClick, extensionKey, types = [], ca
       } : elementItem);
     }
   }
-
   return elementItems;
 };

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

@@ -12,19 +12,16 @@ import { IconStyledButton, LowercaseAppearance } from '../styled';
 export class InlineCardErroredView extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "handleRetry", event => {
       const {
         onRetry
       } = this.props;
-
       if (onRetry) {
         event.preventDefault();
         event.stopPropagation();
         onRetry();
       }
     });
-
     _defineProperty(this, "renderRightSide", () => {
       const {
         onRetry,
@@ -41,7 +38,6 @@ export class InlineCardErroredView extends React.Component {
       })));
     });
   }
-
   render() {
     const {
       url,
@@ -66,5 +62,4 @@ export class InlineCardErroredView extends React.Component {
       rightSide: this.renderRightSide()
     }));
   }
-
 }

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

@@ -21,32 +21,25 @@ const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, nu
 export class InlineCardForbiddenView extends React.Component {
   constructor(...args) {
     var _this$props, _this$props$requestAc;
-
     super(...args);
-
     _defineProperty(this, "state", {
       hasRequestAccessContextMessage: !!((_this$props = this.props) !== null && _this$props !== void 0 && (_this$props$requestAc = _this$props.requestAccessContext) !== null && _this$props$requestAc !== void 0 && _this$props$requestAc.callToActionMessageKey)
     });
-
     _defineProperty(this, "handleRetry", event => {
       const {
         onAuthorise
       } = this.props;
       event.preventDefault();
       event.stopPropagation();
-
       if (onAuthorise) {
         onAuthorise();
       } else {
         var _this$props2, _this$props2$requestA, _this$props2$requestA2;
-
         (_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$requestA = _this$props2.requestAccessContext) === null || _this$props2$requestA === void 0 ? void 0 : (_this$props2$requestA2 = _this$props2$requestA.action) === null || _this$props2$requestA2 === void 0 ? void 0 : _this$props2$requestA2.promise();
       }
     });
-
     _defineProperty(this, "renderForbiddenAccessMessage", () => {
       var _this$props3, _this$props3$requestA;
-
       if ((_this$props3 = this.props) !== null && _this$props3 !== void 0 && (_this$props3$requestA = _this$props3.requestAccessContext) !== null && _this$props3$requestA !== void 0 && _this$props3$requestA.callToActionMessageKey) {
         const {
           callToActionMessageKey
@@ -57,17 +50,14 @@ export class InlineCardForbiddenView extends React.Component {
           }
         }));
       }
-
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.invalid_permissions, formattedMessage => {
         return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage);
       }));
     });
-
     _defineProperty(this, "renderRightSide", () => {
       const {
         onAuthorise
       } = this.props;
-
       if (this.state.hasRequestAccessContextMessage) {
         return /*#__PURE__*/React.createElement(Button, {
           spacing: "none",
@@ -78,7 +68,6 @@ export class InlineCardForbiddenView extends React.Component {
           role: "button"
         }, this.renderForbiddenAccessMessage());
       }
-
       if (onAuthorise) {
         return /*#__PURE__*/React.createElement(LozengeBlockWrapper, null, /*#__PURE__*/React.createElement(Button, {
           spacing: "none",
@@ -91,11 +80,9 @@ export class InlineCardForbiddenView extends React.Component {
           appearance: 'moved'
         }, this.renderForbiddenAccessMessage()))));
       }
-
       return null;
     });
   }
-
   render() {
     const {
       url,
@@ -117,5 +104,4 @@ export class InlineCardForbiddenView extends React.Component {
       rightSideSpacer: this.state.hasRequestAccessContextMessage
     }));
   }
-
 }

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

@@ -22,18 +22,19 @@ export const Frame = props => {
     if (event.key !== ' ' && event.key !== 'Enter') {
       return;
     }
-
     if (onClick) {
       event.preventDefault();
       event.stopPropagation();
       onClick(event);
     }
   }, [onClick]);
-  const isInteractive = Boolean(onClick); // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
+  const isInteractive = Boolean(onClick);
 
-  const Wrapper = link || onClick ? WrapperAnchor : WrapperSpan; // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
-  //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
+  // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
+  const Wrapper = link || onClick ? WrapperAnchor : WrapperSpan;
 
+  // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
+  //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
   return /*#__PURE__*/React.createElement(Wrapper, {
     theme: useGlobalTheme(),
     href: link,

package/dist/es2019/view/InlineCard/Frame/styled.js

@@ -12,7 +12,6 @@ const selected = `
     text-decoration: none;
   }
 `;
-
 const isInteractive = ({
   isInteractive
 }) => {
@@ -38,7 +37,6 @@ const isInteractive = ({
     return '';
   }
 };
-
 const isSelected = ({
   isSelected
 }) => {
@@ -48,6 +46,7 @@ const isSelected = ({
     return 'user-select: text';
   }
 };
+
 /*
   Inline smart cards should have the following layout:
   ------------------------------------
@@ -60,8 +59,6 @@ const isSelected = ({
 // NB: `padding` consistent with @mentions.
 // NB: `display: inline` required for `box-decoration-break` to work.
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
-
-
 const baseWrapperStyle = props => `
   line-height: 16px;
   padding: 1px 0.24em 2px 0.24em;
@@ -85,7 +82,6 @@ const baseWrapperStyle = props => `
   transition: 0.1s all ease-in-out;
   -moz-user-select: none;
 `;
-
 export const WrapperAnchor = styled.a`
   ${baseWrapperStyle}
   ${isInteractive}

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

@@ -8,12 +8,13 @@ const placeholderShimmer = keyframes`
   100% {
     background-position: 20px 0;
   }
-`; // TODO: Figure out a more scalable/responsive solution
+`;
+
+// TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
-
 export const Icon = styled.img`
   height: 14px;
   width: 14px;
@@ -24,10 +25,11 @@ export const Icon = styled.img`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-`; // Used for 'untrue' icons which claim to be 16x16 but
+`;
+
+// Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
-
 export const AKIconWrapper = styled.span`
   margin-right: -2px;
 `;