@enact/limestone 1.9.3 → 1.10.1

package/PageViews/PageViewsRouter.js

@@ -7,12 +7,13 @@ exports.PageViewsRouter = PageViewsRouter;
 exports["default"] = void 0;
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _useChainRefs = _interopRequireDefault(require("@enact/core/useChainRefs"));
+var _util = require("@enact/core/util");
 var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _Panels = require("../internal/Panels");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["autoFocus", "children", "componentRef", "data-spotlight-id", "index", "onTransition", "onWillTransition", "rtl"],
+var _excluded = ["autoFocus", "bannerMode", "children", "componentRef", "data-spotlight-id", "index", "onFooterCloseClick", "onFooterNextClick", "onNextClick", "onPrevClick", "onTransition", "onWillTransition", "rtl", "showFooterButtons"],
   _excluded2 = ["onWillTransition"]; // single-index ViewManagers need some help knowing when the transition direction needs to change
 // because the index is always 0 from its perspective.
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -24,36 +25,44 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var 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 useReverseTransition(index, rtl) {
-  var prevIndex = (0, _react.useRef)(index);
+  var prevIndex = (0, _util.usePrevious)(index);
   var reverse = false;
-  if (prevIndex.current !== index) {
-    reverse = rtl ? index > prevIndex.current : index < prevIndex.current;
+  if (prevIndex !== index) {
+    reverse = rtl ? index > prevIndex : index < prevIndex;
   }
-  prevIndex.current = index;
   return {
     reverseTransition: reverse
   };
 }
 
 /**
- * PageViewsRouter passes children, index and transition handlers
+ * PageViewsRouter passes children, index and transition handlers.
  *
  * @class PageViewsRouter
  * @memberof limestone/PageViews
  * @private
  */
 function PageViewsRouter(Wrapped) {
-  var PageViewsProvider = function PageViewsProvider(_ref) {
-    var autoFocus = _ref.autoFocus,
-      children = _ref.children,
-      componentRef = _ref.componentRef,
-      spotlightId = _ref['data-spotlight-id'],
-      _ref$index = _ref.index,
-      index = _ref$index === void 0 ? 0 : _ref$index,
-      onTransition = _ref.onTransition,
-      onWillTransition = _ref.onWillTransition,
-      rtl = _ref.rtl,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  var _PageViewsProvider = function PageViewsProvider(props) {
+    var pageViewsProviderProps = (0, _util.setDefaultProps)(props, {
+      index: 0
+    });
+    (0, _util.checkPropTypes)(_PageViewsProvider, pageViewsProviderProps);
+    var autoFocus = pageViewsProviderProps.autoFocus,
+      bannerMode = pageViewsProviderProps.bannerMode,
+      children = pageViewsProviderProps.children,
+      componentRef = pageViewsProviderProps.componentRef,
+      spotlightId = pageViewsProviderProps['data-spotlight-id'],
+      index = pageViewsProviderProps.index,
+      onFooterCloseClick = pageViewsProviderProps.onFooterCloseClick,
+      onFooterNextClick = pageViewsProviderProps.onFooterNextClick,
+      onNextClick = pageViewsProviderProps.onNextClick,
+      onPrevClick = pageViewsProviderProps.onPrevClick,
+      onTransition = pageViewsProviderProps.onTransition,
+      onWillTransition = pageViewsProviderProps.onWillTransition,
+      rtl = pageViewsProviderProps.rtl,
+      showFooterButtons = pageViewsProviderProps.showFooterButtons,
+      rest = _objectWithoutProperties(pageViewsProviderProps, _excluded);
     var uniqueId = (0, _react.useId)();
     var totalIndex = _react.Children.count(children);
     var _useToggleRole = (0, _Panels.useToggleRole)(),
@@ -65,8 +74,42 @@ function PageViewsRouter(Wrapped) {
     var ref = (0, _useChainRefs["default"])(autoFocusRef, a11yRef, componentRef);
     var _useReverseTransition = useReverseTransition(index, rtl),
       reverseTransition = _useReverseTransition.reverseTransition;
+    var navigationSource = (0, _react.useRef)(null); // 'internal-next' | 'internal-prev' | 'footer' | null
+
+    (0, _react.useEffect)(function () {
+      if (showFooterButtons && !bannerMode) {
+        _spotlight["default"].focus(spotlightId, {
+          enterTo: 'default-element'
+        });
+      }
+    }, [bannerMode, showFooterButtons, spotlightId]);
+    var handleNextClick = (0, _react.useCallback)(function (ev) {
+      navigationSource.current = 'internal-next';
+      onNextClick === null || onNextClick === void 0 || onNextClick(ev);
+    }, [onNextClick]);
+    var handlePrevClick = (0, _react.useCallback)(function (ev) {
+      navigationSource.current = 'internal-prev';
+      onPrevClick === null || onPrevClick === void 0 || onPrevClick(ev);
+    }, [onPrevClick]);
+    var handleFooterNextClick = (0, _react.useCallback)(function (ev) {
+      navigationSource.current = 'footer';
+      onFooterNextClick === null || onFooterNextClick === void 0 || onFooterNextClick(ev);
+    }, [onFooterNextClick]);
+    var handleTransition = (0, _react.useCallback)(function (ev) {
+      if (showFooterButtons && !bannerMode) {
+        var source = navigationSource.current;
+        var newIndex = ev.index;
+        if (source === 'footer' || source === 'internal-next' && newIndex === totalIndex - 1 || source === 'internal-prev' && newIndex === 0) {
+          _spotlight["default"].focus(spotlightId, {
+            enterTo: 'default-element'
+          });
+        }
+      }
+      navigationSource.current = null;
+      onTransition === null || onTransition === void 0 || onTransition(ev);
+    }, [bannerMode, onTransition, showFooterButtons, spotlightId, totalIndex]);
     var _useFocusOnTransition = (0, _Panels.useFocusOnTransition)({
-        onTransition: onTransition,
+        onTransition: handleTransition,
         onWillTransition: onWillTransition,
         spotlightId: spotlightId
       }),
@@ -82,18 +125,24 @@ function PageViewsRouter(Wrapped) {
       };
     }, []);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread(_objectSpread({}, rest), transition), {}, {
+      bannerMode: bannerMode,
       componentRef: ref,
       "data-spotlight-id": spotlightId,
       index: index,
-      totalIndex: totalIndex,
+      onFooterCloseClick: onFooterCloseClick,
+      onFooterNextClick: handleFooterNextClick,
+      onNextClick: handleNextClick,
+      onPrevClick: handlePrevClick,
       onWillTransition: handleWillTransition,
       reverseTransition: reverseTransition,
       rtl: rtl,
+      showFooterButtons: showFooterButtons,
+      totalIndex: totalIndex,
       uniqueId: uniqueId,
       children: children
     }));
   };
