@enact/limestone 1.3.0 → 1.9.4

package/PageViews/PageViews.js

@@ -6,10 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.PageViews = void 0;
 var _handle = _interopRequireWildcard(require("@enact/core/handle"));
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _keymap = require("@enact/core/keymap");
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _util = require("@enact/core/util");
 var _I18nDecorator = require("@enact/i18n/I18nDecorator");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _SpotlightContainerDecorator = _interopRequireWildcard(require("@enact/spotlight/SpotlightContainerDecorator"));
+var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
 var _Changeable = _interopRequireDefault(require("@enact/ui/Changeable"));
 var _Layout = require("@enact/ui/Layout");
 var _ViewManager = _interopRequireWildcard(require("@enact/ui/ViewManager"));
@@ -25,16 +28,37 @@ var _Steps = _interopRequireDefault(require("../Steps"));
 var _PageViewsRouter = require("./PageViewsRouter");
 var _PageViewsModule = _interopRequireDefault(require("./PageViews.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["css", "componentRef", "fullContents", "index", "pageIndicatorPosition", "pageIndicatorType", "renderNextButton", "renderPrevButton", "renderViewManager", "stepHintAriaLabel", "steps"];
+var _excluded = ["css", "componentRef", "fullContents", "index", "pageIndicatorPosition", "pageIndicatorType", "renderNextButton", "renderPrevButton", "renderViewManager", "stepHintAriaLabel", "steps", "uniqueId"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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 _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; }
+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 _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); }
+var isLeft = (0, _keymap.is)('left');
+var isRight = (0, _keymap.is)('right');
+var handlePageChange = function handlePageChange(index, onChange, totalIndex) {
+  if (onChange && index !== totalIndex && totalIndex) {
+    var nextIndex = index < totalIndex - 1 ? index + 1 : index;
+    onChange({
+      type: 'onChange',
+      index: nextIndex
+    });
+  } else if (onChange && index !== 0) {
+    var prevIndex = index > 0 ? index - 1 : index;
+    onChange({
+      type: 'onChange',
+      index: prevIndex
+    });
+  }
+};
+var SpottableCell = (0, _Spottable["default"])(_Layout.Cell);
+var SpottableColumn = (0, _SpotlightContainerDecorator["default"])(_Layout.Column);
+
+/**
  * A PageViews that has page indicator with corresponding pages.
  *
  * @example
@@ -62,6 +86,13 @@ var PageViewsBase = (0, _kind["default"])({
      * @private
      */
     arranger: _ViewManager.shape,
+    /**
+     * When `true`, disables Spotlight outside the container and enables 5-way navigation between panels.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    bannerMode: _propTypes2["default"].bool,
     /**
      * {@link limestone/PageViews.Page|Page} to be rendered.
      *
@@ -163,7 +194,14 @@ var PageViewsBase = (0, _kind["default"])({
      * @type {Number}
      * @private
      */
