@atlaskit/media-card 75.0.1 → 76.0.0

package/dist/cjs/{utils → card/ui/actionsBar}/cardActions/styles.js

@@ -9,10 +9,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _mediaUi = require("@atlaskit/media-ui");
-var _styles = require("../../card/styles");
-var _mixins = require("../../card/styles/mixins");
-var _templateObject, _templateObject2;
-var wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  display: flex;\n  position: relative;\n  line-height: 0;\n"])), (0, _styles.rootStyles)());
+var _styles = require("../../styles");
+var _constants = require("@atlaskit/theme/constants");
+var _templateObject, _templateObject2, _templateObject3;
+var rootStyles = function rootStyles() {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  font-family: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n"])), (0, _constants.fontFamily)());
+};
+var wrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  display: flex;\n  position: relative;\n  line-height: 0;\n"])), rootStyles());
 exports.wrapperStyles = wrapperStyles;
 var CardActionIconButtonVariant = /*#__PURE__*/function (CardActionIconButtonVariant) {
   CardActionIconButtonVariant["default"] = "default";
@@ -21,10 +24,10 @@ var CardActionIconButtonVariant = /*#__PURE__*/function (CardActionIconButtonVar
 }({});
 exports.CardActionIconButtonVariant = CardActionIconButtonVariant;
 var getVariantStyles = function getVariantStyles(variant) {
-  return variant === 'filled' ? "\n    background-color: ".concat("var(--ds-surface-overlay, ".concat((0, _mixins.rgba)(_colors.N0, 0.8), ")"), ";\n    margin-right: 8px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      background-color: ", "var(--ds-surface-overlay-hovered, ".concat((0, _mixins.rgba)(_colors.N0, 0.6), ")"), "\n    }\n  ") : "\n    &:hover {\n      background-color: ".concat("var(--ds-background-neutral-subtle-hovered, rgba(9, 30, 66, 0.06))", ";\n    }\n  ");
+  return variant === 'filled' ? "\n    background-color: ".concat("var(--ds-surface-overlay, ".concat((0, _styles.rgba)(_colors.N0, 0.8), ")"), ";\n    margin-right: 8px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      background-color: ", "var(--ds-surface-overlay-hovered, ".concat((0, _styles.rgba)(_colors.N0, 0.6), ")"), "\n    }\n  ") : "\n    &:hover {\n      background-color: ".concat("var(--ds-background-neutral-subtle-hovered, rgba(9, 30, 66, 0.06))", ";\n    }\n  ");
 };
 var cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   var variant = _ref.variant;
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), _mediaUi.center, _mediaUi.borderRadius, (0, _mediaUi.size)(26), "var(--ds-icon, ".concat(_colors.N500, ")"), getVariantStyles(variant));
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), _mediaUi.center, _mediaUi.borderRadius, (0, _mediaUi.size)(26), "var(--ds-icon, ".concat(_colors.N500, ")"), getVariantStyles(variant));
 };
 exports.cardActionButtonStyles = cardActionButtonStyles;

package/dist/cjs/card/ui/actionsBar/styles.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.wrapperStyles = exports.fixedActionBarStyles = exports.actionsBarClassName = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _styles = require("../../styles");
+var _styles = require("../styles");
 var _templateObject;
 var actionsBarClassName = 'media-card-actions-bar';
 exports.actionsBarClassName = actionsBarClassName;

package/dist/cjs/card/ui/blanket/styles.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.fixedBlanketStyles = exports.blanketStyles = exports.blanketClassName = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _styles = require("../../styles");
+var _styles = require("../styles");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
 var blanketClassName = 'media-card-blanket';

package/dist/cjs/card/ui/imageRenderer/imageRenderer.js