-  PageViewsProvider.propTypes = /** @lends limestone/PageViews.PageViewsRouter.prototype */{
+  _PageViewsProvider.propTypes = /** @lends limestone/PageViews.PageViewsRouter.prototype */{
     /**
      * Sets the strategy used to automatically focus an element within the PageViews upon render.
      * When set to 'none', focus is not set only on the first render.
@@ -111,19 +160,19 @@ function PageViewsRouter(Wrapped) {
      */
     componentRef: _propTypes["default"].ref,
     /**
-    * The spotlight id for the panel.
-    *
-    * @type {String}
-    * @private
-    */
+     * The spotlight id for the panel.
+     *
+     * @type {String}
+     * @private
+     */
     'data-spotlight-id': _propTypes2["default"].string,
     /**
-    * The currently selected step.
-    *
-    * @type {Number}
-    * @default 0
-    * @private
-    */
+     * The currently selected step.
+     *
+     * @type {Number}
+     * @default 0
+     * @private
+     */
     index: _propTypes2["default"].number,
     /**
      * Disables panel transitions.
@@ -133,18 +182,18 @@ function PageViewsRouter(Wrapped) {
      */
     noAnimation: _propTypes2["default"].bool,
     /**
-    * Called when a transition completes.
-    *
-    * @type {Function}
-    * @private
-    */
+     * Called when a transition completes.
+     *
+     * @type {Function}
+     * @private
+     */
     onTransition: _propTypes2["default"].func,
     /**
-    * Called when a transition begins.
-    *
-    * @type {Function}
-    * @private
-    */
+     * Called when a transition begins.
+     *
+     * @type {Function}
+     * @private
+     */
     onWillTransition: _propTypes2["default"].func,
     /**
      * Used to determine the transition direction.
@@ -154,6 +203,6 @@ function PageViewsRouter(Wrapped) {
      */
     rtl: _propTypes2["default"].bool
   };
-  return PageViewsProvider;
+  return _PageViewsProvider;
 }
 var _default = exports["default"] = PageViewsRouter;

