@enact/limestone 1.3.0 → 1.10.0

package/KeyGuide/KeyGuide.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.KeyGuideDecorator = exports.KeyGuideBase = exports.KeyGuide = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _util = require("@enact/core/util");
 var _FloatingLayer = _interopRequireDefault(require("@enact/ui/FloatingLayer"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
 var _Layout = require("@enact/ui/Layout");
@@ -50,9 +51,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 var colorKeys = ['red', 'green', 'yellow', 'blue'];
-var ImageItemBase = function ImageItemBase(_ref) {
-  var children = _ref.children,
-    imageSrc = _ref.imageSrc;
+var _ImageItemBase = function ImageItemBase(props) {
+  (0, _util.checkPropTypes)(_ImageItemBase, props);
+  var children = props.children,
+    imageSrc = props.imageSrc;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
     className: _KeyGuideModule["default"].imageItem,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
@@ -70,7 +72,7 @@ var ImageItemBase = function ImageItemBase(_ref) {
     })]
   });
 };
-ImageItemBase.propTypes = {
+_ImageItemBase.propTypes = {
   children: _propTypes2["default"].node,
   imageSrc: _propTypes2["default"].string
 };
@@ -112,14 +114,14 @@ var KeyGuideBase = exports.KeyGuideBase = (0, _kind["default"])({
     	 * @type {Array.<{children: (String|Component), key: (Number|String), icon: (String|Object|'red'|'green'|'yellow'|'blue')}>|Object.<{children: (String|Component), imageSrc: (String|Object)}>}
      * @public
      */
-    children: _propTypes2["default"].arrayOf(_propTypes2["default"].shape({
+    children: _propTypes2["default"].oneOfType([_propTypes2["default"].arrayOf(_propTypes2["default"].shape({
       children: _propTypes["default"].renderable.isRequired,
       key: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]).isRequired,
       icon: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object])
-    })) || _propTypes2["default"].shape({
+    })), _propTypes2["default"].shape({
       children: _propTypes["default"].renderable.isRequired,
       imageSrc: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]).isRequired
-    }),
+    })]),
     /**
      * Customizes the component by mapping the supplied collection of CSS class names to the
      * corresponding internal elements and states of this component.
@@ -145,15 +147,15 @@ var KeyGuideBase = exports.KeyGuideBase = (0, _kind["default"])({
     arrowPosition: 'none'
   },
   computed: {
-    children: function children(_ref2) {
-      var _children = _ref2.children,
-        css = _ref2.css;
+    children: function children(_ref) {
+      var _children = _ref.children,
+        css = _ref.css;
       if (_children !== null && _children !== void 0 && _children.imageSrc) {
         return _children;
       } else {
-        return _children ? _children.map(function (_ref3) {
-          var icon = _ref3.icon,
-            child = _objectWithoutProperties(_ref3, _excluded);
+        return _children ? _children.map(function (_ref2) {
+          var icon = _ref2.icon,
+            child = _objectWithoutProperties(_ref2, _excluded);
           var isColorKey = colorKeys.includes(icon);
           return _objectSpread(_objectSpread({}, child), {}, {
             slotBefore: isColorKey ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -167,15 +169,15 @@ var KeyGuideBase = exports.KeyGuideBase = (0, _kind["default"])({
         }) : [];
       }
     },
-    className: function className(_ref4) {
-      var arrowPosition = _ref4.arrowPosition,
-        children = _ref4.children,
-        styler = _ref4.styler;
+    className: function className(_ref3) {
+      var arrowPosition = _ref3.arrowPosition,
+        children = _ref3.children,
+        styler = _ref3.styler;
       return styler.append(Array.isArray(children) ? 'iconGuide' : 'imageGuide', arrowPosition === 'none' || Array.isArray(children) ? 'noArrow' : "".concat(arrowPosition, "Arrow"));
     },
-    open: function open(_ref5) {
-      var children = _ref5.children,
-        _open = _ref5.open;
+    open: function open(_ref4) {
+      var children = _ref4.children,
+        _open = _ref4.open;
       return children && (children.imageSrc || children.length > 0) && _open;
     }
   },
@@ -184,12 +186,12 @@ var KeyGuideBase = exports.KeyGuideBase = (0, _kind["default"])({
     className: 'keyGuide',
     publicClassNames: ['keyGuide', 'imageGuide']
   },
-  render: function render(_ref6) {
-    var className = _ref6.className,
-      css = _ref6.css,
-      children = _ref6.children,
-      open = _ref6.open,
-      rest = _objectWithoutProperties(_ref6, _excluded2);
+  render: function render(_ref5) {
+    var className = _ref5.className,
+      css = _ref5.css,
+      children = _ref5.children,
+      open = _ref5.open,
+      rest = _objectWithoutProperties(_ref5, _excluded2);
     delete rest.arrowPosition;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer["default"], {
       noAutoDismiss: true,
@@ -206,7 +208,7 @@ var KeyGuideBase = exports.KeyGuideBase = (0, _kind["default"])({
         children: children
       })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
         className: className,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageItemBase, _objectSpread({}, children))
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItemBase, _objectSpread({}, children))
       }))
     });
   }

package/KeyGuide/KeyGuide.module.css

@@ -7,7 +7,7 @@
   flex-direction: column;
   width: 15.625rem;
   right: 3.125rem;
-  bottom: 2.5rem;
+  bottom: var(--primitive-spacing-120);
   padding: var(--primitive-spacing-48);
   gap: var(--primitive-spacing-42);
 }
@@ -64,6 +64,10 @@
 }
 .keyGuide:global(.neutral) {
   background: var(--semantic-color-surface-overlay-default);
+  outline-color: transparent;
+  outline-width: 0.063rem;
+  outline-style: solid;
+  outline-offset: -0.063rem;
 }
 .keyGuide:global(.neutral) .red {
   background-color: #ff6d78;
@@ -124,6 +128,10 @@
 }
 :global(.enact-a11y-high-contrast) .keyGuide:global(.neutral):global(.highContrast) {
   background: var(--semantic-color-surface-overlay-default);
+  outline-color: var(--semantic-color-stroke-main);
+  outline-width: 0.063rem;
+  outline-style: solid;
+  outline-offset: -0.063rem;
 }
 :global(.enact-a11y-high-contrast) .keyGuide:global(.neutral):global(.highContrast) .red {
   background-color: #ff6d78;
@@ -184,6 +192,10 @@
 }
 .keyGuide:global(.light) {
   background: var(--semantic-color-surface-overlay-default);
+  outline-color: transparent;
+  outline-width: 0.063rem;
+  outline-style: solid;
+  outline-offset: -0.063rem;
 }
 .keyGuide:global(.light) .red {
   background-color: #ff6d78;
@@ -247,6 +259,10 @@
   --semantic-color-surface-default-focused: #6d2fa1;
   --semantic-color-on-surface-main-focused: #e6e6e6;
   background: var(--semantic-color-surface-overlay-default);
+  outline-color: transparent;
+  outline-width: 0.063rem;
+  outline-style: solid;
+  outline-offset: -0.063rem;
 }
 .keyGuide:global(.game) .red {
   background-color: #ff6d78;
@@ -309,6 +325,10 @@
   --semantic-color-surface-default: #1F2C24;
   --semantic-color-surface-default-focused: #3ea07d;
   background: var(--semantic-color-surface-overlay-default);
+  outline-color: transparent;
+  outline-width: 0.063rem;
+  outline-style: solid;
+  outline-offset: -0.063rem;
 }
 :global(.green) .keyGuide:global(.game) .red {
   background-color: #ff6d78;
@@ -371,6 +391,10 @@
   --semantic-color-surface-default: #422923;
   --semantic-color-surface-default-focused: #b85f23;
   background: var(--semantic-color-surface-overlay-default);
+  outline-color: transparent;
+  outline-width: 0.063rem;
+  outline-style: solid;
+  outline-offset: -0.063rem;
 }
 :global(.orange) .keyGuide:global(.game) .red {
   background-color: #ff6d78;

package/Marquee/Marquee.d.ts

@@ -27,14 +27,12 @@ export class MarqueeBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, MarqueeBaseProps>
 > {}
 
-export interface MarqueeControllerProps
-  extends ui_Marquee_MarqueeControllerProps {}
+export interface MarqueeControllerProps extends ui_Marquee_MarqueeControllerProps {}
 export function MarqueeController<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & MarqueeControllerProps>;
 
-export interface MarqueeDecoratorProps
-  extends ui_Marquee_MarqueeDecoratorProps {}
+export interface MarqueeDecoratorProps extends ui_Marquee_MarqueeDecoratorProps {}
 export function MarqueeDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & MarqueeDecoratorProps>;

package/MediaOverlay/MediaOverlay.d.ts

@@ -99,23 +99,24 @@ export class MediaOverlayBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, MediaOverlayBaseProps>
 > {}
 
-export interface MediaOverlayDecoratorProps
-  extends Merge<
+export interface MediaOverlayDecoratorProps extends Merge<
+  Merge<
     Merge<
-      Merge<
-        limestone_Marquee_MarqueeControllerProps,
-        spotlight_Spottable_SpottableProps
-      >,
-      ui_Slottable_SlottableProps
+      limestone_Marquee_MarqueeControllerProps,
+      spotlight_Spottable_SpottableProps
     >,
-    limestone_Skinnable_SkinnableProps
-  > {}
+    ui_Slottable_SlottableProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function MediaOverlayDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & MediaOverlayDecoratorProps>;
 
-export interface MediaOverlayProps
-  extends Merge<MediaOverlayBaseProps, MediaOverlayDecoratorProps> {}
+export interface MediaOverlayProps extends Merge<
+  MediaOverlayBaseProps,
+  MediaOverlayDecoratorProps
+> {}
 /**
  * A Limestone-styled  `Media`  component.
  * 

package/MediaOverlay/MediaOverlay.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.MediaOverlayDecorator = exports.MediaOverlayBase = exports.MediaOverlay = void 0;
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
 var _Layout = require("@enact/ui/Layout");
 var _Media = _interopRequireDefault(require("@enact/ui/Media"));
-var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
 var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
@@ -138,6 +139,14 @@ var MediaOverlayBase = exports.MediaOverlayBase = (0, _kind["default"])({
      * @public
      */
     placeholder: _propTypes2["default"].string,
