@atlaskit/smart-card 23.4.8 → 23.5.1

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

@@ -1,3 +1,4 @@
+import { useFeatureFlag } from '@atlaskit/link-provider';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
@@ -9,7 +10,7 @@ import { isSpecialEvent } from '../../../utils';
 import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
 import { flexibleUiOptions, footerBlockCss, metadataBlockCss, titleBlockCss, hiddenSnippetStyles } from '../styled';
-import { getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
+import { toActionableMetadata, getSimulatedMetadata, SMART_CARD_ANALYTICS_DISPLAY } from '../utils';
 import HoverCardLoadingView from './HoverCardLoadingView';
 import SnippetOrPreview from './SnippetOrPreview';
 export var getOpenAction = function getOpenAction(url, analytics, onActionClick) {
@@ -63,6 +64,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
       onResolve = _ref.onResolve,
       renderers = _ref.renderers,
       url = _ref.url;
+  var showActionableElement = useFeatureFlag('enableActionableElement');
   var actions = useSmartCardActions(id, url, analytics);
   useEffect(function () {
     actions.loadMetadata();
@@ -95,12 +97,21 @@ var HoverCardContent = function HoverCardContent(_ref) {
     return toFooterActions(cardActions, onActionClick);
   }, [cardActions, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
-  var types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
 
-  var _extractMetadata = extractMetadata(getSimulatedMetadata(extensionKey, types)),
-      primary = _extractMetadata.primary,
-      secondary = _extractMetadata.secondary,
-      subtitle = _extractMetadata.subtitle;
+  var _useMemo = useMemo(function () {
+    var types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
+
+    var metadata = extractMetadata(getSimulatedMetadata(extensionKey, types));
+    var primary = showActionableElement ? toActionableMetadata(onActionClick, extensionKey, types, cardActions, metadata.primary) : metadata.primary;
+    return {
+      primary: primary,
+      secondary: metadata.secondary,
+      subtitle: metadata.subtitle
+    };
+  }, [cardActions, data, extensionKey, onActionClick, showActionableElement]),
+      primary = _useMemo.primary,
+      secondary = _useMemo.secondary,
+      subtitle = _useMemo.subtitle;
 
   var titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
   var snippetHeight = React.useRef(0);

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

@@ -1,3 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import { ElementName } from '../../constants';
 export var SMART_CARD_ANALYTICS_DISPLAY = 'flexible';
 export var getSimulatedMetadata = function getSimulatedMetadata() {
@@ -80,4 +86,32 @@ export var getSimulatedMetadata = function getSimulatedMetadata() {
         }
       };
   }
+};
+export var toActionableMetadata = function toActionableMetadata(onActionClick, extensionKey) {
+  var types = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var cardActions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  var elementItems = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+
+  // Actionable State for Jira issue
+  if (extensionKey === 'jira-object-provider' && types !== null && types !== void 0 && types.includes('atlassian:Task')) {
+    var previewAction = cardActions.find(function (action) {
+      return action.id === 'preview-content';
+    });
+
+    if (previewAction) {
+      return elementItems.map(function (elementItem) {
+        return elementItem.name === ElementName.State ? _objectSpread(_objectSpread({}, elementItem), {}, {
+          onClick: function onClick() {
+            if (onActionClick) {
+              onActionClick(previewAction.id);
+            }
+
+            return previewAction.invoke();
+          }
+        }) : elementItem;
+      });
+    }
+  }
+
+  return elementItems;
 };

package/dist/types/constants.d.ts

@@ -189,3 +189,7 @@ export declare enum IconType {
 export declare enum MediaType {
     Image = "image"
 }
+export declare enum MediaPlacement {
+    Left = "left",
+    Right = "right"
+}

package/dist/types/index.d.ts

@@ -16,7 +16,7 @@ export { SmartLinkEvents } from './utils/analytics/analytics';
 export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents';
 export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName, } from './classNames';
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';
-export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, } from './constants';
+export { ActionName, ElementName, MediaPlacement, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, } from './constants';
 export { MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock, FooterBlock, } from './view/FlexibleCard/components/blocks';
 export type { ActionItem, ElementItem, OnActionMenuOpenChangeOptions, } from './view/FlexibleCard/components/blocks/types';
 export type { AnalyticsAction, AnalyticsActionSubject, AnalyticsPayload, AnalyticsHandler, } from './utils/types';

package/dist/types/state/flexible-ui-context/utils.d.ts

@@ -0,0 +1,6 @@
+import { FlexibleUiDataContext } from './types';
+/**
+ * Returns true if preview data is available in the FlexibleUiDataContext
+ * @param context is the FlexibleUiDataContext
+ */
+export declare const isFlexUiPreviewPresent: (context?: FlexibleUiDataContext | undefined) => boolean;

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

@@ -3,3 +3,4 @@ export declare const isFlexibleUiCard: (children?: React.ReactNode) => boolean;
 export declare const isFlexibleUiBlock: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiElement: (node: React.ReactNode) => boolean;
 export declare const isFlexibleUiTitleBlock: (node: React.ReactNode) => boolean;
+export declare const isFlexibleUiPreviewBlock: (node: React.ReactNode) => boolean;

package/dist/types/view/BlockCard/components/flexible/footer/index.d.ts

@@ -8,5 +8,5 @@ import { FooterBlockProps } from '../../../../FlexibleCard/components/blocks/foo
  * @see CustomBlock
  * @param props are the data required for the block, such as actions to be displayed.
  */
-declare const Footer: React.FC<FooterBlockProps>;
-export default Footer;
+declare const BlockCardFooter: React.FC<FooterBlockProps>;
+export default BlockCardFooter;

package/dist/types/view/BlockCard/index.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { FC } from 'react';
 import { BlockCardProps } from './types';
 import { AuthorizeAction } from './actions/AuthorizeAction';

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

@@ -22,4 +22,5 @@ export declare type BlockCardProps = {
     renderers?: CardProviderRenderers;
     platform?: CardPlatform;
     analytics: AnalyticsFacade;
+    enableFlexibleBlockCard?: boolean;
 };

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

@@ -0,0 +1,9 @@
+/// <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: ({ cardState, onClick, onError, testId, ui, url, }: FlexibleBlockCardProps) => JSX.Element;
+export default FlexibleResolvedView;

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

@@ -5,7 +5,7 @@ import { FlexibleBlockCardProps } from './types';
  * It should have a "Connect" button that will allow a user to connect their account and view the block card.
  *
  * @see SmartLinkStatus
- * @see UnauthorisedViewProps
+ * @see FlexibleCardProps
  */
 declare const FlexibleUnauthorisedView: ({ cardState, providerName, onAuthorize, onClick, onError, testId, ui, url, }: FlexibleBlockCardProps) => JSX.Element;
 export default FlexibleUnauthorisedView;

package/dist/types/view/FlexibleCard/components/blocks/preview-block/index.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { PreviewBlockProps } from './types';
 /**

package/dist/types/view/FlexibleCard/components/blocks/preview-block/resolved/index.d.ts

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import React from 'react';
+import { PreviewBlockProps } from '../types';
+/**
+ * Represents a resolved PreviewBlock, which typically contains media or other large format content.
+ * @public
+ * @param {PreviewBlock} PreviewBlock
+ * @see Block
+ */
+declare const PreviewBlockResolvedView: React.FC<PreviewBlockProps>;
+export default PreviewBlockResolvedView;

package/dist/types/view/FlexibleCard/components/blocks/preview-block/types.d.ts

@@ -1,8 +1,23 @@
 import { BlockProps } from '../types';
+import { MediaPlacement } from '../../../../../constants';
+export declare type OnPreviewRenderOptions = {
+    placement?: MediaPlacement;
+};
 export declare type PreviewBlockProps = {
+    /**
+     * Indicate whether preview block should ignore the padding its parent container.
+     * Default is false.
+     */
+    ignoreContainerPadding?: boolean;
     /**
      * Function to be called on error loading media.
      * @internal
      */
     onError?: () => void;
+    /**
+     * The placement of the preview block in relation of its container.
+     * This makes the preview block leave flex layout to absolute positioning
+     * to the left/right of the container.
+     */
+    placement?: MediaPlacement;
 } & BlockProps;

package/dist/types/view/FlexibleCard/components/common/image-icon/types.d.ts

@@ -4,4 +4,5 @@ export declare type ImageIconProps = {
     testId?: string;
     url: string;
     onError?: () => void;
+    onLoad?: () => void;
 };

package/dist/types/view/FlexibleCard/components/container/index.d.ts

@@ -2,8 +2,8 @@
 import React from 'react';
 import { SerializedStyles } from '@emotion/react';
 import { SmartLinkSize } from '../../../../constants';
-import { ContainerProps } from './types';
-export declare const getContainerStyles: (size: SmartLinkSize, hideBackground: boolean, hideElevation: boolean, hidePadding: boolean, clickableContainer: boolean) => SerializedStyles;
+import { ChildrenOptions, ContainerProps } from './types';
+export declare const getContainerStyles: (size: SmartLinkSize, hideBackground: boolean, hideElevation: boolean, hidePadding: boolean, clickableContainer: boolean, childrenOptions: ChildrenOptions) => SerializedStyles;
 /**
  * A container is a hidden component that build the Flexible Smart Link.
  * All of the Flexible UI components are wrapped inside the container.

package/dist/types/view/FlexibleCard/components/container/types.d.ts

@@ -23,3 +23,7 @@ export declare type ContainerProps = FlexibleUiOptions & {
      */
     testId?: string;
 };
+export declare type ChildrenOptions = {
+    previewOnLeft?: boolean;
+    previewOnRight?: boolean;
+};

package/dist/types/view/FlexibleCard/components/elements/lozenge/types.d.ts

@@ -6,6 +6,11 @@ export declare type LozengeProps = ElementProps & {
      * Determines the appearance of the Atlaskit lozenge.
      */
     appearance?: LozengeAppearance;
+    /**
+     * DO NOT USE! This is an experiment code and may be removed at any given time.
+     * @internal
+     */
+    onClick?: () => void;
     /**
      * The text to display within the lozenge.
      */

package/dist/types/view/FlexibleCard/components/elements/media/types.d.ts

@@ -14,4 +14,5 @@ export declare type MediaProps = ElementProps & {
      * @internal
      */
     onError?: () => void;
+    onLoad?: () => void;
 };

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

@@ -1,3 +1,6 @@
 import { JsonLd } from 'json-ld-types';
+import { LinkAction } from '../../state/hooks-external/useSmartLinkActions';
+import { ElementItem } from '../FlexibleCard/components/blocks/types';
 export declare const SMART_CARD_ANALYTICS_DISPLAY = "flexible";
 export declare const getSimulatedMetadata: (extensionKey?: string, types?: JsonLd.Primitives.ObjectType[]) => JsonLd.Primitives.Property<any>;
+export declare const toActionableMetadata: (onActionClick: (actionId: string) => void, extensionKey?: string | undefined, types?: JsonLd.Primitives.ObjectType[], cardActions?: LinkAction[], elementItems?: ElementItem[]) => ElementItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.4.8",
+  "version": "23.5.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     "@atlaskit/icon-object": "^6.2.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/linking-common": "^1.12.0",
+    "@atlaskit/linking-common": "^1.14.0",
     "@atlaskit/logo": "^13.10.0",
     "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/media-common": "^2.17.0",

package/report.api.md

@@ -571,6 +571,14 @@ type LinkIcon = {
 // @public (undocumented)
 export const loadingPlaceholderClassName = 'smart-link-loading-placeholder';
 
+// @public (undocumented)
+export enum MediaPlacement {
+  // (undocumented)
+  Left = 'left',
+  // (undocumented)
+  Right = 'right',
+}
+
 // @public
 export const MetadataBlock: React_2.FC<MetadataBlockProps>;
 
@@ -636,7 +644,9 @@ export const PreviewBlock: React_2.FC<PreviewBlockProps>;
 
 // @public (undocumented)
 type PreviewBlockProps = {
+  ignoreContainerPadding?: boolean;
   onError?: () => void;
+  placement?: MediaPlacement;
 } & BlockProps;
 
 // @public (undocumented)

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

@@ -457,6 +457,14 @@ type LinkIcon = {
 // @public (undocumented)
 export const loadingPlaceholderClassName = "smart-link-loading-placeholder";
 
+// @public (undocumented)
+export enum MediaPlacement {
+    // (undocumented)
+    Left = "left",
+    // (undocumented)
+    Right = "right"
+}
+
 // @public
 export const MetadataBlock: React_2.FC<MetadataBlockProps>;
 
@@ -519,7 +527,9 @@ export const PreviewBlock: React_2.FC<PreviewBlockProps>;
 
 // @public (undocumented)
 type PreviewBlockProps = {
+    ignoreContainerPadding?: boolean;
     onError?: () => void;
+    placement?: MediaPlacement;
 } & BlockProps;
 
 // @public (undocumented)