@atlaskit/smart-card 26.55.2 → 26.56.0

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

@@ -12,40 +12,36 @@ import ImageIcon from '../../common/image-icon';
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-const styles = css`
-  aspect-ratio: 16 / 9;
-  display: flex;
-  width: 100%;
-  height: fit-content; // Fix Safari height not respecting aspect-ratio
-
-  // fallback
-  @supports not (aspect-ratio: auto) {
-    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)
-    height: 0;
-    position: relative;
-    overflow: hidden;
-  }
-
-  > img,
-  > span {
-    min-height: 100%;
-    min-width: 100%;
-    max-height: 100%;
-    max-width: 100%;
-    object-fit: cover;
-    object-position: center center;
-
-    // fallback
-    @supports not (aspect-ratio: auto) {
-      position: absolute;
-      transform: translate(-50%, -50%);
-      left: 50%;
-      top: 50%;
-      width: auto;
-      height: auto;
+const styles = css({
+  aspectRatio: '16 / 9',
+  display: 'flex',
+  width: '100%',
+  height: 'fit-content',
+  '@supports not (aspect-ratio: auto)': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+    paddingTop: '56.25%',
+    // 16:9 ratio (9 / 16 = 0.5625)
+    height: 0,
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  '> img, > span': {
+    minHeight: '100%',
+    minWidth: '100%',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    objectFit: 'cover',
+    objectPosition: 'center center',
+    '@supports not (aspect-ratio: auto)': {
+      position: 'absolute',
+      transform: 'translate(-50%, -50%)',
+      left: '50%',
+      top: '50%',
+      width: 'auto',
+      height: 'auto'
     }
   }
-`;
+});
 
 /**
  * A base element that displays a Media.

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

@@ -2,13 +2,12 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
-const getStyles = maxLines => css`
-  color: ${"var(--ds-text-subtlest, #626F86)"};
-  font-size: 0.75rem;
-  line-height: 1rem;
-  white-space: normal;
-  ${getTruncateStyles(maxLines)}
-`;
+const getStyles = maxLines => css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontSize: '0.75rem',
+  lineHeight: '1rem',
+  whiteSpace: 'normal'
+}, getTruncateStyles(maxLines));
 
 /**
  * A base element that displays some Text.

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

@@ -40,6 +40,7 @@ const getIconDimensionStyles = value => css({
 });
 export const getIconSizeStyles = width => {
   const sizeStyles = getIconDimensionStyles(width);
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css`
     flex: 0 0 auto;
     ${sizeStyles}

package/dist/es2019/view/HoverCard/components/views/forbidden/styled.js

@@ -1,18 +1,18 @@
 import { css } from '@emotion/react';
 const titleFontWeight = '600';
-export const titleBlockStyles = css`
-  justify-content: center;
-  font-weight: ${titleFontWeight};
-  margin-top: ${"var(--ds-space-100, 8px)"};
-`;
-export const mainTextStyles = css`
-  display: inline;
-  justify-content: center;
-  margin-top: ${"var(--ds-space-0, 0px)"};
-  font-size: 0.75rem;
-  text-align: center;
-`;
-export const connectButtonStyles = css`
-  justify-content: center;
-  margin-top: ${"var(--ds-space-100, 8px)"};
-`;
+export const titleBlockStyles = css({
+  justifyContent: 'center',
+  fontWeight: titleFontWeight,
+  marginTop: "var(--ds-space-100, 8px)"
+});
+export const mainTextStyles = css({
+  display: 'inline',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-0, 0px)",
+  fontSize: '0.75rem',
+  textAlign: 'center'
+});
+export const connectButtonStyles = css({
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-100, 8px)"
+});

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

@@ -1,6 +1,8 @@
 import { css } from '@emotion/react';
 import { separatorCss } from '../../../styled';
 const elementGap = '0.5rem';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const metadataBlockCss = css`
   gap: 0px;
   /* primary element group */
@@ -28,10 +30,10 @@ export const metadataBlockCss = css`
     line-height: 1rem;
   }
 `;
-export const footerBlockCss = css`
-  height: 1.5rem;
-`;
-export const hiddenSnippetStyles = css`
-  visibility: hidden;
-  position: absolute;
-`;
+export const footerBlockCss = css({
+  height: '1.5rem'
+});
+export const hiddenSnippetStyles = css({
+  visibility: 'hidden',
+  position: 'absolute'
+});

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

@@ -1,26 +1,26 @@
 import { css } from '@emotion/react';
