@atlaskit/media-card 82.1.40 → 82.1.42

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/media-card
 
+## 82.1.42
+
+### Patch Changes
+
+- [`295a4aac735d6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/295a4aac735d6) -
+  Show a visible focus indicator on media cards when platform_media_card_focus_indicator_fix is
+  enabled
+
+## 82.1.41
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 82.1.40
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -8,7 +8,7 @@ var _reactIntl = require("react-intl");
 var _withMediaAnalyticsContext = require("@atlaskit/media-common/withMediaAnalyticsContext");
 var _CardWithPerformanceObserver = require("./CardWithPerformanceObserver");
 var packageName = "@atlaskit/media-card";
-var packageVersion = "82.1.39";
+var packageVersion = "82.1.41";
 var Card = exports.Card = (0, _withMediaAnalyticsContext.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

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 = "82.1.39";
+var packageVersion = "82.1.41";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = (0, _withMediaAnalyticsContext.withMediaAnalyticsContext)({

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

@@ -1,5 +1,6 @@
 ._2rko18qm{border-radius:var(--ds-radius-large,3px)}
-button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}._14r11j28::-moz-selection{background-color:transparent}
+button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}
+span:focus-within+._157qd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}._14r11j28::-moz-selection{background-color:transparent}
 ._16qsio5t{box-shadow:0 0 0 1px var(--ds-border-selected,#1868db),var(--ds-shadow-raised,0 1px 1px #1e1f2140,0 0 1px #1e1f214f)}
 ._16qsr4us{box-shadow:0 0 0 1px var(--ds-border-selected,#1868db)}
 ._16qst7xp{box-shadow:var(--ds-shadow-raised,0 1px 1px #1e1f2140,0 0 1px #1e1f214f)}

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

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _customData = _interopRequireDefault(require("@atlaskit/react-ufo/custom-data"));
 var _vcMedia = require("@atlaskit/react-ufo/vc-media");
 var _cardDimensions = require("../../../utils/cardDimensions");
@@ -25,6 +26,7 @@ var LOCAL_HEIGHT_VARIABLE = exports.LOCAL_HEIGHT_VARIABLE = '--media-wrapper-hei
 var wrapperStyles = {
   default: "_2rko18qm _vchhusvi _kqswh2mm _ect4ttxp _p12f1osq _c71l1osq _1bsb1qmm _4t3ine4n _1hlmd0i9 _1rquusvi _eg541i5c _mts3kb7n _1ntskb7n"
 };
+var openMediaViewerFocusStyles = null;
 var backgroundStyle = null;
 var shadowStyleMap = {
   withOverlay: "_16qst7xp",
@@ -77,7 +79,7 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
     id: "newFileExperienceWrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: (0, _runtime.ax)([wrapperStyles.default, "_yfmhtlke _5sb1v00u", displayBackground && "_bfhkhfxm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_lgei1osq _1vgy1osq", _cardConstants.newFileExperienceClassName]),
+    className: (0, _runtime.ax)([wrapperStyles.default, (0, _fg.fg)('platform_media_card_focus_indicator_fix') && "_157qd0i9", "_yfmhtlke _5sb1v00u", displayBackground && "_bfhkhfxm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_lgei1osq _1vgy1osq", _cardConstants.newFileExperienceClassName]),
     "data-testid": testId,
     style: _objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), getResponsiveStyles(breakpoint)),
     ref: innerRef,

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: "82.1.39",
+        packageName: "82.1.41",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/ufoExperiences.js

@@ -23,7 +23,7 @@ var _getMediaGlobalScope = require("./globalScope/getMediaGlobalScope");
 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 = "82.1.39";
+var packageVersion = "82.1.41";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/es2019/card/card.js

@@ -2,7 +2,7 @@ import { injectIntl } from 'react-intl';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common/withMediaAnalyticsContext';
 import { CardWithPerformanceObserver } from './CardWithPerformanceObserver';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "82.1.39";
+const packageVersion = "82.1.41";
 export const Card = withMediaAnalyticsContext({
   packageVersion,
   packageName,

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 = "82.1.39";
+const packageVersion = "82.1.41";
 
 // @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.compiled.css

@@ -1,5 +1,6 @@
 ._2rko18qm{border-radius:var(--ds-radius-large,3px)}
-button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}._14r11j28::-moz-selection{background-color:transparent}
+button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}
+span:focus-within+._157qd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}._14r11j28::-moz-selection{background-color:transparent}
 ._16qsio5t{box-shadow:0 0 0 1px var(--ds-border-selected,#1868db),var(--ds-shadow-raised,0 1px 1px #1e1f2140,0 0 1px #1e1f214f)}
 ._16qsr4us{box-shadow:0 0 0 1px var(--ds-border-selected,#1868db)}
 ._16qst7xp{box-shadow:var(--ds-shadow-raised,0 1px 1px #1e1f2140,0 0 1px #1e1f214f)}

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./wrapper-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import UFOCustomData from '@atlaskit/react-ufo/custom-data';
 import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
 import { getDefaultCardDimensions } from '../../../utils/cardDimensions';
@@ -13,6 +14,7 @@ export const LOCAL_HEIGHT_VARIABLE = '--media-wrapper-height';
 const wrapperStyles = {
   default: "_2rko18qm _vchhusvi _kqswh2mm _ect4ttxp _p12f1osq _c71l1osq _1bsb1qmm _4t3ine4n _1hlmd0i9 _1rquusvi _eg541i5c _mts3kb7n _1ntskb7n"
 };
+const openMediaViewerFocusStyles = null;
 const backgroundStyle = null;
 const shadowStyleMap = {
   withOverlay: "_16qst7xp",
@@ -73,7 +75,7 @@ export const Wrapper = props => {
     id: "newFileExperienceWrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax([wrapperStyles.default, "_yfmhtlke _5sb1v00u", displayBackground && "_bfhkhfxm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_lgei1osq _1vgy1osq", newFileExperienceClassName]),
+    className: ax([wrapperStyles.default, fg('platform_media_card_focus_indicator_fix') && "_157qd0i9", "_yfmhtlke _5sb1v00u", displayBackground && "_bfhkhfxm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_lgei1osq _1vgy1osq", newFileExperienceClassName]),
     "data-testid": testId,
     style: {
       [LOCAL_WIDTH_VARIABLE]: width,

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: "82.1.39",
+      packageName: "82.1.41",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

@@ -12,7 +12,7 @@ import { extractErrorInfo } from './analytics/extractErrorInfo';
 import { getRenderErrorRequestMetadata } from './analytics/getRenderErrorRequestMetadata';
 import { getMediaGlobalScope } from './globalScope/getMediaGlobalScope';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "82.1.39";
+const packageVersion = "82.1.41";
 const SAMPLE_RATE = 0.05;
 
 /**

package/dist/esm/card/card.js

@@ -2,7 +2,7 @@ import { injectIntl } from 'react-intl';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common/withMediaAnalyticsContext';
 import { CardWithPerformanceObserver } from './CardWithPerformanceObserver';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "82.1.39";
+var packageVersion = "82.1.41";
 export var Card = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

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 = "82.1.39";
+var packageVersion = "82.1.41";
 
 // @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.compiled.css

@@ -1,5 +1,6 @@
 ._2rko18qm{border-radius:var(--ds-radius-large,3px)}
-button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}._14r11j28::-moz-selection{background-color:transparent}
+button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}
+span:focus-within+._157qd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}._14r11j28::-moz-selection{background-color:transparent}
 ._16qsio5t{box-shadow:0 0 0 1px var(--ds-border-selected,#1868db),var(--ds-shadow-raised,0 1px 1px #1e1f2140,0 0 1px #1e1f214f)}
 ._16qsr4us{box-shadow:0 0 0 1px var(--ds-border-selected,#1868db)}
 ._16qst7xp{box-shadow:var(--ds-shadow-raised,0 1px 1px #1e1f2140,0 0 1px #1e1f214f)}

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

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 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) { _defineProperty(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; }
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import UFOCustomData from '@atlaskit/react-ufo/custom-data';
 import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
 import { getDefaultCardDimensions } from '../../../utils/cardDimensions';
@@ -16,6 +17,7 @@ export var LOCAL_HEIGHT_VARIABLE = '--media-wrapper-height';
 var wrapperStyles = {
   default: "_2rko18qm _vchhusvi _kqswh2mm _ect4ttxp _p12f1osq _c71l1osq _1bsb1qmm _4t3ine4n _1hlmd0i9 _1rquusvi _eg541i5c _mts3kb7n _1ntskb7n"
 };
+var openMediaViewerFocusStyles = null;
 var backgroundStyle = null;
 var shadowStyleMap = {
   withOverlay: "_16qst7xp",
@@ -68,7 +70,7 @@ export var Wrapper = function Wrapper(props) {
     id: "newFileExperienceWrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax([wrapperStyles.default, "_yfmhtlke _5sb1v00u", displayBackground && "_bfhkhfxm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_lgei1osq _1vgy1osq", newFileExperienceClassName]),
+    className: ax([wrapperStyles.default, fg('platform_media_card_focus_indicator_fix') && "_157qd0i9", "_yfmhtlke _5sb1v00u", displayBackground && "_bfhkhfxm", wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91j9a _1xp5dgkc", shouldDisplayTooltip && "_lgei1osq _1vgy1osq", newFileExperienceClassName]),
     "data-testid": testId,
     style: _objectSpread(_defineProperty(_defineProperty({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), getResponsiveStyles(breakpoint)),
     ref: innerRef,

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: "82.1.39",
+        packageName: "82.1.41",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/ufoExperiences.js

@@ -16,7 +16,7 @@ import { extractErrorInfo } from './analytics/extractErrorInfo';
 import { getRenderErrorRequestMetadata } from './analytics/getRenderErrorRequestMetadata';
 import { getMediaGlobalScope } from './globalScope/getMediaGlobalScope';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "82.1.39";
+var packageVersion = "82.1.41";
 var SAMPLE_RATE = 0.05;
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "82.1.40",
+	"version": "82.1.42",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^12.6.0",
 		"@atlaskit/dropdown-menu": "^21.0.0",
-		"@atlaskit/editor-shared-styles": "^4.5.0",
+		"@atlaskit/editor-shared-styles": "^4.6.0",
 		"@atlaskit/icon": "^38.0.0",
 		"@atlaskit/interaction-context": "^4.1.0",
 		"@atlaskit/link": "^5.1.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/media-file-preview": "^2.0.0",
 		"@atlaskit/media-state": "^4.0.0",
 		"@atlaskit/media-svg": "^4.0.0",
-		"@atlaskit/media-ui": "^31.4.0",
+		"@atlaskit/media-ui": "^31.5.0",
 		"@atlaskit/media-viewer": "^54.11.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
@@ -55,8 +55,8 @@
 		"@atlaskit/react-ufo": "^8.1.0",
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^244.0.0",
-		"@atlaskit/tokens": "^20.6.0",
+		"@atlaskit/tmp-editor-statsig": "^245.0.0",
+		"@atlaskit/tokens": "^20.7.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@atlaskit/ufo": "^2.0.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
@@ -78,7 +78,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@atlaskit/analytics-listeners": "^11.4.0",
 		"@atlaskit/analytics-namespaced-context": "^8.2.0",
-		"@atlaskit/button": "^25.5.0",
+		"@atlaskit/button": "^25.6.0",
 		"@atlaskit/checkbox": "^19.3.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/docs": "^12.3.0",
@@ -165,6 +165,9 @@
 		"platform_media_card_action_button_type_fix": {
 			"type": "boolean"
 		},
+		"platform_media_card_focus_indicator_fix": {
+			"type": "boolean"
+		},
 		"platform_media_react19_support": {
 			"type": "boolean"
 		},