@atlaskit/smart-card 23.4.7 → 23.5.0

package/dist/esm/view/FlexibleCard/components/blocks/preview-block/resolved/index.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["ignoreContainerPadding", "onError", "overrideCss", "placement", "testId"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+/** @jsx jsx */
+import React, { useCallback, useEffect, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { MediaPlacement } from '../../../../../../constants';
+import Block from '../../block';
+import { Preview } from '../../../elements';
+/**
+ * Due to its placement on the left/right and ignoreContainerPadding prop
+ * rely on its parent container styling, css variables are declared in
+ * <Container /> to preset the base values for the preview block styling.
+ *
+ * `--container-padding` is the padding of the Container. This value is based
+ *   on size and hidePadding.
+ * `--container-gap-left` and `--container-gap-right` are the gap or padding of
+ *   the Container depending on whether the container has other preview blocks
+ *   with left/right positioning.
+ * `--preview-block-width` is the size of the preview image in relation to
+ *   the Container width when the placement is left/right.
+ * @param placement
+ * @param ignoreContainerPadding
+ */
+
+var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreContainerPadding) {
+  if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
+    var containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n      top: ", ";\n      bottom: ", ";\n      width: calc(var(--preview-block-width) - ", ");\n\n      ", "\n      ", "\n\n      [data-smart-element-media='image'] {\n        aspect-ratio: unset;\n        padding-top: unset;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n    "])), containerPadding, containerPadding, containerPadding, placement === MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
+  }
+
+  if (ignoreContainerPadding) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin-left: calc(var(--container-gap-left) * -1);\n      margin-right: calc(var(--container-gap-right) * -1);\n      &:first-of-type {\n        margin-top: calc(var(--container-padding) * -1);\n      }\n      &:last-of-type {\n        margin-bottom: calc(var(--container-padding) * -1);\n      }\n    "])));
+  }
+};
+/**
+ * Represents a resolved PreviewBlock, which typically contains media or other large format content.
+ * @public
+ * @param {PreviewBlock} PreviewBlock
+ * @see Block
+ */
+
+
+var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
+  var _ref$ignoreContainerP = _ref.ignoreContainerPadding,
+      ignoreContainerPadding = _ref$ignoreContainerP === void 0 ? false : _ref$ignoreContainerP,
+      onError = _ref.onError,
+      overrideCss = _ref.overrideCss,
+      placement = _ref.placement,
+      testId = _ref.testId,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(overrideCss),
+      _useState2 = _slicedToArray(_useState, 2),
+      styles = _useState2[0],
+      setStyles = _useState2[1];
+
+  var updateStyles = useCallback(function () {
+    setStyles(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ", "\n      ", "\n    "])), getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
+  }, [ignoreContainerPadding, overrideCss, placement]);
+  useEffect(function () {
+    updateStyles();
+  }, [ignoreContainerPadding, overrideCss, placement, updateStyles]);
+  var handleOnLoad = useCallback(function () {
+    updateStyles();
+  }, [updateStyles]);
+  var handleOnError = useCallback(function () {
+    if (onError) {
+      onError();
+    }
+  }, [onError]);
+  return jsx(Block, _extends({}, blockProps, {
+    overrideCss: styles,
+    testId: "".concat(testId, "-resolved-view")
+  }), jsx(Preview, {
+    onError: handleOnError,
+    onLoad: handleOnLoad
+  }));
+};
+
+export default PreviewBlockResolvedView;

package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js

@@ -8,7 +8,8 @@ var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
       testId = _ref.testId,
       url = _ref.url,
-      onError = _ref.onError;
+      onError = _ref.onError,
+      onLoad = _ref.onLoad;
   return jsx(ImageLoader, {
     src: url,
     loading: jsx(LoadingSkeleton, {
@@ -19,7 +20,8 @@ var ImageIcon = function ImageIcon(_ref) {
       "data-testid": "".concat(testId, "-image")
     }),
     errored: defaultIcon,
-    onError: onError
+    onError: onError,
+    onLoad: onLoad
   });
 };
 

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -1,15 +1,16 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
 import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
-import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
-import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
+import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
+import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
+import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
 var elevationStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), tokens.elevation);
 
 var getGap = function getGap(size) {
@@ -47,8 +48,42 @@ var getPadding = function getPadding(size) {
 };
 
 var clickableContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  // Position any interactive elements at the top of the z-index stack.\n  a,\n  button,\n  .has-action {\n    position: relative;\n    z-index: 1;\n  }\n"])));
-export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow-x: hidden;\n  position: relative;\n  ", "\n  ", "\n  ", "\n  ", "\n  &:hover ~ .actions-button-group {\n    opacity: 1;\n  }\n  a:focus,\n  .has-action:focus {\n    outline-offset: -2px;\n  }\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
+
+var getContainerPaddingStyles = function getContainerPaddingStyles(size, hidePadding, childrenOptions) {
+  var padding = hidePadding ? '0rem' : getPadding(size);
+  var gap = getGap(size);
+  var previewOnLeft = childrenOptions.previewOnLeft,
+      previewOnRight = childrenOptions.previewOnRight;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    // Set variables for PreviewBlock to use.\n    --container-padding: ", ";\n    --container-gap-left: ", ";\n    --container-gap-right: ", ";\n    --preview-block-width: 30%;\n\n    padding: ", ";\n    ", "\n    ", "\n  "])), padding, previewOnLeft ? gap : padding, previewOnRight ? gap : padding, padding, previewOnLeft ? "padding-left: calc(var(--preview-block-width) + ".concat(gap, ");") : '', previewOnRight ? "padding-right: calc(var(--preview-block-width) + ".concat(gap, ");") : '');
+};
+
+var getChildrenOptions = function getChildrenOptions(children, context) {
+  var options = {};
+
+  if (isFlexUiPreviewPresent(context)) {
+    React.Children.map(children, function (child) {
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        if (isFlexibleUiPreviewBlock(child)) {
+          var placement = child.props.placement;
+
+          if (placement === MediaPlacement.Left) {
+            options.previewOnLeft = true;
+          }
+
+          if (placement === MediaPlacement.Right) {
+            options.previewOnRight = true;
+          }
+        }
+      }
+    });
+  }
+
+  return options;
+};
+
+export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
+  var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
@@ -133,8 +168,9 @@ var Container = function Container(_ref3) {
       _ref3$theme = _ref3.theme,
       theme = _ref3$theme === void 0 ? SmartLinkTheme.Link : _ref3$theme;
   var context = useContext(FlexibleUiContext);
+  var childrenOptions = getChildrenOptions(children, context);
   return jsx("div", {
-    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
   }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));

package/dist/esm/view/FlexibleCard/components/elements/media/index.js

@@ -32,6 +32,7 @@ var Media = function Media(_ref) {
       testId = _ref$testId === void 0 ? 'smart-element-media' : _ref$testId,
       type = _ref.type,
       url = _ref.url,
+      onLoad = _ref.onLoad,
       onError = _ref.onError;
 
   if (!type || !url) {
@@ -47,6 +48,7 @@ var Media = function Media(_ref) {
     testId: "".concat(testId, "-image"),
     url: url,
     onError: onError,
+    onLoad: onLoad,
     defaultIcon: null
   }));
 };

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/media/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.4.7",
+  "version": "23.5.0",
   "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.13.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)