@atlaskit/media-card 81.4.23 → 81.5.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/media-card
 
+## 81.5.0
+
+### Minor Changes
+
+- [`8a3600f3f196b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8a3600f3f196b) -
+  [ux] Fixed unsafe styles that distorted the inline (top-layer) tooltip popover by excluding
+  top-layer elements from the offending selectors via `:not(:where([popover], dialog, ...))`. The
+  `:where()` wrapper keeps the guard at zero specificity, so matching is otherwise unchanged, and
+  the guards are no-ops for the legacy portalled tooltip.
+
 ## 81.4.23
 
 ### 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.4.22";
+var packageVersion = "81.4.23";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

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.4.22";
+var packageVersion = "81.4.23";
 
 // @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/styles.js

@@ -24,6 +24,6 @@ var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
     isTickBoxSelectable = _ref.isTickBoxSelectable,
     shouldDisplayTooltip = _ref.shouldDisplayTooltip,
     mediaCardCursor = _ref.mediaCardCursor;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\tbox-sizing: border-box;\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tposition: relative;\n\tfont-family: ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\n\t/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n\t\t", "\n\t}\n\t&:hover .", ", &:focus-within .", " {\n\t\t", "\n\t}\n\n\t/* Tooltip does not support percentage dimensions. We enforce them here */\n\t", "\n\n\tbutton:focus + & {\n\t\toutline: solid 2px ", ";\n\t}\n"])), (0, _styles.transition)(), "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", (0, _styles.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, #0515240F)", ";"), _mediaUi.borderRadius, (0, _styles.getCursorStyle)(mediaCardCursor), (0, _styles.getWrapperShadow)(disableOverlay, selected), (0, _styles.generateResponsiveStyles)(breakpoint), selected ? _selection.hideNativeBrowserTextSelectionStyles : '', (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }", "var(--ds-border-focused, #4688EC)");
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\tbox-sizing: border-box;\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tposition: relative;\n\tfont-family: ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\n\t/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n\t\t", "\n\t}\n\t&:hover .", ", &:focus-within .", " {\n\t\t", "\n\t}\n\n\t/* Tooltip does not support percentage dimensions. We enforce them here.\n\t   Guard skips top-layer elements (eg tooltip, modal); ':where()' keeps specificity unchanged. */\n\t", "\n\n\tbutton:focus + & {\n\t\toutline: solid 2px ", ";\n\t}\n"])), (0, _styles.transition)(), "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", (0, _styles.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, #0515240F)", ";"), _mediaUi.borderRadius, (0, _styles.getCursorStyle)(mediaCardCursor), (0, _styles.getWrapperShadow)(disableOverlay, selected), (0, _styles.generateResponsiveStyles)(breakpoint), selected ? _selection.hideNativeBrowserTextSelectionStyles : '', (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div:not(:where([popover], dialog)) { width: 100%; height: 100%; }", "var(--ds-border-focused, #4688EC)");
 };
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

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

@@ -1,6 +1,5 @@
 ._2rko18qm{border-radius:var(--ds-radius-large,3px)}
-button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}._10pb1osq>div{height:100%}
-._14r11j28::-moz-selection{background-color:transparent}
+button:focus+._1hlmd0i9{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)}
@@ -11,17 +10,18 @@ button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._1p1y1j28::selection{background-color:transparent}
 ._1rk81j28 ::selection{background-color:transparent}
 ._1rquusvi *{box-sizing:border-box}
+._1vgy1osq>div:not(:where([popover],dialog)){height:100%}
 ._1xp5dgkc:hover .media-card-tickbox{color:var(--ds-icon-subtle,#505258)}
 ._1y898vuz:hover .media-card-play-button .play-icon-background{width:56px}
 ._1yf91j9a:hover .media-card-tickbox{background-color:var(--ds-background-input,#fff)}
 ._4t3ine4n{height:var(--media-wrapper-height)}
 ._5sb1v00u [data-cursor=wait]{cursor:wait}
-._9m3z1osq>div{width:100%}
 ._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._c71l1osq{max-height:100%}
 ._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._eg541i5c:hover .media-card-blanket{background-color:var(--ds-blanket,#050c1f75)}
 ._kqswh2mm{position:relative}
+._lgei1osq>div:not(:where([popover],dialog)){width:100%}
 ._mts3kb7n:focus-within .media-card-actions-bar{opacity:1}
 ._p12f1osq{max-width:100%}
 ._vchhusvi{box-sizing:border-box}

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

@@ -80,7 +80,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 && "_9m3z1osq _10pb1osq", _cardConstants.newFileExperienceClassName]),
+    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]),
     "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: "81.4.22",
+        packageName: "81.4.23",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/ufoExperiences.js

@@ -19,7 +19,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.4.22";
+var packageVersion = "81.4.23";
 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';
 import UFOLabel from '@atlaskit/react-ufo/label';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "81.4.22";
+const packageVersion = "81.4.23";
 export const CardBase = ({
   identifier,
   ...otherProps

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.4.22";
+const packageVersion = "81.4.23";
 
 // @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/styles.js

@@ -43,8 +43,9 @@ export const wrapperStyles = ({
 		${fixedActionBarStyles}
 	}
 
-	/* Tooltip does not support percentage dimensions. We enforce them here */
-	${shouldDisplayTooltip && `> div { width: 100%; height: 100%; }`}
+	/* Tooltip does not support percentage dimensions. We enforce them here.
+	   Guard skips top-layer elements (eg tooltip, modal); ':where()' keeps specificity unchanged. */
+	${shouldDisplayTooltip && `> div:not(:where([popover], dialog)) { width: 100%; height: 100%; }`}
 
 	button:focus + & {
 		outline: solid 2px ${"var(--ds-border-focused, #4688EC)"};

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

@@ -1,6 +1,5 @@
 ._2rko18qm{border-radius:var(--ds-radius-large,3px)}
-button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}._10pb1osq>div{height:100%}
-._14r11j28::-moz-selection{background-color:transparent}
+button:focus+._1hlmd0i9{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)}
@@ -11,17 +10,18 @@ button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._1p1y1j28::selection{background-color:transparent}
 ._1rk81j28 ::selection{background-color:transparent}
 ._1rquusvi *{box-sizing:border-box}
+._1vgy1osq>div:not(:where([popover],dialog)){height:100%}
 ._1xp5dgkc:hover .media-card-tickbox{color:var(--ds-icon-subtle,#505258)}
 ._1y898vuz:hover .media-card-play-button .play-icon-background{width:56px}
 ._1yf91j9a:hover .media-card-tickbox{background-color:var(--ds-background-input,#fff)}
 ._4t3ine4n{height:var(--media-wrapper-height)}
 ._5sb1v00u [data-cursor=wait]{cursor:wait}
-._9m3z1osq>div{width:100%}
 ._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._c71l1osq{max-height:100%}
 ._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._eg541i5c:hover .media-card-blanket{background-color:var(--ds-blanket,#050c1f75)}
 ._kqswh2mm{position:relative}
+._lgei1osq>div:not(:where([popover],dialog)){width:100%}
 ._mts3kb7n:focus-within .media-card-actions-bar{opacity:1}
 ._p12f1osq{max-width:100%}
 ._vchhusvi{box-sizing:border-box}

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

@@ -76,7 +76,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 && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
+    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]),
     "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: "81.4.22",
+      packageName: "81.4.23",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

@@ -9,7 +9,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.4.22";
+const packageVersion = "81.4.23";
 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';
 import UFOLabel from '@atlaskit/react-ufo/label';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "81.4.22";
+var packageVersion = "81.4.23";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

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.4.22";
+var packageVersion = "81.4.23";
 
 // @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/styles.js

@@ -19,6 +19,6 @@ export var wrapperStyles = function wrapperStyles(_ref) {
     isTickBoxSelectable = _ref.isTickBoxSelectable,
     shouldDisplayTooltip = _ref.shouldDisplayTooltip,
     mediaCardCursor = _ref.mediaCardCursor;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", "\n\tbox-sizing: border-box;\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tposition: relative;\n\tfont-family: ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\n\t/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n\t\t", "\n\t}\n\t&:hover .", ", &:focus-within .", " {\n\t\t", "\n\t}\n\n\t/* Tooltip does not support percentage dimensions. We enforce them here */\n\t", "\n\n\tbutton:focus + & {\n\t\toutline: solid 2px ", ";\n\t}\n"])), transition(), "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, #0515240F)", ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), selected ? hideNativeBrowserTextSelectionStyles : '', getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }", "var(--ds-border-focused, #4688EC)");
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", "\n\tbox-sizing: border-box;\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tposition: relative;\n\tfont-family: ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\n\t/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n\t\t", "\n\t}\n\t&:hover .", ", &:focus-within .", " {\n\t\t", "\n\t}\n\n\t/* Tooltip does not support percentage dimensions. We enforce them here.\n\t   Guard skips top-layer elements (eg tooltip, modal); ':where()' keeps specificity unchanged. */\n\t", "\n\n\tbutton:focus + & {\n\t\toutline: solid 2px ", ";\n\t}\n"])), transition(), "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, #0515240F)", ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), selected ? hideNativeBrowserTextSelectionStyles : '', getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div:not(:where([popover], dialog)) { width: 100%; height: 100%; }", "var(--ds-border-focused, #4688EC)");
 };
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

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

@@ -1,6 +1,5 @@
 ._2rko18qm{border-radius:var(--ds-radius-large,3px)}
-button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--ds-border-focused,#4688ec)}._10pb1osq>div{height:100%}
-._14r11j28::-moz-selection{background-color:transparent}
+button:focus+._1hlmd0i9{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)}
@@ -11,17 +10,18 @@ button:focus+._1hlmd0i9{outline:solid var(--ds-border-width-focused,2px) var(--d
 ._1p1y1j28::selection{background-color:transparent}
 ._1rk81j28 ::selection{background-color:transparent}
 ._1rquusvi *{box-sizing:border-box}
+._1vgy1osq>div:not(:where([popover],dialog)){height:100%}
 ._1xp5dgkc:hover .media-card-tickbox{color:var(--ds-icon-subtle,#505258)}
 ._1y898vuz:hover .media-card-play-button .play-icon-background{width:56px}
 ._1yf91j9a:hover .media-card-tickbox{background-color:var(--ds-background-input,#fff)}
 ._4t3ine4n{height:var(--media-wrapper-height)}
 ._5sb1v00u [data-cursor=wait]{cursor:wait}
-._9m3z1osq>div{width:100%}
 ._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._c71l1osq{max-height:100%}
 ._ect4ttxp{font-family:var(--ds-font-family-body,"Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._eg541i5c:hover .media-card-blanket{background-color:var(--ds-blanket,#050c1f75)}
 ._kqswh2mm{position:relative}
+._lgei1osq>div:not(:where([popover],dialog)){width:100%}
 ._mts3kb7n:focus-within .media-card-actions-bar{opacity:1}
 ._p12f1osq{max-width:100%}
 ._vchhusvi{box-sizing:border-box}

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

@@ -71,7 +71,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 && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
+    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]),
     "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: "81.4.22",
+        packageName: "81.4.23",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/ufoExperiences.js

@@ -13,7 +13,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.4.22";
+var packageVersion = "81.4.23";
 var SAMPLE_RATE = 0.05;
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "81.4.23",
+	"version": "81.5.0",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -51,7 +51,7 @@
 		"@atlaskit/react-ufo": "^7.3.0",
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^141.0.0",
+		"@atlaskit/tmp-editor-statsig": "^141.1.0",
 		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/ufo": "^1.0.0",