@enact/limestone 1.3.0 → 1.9.4

package/VideoPlayer/VideoPlayer.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, "Video", {
 exports["default"] = exports.VideoPlayerBase = exports.VideoPlayer = void 0;
 var _ApiDecorator = _interopRequireDefault(require("@enact/core/internal/ApiDecorator"));
 var _dispatcher = require("@enact/core/dispatcher");
+var _deprecate = _interopRequireDefault(require("@enact/core/internal/deprecate"));
 var _util = require("@enact/core/util");
 var _handle = require("@enact/core/handle");
 var _keymap = require("@enact/core/keymap");
@@ -167,6 +168,10 @@ var forwardJumpBackward = forwardWithState('onJumpBackward');
 var forwardWillJumpBackward = forwardWithState('onWillJumpBackward');
 var forwardJumpForward = forwardWithState('onJumpForward');
 var forwardWillJumpForward = forwardWithState('onWillJumpForward');
+var forwardPrevious = forwardWithState('onPrevious');
+var forwardWillPrevious = forwardWithState('onWillPrevious');
+var forwardNext = forwardWithState('onNext');
+var forwardWillNext = forwardWithState('onWillNext');
 var AnnounceState = {
   // Video is loaded but additional announcements have not been made
   READY: 0,
@@ -179,6 +184,10 @@ var AnnounceState = {
   // All announcements have been made
   DONE: 4
 };
+var warnedOnJumpBackward = false;
+var warnedOnJumpForward = false;
+var warnedOnWillJumpBackward = false;
+var warnedOnWillJumpForward = false;
 
 /**
  * Every callback sent by {@link limestone/VideoPlayer|VideoPlayer} receives a status package,
@@ -502,31 +511,31 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     _this.handleControlsHandleAboveHold = function () {
       if (shouldJump(_this.props, _this.state)) {
         _this.handleJump({
-          keyCode: _this.jumpButtonPressed === -1 ? jumpBackKeyCode : jumpForwardKeyCode
+          keyCode: _this.jumpKeyPressed === -1 ? jumpBackKeyCode : jumpForwardKeyCode
         });
       }
     };
     _this.handleControlsHandleAboveKeyDown = function (_ref9) {
       var keyCode = _ref9.keyCode;
       if (isEnter(keyCode)) {
-        _this.jumpButtonPressed = 0;
+        _this.jumpKeyPressed = 0;
       } else if (isLeft(keyCode)) {
-        _this.jumpButtonPressed = -1;
+        _this.jumpKeyPressed = -1;
       } else if (isRight(keyCode)) {
-        _this.jumpButtonPressed = 1;
+        _this.jumpKeyPressed = 1;
       }
     };
     _this.handleControlsHandleAboveKeyUp = function (_ref0) {
       var keyCode = _ref0.keyCode;
       if (isEnter(keyCode) || isLeft(keyCode) || isRight(keyCode)) {
-        _this.jumpButtonPressed = null;
+        _this.jumpKeyPressed = null;
       }
     };
     _this.handleControlsHandleAboveDown = function () {
-      if (_this.jumpButtonPressed === 0) {
+      if (_this.jumpKeyPressed === 0) {
         _this.showControls();
-      } else if (_this.jumpButtonPressed === -1 || _this.jumpButtonPressed === 1) {
-        var keyCode = _this.jumpButtonPressed === -1 ? jumpBackKeyCode : jumpForwardKeyCode;
+      } else if (_this.jumpKeyPressed === -1 || _this.jumpKeyPressed === 1) {
+        var keyCode = _this.jumpKeyPressed === -1 ? jumpBackKeyCode : jumpForwardKeyCode;
         if (shouldJump(_this.props, _this.state)) {
           _this.handleJump({
             keyCode: keyCode
@@ -694,6 +703,14 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
       _this.startDelayedMiniFeedbackHide();
       return true;
     };
+    _this.next = function () {
+      // next api will be implemented in 2.0.0.
+      return true;
+    };
+    _this.previous = function () {
+      // previous api will be implemented in 2.0.0.
+      return true;
+    };
     /**
      * Fast forwards the current media for seeking.
      * This function changes the playback rate.
@@ -1066,6 +1083,12 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     _this.onJumpForward = _this.handle(forwardWillJumpForward, function () {
       return _this.jump(_this.props.jumpBy);
     }, forwardJumpForward);
+    _this.onNext = _this.props.onWillNext || _this.props.onNext ? _this.handle(forwardWillNext,
+    // () => this.next(),
+    forwardNext) : null;
+    _this.onPrevious = _this.props.onWillPrevious || _this.props.onPrevious ? _this.handle(forwardWillPrevious,
+    // () => this.previous(),
+    forwardPrevious) : null;
     _this.handleToggleMore = function (ev) {
       var showMoreComponents = ev.showMoreComponents,
         liftDistance = ev.liftDistance;
@@ -1112,7 +1135,7 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     _this.selectPlaybackRates('fastForward');
     _this.sliderKnobProportion = 0;
     _this.mediaControlsSpotlightId = _props.spotlightId + '_mediaControls';
-    _this.jumpButtonPressed = null;
+    _this.jumpKeyPressed = null;
     _this.playerRef = /*#__PURE__*/(0, _react.createRef)();
     _this.playbackRate = 1;
 
@@ -1221,8 +1244,8 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
           var _current = _spotlight.Spotlight.getCurrent();
           if (!_current || this.playerRef.current.contains(_current)) {
             // Set focus within media controls when they become visible.
-            if (_spotlight.Spotlight.focus(this.mediaControlsSpotlightId) && this.jumpButtonPressed === 0) {
-              this.jumpButtonPressed = null;
+            if (_spotlight.Spotlight.focus(this.mediaControlsSpotlightId) && this.jumpKeyPressed === 0) {
+              this.jumpKeyPressed = null;
             }
           }
         }
@@ -1327,6 +1350,38 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
         title = _this$props.title,
         VideoComponent = _this$props.videoComponent,
         mediaProps = _objectWithoutProperties(_this$props, _excluded2);
+      if (!warnedOnJumpBackward && mediaProps.onJumpBackward) {
+        (0, _deprecate["default"])({
+          name: '`onJumpBackward`',
+          until: '2.0.0',
+          message: 'Use `onPrevious` instead'
+        });
+        warnedOnJumpBackward = true;
+      }
+      if (!warnedOnJumpForward && mediaProps.onJumpForward) {
+        (0, _deprecate["default"])({
+          name: '`onJumpForward`',
+          until: '2.0.0',
+          message: 'Use `onNext` instead'
+        });
+        warnedOnJumpForward = true;
+      }
+      if (!warnedOnWillJumpBackward && mediaProps.onWillJumpBackward) {
+        (0, _deprecate["default"])({
+          name: '`onWillJumpBackward`',
+          until: '2.0.0',
+          message: 'Use `onWillPrevious` instead'
+        });
+        warnedOnWillJumpBackward = true;
+      }
+      if (!warnedOnWillJumpForward && mediaProps.onWillJumpForward) {
+        (0, _deprecate["default"])({
+          name: '`onWillJumpForward`',
+          until: '2.0.0',
+          message: 'Use `onWillPrevious` instead'
+        });
+        warnedOnWillJumpForward = true;
+      }
       delete mediaProps.announce;
       delete mediaProps.autoCloseTimeout;
       delete mediaProps.children;
@@ -1340,14 +1395,18 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
       delete mediaProps.onFastForward;
       delete mediaProps.onJumpBackward;
       delete mediaProps.onJumpForward;
+      delete mediaProps.onNext;
       delete mediaProps.onPause;
       delete mediaProps.onPlay;
+      delete mediaProps.onPrevious;
       delete mediaProps.onRewind;
       delete mediaProps.onWillFastForward;
       delete mediaProps.onWillJumpBackward;
       delete mediaProps.onWillJumpForward;
+      delete mediaProps.onWillNext;
       delete mediaProps.onWillPause;
       delete mediaProps.onWillPlay;
+      delete mediaProps.onWillPrevious;
       delete mediaProps.onWillRewind;
       delete mediaProps.onScrub;
       delete mediaProps.onSeekFailed;
@@ -1402,19 +1461,20 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
             className: _VideoPlayerModule["default"].back,
             icon: "arrowhookleft",
             iconFlip: "auto",
-            onClick: this.handleBack
-          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ControlsContainer, {
+            onClick: this.handleBack,
+            size: "small"
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_FeedbackContent["default"], {
+            className: _VideoPlayerModule["default"].miniFeedback,
+            playbackRate: this.pulsedPlaybackRate || this.selectPlaybackRate(this.speedIndex),
+            playbackState: this.pulsedPlaybackState || this.prevCommand,
+            visible: this.state.miniFeedbackVisible && !noMiniFeedback,
+            children: (0, _MediaPlayer.secondsToTime)(this.state.sliderTooltipTime, durFmt, {
+              includeHour: false
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ControlsContainer, {
             className: _VideoPlayerModule["default"].bottom + (this.state.mediaControlsVisible ? '' : ' ' + _VideoPlayerModule["default"].hidden) + (this.state.infoVisible ? ' ' + _VideoPlayerModule["default"].lift : ''),
             spotlightDisabled: spotlightDisabled || !this.state.mediaControlsVisible,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FeedbackContent["default"], {
-              className: _VideoPlayerModule["default"].miniFeedback,
-              playbackRate: this.pulsedPlaybackRate || this.selectPlaybackRate(this.speedIndex),
-              playbackState: this.pulsedPlaybackState || this.prevCommand,
-              visible: this.state.miniFeedbackVisible && !noMiniFeedback,
-              children: (0, _MediaPlayer.secondsToTime)(this.state.sliderTooltipTime, durFmt, {
-                includeHour: true
-              })
-            }), this.state.mediaSliderVisible ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [this.state.mediaSliderVisible ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: _VideoPlayerModule["default"].infoFrame,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaTitle["default"], {
                 id: "".concat(this.id, "_mediaTitle"),
@@ -1437,6 +1497,7 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
                 formatter: durFmt,
                 includeHour: includeTimeHour
               }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaPlayer.MediaSlider, {
+                "aria-valuetext": " ",
                 backgroundProgress: this.state.proportionLoaded,
                 disabled: disabled || this.state.sourceUnavailable,
                 forcePressed: this.state.slider5WayPressed,
@@ -1477,8 +1538,10 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
               onFastForward: this.handleFastForward,
               onJumpBackwardButtonClick: this.onJumpBackward,
               onJumpForwardButtonClick: this.onJumpForward,
+              onNextButtonClick: this.onNext,
               onPause: this.handlePause,
               onPlay: this.handlePlay,
+              onPreviousButtonClick: this.onPrevious,
               onRewind: this.handleRewind,
               onToggleMore: this.handleToggleMore,
               paused: this.state.paused,
@@ -1627,8 +1690,10 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
    * * `onJumpBackwardButtonClick` - Called when the jump backward button is pressed
    * * `onJumpForwardButtonClick` - Called when the jump forward button is pressed
    * * `onKeyDown` - Called when a key is pressed
+   * * `onNextButtonClick` - Called when the next button is pressed
    * * `onPause` - Called when the media is paused via a key event
    * * `onPlay` - Called when the media is played via a key event
+   * * `onPreviousButtonClick` - Called when the previous button is pressed
    * * `onRewind` - Called when the media is rewound via a key event
    * * `onToggleMore` - Called when the more components are hidden or shown
    * * `paused` - `true` when the media is paused
@@ -1748,6 +1813,7 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
    * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
    *
    * @type {Function}
+   * @deprecated Will be removed in 2.0.0. Use `onPrevious` instead.
    * @public
    */
   onJumpBackward: _propTypes2["default"].func,
@@ -1757,9 +1823,19 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
    * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
    *
    * @type {Function}
+   * @deprecated Will be removed in 2.0.0. Use `onNext` instead.
    * @public
    */
   onJumpForward: _propTypes2["default"].func,
+  /**
+   * Called when the user clicks the next button.
+   *
+   * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
+   *
+   * @type {Function}
+   * @public
+   */
+  onNext: _propTypes2["default"].func,
   /**
    * Called when the video has been paused.
    *
@@ -1774,6 +1850,15 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
    * @public
    */
   onPlay: _propTypes2["default"].func,
+  /**
+   * Called when the user clicks the previous button.
+   *
+   * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
+   *
+   * @type {Function}
+   * @public
+   */
+  onPrevious: _propTypes2["default"].func,
   /**
    * Called when the video has been rewound.
    *
@@ -1835,6 +1920,7 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
     *
     * @type {Function}
+    * @deprecated Will be removed in 2.0.0. Use `onWillPrevious` instead.
     * @public
     */
   onWillJumpBackward: _propTypes2["default"].func,
@@ -1844,9 +1930,19 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
     *
     * @type {Function}
+    * @deprecated Will be removed in 2.0.0. Use `onWillNext` instead.
     * @public
     */
   onWillJumpForward: _propTypes2["default"].func,
+  /**
+    * Called once before playing the next video in the playlist.
+    *
+    * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
+    *
+    * @type {Function}
+    * @public
+    */
+  onWillNext: _propTypes2["default"].func,
   /**
     * Called once before the video is paused.
     *
@@ -1861,6 +1957,15 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
     * @public
     */
   onWillPlay: _propTypes2["default"].func,
+  /**
+    * Called once before playing the previous video in the playlist.
+    *
+    * Is passed a {@link limestone/VideoPlayer.videoStatus} as the first argument.
+    *
+    * @type {Function}
+    * @public
+    */
+  onWillPrevious: _propTypes2["default"].func,
   /**
     * Called once before the video is rewound.
     *
@@ -2105,7 +2210,7 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
  * @public
  */
 var VideoPlayer = exports.VideoPlayer = (0, _ApiDecorator["default"])({
-  api: ['areControlsVisible', 'fastForward', 'getMediaState', 'getVideoNode', 'hideControls', 'jump', 'pause', 'play', 'rewind', 'seek', 'setPlaybackSpeed', 'showControls', 'showFeedback', 'toggleControls']
+  api: ['areControlsVisible', 'fastForward', 'getMediaState', 'getVideoNode', 'hideControls', 'jump', 'next', 'pause', 'play', 'previous', 'rewind', 'seek', 'setPlaybackSpeed', 'showControls', 'showFeedback', 'toggleControls']
 }, (0, _I18nDecorator.I18nContextDecorator)({
   localeProp: 'locale'
 }, (0, _Slottable["default"])({

package/VideoPlayer/VideoPlayer.module.css

@@ -27,34 +27,45 @@
   transform-origin: bottom;
 }
 .videoPlayer .fullscreen .miniFeedback {
+  position: absolute;
   display: inline-flex;
   align-items: center;
-  font-size: var(--primitive-font-size-60);
+  justify-content: center;
+  font-size: var(--primitive-font-size-66);
   font-weight: var(--primitive-font-weight-regular);
-  height: 3.5rem;
-  line-height: 1.4em;
-  margin-bottom: 1.5rem;
-  z-index: 50;
+  height: 1.75rem;
+  padding: var(--primitive-spacing-18) var(--primitive-spacing-60);
+  line-height: 1.75rem;
+  margin-bottom: var(--primitive-spacing-72);
+  z-index: 100;
+  top: var(--primitive-spacing-102);
   bottom: auto;
   pointer-events: none;
+  left: 5.75rem;
+  right: initial;
+}
+:global(.enact-locale-right-to-left) .videoPlayer .fullscreen .miniFeedback {
+  left: initial;
+  right: 5.75rem;
 }
 .videoPlayer .fullscreen .back {
+  margin: 0;
   position: absolute;
   z-index: 100;
-  top: 2.125rem;
-  left: 2.75rem;
+  top: var(--primitive-spacing-102);
+  left: var(--primitive-spacing-132);
   right: initial;
 }
 :global(.enact-locale-right-to-left) .videoPlayer .fullscreen .back {
   left: initial;
-  right: 2.75rem;
+  right: var(--primitive-spacing-132);
 }
 .videoPlayer .fullscreen .bottom {
   position: absolute;
   z-index: 100;
   bottom: 0;
-  left: 2.75rem;
-  right: 2.75rem;
+  left: var(--primitive-spacing-132);
+  right: var(--primitive-spacing-132);
 }
 .videoPlayer .fullscreen .bottom.lift {
   transform: translateY(calc(var(--liftDistance) * -1));
@@ -73,7 +84,7 @@
 .videoPlayer .fullscreen .bottom .infoFrame {
   display: flex;
   padding: var(--primitive-spacing-72) var(--primitive-spacing-48) 0;
-  margin-bottom: 1.25rem;
+  margin-bottom: var(--primitive-spacing-60);
 }
 .videoPlayer .fullscreen .bottom .sliderContainer {
   display: flex;
@@ -96,6 +107,7 @@
   left: 0;
 }
 .videoPlayer:global(.neutral) .fullscreen .miniFeedback {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
   color: var(--semantic-color-on-background-main);
 }
 .videoPlayer:global(.neutral) .fullscreen .bottom {
@@ -105,6 +117,7 @@
   background: linear-gradient(180deg, transparent 0%, #000 100%);
 }
 :global(.enact-a11y-high-contrast) .videoPlayer:global(.neutral):global(.highContrast) .fullscreen .miniFeedback {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
   color: var(--semantic-color-on-background-main);
 }
 :global(.enact-a11y-high-contrast) .videoPlayer:global(.neutral):global(.highContrast) .fullscreen .bottom {
@@ -114,6 +127,7 @@
   background: linear-gradient(180deg, transparent 0%, #000 100%);
 }
 .videoPlayer:global(.light) .fullscreen .miniFeedback {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
   color: var(--semantic-color-on-background-main);
 }
 .videoPlayer:global(.light) .fullscreen .bottom {
@@ -128,6 +142,7 @@
   --semantic-color-on-surface-main-focused: #e6e6e6;
 }
 .videoPlayer:global(.game) .fullscreen .miniFeedback {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
   color: var(--semantic-color-on-background-main);
 }
 .videoPlayer:global(.game) .fullscreen .bottom {
@@ -141,6 +156,7 @@
   --semantic-color-surface-default-focused: #3ea07d;
 }
 :global(.green) .videoPlayer:global(.game) .fullscreen .miniFeedback {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
   color: var(--semantic-color-on-background-main);
 }
 :global(.green) .videoPlayer:global(.game) .fullscreen .bottom {
@@ -154,6 +170,7 @@
   --semantic-color-surface-default-focused: #b85f23;
 }
 :global(.orange) .videoPlayer:global(.game) .fullscreen .miniFeedback {
+  background-color: color(from var(--semantic-color-surface-overlay-default) srgb r g b / 0.5);
   color: var(--semantic-color-on-background-main);
 }
 :global(.orange) .videoPlayer:global(.game) .fullscreen .bottom {

package/VirtualList/VirtualList.d.ts

@@ -50,6 +50,10 @@ this.scrollTo({align: 'top'}); // scroll to the top
 ```
  */
   cbScrollTo?: Function;
+  /**
+   * When this value is  `true` , scrolling in a VirtualList with holding a 5-way key continues to outer Scoller.
+   */
+  continue5WayHold?: boolean;
   /**
    * Disable voice control feature of component.
    */
@@ -201,8 +205,7 @@ export class VirtualList extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, VirtualListProps>
 > {}
 
-export interface VirtualGridListProps
-  extends ui_VirtualList_VirtualListBasicProps {
+export interface VirtualGridListProps extends ui_VirtualList_VirtualListBasicProps {
   /**
  * Size of an item for the VirtualGridList; valid value is an object that has  `minWidth` 
 and  `minHeight`  as properties.
@@ -247,6 +250,10 @@ this.scrollTo({align: 'top'}); // scroll to the top
 ```
  */
   cbScrollTo?: Function;
+  /**
+   * When this value is  `true` , scrolling in a VirtualGridList with holding a 5-way key continues to outer Scroller.
+   */
+  continue5WayHold?: boolean;
   /**
    * Disable voice control feature of component.
    */

package/VirtualList/VirtualList.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.VirtualList = exports.VirtualGridList = void 0;
 var _util = require("@enact/core/util");
 var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
 var _Resizable = require("@enact/ui/Resizable");
 var _VirtualList = require("@enact/ui/VirtualList");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _warning = _interopRequireDefault(require("warning"));
+var _validators = require("../internal/validators");
 var _useScroll3 = _interopRequireDefault(require("../useScroll"));
 var _HoverToScroll = _interopRequireDefault(require("../useScroll/HoverToScroll"));
 var _Scrollbar = _interopRequireDefault(require("../useScroll/Scrollbar"));
@@ -19,9 +20,9 @@ var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _useThemeVirtualList = require("./useThemeVirtualList");
 var _VirtualListModule = _interopRequireDefault(require("./VirtualList.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["itemSize", "hoverToScroll"],
+var _excluded = ["continue5WayHold", "itemSize", "hoverToScroll"],
   _excluded2 = ["className"],
-  _excluded3 = ["hoverToScroll"],
+  _excluded3 = ["continue5WayHold", "hoverToScroll"],
   _excluded4 = ["className"];
 /**
  * Provides Limestone-themed virtual list components and behaviors.
@@ -42,6 +43,7 @@ var nop = function nop() {};
 var virtualListDefaultProps = {
   'data-spotlight-container-disabled': false,
   cbScrollTo: nop,
+  continue5WayHold: false,
   direction: 'vertical',
   horizontalScrollbar: 'auto',
   noAffordance: false,
@@ -84,16 +86,20 @@ var VirtualList = exports.VirtualList = function VirtualList(props) {
       wheel: false
     };
   }
-  var itemSize = virtualListProps.itemSize,
+  var continue5WayHold = virtualListProps.continue5WayHold,
+    itemSize = virtualListProps.itemSize,
     hoverToScroll = virtualListProps.hoverToScroll,
     rest = _objectWithoutProperties(virtualListProps, _excluded);
+  _spotlight["default"].set(props.id, {
+    continue5WayHold: continue5WayHold
+  });
   var itemSizeProps = itemSize && itemSize.minSize ? {
     itemSize: itemSize.minSize,
     itemSizes: itemSize.size
   } : {
     itemSize: itemSize
   };
-  process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!itemSizeProps.itemSizes || !rest.cbScrollTo, 'VirtualList with `minSize` in `itemSize` prop does not support `cbScrollTo` prop') : void 0;
+  process.env.NODE_ENV !== "production" ? (0, _validators.warning)(itemSizeProps.itemSizes && rest.cbScrollTo !== nop, 'VirtualList with `minSize` in `itemSize` prop does not support `cbScrollTo` prop') : void 0;
 
   // Hooks
 
@@ -175,6 +181,13 @@ VirtualList.propTypes = /** @lends limestone/VirtualList.VirtualList.prototype *
    * @public
    */
   cbScrollTo: _propTypes["default"].func,
+  /**
+   * When this value is `true`, scrolling in a VirtualList with holding a 5-way key continues to outer Scoller.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  continue5WayHold: _propTypes["default"].bool,
   /**
    * This is set to `true` by SpotlightContainerDecorator
    *
@@ -491,6 +504,7 @@ VirtualList.defaultPropValues = virtualListDefaultProps;
 var virtualGridListDefaultProps = {
   'data-spotlight-container-disabled': false,
   cbScrollTo: nop,
+  continue5WayHold: false,
   direction: 'vertical',
   horizontalScrollbar: 'auto',
   noAffordance: false,
@@ -533,8 +547,12 @@ var VirtualGridList = exports.VirtualGridList = function VirtualGridList(props)
       wheel: false
     };
   }
-  var hoverToScroll = virtualGridListProps.hoverToScroll,
+  var continue5WayHold = virtualGridListProps.continue5WayHold,
+    hoverToScroll = virtualGridListProps.hoverToScroll,
     rest = _objectWithoutProperties(virtualGridListProps, _excluded3);
+  _spotlight["default"].set(props.id, {
+    continue5WayHold: continue5WayHold
+  });
   var _useScroll2 = (0, _useScroll3["default"])(rest),
     ScrollContentWrapper = _useScroll2.scrollContentWrapper,
     scrollContentHandle = _useScroll2.scrollContentHandle,
@@ -612,6 +630,13 @@ VirtualGridList.propTypes = /** @lends limestone/VirtualList.VirtualGridList.pro
    * @public
    */
   cbScrollTo: _propTypes["default"].func,
+  /**
+   * When this value is `true`, scrolling in a VirtualGridList with holding a 5-way key continues to outer Scroller.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  continue5WayHold: _propTypes["default"].bool,
   /**
    * This is set to `true` by SpotlightContainerDecorator
    *

package/VirtualList/tests/VirtualGridList-translate-specs.js

@@ -530,6 +530,9 @@ describe('VirtualGridList with translate \'scrollMode\'', function () {
         expect(startScrollTop).toBe(0);
         expect(onScrollStartCount).toBe(1);
         expect(resultScrollTop).toBe(0);
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(200);
+        });
         var listRoot = _react.screen.getByRole('list').parentElement;
         expect(listRoot).toHaveStyle({
           '--scroll-overscroll-translate-vertical': 'translateY(0px)'

package/VirtualList/tests/VirtualList-specs.js

@@ -162,7 +162,7 @@ describe('VirtualList', function () {
   });
   describe('ScrollTo', function () {
     test('should warn if both \'minSize\' in \'itemSize\' prop and \'cbScrollTo\' prop are given', function () {
-      var consoleSpy = jest.spyOn(console, 'error').mockImplementation(function () {});
+      var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
       var variableItemSize = {
         minSize: itemSize,
         size: [100, 200, 300, 400, 100, 200, 300, 400, 100, 200]
@@ -179,6 +179,33 @@ describe('VirtualList', function () {
       expect(consoleSpy).toHaveBeenCalled();
       expect(consoleSpy.mock.calls[0][0]).toBe(expectedErrorMsg);
     });
+    test('should not warn if \'minSize\' in \'itemSize\' prop is given without \'cbScrollTo\' prop', function () {
+      var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
+      var variableItemSize = {
+        minSize: itemSize,
+        size: [100, 200, 300, 400, 100, 200, 300, 400, 100, 200]
+      };
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], {
+        clientSize: clientSize,
+        dataSize: 10,
+        itemRenderer: renderItem,
+        itemSize: variableItemSize,
+        scrollMode: "translate"
+      }));
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+    test('should not warn if \'cbScrollTo\' prop is given without \'minSize\' in \'itemSize\' prop', function () {
+      var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList["default"], {
+        cbScrollTo: function cbScrollTo() {},
+        clientSize: clientSize,
+        dataSize: 10,
+        itemRenderer: renderItem,
+        itemSize: itemSize,
+        scrollMode: "translate"
+      }));
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
   });
   describe('Adding an item', function () {
     test('should render an added item named \'Password 0\' as the first item', function (done) {

package/VirtualList/tests/VirtualList-translate-specs.js

@@ -397,7 +397,7 @@ describe('VirtualList with translate \'scrollMode\'', function () {
       });
     });
     test('should warn if both \'minSize\' in \'itemSize\' prop and \'cbScrollTo\' prop are given', function () {
-      var consoleSpy = jest.spyOn(console, 'error').mockImplementation(function () {});
+      var consoleSpy = jest.spyOn(console, 'warn').mockImplementation(function () {});
       var variableItemSize = {
         minSize: itemSize,
         size: [100, 200, 300, 400, 100, 200, 300, 400, 100, 200]
@@ -523,6 +523,9 @@ describe('VirtualList with translate \'scrollMode\'', function () {
         expect(startScrollTop).toBe(0);
         expect(onScrollStartCount).toBe(1);
         expect(resultScrollTop).toBe(0);
+        (0, _react.act)(function () {
+          return jest.advanceTimersByTime(200);
+        });
         var listRoot = _react.screen.getByRole('list').parentElement;
         expect(listRoot).toHaveStyle({
           '--scroll-overscroll-translate-vertical': 'translateY(0px)'