-export const loadingViewContainer = css`
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-`;
-export const skeletonContainer = css`
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  align-items: center;
-`;
+export const loadingViewContainer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: "var(--ds-space-200, 1rem)"
+});
+export const skeletonContainer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+  gap: '0.625rem',
+  alignItems: 'center'
+});
 export const getTitleStyles = height => {
-  return css`
-    flex: 1 0 auto;
-    height: ${height}rem;
-
-    span {
-      width: 100%;
+  return css({
+    flex: '1 0 auto',
+    height: `${height}rem`,
+    span: {
+      width: '100%'
     }
-  `;
+  });
 };
-export const titleBlockStyles = css`
-  width: 100%;
-  gap: 0.5rem;
-`;
+export const titleBlockStyles = css({
+  width: '100%',
+  gap: "var(--ds-space-100, 0.5rem)"
+});

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

@@ -2,17 +2,17 @@ import { css } from '@emotion/react';
 const blockGap = '0.5rem';
 const iconGap = '0.5rem';
 const titleFontWeight = '500';
-export const connectButtonStyles = css`
-  justify-content: flex-end;
-  margin-top: ${blockGap};
-`;
-export const titleBlockStyles = css`
-  gap: ${blockGap} ${iconGap};
-  a {
-    font-weight: ${titleFontWeight};
+export const connectButtonStyles = css({
+  justifyContent: 'flex-end',
+  marginTop: blockGap
+});
+export const titleBlockStyles = css({
+  gap: `${blockGap} ${iconGap}`,
+  a: {
+    fontWeight: titleFontWeight
   }
-`;
-export const mainTextStyles = css`
-  margin-top: ${blockGap};
-  font-size: 0.75rem;
-`;
+});
+export const mainTextStyles = css({
+  marginTop: blockGap,
+  fontSize: '0.75rem'
+});

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

@@ -24,6 +24,8 @@ export const separatorCss = css({
     marginRight: elementGap
   }
 });
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const HoverCardContainer = css`
   background: none;
   border-width: 0;
@@ -34,6 +36,8 @@ export const HoverCardContainer = css`
     display: none;
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const titleBlockCss = css`
   gap: ${blockGap};
 

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

@@ -39,59 +39,55 @@ export const IconOverrides = `
 // - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
 // NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
 // NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
-export const IconWrapper = styled.span`
-  user-select: none;
-  ${IconOverrides}
-  ${IconObjectOverrides}
-`;
+export const IconWrapper = styled.span({
+  userSelect: 'none'
+}, IconOverrides, IconObjectOverrides);
 
 // Wraps all emoji in Inline Links similar to icon
-export const EmojiWrapper = styled.span`
-  display: inline-block;
-  margin-right: ${"var(--ds-space-025, 2px)"};
-  user-select: none;
-  ${IconOverrides}
-  ${IconObjectOverrides}
-`;
+export const EmojiWrapper = styled.span({
+  display: 'inline-block',
+  marginRight: "var(--ds-space-025, 2px)",
+  userSelect: 'none'
+}, IconOverrides, IconObjectOverrides);
 
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
 // NB: `word-break` line breaks as soon as an overflow takes place.
-export const IconTitleWrapper = styled.span`
-  white-space: pre-wrap;
-  word-break: break-all;
-  box-decoration-break: clone;
-  padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"};
-`;
+export const IconTitleWrapper = styled.span({
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+  boxDecorationBreak: 'clone',
+  padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
+});
 
 // TODO: Replace overrides with proper AtlasKit solution.
-export const LozengeWrapper = styled.span`
-  display: inline-block;
-  vertical-align: 1px;
-  margin: 0 ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-025, 2px)"};
-`;
-export const RightIconPositionWrapper = styled.span`
-  margin-left: ${"var(--ds-space-025, 2px)"};
-  position: relative;
-  display: inline-block;
-`;
+export const LozengeWrapper = styled.span({
+  display: 'inline-block',
+  verticalAlign: '1px',
+  margin: `0 ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-025, 2px)"}`
+});
+export const RightIconPositionWrapper = styled.span({
+  marginLeft: "var(--ds-space-025, 2px)",
+  position: 'relative',
+  display: 'inline-block'
+});
 
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
-export const IconPositionWrapper = styled.span`
-  margin-right: ${"var(--ds-space-050, 4px)"};
-  position: relative;
-  display: inline-block;
-`;
-export const IconEmptyWrapper = styled.span`
-  width: 14px;
-  height: 100%;
-  display: inline-block;
-  opacity: 0;
-`;
+export const IconPositionWrapper = styled.span({
+  marginRight: "var(--ds-space-050, 4px)",
+  position: 'relative',
+  display: 'inline-block'
+});
+export const IconEmptyWrapper = styled.span({
+  width: '14px',
+  height: '100%',
+  display: 'inline-block',
+  opacity: 0
+});
 
 // With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
 // To achieve same result we use classname instead.
 export const TitleWrapperClassName = 'smart-link-title-wrapper';
