@atlaskit/smart-card 26.9.12 → 26.9.14

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.9.14
+
+### Patch Changes
+
+- [`08c372c1547`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08c372c1547) - [ux] Revert of functionality added in 26.9.8
+
+## 26.9.13
+
+### Patch Changes
+
+- [`68956c0d353`](https://bitbucket.org/atlassian/atlassian-frontend/commits/68956c0d353) - Embed Modal: Fix icon alignment when triggered from flexible and block card component
+
 ## 26.9.12
 
 ### Patch Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.9.12",
+	"version": "26.9.14",
 	"sideEffects": false
 }

package/dist/cjs/view/EmbedModal/components/link-info/styled.js

@@ -12,7 +12,10 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: ", " ", " 14px\n    ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 exports.containerStyles = containerStyles;
 var iconSize = '24px';
-var iconCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
+// EDM-7328: CSS Specificity
+// An embed modal icon css for img, span, svg has specificity weight of 0-1-1.
+// Specify flex ui icon selector to increase specificity weight to 0-2-1.
+var iconCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &,\n  [data-smart-element-icon] img,\n  [data-smart-element-icon] span,\n  [data-smart-element-icon] svg,\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
 exports.iconCss = iconCss;
 var height = '20px';
 var titleCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    margin-bottom: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);

package/dist/cjs/view/EmbedModal/utils.js

@@ -8,13 +8,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.openPreviewModal = void 0;
 exports.previewFunction = previewFunction;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _icon = _interopRequireDefault(require("../FlexibleCard/components/elements/icon"));