@@ -9,7 +9,7 @@ exports.ImageRenderer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _mediaUi = require("@atlaskit/media-ui");
-var _resizeModeToMediaImageProps = require("../../../utils/resizeModeToMediaImageProps");
+var _resizeModeToMediaImageProps = require("./resizeModeToMediaImageProps");
 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; }
 var ImageRenderer = function ImageRenderer(_ref) {

package/dist/cjs/card/ui/progressBar/styles.js

@@ -9,7 +9,7 @@ exports.styledBarStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _mediaUi = require("@atlaskit/media-ui");
-var _mixins = require("../../styles/mixins");
+var _styles = require("../styles");
 var _colors = require("@atlaskit/theme/colors");
 var _common = require("../common");
 var _templateObject;
@@ -38,7 +38,7 @@ var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_re
     breakpoint = _ref.breakpoint,
     positionBottom = _ref.positionBottom,
     showOnTop = _ref.showOnTop;
-  return "\n".concat(_mediaUi.borderRadius, "\noverflow: hidden;\nposition: absolute;\nwidth: ").concat(width, "%;\nleft: ").concat(left, "%;\nbackground-color: ").concat((0, _mixins.rgba)(_colors.N0, 0.8), ";\nheight: ").concat(height + padding * 2, "px;\npadding: ").concat(padding, "px;\nbox-sizing: border-box;\n\n::before {\n  content: '';\n  width: ").concat(progress, "%;\n  height: 100%;\n  background-color: #44546F;\n  ").concat(_mediaUi.borderRadius, "\n  display: block;\n}\n").concat(generateResponsiveStyles(breakpoint, positionBottom, showOnTop), "\n");
+  return "\n".concat(_mediaUi.borderRadius, "\noverflow: hidden;\nposition: absolute;\nwidth: ").concat(width, "%;\nleft: ").concat(left, "%;\nbackground-color: ").concat((0, _styles.rgba)(_colors.N0, 0.8), ";\nheight: ").concat(height + padding * 2, "px;\npadding: ").concat(padding, "px;\nbox-sizing: border-box;\n\n::before {\n  content: '';\n  width: ").concat(progress, "%;\n  height: 100%;\n  background-color: #44546F;\n  ").concat(_mediaUi.borderRadius, "\n  display: block;\n}\n").concat(generateResponsiveStyles(breakpoint, positionBottom, showOnTop), "\n");
 };
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 

package/dist/cjs/card/ui/styles.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getWrapperShadow = exports.getWrapperDimensions = exports.getSelectableTickBoxStyles = exports.getCursorStyle = exports.getClickablePlayButtonStyles = exports.generateResponsiveStyles = exports.cardImageContainerStyles = exports.calcBreakpointSize = void 0;
+exports.transition = exports.rgba = exports.getWrapperShadow = exports.getWrapperDimensions = exports.getSelectableTickBoxStyles = exports.getCursorStyle = exports.getClickablePlayButtonStyles = exports.generateResponsiveStyles = exports.cardImageContainerStyles = exports.calcBreakpointSize = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
@@ -76,4 +76,18 @@ var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSe
 };
 exports.getSelectableTickBoxStyles = getSelectableTickBoxStyles;
 var cardImageContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), _mediaUi.borderRadius);
-exports.cardImageContainerStyles = cardImageContainerStyles;
+exports.cardImageContainerStyles = cardImageContainerStyles;
+var defaultTransitionDuration = '.3s';
+var transition = function transition() {
+  var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
+  return "\n  transition: ".concat(propertyName, " ").concat(defaultTransitionDuration, ";\n");
+};
+exports.transition = transition;
+var hexToRgb = function hexToRgb(hex) {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? "".concat(parseInt(result[1], 16), ",").concat(parseInt(result[2], 16), ",").concat(parseInt(result[3], 16)) : null;
+};
+var rgba = function rgba(hex, opacity) {
+  return "rgba(".concat(hexToRgb(hex), ", ").concat(opacity, ")");
+};
+exports.rgba = rgba;

package/dist/cjs/card/ui/tickBox/styles.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.wrapperStyles = exports.tickboxFixedStyles = exports.tickBoxClassName = exports.getSelectedStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _styles = require("../../styles");
+var _styles = require("../styles");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
 var tickBoxClassName = 'media-card-tickbox';

package/dist/cjs/card/ui/titleBox/styles.js

@@ -9,7 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _common = require("../common");
 var _colors = require("@atlaskit/theme/colors");