-export const TitleWrapper = styled.span``;
+export const TitleWrapper = styled.span({});

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
-export const SpinnerWrapper = styled(IconTitleWrapper)`
-  vertical-align: text-bottom;
-  padding: 0px;
-`;
+export const SpinnerWrapper = styled(IconTitleWrapper)({
+  verticalAlign: 'text-bottom',
+  padding: '0px'
+});

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

@@ -2,41 +2,40 @@ import styled from '@emotion/styled';
 import { B400, N200 } from '@atlaskit/theme/colors';
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
-export const IconStyledButton = styled.span`
-  &&& {
-    text-align: initial;
-    display: inline;
-    vertical-align: baseline;
-    border-radius: ${"var(--ds-border-radius-100, 4px)"};
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-    padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"};
-    background-clip: padding-box;
-    box-decoration-break: clone;
-  }
-  > span {
-    display: inline;
-    overflow: initial;
-    text-overflow: initial;
-    white-space: initial;
-    > span {
-      overflow: initial;
-      text-overflow: initial;
-      white-space: initial;
+export const IconStyledButton = styled.span({
+  '&&&': {
+    textAlign: 'initial',
+    display: 'inline',
+    verticalAlign: 'baseline',
+    borderRadius: "var(--ds-border-radius-100, 4px)",
+    borderTopLeftRadius: '0px',
+    borderBottomLeftRadius: '0px',
+    padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"}`,
+    backgroundClip: 'padding-box',
+    boxDecorationBreak: 'clone'
+  },
+  '> span': {
+    display: 'inline',
+    overflow: 'initial',
+    textOverflow: 'initial',
+    whiteSpace: 'initial',
+    '> span': {
+      overflow: 'initial',
+      textOverflow: 'initial',
+      whiteSpace: 'initial'
     }
   }
