@enact/limestone 1.10.1 → 1.10.2

package/TooltipDecorator/TooltipDecorator.d.ts

@@ -29,11 +29,37 @@ export interface TooltipDecoratorProps {
    * Disables the component but does not affect tooltip operation.
    */
   disabled?: boolean;
+  /**
+   * `Tooltip`  without the arrow.
+   */
+  noArrow?: boolean;
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `tooltip`  - The root class name
+ */
+  tooltipCss?: object;
   /**
    * Time to wait (in milliseconds) before showing tooltip on hover.
    */
   tooltipDelay?: number;
   /**
+ * Source for the image.
+String value or Object of values used to determine which image will appear on
+a specific screenSize.
+ */
+  tooltipImage?: string | object;
+  /**
+   * The size of the image.
+   *
+   * The following properties should be provided:
+   * *  `height`  - The height of the image
+   * *  `width`  - The width of the image
+   */
+  tooltipImageSize?: object;
+  /**
  * Allows the tooltip to marquee.
  * 
  * Specifying a   
@@ -175,6 +201,10 @@ account for that in your provided offset value.
 the marquee to that size.
  */
   marquee?: boolean;
+  /**
+   * `Tooltip`  without the arrow.
+   */
+  noArrow?: boolean;
   /**
    * Style object for tooltip position.
    */
@@ -187,6 +217,28 @@ When this is not specified, the implication is that the component is "absolutely
 positioned, relative to the viewport, rather than its parent layer.
  */
   relative?: boolean;
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `tooltip`  - The root class name
+ */
+  tooltipCss?: object;
+  /**
+ * Source for the image.
+String value or Object of values used to determine which image will appear on
+a specific screenSize.
+ */
+  tooltipImage?: string | object;
+  /**
+   * The size of the image.
+   *
+   * The following properties should be provided:
+   * *  `height`  - The height of the image
+   * *  `width`  - The width of the image
+   */
+  tooltipImageSize?: object;
   /**
    * Called when the tooltip mounts/unmounts, giving a reference to the DOM.
    */

package/TooltipDecorator/TooltipDecorator.js

@@ -124,6 +124,13 @@ var TooltipDecorator = exports.TooltipDecorator = (0, _hoc["default"])(defaultCo
      * @public
      */
     disabled: _propTypes["default"].bool,
+    /**
+     * `Tooltip` without the arrow.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noArrow: _propTypes["default"].bool,
     /**
      * Indicates the tooltip text direction is right-to-left.
      *
@@ -131,6 +138,18 @@ var TooltipDecorator = exports.TooltipDecorator = (0, _hoc["default"])(defaultCo
      * @private
      */
     rtl: _propTypes["default"].bool,
+    /**
+     * Customizes the component by mapping the supplied collection of CSS class names to the
+     * corresponding internal elements and states of this component.
+     *
+     * The following classes are supported:
+     *
+     * * `tooltip` - The root class name
+     *
+     * @type {Object}
+     * @public
+     */
+    tooltipCss: _propTypes["default"].object,
     /**
      * Time to wait (in milliseconds) before showing tooltip on hover.
      *
@@ -139,6 +158,29 @@ var TooltipDecorator = exports.TooltipDecorator = (0, _hoc["default"])(defaultCo
      * @public
      */
     tooltipDelay: _propTypes["default"].number,
+    /**
+     * Source for the image.
+     * String value or Object of values used to determine which image will appear on
+     * a specific screenSize.
+     *
+     * @type {String|Object}
+     * @public
+     */
+    tooltipImage: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    /**
+     * The size of the image.
+     *
+     * The following properties should be provided:
+     * * `height` - The height of the image
+     * * `width` - The width of the image
+     *
+     * @type {Object}
+     * @public
+     */
+    tooltipImageSize: _propTypes["default"].shape({
+      height: _propTypes["default"].number,
+      width: _propTypes["default"].number
+    }),
     /**
      * Allows the tooltip to marquee.
      *

package/TooltipDecorator/TooltipLabel.js

@@ -8,10 +8,11 @@ var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _util = require("@enact/i18n/util");
 var _resolution = require("@enact/ui/resolution");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Image = _interopRequireDefault(require("../Image"));
 var _Marquee = _interopRequireDefault(require("../Marquee"));
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["centered", "children", "marquee"];
+var _excluded = ["centered", "children", "css", "tooltipImage", "marquee"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": 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; }
@@ -55,6 +56,36 @@ var TooltipLabel = exports.TooltipLabel = (0, _kind["default"])({
      * @public
      */
     marquee: _propTypes["default"].bool,
+    /**
+     * `Tooltip` without the arrow.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noArrow: _propTypes["default"].bool,
+    /**
+     * Source for the image.
+     * String value or Object of values used to determine which image will appear on
+     * a specific screenSize.
+     *
+     * @type {String|Object}
+     * @public
+     */
+    tooltipImage: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+    /**
+     * The size of the image.
+     *
+     * The following properties should be provided:
+     * * `height` - The height of the image
+     * * `width` - The width of the image
+     *
+     * @type {Object}
+     * @public
+     */
+    tooltipImageSize: _propTypes["default"].shape({
+      height: _propTypes["default"].number,
+      width: _propTypes["default"].number
+    }),
     /**
      * The width of tooltip content.
      *
@@ -73,43 +104,65 @@ var TooltipLabel = exports.TooltipLabel = (0, _kind["default"])({
     width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
   },
   styles: {
-    css: _TooltipModule["default"]
+    css: _TooltipModule["default"],
+    name: 'tooltipLabel',
+    publicClassNames: true
   },
   computed: {
     className: function className(_ref) {
-      var marquee = _ref.marquee,
-        width = _ref.width,
-        styler = _ref.styler;
+      var tooltipImage = _ref.tooltipImage,
+        marquee = _ref.marquee,
+        noArrow = _ref.noArrow,
+        styler = _ref.styler,
+        width = _ref.width;
       return styler.append({
-        multi: !marquee && !!width,
-        marquee: marquee
+        multi: !marquee && (!!width || !!tooltipImage),
+        marquee: marquee,
+        noArrow: !!noArrow,
+        image: !!tooltipImage
       });
     },
     style: function style(_ref2) {
       var children = _ref2.children,
         width = _ref2.width,
+        tooltipImageSize = _ref2.tooltipImageSize,
         _style = _ref2.style;
+      var enforcedWidth = typeof width === 'number' ? (0, _resolution.scaleToRem)(width) : width;
       return _objectSpread(_objectSpread({}, _style), {}, {
         direction: (0, _util.isRtlText)(children) ? 'rtl' : 'ltr',
-        '--lime-tooltip-label-width': typeof width === 'number' ? (0, _resolution.scaleToRem)(width) : width
+        '--lime-tooltip-label-width': tooltipImageSize !== null && tooltipImageSize !== void 0 && tooltipImageSize.width ? (0, _resolution.scaleToRem)(tooltipImageSize === null || tooltipImageSize === void 0 ? void 0 : tooltipImageSize.width) : enforcedWidth,
+        '--lime-tooltip-image-width': (tooltipImageSize === null || tooltipImageSize === void 0 ? void 0 : tooltipImageSize.width) && (0, _resolution.scaleToRem)(tooltipImageSize === null || tooltipImageSize === void 0 ? void 0 : tooltipImageSize.width),
+        '--lime-tooltip-image-height': (tooltipImageSize === null || tooltipImageSize === void 0 ? void 0 : tooltipImageSize.width) && (0, _resolution.scaleToRem)(tooltipImageSize === null || tooltipImageSize === void 0 ? void 0 : tooltipImageSize.height)
       });
     }
   },
   render: function render(_ref3) {
     var centered = _ref3.centered,
       children = _ref3.children,
+      css = _ref3.css,
+      tooltipImage = _ref3.tooltipImage,
       marquee = _ref3.marquee,
       rest = _objectWithoutProperties(_ref3, _excluded);
+    delete rest.noArrow;
+    delete rest.tooltipImageSize;
     delete rest.width;
     if (marquee) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee["default"], _objectSpread(_objectSpread({}, rest), {}, {
-        alignment: centered ? 'center' : null,
-        marqueeOn: "render",
-        children: children
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
+        children: [tooltipImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
+          className: css.tooltipImage,
+          src: tooltipImage
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee["default"], {
+          alignment: centered ? 'center' : null,
+          marqueeOn: "render",
+          children: children
+        })]
       }));
     } else {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
-        children: children
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
+        children: [tooltipImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
+          className: css.tooltipImage,
+          src: tooltipImage
+        }), children]
       }));
     }
   }

package/TooltipDecorator/tests/TooltipDecorator-specs.js

@@ -12,6 +12,11 @@ function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
 var TooltipButton = (0, _TooltipDecorator["default"])(_Button["default"]);
+var src = {
+  hd: 'https://placehold.co/200x200',
+  fhd: 'https://placehold.co/300x300',
+  uhd: 'https://placehold.co/600x600'
+};
 describe('TooltipDecorator', function () {
   describe('TooltipLabel', function () {
     test('should apply alignment when `centered` and `marquee`', function () {
@@ -219,6 +224,47 @@ describe('TooltipDecorator', function () {
           expect(tooltipArrow).toHaveClass(expected);
         });
       }));
+      test('should have \'noArrow\' className when the prop is given', /*#__PURE__*/_asyncToGenerator(function* () {
+        var tooltipText = 'Tooltip';
+        (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipButton, {
+            tooltipDelay: 0,
+            noArrow: true,
+            tooltipText: tooltipText,
+            children: "Label"
+          })
+        }));
+        var button = _react.screen.getByRole('button');
+        (0, _react.act)(function () {
+          return button.focus();
+        });
+        _react.fireEvent.mouseOver(button);
+        yield (0, _react.waitFor)(function () {
+          var tooltipNoArrow = _react.screen.getByText('Tooltip').parentElement.parentElement;
+          var expected = 'tooltip noArrow';
+          expect(tooltipNoArrow).toHaveClass(expected);
+        });
+      }));
+      test('should have properly display Image', /*#__PURE__*/_asyncToGenerator(function* () {
+        var tooltipText = 'Tooltip';
+        (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipButton, {
+            tooltipDelay: 0,
+            tooltipImage: src,
+            tooltipText: tooltipText,
+            children: "Label"
+          })
+        }));
+        var button = _react.screen.getByRole('button');
+        (0, _react.act)(function () {
+          return button.focus();
+        });
+        _react.fireEvent.mouseOver(button);
+        yield (0, _react.waitFor)(function () {
+          var tooltipImage = _react.screen.getByText('Tooltip').children[0].children[0].tagName;
+          expect(tooltipImage).toBe('IMG');
+        });
+      }));
     });
   });
 });