-var _mixins = require("../../styles/mixins");
+var _styles = require("../styles");
 var _components = require("@atlaskit/theme/components");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var generateResponsiveStyles = function generateResponsiveStyles() {
@@ -28,8 +28,8 @@ var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
     titleBoxBgColor = _ref.titleBoxBgColor,
     theme = _ref.theme;
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background-color: ", ";\n  color: ", ";\n  cursor: inherit;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  ", "\n"])), (0, _components.themed)({
-    light: "var(--ds-surface, ".concat((0, _mixins.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 1), ")"),
-    dark: "var(--ds-surface, ".concat((0, _mixins.rgba)(
+    light: "var(--ds-surface, ".concat((0, _styles.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 1), ")"),
+    dark: "var(--ds-surface, ".concat((0, _styles.rgba)(
     // theme does not contain this color, use constant instead
     titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : BACKGROUND_COLOR_DARK, 1), ")")
   })({

package/dist/cjs/card/ui/wrapper/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Wrapper", {
+  enumerable: true,
+  get: function get() {
+    return _wrapper.Wrapper;
+  }
+});
+var _wrapper = require("./wrapper");

package/dist/cjs/card/ui/{newFileExperience → wrapper}/styles.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.newFileExperienceWrapperStyles = void 0;
+exports.wrapperStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
@@ -12,13 +12,12 @@ var _mediaUi = require("@atlaskit/media-ui");
 var _colors = require("@atlaskit/theme/colors");
 var _selection = require("@atlaskit/editor-shared-styles/selection");
 var _components = require("@atlaskit/theme/components");
-var _styles = require("../../styles");
+var _styles = require("../styles");
 var _styles2 = require("../blanket/styles");
 var _styles3 = require("../actionsBar/styles");
-var _styles4 = require("../styles");
 var _templateObject;
 var BACKGROUND_COLOR_DARK = '#22272C';
-var newFileExperienceWrapperStyles = function newFileExperienceWrapperStyles(_ref) {
+var wrapperStyles = function wrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
     dimensions = _ref.dimensions,
     appearance = _ref.appearance,
@@ -30,12 +29,12 @@ var newFileExperienceWrapperStyles = function newFileExperienceWrapperStyles(_re
     shouldDisplayTooltip = _ref.shouldDisplayTooltip,
     mediaCardCursor = _ref.mediaCardCursor,
     theme = _ref.theme;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), (0, _styles.transition)(), (0, _constants.fontFamily)(), (0, _styles4.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat((0, _components.themed)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), (0, _styles.transition)(), (0, _constants.fontFamily)(), (0, _styles.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat((0, _components.themed)({
     light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
     dark: "var(--ds-background-neutral, ".concat(BACKGROUND_COLOR_DARK, ")")
   })({
     theme: theme
-  }), ";"), _mediaUi.borderRadius, (0, _styles4.getCursorStyle)(mediaCardCursor), (0, _styles4.getWrapperShadow)(disableOverlay, selected), (0, _styles4.generateResponsiveStyles)(breakpoint), _selection.hideNativeBrowserTextSelectionStyles, (0, _styles4.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles4.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
+  }), ";"), _mediaUi.borderRadius, (0, _styles.getCursorStyle)(mediaCardCursor), (0, _styles.getWrapperShadow)(disableOverlay, selected), (0, _styles.generateResponsiveStyles)(breakpoint), _selection.hideNativeBrowserTextSelectionStyles, (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
 };
-exports.newFileExperienceWrapperStyles = newFileExperienceWrapperStyles;
-newFileExperienceWrapperStyles.displayName = 'NewFileExperienceWrapper';
+exports.wrapperStyles = wrapperStyles;
+wrapperStyles.displayName = 'NewFileExperienceWrapper';

package/dist/cjs/card/ui/{newFileExperience/newFileExperienceWrapper.js → wrapper/wrapper.js}

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NewFileExperienceWrapper = void 0;
+exports.Wrapper = void 0;
 var _react = require("@emotion/react");
 var _cardConstants = require("../../cardConstants");
 var _styles = require("./styles");
 var _components = require("@atlaskit/theme/components");
 /**@jsx jsx */
 
-var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
+var Wrapper = function Wrapper(props) {
   var testId = props.testId,
     dimensions = props.dimensions,
     appearance = props.appearance,
@@ -30,7 +30,7 @@ var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
     id: "newFileExperienceWrapper",
     className: _cardConstants.newFileExperienceClassName,
     "data-testid": testId,
-    css: (0, _styles.newFileExperienceWrapperStyles)({
+    css: (0, _styles.wrapperStyles)({
       breakpoint: breakpoint,
       dimensions: dimensions,
       appearance: appearance,
@@ -48,4 +48,4 @@ var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
     onMouseEnter: onMouseEnter
   }, props.children);
 };
-exports.NewFileExperienceWrapper = NewFileExperienceWrapper;
+exports.Wrapper = Wrapper;

package/dist/cjs/classnames.js

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "fileCardImageViewSelectedSelector", {
-  enumerable: true,
-  get: function get() {
-    return _classnames.fileCardImageViewSelectedSelector;
-  }
-});
 Object.defineProperty(exports, "fileCardImageViewSelector", {
   enumerable: true,
   get: function get() {
     return _classnames.fileCardImageViewSelector;
   }
 });
-var _classnames = require("./card/cardImageView/classnames");
+var _classnames = require("./card/classnames");

package/dist/cjs/index.js

@@ -33,12 +33,6 @@ Object.defineProperty(exports, "defaultImageCardDimensions", {
     return _cardDimensions.defaultImageCardDimensions;
   }
 });
-Object.defineProperty(exports, "fileCardImageViewSelectedSelector", {
-  enumerable: true,
-  get: function get() {
-    return _classnames.fileCardImageViewSelectedSelector;
-  }
-});
 Object.defineProperty(exports, "fileCardImageViewSelector", {
   enumerable: true,
   get: function get() {
@@ -48,7 +42,7 @@ Object.defineProperty(exports, "fileCardImageViewSelector", {
 Object.defineProperty(exports, "inlinePlayerClassName", {
   enumerable: true,
   get: function get() {
-    return _styles.inlinePlayerClassName;
+    return _inlinePlayerWrapperStyles.inlinePlayerClassName;
   }
 });
 Object.defineProperty(exports, "newFileExperienceClassName", {
@@ -62,6 +56,6 @@ var _inline = require("./inline");
 var _cardLoading = require("./utils/lightCards/cardLoading");
 var _cardError = require("./utils/lightCards/cardError");
 var _cardDimensions = require("./utils/cardDimensions");
-var _classnames = require("./card/cardImageView/classnames");
-var _styles = require("./card/styles/styles");
+var _classnames = require("./card/classnames");
+var _inlinePlayerWrapperStyles = require("./card/inlinePlayerWrapperStyles");
 var _cardConstants = require("./card/cardConstants");

package/dist/cjs/inline/loader.js

@@ -18,6 +18,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _mediaUi = require("@atlaskit/media-ui");
+var _analyticsNext = require("@atlaskit/analytics-next");
 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; }
 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); }; }
@@ -32,7 +33,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isMounted", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
       ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
@@ -47,7 +48,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              this.isMounted = true;
+              this.mounted = true;
               if (this.state.MediaInlineCard) {
                 _context.next = 17;
                 break;
@@ -69,7 +70,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
               mediaInlineErrorBoundaryModule = _yield$Promise$all2[2];
               MediaInlineCardLoader.MediaInlineCard = mediaClient.withMediaClient(cardModule.MediaInlineCard);
               MediaInlineCardLoader.ErrorBoundary = mediaInlineErrorBoundaryModule.default;
-              if (this.isMounted) {
+              if (this.mounted) {
                 this.setState({
                   MediaInlineCard: MediaInlineCardLoader.MediaInlineCard,
                   ErrorBoundary: MediaInlineCardLoader.ErrorBoundary
@@ -98,7 +99,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              this.isMounted = false;
+              this.mounted = false;
             case 1:
             case "end":
               return _context2.stop();
@@ -116,14 +117,22 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
       var _this$state = this.state,
         MediaInlineCard = _this$state.MediaInlineCard,
         ErrorBoundary = _this$state.ErrorBoundary;
+      var analyticsContext = {
+        packageVersion: "@atlaskit/media-card",
+        packageName: "76.0.0",
+        componentName: 'mediaInlineCard',
+        component: 'mediaInlineCard'
+      };
       if (!MediaInlineCard || !ErrorBoundary) {
         return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
           message: ""
         });
       }
-      return /*#__PURE__*/_react.default.createElement(ErrorBoundary, {
+      return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+        data: analyticsContext
+      }, /*#__PURE__*/_react.default.createElement(ErrorBoundary, {
         isSelected: this.props.isSelected
-      }, /*#__PURE__*/_react.default.createElement(MediaInlineCard, this.props));
+      }, /*#__PURE__*/_react.default.createElement(MediaInlineCard, this.props)));
     }
   }]);
   return MediaInlineCardLoader;

package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -13,7 +13,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _mediaCommon = require("@atlaskit/media-common");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _colors = require("@atlaskit/theme/colors");
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
@@ -126,13 +125,6 @@ var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Com
   return WrappedMediaInlineAnalyticsErrorBoundary;
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaInlineAnalyticsErrorBoundary, "displayName", 'MediaInlineAnalyticsErrorBoundary');
-var packageName = "@atlaskit/media-card";
-var packageVersion = "75.0.1";
-var MediaInlineAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
-  packageVersion: packageVersion,
-  packageName: packageName,
-  componentName: 'mediaInlineCard',
-  component: 'mediaInlineCard'
-})((0, _analyticsNext.withAnalyticsEvents)()(WrappedMediaInlineAnalyticsErrorBoundary));
+var MediaInlineAnalyticsErrorBoundary = (0, _analyticsNext.withAnalyticsEvents)()(WrappedMediaInlineAnalyticsErrorBoundary);
 var _default = MediaInlineAnalyticsErrorBoundary;
 exports.default = _default;