+    /**
+     * Indicates if the component is pressed.
+     *
+     * @type {Boolean}
+     * @default false
+     * @private
+     */
+    pressed: _propTypes2["default"].bool,
     /**
      * A number between `0` and `1` indicating the proportion of the filled portion of the bar.
      *
@@ -187,32 +196,43 @@ var MediaOverlayBase = exports.MediaOverlayBase = (0, _kind["default"])({
   },
   defaultProps: {
     mediaComponent: 'video',
+    pressed: false,
     progress: 0,
     textAlign: 'end'
   },
   styles: {
     css: _MediaOverlayModule["default"],
     className: 'mediaOverlay',
-    publicClassNames: ['mediaOverlay', 'image', 'text']
+    publicClassNames: ['mediaOverlay', 'image', 'pressed', 'text']
+  },
+  computed: {
+    className: function className(_ref) {
+      var pressed = _ref.pressed,
+        styler = _ref.styler;
+      return styler.append({
+        pressed: pressed
+      });
+    }
   },
-  render: function render(_ref) {
-    var caption = _ref.caption,
-      css = _ref.css,
-      imageOverlay = _ref.imageOverlay,
-      loop = _ref.loop,
-      marqueeOn = _ref.marqueeOn,
-      mediaComponent = _ref.mediaComponent,
-      muted = _ref.muted,
-      noAutoPlay = _ref.noAutoPlay,
-      placeholder = _ref.placeholder,
-      progress = _ref.progress,
-      showProgress = _ref.showProgress,
-      source = _ref.source,
-      title = _ref.title,
-      subtitle = _ref.subtitle,
-      text = _ref.text,
-      textAlign = _ref.textAlign,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  render: function render(_ref2) {
+    var caption = _ref2.caption,
+      css = _ref2.css,
+      imageOverlay = _ref2.imageOverlay,
+      loop = _ref2.loop,
+      marqueeOn = _ref2.marqueeOn,
+      mediaComponent = _ref2.mediaComponent,
+      muted = _ref2.muted,
+      noAutoPlay = _ref2.noAutoPlay,
+      placeholder = _ref2.placeholder,
+      progress = _ref2.progress,
+      showProgress = _ref2.showProgress,
+      source = _ref2.source,
+      title = _ref2.title,
+      subtitle = _ref2.subtitle,
+      text = _ref2.text,
+      textAlign = _ref2.textAlign,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    delete rest.pressed;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: css.bg
@@ -279,7 +299,9 @@ var MediaOverlayBase = exports.MediaOverlayBase = (0, _kind["default"])({
  */
 var MediaOverlayDecorator = exports.MediaOverlayDecorator = (0, _compose["default"])((0, _Marquee.MarqueeController)({
   marqueeOnFocus: true
-}), _Pure["default"], _Spottable["default"], (0, _Slottable["default"])({
+}), _Pure["default"], (0, _Touchable["default"])({
+  activeProp: 'pressed'
+}), _Spottable["default"], (0, _Slottable["default"])({
   slots: ['source']
 }), _Skinnable["default"]);
 