-    totalIndex: _propTypes2["default"].number
+    totalIndex: _propTypes2["default"].number,
+    /**
+     * A unique identifier for each PageViews component.
+     *
+     * @type {String}
+     * @private
+     */
+    uniqueId: _propTypes2["default"].string
   },
   defaultProps: {
     arranger: _Panels.BasicArranger,
@@ -176,32 +214,62 @@ var PageViewsBase = (0, _kind["default"])({
     publicClassNames: true
   },
   handlers: {
-    onNextClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onNextClick'), function (ev, _ref) {
+    onKeyDown: (0, _handle["default"])((0, _handle.forProp)('bannerMode', true), function (ev, _ref) {
       var index = _ref.index,
         onChange = _ref.onChange,
-        totalIndex = _ref.totalIndex;
-      if (onChange && index !== totalIndex) {
-        var nextIndex = index < totalIndex - 1 ? index + 1 : index;
-        onChange({
-          type: 'onChange',
-          index: nextIndex
-        });
+        rtl = _ref.rtl,
+        totalIndex = _ref.totalIndex,
+        uniqueId = _ref.uniqueId;
+      _spotlight["default"].set('banner-container' + uniqueId, {
+        navigableFilter: function navigableFilter(node) {
+          return node.classList.contains(_PageViewsModule["default"].viewManager);
+        }
+      });
+      if (!rtl && isRight(ev.keyCode) || rtl && isLeft(ev.keyCode)) {
+        handlePageChange(index, onChange, totalIndex);
+      } else if (!rtl && isLeft(ev.keyCode) || rtl && isRight(ev.keyCode)) {
+        handlePageChange(index, onChange);
       }
     }),
-    onPrevClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onPrevClick'), function (ev, _ref2) {
-      var index = _ref2.index,
-        onChange = _ref2.onChange;
-      if (onChange && index !== 0) {
-        var prevIndex = index > 0 ? index - 1 : index;
-        onChange({
-          type: 'onChange',
-          index: prevIndex
-        });
-      }
+    onMouseOver: (0, _handle["default"])((0, _handle.forProp)('bannerMode', true), function (ev, _ref2) {
+      var uniqueId = _ref2.uniqueId;
+      return _spotlight["default"].set('banner-container' + uniqueId, {
+        navigableFilter: null
+      });
     }),
-    onTransition: function onTransition(ev, _ref3) {
+    onNextClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onNextClick'), function (ev, _ref3) {
       var index = _ref3.index,
-        _onTransition = _ref3.onTransition;
+        onChange = _ref3.onChange,
+        totalIndex = _ref3.totalIndex;
+      handlePageChange(index, onChange, totalIndex);
+    }),
+    onPrevClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onPrevClick'), function (ev, _ref4) {
+      var index = _ref4.index,
+        onChange = _ref4.onChange;
+      handlePageChange(index, onChange);
+    }),
+    onPointerOver: (0, _handle["default"])((0, _handle.forProp)('bannerMode', true), function (ev, _ref5) {
+      var uniqueId = _ref5.uniqueId;
+      return _spotlight["default"].set('banner-container' + uniqueId, {
+        navigableFilter: null
+      });
+    }),
+    onStepsClick: (0, _handle["default"])((0, _handle.forProp)('bannerMode', true), (0, _handle.forwardCustomWithPrevent)('onStepsClick'), function (ev, _ref6) {
+      var onChange = _ref6.onChange;
+      var node = ev.target;
+      var index = parseInt(node.getAttribute('data-index'));
+      if (node.children.length) return;
+      onChange({
+        type: 'onChange',
+        index: index
+      });
+    }),
+    onTransition: function onTransition(ev, _ref7) {
+      var index = _ref7.index,
+        _onTransition = _ref7.onTransition,
+        uniqueId = _ref7.uniqueId;
+      _spotlight["default"].focus('banner-view-manager' + uniqueId);
+      _spotlight["default"].resume();
       if (_onTransition) {
         _onTransition({
           type: 'onTransition',
@@ -209,9 +277,10 @@ var PageViewsBase = (0, _kind["default"])({
         });
       }
     },
-    onWillTransition: function onWillTransition(ev, _ref4) {
-      var index = _ref4.index,
-        _onWillTransition = _ref4.onWillTransition;
+    onWillTransition: function onWillTransition(ev, _ref8) {
+      var index = _ref8.index,
+        _onWillTransition = _ref8.onWillTransition;
+      _spotlight["default"].pause();
       if (_onWillTransition) {
         _onWillTransition({
           type: 'onWillTransition',
@@ -221,20 +290,20 @@ var PageViewsBase = (0, _kind["default"])({
     }
   },
   computed: {
-    className: function className(_ref5) {
-      var fullContents = _ref5.fullContents,
-        pageIndicatorPosition = _ref5.pageIndicatorPosition,
-        pageIndicatorType = _ref5.pageIndicatorType,
-        styler = _ref5.styler;
+    className: function className(_ref9) {
+      var fullContents = _ref9.fullContents,
+        pageIndicatorPosition = _ref9.pageIndicatorPosition,
+        pageIndicatorType = _ref9.pageIndicatorType,
+        styler = _ref9.styler;
       return styler.append({
         fullContents: fullContents
       }, "indicator".concat((0, _util.cap)(pageIndicatorPosition)), pageIndicatorType);
     },
-    renderNextButton: function renderNextButton(_ref6) {
-      var css = _ref6.css,
-        onNextClick = _ref6.onNextClick,
-        index = _ref6.index,
-        totalIndex = _ref6.totalIndex;
+    renderNextButton: function renderNextButton(_ref0) {
+      var css = _ref0.css,
+        onNextClick = _ref0.onNextClick,
+        index = _ref0.index,
+        totalIndex = _ref0.totalIndex;
       var isNextButtonVisible = index < totalIndex - 1;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
         className: css.navButtonCell,
@@ -249,10 +318,10 @@ var PageViewsBase = (0, _kind["default"])({
         }) : null
       });
     },
-    renderPrevButton: function renderPrevButton(_ref7) {
-      var css = _ref7.css,
-        index = _ref7.index,
-        onPrevClick = _ref7.onPrevClick;
+    renderPrevButton: function renderPrevButton(_ref1) {
+      var css = _ref1.css,
+        index = _ref1.index,
+        onPrevClick = _ref1.onPrevClick;
       var isPrevButtonVisible = index !== 0;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
         className: css.navButtonCell,
@@ -267,16 +336,21 @@ var PageViewsBase = (0, _kind["default"])({
         }) : null
       });
     },
-    renderViewManager: function renderViewManager(_ref8) {
-      var arranger = _ref8.arranger,
-        css = _ref8.css,
-        index = _ref8.index,
-        noAnimation = _ref8.noAnimation,
-        onTransition = _ref8.onTransition,
-        onWillTransition = _ref8.onWillTransition,
-        reverseTransition = _ref8.reverseTransition,
-        children = _ref8.children;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+    renderViewManager: function renderViewManager(_ref10) {
+      var arranger = _ref10.arranger,
+        bannerMode = _ref10.bannerMode,
+        css = _ref10.css,
+        index = _ref10.index,
+        noAnimation = _ref10.noAnimation,
+        onTransition = _ref10.onTransition,
+        onWillTransition = _ref10.onWillTransition,
+        reverseTransition = _ref10.reverseTransition,
+        uniqueId = _ref10.uniqueId,
+        children = _ref10.children;
+      var CellComponent = bannerMode ? SpottableCell : _Layout.Cell;
+      var props = {};
+      if (bannerMode) props.spotlightId = "banner-view-manager" + uniqueId;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(CellComponent, _objectSpread(_objectSpread({
         arranger: arranger,
         className: css.viewManager,
         component: _ViewManager["default"],
@@ -285,28 +359,31 @@ var PageViewsBase = (0, _kind["default"])({
         noAnimation: typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION || noAnimation,
         onTransition: onTransition,
         onWillTransition: onWillTransition,
-        reverseTransition: reverseTransition,
+        reverseTransition: reverseTransition
+      }, props), {}, {
         children: children
-      });
+      }));
     },
-    stepHintAriaLabel: function stepHintAriaLabel(_ref9) {
+    stepHintAriaLabel: function stepHintAriaLabel(_ref11) {
       var _children$index;
-      var children = _ref9.children,
-        index = _ref9.index,
-        totalIndex = _ref9.totalIndex;
+      var children = _ref11.children,
+        index = _ref11.index,
+        totalIndex = _ref11.totalIndex;
       var pageHint = new _IString["default"]((0, _$L["default"])('Page {current} out of {total}')).format({
         current: index + 1,
         total: totalIndex
       });
       return "".concat(pageHint, " ").concat((children === null || children === void 0 || (_children$index = children[index]) === null || _children$index === void 0 ? void 0 : _children$index.props['aria-label']) || '');
     },
-    steps: function steps(_ref0) {
-      var css = _ref0.css,
-        index = _ref0.index,
-        onNextClick = _ref0.onNextClick,
-        onPrevClick = _ref0.onPrevClick,
-        pageIndicatorType = _ref0.pageIndicatorType,
-        totalIndex = _ref0.totalIndex;
+    steps: function steps(_ref12) {
+      var bannerMode = _ref12.bannerMode,
+        css = _ref12.css,
+        index = _ref12.index,
+        onNextClick = _ref12.onNextClick,
+        onPrevClick = _ref12.onPrevClick,
+        onStepsClick = _ref12.onStepsClick,
+        pageIndicatorType = _ref12.pageIndicatorType,
+        totalIndex = _ref12.totalIndex;
       var isPrevButtonVisible = index !== 0;
       var isNextButtonVisible = index < totalIndex - 1;
       var isStepVisible = totalIndex !== 1;
@@ -317,6 +394,7 @@ var PageViewsBase = (0, _kind["default"])({
             css: css,
             current: index + 1,
             highlightCurrentOnly: true,
+            onClick: onStepsClick,
             total: totalIndex
           })
         }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
@@ -325,6 +403,7 @@ var PageViewsBase = (0, _kind["default"])({
             className: css.navButtonCell,
             shrink: true,
             children: isPrevButtonVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              spotlightDisabled: bannerMode,
               "aria-label": (0, _$L["default"])('Previous'),
               className: css.navButton,
               icon: "arrowlargeleft",
@@ -344,6 +423,7 @@ var PageViewsBase = (0, _kind["default"])({
             className: css.navButtonCell,
             shrink: true,
             children: isNextButtonVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+              spotlightDisabled: bannerMode,
               "aria-label": (0, _$L["default"])('Next'),
               className: css.navButton,
               icon: "arrowlargeright",
@@ -356,37 +436,42 @@ var PageViewsBase = (0, _kind["default"])({
       });
     }
   },
-  render: function render(_ref1) {
-    var css = _ref1.css,
-      componentRef = _ref1.componentRef,
-      fullContents = _ref1.fullContents,
-      index = _ref1.index,
-      pageIndicatorPosition = _ref1.pageIndicatorPosition,
-      pageIndicatorType = _ref1.pageIndicatorType,
-      renderNextButton = _ref1.renderNextButton,
-      renderPrevButton = _ref1.renderPrevButton,
-      renderViewManager = _ref1.renderViewManager,
-      stepHintAriaLabel = _ref1.stepHintAriaLabel,
-      steps = _ref1.steps,
-      rest = _objectWithoutProperties(_ref1, _excluded);
+  render: function render(_ref13) {
+    var css = _ref13.css,
+      componentRef = _ref13.componentRef,
+      fullContents = _ref13.fullContents,
+      index = _ref13.index,
+      pageIndicatorPosition = _ref13.pageIndicatorPosition,
+      pageIndicatorType = _ref13.pageIndicatorType,
+      renderNextButton = _ref13.renderNextButton,
+      renderPrevButton = _ref13.renderPrevButton,
+      renderViewManager = _ref13.renderViewManager,
+      stepHintAriaLabel = _ref13.stepHintAriaLabel,
+      steps = _ref13.steps,
+      uniqueId = _ref13.uniqueId,
+      rest = _objectWithoutProperties(_ref13, _excluded);
     delete rest.arranger;
+    delete rest.bannerMode;
     delete rest.children;
     delete rest.noAnimation;
-    delete rest.onTransition;
     delete rest.onNextClick;
+    delete rest.onStepsClick;
     delete rest.onPrevClick;
+    delete rest.onTransition;
     delete rest.onWillTransition;
     delete rest.reverseTransition;
+    delete rest.rtl;
     delete rest.totalIndex;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
       role: "region",
       "aria-labelledby": "pageViews_index_".concat(index),
       ref: componentRef
     }, rest), {}, {
-      children: [!fullContents && pageIndicatorPosition === 'top' ? steps : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Column, {
+      children: [!fullContents && pageIndicatorPosition === 'top' ? steps : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(SpottableColumn, {
         "aria-label": stepHintAriaLabel,
         className: css.contentsArea,
         id: "pageViews_index_".concat(index),
+        spotlightId: "banner-container" + uniqueId,
         children: fullContents ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Row, {
             className: css.horizontalLayout,

package/PageViews/PageViewsRouter.js

@@ -7,6 +7,7 @@ exports.PageViewsRouter = PageViewsRouter;
 exports["default"] = void 0;
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _useChainRefs = _interopRequireDefault(require("@enact/core/useChainRefs"));
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _Panels = require("../internal/Panels");
@@ -53,6 +54,7 @@ function PageViewsRouter(Wrapped) {
       onWillTransition = _ref.onWillTransition,
       rtl = _ref.rtl,
       rest = _objectWithoutProperties(_ref, _excluded);
+    var uniqueId = (0, _react.useId)();
     var totalIndex = _react.Children.count(children);
     var _useToggleRole = (0, _Panels.useToggleRole)(),
       a11yRef = _useToggleRole.ref,
@@ -74,6 +76,11 @@ function PageViewsRouter(Wrapped) {
       focusOnWillTransition(ev);
       a11yOnWillTransition(ev);
     }, [a11yOnWillTransition, focusOnWillTransition]);
+    (0, _react.useEffect)(function () {
+      return function () {
+        _spotlight["default"].resume();
+      };
+    }, []);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread(_objectSpread({}, rest), transition), {}, {
       componentRef: ref,
       "data-spotlight-id": spotlightId,
@@ -81,6 +88,8 @@ function PageViewsRouter(Wrapped) {
       totalIndex: totalIndex,
       onWillTransition: handleWillTransition,
       reverseTransition: reverseTransition,
+      rtl: rtl,
+      uniqueId: uniqueId,
       children: children
     }));
   };

package/PageViews/tests/PageViews-specs.js

@@ -189,4 +189,88 @@ describe('PageViews Specs', function () {
       expect(actual).toMatchObject(expected);
     });
   }));
+  test('should render accept `fullContents` prop', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      fullContents: true,
+      pageIndicatorType: "number",
+      index: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {
+        children: "I got contents"
+      })]
+    }));
+    var panel = _react.screen.getByRole('region');
+    var expected = 'fullContents';
+    expect(panel).toHaveClass(expected);
+  });
+  test('should navigate on Page Indicator click when `bannerMode` is true', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var handleStepsClick = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      bannerMode: true,
+      index: 2,
+      onChange: handleChange,
+      onStepsClick: handleStepsClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    var indicatorDot = _react.screen.getByRole('list').children[1];
+    var expected = {
+      type: 'onStepsClick'
+    };
+    yield user.click(indicatorDot);
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 1,
+        type: 'onChange'
+      });
+    });
+    yield (0, _react.waitFor)(function () {
+      var actual = handleStepsClick.mock.calls.length && handleStepsClick.mock.calls[0][0];
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should navigate via 5-way left key when `bannerMode` is true', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      bannerMode: true,
+      index: 1,
+      onChange: handleChange,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    var pageViews = _react.screen.getByRole('region').children[0];
+    yield _react.fireEvent.keyDown(pageViews, {
+      which: 37,
+      keyCode: 37,
+      code: 37
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 0,
+        type: 'onChange'
+      });
+    });
+  }));
+  test('should navigate via 5-way right key when `bannerMode` is true', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      bannerMode: true,
+      index: 1,
+      onChange: handleChange,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    var pageViews = _react.screen.getByRole('region').children[0];
+    yield _react.fireEvent.keyDown(pageViews, {
+      which: 39,
+      keyCode: 39,
+      code: 39
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 2,
+        type: 'onChange'
+      });
+    });
+  }));
 });