-`;
-export const NoLinkAppearance = styled.span`
-  color: ${`var(--ds-text-subtlest, ${N200})`};
-  margin-left: ${"var(--ds-space-050, 4px)"};
-`;
-export const LowercaseAppearance = styled.span`
-  text-transform: lowercase;
-`;
-export const LinkAppearance = styled.a`
-  color: ${`var(--ds-link, ${B400})`};
-
-  &:hover {
-    text-decoration: none;
+});
+export const NoLinkAppearance = styled.span({
+  color: `var(--ds-text-subtlest, ${N200})`,
+  marginLeft: "var(--ds-space-050, 4px)"
+});
+export const LowercaseAppearance = styled.span({
+  textTransform: 'lowercase'
+});
+export const LinkAppearance = styled.a({
+  color: `var(--ds-link, ${B400})`,
+  '&:hover': {
+    textDecoration: 'none'
   }
-`;
+});

package/dist/es2019/view/LinkUrl/LinkWarningModal/styled.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-export const breakWordsCss = css`
-  white-space: pre-line;
-  word-break: break-all;
-`;
+export const breakWordsCss = css({
+  whiteSpace: 'pre-line',
+  wordBreak: 'break-all'
+});

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.55.2",
+  packageVersion: "26.56.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

@@ -15,22 +15,22 @@ const getImageStyles = isFlexibleUi => {
   if (isFlexibleUi) {
     return;
   }
-  return css`
-    height: ${gs(2)};
-    width: ${gs(2)};
-  `;
+  return css({
+    height: gs(2),
+    width: gs(2)
+  });
 };
 const getSpanStyles = isFlexibleUi => {
   if (isFlexibleUi) {
     return;
   }
-  return css`
-    height: ${gs(2.5)};
-    width: ${gs(2)};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `;
+  return css({
+    height: gs(2.5),
+    width: gs(2),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  });
 };
 export const Icon = ({
   url,

package/dist/es2019/view/common/ai-icon-loading/index.js

@@ -9,21 +9,17 @@ import { aiThemeTokens } from '../ai-prism/constants';
  * with modifications
  */
 
-const bounce = keyframes`
-  from {
-    transform: translateY(0);
+const bounce = keyframes({
+  from: {
+    transform: 'translateY(0)'
+  },
+  '16.67%': {
+    transform: 'translateY(-2px)'
+  },
+  '33.33%': {
+    transform: 'translateY(0px)'
   }
-
-  // 200ms of 1200ms = 16.67%
-  16.67% {
-    transform: translateY(-2px);
-  }
-
-  // 400ms of 1200ms = 33.33%
-  33.33% {
-    transform: translateY(0px);
-  }
-`;
+});
 const BASE_DELAY = 400;
 const QUEUE_DELAY = 200;
 const animationStyles = css({

package/dist/esm/constants.js

@@ -145,6 +145,7 @@ export var ElementName = /*#__PURE__*/function (ElementName) {
  * Flexible UI action (button)
  */
 export var ActionName = /*#__PURE__*/function (ActionName) {
+  ActionName["CopyLinkAction"] = "CopyLinkAction";
   ActionName["DeleteAction"] = "DeleteAction";
   ActionName["EditAction"] = "EditAction";
   ActionName["FollowAction"] = "FollowAction";

package/dist/esm/extractors/flexible/actions/extract-copy-link-action.js

@@ -0,0 +1,15 @@
+import { extractLink } from '@atlaskit/link-extractors';
+import { CardAction } from '../../../view/Card/types';
+import { canShowAction } from '../../../utils/actions/can-show-action';
+export var extractCopyLinkAction = function extractCopyLinkAction(data, actionOptions) {
+  if (!canShowAction(CardAction.CopyLinkAction, actionOptions)) {
+    return;
+  }
+  var url = extractLink(data);
+  if (!url) {
+    return;
+  }
+  return {
+    url: url
+  };
+};

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

@@ -3,9 +3,10 @@ import { ActionName } from '../../../constants';
 import { extractDownloadAction } from './extract-download-action';
 import { extractPreviewAction } from './extract-preview-action';
 import extractFollowAction from './extract-follow-action';
+import { extractCopyLinkAction } from './extract-copy-link-action';
 var extractActions = function extractActions(response, data, actionOptions, id) {
   var _action;
-  var action = (_action = {}, _defineProperty(_action, ActionName.DownloadAction, extractDownloadAction(data, actionOptions)), _defineProperty(_action, ActionName.FollowAction, extractFollowAction(response, actionOptions, id)), _defineProperty(_action, ActionName.PreviewAction, extractPreviewAction(response, actionOptions)), _action);
+  var action = (_action = {}, _defineProperty(_action, ActionName.CopyLinkAction, extractCopyLinkAction(data, actionOptions)), _defineProperty(_action, ActionName.DownloadAction, extractDownloadAction(data, actionOptions)), _defineProperty(_action, ActionName.FollowAction, extractFollowAction(response, actionOptions, id)), _defineProperty(_action, ActionName.PreviewAction, extractPreviewAction(response, actionOptions)), _action);
   return Object.values(action).some(function (value) {
     return Boolean(value);
   }) ? action : undefined;

package/dist/esm/messages.js

@@ -45,6 +45,11 @@ export var messages = defineMessages({
     defaultMessage: "We cannot show the results of this summary as it goes against <a>Atlassian's Acceptable Use Policy</a>.",
     description: 'Shown when AI summary is summarising the link resource content and the content violates atlassians acceptable use policy.'
   },
+  ai_summary_error_hipaa_content_detected: {
+    id: 'fabric.linking.ai_summary_error_hipaa_content_detected',
+    defaultMessage: 'Atlassian Intelligence was unable to process your request as your content contains links to HIPAA restricted content.',
+    description: 'Shown when the AI summary is summarising the link resource content and the content contains HIPAA restricted content.'
+  },
   assigned_to: {
     id: 'fabric.linking.assigned_to',
     defaultMessage: 'Assigned to {context}',
@@ -145,6 +150,11 @@ export var messages = defineMessages({
     defaultMessage: 'Copy link',
     description: ''
   },
+  copied_url_to_clipboard: {
+    id: 'fabric.linking.copied_url_to_clipboard.nonfinal',
+    defaultMessage: 'Copied!',
+    description: 'Url has been copied to the clipboard'
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",

package/dist/esm/state/hooks/use-ai-summary/ai-summary-service/types.js

@@ -1 +1 @@
-export var errorMessages = ['NETWORK_ERROR', 'NO_ANSWER', 'RATE_LIMIT', 'NO_AGENT', 'PLUGIN_ERRORED', 'OPENAI_RATE_LIMIT_USER_ABUSE', 'ACCEPTABLE_USE_VIOLATIONS', 'AI_DISABLED', 'UNEXPECTED'];
+export var errorMessages = ['NETWORK_ERROR', 'NO_ANSWER', 'RATE_LIMIT', 'NO_AGENT', 'PLUGIN_ERRORED', 'OPENAI_RATE_LIMIT_USER_ABUSE', 'ACCEPTABLE_USE_VIOLATIONS', 'AI_DISABLED', 'UNEXPECTED', 'HIPAA_CONTENT_DETECTED'];

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.55.2"
+  packageVersion: "26.56.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["testId"];
-var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useCallback, useMemo } from 'react';
@@ -14,7 +12,11 @@ import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
 import { messages } from '../../../../messages';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
-var contentStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])), "var(--ds-text-subtlest, #626F86)");
+var contentStyles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  marginTop: "var(--ds-space-100, 0.5rem)",
+  fontSize: '0.75rem'
+});
 
 /**
  * This view represents a Block card that has an 'Unauthorized' status .