package/TooltipDecorator/useTooltip.js

@@ -45,9 +45,13 @@ var getTooltipDirection = function getTooltipDirection(tooltipPosition, tooltipT
 };
 var removeTooltipProps = function removeTooltipProps(_ref) {
   var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  delete props.noArrow;
   delete props.rtl;
   delete props.screenEdgeKeepout;
+  delete props.tooltipCss;
   delete props.tooltipDelay;
+  delete props.tooltipImage;
+  delete props.tooltipImageSize;
   delete props.tooltipMarquee;
   delete props.tooltipPosition;
   delete props.tooltipProps;
@@ -71,7 +75,8 @@ var defaultScreenEdgeKeepout = exports.defaultScreenEdgeKeepout = 24 + 24;
 // A hook to show Limestone-styled tooltip components.
 var useTooltip = exports.useTooltip = function useTooltip(props) {
   var _useI18nContext;
-  var _props$screenEdgeKeep = props.screenEdgeKeepout,
+  var noArrow = props.noArrow,
+    _props$screenEdgeKeep = props.screenEdgeKeepout,
     screenEdgeKeepout = _props$screenEdgeKeep === void 0 ? defaultScreenEdgeKeepout : _props$screenEdgeKeep,
     _props$tooltipDelay = props.tooltipDelay,
     tooltipDelay = _props$tooltipDelay === void 0 ? 500 : _props$tooltipDelay,
@@ -79,6 +84,9 @@ var useTooltip = exports.useTooltip = function useTooltip(props) {
     tooltipType = _props$tooltipType === void 0 ? 'balloon' : _props$tooltipType,
     _props$tooltipUpdateD = props.tooltipUpdateDelay,
     tooltipUpdateDelay = _props$tooltipUpdateD === void 0 ? 400 : _props$tooltipUpdateD,
+    tooltipCss = props.tooltipCss,
+    tooltipImage = props.tooltipImage,
+    tooltipImageSize = props.tooltipImageSize,
     tooltipMarquee = props.tooltipMarquee,
     tooltipPosition = props.tooltipPosition,
     tooltipProps = props.tooltipProps,
@@ -246,10 +254,14 @@ var useTooltip = exports.useTooltip = function useTooltip(props) {
       labelOffset: layout.labelOffset
     }, tooltipProps), {}, {
       arrowAnchor: layout.arrowAnchor,
+      noArrow: noArrow,
       direction: layout.tooltipDirection,
       marquee: tooltipMarquee,
       relative: tooltipRelative,
       style: tooltipStyle,
+      tooltipCss: tooltipCss,
+      tooltipImage: tooltipImage,
+      tooltipImageSize: tooltipImageSize,
       tooltipRef: getTooltipRef,
       type: tooltipType,
       width: tooltipWidth,
@@ -268,7 +280,7 @@ var useTooltip = exports.useTooltip = function useTooltip(props) {
     } else {
       return null;
     }
-  }, [getTooltipRef, hideTooltip, layout, showing, tooltipMarquee, tooltipProps, tooltipRelative, tooltipText, tooltipType, tooltipWidth]);
+  }, [getTooltipRef, hideTooltip, layout, noArrow, showing, tooltipCss, tooltipImage, tooltipImageSize, tooltipMarquee, tooltipProps, tooltipRelative, tooltipText, tooltipType, tooltipWidth]);
   return {
     tooltip: tooltipText ? renderTooltip() : null,
     handlers: handlers,

package/VideoPlayer/MediaTitle.module.css

@@ -1,5 +1,5 @@
 .titleFrame {
-  width: calc(100% - 2 * 4rem );
+  width: calc(100% - 2 *  4rem );
   position: relative;
   flex-grow: 1;
   opacity: 1;

package/VirtualList/VirtualList.d.ts

@@ -170,6 +170,18 @@ the  `Spotlight`  will store the last focus information based on  `SpotlightId`
 And the  `VirtualList`  will restore the focus when it remounts while the navigation returns to the  `Panel` .
  */
   spotlightId?: string;
+  /**
+ * Anchors the focused item to a fixed "focus position" at the start edge while the list scrolls
+beneath it.
+ * 
+ * When set to  `'start'` , moving focus with 5-way keys keeps the focus indicator at a fixed slot
+at the start of the list (top for vertical, leading edge for horizontal) and scrolls so the
+newly focused item lands in that slot. At the end of the list, the list scrolls only to its
+last position so the focused item stays visible.
+ * 
+ * This is ignored when  `snapToCenter`  is set.
+ */
+  stickTo?: "start";
   /**
    * Specifies how to show vertical scrollbar.
    *
@@ -380,6 +392,18 @@ the  `Spotlight`  will store the last focus information based on  `SpotlightId`
 And the  `VirtualGridList`  will restore the focus when it remounts while the navigation returns to the  `Panel` .
  */
   spotlightId?: string;
+  /**
+ * Anchors the focused item to a fixed "focus position" at the start edge while the list scrolls
+beneath it.
+ * 
+ * When set to  `'start'` , moving focus with 5-way keys keeps the focus indicator at a fixed slot
+at the start of the list (top for vertical, leading edge for horizontal) and scrolls so the
+newly focused item lands in that slot. At the end of the list, the list scrolls only to its
+last position so the focused item stays visible.
+ * 
+ * This is ignored when  `snapToCenter`  is set.
+ */
+  stickTo?: "start";
   /**
    * Specifies how to show vertical scrollbar.
    *

package/VirtualList/VirtualList.js

@@ -456,6 +456,21 @@ _VirtualList.propTypes = /** @lends limestone/VirtualList.VirtualList.prototype
    * @public
    */
   spotlightId: _propTypes["default"].string,
+  /**
+   * Anchors the focused item to a fixed "focus position" at the start edge while the list scrolls
+   * beneath it.
+   *
+   * When set to `'start'`, moving focus with 5-way keys keeps the focus indicator at a fixed slot
+   * at the start of the list (top for vertical, leading edge for horizontal) and scrolls so the
+   * newly focused item lands in that slot. At the end of the list, the list scrolls only to its
+   * last position so the focused item stays visible.
+   *
+   * This is ignored when `snapToCenter` is set.
+   *
+   * @type {('start')}
+   * @public
+   */
+  stickTo: _propTypes["default"].oneOf(['start']),
   /**
    * Specifies how to show vertical scrollbar.
    *
@@ -908,6 +923,21 @@ _VirtualGridList.propTypes = /** @lends limestone/VirtualList.VirtualGridList.pr
    * @public
    */
   spotlightId: _propTypes["default"].string,
+  /**
+   * Anchors the focused item to a fixed "focus position" at the start edge while the list scrolls
+   * beneath it.
+   *
+   * When set to `'start'`, moving focus with 5-way keys keeps the focus indicator at a fixed slot
+   * at the start of the list (top for vertical, leading edge for horizontal) and scrolls so the
+   * newly focused item lands in that slot. At the end of the list, the list scrolls only to its
+   * last position so the focused item stays visible.
+   *
+   * This is ignored when `snapToCenter` is set.
+   *
+   * @type {('start')}
+   * @public
+   */
+  stickTo: _propTypes["default"].oneOf(['start']),
   /**
    * Specifies how to show vertical scrollbar.
    *

package/VirtualList/tests/stickTo-specs.js

@@ -0,0 +1,115 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _react = require("@testing-library/react");
+var _Item = _interopRequireDefault(require("../../Item"));
+var _VirtualList = _interopRequireDefault(require("../VirtualList"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["index"]; // These tests exercise the `stickTo="start"` scroll behavior added to `useThemeVirtualList`. They
+// live in their own file because they depend on a clean Spotlight instance.
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 focus = function focus(elm) {
+  return _react.fireEvent.focus(elm);
+};
+var keyDownUp = function keyDownUp(keyCode) {
+  return function (elm) {
+    _react.fireEvent.keyDown(elm, {
+      keyCode: keyCode
+    });
+    return _react.fireEvent.keyUp(elm, {
+      keyCode: keyCode
+    });
+  };
+};
+var pressDownKey = keyDownUp(40);
+describe('VirtualList stickTo="start"', function () {
+  var clientSize, currentFocusIndex, dataSize, handlerOnFocus, items, itemSize, renderItem;
+  beforeEach(function () {
+    clientSize = {
+      clientWidth: 1280,
+      clientHeight: 720
+    };
+    currentFocusIndex = -1;
+    dataSize = 200;
+    items = [];
+    itemSize = 60;
+    handlerOnFocus = function handlerOnFocus(index) {
+      return function () {
+        currentFocusIndex = index;
+      };
+    };
+    renderItem = function renderItem(_ref) {
+      var index = _ref.index,
+        rest = _objectWithoutProperties(_ref, _excluded);
+      // eslint-disable-line enact/display-name
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item["default"], _objectSpread(_objectSpread({}, rest), {}, {
+        onFocus: handlerOnFocus(index),
+        children: items[index].name
+      }));
+    };
+    for (var i = 0; i < dataSize; i++) {
+      items.push({
+        name: 'Account ' + i
+      });
+    }
+  });
+  afterEach(function () {
+    clientSize = null;
+    dataSize = null;
+    handlerOnFocus = null;
+    items = null;
+    itemSize = null;
+    renderItem = null;
+  });
+  test('should scroll to anchor the focused item at the start slot on 5-way navigation', function () {
+    var spy = jest.fn(function () {});
+    var scrollToFn = global.Element.prototype.scrollTo;
+    global.Element.prototype.scrollTo = spy;
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], {
+      clientSize: clientSize,
+      dataSize: dataSize,
+      itemRenderer: renderItem,
+      itemSize: itemSize,
+      stickTo: "start"
+    }));
+    var list = _react.screen.getByRole('list');
+    var item13 = list.children.item(13).children.item(0);
+    focus(item13);
+    expect(currentFocusIndex).toBe(13);
+    pressDownKey(item13);
+    expect(currentFocusIndex).toBe(14);
+    expect(spy).toHaveBeenCalled();
+    global.Element.prototype.scrollTo = scrollToFn;
+  });
+  test('should scroll a focused item to the start slot', function () {
+    var spy = jest.fn(function () {});
+    var scrollToFn = global.Element.prototype.scrollTo;
+    global.Element.prototype.scrollTo = spy;
+    var pointerSpy = jest.spyOn(_spotlight["default"], 'getPointerMode').mockReturnValue(false);
+    var currentSpy = jest.spyOn(_spotlight["default"], 'getCurrent');
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], {
+      clientSize: clientSize,
+      dataSize: dataSize,
+      direction: "horizontal",
+      itemRenderer: renderItem,
+      itemSize: itemSize,
+      stickTo: "start"
+    }));
+    var list = _react.screen.getByRole('list');
+    var node = list.querySelector('[data-index="13"]');
+    currentSpy.mockReturnValue(node);
+    _react.fireEvent.focusIn(node);
+    expect(spy).toHaveBeenCalled();
+    currentSpy.mockRestore();
+    pointerSpy.mockRestore();
+    global.Element.prototype.scrollTo = scrollToFn;
+  });
+});

package/VirtualList/tests/useEvent-specs.js

@@ -27,6 +27,14 @@ var keyDownUp = function keyDownUp(keyCode) {
     });
   };
 };
+var keyDownRepeat = function keyDownRepeat(keyCode) {
+  return function (elm) {
+    return _react.fireEvent.keyDown(elm, {
+      keyCode: keyCode,
+      repeat: true
+    });
+  };
+};
 var pressLeftKey = keyDownUp(37);
 var pressRightKey = keyDownUp(39);
 var pressUpKey = keyDownUp(38);
@@ -148,6 +156,37 @@ describe('VirtualList useEvent', function () {
     expect(spy).toHaveBeenCalled();
     global.Element.prototype.scrollTo = scrollToFn;
   });
+  test('should handle repeat keydown on first VirtualList entry without error', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], {
+      clientSize: clientSize,
+      dataSize: dataSize,
+      itemRenderer: renderItem,
+      itemSize: itemSize
+    }));
+    var list = _react.screen.getByRole('list');
+    var item0 = list.children.item(0).children.item(0);
+    focus(item0);
+    expect(currentFocusIndex).toBe(0);
+    keyDownRepeat(40)(item0);
+    expect(currentFocusIndex).toBe(0);
+  });
+  test('should handle repeat keydown when data-index jumps unexpectedly without error', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], {
+      clientSize: clientSize,
+      dataSize: dataSize,
+      itemRenderer: renderItem,
+      itemSize: itemSize
+    }));
+    var list = _react.screen.getByRole('list');
+    var item0 = list.children.item(0).children.item(0);
+    var item1 = list.children.item(1).children.item(0);
+    focus(item0);
+    pressDownKey(item0);
+    expect(currentFocusIndex).toBe(1);
+    item1.dataset.index = '20';
+    keyDownRepeat(40)(item1);
+    expect(currentFocusIndex).toBe(1);
+  });
   test('should scroll by page-down key', function () {
     var spy = jest.fn(function () {});
     var scrollToFn = global.Element.prototype.scrollTo;