@atlaskit/media-card 77.5.1 → 77.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-card
 
+## 77.6.0
+
+### Minor Changes
+
+- [#60120](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60120) [`90b15e5dd475`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/90b15e5dd475) - Extract CardView logic into individual "view" components
+
+### Patch Changes
+
+- [#60464](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60464) [`a30f9a5f3e0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a30f9a5f3e0d) - Removing unused dependencies
+
+## 77.5.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 77.5.1
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -49,7 +49,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.5.1";
+var packageVersion = "77.6.0";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.5.1";
+var packageVersion = "77.6.0";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/card/v2/cardV2.js

@@ -16,7 +16,7 @@ var _externalImageCard = require("./externalImageCard");
 var _fileCard = require("./fileCard");
 var _excluded = ["identifier"];
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.5.1";
+var packageVersion = "77.6.0";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/v2/cardviews/cardViewWrapper.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardViewWrapper = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _wrapper = require("../../ui/wrapper");
+var _actions = require("../../actions");
+var _styles = require("../../ui/styles");
+var _titleBox = require("../../ui/titleBox/titleBox");
+var _tickBox = require("../../ui/tickBox/tickBox");
+var _blanket = require("../../ui/blanket/blanket");
+var _actionsBar = require("../../ui/actionsBar/actionsBar");
+var _classnames = require("../../classnames");
+var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar"];
+/** @jsx jsx */
+var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
+  var cardPreview = _ref.cardPreview,
+    testId = _ref.testId,
+    dimensions = _ref.dimensions,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
+    metadata = _ref.metadata,
+    selected = _ref.selected,
+    selectable = _ref.selectable,
+    actions = _ref.actions,
+    breakpoint = _ref.breakpoint,
+    disableOverlay = _ref.disableOverlay,
+    titleBoxBgColor = _ref.titleBoxBgColor,
+    titleBoxIcon = _ref.titleBoxIcon,
+    shouldHideTooltip = _ref.shouldHideTooltip,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    mediaCardCursor = _ref.mediaCardCursor,
+    customBlanket = _ref.customBlanket,
+    customTitleBox = _ref.customTitleBox,
+    progressBar = _ref.progressBar,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _ref2 = metadata || {},
+    name = _ref2.name,
+    createdAt = _ref2.createdAt,
+    mediaType = _ref2.mediaType;
+  var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
+  var defaultBlanket = !disableOverlay && (0, _react.jsx)(_blanket.Blanket, null);
+  var defaultTitleBox = !disableOverlay && !!name && (0, _react.jsx)(_titleBox.TitleBox, {
+    name: name,
+    createdAt: createdAt,
+    breakpoint: breakpoint,
+    titleBoxIcon: titleBoxIcon,
+    titleBoxBgColor: titleBoxBgColor
+  });
+  var content = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", (0, _extends2.default)({
+    css: _styles.cardImageContainerStyles,
+    className: _classnames.fileCardImageViewSelector,
+    "data-testid": _classnames.fileCardImageViewSelector,
+    "data-test-media-name": name,
+    "data-test-selected": selected ? true : undefined
+  }, props), children, customBlanket ? customBlanket() : defaultBlanket, customTitleBox ? customTitleBox() : defaultTitleBox, !disableOverlay && !!selectable && (0, _react.jsx)(_tickBox.TickBox, {
+    selected: selected
+  }), progressBar && progressBar()), !disableOverlay && actions && actions.length !== 0 && (0, _react.jsx)(_actionsBar.ActionsBar, {
+    actions: actionsWithDetails
+  }));
+  var shouldRenderPlayButton = function shouldRenderPlayButton() {
+    if (mediaType !== 'video' || !cardPreview) {
+      return false;
+    }
+    return true;
+  };
+  var isPlayButtonClickable = shouldRenderPlayButton() && disableOverlay;
+  var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
+  var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
+  var shouldDisplayBackground = !cardPreview || !disableOverlay;
+  return (0, _react.jsx)(_wrapper.Wrapper, {
+    testId: testId || 'media-card-view',
+    dimensions: dimensions,
+    appearance: appearance,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    innerRef: ref,
+    breakpoint: breakpoint,
+    mediaCardCursor: mediaCardCursor,
+    disableOverlay: !!disableOverlay,
+    selected: !!selected,
+    displayBackground: shouldDisplayBackground,
+    isPlayButtonClickable: !!isPlayButtonClickable,
+    isTickBoxSelectable: isTickBoxSelectable,
+    shouldDisplayTooltip: shouldDisplayTooltip
+  }, shouldDisplayTooltip ? (0, _react.jsx)(_tooltip.default, {
+    content: name,
+    position: "bottom",
+    tag: "div"
+  }, content) : content);
+});