package/MediaOverlay/MediaOverlay.module.css

@@ -1,3 +1,86 @@
+/* ---------------------------------------
+Animations
+------------------------------------------ */
+:root {
+  /* Bounce
+	------------------------------------------ */
+  --lime-bounce-motion: var(--lime-bounce-animation-name) var(--lime-bounce-motion-duration) var(--lime-bounce-motion-easing-function);
+  --lime-check-motion: var(--lime-check-animation-name) var(--lime-check-motion-duration) forwards;
+}
+/* ---------------------------------------
+Animations properties
+------------------------------------------ */
+:root {
+  /* ---------------------------------------
+	Durations
+	------------------------------------------ */
+  --lime-motion-default-duration: 200ms;
+  --lime-motion-medium1-duration: 250ms;
+  --lime-motion-medium2-duration: 300ms;
+  --lime-motion-medium4-duration: 400ms;
+  --lime-motion-long2-duration: 500ms;
+  --lime-bounce-motion-duration: var(--lime-motion-medium2-duration);
+  --lime-check-motion-duration: var(--lime-motion-medium4-duration);
+  --lime-focus-in-motion-duration: var(--lime-motion-medium2-duration);
+  --lime-focus-out-motion-duration: var(--lime-motion-long2-duration);
+  --lime-press-motion-duration: var(--lime-motion-medium1-duration);
+  --lime-release-motion-duration: var(--lime-motion-medium2-duration);
+  /* ---------------------------------------
+	Easing functions
+	------------------------------------------ */
+  --lime-default-motion-easing-function: ease-out;
+  --lime-EIO-motion-easing-function: cubic-bezier(0.2, 0, 0.05, 1);
+  --lime-EO-motion-easing-function: cubic-bezier(0.1, 0.6, 0.15, 1);
+  --lime-bounce-motion-easing-function: var(--lime-default-motion-easing-function);
+  --lime-focus-in-motion-easing-function: var(--lime-EIO-motion-easing-function);
+  --lime-focus-out-motion-easing-function: var(--lime-EO-motion-easing-function);
+  --lime-press-motion-easing-function: var(--lime-EIO-motion-easing-function);
+  --lime-release-motion-easing-function: var(--lime-EO-motion-easing-function);
+  /* ---------------------------------------
+	Keyframes names
+	------------------------------------------ */
+  --lime-bounce-animation-name: bounce-motion;
+  --lime-check-animation-name: check-motion;
+  /* ---------------------------------------
+	Keyframes values
+	------------------------------------------ */
+  --lime-bounce-motion-offset-default-value: 0.125rem;
+}
+/* ---------------------------------------
+Keyframes
+------------------------------------------ */
+/* Bounce
+	------------------------------------------ */
+@keyframes bounce-motion {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value));
+  }
+  80% {
+    transform: translateX(calc(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value) / -2));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+/* Check
+	------------------------------------------ */
+@keyframes check-motion {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+/* ---------------------------------------
+Motion Variables
+------------------------------------------ */
+/* ---------------------------------------
+Motion Mixins
+------------------------------------------ */
 .mediaOverlay {
   display: block;
   position: relative;
@@ -16,6 +99,37 @@
 }
 .mediaOverlay .mediaContainer {
   position: relative;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
+}
+:global(.spotlight-input-key) .mediaOverlay:global(.spottable):focus .mediaContainer,
+:global(.spotlight-input-mouse) .mediaOverlay:global(.spottable):focus .mediaContainer {
+  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
+}
+:global(.spotlight-input-touch) .mediaOverlay:global(.spottable):active .mediaContainer {
+  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
+}
+:global(.spotlight-input-key) .mediaOverlay:not([disabled]):global(.spottable):focus.pressed .mediaContainer,
+:global(.spotlight-input-mouse) .mediaOverlay:not([disabled]):global(.spottable):focus.pressed .mediaContainer,
+:global(.spotlight-input-key) .mediaOverlay:not([disabled]):global(.spottable):focus:active .mediaContainer,
+:global(.spotlight-input-mouse) .mediaOverlay:not([disabled]):global(.spottable):focus:active .mediaContainer {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) .mediaOverlay:not([disabled]):global(.spottable):focus:not(.pressed) .mediaContainer,
+:global(.spotlight-input-mouse) .mediaOverlay:not([disabled]):global(.spottable):focus:not(.pressed) .mediaContainer {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
+}
+:global(.spotlight-input-touch) .mediaOverlay:not([disabled]):global(.spottable):active.pressed .mediaContainer,
+:global(.spotlight-input-touch) .mediaOverlay:not([disabled]):global(.spottable):active:active .mediaContainer {
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) .mediaOverlay:not([disabled]):global(.spottable):active:not(.pressed) .mediaContainer {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 .mediaOverlay .media {
   display: block;
@@ -88,21 +202,6 @@
   font-size: var(--primitive-font-size-48);
   line-height: 1.3em;
 }
-:global(.spotlight-input-key) .mediaOverlay:global(.spottable):focus .image,
-:global(.spotlight-input-mouse) .mediaOverlay:global(.spottable):focus .image,
-:global(.spotlight-input-key) .mediaOverlay:global(.spottable):focus .media,
-:global(.spotlight-input-mouse) .mediaOverlay:global(.spottable):focus .media,
-:global(.spotlight-input-key) .mediaOverlay:global(.spottable):focus .progressBar,
-:global(.spotlight-input-mouse) .mediaOverlay:global(.spottable):focus .progressBar {
-  transform: scale(1.1);
-  transition: transform 200ms ease-in-out;
-}
-:global(.spotlight-input-touch) .mediaOverlay:global(.spottable):active .image,
-:global(.spotlight-input-touch) .mediaOverlay:global(.spottable):active .media,
-:global(.spotlight-input-touch) .mediaOverlay:global(.spottable):active .progressBar {
-  transform: scale(1.1);
-  transition: transform 200ms ease-in-out;
-}
 .mediaOverlay:global(.neutral) .bg {
   opacity: 0;
   background-color: var(--semantic-color-surface-default-focused);

package/MediaOverlay/tests/MediaOverlay-specs.js

@@ -124,4 +124,33 @@ describe('MediaOverlay', function () {
     var actual = _react.screen.getByTestId('mediaOverlay');
     expect(actual).toBe(expected);
   });
+  test('should be pressed when selected', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaOverlay["default"], {
+      "data-testid": "mediaOverlay",
+      source: "abc.mp4"
+    }));
+    var mediaOverlay = _react.screen.getByTestId('mediaOverlay');
+
+    // Select by key
+    _react.fireEvent.keyDown(mediaOverlay, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(mediaOverlay).toHaveClass('pressed');
+    _react.fireEvent.keyUp(mediaOverlay, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(mediaOverlay).not.toHaveClass('pressed');
+
+    // Select by pointer
+    _react.fireEvent.mouseDown(mediaOverlay);
+    expect(mediaOverlay).toHaveClass('pressed');
+    _react.fireEvent.mouseUp(mediaOverlay);
+    expect(mediaOverlay).not.toHaveClass('pressed');
+  });
 });