package/dist/cjs/inline/mediaInlineCard.js

@@ -9,12 +9,17 @@ exports.MediaInlineCardInternal = exports.MediaInlineCard = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _mediaClient = require("@atlaskit/media-client");
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
 var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
 var _mediaViewer = require("@atlaskit/media-viewer");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _formatDate = require("@atlaskit/media-ui/formatDate");
+var _analytics = require("../utils/analytics");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _errors = require("../errors");
+var _mediaInlineCardAnalytics = require("./mediaInlineCardAnalytics");
 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; }
 // UI component which renders an inline link in the appropiate state based on a media file
@@ -31,14 +36,36 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     fileState = _useState2[0],
     setFileState = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isErrored = _useState4[0],
-    setIsErrored = _useState4[1];
+    subscribeError = _useState4[0],
+    setSubscribeError = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isMediaViewerVisible = _useState6[0],
-    setMediaViewerVisible = _useState6[1];
+    isSucceededEventSent = _useState6[0],
+    setIsSucceededEventSent = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isFailedEventSent = _useState8[0],
+    setIsFailedEventSent = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    isMediaViewerVisible = _useState10[0],
+    setMediaViewerVisible = _useState10[1];
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var fireFailedOperationalEvent = function fireFailedOperationalEvent() {
+    var error = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new _errors.MediaCardError('missing-error-data');
+    var failReason = arguments.length > 1 ? arguments[1] : undefined;
+    var payload = failReason ? (0, _mediaInlineCardAnalytics.getFailedProcessingStatusPayload)(fileState) : (0, _mediaInlineCardAnalytics.getErrorStatusPayload)(error, fileState);
+    setIsFailedEventSent(true);
+    (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
+  };
+  var fireSucceededOperationalEvent = function fireSucceededOperationalEvent() {
+    var payload = (0, _mediaInlineCardAnalytics.getSucceededStatusPayload)(fileState);
+    setIsSucceededEventSent(true);
+    (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
+  };
   var onMediaInlineCardClick = function onMediaInlineCardClick(event) {
     if (onClick) {
       var inlineCardEvent = {
@@ -80,25 +107,44 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     }).subscribe({
       next: function next(fileState) {
         setFileState(fileState);
-        setIsErrored(false);
       },
-      error: function error() {
-        setIsErrored(true);
+      error: function error(e) {
+        setSubscribeError(e);
       }
     });
     return function () {
       subscription.unsubscribe();
     };
   }, [identifier.collectionName, identifier.id, mediaClient.file]);
-  if (isErrored && (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading') {
+  if (subscribeError) {
+    var errorMessage = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading' ? _mediaUi.messages.failed_to_upload : _mediaUi.messages.couldnt_load_file;
+    var errorReason = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading' ? 'upload' : 'metadata-fetch';
+    !isFailedEventSent && fireFailedOperationalEvent(new _errors.MediaCardError(errorReason, subscribeError));
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+      message: (intl || defaultIntl).formatMessage(errorMessage),
+      isSelected: isSelected
+    });
+  }
+  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error') {
+    var error = new _errors.MediaCardError('error-file-state', new Error(fileState.message));
+    !isFailedEventSent && fireFailedOperationalEvent(error);
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+      message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file),
+      isSelected: isSelected
+    });
+  }
+  if ((fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing') {
+    !isFailedEventSent && fireFailedOperationalEvent(undefined, 'failed-processing');
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
-      message: (intl || defaultIntl).formatMessage(_mediaUi.messages.failed_to_upload),
+      message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file),
       isSelected: isSelected
     });
   }
