@enact/limestone 1.3.0 → 1.10.0

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", "renderFooterButtons", "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,14 @@ var PageViewsBase = (0, _kind["default"])({
      * @private
      */
     arranger: _ViewManager.shape,
+    /**
+     * When `true`, disables Spotlight outside the container and enables 5-way navigation between panels.
+     * Footer buttons are hidden when bannerMode is true.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    bannerMode: _propTypes2["default"].bool,
     /**
      * {@link limestone/PageViews.Page|Page} to be rendered.
      *
@@ -84,6 +116,7 @@ var PageViewsBase = (0, _kind["default"])({
      *
      * * `pageViews` - The root component class
      * * `contentsArea` - The contentsArea component class
+     * * `footerButtons` - The footerButtons component class
      * * `navButton` - The navButton component class
      * * `navButtonContainer` - Applied to the container containing navButtons in fullContents mode
      * * `stepsRow` - The step component class
@@ -92,6 +125,14 @@ var PageViewsBase = (0, _kind["default"])({
      * @public
      */
     css: _propTypes2["default"].object,
+    /**
+     * The label of the footer Close button.
+     *
+     * @type {String}
+     * @default 'Close'
+     * @public
+     */
+    footerCloseLabel: _propTypes2["default"].string,
     /**
      * When `true`, maximize its contents area.
      *
@@ -115,6 +156,13 @@ var PageViewsBase = (0, _kind["default"])({
      * @public
      */
     noAnimation: _propTypes2["default"].bool,
+    /**
+     * Called when the footer Close button is clicked.
+     *
+     * @type {Function}
+     * @public
+     */
+    onFooterCloseClick: _propTypes2["default"].func,
     /**
      * Called when a transition completes.
      *
@@ -157,18 +205,35 @@ var PageViewsBase = (0, _kind["default"])({
      * @private
      */
     reverseTransition: _propTypes2["default"].bool,
+    /**
+     * When `true`, renders footer Close and Next buttons below the page content.
+     * Footer buttons are hidden when `bannerMode` is true.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    showFooterButtons: _propTypes2["default"].bool,
     /**
      * The total number of pages.
      *
      * @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,
     pageIndicatorPosition: 'bottom',
-    pageIndicatorType: 'dot'
+    pageIndicatorType: 'dot',
+    showFooterButtons: false
   },
   styles: {
     css: _PageViewsModule["default"],
@@ -176,32 +241,68 @@ 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) {
+    onFooterNextClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onFooterNextClick'), function (ev, _ref3) {
       var index = _ref3.index,
-        _onTransition = _ref3.onTransition;
+        onChange = _ref3.onChange,
+        totalIndex = _ref3.totalIndex;
+      handlePageChange(index, onChange, totalIndex);
+    }),
+    onNextClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onNextClick'), function (ev, _ref4) {
+      var index = _ref4.index,
+        onChange = _ref4.onChange,
+        totalIndex = _ref4.totalIndex;
+      handlePageChange(index, onChange, totalIndex);
+    }),
+    onPrevClick: (0, _handle["default"])((0, _handle.forwardCustomWithPrevent)('onPrevClick'), function (ev, _ref5) {
+      var index = _ref5.index,
+        onChange = _ref5.onChange;
+      handlePageChange(index, onChange);
+    }),
+    onPointerOver: (0, _handle["default"])((0, _handle.forProp)('bannerMode', true), function (ev, _ref6) {
+      var uniqueId = _ref6.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, _ref7) {
+      var onChange = _ref7.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, _ref8) {
+      var index = _ref8.index,
+        _onTransition = _ref8.onTransition,
+        uniqueId = _ref8.uniqueId;
+      _spotlight["default"].focus('banner-view-manager' + uniqueId);
+      _spotlight["default"].resume();
       if (_onTransition) {
         _onTransition({
           type: 'onTransition',
@@ -209,9 +310,10 @@ var PageViewsBase = (0, _kind["default"])({
         });
       }
     },
-    onWillTransition: function onWillTransition(ev, _ref4) {
-      var index = _ref4.index,
-        _onWillTransition = _ref4.onWillTransition;
+    onWillTransition: function onWillTransition(ev, _ref9) {
+      var index = _ref9.index,
+        _onWillTransition = _ref9.onWillTransition;
+      _spotlight["default"].pause();
       if (_onWillTransition) {
         _onWillTransition({
           type: 'onWillTransition',
@@ -221,20 +323,47 @@ 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(_ref0) {
+      var fullContents = _ref0.fullContents,
+        pageIndicatorPosition = _ref0.pageIndicatorPosition,
+        pageIndicatorType = _ref0.pageIndicatorType,
+        styler = _ref0.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;
+    renderFooterButtons: function renderFooterButtons(_ref1) {
+      var bannerMode = _ref1.bannerMode,
+        css = _ref1.css,
+        footerCloseLabel = _ref1.footerCloseLabel,
+        index = _ref1.index,
+        onFooterCloseClick = _ref1.onFooterCloseClick,
+        onFooterNextClick = _ref1.onFooterNextClick,
+        showFooterButtons = _ref1.showFooterButtons,
+        totalIndex = _ref1.totalIndex,
+        uniqueId = _ref1.uniqueId;
+      if (!showFooterButtons || bannerMode) return null;
+      var isLastPage = index >= totalIndex - 1;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Row, {
+        className: css.footerButtons,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          className: isLastPage ? _SpotlightContainerDecorator.spotlightDefaultClass : null,
+          spotlightId: "PageViews-footer-close" + uniqueId,
+          onClick: onFooterCloseClick,
+          children: footerCloseLabel || (0, _$L["default"])('Close')
+        }), !isLastPage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+          className: _SpotlightContainerDecorator.spotlightDefaultClass,
+          spotlightId: "PageViews-footer-next" + uniqueId,
+          onClick: onFooterNextClick,
+          children: (0, _$L["default"])('Next')
+        }) : null]
+      });
+    },
+    renderNextButton: function renderNextButton(_ref10) {
+      var css = _ref10.css,
+        onNextClick = _ref10.onNextClick,
+        index = _ref10.index,
+        totalIndex = _ref10.totalIndex;
       var isNextButtonVisible = index < totalIndex - 1;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
         className: css.navButtonCell,
@@ -249,10 +378,10 @@ var PageViewsBase = (0, _kind["default"])({
         }) : null
       });
     },
-    renderPrevButton: function renderPrevButton(_ref7) {
-      var css = _ref7.css,
-        index = _ref7.index,
-        onPrevClick = _ref7.onPrevClick;
+    renderPrevButton: function renderPrevButton(_ref11) {
+      var css = _ref11.css,
+        index = _ref11.index,
+        onPrevClick = _ref11.onPrevClick;
       var isPrevButtonVisible = index !== 0;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
         className: css.navButtonCell,
@@ -267,16 +396,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(_ref12) {
+      var arranger = _ref12.arranger,
+        bannerMode = _ref12.bannerMode,
+        css = _ref12.css,
+        index = _ref12.index,
+        noAnimation = _ref12.noAnimation,
+        onTransition = _ref12.onTransition,
+        onWillTransition = _ref12.onWillTransition,
+        reverseTransition = _ref12.reverseTransition,
+        uniqueId = _ref12.uniqueId,
+        children = _ref12.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 +419,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(_ref13) {
       var _children$index;
-      var children = _ref9.children,
-        index = _ref9.index,
-        totalIndex = _ref9.totalIndex;
+      var children = _ref13.children,
+        index = _ref13.index,
+        totalIndex = _ref13.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(_ref14) {
+      var bannerMode = _ref14.bannerMode,
+        css = _ref14.css,
+        index = _ref14.index,
+        onNextClick = _ref14.onNextClick,
+        onPrevClick = _ref14.onPrevClick,
+        onStepsClick = _ref14.onStepsClick,
+        pageIndicatorType = _ref14.pageIndicatorType,
+        totalIndex = _ref14.totalIndex;
       var isPrevButtonVisible = index !== 0;
       var isNextButtonVisible = index < totalIndex - 1;
       var isStepVisible = totalIndex !== 1;
@@ -317,6 +454,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 +463,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 +483,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 +496,47 @@ 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(_ref15) {
+    var css = _ref15.css,
+      componentRef = _ref15.componentRef,
+      fullContents = _ref15.fullContents,
+      index = _ref15.index,
+      pageIndicatorPosition = _ref15.pageIndicatorPosition,
+      pageIndicatorType = _ref15.pageIndicatorType,
+      renderFooterButtons = _ref15.renderFooterButtons,
+      renderNextButton = _ref15.renderNextButton,
+      renderPrevButton = _ref15.renderPrevButton,
+      renderViewManager = _ref15.renderViewManager,
+      stepHintAriaLabel = _ref15.stepHintAriaLabel,
+      steps = _ref15.steps,
+      uniqueId = _ref15.uniqueId,
+      rest = _objectWithoutProperties(_ref15, _excluded);
     delete rest.arranger;
+    delete rest.bannerMode;
     delete rest.children;
+    delete rest.footerCloseLabel;
     delete rest.noAnimation;
-    delete rest.onTransition;
+    delete rest.onFooterCloseClick;
+    delete rest.onFooterNextClick;
     delete rest.onNextClick;
+    delete rest.onStepsClick;
     delete rest.onPrevClick;
+    delete rest.onTransition;
     delete rest.onWillTransition;
     delete rest.reverseTransition;
+    delete rest.rtl;
+    delete rest.showFooterButtons;
     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,
@@ -399,7 +549,7 @@ var PageViewsBase = (0, _kind["default"])({
           className: css.horizontalLayout,
           children: [pageIndicatorType === 'dot' ? renderPrevButton : null, renderViewManager, pageIndicatorType === 'dot' ? renderNextButton : null]
         })
-      }), !fullContents && pageIndicatorPosition === 'bottom' ? steps : null]
+      }), !fullContents && pageIndicatorPosition === 'bottom' ? steps : null, renderFooterButtons]
     }));
   }
 });

package/PageViews/PageViews.module.css

@@ -100,6 +100,9 @@
 .pageViews .horizontalLayout {
   height: 100%;
 }
+.pageViews .footerButtons {
+  justify-content: center;
+}
 .pageViews:global(.neutral) .viewManager {
   background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
 }