@enact/limestone 1.3.0

package/VirtualList/VirtualList.js

@@ -0,0 +1,931 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.VirtualList = exports.VirtualGridList = void 0;
+var _util = require("@enact/core/util");
+var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+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 _useScroll3 = _interopRequireDefault(require("../useScroll"));
+var _HoverToScroll = _interopRequireDefault(require("../useScroll/HoverToScroll"));
+var _Scrollbar = _interopRequireDefault(require("../useScroll/Scrollbar"));
+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"],
+  _excluded2 = ["className"],
+  _excluded3 = ["hoverToScroll"],
+  _excluded4 = ["className"];
+/**
+ * Provides Limestone-themed virtual list components and behaviors.
+ *
+ * @module limestone/VirtualList
+ * @exports VirtualGridList
+ * @exports VirtualList
+ */
+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 nop = function nop() {};
+var virtualListDefaultProps = {
+  'data-spotlight-container-disabled': false,
+  cbScrollTo: nop,
+  direction: 'vertical',
+  horizontalScrollbar: 'auto',
+  noAffordance: false,
+  noScrollByDrag: false,
+  noScrollByWheel: false,
+  onScroll: nop,
+  onScrollStart: nop,
+  onScrollStop: nop,
+  overscrollEffectOn: {
+    arrowKey: false,
+    drag: true,
+    pageKey: false,
+    track: false,
+    wheel: true
+  },
+  pageScroll: false,
+  role: 'list',
+  scrollMode: 'native',
+  verticalScrollbar: 'auto',
+  wrap: false
+};
+
+/**
+ * A Limestone-styled scrollable and spottable virtual list component.
+ *
+ * @class VirtualList
+ * @memberof limestone/VirtualList
+ * @extends ui/VirtualList.VirtualListBasic
+ * @ui
+ * @public
+ */
+var VirtualList = exports.VirtualList = function VirtualList(props) {
+  var virtualListProps = (0, _util.setDefaultProps)(props, virtualListDefaultProps);
+  if (typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION) {
+    virtualListProps.overscrollEffectOn = {
+      arrowKey: false,
+      drag: false,
+      pageKey: false,
+      track: false,
+      wheel: false
+    };
+  }
+  var itemSize = virtualListProps.itemSize,
+    hoverToScroll = virtualListProps.hoverToScroll,
+    rest = _objectWithoutProperties(virtualListProps, _excluded);
+  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;
+
+  // Hooks
+
+  var _useScroll = (0, _useScroll3["default"])(_objectSpread(_objectSpread({}, rest), itemSizeProps)),
+    ScrollContentWrapper = _useScroll.scrollContentWrapper,
+    scrollContentHandle = _useScroll.scrollContentHandle,
+    isHorizontalScrollbarVisible = _useScroll.isHorizontalScrollbarVisible,
+    isVerticalScrollbarVisible = _useScroll.isVerticalScrollbarVisible,
+    resizeContextProps = _useScroll.resizeContextProps,
+    scrollContainerProps = _useScroll.scrollContainerProps,
+    scrollContentWrapperProps = _useScroll.scrollContentWrapperProps,
+    scrollContentProps = _useScroll.scrollContentProps,
+    horizontalScrollbarProps = _useScroll.horizontalScrollbarProps,
+    verticalScrollbarProps = _useScroll.verticalScrollbarProps,
+    hoverToScrollProps = _useScroll.hoverToScrollProps;
+  var className = scrollContentWrapperProps.className,
+    scrollContentWrapperRest = _objectWithoutProperties(scrollContentWrapperProps, _excluded2);
+  var themeScrollContainerProps = _objectSpread(_objectSpread({}, scrollContainerProps), {}, {
+    className: (0, _classnames["default"])(_VirtualListModule["default"].scrollContainer, scrollContainerProps.className)
+  });
+  var themeScrollContentProps = (0, _useThemeVirtualList.useThemeVirtualList)(_objectSpread(_objectSpread({}, scrollContentProps), {}, {
+    className: (0, _classnames["default"])(className, scrollContentProps.className)
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizable.ResizeContext, _objectSpread(_objectSpread({}, resizeContextProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ScrollContentWrapper, _objectSpread(_objectSpread(_objectSpread({}, themeScrollContainerProps), scrollContentWrapperRest), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList.VirtualListBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
+        ref: scrollContentHandle
+      })), isVerticalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, verticalScrollbarProps)) : null, isHorizontalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, horizontalScrollbarProps)) : null, hoverToScroll ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverToScroll["default"], _objectSpread({}, hoverToScrollProps)) : null]
+    }))
+  }));
+};
+VirtualList.displayName = 'VirtualList';
+VirtualList.propTypes = /** @lends limestone/VirtualList.VirtualList.prototype */{
+  /**
+   * Size of an item for the VirtualList; valid value is a number generally.
+   * For different item size, value is an object that has `minSize`
+   * and `size` as properties.
+   * If the direction for the list is vertical, itemSize means the height of an item.
+   * For horizontal, it means the width of an item.
+   *
+   * Usage:
+   * ```
+   * <VirtualList itemSize={ri.scale(144)} />
+   * ```
+   *
+   * @type {Number|ui/VirtualList.itemSizesShape}
+   * @required
+   * @public
+   */
+  itemSize: _propTypes["default"].oneOfType([_propTypes["default"].number, _VirtualList.itemSizesShape]).isRequired,
+  /**
+   * A callback function that receives a reference to the `scrollTo` feature.
+   *
+   * Once received, the `scrollTo` method can be called as an imperative interface.
+   *
+   * The `scrollTo` function accepts the following parameters:
+   * - {position: {x, y}} - Pixel value for x and/or y position
+   * - {align} - Where the scroll area should be aligned. Values are:
+   *   `'left'`, `'right'`, `'top'`, `'bottom'`,
+   *   `'topleft'`, `'topright'`, `'bottomleft'`, and `'bottomright'`.
+   * - {index} - Index of specific item. (`0` or positive integer)
+   *   This option is available for only `VirtualList` kind.
+   * - {node} - Node to scroll into view
+   * - {animate} - When `true`, scroll occurs with animation. When `false`, no
+   *   animation occurs.
+   * - {focus} - When `true`, attempts to focus item after scroll. Only valid when scrolling
+   *   by `index` or `node`.
+   * > Note: Only specify one of: `position`, `align`, `index` or `node`
+   *
+   * Example:
+   * ```
+   *	// If you set cbScrollTo prop like below;
+   *	cbScrollTo: (fn) => {this.scrollTo = fn;}
+   *	// You can simply call like below;
+   *	this.scrollTo({align: 'top'}); // scroll to the top
+   * ```
+   *
+   * @type {Function}
+   * @public
+   */
+  cbScrollTo: _propTypes["default"].func,
+  /**
+   * This is set to `true` by SpotlightContainerDecorator
+   *
+   * @type {Boolean}
+   * @private
+   */
+  'data-spotlight-container': _propTypes["default"].bool,
+  /**
+   * `false` if the content of the list could get focus
+   *
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  'data-spotlight-container-disabled': _propTypes["default"].bool,
+  /**
+   * This is passed onto the wrapped component to allow
+   * it to customize the spotlight container for its use case.
+   *
+   * @type {String}
+   * @private
+   */
+  'data-spotlight-id': _propTypes["default"].string,
+  /**
+   * Disable voice control feature of component.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  'data-webos-voice-disabled': _propTypes["default"].bool,
+  /**
+   * Activates the component for voice control.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  'data-webos-voice-focused': _propTypes["default"].bool,
+  /**
+   * The voice control group label.
+   *
+   * @type {String}
+   * @public
+   */
+  'data-webos-voice-group-label': _propTypes["default"].string,
+  /**
+   * The layout direction of the list.
+   *
+   * @type {('horizontal'|'vertical')}
+   * @default 'vertical'
+   * @public
+   */
+  direction: _propTypes["default"].oneOf(['horizontal', 'vertical']),
+  /**
+   * Specifies how to show horizontal scrollbar.
+   *
+   * @type {('auto'|'visible'|'hidden')}
+   * @default 'auto'
+   * @public
+   */
+  horizontalScrollbar: _propTypes["default"].oneOf(['auto', 'visible', 'hidden']),
+  /**
+   * Sets the hint string read when focusing the scroll thumb in the horizontal scroll bar.
+   *
+   * @type {String}
+   * @default $L('scroll up or down with up down button')
+   * @public
+   */
+  horizontalScrollThumbAriaLabel: _propTypes["default"].string,
+  /**
+   * Enables scroll by hover on edges in scroll direction.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  hoverToScroll: _propTypes["default"].bool,
+  /**
+   * Unique identifier for the component.
+   *
+   * When defined and when the `VirtualList` is within a {@link limestone/Panels.Panel|Panel},
+   * the `VirtualList` will store its scroll position and restore that position when returning to
+   * the `Panel`.
+   *
+   * @type {String}
+   * @public
+   */
+  id: _propTypes["default"].string,
+  /**
+   * Prop to check if horizontal Scrollbar exists or not.
+   *
+   * @type {Boolean}
+   * @private
+   */
+  isHorizontalScrollbarVisible: _propTypes["default"].bool,
+  /**
+   * Prop to check if vertical Scrollbar exists or not.
+   *
+   * @type {Boolean}
+   * @private
+   */
+  isVerticalScrollbarVisible: _propTypes["default"].bool,
+  /**
+   * The array for individually sized items.
+   *
+   * @type {Number[]}
+   * @private
+   */
+  itemSizes: _propTypes["default"].arrayOf(_propTypes["default"].number),
+  /**
+   * Removes affordance area on the list.
+   *
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  noAffordance: _propTypes["default"].bool,
+  /**
+   * Prevents scroll by dragging or flicking on the list.
+   *
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  noScrollByDrag: _propTypes["default"].bool,
+  /**
+   * Prevents scroll by wheeling on the list.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  noScrollByWheel: _propTypes["default"].bool,
+  /**
+   * Called when scrolling.
+   *
+   * Passes `scrollLeft`, `scrollTop`, and `moreInfo`.
+   * It is not recommended to set this prop since it can cause performance degradation.
+   * Use `onScrollStart` or `onScrollStop` instead.
+   *
+   * @type {Function}
+   * @param {Object} event
+   * @param {Number} event.scrollLeft Scroll left value.
+   * @param {Number} event.scrollTop Scroll top value.
+   * @param {Object} event.moreInfo The object including `firstVisibleIndex` and `lastVisibleIndex` properties.
+   * @public
+   */
+  onScroll: _propTypes["default"].func,
+  /**
+   * Called when scroll starts.
+   *
+   * Passes `scrollLeft`, `scrollTop`, and `moreInfo`.
+   * You can get firstVisibleIndex and lastVisibleIndex from VirtualList with `moreInfo`.
+   *
+   * Example:
+   * ```
+   * onScrollStart = ({scrollLeft, scrollTop, moreInfo}) => {
+   *     const {firstVisibleIndex, lastVisibleIndex} = moreInfo;
+   *     // do something with firstVisibleIndex and lastVisibleIndex
+   * }
+   *
+   * render = () => (
+   *     <VirtualList
+   *         ...
+   *         onScrollStart={this.onScrollStart}
+   *         ...
+   *     />
+   * )
+   * ```
+   *
+   * @type {Function}
+   * @param {Object} event
+   * @param {Number} event.scrollLeft Scroll left value.
+   * @param {Number} event.scrollTop Scroll top value.
+   * @param {Object} event.moreInfo The object including `firstVisibleIndex` and `lastVisibleIndex` properties.
+   * @public
+   */
+  onScrollStart: _propTypes["default"].func,
+  /**
+   * Called when scroll stops.
+   *
+   * Passes `scrollLeft`, `scrollTop`, and `moreInfo`.
+   * You can get firstVisibleIndex and lastVisibleIndex from VirtualList with `moreInfo`.
+   *
+   * Example:
+   * ```
+   * onScrollStop = ({scrollLeft, scrollTop, moreInfo}) => {
+   *     const {firstVisibleIndex, lastVisibleIndex} = moreInfo;
+   *     // do something with firstVisibleIndex and lastVisibleIndex
+   * }
+   *
+   * render = () => (
+   *     <VirtualList
+   *         ...
+   *         onScrollStop={this.onScrollStop}
+   *         ...
+   *     />
+   * )
+   * ```
+   *
+   * @type {Function}
+   * @param {Object} event
+   * @param {Number} event.scrollLeft Scroll left value.
+   * @param {Number} event.scrollTop Scroll top value.
+   * @param {Object} event.moreInfo The object including `firstVisibleIndex` and `lastVisibleIndex` properties.
+   * @public
+   */
+  onScrollStop: _propTypes["default"].func,
+  /**
+   * Specifies overscroll effects shows on which type of inputs.
+   *
+   * @type {Object}
+   * @default {
+   *	arrowKey: false,
+   *	drag: true,
+   *	pageKey: false,
+   *	track: false,
+   *	wheel: true
+   * }
+   * @private
+   */
+  overscrollEffectOn: _propTypes["default"].shape({
+    arrowKey: _propTypes["default"].bool,
+    drag: _propTypes["default"].bool,
+    pageKey: _propTypes["default"].bool,
+    track: _propTypes["default"].bool,
+    wheel: _propTypes["default"].bool
+  }),
+  /**
+   * When `true`, the list will scroll by page. Otherwise, the list will scroll by item.
+   *
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  pageScroll: _propTypes["default"].bool,
+  /**
+   * The ARIA role for the list.
+   *
+   * @type {String}
+   * @default 'list'
+   * @public
+   */
+  role: _propTypes["default"].string,
+  /**
+   * Specifies how to scroll.
+   *
+   * Valid values are:
+   * * `'translate'`,
+   * * `'native'`.
+   *
+   * @type {String}
+   * @default 'native'
+   * @public
+   */
+  scrollMode: _propTypes["default"].string,
+  /**
+   * The container id for {@link spotlight/SpotlightContainerDecorator/#SpotlightContainerDecorator.spotlightId|Spotlight container}.
+   *
+   * It is a required prop to restore focus after remounting `VirtualList`.
+   *
+   * For example, with this prop specified, when a `VirtualList` is used in a {@link limestone/Panels.Panel|Panel},
+   * the `Spotlight` will store the last focus information based on `SpotlightId` while navigating to another Panel.
+   * And the `VirtualList` will restore the focus when it remounts while the navigation returns to the `Panel`.
+   *
+   * @type {String}
+   * @public
+   */
+  spotlightId: _propTypes["default"].string,
+  /**
+   * Specifies how to show vertical scrollbar.
+   *
+   * Valid values are:
+   * * `'auto'`,
+   * * `'visible'`, and
+   * * `'hidden'`.
+   *
+   * @type {('auto'|'visible'|'hidden')}
+   * @default 'auto'
+   * @public
+   */
+  verticalScrollbar: _propTypes["default"].oneOf(['auto', 'visible', 'hidden']),
+  /**
+   * Sets the hint string read when focusing the scroll thumb in the vertical scroll bar.
+   *
+   * @type {String}
+   * @default $L('scroll left or right with left right button')
+   * @public
+   */
+  verticalScrollThumbAriaLabel: _propTypes["default"].string,
+  /**
+   * When it's `true` and the spotlight focus cannot move to the given direction anymore by 5-way keys,
+   * a list is scrolled with an animation to the other side and the spotlight focus moves in wraparound manner.
+   *
+   * When it's `'noAnimation'`, the spotlight focus moves in wraparound manner as same as when it's `true`
+   * except that a list is scrolled without an animation.
+   *
+   * Valid values are:
+   * * `false`,
+   * * `true`, and
+   * * `'noAnimation'`
+   * @type {Boolean|'noAnimation'}
+   * @default false
+   * @public
+   */
+  wrap: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(['noAnimation'])])
+};
+exports.VirtualList = VirtualList = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
+  overflow: true,
+  preserveId: true,
+  restrict: 'self-first'
+}, (0, _I18nDecorator.I18nContextDecorator)({
+  rtlProp: 'rtl'
+}, VirtualList)));
+VirtualList.defaultPropValues = virtualListDefaultProps;
+var virtualGridListDefaultProps = {
+  'data-spotlight-container-disabled': false,
+  cbScrollTo: nop,
+  direction: 'vertical',
+  horizontalScrollbar: 'auto',
+  noAffordance: false,
+  noScrollByDrag: false,
+  noScrollByWheel: false,
+  onScroll: nop,
+  onScrollStart: nop,
+  onScrollStop: nop,
+  overscrollEffectOn: {
+    arrowKey: false,
+    drag: true,
+    pageKey: false,
+    track: false,
+    wheel: true
+  },
+  pageScroll: false,
+  role: 'list',
+  scrollMode: 'native',
+  verticalScrollbar: 'auto',
+  wrap: false
+};
+
+/**
+ * A Limestone-styled scrollable and spottable virtual grid list component.
+ *
+ * @class VirtualGridList
+ * @memberof limestone/VirtualList
+ * @extends ui/VirtualList.VirtualListBasic
+ * @ui
+ * @public
+ */
+var VirtualGridList = exports.VirtualGridList = function VirtualGridList(props) {
+  var virtualGridListProps = (0, _util.setDefaultProps)(props, virtualGridListDefaultProps);
+  if (typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION) {
+    virtualGridListProps.overscrollEffectOn = {
+      arrowKey: false,
+      drag: false,
+      pageKey: false,
+      track: false,
+      wheel: false
+    };
+  }
+  var hoverToScroll = virtualGridListProps.hoverToScroll,
+    rest = _objectWithoutProperties(virtualGridListProps, _excluded3);
+  var _useScroll2 = (0, _useScroll3["default"])(rest),
+    ScrollContentWrapper = _useScroll2.scrollContentWrapper,
+    scrollContentHandle = _useScroll2.scrollContentHandle,
+    isHorizontalScrollbarVisible = _useScroll2.isHorizontalScrollbarVisible,
+    isVerticalScrollbarVisible = _useScroll2.isVerticalScrollbarVisible,
+    resizeContextProps = _useScroll2.resizeContextProps,
+    scrollContainerProps = _useScroll2.scrollContainerProps,
+    scrollContentWrapperProps = _useScroll2.scrollContentWrapperProps,
+    scrollContentProps = _useScroll2.scrollContentProps,
+    horizontalScrollbarProps = _useScroll2.horizontalScrollbarProps,
+    verticalScrollbarProps = _useScroll2.verticalScrollbarProps,
+    hoverToScrollProps = _useScroll2.hoverToScrollProps;
+  var className = scrollContentWrapperProps.className,
+    scrollContentWrapperRest = _objectWithoutProperties(scrollContentWrapperProps, _excluded4);
+  var themeScrollContentProps = (0, _useThemeVirtualList.useThemeVirtualList)(_objectSpread(_objectSpread({}, scrollContentProps), {}, {
+    className: (0, _classnames["default"])(className, scrollContentProps.className)
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizable.ResizeContext, _objectSpread(_objectSpread({}, resizeContextProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ScrollContentWrapper, _objectSpread(_objectSpread(_objectSpread({}, scrollContainerProps), scrollContentWrapperRest), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList.VirtualListBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
+        ref: scrollContentHandle
+      })), isVerticalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, verticalScrollbarProps)) : null, isHorizontalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, horizontalScrollbarProps)) : null, hoverToScroll ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverToScroll["default"], _objectSpread({}, hoverToScrollProps)) : null]
+    }))
+  }));
+};
+VirtualGridList.displayName = 'VirtualGridList';
+VirtualGridList.propTypes = /** @lends limestone/VirtualList.VirtualGridList.prototype */{
+  /**
+   * Size of an item for the VirtualGridList; valid value is an object that has `minWidth`
+   * and `minHeight` as properties.
+   *
+   * Usage:
+   * ```
+   * <VirtualGridList
+   * 	itemSize={{
+   * 		minWidth: ri.scale(360),
+   * 		minHeight: ri.scale(540)
+   * 	}}
+   * />
+   * ```
+   *
+   * @type {ui/VirtualList.gridListItemSizeShape}
+   * @required
+   * @public
+   */
+  itemSize: _VirtualList.gridListItemSizeShape.isRequired,
+  /**
+   * A callback function that receives a reference to the `scrollTo` feature.
+   *
+   * Once received, the `scrollTo` method can be called as an imperative interface.
+   *
+   * The `scrollTo` function accepts the following parameters:
+   * - {position: {x, y}} - Pixel value for x and/or y position
+   * - {align} - Where the scroll area should be aligned. Values are:
+   *   `'left'`, `'right'`, `'top'`, `'bottom'`,
+   *   `'topleft'`, `'topright'`, `'bottomleft'`, and `'bottomright'`.
+   * - {index} - Index of specific item. (`0` or positive integer)
+   *   This option is available for only `VirtualList` kind.
+   * - {node} - Node to scroll into view
+   * - {animate} - When `true`, scroll occurs with animation. When `false`, no
+   *   animation occurs.
+   * - {focus} - When `true`, attempts to focus item after scroll. Only valid when scrolling
+   *   by `index` or `node`.
+   * > Note: Only specify one of: `position`, `align`, `index` or `node`
+   *
+   * Example:
+   * ```
+   *	// If you set cbScrollTo prop like below;
+   *	cbScrollTo: (fn) => {this.scrollTo = fn;}
+   *	// You can simply call like below;
+   *	this.scrollTo({align: 'top'}); // scroll to the top
+   * ```
+   *
+   * @type {Function}
+   * @public
+   */
+  cbScrollTo: _propTypes["default"].func,
+  /**
+   * This is set to `true` by SpotlightContainerDecorator
+   *
+   * @type {Boolean}
+   * @private
+   */
+  'data-spotlight-container': _propTypes["default"].bool,
+  /**
+   * `false` if the content of the list could get focus
+   *
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  'data-spotlight-container-disabled': _propTypes["default"].bool,
+  /**
+   * This is passed onto the wrapped component to allow
+   * it to customize the spotlight container for its use case.
+   *
+   * @type {String}
+   * @private
+   */
+  'data-spotlight-id': _propTypes["default"].string,
+  /**
+   * Disable voice control feature of component.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  'data-webos-voice-disabled': _propTypes["default"].bool,
+  /**
+   * Activates the component for voice control.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  'data-webos-voice-focused': _propTypes["default"].bool,
+  /**
+   * The voice control group label.
+   *
+   * @type {String}
+   * @public
+   */
+  'data-webos-voice-group-label': _propTypes["default"].string,
+  /**
+   * The layout direction of the list.
+   *
+   * @type {('horizontal'|'vertical')}
+   * @default 'vertical'
+   * @public
+   */
+  direction: _propTypes["default"].oneOf(['horizontal', 'vertical']),
+  /**
+   * Specifies how to show horizontal scrollbar.
+   *
+   * @type {('auto'|'visible'|'hidden')}
+   * @default 'auto'
+   * @public
+   */
+  horizontalScrollbar: _propTypes["default"].oneOf(['auto', 'visible', 'hidden']),
+  /**
+   * Sets the hint string read when focusing the scroll thumb in the horizontal scroll bar.
+   *
+   * @type {String}
+   * @default $L('scroll up or down with up down button')
+   * @public
+   */
+  horizontalScrollThumbAriaLabel: _propTypes["default"].string,
+  /**
+   * Enables scroll by hover on edges in scroll direction.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  hoverToScroll: _propTypes["default"].bool,
+  /**
+   * Unique identifier for the component.
+   *
+   * When defined and when the `VirtualGridList` is within a {@link limestone/Panels.Panel|Panel},
+   * the `VirtualGridList` will store its scroll position and restore that position when returning to
+   * the `Panel`.
+   *
+   * @type {String}
+   * @public
+   */
+  id: _propTypes["default"].string,
+  /**
+   * Prop to check if horizontal Scrollbar exists or not.
+   *
+   * @type {Boolean}
+   * @private
+   */
+  isHorizontalScrollbarVisible: _propTypes["default"].bool,
+  /**
+   * Prop to check if vertical Scrollbar exists or not.
+   *
+   * @type {Boolean}
+   * @private
+   */
+  isVerticalScrollbarVisible: _propTypes["default"].bool,
+  /**
+   * Removes affordance area on the list.
+   * Set this to `true` only if the item needs to stick to the bottom for vertical direction,
+   * to the right for horizontal direction, when scrolling by keys.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  noAffordance: _propTypes["default"].bool,
+  /**
+   * Prevents scroll by dragging or flicking on the list.
+   *
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  noScrollByDrag: _propTypes["default"].bool,
+  /**
+   * Prevents scroll by wheeling on the list.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  noScrollByWheel: _propTypes["default"].bool,
+  /**
+   * Called when scrolling.
+   *
+   * Passes `scrollLeft`, `scrollTop`, and `moreInfo`.
+   * It is not recommended to set this prop since it can cause performance degradation.
+   * Use `onScrollStart` or `onScrollStop` instead.
+   *
+   * @type {Function}
+   * @param {Object} event
+   * @param {Number} event.scrollLeft Scroll left value.
+   * @param {Number} event.scrollTop Scroll top value.
+   * @param {Object} event.moreInfo The object including `firstVisibleIndex` and `lastVisibleIndex` properties.
+   * @public
+   */
+  onScroll: _propTypes["default"].func,
+  /**
+   * Called when scroll starts.
+   *
+   * Passes `scrollLeft`, `scrollTop`, and `moreInfo`.
+   * You can get firstVisibleIndex and lastVisibleIndex from VirtualGridList with `moreInfo`.
+   *
+   * Example:
+   * ```
+   * onScrollStart = ({scrollLeft, scrollTop, moreInfo}) => {
+   *     const {firstVisibleIndex, lastVisibleIndex} = moreInfo;
+   *     // do something with firstVisibleIndex and lastVisibleIndex
+   * }
+   *
+   * render = () => (
+   *     <VirtualGridList
+   *         ...
+   *         onScrollStart={this.onScrollStart}
+   *         ...
+   *     />
+   * )
+   * ```
+   *
+   * @type {Function}
+   * @param {Object} event
+   * @param {Number} event.scrollLeft Scroll left value.
+   * @param {Number} event.scrollTop Scroll top value.
+   * @param {Object} event.moreInfo The object including `firstVisibleIndex` and `lastVisibleIndex` properties.
+   * @public
+   */
+  onScrollStart: _propTypes["default"].func,
+  /**
+   * Called when scroll stops.
+   *
+   * Passes `scrollLeft`, `scrollTop`, and `moreInfo`.
+   * You can get firstVisibleIndex and lastVisibleIndex from VirtualGridList with `moreInfo`.
+   *
+   * Example:
+   * ```
+   * onScrollStop = ({scrollLeft, scrollTop, moreInfo}) => {
+   *     const {firstVisibleIndex, lastVisibleIndex} = moreInfo;
+   *     // do something with firstVisibleIndex and lastVisibleIndex
+   * }
+   *
+   * render = () => (
+   *     <VirtualGridList
+   *         ...
+   *         onScrollStop={this.onScrollStop}
+   *         ...
+   *     />
+   * )
+   * ```
+   *
+   * @type {Function}
+   * @param {Object} event
+   * @param {Number} event.scrollLeft Scroll left value.
+   * @param {Number} event.scrollTop Scroll top value.
+   * @param {Object} event.moreInfo The object including `firstVisibleIndex` and `lastVisibleIndex` properties.
+   * @public
+   */
+  onScrollStop: _propTypes["default"].func,
+  /**
+   * Specifies overscroll effects shows on which type of inputs.
+   *
+   * @type {Object}
+   * @default {
+   *	arrowKey: false,
+   *	drag: true,
+   *	pageKey: false,
+   *	track: false,
+   *	wheel: true
+   * }
+   * @private
+   */
+  overscrollEffectOn: _propTypes["default"].shape({
+    arrowKey: _propTypes["default"].bool,
+    drag: _propTypes["default"].bool,
+    pageKey: _propTypes["default"].bool,
+    track: _propTypes["default"].bool,
+    wheel: _propTypes["default"].bool
+  }),
+  /**
+   * When `true`, the list will scroll by page. Otherwise, the list will scroll by item.
+   *
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  pageScroll: _propTypes["default"].bool,
+  /**
+   * The ARIA role for the list.
+   *
+   * @type {String}
+   * @default 'list'
+   * @public
+   */
+  role: _propTypes["default"].string,
+  /**
+   * Specifies how to scroll.
+   *
+   * Valid values are:
+   * * `'translate'`,
+   * * `'native'`.
+   *
+   * @type {String}
+   * @default 'native'
+   * @public
+   */
+  scrollMode: _propTypes["default"].string,
+  /**
+   * When it's true, the item snaps to center.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  snapToCenter: _propTypes["default"].bool,
+  /**
+   * The container id for {@link spotlight/SpotlightContainerDecorator/#SpotlightContainerDecorator.spotlightId|Spotlight container}.
+   *
+   * It is a required prop to restore focus after remounting `VirtualGridList`.
+   *
+   * For example, with this prop specified, when a `VirtualGridList` is used in a {@link limestone/Panels.Panel|Panel},
+   * the `Spotlight` will store the last focus information based on `SpotlightId` while navigating to another Panel.
+   * And the `VirtualGridList` will restore the focus when it remounts while the navigation returns to the `Panel`.
+   *
+   * @type {String}
+   * @public
+   */
+  spotlightId: _propTypes["default"].string,
+  /**
+   * Specifies how to show vertical scrollbar.
+   *
+   * Valid values are:
+   * * `'auto'`,
+   * * `'visible'`, and
+   * * `'hidden'`.
+   *
+   * @type {('auto'|'visible'|'hidden')}
+   * @default 'auto'
+   * @public
+   */
+  verticalScrollbar: _propTypes["default"].oneOf(['auto', 'visible', 'hidden']),
+  /**
+   * Sets the hint string read when focusing the scroll thumb in the vertical scroll bar.
+   *
+   * @type {String}
+   * @default $L('scroll left or right with left right button')
+   * @public
+   */
+  verticalScrollThumbAriaLabel: _propTypes["default"].string,
+  /**
+   * When it's `true` and the spotlight focus cannot move to the given direction anymore by 5-way keys,
+   * a list is scrolled with an animation to the other side and the spotlight focus moves in wraparound manner.
+   *
+   * When it's `'noAnimation'`, the spotlight focus moves in wraparound manner as same as when it's `true`
+   * except that a list is scrolled without an animation.
+   *
+   * Valid values are:
+   * * `false`,
+   * * `true`, and
+   * * `'noAnimation'`
+   *
+   * @type {Boolean|'noAnimation'}
+   * @default false
+   * @public
+   */
+  wrap: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(['noAnimation'])])
+};
+exports.VirtualGridList = VirtualGridList = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
+  overflow: true,
+  preserveId: true,
+  restrict: 'self-first'
+}, (0, _I18nDecorator.I18nContextDecorator)({
+  rtlProp: 'rtl'
+}, VirtualGridList)));
+VirtualGridList.defaultPropValues = virtualGridListDefaultProps;
+var _default = exports["default"] = VirtualList;