@atlaskit/smart-card 26.15.2 → 26.15.4

package/dist/esm/view/BlockCard/views/flexible/utils/withFlexibleUIBlockCardStyle.js

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { flexibleBlockCardStyle } from '../styled';
+export var withFlexibleUIBlockCardStyle = function withFlexibleUIBlockCardStyle(FlexibleBlockCardView) {
+  return function (props) {
+    return jsx("div", {
+      css: flexibleBlockCardStyle
+    }, jsx(FlexibleBlockCardView, props));
+  };
+};

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

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+/** @jsx jsx */
+import React from 'react';
+import { popupContainerStyles } from '../styled';
+import { jsx } from '@emotion/react';
+var CustomPopupContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsx("div", _extends({
+    css: popupContainerStyles
+  }, props, {
+    ref: ref
+  }), children);
+});
+export default CustomPopupContainer;

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/LinkWarningModal/index.js

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl-next';
+import { breakWordsCss } from './styled';
+import { jsx } from '@emotion/react';
 import { messages } from '../../../messages';
 var WarningModal = function WarningModal(props) {
   var isOpen = props.isOpen,
@@ -11,31 +14,33 @@ var WarningModal = function WarningModal(props) {
     onClose = props.onClose,
     onContinue = props.onContinue,
     intl = props.intl;
-  var content = /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
+  var content = jsx(ModalTransition, null, isOpen && jsx(Modal, {
     onClose: onClose,
     testId: "link-with-safety-warning"
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+  }, jsx(ModalHeader, null, jsx(ModalTitle, {
     appearance: "warning"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.check_this_link))), /*#__PURE__*/React.createElement(ModalBody, null, url && unsafeLinkText && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
+  }, jsx(FormattedMessage, messages.check_this_link))), jsx(ModalBody, null, jsx("div", {
+    css: breakWordsCss
+  }, url && unsafeLinkText && jsx(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
     values: {
       unsafeLinkText: unsafeLinkText,
       a: function a() {
-        return /*#__PURE__*/React.createElement("a", {
+        return jsx("a", {
           href: url,
           target: "_blank",
           rel: "noopener noreferrer"
         }, url);
       }
     }
-  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+  })))), jsx(ModalFooter, null, jsx(Button, {
     appearance: "subtle",
     onClick: onClose
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.go_back)), /*#__PURE__*/React.createElement(Button, {
+  }, jsx(FormattedMessage, messages.go_back)), jsx(Button, {
     appearance: "warning",
     onClick: onContinue,
     autoFocus: true
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.continue)))));
-  return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+  }, jsx(FormattedMessage, messages.continue)))));
+  return intl ? content : jsx(IntlProvider, {
     locale: "en"
   }, content);
 };

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

@@ -0,0 +1,4 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+export var breakWordsCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  white-space: pre-line;\n  word-break: break-all;\n"])));

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/LinkWarningModal/index.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 interface LinkWarningModalProps {

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

@@ -0,0 +1 @@
+export declare const breakWordsCss: import("@emotion/react").SerializedStyles;

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/LinkWarningModal/index.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 interface LinkWarningModalProps {

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

@@ -0,0 +1 @@
+export declare const breakWordsCss: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.15.2",
+  "version": "26.15.4",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"