@atlaskit/smart-card 26.42.11 → 26.43.0

package/dist/esm/view/InlineCard/Frame/styled.js

@@ -27,6 +27,18 @@ var isSelected = function isSelected(_ref2) {
     return 'user-select: text';
   }
 };
+var hoveredStyles = function hoveredStyles(props) {
+  return "\n  ".concat(themed({
+    light: "border-color: ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";"),
+    dark: "border-color:  ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";")
+  })(props), ";\n");
+};
+var activeHoveredFocusedStyles = function activeHoveredFocusedStyles(props) {
+  return "\n  ".concat(props.withoutBackground ? '' : 'text-decoration: none;', ";\n");
+};
+var hoveredWihBorderStyles = function hoveredWihBorderStyles(props) {
+  return "\n    ".concat(hoveredStyles(props), ";\n    ").concat(activeHoveredFocusedStyles(props), ";\n");
+};
 
 /*
   Inline smart cards should have the following layout:
@@ -50,10 +62,7 @@ var baseWrapperStyle = function baseWrapperStyle(props) {
   })(props), ";\n\n  ").concat(isSelected(props), ";\n\n  ").concat(props.withoutBackground ? '' : themed({
     light: "border: 1px solid ".concat("var(--ds-border, ".concat(N40, ")"), ";"),
     dark: "border: 1px solid ".concat("var(--ds-border, ".concat(N500, ")"), ";")
-  })(props), "\n  &:hover {\n    ").concat(themed({
-    light: "border-color: ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";"),
-    dark: "border-color:  ".concat("var(--ds-border-accent-blue, ".concat(B200, ")"), ";")
-  })(props), "\n  }\n  &, :hover, :focus, :active {\n    ").concat(props.withoutBackground ? '' : 'text-decoration: none;', "\n  }\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n");
+  })(props), "\n  &:hover {\n    ").concat(hoveredStyles(props), "\n  }\n  &, :hover, :focus, :active {\n    ").concat(activeHoveredFocusedStyles(props), "\n  }\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  ").concat(props.isHovered && hoveredWihBorderStyles(props), ";\n");
 };
 export var WrapperAnchor = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), baseWrapperStyle, isInteractive);
 WrapperAnchor.displayName = 'WrapperAnchor';

package/dist/esm/view/InlineCard/ResolvedView/index.js

@@ -39,6 +39,7 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         _this$props$title = _this$props.title,
         title = _this$props$title === void 0 ? '' : _this$props$title,
         isSelected = _this$props.isSelected,
+        isHovered = _this$props.isHovered,
         onClick = _this$props.onClick,
         icon = _this$props.icon,
         link = _this$props.link,
@@ -54,6 +55,7 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         testId: testId,
         link: link,
         isSelected: isSelected,
+        isHovered: isHovered,
         onClick: onClick
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         emoji: titlePrefix,

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

@@ -26,6 +26,7 @@ export var InlineCard = function InlineCard(_ref) {
     handleAuthorize = _ref.handleAuthorize,
     handleFrameClick = _ref.handleFrameClick,
     isSelected = _ref.isSelected,
+    isHovered = _ref.isHovered,
     renderers = _ref.renderers,
     onResolve = _ref.onResolve,
     onError = _ref.onError,
@@ -85,6 +86,7 @@ export var InlineCard = function InlineCard(_ref) {
         showServerActions: showServerActions,
         link: url,
         isSelected: isSelected,
+        isHovered: isHovered,
         onClick: handleFrameClick,
         testId: testIdWithStatus
       }));

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

@@ -1,9 +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,
@@ -12,33 +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, /*#__PURE__*/React.createElement("div", {
+  }, jsx(FormattedMessage, messages.check_this_link))), jsx(ModalBody, null, jsx("div", {
     css: breakWordsCss
-  }, url && unsafeLinkText && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
+  }, 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/index.js

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

package/dist/esm/view/common/Byline.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { gs, mq } from './utils';
 export var Byline = function Byline(_ref) {
@@ -5,7 +7,7 @@ export var Byline = function Byline(_ref) {
     children = _ref.children,
     testId = _ref.testId,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: mq({
       fontSize: gs(1.5),
       lineHeight: gs(2.5),

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

@@ -1,6 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import React from 'react';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/glyph/link';
@@ -26,21 +27,21 @@ export var Icon = function Icon(_ref) {
     testId = _ref$testId === void 0 ? 'block-card-icon' : _ref$testId,
     _ref$isFlexibleUi = _ref.isFlexibleUi,
     isFlexibleUi = _ref$isFlexibleUi === void 0 ? false : _ref$isFlexibleUi;
-  var placeholder = defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
+  var placeholder = defaultIcon || jsx(LinkIcon, {
     label: "link",
     size: "small",
     testId: "".concat(testId, "-default")
   });
-  var image = url && /*#__PURE__*/React.createElement(ImageLoader, {
+  var image = url && jsx(ImageLoader, {
     src: url,
-    loaded: /*#__PURE__*/React.createElement("img", {
+    loaded: jsx("img", {
       css: getImageStyles(isFlexibleUi),
       src: url,
       "data-testid": "".concat(testId, "-image")
     }),
     errored: placeholder
   });
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: getSpanStyles(isFlexibleUi),
     "data-testid": testId,
     className: blockCardIconImageClassName

package/dist/esm/view/common/Metadata.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { N300 } from '@atlaskit/theme/colors';
 export var Metadata = function Metadata(_ref) {
@@ -7,7 +9,7 @@ export var Metadata = function Metadata(_ref) {
     tooltip = _ref.tooltip;
   var metadataIcon = icon || null;
   if (!metadataIcon && iconUrl) {
-    metadataIcon = /*#__PURE__*/React.createElement("img", {
+    metadataIcon = jsx("img", {
       src: iconUrl,
       css: {
         width: "var(--ds-space-100, 8px)",
@@ -15,13 +17,13 @@ export var Metadata = function Metadata(_ref) {
       }
     });
   }
-  var metadata = /*#__PURE__*/React.createElement("div", {
+  var metadata = jsx("div", {
     css: {
       display: 'flex',
       alignItems: 'center',
       marginRight: "var(--ds-space-050, 4px)"
     }
-  }, metadataIcon, /*#__PURE__*/React.createElement("span", {
+  }, metadataIcon, jsx("span", {
     css: {
       fontSize: "var(--ds-space-150, 12px)",
       color: "".concat("var(--ds-text-subtlest, ".concat(N300, ")")),
@@ -30,7 +32,7 @@ export var Metadata = function Metadata(_ref) {
     }
   }, text));
   if (tooltip) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx(Tooltip, {
       content: tooltip
     }, metadata);
   }

package/dist/esm/view/common/MetadataList.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { Metadata } from './Metadata';
 import { gs } from './utils';
 export var metadataListClassName = 'smart-link-metadata-list';
 export var MetadataList = function MetadataList(_ref) {
   var items = _ref.items,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: {
       display: 'flex',
       marginTop: gs(0.5),
@@ -17,7 +19,7 @@ export var MetadataList = function MetadataList(_ref) {
     "data-testid": testId,
     className: metadataListClassName
   }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement(Metadata, _extends({
+    return jsx(Metadata, _extends({
       key: item.text
     }, item));
   }));

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "container" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "showServerActions" | "onResolve" | "ui" | "showHoverPreview" | "showAuthTooltip" | "platform" | "isFrameVisible" | "frameStyle" | "importer" | "showActions" | "fallbackComponent" | "embedIframeRef" | "embedIframeUrlType" | "inlinePreloaderStyle" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "container" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "showServerActions" | "onResolve" | "ui" | "showHoverPreview" | "showAuthTooltip" | "platform" | "isHovered" | "isFrameVisible" | "frameStyle" | "importer" | "showActions" | "fallbackComponent" | "embedIframeRef" | "embedIframeUrlType" | "inlinePreloaderStyle" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

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

@@ -19,6 +19,8 @@ export interface CardProps extends WithAnalyticsEventsProps {
     id?: string;
     platform?: CardPlatform;
     isSelected?: boolean;
+    /** A flag that determines whether a card is in a hover state in edit mode. Currently used for inline links only */
+    isHovered?: boolean;
     /**
      * @deprecated please use 'frameStyle' prop instead. Current usages will be converted in the following manner:
      * isFrameVisible: true => frameStyle: 'show', isFrameVisible: false => frameStyle: 'showOnHover'

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

@@ -12,6 +12,7 @@ export type CardWithUrlContentProps = {
     platform?: CardPlatform;
     onClick?: EventHandler<MouseEvent | KeyboardEvent>;
     isSelected?: boolean;
+    isHovered?: boolean;
     isFrameVisible?: boolean;
     frameStyle?: FrameStyle;
     container?: HTMLElement;

package/dist/types/view/InlineCard/Frame/index.d.ts

@@ -11,5 +11,7 @@ export interface FrameViewProps {
     /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
     testId?: string;
     className?: string;
+    /** A flag that determines whether a card is in hover state in edit mode. */
+    isHovered?: boolean;
 }
 export declare const Frame: React.ForwardRefExoticComponent<FrameViewProps & React.RefAttributes<never>>;

package/dist/types/view/InlineCard/Frame/styled.d.ts

@@ -4,6 +4,7 @@ export interface WrapperProps {
     isSelected?: boolean;
     isInteractive?: boolean;
     withoutBackground?: boolean;
+    isHovered?: boolean;
 }
 export declare const WrapperAnchor: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/dist/types/view/InlineCard/ResolvedView/index.d.ts

@@ -11,6 +11,8 @@ export interface InlineCardResolvedViewProps {
     lozenge?: LozengeProps;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;
+    /** A flag that determines whether a card is in hover state in edit mode. Currently used for inline only */
+    isHovered?: boolean;
     /** The optional url */
     link?: string;
     /** The optional click handler */

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

@@ -10,6 +10,7 @@ export type InlineCardProps = {
     handleAuthorize: (() => void) | undefined;
     handleFrameClick: EventHandler<MouseEvent | KeyboardEvent>;
     isSelected?: boolean;
+    isHovered?: boolean;
     testId?: string;
     onResolve?: (data: {
         url?: string;

package/dist/types-ts4.5/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "container" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "showServerActions" | "onResolve" | "ui" | "showHoverPreview" | "showAuthTooltip" | "platform" | "isFrameVisible" | "frameStyle" | "importer" | "showActions" | "fallbackComponent" | "embedIframeRef" | "embedIframeUrlType" | "inlinePreloaderStyle" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "container" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "showServerActions" | "onResolve" | "ui" | "showHoverPreview" | "showAuthTooltip" | "platform" | "isHovered" | "isFrameVisible" | "frameStyle" | "importer" | "showActions" | "fallbackComponent" | "embedIframeRef" | "embedIframeUrlType" | "inlinePreloaderStyle" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

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

@@ -19,6 +19,8 @@ export interface CardProps extends WithAnalyticsEventsProps {
     id?: string;
     platform?: CardPlatform;
     isSelected?: boolean;
+    /** A flag that determines whether a card is in a hover state in edit mode. Currently used for inline links only */
+    isHovered?: boolean;
     /**
      * @deprecated please use 'frameStyle' prop instead. Current usages will be converted in the following manner:
      * isFrameVisible: true => frameStyle: 'show', isFrameVisible: false => frameStyle: 'showOnHover'

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

@@ -12,6 +12,7 @@ export type CardWithUrlContentProps = {
     platform?: CardPlatform;
     onClick?: EventHandler<MouseEvent | KeyboardEvent>;
     isSelected?: boolean;
+    isHovered?: boolean;
     isFrameVisible?: boolean;
     frameStyle?: FrameStyle;
     container?: HTMLElement;

package/dist/types-ts4.5/view/InlineCard/Frame/index.d.ts

@@ -11,5 +11,7 @@ export interface FrameViewProps {
     /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
     testId?: string;
     className?: string;
+    /** A flag that determines whether a card is in hover state in edit mode. */
+    isHovered?: boolean;
 }
 export declare const Frame: React.ForwardRefExoticComponent<FrameViewProps & React.RefAttributes<never>>;

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

@@ -4,6 +4,7 @@ export interface WrapperProps {
     isSelected?: boolean;
     isInteractive?: boolean;
     withoutBackground?: boolean;
+    isHovered?: boolean;
 }
 export declare const WrapperAnchor: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/dist/types-ts4.5/view/InlineCard/ResolvedView/index.d.ts

@@ -11,6 +11,8 @@ export interface InlineCardResolvedViewProps {
     lozenge?: LozengeProps;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;
+    /** A flag that determines whether a card is in hover state in edit mode. Currently used for inline only */
+    isHovered?: boolean;
     /** The optional url */
     link?: string;
     /** The optional click handler */

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

@@ -10,6 +10,7 @@ export type InlineCardProps = {
     handleAuthorize: (() => void) | undefined;
     handleFrameClick: EventHandler<MouseEvent | KeyboardEvent>;
     isSelected?: boolean;
+    isHovered?: boolean;
     testId?: string;
     onResolve?: (data: {
         url?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.42.11",
+  "version": "26.43.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
     "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/avatar-group": "^9.4.0",
     "@atlaskit/badge": "^15.2.0",
-    "@atlaskit/button": "^16.17.0",
+    "@atlaskit/button": "^16.18.0",
     "@atlaskit/dropdown-menu": "^12.1.0",
     "@atlaskit/frontend-utilities": "^2.7.0",
     "@atlaskit/icon": "^22.0.0",