@atlaskit/media-card 81.7.2 → 81.8.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/media-card
 
+## 81.8.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 81.8.0
+
+### Minor Changes
+
+- [`8808c4948a2a1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8808c4948a2a1) -
+  [BMPT-8191] Add an `onFocus` callback to media Card. The prop is threaded through `CardView` and
+  the `Wrapper` component so consumers can react to focus moving onto a media card. The callback
+  receives a `CardFocusEvent` (`{ event, mediaItemDetails? }`), mirroring the existing
+  `onMouseEnter` behaviour.
+
+  `onFocus` fires only for keyboard focus entering the card from outside. Focus caused by a pointer
+  interaction is ignored, so mouse users keep exactly the existing `onMouseEnter`/`onClick`
+  behaviour. Because focus events bubble, focus moving between elements within the same card is also
+  ignored, so the callback fires once per card entry rather than once per focusable descendant.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 81.7.2
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -20,7 +20,7 @@ var _label = _interopRequireDefault(require("@atlaskit/react-ufo/label"));
 var _excluded = ["identifier"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.7.1";
+var packageVersion = "81.8.0";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/cardView.js

@@ -64,6 +64,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     dimensions = _ref.dimensions,
     onClick = _ref.onClick,
     onMouseEnter = _ref.onMouseEnter,
+    onFocus = _ref.onFocus,
     testId = _ref.testId,
     metadata = _ref.metadata,
     status = _ref.status,
@@ -374,6 +375,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     onClick: onClick,
     ariaLabel: name || 'Media Card',
     onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
     innerRef: mergedRef,
     breakpoint: breakpoint,
     mediaCardCursor: mediaCardCursor,

package/dist/cjs/card/externalImageCard.js

@@ -17,6 +17,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _errors = require("../errors");
 var _generateUniqueId = require("../utils/generateUniqueId");
 var _getMediaCardCursor = require("../utils/getMediaCardCursor");
+var _isKeyboardFocusEnteringElement = require("../utils/isKeyboardFocusEnteringElement");
 var _ufoExperiences = require("../utils/ufoExperiences");
 var _useCurrentValueRef = require("../utils/useCurrentValueRef");
 var _cardDimensions = require("../utils/cardDimensions");
@@ -51,7 +52,8 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
     shouldHideTooltip = _ref.shouldHideTooltip,
     mediaViewerItems = _ref.mediaViewerItems,
     _onClick = _ref.onClick,
-    _onMouseEnter = _ref.onMouseEnter;
+    _onMouseEnter = _ref.onMouseEnter,
+    _onFocus = _ref.onFocus;
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var cardDimensions = dimensions || (0, _cardDimensions.getDefaultCardDimensions)(appearance);
@@ -239,6 +241,15 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
         mediaItemDetails: metadata
       });
     },
+    onFocus: function onFocus(event) {
+      if (!(0, _isKeyboardFocusEnteringElement.isKeyboardFocusEnteringElement)(event)) {
+        return;
+      }
+      _onFocus === null || _onFocus === void 0 || _onFocus({
+        event: event,
+        mediaItemDetails: metadata
+      });
+    },
     disableOverlay: disableOverlay,
     onDisplayImage: function onDisplayImage() {
       var payloadPart = {

package/dist/cjs/card/fileCard.js

@@ -25,6 +25,7 @@ var _types = require("../types");
 var _generateUniqueId = require("../utils/generateUniqueId");
 var _getDataURIDimension = require("../utils/getDataURIDimension");
 var _getMediaCardCursor = require("../utils/getMediaCardCursor");
+var _isKeyboardFocusEnteringElement = require("../utils/isKeyboardFocusEnteringElement");
 var _metadata = require("../utils/metadata");
 var _ufoExperiences = require("../utils/ufoExperiences");
 var _useCurrentValueRef = require("../utils/useCurrentValueRef");
@@ -95,6 +96,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     mediaViewerItems = _ref.mediaViewerItems,
     onClick = _ref.onClick,
     onMouseEnter = _ref.onMouseEnter,
+    onFocus = _ref.onFocus,
     videoControlsWrapperRef = _ref.videoControlsWrapperRef,
     viewerOptions = _ref.viewerOptions,
     includeHashForDuplicateFiles = _ref.includeHashForDuplicateFiles,
@@ -716,6 +718,15 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       mediaItemDetails: metadata
     });
   };
+  var onImageFocus = function onImageFocus(event) {
+    if (!(0, _isKeyboardFocusEnteringElement.isKeyboardFocusEnteringElement)(event)) {
+      return;
+    }
+    onFocus === null || onFocus === void 0 || onFocus({
+      event: event,
+      mediaItemDetails: metadata
+    });
+  };
 
   //----------------------------------------------------------------//
   //---------------------- Render Card Function --------------------//
@@ -754,6 +765,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       openMediaViewerButtonRef: mediaViewerButtonRef,
       onClick: withCallbacks ? onCardViewClick : undefined,
       onMouseEnter: withCallbacks ? onImageMouseEnter : undefined,
+      onFocus: withCallbacks ? onImageFocus : undefined,
       disableOverlay: disableOverlay,
       progress: uploadProgressRef.current,
       onDisplayImage: withCallbacks ? function () {

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

@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.7.1";
+var packageVersion = "81.8.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/card/ui/wrapper/wrapper-compiled.js

@@ -60,6 +60,7 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
     appearance = props.appearance,
     onClick = props.onClick,
     onMouseEnter = props.onMouseEnter,
+    onFocus = props.onFocus,
     innerRef = props.innerRef,
     breakpoint = props.breakpoint,
     disableOverlay = props.disableOverlay,
@@ -80,10 +81,9 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
     "data-testid": testId,
     style: _objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), getResponsiveStyles(breakpoint)),
     ref: innerRef,
-    onClick: onClick
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
-    onMouseEnter: onMouseEnter
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus
   }, _vcMedia.VcMediaWrapperProps, {
     role: "none"
   }), /*#__PURE__*/React.createElement(_customData.default, {

package/dist/cjs/inline/loader.js

@@ -116,7 +116,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "81.7.1",
+        packageName: "81.8.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/isKeyboardFocusEnteringElement.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isKeyboardFocusEnteringElement = void 0;
+/**
+ * Returns `true` only for *keyboard* focus entering an element from outside it.
+ *
+ * `onFocus` alone is unsuitable because:
+ * 1. It bubbles (native `focusin`), firing on internal focus moves. We ignore these via
+ *    `relatedTarget` when it's contained by the current target.
+ * 2. Clicking an interactive descendant also focuses it, duplicating pointer events. We use
+ *    `:focus-visible` to keep pointer behaviour unchanged.
+ */
+var isKeyboardFocusEnteringElement = exports.isKeyboardFocusEnteringElement = function isKeyboardFocusEnteringElement(event) {
+  // Ignore focus moving between elements inside the same element.
+  if (event.currentTarget.contains(event.relatedTarget)) {
+    return false;
+  }
+  try {
+    if (!event.target.matches(':focus-visible')) {
+      return false;
+    }
+  } catch (_unused) {
+    // Ignore errors from environments that don't support :focus-visible.
+  }
+  return true;
+};

package/dist/cjs/utils/ufoExperiences.js

@@ -22,7 +22,7 @@ var _globalScope = require("./globalScope/globalScope");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.7.1";
+var packageVersion = "81.8.0";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/es2019/card/card.js

@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
 import UFOLabel from '@atlaskit/react-ufo/label';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.7.1";
+const packageVersion = "81.8.0";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/cardView.js

@@ -50,6 +50,7 @@ export const CardViewBase = ({
   dimensions,
   onClick,
   onMouseEnter,
+  onFocus,
   testId,
   metadata,
   status,
@@ -363,6 +364,7 @@ export const CardViewBase = ({
     onClick: onClick,
     ariaLabel: name || 'Media Card',
     onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
     innerRef: mergedRef,
     breakpoint: breakpoint,
     mediaCardCursor: mediaCardCursor,

package/dist/es2019/card/externalImageCard.js

@@ -7,6 +7,7 @@ import ReactDOM from 'react-dom';
 import { ImageLoadError } from '../errors';
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
+import { isKeyboardFocusEnteringElement } from '../utils/isKeyboardFocusEnteringElement';
 import { shouldPerformanceBeSampled, useMediaCardUfoExperience } from '../utils/ufoExperiences';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { getDefaultCardDimensions } from '../utils/cardDimensions';
@@ -35,7 +36,8 @@ export const ExternalImageCard = ({
   shouldHideTooltip,
   mediaViewerItems,
   onClick,
-  onMouseEnter
+  onMouseEnter,
+  onFocus
 }) => {
   const {
     createAnalyticsEvent
@@ -203,6 +205,15 @@ export const ExternalImageCard = ({
         mediaItemDetails: metadata
       });
     },
+    onFocus: event => {
+      if (!isKeyboardFocusEnteringElement(event)) {
+        return;
+      }
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus({
+        event,
+        mediaItemDetails: metadata
+      });
+    },
     disableOverlay: disableOverlay,
     onDisplayImage: () => {
       const payloadPart = {

package/dist/es2019/card/fileCard.js

@@ -12,6 +12,7 @@ import { isSSRPreview } from '../types';
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { resolveCardPreviewDimensions } from '../utils/getDataURIDimension';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
+import { isKeyboardFocusEnteringElement } from '../utils/isKeyboardFocusEnteringElement';
 import { getFileDetails } from '../utils/metadata';
 import { shouldPerformanceBeSampled, useMediaCardUfoExperience } from '../utils/ufoExperiences';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
@@ -76,6 +77,7 @@ export const FileCard = ({
   mediaViewerItems,
   onClick,
   onMouseEnter,
+  onFocus,
   videoControlsWrapperRef,
   viewerOptions,
   includeHashForDuplicateFiles,
@@ -633,6 +635,15 @@ export const FileCard = ({
       mediaItemDetails: metadata
     });
   };
+  const onImageFocus = event => {
+    if (!isKeyboardFocusEnteringElement(event)) {
+      return;
+    }
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus({
+      event,
+      mediaItemDetails: metadata
+    });
+  };
 
   //----------------------------------------------------------------//
   //---------------------- Render Card Function --------------------//
@@ -670,6 +681,7 @@ export const FileCard = ({
       openMediaViewerButtonRef: mediaViewerButtonRef,
       onClick: withCallbacks ? onCardViewClick : undefined,
       onMouseEnter: withCallbacks ? onImageMouseEnter : undefined,
+      onFocus: withCallbacks ? onImageFocus : undefined,
       disableOverlay: disableOverlay,
       progress: uploadProgressRef.current,
       onDisplayImage: withCallbacks ? () => {

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

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.7.1";
+const packageVersion = "81.8.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/es2019/card/ui/wrapper/wrapper-compiled.js

@@ -55,6 +55,7 @@ export const Wrapper = props => {
     appearance,
     onClick,
     onMouseEnter,
+    onFocus,
     innerRef,
     breakpoint,
     disableOverlay,
@@ -81,10 +82,9 @@ export const Wrapper = props => {
       ...getResponsiveStyles(breakpoint)
     },
     ref: innerRef,
-    onClick: onClick
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
-    onMouseEnter: onMouseEnter
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus
   }, VcMediaWrapperProps, {
     role: "none"
   }), /*#__PURE__*/React.createElement(UFOCustomData, {

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "81.7.1",
+      packageName: "81.8.0",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/isKeyboardFocusEnteringElement.js

@@ -0,0 +1,23 @@
+/**
+ * Returns `true` only for *keyboard* focus entering an element from outside it.
+ *
+ * `onFocus` alone is unsuitable because:
+ * 1. It bubbles (native `focusin`), firing on internal focus moves. We ignore these via
+ *    `relatedTarget` when it's contained by the current target.
+ * 2. Clicking an interactive descendant also focuses it, duplicating pointer events. We use
+ *    `:focus-visible` to keep pointer behaviour unchanged.
+ */
+export const isKeyboardFocusEnteringElement = event => {
+  // Ignore focus moving between elements inside the same element.
+  if (event.currentTarget.contains(event.relatedTarget)) {
+    return false;
+  }
+  try {
+    if (!event.target.matches(':focus-visible')) {
+      return false;
+    }
+  } catch {
+    // Ignore errors from environments that don't support :focus-visible.
+  }
+  return true;
+};

package/dist/es2019/utils/ufoExperiences.js

@@ -11,7 +11,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.7.1";
+const packageVersion = "81.8.0";
 const SAMPLE_RATE = 0.05;
 
 /**

package/dist/esm/card/card.js

@@ -11,7 +11,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
 import UFOLabel from '@atlaskit/react-ufo/label';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.7.1";
+var packageVersion = "81.8.0";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/cardView.js

@@ -55,6 +55,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     dimensions = _ref.dimensions,
     onClick = _ref.onClick,
     onMouseEnter = _ref.onMouseEnter,
+    onFocus = _ref.onFocus,
     testId = _ref.testId,
     metadata = _ref.metadata,
     status = _ref.status,
@@ -365,6 +366,7 @@ export var CardViewBase = function CardViewBase(_ref) {
     onClick: onClick,
     ariaLabel: name || 'Media Card',
     onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
     innerRef: mergedRef,
     breakpoint: breakpoint,
     mediaCardCursor: mediaCardCursor,

package/dist/esm/card/externalImageCard.js

@@ -11,6 +11,7 @@ import ReactDOM from 'react-dom';
 import { ImageLoadError } from '../errors';
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
+import { isKeyboardFocusEnteringElement } from '../utils/isKeyboardFocusEnteringElement';
 import { shouldPerformanceBeSampled, useMediaCardUfoExperience } from '../utils/ufoExperiences';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { getDefaultCardDimensions } from '../utils/cardDimensions';
@@ -42,7 +43,8 @@ export var ExternalImageCard = function ExternalImageCard(_ref) {
     shouldHideTooltip = _ref.shouldHideTooltip,
     mediaViewerItems = _ref.mediaViewerItems,
     _onClick = _ref.onClick,
-    _onMouseEnter = _ref.onMouseEnter;
+    _onMouseEnter = _ref.onMouseEnter,
+    _onFocus = _ref.onFocus;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var cardDimensions = dimensions || getDefaultCardDimensions(appearance);
@@ -230,6 +232,15 @@ export var ExternalImageCard = function ExternalImageCard(_ref) {
         mediaItemDetails: metadata
       });
     },
+    onFocus: function onFocus(event) {
+      if (!isKeyboardFocusEnteringElement(event)) {
+        return;
+      }
+      _onFocus === null || _onFocus === void 0 || _onFocus({
+        event: event,
+        mediaItemDetails: metadata
+      });
+    },
     disableOverlay: disableOverlay,
     onDisplayImage: function onDisplayImage() {
       var payloadPart = {

package/dist/esm/card/fileCard.js

@@ -19,6 +19,7 @@ import { isSSRPreview } from '../types';
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { resolveCardPreviewDimensions } from '../utils/getDataURIDimension';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
+import { isKeyboardFocusEnteringElement } from '../utils/isKeyboardFocusEnteringElement';
 import { getFileDetails } from '../utils/metadata';
 import { shouldPerformanceBeSampled, useMediaCardUfoExperience } from '../utils/ufoExperiences';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
@@ -87,6 +88,7 @@ export var FileCard = function FileCard(_ref) {
     mediaViewerItems = _ref.mediaViewerItems,
     onClick = _ref.onClick,
     onMouseEnter = _ref.onMouseEnter,
+    onFocus = _ref.onFocus,
     videoControlsWrapperRef = _ref.videoControlsWrapperRef,
     viewerOptions = _ref.viewerOptions,
     includeHashForDuplicateFiles = _ref.includeHashForDuplicateFiles,
@@ -708,6 +710,15 @@ export var FileCard = function FileCard(_ref) {
       mediaItemDetails: metadata
     });
   };
+  var onImageFocus = function onImageFocus(event) {
+    if (!isKeyboardFocusEnteringElement(event)) {
+      return;
+    }
+    onFocus === null || onFocus === void 0 || onFocus({
+      event: event,
+      mediaItemDetails: metadata
+    });
+  };
 
   //----------------------------------------------------------------//
   //---------------------- Render Card Function --------------------//
@@ -746,6 +757,7 @@ export var FileCard = function FileCard(_ref) {
       openMediaViewerButtonRef: mediaViewerButtonRef,
       onClick: withCallbacks ? onCardViewClick : undefined,
       onMouseEnter: withCallbacks ? onImageMouseEnter : undefined,
+      onFocus: withCallbacks ? onImageFocus : undefined,
       disableOverlay: disableOverlay,
       progress: uploadProgressRef.current,
       onDisplayImage: withCallbacks ? function () {

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

@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.7.1";
+var packageVersion = "81.8.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/esm/card/ui/wrapper/wrapper-compiled.js

@@ -51,6 +51,7 @@ export var Wrapper = function Wrapper(props) {
     appearance = props.appearance,
     onClick = props.onClick,
     onMouseEnter = props.onMouseEnter,
+    onFocus = props.onFocus,
     innerRef = props.innerRef,
     breakpoint = props.breakpoint,
     disableOverlay = props.disableOverlay,
@@ -71,10 +72,9 @@ export var Wrapper = function Wrapper(props) {
     "data-testid": testId,
     style: _objectSpread(_defineProperty(_defineProperty({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), getResponsiveStyles(breakpoint)),
     ref: innerRef,
-    onClick: onClick
-    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
-    ,
-    onMouseEnter: onMouseEnter
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus
   }, VcMediaWrapperProps, {
     role: "none"
   }), /*#__PURE__*/React.createElement(UFOCustomData, {

package/dist/esm/inline/loader.js

@@ -101,7 +101,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "81.7.1",
+        packageName: "81.8.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/isKeyboardFocusEnteringElement.js

@@ -0,0 +1,23 @@
+/**
+ * Returns `true` only for *keyboard* focus entering an element from outside it.
+ *
+ * `onFocus` alone is unsuitable because:
+ * 1. It bubbles (native `focusin`), firing on internal focus moves. We ignore these via
+ *    `relatedTarget` when it's contained by the current target.
+ * 2. Clicking an interactive descendant also focuses it, duplicating pointer events. We use
+ *    `:focus-visible` to keep pointer behaviour unchanged.
+ */
+export var isKeyboardFocusEnteringElement = function isKeyboardFocusEnteringElement(event) {
+  // Ignore focus moving between elements inside the same element.
+  if (event.currentTarget.contains(event.relatedTarget)) {
+    return false;
+  }
+  try {
+    if (!event.target.matches(':focus-visible')) {
+      return false;
+    }
+  } catch (_unused) {
+    // Ignore errors from environments that don't support :focus-visible.
+  }
+  return true;
+};

package/dist/esm/utils/ufoExperiences.js

@@ -15,7 +15,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.7.1";
+var packageVersion = "81.8.0";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/types/card/cardView.d.ts

@@ -1,4 +1,4 @@
-import React, { type MouseEvent } from 'react';
+import React, { type FocusEvent, type MouseEvent } from 'react';
 import { type MessageDescriptor } from 'react-intl';
 import { type MediaItemType, type FileDetails, type ImageResizeMode, type Identifier } from '@atlaskit/media-client';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
@@ -29,6 +29,7 @@ export interface CardViewProps {
     readonly openMediaViewerButtonRef?: React.Ref<HTMLButtonElement>;
     readonly shouldOpenMediaViewer?: boolean;
     readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    readonly onFocus?: (event: FocusEvent<HTMLDivElement>) => void;
     readonly onDisplayImage?: () => void;
     readonly cardPreview?: MediaFilePreview;
     readonly progress?: number;
@@ -65,6 +66,6 @@ export interface RenderConfigByStatus {
     customTitleMessage?: MessageDescriptor;
     traceTooltipVariant?: TraceTooltipVariant;
 }
-export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, traceId, isAIGenerating, isCWR, backgroundColor, }: CardViewBaseProps) => React.JSX.Element;
+export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, onFocus, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, traceId, isAIGenerating, isCWR, backgroundColor, }: CardViewBaseProps) => React.JSX.Element;
 export declare const CardView: React.ForwardRefExoticComponent<Omit<CardViewProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export {};

package/dist/types/card/externalImageCard.d.ts

@@ -9,4 +9,4 @@ export interface ExternalImageCardProps extends SharedCardProps, CardEventProps
     readonly contextId?: string;
     readonly shouldHideTooltip?: boolean;
 }
-export declare const ExternalImageCard: ({ mediaClient, appearance, resizeMode, disableOverlay, featureFlags, identifier, dimensions, contextId, alt, actions, shouldOpenMediaViewer, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, }: ExternalImageCardProps) => React.JSX.Element;
+export declare const ExternalImageCard: ({ mediaClient, appearance, resizeMode, disableOverlay, featureFlags, identifier, dimensions, contextId, alt, actions, shouldOpenMediaViewer, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, onFocus, }: ExternalImageCardProps) => React.JSX.Element;

package/dist/types/card/fileCard.d.ts

@@ -86,4 +86,4 @@ export interface FileCardProps extends CardEventProps {
      */
     readonly fallbackMediaNameFetcher?: (id: string) => Promise<string>;
 }
-export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, backgroundColor, isAIGenerating, isCWR, onPreviewRender, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, videoControlsWrapperRef, viewerOptions, includeHashForDuplicateFiles, ssrItemDetails, ssrFileState, onError, mediaViewerExtensions, fallbackMediaNameFetcher, }: FileCardProps) => React.JSX.Element;
+export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, backgroundColor, isAIGenerating, isCWR, onPreviewRender, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, onFocus, videoControlsWrapperRef, viewerOptions, includeHashForDuplicateFiles, ssrItemDetails, ssrFileState, onError, mediaViewerExtensions, fallbackMediaNameFetcher, }: FileCardProps) => React.JSX.Element;

package/dist/types/card/ui/wrapper/types.d.ts

@@ -1,4 +1,4 @@
-import { type MouseEvent } from 'react';
+import { type FocusEvent, type MouseEvent } from 'react';
 import type React from 'react';
 import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
 import { type CardDimensions, type CardAppearance } from '../../../types';
@@ -12,6 +12,7 @@ export interface WrapperProps {
     appearance?: CardAppearance;
     onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLDivElement>) => void;
     mediaType?: string;
     disableOverlay: boolean;
     displayBackground: boolean;

package/dist/types/types.d.ts

@@ -1,7 +1,7 @@
 /**
  * Entry Point: @atlaskit/media-card/types
  */
-import { type MouseEvent } from 'react';
+import { type FocusEvent, type MouseEvent } from 'react';
 import { type FileDetails, type MediaClient, type Identifier, type ImageResizeMode, type FileState } from '@atlaskit/media-client';
 import type { MediaSettings } from '@atlaskit/media-client-react/media-parsed-settings';
 import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
@@ -48,6 +48,10 @@ export interface CardEvent {
     event: MouseEvent<HTMLElement>;
     mediaItemDetails?: FileDetails;
 }
+export interface CardFocusEvent {
+    event: FocusEvent<HTMLElement>;
+    mediaItemDetails?: FileDetails;
+}
 export interface InlineCardEvent {
     event: MouseEvent<HTMLElement> | React.KeyboardEvent;
     mediaItemDetails?: FileDetails;
@@ -83,6 +87,7 @@ export interface InlineCardOnClickCallback {
 export interface CardEventProps {
     readonly onClick?: CardOnClickCallback;
     readonly onMouseEnter?: (result: CardEvent) => void;
+    readonly onFocus?: (result: CardFocusEvent) => void;
     /** Callback function to be called when video enters and exit fullscreen.
      * `fullscreen = true` indicates video enters fullscreen
      * `fullscreen = false` indicates video exits fullscreen

package/dist/types/utils/isKeyboardFocusEnteringElement.d.ts

@@ -0,0 +1,11 @@
+import { type FocusEvent } from 'react';
+/**
+ * Returns `true` only for *keyboard* focus entering an element from outside it.
+ *
+ * `onFocus` alone is unsuitable because:
+ * 1. It bubbles (native `focusin`), firing on internal focus moves. We ignore these via
+ *    `relatedTarget` when it's contained by the current target.
+ * 2. Clicking an interactive descendant also focuses it, duplicating pointer events. We use
+ *    `:focus-visible` to keep pointer behaviour unchanged.
+ */
+export declare const isKeyboardFocusEnteringElement: (event: FocusEvent<HTMLElement>) => boolean;

package/example-helpers/index.tsx

@@ -19,6 +19,7 @@ import { payloadPublisher } from '@atlassian/ufo';
 import AnnotateIcon from '@atlaskit/icon/core/edit';
 import { SelectableCard } from './selectableCard';
 import { Card, type CardAppearance, type CardEvent, type CardAction } from '../src';
+import { type CardFocusEvent } from '../src/types';
 import { MediaCardError } from '../src/errors';
 import DevelopmentUseMessage from './developmentUseMessage';
 
@@ -34,6 +35,10 @@ export const mouseEnterHandler = (result: CardEvent): void => {
 	console.log('mouseEnter', result.mediaItemDetails);
 };
 
+export const focusHandler = (result: CardFocusEvent): void => {
+	console.log('focus', result.mediaItemDetails);
+};
+
 export const createApiCards = (
 	appearance: CardAppearance,
 	identifier: Identifier,
@@ -52,6 +57,7 @@ export const createApiCards = (
 					identifier={identifier}
 					onClick={clickHandler}
 					onMouseEnter={mouseEnterHandler}
+					onFocus={focusHandler}
 				/>
 			),
 		},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "81.7.2",
+	"version": "81.8.1",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
 		"@atlaskit/section-message": "^10.1.0",
 		"@atlaskit/spinner": "^20.3.0",
 		"@atlaskit/theme": "^28.1.0",
-		"@atlaskit/tmp-editor-statsig": "^159.0.0",
+		"@atlaskit/tmp-editor-statsig": "^160.0.0",
 		"@atlaskit/tokens": "^16.8.0",
 		"@atlaskit/tooltip": "^24.2.0",
 		"@atlaskit/ufo": "^1.0.0",