package/PageViews/tests/PageViews-specs.js

@@ -273,4 +273,91 @@ describe('PageViews Specs', function () {
       });
     });
   }));
+  test('should render footer Close and Next buttons when `showFooterButtons` is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      index: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    expect(_react.screen.getByText('Close')).toBeInTheDocument();
+    expect(_react.screen.getByText('Next')).toBeInTheDocument();
+  });
+  test('should not render footer Next button on the last page', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      index: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    expect(_react.screen.getByText('Close')).toBeInTheDocument();
+    expect(_react.screen.queryByText('Next')).toBeNull();
+  });
+  test('should not render footer buttons when `bannerMode` is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      bannerMode: true,
+      index: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    expect(_react.screen.queryByText('Close')).toBeNull();
+  });
+  test('should fire `onFooterNextClick`, `onChange`, and `onTransition` when footer Next button is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var handleFooterNextClick = jest.fn();
+    var spy = jest.fn();
+    var user = _userEvent["default"].setup();
+    var index = 0;
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+        showFooterButtons: true,
+        index: index,
+        onChange: handleChange,
+        onFooterNextClick: handleFooterNextClick,
+        onTransition: spy,
+        noAnimation: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+      })),
+      rerender = _render3.rerender;
+    yield user.click(_react.screen.getByText('Next'));
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 1,
+        type: 'onChange'
+      });
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(handleFooterNextClick).toHaveBeenCalled();
+    });
+    spy.mockClear();
+    index++;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      index: index,
+      onChange: handleChange,
+      onFooterNextClick: handleFooterNextClick,
+      onTransition: spy,
+      noAnimation: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    var expected = {
+      index: index,
+      type: 'onTransition'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should fire `onFooterCloseClick` when footer Close button is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleFooterCloseClick = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.PageViews, {
+      showFooterButtons: true,
+      index: 0,
+      onFooterCloseClick: handleFooterCloseClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Page, {})]
+    }));
+    yield user.click(_react.screen.getByText('Close'));
+    yield (0, _react.waitFor)(function () {
+      expect(handleFooterCloseClick).toHaveBeenCalled();
+    });
+  }));
 });

package/Panels/Header.js

@@ -7,7 +7,8 @@ exports["default"] = exports.HeaderBase = exports.Header = void 0;
 var _handle = require("@enact/core/handle");
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
-var _util = require("@enact/i18n/util");
+var _util = require("@enact/core/util");
+var _util2 = require("@enact/i18n/util");
 var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
 var _Layout = require("@enact/ui/Layout");
 var _resolution = require("@enact/ui/resolution");
@@ -20,7 +21,7 @@ var _Button = _interopRequireDefault(require("../Button"));
 var _Heading = _interopRequireDefault(require("../Heading"));
 var _$L = _interopRequireDefault(require("../internal/$L"));
 var _Panels = require("../internal/Panels");
