@atlaskit/smart-card 26.15.3 → 26.15.5

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

@@ -8,12 +8,14 @@ import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkA
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
+import CustomPopupContainer from '../components/CustomPopupContainer';
 import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
 import { CardDisplay } from '../../../constants';
 import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
 import { useSmartCardActions } from '../../../state/actions';
 import { useSmartLinkAnalytics } from '../../../state/analytics';
 import { useFeatureFlag } from '@atlaskit/link-provider';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
 var FADE_IN_DELAY = 500;
 var FADE_OUT_DELAY = 300;
@@ -209,7 +211,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       "data-testid": "hover-card-trigger-wrapper"
     }), children));
   }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
-  return jsx(Popup, {
+  return jsx(Popup, _extends({
     testId: "hover-card",
     isOpen: isOpen && canOpen,
     onClose: hideCard,
@@ -219,5 +221,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     content: content,
     trigger: trigger,
     zIndex: zIndex
-  });
+  }, getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') && {
+    popupComponent: CustomPopupContainer
+  }));
 };

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

@@ -1,9 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { css } from '@emotion/react';
 import { loadingPlaceholderClassName } from '../../index';
 import { SmartLinkSize, SmartLinkTheme } from '../../constants';
 import { layers } from '@atlaskit/theme/constants';
+import { themed } from '@atlaskit/theme/components';
 
 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 export var HOVER_CARD_Z_INDEX = layers.modal();
@@ -27,4 +28,11 @@ export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _tag
 export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n    display: flex;\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
 export var getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
-};
+};
+export var popupContainerStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n"])), "var(--ds-border-radius-300, 12px)", themed({
+  light: "var(--ds-surface-raised, white)",
+  dark: "var(--ds-surface-raised, #262B31)"
+})(), themed({
+  light: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
+  dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
+})());

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