+var _constants = require("../../constants");
 var _excluded = ["popupMountPointId", "onClose"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -30,7 +31,9 @@ var openPreviewModal = function openPreviewModal(_ref) {
     title = _ref.title,
     url = _ref.url;
   var EmbedIcon = {
-    icon: /*#__PURE__*/_react.default.createElement(_icon.default, linkIcon),
+    icon: /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({}, linkIcon, {
+      size: _constants.SmartLinkSize.Large
+    })),
     isFlexibleUi: true
   };
   return previewFunction({

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -185,7 +185,6 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     var hoverCardContentProps = {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
-      onWheel: initHideCard,
       cardActions: filteredActions,
       cardState: linkState,
       onActionClick: onActionClick,

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

@@ -80,7 +80,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
     url = _ref.url,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
-    onWheel = _ref.onWheel,
     showServerActions = _ref.showServerActions;
   var useLozengeAction = (0, _linkProvider.useFeatureFlag)('useLozengeAction');
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
@@ -94,7 +93,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
   var statusRef = (0, _react2.useRef)(linkStatus);
   var analyticsRef = (0, _react2.useRef)(analytics);
-  var wrapperRef = (0, _react2.useRef)(null);
   (0, _react2.useEffect)(function () {
     /**
      * Must access current analytics object value via ref because its not stable
@@ -126,22 +124,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
       });
     };
   }, []);
-  (0, _react2.useEffect)(function () {
-    var wrapperRefValue = null;
-    if (wrapperRef.current && onWheel) {
-      // Detect wheel even on hover card content to close hover card
-      // Add event listener through ref because we want it to execute only once.
-      wrapperRef.current.addEventListener('wheel', onWheel, {
-        once: true
-      });
-      wrapperRefValue = wrapperRef.current;
-    }
-    return function () {
-      if (wrapperRefValue && onWheel) {
-        wrapperRefValue.removeEventListener('wheel', onWheel);
-      }
-    };
-  }, [onWheel]);
   var onClick = (0, _react2.useCallback)(function (event) {
     var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
     analytics.ui.cardClickedEvent({
@@ -217,13 +199,11 @@ var HoverCardContent = function HoverCardContent(_ref) {
   };
   var cardView = getCardView(cardState);
   return cardView ? (0, _react.jsx)("div", {
-    "data-testid": "hover-card-content",
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,
     className: hoverCardClassName,
-    css: _styled.HoverCardContainer,
-    ref: wrapperRef
+    css: _styled.HoverCardContainer
   }, cardView) : null;
 };
 var _default = HoverCardContent;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.9.12",
+	"version": "26.9.14",
 	"sideEffects": false
 }

package/dist/es2019/view/EmbedModal/components/link-info/styled.js

@@ -12,7 +12,14 @@ export const containerStyles = css`
     ${"var(--ds-space-300, 24px)"};
 `;
 const iconSize = '24px';
+// EDM-7328: CSS Specificity
+// An embed modal icon css for img, span, svg has specificity weight of 0-1-1.
+// Specify flex ui icon selector to increase specificity weight to 0-2-1.
 export const iconCss = css`
+  &,
+  [data-smart-element-icon] img,
+  [data-smart-element-icon] span,
+  [data-smart-element-icon] svg,
   img,
   span,
   svg {

package/dist/es2019/view/EmbedModal/utils.js

@@ -3,6 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { IntlProvider } from 'react-intl-next';
 import Icon from '../FlexibleCard/components/elements/icon';
+import { SmartLinkSize } from '../../constants';
 export const openPreviewModal = ({
   analytics,
   downloadUrl: download,
@@ -15,7 +16,9 @@ export const openPreviewModal = ({
   url
 }) => {
   const EmbedIcon = {
-    icon: /*#__PURE__*/React.createElement(Icon, linkIcon),
+    icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
+      size: SmartLinkSize.Large
+    })),
     isFlexibleUi: true
   };
   return previewFunction({

package/dist/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -160,7 +160,6 @@ export const HoverCardComponent = ({
     const hoverCardContentProps = {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
-      onWheel: initHideCard,
       cardActions: filteredActions,
       cardState: linkState,
       onActionClick,

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

@@ -41,7 +41,6 @@ const HoverCardContent = ({
   url,
   onMouseEnter,
   onMouseLeave,
-  onWheel,
   showServerActions
 }) => {
   var _linkState$status, _cardState$details;
@@ -56,7 +55,6 @@ const HoverCardContent = ({
   const linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
   const statusRef = useRef(linkStatus);
   const analyticsRef = useRef(analytics);
-  const wrapperRef = useRef(null);
   useEffect(() => {
     /**
      * Must access current analytics object value via ref because its not stable
@@ -88,22 +86,6 @@ const HoverCardContent = ({
       });
     };
   }, []);
-  useEffect(() => {
-    let wrapperRefValue = null;
-    if (wrapperRef.current && onWheel) {
-      // Detect wheel even on hover card content to close hover card
-      // Add event listener through ref because we want it to execute only once.
-      wrapperRef.current.addEventListener('wheel', onWheel, {
-        once: true
-      });
-      wrapperRefValue = wrapperRef.current;
-    }
-    return () => {
-      if (wrapperRefValue && onWheel) {
-        wrapperRefValue.removeEventListener('wheel', onWheel);
-      }
-    };
-  }, [onWheel]);
   const onClick = useCallback(event => {
     const isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent({
@@ -176,13 +158,11 @@ const HoverCardContent = ({
   };
   const cardView = getCardView(cardState);
   return cardView ? jsx("div", {
-    "data-testid": "hover-card-content",
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,
     className: hoverCardClassName,
-    css: HoverCardContainer,
-    ref: wrapperRef
+    css: HoverCardContainer
   }, cardView) : null;
 };
 export default HoverCardContent;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.9.12",
+	"version": "26.9.14",
 	"sideEffects": false
 }

package/dist/esm/view/EmbedModal/components/link-info/styled.js

@@ -4,7 +4,10 @@ import { css } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: ", " ", " 14px\n    ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 var iconSize = '24px';
-export var iconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
+// EDM-7328: CSS Specificity
+// An embed modal icon css for img, span, svg has specificity weight of 0-1-1.
+// Specify flex ui icon selector to increase specificity weight to 0-2-1.
+export var iconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &,\n  [data-smart-element-icon] img,\n  [data-smart-element-icon] span,\n  [data-smart-element-icon] svg,\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
 var height = '20px';
 export var titleCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    margin-bottom: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
 export var actionCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: ", ";\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), "var(--ds-space-050, 4px)", height, height);

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

@@ -1,12 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["popupMountPointId", "onClose"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { IntlProvider } from 'react-intl-next';
 import Icon from '../FlexibleCard/components/elements/icon';
+import { SmartLinkSize } from '../../constants';
 export var openPreviewModal = function openPreviewModal(_ref) {
   var analytics = _ref.analytics,
     download = _ref.downloadUrl,
@@ -19,7 +20,9 @@ export var openPreviewModal = function openPreviewModal(_ref) {
     title = _ref.title,
     url = _ref.url;
   var EmbedIcon = {
-    icon: /*#__PURE__*/React.createElement(Icon, linkIcon),
+    icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
+      size: SmartLinkSize.Large
+    })),
     isFlexibleUi: true
   };
   return previewFunction({

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

@@ -174,7 +174,6 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     var hoverCardContentProps = {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard,
-      onWheel: initHideCard,
       cardActions: filteredActions,
       cardState: linkState,
       onActionClick: onActionClick,

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

@@ -67,7 +67,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
     url = _ref.url,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
-    onWheel = _ref.onWheel,
     showServerActions = _ref.showServerActions;
   var useLozengeAction = useFeatureFlag('useLozengeAction');
   var _useAnalyticsEvents = useAnalyticsEvents(),
@@ -81,7 +80,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
   var statusRef = useRef(linkStatus);
   var analyticsRef = useRef(analytics);
-  var wrapperRef = useRef(null);
   useEffect(function () {
     /**
      * Must access current analytics object value via ref because its not stable
@@ -113,22 +111,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
       });
     };
   }, []);
-  useEffect(function () {
-    var wrapperRefValue = null;
-    if (wrapperRef.current && onWheel) {
-      // Detect wheel even on hover card content to close hover card
-      // Add event listener through ref because we want it to execute only once.
-      wrapperRef.current.addEventListener('wheel', onWheel, {
-        once: true
-      });
-      wrapperRefValue = wrapperRef.current;
-    }
-    return function () {
-      if (wrapperRefValue && onWheel) {
-        wrapperRefValue.removeEventListener('wheel', onWheel);
-      }
-    };
-  }, [onWheel]);
   var onClick = useCallback(function (event) {
     var isModifierKeyPressed = isSpecialEvent(event);
     analytics.ui.cardClickedEvent({
@@ -204,13 +186,11 @@ var HoverCardContent = function HoverCardContent(_ref) {
   };
   var cardView = getCardView(cardState);
   return cardView ? jsx("div", {
-    "data-testid": "hover-card-content",
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,
     className: hoverCardClassName,
-    css: HoverCardContainer,
-    ref: wrapperRef
+    css: HoverCardContainer
   }, cardView) : null;
 };
 export default HoverCardContent;

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

@@ -80,7 +80,6 @@ export type HoverCardContentProps = {
     url: string;
     onMouseEnter?: MouseEventHandler;
     onMouseLeave?: MouseEventHandler;
-    onWheel?: EventListenerOrEventListenerObject;
     showServerActions?: boolean;
 };
 export type SnippetOrPreviewProps = {

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

@@ -80,7 +80,6 @@ export type HoverCardContentProps = {
     url: string;
     onMouseEnter?: MouseEventHandler;
     onMouseLeave?: MouseEventHandler;
-    onWheel?: EventListenerOrEventListenerObject;
     showServerActions?: boolean;
 };
 export type SnippetOrPreviewProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.9.12",
+  "version": "26.9.14",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
     "@atlaskit/popup": "^1.8.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.12.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
@@ -75,7 +75,7 @@
     "@af/visual-regression": "*",
     "@atlaskit/avatar": "^21.3.0",
     "@atlaskit/css-reset": "^6.5.0",
-    "@atlaskit/link-test-helpers": "^4.1.0",
+    "@atlaskit/link-test-helpers": "^4.2.0",
     "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/media-integration-test-helpers": "^3.0.0",
     "@atlaskit/media-test-helpers": "^33.0.0",