-var _util2 = require("../internal/Panels/util");
+var _util3 = require("../internal/Panels/util");
 var _PopupTabLayoutStateContext = require("../PopupTabLayout/PopupTabLayoutStateContext");
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _HeaderModule = _interopRequireDefault(require("./Header.module.css"));
@@ -375,7 +376,7 @@ var HeaderBase = exports.HeaderBase = (0, _kind["default"])({
         title = _ref2.title,
         titleId = _ref2.titleId,
         type = _ref2.type;
-      var direction = (0, _util.isRtlText)(title) || (0, _util.isRtlText)(subtitle) ? 'rtl' : 'ltr';
+      var direction = (0, _util2.isRtlText)(title) || (0, _util2.isRtlText)(subtitle) ? 'rtl' : 'ltr';
       var titleHeading = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading["default"], _objectSpread(_objectSpread({}, centered ? {
         slotSize: slotSize
       } : {}), {}, {
@@ -530,7 +531,8 @@ var ContextAsDefaultsHeader = function ContextAsDefaultsHeader(Wrapped) {
   // eslint-disable-next-line no-shadow
   function ContextAsDefaultsHeader(props) {
     var _ref4;
-    var _useContextAsDefaults = (0, _util2.useContextAsDefaults)(props),
+    (0, _util.checkPropTypes)(ContextAsDefaultsHeader, props);
+    var _useContextAsDefaults = (0, _util3.useContextAsDefaults)(props),
       contextProps = _useContextAsDefaults.contextProps,
       provideContextAsDefaults = _useContextAsDefaults.provideContextAsDefaults;
     var _use = (0, _react.use)(_Panels.PanelsStateContext),

package/Panels/Header.module.css

@@ -17,25 +17,6 @@
 .header .titlesRow .back {
   margin-inline-start: 0;
 }
-.header .titlesRow .back:global(.largeText) {
-  font-family: "Limestone";
-  font-size: var(--primitive-font-size-60);
-  font-style: normal;
-  font-weight: var(--primitive-font-weight-semibold);
-  font-kerning: normal;
-  height: 2.75rem;
-  line-height: 2.5rem;
-  min-width: 2.75rem;
-}
-:global(.enact-locale-non-latin) .header .titlesRow .back:global(.largeText) {
-  font-family: "Limestone";
-}
-:global(.enact-locale-non-latin) .header .titlesRow .back:global(.largeText) {
-  font-family: "Limestone";
-  font-size: var(--primitive-font-size-54);
-  font-style: normal;
-  font-weight: var(--primitive-font-weight-bold);
-}
 .header .titlesRow .close {
   margin-inline-end: 0;
 }
@@ -103,6 +84,12 @@
 .header.centered:not(.isPopupHeader) .slotBelow {
   text-align: center;
 }
+.header.centered:not(.isPopupHeader).mini .title {
+  margin-top: calc(abs(-18px) / 2);
+}
+:global(.enact-orientation-portrait) .header.centered:not(.isPopupHeader).standard .title {
+  margin-top: calc(abs(-18px) / -2);
+}
 .header .title {
   margin: 0;
 }
@@ -127,25 +114,21 @@
   margin: var(--primitive-spacing-18) calc(var(--primitive-spacing-36) * -1) 0 calc(var(--primitive-spacing-36) * -1);
 }
 .header.standard.slotBefore:not(.centered) .slotBefore,
-.header.mini.slotBefore:not(.centered) .slotBefore,
 .header.wizard.slotBefore:not(.centered) .slotBefore {
   margin-left: 0;
   margin-right: var(--primitive-spacing-36);
 }
 :global(.enact-locale-right-to-left) .header.standard.slotBefore:not(.centered) .slotBefore,
-:global(.enact-locale-right-to-left) .header.mini.slotBefore:not(.centered) .slotBefore,
 :global(.enact-locale-right-to-left) .header.wizard.slotBefore:not(.centered) .slotBefore {
   margin-left: var(--primitive-spacing-36);
   margin-right: 0;
 }
 .header.standard.slotAfter:not(.centered) .slotAfter,
-.header.mini.slotAfter:not(.centered) .slotAfter,
 .header.wizard.slotAfter:not(.centered) .slotAfter {
   margin-left: var(--primitive-spacing-36);
   margin-right: 0;
 }
 :global(.enact-locale-right-to-left) .header.standard.slotAfter:not(.centered) .slotAfter,
-:global(.enact-locale-right-to-left) .header.mini.slotAfter:not(.centered) .slotAfter,
 :global(.enact-locale-right-to-left) .header.wizard.slotAfter:not(.centered) .slotAfter {
   margin-left: 0;
   margin-right: var(--primitive-spacing-36);
@@ -185,21 +168,21 @@
 :global(.enact-locale-non-latin) .header.compact .title {
   font-size: 1.875rem;
 }
-.header.compact.slotBefore:not(.centered) .slotBefore {
+.header.compact.slotBefore .slotBefore {
   margin-left: 0;
-  margin-right: var(--primitive-spacing-24);
+  margin-right: var(--primitive-spacing-12);
 }
-:global(.enact-locale-right-to-left) .header.compact.slotBefore:not(.centered) .slotBefore {
-  margin-left: var(--primitive-spacing-24);
+:global(.enact-locale-right-to-left) .header.compact.slotBefore .slotBefore {
+  margin-left: var(--primitive-spacing-12);
   margin-right: 0;
 }
-.header.compact.slotAfter:not(.centered) .slotAfter {
-  margin-left: var(--primitive-spacing-30);
+.header.compact.slotAfter .slotAfter {
+  margin-left: var(--primitive-spacing-12);
   margin-right: 0;
 }
-:global(.enact-locale-right-to-left) .header.compact.slotAfter:not(.centered) .slotAfter {
+:global(.enact-locale-right-to-left) .header.compact.slotAfter .slotAfter {
   margin-left: 0;
-  margin-right: var(--primitive-spacing-30);
+  margin-right: var(--primitive-spacing-12);
 }
 .header.compact.isPopupHeader.slotAfter {
   padding-left: 1.25rem;
@@ -234,6 +217,10 @@
 .header.wizard.centered .subtitle {
   text-align: center;
 }
+:global(.enact-orientation-portrait) .header.wizard.slotBefore .slotBefore,
+:global(.enact-orientation-portrait) .header.wizard.slotAfter .slotAfter {
+  margin-top: NaNrem + -18px) * -1);
+}
 .header.mini {
   margin: 0 0 0.75rem 0;
   padding: 0.86458rem 1.25rem 0.55208rem 1.25rem;
@@ -250,6 +237,25 @@
 :global(.enact-locale-non-latin) .header.mini .title {
   font-size: 1.875rem;
 }
+.header.mini .title:not(.isPopupHeader) {
+  margin-top: calc(abs(-18px) / 2);
+}
+.header.mini.slotBefore .slotBefore {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-12);
+}
+:global(.enact-locale-right-to-left) .header.mini.slotBefore .slotBefore {
+  margin-left: var(--primitive-spacing-12);
+  margin-right: 0;
+}
+.header.mini.slotAfter .slotAfter {
+  margin-left: var(--primitive-spacing-12);
+  margin-right: 0;
+}
+:global(.enact-locale-right-to-left) .header.mini.slotAfter .slotAfter {
+  margin-left: 0;
+  margin-right: var(--primitive-spacing-12);
+}
 .header.mini.withSubtitle:not(.noSubtitle) .titlesRow {
   padding-bottom: 70.2px;
 }

package/Popup/Popup.js

@@ -320,7 +320,8 @@ var popupDefaultProps = {
  * @ui
  * @public
  */
-var Popup = exports.Popup = function Popup(props) {
+var _Popup = exports.Popup = function Popup(props) {
+  (0, _util.checkPropTypes)(_Popup, props);
   var componentProps = (0, _util.setDefaultProps)(props, popupDefaultProps);
   var noAnimation = componentProps.noAnimation,
     noAutoDismiss = componentProps.noAutoDismiss,
@@ -564,8 +565,8 @@ var Popup = exports.Popup = function Popup(props) {
     }))
   });
 };
-Popup.displayName = 'Popup';
-Popup.propTypes = /** @lends limestone/Popup.Popup.prototype */{
+_Popup.displayName = 'Popup';
+_Popup.propTypes = /** @lends limestone/Popup.Popup.prototype */{
   /**
    * Prevents closing the popup via 5-way navigation out of the content.
    *
@@ -689,4 +690,4 @@ Popup.propTypes = /** @lends limestone/Popup.Popup.prototype */{
    */
   spotlightRestrict: _propTypes["default"].oneOf(['self-first', 'self-only'])
 };
-var _default = exports["default"] = Popup;
+var _default = exports["default"] = _Popup;

package/PopupTabLayout/PopupTabLayout.js

@@ -527,9 +527,10 @@ var tabPanelsHandlers = {
  * @ui
  * @public
  */
-var TabPanelsBase = exports.TabPanelsBase = function TabPanelsBase(_ref9) {
-  var rtl = _ref9.rtl,
-    rest = _objectWithoutProperties(_ref9, _excluded2);
+var _TabPanelsBase = exports.TabPanelsBase = function TabPanelsBase(props) {
+  (0, _util.checkPropTypes)(_TabPanelsBase, props);
+  var rtl = props.rtl,
+    rest = _objectWithoutProperties(props, _excluded2);
   var onTransition = (0, _react.use)(_TabLayout.TabLayoutContext);
   var handlers = (0, _useHandlers["default"])(tabPanelsHandlers, _objectSpread({
     rtl: rtl
@@ -542,7 +543,7 @@ var TabPanelsBase = exports.TabPanelsBase = function TabPanelsBase(_ref9) {
     css: _PopupTabLayoutModule["default"]
   }, handlers));
 };
-TabPanelsBase.propTypes = {
+_TabPanelsBase.propTypes = {
   rtl: _propTypes["default"].bool
 };
 
@@ -557,7 +558,7 @@ TabPanelsBase.propTypes = {
  */
 var TabPanels = exports.TabPanels = (0, _I18nDecorator.I18nContextDecorator)({
   rtlProp: 'rtl'
-}, TabPanelsBase);
+}, _TabPanelsBase);
 
 /**
  * Omits the close button.
@@ -585,9 +586,10 @@ var TabPanels = exports.TabPanels = (0, _I18nDecorator.I18nContextDecorator)({
  * @ui
  * @public
  */
-var TabPanel = exports.TabPanel = function TabPanel(_ref0) {
-  var spotlightId = _ref0.spotlightId,
-    rest = _objectWithoutProperties(_ref0, _excluded3);
+var _TabPanel = exports.TabPanel = function TabPanel(props) {
+  (0, _util.checkPropTypes)(_TabPanel, props);
+  var spotlightId = props.spotlightId,
+    rest = _objectWithoutProperties(props, _excluded3);
   (0, _react.useEffect)(function () {
     _spotlight["default"].set(spotlightId, {
       partition: true
@@ -599,7 +601,7 @@ var TabPanel = exports.TabPanel = function TabPanel(_ref0) {
     spotlightId: spotlightId
   }));
 };
-TabPanel.propTypes = {
+_TabPanel.propTypes = {
   /**
    * The container id for {@link spotlight/SpotlightContainerDecorator/#SpotlightContainerDecorator.spotlightId|Spotlight container}.
    *

package/PopupTabLayout/PopupTabLayout.module.css

@@ -64,6 +64,9 @@
 .popupTabLayout:global(.neutral) .tabGroup .tab .icon {
   --icon-size: 2rem;
 }
+.popupTabLayout:global(.neutral) .tabGroup .tab:global(.largeText) .icon {
+  --icon-size: 2.4rem;
+}
 :global(.noAnimation) .popupTabLayout:global(.neutral) .tabs,
 :global(.noAnimation) .popupTabLayout:global(.neutral) .content .panels::before {
   box-shadow: none;
@@ -92,6 +95,9 @@
 :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabGroup .tab .icon {
   --icon-size: 2rem;
 }
+:global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabGroup .tab:global(.largeText) .icon {
+  --icon-size: 2.4rem;
+}
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .tabs,
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .popupTabLayout:global(.neutral):global(.highContrast) .content .panels::before {
   box-shadow: none;
@@ -120,6 +126,9 @@
 .popupTabLayout:global(.light) .tabGroup .tab .icon {
   --icon-size: 2rem;
 }
+.popupTabLayout:global(.light) .tabGroup .tab:global(.largeText) .icon {
+  --icon-size: 2.4rem;
+}
 :global(.noAnimation) .popupTabLayout:global(.light) .tabs,
 :global(.noAnimation) .popupTabLayout:global(.light) .content .panels::before {
   box-shadow: none;
@@ -151,6 +160,9 @@
 .popupTabLayout:global(.game) .tabGroup .tab .icon {
   --icon-size: 2rem;
 }
+.popupTabLayout:global(.game) .tabGroup .tab:global(.largeText) .icon {
+  --icon-size: 2.4rem;
+}
 :global(.noAnimation) .popupTabLayout:global(.game) .tabs,
 :global(.noAnimation) .popupTabLayout:global(.game) .content .panels::before {
   box-shadow: none;
@@ -181,6 +193,9 @@
 :global(.green) .popupTabLayout:global(.game) .tabGroup .tab .icon {
   --icon-size: 2rem;
 }
+:global(.green) .popupTabLayout:global(.game) .tabGroup .tab:global(.largeText) .icon {
+  --icon-size: 2.4rem;
+}
 :global(.noAnimation) :global(.green) .popupTabLayout:global(.game) .tabs,
 :global(.noAnimation) :global(.green) .popupTabLayout:global(.game) .content .panels::before {
   box-shadow: none;
@@ -211,6 +226,9 @@
 :global(.orange) .popupTabLayout:global(.game) .tabGroup .tab .icon {
   --icon-size: 2rem;
 }
+:global(.orange) .popupTabLayout:global(.game) .tabGroup .tab:global(.largeText) .icon {
+  --icon-size: 2.4rem;
+}
 :global(.noAnimation) :global(.orange) .popupTabLayout:global(.game) .tabs,
 :global(.noAnimation) :global(.orange) .popupTabLayout:global(.game) .content .panels::before {
   box-shadow: none;

package/RadioItem/RadioItem.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.RadioItemGroup = exports.RadioItemDecorator = exports.RadioItemBase = exports.RadioItem = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
 var _Group = _interopRequireDefault(require("@enact/ui/Group"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
 var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
@@ -161,16 +162,13 @@ var RadioItem = exports.RadioItem = (0, _Pure["default"])(RadioItemDecorator(Rad
  * @public
  */
 var _RadioItemGroup = exports.RadioItemGroup = function RadioItemGroup(props) {
+  (0, _util.checkPropTypes)(_RadioItemGroup, props);
   var children = props.children,
     groupId = props.groupId,
     itemProps = props.itemProps,
     rest = _objectWithoutProperties(props, _excluded2);
-  _RadioItemGroup.propTypes = {
-    groupId: _propTypes["default"].string,
-    itemProps: _propTypes["default"].object
-  };
   if (typeof children[0] === 'string') {
-    // The case of multiple radio items are represented by string array instead of `RadioItem` compoenents using `ui/Group`
+    // The case of multiple radio items are represented by string array instead of `RadioItem` components using `ui/Group`
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "region",
       "aria-labelledby": groupId || "radioItemGroup",
@@ -208,4 +206,8 @@ var _RadioItemGroup = exports.RadioItemGroup = function RadioItemGroup(props) {
     });
   }
 };
+_RadioItemGroup.propTypes = {
+  groupId: _propTypes["default"].string,
+  itemProps: _propTypes["default"].object
+};
 var _default = exports["default"] = RadioItem;

package/RadioItem/RadioItem.module.css

@@ -7,6 +7,11 @@
 .radioItem .icon {
   border-radius: var(--semantic-radius-full);
   font-size: var(--primitive-font-size-48);
+  --icon-size: 1.25rem;
+}
+.radioItem .icon:global(.largeText) {
+  font-size: var(--primitive-font-size-56);
+  --icon-size: 1.5rem;
 }
 .radioItem:global(.neutral) .icon {
   color: transparent;