package/dist/cjs/card/v2/cardviews/errorCardView.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorCardView = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _react2 = require("react");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("../../../utils/analytics");
+var _useBreakpoint = require("../../useBreakpoint");
+var _cardViewWrapper = require("./cardViewWrapper");
+var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
+var _iconWrapper = require("../../ui/iconWrapper/iconWrapper");
+var _failedTitleBox = require("../../ui/titleBox/failedTitleBox");
+var _iconMessage = require("../../ui/iconMessage");
+var _errors = require("../../../errors");
+var _mediaUi = require("@atlaskit/media-ui");
+/** @jsx jsx */
+
+var IconMessage = function IconMessage(_ref) {
+  var error = _ref.error,
+    metadata = _ref.metadata;
+  var _ref2 = error || {},
+    secondaryError = _ref2.secondaryError;
+  if ((0, _errors.isRateLimitedError)(secondaryError) || (0, _errors.isPollingError)(secondaryError)) {
+    return (0, _react.jsx)(_iconMessage.PreviewCurrentlyUnavailable, null);
+  } else if ((0, _errors.isUploadError)(error)) {
+    return (0, _react.jsx)(_iconMessage.FailedToUpload, null);
+  } else if (!metadata) {
+    return (0, _react.jsx)(_iconMessage.FailedToLoad, null);
+  } else {
+    return (0, _react.jsx)(_iconMessage.PreviewUnavailable, null);
+  }
+};
+var ErrorCardViewBase = function ErrorCardViewBase(props) {
+  var error = props.error,
+    metadata = props.metadata,
+    dimensions = props.dimensions,
+    disableOverlay = props.disableOverlay;
+  var _ref3 = metadata || {},
+    name = _ref3.name,
+    mediaType = _ref3.mediaType,
+    mimeType = _ref3.mimeType;
+  var divRef = (0, _react2.useRef)(null);
+  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  var customMessage = (0, _errors.isUploadError)(props.error) ? _mediaUi.messages.failed_to_upload : undefined;
+  var renderFailedTitleBox = !disableOverlay && (!name || !!customMessage);
+  var renderTitleBox = !disableOverlay && !!name && !customMessage;
+  var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
+  return (0, _react.jsx)(_cardViewWrapper.CardViewWrapper, (0, _extends2.default)({}, props, {
+    metadata: metadata,
+    breakpoint: breakpoint,
+    "data-test-status": "error",
+    ref: divRef,
+    customTitleBox: renderFailedTitleBox ? function () {
+      return (0, _react.jsx)(_failedTitleBox.FailedTitleBox, {
+        breakpoint: breakpoint,
+        customMessage: customMessage
+      });
+    } : undefined
+  }), (0, _react.jsx)(_iconWrapper.IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, (0, _react.jsx)(_mimeTypeIcon.MimeTypeIcon, {
+    testId: "media-card-file-type-icon",
+    mediaType: mediaType,
+    mimeType: mimeType,
+    name: name
+  }), !renderFailedTitleBox && (0, _react.jsx)(IconMessage, {
+    error: error,
+    metadata: metadata
+  })));
+};
+
+// TODO: check if analytics is correct
+
+var ErrorCardView = exports.ErrorCardView = (0, _analyticsNext.withAnalyticsEvents)({
+  onClick: (0, _analytics.createAndFireMediaCardEvent)({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(ErrorCardViewBase);

package/dist/cjs/card/v2/cardviews/iconCardView.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconCardView = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _react2 = require("react");
+var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("../../../utils/analytics");
+var _iconWrapper = require("../../ui/iconWrapper/iconWrapper");
+var _useBreakpoint = require("../../useBreakpoint");
+var _cardViewWrapper = require("./cardViewWrapper");
+var _progressBar = require("../../ui/progressBar/progressBar");
+var _blanket = require("../../ui/blanket/blanket");
+/** @jsx jsx */
+
+// NOTE: should we call this Icon or UploadingCardView since we now have ProgressBar?
+
+var IconCardViewBase = function IconCardViewBase(props) {
+  var dimensions = props.dimensions,
+    metadata = props.metadata,
+    disableOverlay = props.disableOverlay,
+    innerRef = props.innerRef,
+    progress = props.progress,
+    status = props.status;
+  var divRef = (0, _react2.useRef)(null);
+  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  (0, _react2.useEffect)(function () {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  var _ref = metadata || {},
+    name = _ref.name,
+    mediaType = _ref.mediaType,
+    mimeType = _ref.mimeType;
+  var hasTitleBox = !disableOverlay && !!name;
+  var isUploading = status === 'uploading';
+  return (0, _react.jsx)(_cardViewWrapper.CardViewWrapper, (0, _extends2.default)({}, props, {
+    metadata: metadata,
+    breakpoint: breakpoint,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    ref: divRef,
+    customBlanket: function customBlanket() {
+      return (0, _react.jsx)(_blanket.Blanket, {
+        isFixed: isUploading
+      });
+    },
+    progressBar: isUploading ? function () {
+      return (0, _react.jsx)(_progressBar.ProgressBar, {
+        progress: progress,
+        breakpoint: breakpoint,
+        positionBottom: !hasTitleBox
+      });
+    } : undefined
+  }), (0, _react.jsx)(_iconWrapper.IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, (0, _react.jsx)(_mimeTypeIcon.MimeTypeIcon, {
+    testId: "media-card-file-type-icon",
+    mediaType: mediaType,
+    mimeType: mimeType,
+    name: name
+  })));
+};
+
+// TODO: check if analytics is correct
+
+var IconCardView = exports.IconCardView = (0, _analyticsNext.withAnalyticsEvents)({
+  onClick: (0, _analytics.createAndFireMediaCardEvent)({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(IconCardViewBase);

package/dist/cjs/card/v2/cardviews/imageCardView.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageCardView = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _react2 = require("react");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("../../../utils/analytics");
+var _imageRenderer = require("../../ui/imageRenderer/imageRenderer");
+var _useBreakpoint = require("../../useBreakpoint");
+var _cardViewWrapper = require("./cardViewWrapper");
+var _progressBar = require("../../ui/progressBar/progressBar");
+var _blanket = require("../../ui/blanket/blanket");
+/** @jsx jsx */
+
+var ImageCardViewBase = function ImageCardViewBase(props) {
+  var status = props.status,
+    dimensions = props.dimensions,
+    metadata = props.metadata,
+    disableOverlay = props.disableOverlay,
+    innerRef = props.innerRef,
+    progress = props.progress,
+    cardPreview = props.cardPreview,
+    alt = props.alt,
+    resizeMode = props.resizeMode,
+    onDisplayImage = props.onDisplayImage,
+    nativeLazyLoad = props.nativeLazyLoad,
+    forceSyncDisplay = props.forceSyncDisplay,
+    _onImageLoad = props.onImageLoad,
+    _onImageError = props.onImageError;
+  var divRef = (0, _react2.useRef)(null);
+  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  (0, _react2.useEffect)(function () {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  var _ref = metadata || {},
+    name = _ref.name,
+    _ref$mediaType = _ref.mediaType,
+    mediaType = _ref$mediaType === void 0 ? 'unknown' : _ref$mediaType;
+  var hasTitleBox = !disableOverlay && !!name;
+  var isUploading = status === 'uploading';
+  return (0, _react.jsx)(_cardViewWrapper.CardViewWrapper, (0, _extends2.default)({}, props, {
+    breakpoint: breakpoint,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    ref: divRef,
+    customBlanket: function customBlanket() {
+      return (0, _react.jsx)(_blanket.Blanket, {
+        isFixed: isUploading
+      });
+    },
+    progressBar: isUploading ? function () {
+      return (0, _react.jsx)(_progressBar.ProgressBar, {
+        progress: progress,
+        breakpoint: breakpoint,
+        positionBottom: !hasTitleBox
+      });
+    } : undefined
+  }), (0, _react.jsx)(_imageRenderer.ImageRenderer, {
+    cardPreview: cardPreview,
+    mediaType: mediaType,
+    alt: alt,
+    resizeMode: resizeMode,
+    onDisplayImage: onDisplayImage,
+    onImageLoad: function onImageLoad() {
+      return _onImageLoad === null || _onImageLoad === void 0 ? void 0 : _onImageLoad(cardPreview);
+    },
+    onImageError: function onImageError() {
+      return _onImageError === null || _onImageError === void 0 ? void 0 : _onImageError(cardPreview);
+    },
+    nativeLazyLoad: nativeLazyLoad,
+    forceSyncDisplay: forceSyncDisplay
+  }));
+};
+
+// TODO: check if analytics is correct
+
+var ImageCardView = exports.ImageCardView = (0, _analyticsNext.withAnalyticsEvents)({
+  onClick: (0, _analytics.createAndFireMediaCardEvent)({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(ImageCardViewBase);