-  if (isErrored || (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'error' || (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'failed-processing' ||
+
   // Empty file handling
-  fileState && !fileState.name) {
+  if (fileState && !fileState.name) {
+    var _error = new _errors.MediaCardError('metadata-fetch', new _mediaClient.FileFetcherError('emptyFileName', fileState.id));
+    !isFailedEventSent && fireFailedOperationalEvent(_error);
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
       message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file),
       isSelected: isSelected
@@ -136,6 +182,9 @@ var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
       locale = _ref2$locale === void 0 ? 'en' : _ref2$locale;
     formattedDate = (0, _formatDate.formatDate)(fileState.createdAt, locale);
   }
+  if (fileState.status === 'processed' && !isSucceededEventSent) {
+    fireSucceededOperationalEvent();
+  }
   if (shouldDisplayToolTip === undefined || shouldDisplayToolTip === true) {
     return renderContent( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       position: "bottom",

package/dist/cjs/inline/mediaInlineCardAnalytics.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSucceededStatusPayload = exports.getFailedProcessingStatusPayload = exports.getErrorStatusPayload = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("../utils/analytics");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var getSucceededStatusPayload = function getSucceededStatusPayload(fileState) {
+  return {
+    eventType: 'operational',
+    action: 'succeeded',
+    actionSubject: 'mediaInlineRender',
+    attributes: {
+      status: 'success',
+      fileAttributes: {
+        fileId: (fileState === null || fileState === void 0 ? void 0 : fileState.id) || '',
+        fileSize: fileState === null || fileState === void 0 ? void 0 : fileState.size,
+        fileMediatype: fileState === null || fileState === void 0 ? void 0 : fileState.mediaType,
+        fileMimetype: fileState === null || fileState === void 0 ? void 0 : fileState.mimeType,
+        fileStatus: fileState === null || fileState === void 0 ? void 0 : fileState.status
+      }
+    }
+  };
+};
+exports.getSucceededStatusPayload = getSucceededStatusPayload;
+var getErrorStatusPayload = function getErrorStatusPayload(error, fileState) {
+  return {
+    eventType: 'operational',
+    action: 'failed',
+    actionSubject: 'mediaInlineRender',
+    attributes: _objectSpread({
+      status: 'fail',
+      fileAttributes: {
+        fileId: (fileState === null || fileState === void 0 ? void 0 : fileState.id) || '',
+        fileStatus: fileState === null || fileState === void 0 ? void 0 : fileState.status
+      }
+    }, (0, _analytics.extractErrorInfo)(error))
+  };
+};
+exports.getErrorStatusPayload = getErrorStatusPayload;
+var getFailedProcessingStatusPayload = function getFailedProcessingStatusPayload(fileState) {
+  return {
+    eventType: 'operational',
+    action: 'failed',
+    actionSubject: 'mediaInlineRender',
+    attributes: {
+      status: 'fail',
+      fileAttributes: {
+        fileId: (fileState === null || fileState === void 0 ? void 0 : fileState.id) || '',
+        fileStatus: fileState === null || fileState === void 0 ? void 0 : fileState.status
+      },
+      failReason: 'failed-processing'
+    }
+  };
+};
+exports.getFailedProcessingStatusPayload = getFailedProcessingStatusPayload;