@@ -4,15 +4,14 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 import React from 'react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
-import { name as packageName, version as packageVersion } from '../../version.json';
 import { withLinkClickedEvent } from '../../utils/analytics/click';
 import { LinkAnalyticsContext } from '../../utils/analytics/LinkAnalyticsContext';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var PACKAGE_DATA = {
-  packageName: packageName,
-  packageVersion: packageVersion,
+  packageName: "@atlaskit/smart-card",
+  packageVersion: "26.15.5",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

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

@@ -6,8 +6,8 @@ import { SmartLinkActionType } from '@atlaskit/linking-types';
 export declare const ANALYTICS_CHANNEL = "media";
 export declare const context: {
     componentName: string;
-    packageName: any;
-    packageVersion: any;
+    packageName: string;
+    packageVersion: string;
 };
 export declare enum TrackQuickActionType {
     StatusUpdate = "StatusUpdate"

package/dist/types/view/BlockCard/views/flexible/FlexibleErroredView.d.ts

@@ -1,10 +1,3 @@
-/// <reference types="react" />
 import { FlexibleBlockCardProps } from './types';
-/**
- * This view represents a Block Card with an 'Errored' status.
- *
- * @see SmartLinkStatus
- * @see FlexibleCardProps
- */
-declare const FlexibleErroredView: ({ anchorTarget, cardState, onAuthorize, onError, ui, url, onClick, testId, }: FlexibleBlockCardProps) => JSX.Element;
-export default FlexibleErroredView;
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/dist/types/view/BlockCard/views/flexible/FlexibleForbiddenView.d.ts

@@ -1,11 +1,3 @@
-/// <reference types="react" />
 import { FlexibleBlockCardProps } from './types';
-/**
- * This view represent a Block Card with the 'Forbidden' status.
- * It should have a "Try another account" button that will allow a user to connect another account and view the block card.
- *
- * @see SmartLinkStatus
- * @see FlexibleCardProps
- */
-declare const FlexibleForbiddenView: ({ anchorTarget, cardState, onAuthorize, onClick, onError, testId, ui, url, }: FlexibleBlockCardProps) => JSX.Element;
-export default FlexibleForbiddenView;
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/dist/types/view/BlockCard/views/flexible/FlexibleNotFoundView.d.ts

@@ -1,10 +1,3 @@
-/// <reference types="react" />
 import { FlexibleBlockCardProps } from './types';
-/**
- * This view represents a Block Card with a 'Not_Found' status.
- *
- * @see SmartLinkStatus
- * @see FlexibleCardProps
- */
-declare const FlexibleNotFoundView: ({ anchorTarget, cardState, onAuthorize, onError, ui, url, onClick, testId, }: FlexibleBlockCardProps) => JSX.Element;
-export default FlexibleNotFoundView;
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/dist/types/view/BlockCard/views/flexible/FlexibleResolvedView.d.ts

@@ -1,9 +1,3 @@
-/// <reference types="react" />
 import { FlexibleBlockCardProps } from './types';
-/**
- * This view represents a Block card that has an 'Resolved' status.
- * @see SmartLinkStatus
- * @see FlexibleCardProps
- */
-declare const FlexibleResolvedView: ({ id, cardState, onClick, onError, onResolve, showServerActions, anchorTarget, testId, ui, url, analytics, }: FlexibleBlockCardProps) => JSX.Element;
-export default FlexibleResolvedView;
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/dist/types/view/BlockCard/views/flexible/FlexibleUnauthorisedView.d.ts

@@ -1,11 +1,3 @@
-/// <reference types="react" />
 import { FlexibleBlockCardProps } from './types';
-/**
- * This view represents a Block card that has an 'Unauthorized' status .
- * It should have a "Connect" button that will allow a user to connect their account and view the block card.
- *
- * @see SmartLinkStatus
- * @see FlexibleCardProps
- */
-declare const FlexibleUnauthorisedView: ({ anchorTarget, analytics, cardState, extensionKey, onAuthorize, onClick, onError, testId, ui, url, }: FlexibleBlockCardProps) => JSX.Element;
-export default FlexibleUnauthorisedView;
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/dist/types/view/BlockCard/views/flexible/styled.d.ts

@@ -1,2 +1,3 @@
 export declare const metadataBlockCss: import("@emotion/react").SerializedStyles;
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
+export declare const flexibleBlockCardStyle: import("@emotion/react").SerializedStyles;

package/dist/{types-ts4.5/view/BlockCard/views/flexible/utils.d.ts → types/view/BlockCard/views/flexible/utils/index.d.ts}

@@ -1,5 +1,5 @@
 import { JsonLd } from 'json-ld-types';
-import { ElementItem } from '../../../FlexibleCard/components/blocks/types';
+import { ElementItem } from '../../../../FlexibleCard/components/blocks/types';
 export declare const getSimulatedBetterMetadata: (cardDetails?: JsonLd.Response) => SimulatedMetadata;
 export declare const getSimulatedMetadata: (cardDetails?: JsonLd.Response) => SimulatedMetadata;
 type SimulatedMetadata = {

package/dist/types/view/BlockCard/views/flexible/utils/withFlexibleUIBlockCardStyle.d.ts

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { FlexibleBlockCardProps } from '../types';
+export declare const withFlexibleUIBlockCardStyle: (FlexibleBlockCardView: React.FC<FlexibleBlockCardProps>) => (props: FlexibleBlockCardProps) => jsx.JSX.Element;

package/dist/types/view/HoverCard/components/CustomPopupContainer.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { PopupComponentProps } from '@atlaskit/popup';
+declare const CustomPopupContainer: React.ForwardRefExoticComponent<Pick<PopupComponentProps, "children" | "style" | "id" | "tabIndex" | "data-testid" | "data-placement"> & React.RefAttributes<HTMLDivElement>>;
+export default CustomPopupContainer;

package/dist/types/view/HoverCard/styled.d.ts

@@ -7,3 +7,4 @@ export declare const separatorCss: import("@emotion/react").SerializedStyles;
 export declare const HoverCardContainer: import("@emotion/react").SerializedStyles;
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
 export declare const getTransitionStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;
+export declare const popupContainerStyles: import("@emotion/react").SerializedStyles;

package/dist/types/view/LinkUrl/types.d.ts

@@ -7,7 +7,7 @@ export interface LinkUrlProps extends React.AnchorHTMLAttributes<HTMLAnchorEleme
     testId?: string;
 }
 export type PackageDataType = {
-    packageName: '@atlaskit/smart-card';
+    packageName: string;
     packageVersion: string;
     componentName: 'linkUrl';
 };

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

@@ -6,8 +6,8 @@ import { SmartLinkActionType } from '@atlaskit/linking-types';
 export declare const ANALYTICS_CHANNEL = "media";
 export declare const context: {
     componentName: string;
-    packageName: any;
-    packageVersion: any;
+    packageName: string;
+    packageVersion: string;
 };
 export declare enum TrackQuickActionType {
     StatusUpdate = "StatusUpdate"

package/dist/types-ts4.5/view/BlockCard/views/flexible/FlexibleErroredView.d.ts

@@ -1,10 +1,3 @@
-/// <reference types="react" />
 import { FlexibleBlockCardProps } from './types';
-/**
- * This view represents a Block Card with an 'Errored' status.
- *
- * @see SmartLinkStatus
- * @see FlexibleCardProps
- */
-declare const FlexibleErroredView: ({ anchorTarget, cardState, onAuthorize, onError, ui, url, onClick, testId, }: FlexibleBlockCardProps) => JSX.Element;
-export default FlexibleErroredView;
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/dist/types-ts4.5/view/BlockCard/views/flexible/FlexibleForbiddenView.d.ts

@@ -1,11 +1,3 @@
-/// <reference types="react" />
 import { FlexibleBlockCardProps } from './types';
-/**
- * This view represent a Block Card with the 'Forbidden' status.
- * It should have a "Try another account" button that will allow a user to connect another account and view the block card.
- *
- * @see SmartLinkStatus
- * @see FlexibleCardProps
- */
-declare const FlexibleForbiddenView: ({ anchorTarget, cardState, onAuthorize, onClick, onError, testId, ui, url, }: FlexibleBlockCardProps) => JSX.Element;
-export default FlexibleForbiddenView;
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/dist/types-ts4.5/view/BlockCard/views/flexible/FlexibleNotFoundView.d.ts

@@ -1,10 +1,3 @@
-/// <reference types="react" />
 import { FlexibleBlockCardProps } from './types';
-/**
- * This view represents a Block Card with a 'Not_Found' status.
- *
- * @see SmartLinkStatus
- * @see FlexibleCardProps
- */
-declare const FlexibleNotFoundView: ({ anchorTarget, cardState, onAuthorize, onError, ui, url, onClick, testId, }: FlexibleBlockCardProps) => JSX.Element;
-export default FlexibleNotFoundView;
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/dist/types-ts4.5/view/BlockCard/views/flexible/FlexibleResolvedView.d.ts

@@ -1,9 +1,3 @@
-/// <reference types="react" />
 import { FlexibleBlockCardProps } from './types';
-/**
- * This view represents a Block card that has an 'Resolved' status.
- * @see SmartLinkStatus
- * @see FlexibleCardProps
- */
-declare const FlexibleResolvedView: ({ id, cardState, onClick, onError, onResolve, showServerActions, anchorTarget, testId, ui, url, analytics, }: FlexibleBlockCardProps) => JSX.Element;
-export default FlexibleResolvedView;
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/dist/types-ts4.5/view/BlockCard/views/flexible/FlexibleUnauthorisedView.d.ts

@@ -1,11 +1,3 @@
-/// <reference types="react" />
 import { FlexibleBlockCardProps } from './types';
-/**
- * This view represents a Block card that has an 'Unauthorized' status .
- * It should have a "Connect" button that will allow a user to connect their account and view the block card.
- *
- * @see SmartLinkStatus
- * @see FlexibleCardProps
- */
-declare const FlexibleUnauthorisedView: ({ anchorTarget, analytics, cardState, extensionKey, onAuthorize, onClick, onError, testId, ui, url, }: FlexibleBlockCardProps) => JSX.Element;
-export default FlexibleUnauthorisedView;
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/dist/types-ts4.5/view/BlockCard/views/flexible/styled.d.ts

@@ -1,2 +1,3 @@
 export declare const metadataBlockCss: import("@emotion/react").SerializedStyles;
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
+export declare const flexibleBlockCardStyle: import("@emotion/react").SerializedStyles;

package/dist/{types/view/BlockCard/views/flexible/utils.d.ts → types-ts4.5/view/BlockCard/views/flexible/utils/index.d.ts}

@@ -1,5 +1,5 @@
 import { JsonLd } from 'json-ld-types';
-import { ElementItem } from '../../../FlexibleCard/components/blocks/types';
+import { ElementItem } from '../../../../FlexibleCard/components/blocks/types';
 export declare const getSimulatedBetterMetadata: (cardDetails?: JsonLd.Response) => SimulatedMetadata;
 export declare const getSimulatedMetadata: (cardDetails?: JsonLd.Response) => SimulatedMetadata;
 type SimulatedMetadata = {

package/dist/types-ts4.5/view/BlockCard/views/flexible/utils/withFlexibleUIBlockCardStyle.d.ts

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { FlexibleBlockCardProps } from '../types';
+export declare const withFlexibleUIBlockCardStyle: (FlexibleBlockCardView: React.FC<FlexibleBlockCardProps>) => (props: FlexibleBlockCardProps) => jsx.JSX.Element;

package/dist/types-ts4.5/view/HoverCard/components/CustomPopupContainer.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { PopupComponentProps } from '@atlaskit/popup';
+declare const CustomPopupContainer: React.ForwardRefExoticComponent<Pick<PopupComponentProps, "children" | "style" | "id" | "tabIndex" | "data-testid" | "data-placement"> & React.RefAttributes<HTMLDivElement>>;
+export default CustomPopupContainer;

package/dist/types-ts4.5/view/HoverCard/styled.d.ts

@@ -7,3 +7,4 @@ export declare const separatorCss: import("@emotion/react").SerializedStyles;
 export declare const HoverCardContainer: import("@emotion/react").SerializedStyles;
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
 export declare const getTransitionStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;
+export declare const popupContainerStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/view/LinkUrl/types.d.ts

@@ -7,7 +7,7 @@ export interface LinkUrlProps extends React.AnchorHTMLAttributes<HTMLAnchorEleme
     testId?: string;
 }
 export type PackageDataType = {
-    packageName: '@atlaskit/smart-card';
+    packageName: string;
     packageVersion: string;
     componentName: 'linkUrl';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.15.3",
+  "version": "26.15.5",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
     "@atlaskit/avatar": "^21.3.0",
     "@atlaskit/avatar-group": "^9.3.0",
     "@atlaskit/badge": "^15.1.0",
-    "@atlaskit/button": "^16.8.0",
+    "@atlaskit/button": "^16.9.0",
     "@atlaskit/dropdown-menu": "^11.11.0",
     "@atlaskit/frontend-utilities": "^2.7.0",
     "@atlaskit/icon": "^21.12.0",
@@ -38,7 +38,7 @@
     "@atlaskit/link-analytics": "^8.2.0",
     "@atlaskit/link-client-extension": "^1.6.0",
     "@atlaskit/link-extractors": "^1.1.0",
-    "@atlaskit/linking-common": "^4.3.0",
+    "@atlaskit/linking-common": "^4.4.0",
     "@atlaskit/linking-types": "^8.2.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/lozenge": "^11.4.0",