@enact/limestone 1.3.0 → 1.10.0

package/TabLayout/RefocusDecorator.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getNavigableFilter = exports["default"] = exports.RefocusDecorator = void 0;
 exports.getTabsSpotlightId = getTabsSpotlightId;
+var _util = require("@enact/core/util");
 var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _IdProvider = require("@enact/ui/internal/IdProvider");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _TabGroupModule = _interopRequireDefault(require("./TabGroup.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["blockCollapseOnPortrait", "collapsed", "index", "onCollapse", "onTabAnimationEnd", "orientation", "spotlightId"];
+var _excluded = ["blockCollapseOnPortrait", "blockExpandOnLandscape", "collapsed", "index", "onCollapse", "onExpand", "onTabAnimationEnd", "orientation"];
 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; }
@@ -60,21 +61,24 @@ function useScreenOrientation() {
 }
 var RefocusDecorator = exports.RefocusDecorator = function RefocusDecorator(Wrapped) {
   // eslint-disable-next-line no-shadow
-  function RefocusDecorator(_ref) {
-    var blockCollapseOnPortrait = _ref.blockCollapseOnPortrait,
-      collapsed = _ref.collapsed,
-      index = _ref.index,
-      onCollapse = _ref.onCollapse,
-      onTabAnimationEnd = _ref.onTabAnimationEnd,
-      orientation = _ref.orientation,
-      spotlightId = _ref.spotlightId,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  function RefocusDecorator(props) {
+    (0, _util.checkPropTypes)(RefocusDecorator, props);
+    var blockCollapseOnPortrait = props.blockCollapseOnPortrait,
+      blockExpandOnLandscape = props.blockExpandOnLandscape,
+      collapsed = props.collapsed,
+      index = props.index,
+      onCollapse = props.onCollapse,
+      onExpand = props.onExpand,
+      onTabAnimationEnd = props.onTabAnimationEnd,
+      orientation = props.orientation,
+      rest = _objectWithoutProperties(props, _excluded);
+    var spotlightId = props.spotlightId;
     var _useId = (0, _IdProvider.useId)({
         prefix: 'lime-tablayout-'
       }),
       generateId = _useId.generateId;
     var screenOrientation = useScreenOrientation();
-    var screenOrientationRef = (0, _react.useRef)(null);
+    var screenOrientationRef = (0, _react.useRef)('landscape');
 
     // generate an id for the component (and a derived id for the tabs) so we can refocus them
     // generating a different ID by orientation so swapping orientations doesn't clear container
@@ -97,18 +101,21 @@ var RefocusDecorator = exports.RefocusDecorator = function RefocusDecorator(Wrap
       });
     }, [collapsed, orientation, spotlightId]);
     (0, _react.useEffect)(function () {
-      if (!blockCollapseOnPortrait && screenOrientationRef.current !== screenOrientation) {
-        if (screenOrientation === 'portrait') {
-          var currentFocusedElement = document.querySelector(':focus'),
-            tabsSpotlightId = getTabsSpotlightId(spotlightId, false),
-            tabsContainer = getContainerNode(tabsSpotlightId);
-          if (tabsContainer && !tabsContainer.contains(currentFocusedElement)) {
+      if (screenOrientationRef.current !== screenOrientation) {
+        var currentFocusedElement = document.querySelector(':focus'),
+          tabsSpotlightId = getTabsSpotlightId(spotlightId, false),
+          tabsContainer = getContainerNode(tabsSpotlightId);
+        if (tabsContainer && !tabsContainer.contains(currentFocusedElement)) {
+          if (!blockCollapseOnPortrait && screenOrientation === 'portrait') {
             onCollapse();
           }
+          if (!blockExpandOnLandscape && screenOrientation === 'landscape') {
+            onExpand();
+          }
         }
         screenOrientationRef.current = screenOrientation;
       }
-    }, [blockCollapseOnPortrait, onCollapse, screenOrientation, spotlightId]);
+    }, [blockCollapseOnPortrait, blockExpandOnLandscape, onCollapse, onExpand, screenOrientation, spotlightId]);
     var handleTabAnimationEnd = (0, _react.useCallback)(function (ev) {
       if (onTabAnimationEnd) {
         onTabAnimationEnd(ev);
@@ -125,6 +132,7 @@ var RefocusDecorator = exports.RefocusDecorator = function RefocusDecorator(Wrap
       collapsed: collapsed,
       index: index,
       onCollapse: onCollapse,
+      onExpand: onExpand,
       onTabAnimationEnd: handleTabAnimationEnd,
       orientation: orientation,
       spotlightId: spotlightId

package/TabLayout/TabGroup.js

@@ -59,7 +59,7 @@ var TabBase = (0, _kind["default"])({
   styles: {
     css: _TabGroupModule["default"],
     className: 'tab',
-    publicClassNames: ['bg', 'button', 'client', 'selected', 'tab', 'vertical']
+    publicClassNames: ['bg', 'button', 'client', 'icon', 'selected', 'tab', 'vertical']
   },
   handlers: {
     onClick: (0, _handle["default"])((0, _handle.forward)('onClick'), (0, _handle.not)((0, _handle.forProp)('disabled', true)), (0, _handle.forwardCustom)('onTabClick', function (ev, _ref) {
@@ -196,7 +196,7 @@ var TabGroupBase = (0, _kind["default"])({
   styles: {
     css: _TabGroupModule["default"],
     className: 'tabGroup',
-    publicClassNames: ['bg', 'button', 'client', 'selected', 'tab', 'tabGroup', 'vertical']
+    publicClassNames: ['bg', 'button', 'client', 'icon', 'selected', 'tab', 'tabGroup', 'vertical']
   },
   computed: {
     className: function className(_ref6) {
@@ -313,6 +313,7 @@ var TabGroupBase = (0, _kind["default"])({
       noScrollByWheel: collapsed,
       onScrollStop: onScrollStop,
       scrollbarTrackCss: _TabGroupModule["default"],
+      scrollToContentContainerOnFocus: false,
       spotlightDisabled: spotlightDisabled,
       spotlightId: spotlightId,
       verticalScrollbar: collapsed ? 'hidden' : 'auto'

package/TabLayout/TabGroup.module.css

@@ -132,8 +132,8 @@
   gap: var(--primitive-spacing-36);
 }
 .tabGroup.vertical .scrollbarTrack {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
+  margin-top: var(--primitive-spacing-36);
+  margin-bottom: var(--primitive-spacing-36);
   height: calc(100% - 72px);
 }
 .tabGroup.vertical.collapsed:has(.noIcons) {

package/TabLayout/TabLayout.d.ts

@@ -56,6 +56,12 @@ export interface TabLayoutProps {
    * Only applies to `orientation="vertical".
    */
   blockCollapseOnPortrait?: boolean;
+  /**
+   * Prevents the tab list from automatically expand when the screen orientation changes to landscape mode.
+   *
+   * Only applies to `orientation="vertical".
+   */
+  blockExpandOnLandscape?: boolean;
   /**
    * Collection of    to render.
    */

package/TabLayout/TabLayout.js

@@ -130,6 +130,15 @@ var TabLayoutBase = exports.TabLayoutBase = (0, _kind["default"])({
      * @public
      */
     blockCollapseOnPortrait: _propTypes["default"].bool,
+    /**
+     * Prevents the tab list from automatically expand when the screen orientation changes to landscape mode.
+     *
+     * Only applies to `orientation="vertical".
+     *
+     * @type {Boolean}
+     * @public
+     */
+    blockExpandOnLandscape: _propTypes["default"].bool,
     /**
      * Collection of {@link limestone/TabLayout.Tab|Tabs} to render.
      *
@@ -331,7 +340,7 @@ var TabLayoutBase = exports.TabLayoutBase = (0, _kind["default"])({
   styles: {
     css: _TabLayoutModule["default"],
     className: 'tabLayout',
-    publicClassNames: ['bg', 'button', 'client', 'collapsed', 'content', 'selected', 'tab', 'tabGroup', 'tabLayout', 'tabs', 'tabsExpanded', 'vertical']
+    publicClassNames: ['bg', 'button', 'client', 'collapsed', 'content', 'icon', 'selected', 'tab', 'tabGroup', 'tabLayout', 'tabs', 'tabsExpanded', 'vertical']
   },
   handlers: {
     onKeyDown: function onKeyDown(ev, props) {
@@ -559,6 +568,7 @@ var TabLayoutBase = exports.TabLayoutBase = (0, _kind["default"])({
       rest = _objectWithoutProperties(_ref12, _excluded);
     delete rest.anchorTo;
     delete rest.blockCollapseOnPortrait;
+    delete rest.blockExpandOnLandscape;
     delete rest.onExpand;
     delete rest.offset;
     delete rest.onTabAnimationEnd;

package/TabLayout/TabLayout.module.css

@@ -12,6 +12,10 @@
 .tabLayout.collapsed .tabGroup .tab.vertical.button.selected .bg {
   /* Override TabLayout */
 }
+.tabLayout.collapsed .tabGroup .tab.vertical.button.selected .icon,
+.tabLayout.collapsed .tabGroup .tab.vertical.button.selected .client {
+  /* Override TabLayout */
+}
 .tabLayout.anchorEnd,
 .tabLayout.anchorRight {
   flex-direction: row-reverse;
@@ -92,10 +96,24 @@
 .tabLayout .tabGroup .tab.vertical.button.selected .bg {
   /* Override TabLayout */
 }
+.tabLayout .tabGroup .tab.vertical.button.selected .icon,
+.tabLayout .tabGroup .tab.vertical.button.selected .client {
+  /* Override TabLayout */
+}
 :global(.spotlight-input-key) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .bg {
   /* Override TabLayout */
 }
+:global(.spotlight-input-key) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .icon,
+:global(.spotlight-input-key) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .client,
+:global(.spotlight-input-mouse) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):focus .client {
+  /* Override TabLayout */
+}
 :global(.spotlight-input-touch) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):active .bg {
   /* Override TabLayout */
 }
+:global(.spotlight-input-touch) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):active .icon,
+:global(.spotlight-input-touch) .tabLayout .tabGroup .tab.vertical.button:global(.spottable):active .client {
+  /* Override TabLayout */
+}

package/TabLayout/tests/TabGroup-specs.js

@@ -181,7 +181,7 @@ describe('TabGroup specs', function () {
     expect(handleFocusTab).toHaveBeenCalled();
   });
   test('should set the size for all tabs in horizontal orientation', function () {
-    var size = 456;
+    var size = 'small';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
       orientation: "horizontal",
       size: size,

package/TabLayout/tests/TabLayout-specs.js

@@ -36,6 +36,16 @@ var setPortraitOrientation = function setPortraitOrientation() {
     value: 1920
   });
 };
+var setLandscapeOrientation = function setLandscapeOrientation() {
+  Object.defineProperty(window, 'innerWidth', {
+    configurable: true,
+    value: 1920
+  });
+  Object.defineProperty(window, 'innerHeight', {
+    configurable: true,
+    value: 1080
+  });
+};
 var spySpotlight = function spySpotlight() {
   jest.spyOn(_spotlight["default"], 'setPointerMode');
   jest.spyOn(_spotlight["default"], 'move');
@@ -561,6 +571,27 @@ describe('TabLayout specs', function () {
     var actual = _react.screen.getByTestId('tabLayout');
     expect(actual).toHaveClass(expected);
   });
+  test('should update orientation on window resize, collapse and expand tabs', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      "data-testid": "tabLayout",
+      orientation: "vertical",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    var actual = _react.screen.getByTestId('tabLayout');
+    setPortraitOrientation();
+    (0, _react.fireEvent)(window, new Event('resize'));
+    var expectedCollapsed = 'collapsed';
+    expect(actual).toHaveClass(expectedCollapsed);
+    setLandscapeOrientation();
+    (0, _react.fireEvent)(window, new Event('resize'));
+    var expectedExpanded = 'expanded';
+    expect(actual).not.toHaveClass(expectedExpanded);
+  });
   test('should update orientation on window resize and not collapse tabs when \'blockCollapseOnPortrait\' is set', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
       blockCollapseOnPortrait: true,
@@ -579,6 +610,27 @@ describe('TabLayout specs', function () {
     var actual = _react.screen.getByTestId('tabLayout');
     expect(actual).not.toHaveClass(expected);
   });
+  test('should update orientation on window resize and not expand tabs when \'blockExpandOnLandscape\' is set', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout["default"], {
+      blockExpandOnLandscape: true,
+      "data-testid": "tabLayout",
+      orientation: "vertical",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabLayout.Tab, {
+        title: "Home",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Home"
+        })
+      })
+    }));
+    var actual = _react.screen.getByTestId('tabLayout');
+    var expected = 'collapsed';
+    setPortraitOrientation();
+    (0, _react.fireEvent)(window, new Event('resize'));
+    expect(actual).toHaveClass(expected);
+    setLandscapeOrientation();
+    (0, _react.fireEvent)(window, new Event('resize'));
+    expect(actual).toHaveClass(expected);
+  });
   test('should set the tab size for all tabs in horizontal orientation', function () {
     var tabSize = 300;
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_TabLayout.TabLayoutBase, {

package/ThemeDecorator/AccessibilityDecorator.js

@@ -35,14 +35,15 @@ var accessibilityDecoratorDefaultProps = {
  */
 var AccessibilityDecorator = exports.AccessibilityDecorator = (0, _hoc["default"])(function (config, Wrapped) {
   // eslint-disable-next-line no-shadow
-  var AccessibilityDecorator = function AccessibilityDecorator(props) {
-    var _setDefaultProps = (0, _util.setDefaultProps)(props, accessibilityDecoratorDefaultProps),
-      className = _setDefaultProps.className,
-      focusRing = _setDefaultProps.focusRing,
-      highContrast = _setDefaultProps.highContrast,
-      skinVariants = _setDefaultProps.skinVariants,
-      textSize = _setDefaultProps.textSize,
-      rest = _objectWithoutProperties(_setDefaultProps, _excluded);
+  var _AccessibilityDecorator = function AccessibilityDecorator(props) {
+    var accessibilityDecoratorProps = (0, _util.setDefaultProps)(props, accessibilityDecoratorDefaultProps);
+    (0, _util.checkPropTypes)(_AccessibilityDecorator, accessibilityDecoratorProps);
+    var className = accessibilityDecoratorProps.className,
+      focusRing = accessibilityDecoratorProps.focusRing,
+      highContrast = accessibilityDecoratorProps.highContrast,
+      skinVariants = accessibilityDecoratorProps.skinVariants,
+      textSize = accessibilityDecoratorProps.textSize,
+      rest = _objectWithoutProperties(accessibilityDecoratorProps, _excluded);
     var accessibilityClassName = highContrast ? "enact-a11y-high-contrast enact-text-".concat(textSize) : "enact-text-".concat(textSize);
     accessibilityClassName = focusRing ? "enact-a11y-focus-ring ".concat(accessibilityClassName) : "".concat(accessibilityClassName);
     var combinedClassName = className ? "".concat(className, " ").concat(accessibilityClassName) : accessibilityClassName;
@@ -75,8 +76,8 @@ var AccessibilityDecorator = exports.AccessibilityDecorator = (0, _hoc["default"
       }, rest))
     });
   };
-  AccessibilityDecorator.displayName = 'AccessibilityDecorator';
-  AccessibilityDecorator.propTypes = {
+  _AccessibilityDecorator.displayName = 'AccessibilityDecorator';
+  _AccessibilityDecorator.propTypes = {
     /** @lends limestone/ThemeDecorator.AccessibilityDecorator.prototype */
     /**
      * Enables additional features to help users visually differentiate components.
@@ -146,6 +147,6 @@ var AccessibilityDecorator = exports.AccessibilityDecorator = (0, _hoc["default"
      */
     textSize: _propTypes["default"].oneOf(['normal', 'large'])
   };
-  return AccessibilityDecorator;
+  return _AccessibilityDecorator;
 });
 var _default = exports["default"] = AccessibilityDecorator;

package/ThemeDecorator/I18nFontDecorator.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.I18nFontDecorator = void 0;
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _util = require("@enact/core/util");
 var _i18n = _interopRequireDefault(require("@enact/i18n"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
@@ -17,17 +18,18 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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); }
 var I18nFontDecorator = exports.I18nFontDecorator = (0, _hoc["default"])(function (config, Wrapped) {
-  var I18nDecorator = function I18nDecorator(props) {
+  var _I18nDecorator = function I18nDecorator(props) {
+    (0, _util.checkPropTypes)(_I18nDecorator, props);
     var ilibLocale = _i18n["default"].getLocale();
     (0, _react.useEffect)(function () {
       (0, _fontGenerator.fontOverrideGenerator)(props.locale || ilibLocale);
     }, [ilibLocale, props.locale]);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, props));
   };
-  I18nDecorator.displayName = 'I18nFontDecorator';
-  I18nDecorator.propTypes = {
+  _I18nDecorator.displayName = 'I18nFontDecorator';
+  _I18nDecorator.propTypes = {
     locale: _propTypes["default"].string
   };
-  return I18nDecorator;
+  return _I18nDecorator;
 });
 var _default = exports["default"] = I18nFontDecorator;

package/ThemeDecorator/ThemeDecorator.d.ts

@@ -77,6 +77,13 @@ export interface ThemeDecoratorConfig extends Object {
    * Disables use of full screen.
    */
   disableFullscreen?: boolean;
+  /**
+ * A CSS class name to apply globally to every spottable component when it receives spotlight focus.
+ * 
+ * This is the declarative equivalent of calling  `setFocusEffectClass`  imperatively. It acts as
+an app-wide default.
+ */
+  focusEffectClass?: string;
   /**
    * Enables a floating layer for popup components.
    *
@@ -117,20 +124,19 @@ applying the decorator.
    */
   spotlight?: boolean;
 }
-export interface ThemeDecoratorProps
-  extends Merge<
+export interface ThemeDecoratorProps extends Merge<
+  Merge<
     Merge<
       Merge<
-        Merge<
-          ui_FloatingLayer_FloatingLayerDecoratorProps,
-          ui_resolution_ResolutionDecoratorProps
-        >,
-        spotlight_SpotlightRootDecorator_SpotlightRootDecoratorProps
+        ui_FloatingLayer_FloatingLayerDecoratorProps,
+        ui_resolution_ResolutionDecoratorProps
       >,
-      limestone_Skinnable_SkinnableProps
+      spotlight_SpotlightRootDecorator_SpotlightRootDecoratorProps
     >,
-    AccessibilityDecoratorProps
-  > {}
+    limestone_Skinnable_SkinnableProps
+  >,
+  AccessibilityDecoratorProps
+> {}
 export function ThemeDecorator<P>(
   config: ThemeDecoratorConfig,
   Component: React.ComponentType<P> | string,

package/ThemeDecorator/ThemeDecorator.js

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "getLastInputType", {
 var _dispatcher = require("@enact/core/dispatcher");
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
 var _keymap = require("@enact/core/keymap");
+var _util = require("@enact/core/util");
 var _I18nDecorator = _interopRequireDefault(require("@enact/i18n/I18nDecorator"));
 var _SpotlightRootDecorator = _interopRequireWildcard(require("@enact/spotlight/SpotlightRootDecorator"));
 var _FloatingLayer = require("@enact/ui/FloatingLayer");
@@ -69,6 +70,17 @@ var defaultConfig = /** @lends limestone/ThemeDecorator.ThemeDecorator.defaultCo
    * @public
    */
   disableFullscreen: false,
+  /**
+   * A CSS class name to apply globally to every spottable component when it receives spotlight focus.
+   *
+   * This is the declarative equivalent of calling `setFocusEffectClass` imperatively. It acts as
+   * an app-wide default.
+   *
+   * @type {String}
+   * @default null
+   * @public
+   */
+  focusEffectClass: null,
   /**
    * Enables a floating layer for popup components.
    *
@@ -178,15 +190,16 @@ var defaultConfig = /** @lends limestone/ThemeDecorator.ThemeDecorator.defaultCo
  */
 var ThemeDecorator = exports.ThemeDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
   var accessible = config.accessible,
-    ri = config.ri,
-    i18n = config.i18n,
-    spotlight = config.spotlight,
+    disableFullscreen = config.disableFullscreen,
     _float = config["float"],
+    focusEffectClass = config.focusEffectClass,
+    i18n = config.i18n,
     noAutoFocus = config.noAutoFocus,
     overlay = config.overlay,
+    ri = config.ri,
+    rootId = config.rootId,
     skin = config.skin,
-    disableFullscreen = config.disableFullscreen,
-    rootId = config.rootId;
+    spotlight = config.spotlight;
 
   // Apply classes depending on screen type (overlay / fullscreen)
   var bgClassName = (0, _classnames["default"])(_defineProperty({
@@ -211,6 +224,7 @@ var ThemeDecorator = exports.ThemeDecorator = (0, _hoc["default"])(defaultConfig
     }), (0, _I18nFontDecorator["default"])(App));
   }
   if (spotlight) App = (0, _SpotlightRootDecorator["default"])({
+    focusEffectClass: focusEffectClass,
     noAutoFocus: noAutoFocus,
     rootId: rootId
   }, App);
@@ -260,7 +274,8 @@ var ThemeDecorator = exports.ThemeDecorator = (0, _hoc["default"])(defaultConfig
 
   // set the DOM node ID of the React DOM tree root
   (0, _dispatcher.setDefaultTargetById)(rootId);
-  var Decorator = function Decorator(props) {
+  var _Decorator = function Decorator(props) {
+    (0, _util.checkPropTypes)(_Decorator, props);
     var skinProp = props.skin,
       rest = _objectWithoutProperties(props, _excluded);
     var skinName = skinProp || 'neutral';
@@ -292,8 +307,8 @@ var ThemeDecorator = exports.ThemeDecorator = (0, _hoc["default"])(defaultConfig
       className: className
     }));
   };
-  Decorator.displayName = 'ThemeDecorator';
-  Decorator.propTypes = /** @lends limestone/ThemeDecorator.prototype */{
+  _Decorator.displayName = 'ThemeDecorator';
+  _Decorator.propTypes = /** @lends limestone/ThemeDecorator.prototype */{
     /**
      * Assign a skin.
      *
@@ -302,6 +317,6 @@ var ThemeDecorator = exports.ThemeDecorator = (0, _hoc["default"])(defaultConfig
      */
     skin: _propTypes["default"].string
   };
-  return Decorator;
+  return _Decorator;
 });
 var _default = exports["default"] = ThemeDecorator;

package/ThemeDecorator/fontGenerator.js

@@ -43,7 +43,7 @@ var fonts = {
     regular: 'LG Smart UI Devanagari'
   },
   'ja': {
-    regular: 'LG Smart UI JP'
+    regular: ['LG Smart UI JP', 'LG Display_JP']
   },
   'kn': {
     regular: 'LG Smart UI Kannada'

package/ThemeDecorator/screenTypes.json

@@ -6,5 +6,6 @@
 	{"name": "qhd",     "pxPerRem": 32, "width": 2560, "height": 1440, "aspectRatioName": "hdtv"},
 	{"name": "wqhd",    "pxPerRem": 32, "width": 3440, "height": 1440, "aspectRatioName": "cinema"},
 	{"name": "uhd",     "pxPerRem": 48, "width": 3840, "height": 2160, "aspectRatioName": "hdtv", "base": true},
+	{"name": "wuhd",	"pxPerRem": 48, "width": 5158, "height": 2160, "aspectRatioName": "cinema"},
 	{"name": "uhd2",    "pxPerRem": 96, "width": 7680, "height": 4320, "aspectRatioName": "hdtv"}
 ]

package/TimePicker/TimePicker.module.css

@@ -10,7 +10,7 @@
 }
 :global(.enact-locale-right-to-left) .timePicker .pickers .hourPicker {
   order: 3;
-  margin-inline-start: 0.5rem;
+  margin-inline-start: var(--primitive-spacing-24);
 }
 :global(.enact-locale-right-to-left) .timePicker .pickers .timeSeparator {
   order: 2;

package/TimePicker/TimePickerBase.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.TimePickerBase = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _$L = _interopRequireDefault(require("../internal/$L"));
@@ -40,7 +41,8 @@ var hours12 = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '1
  * @ui
  * @private
  */
-var HourPicker = function HourPicker(props) {
+var _HourPicker = function HourPicker(props) {
+  (0, _util.checkPropTypes)(_HourPicker, props);
   var hasMeridiem = props.hasMeridiem,
     value = props.value,
     rest = _objectWithoutProperties(props, _excluded);
@@ -63,7 +65,7 @@ var HourPicker = function HourPicker(props) {
     children: hours
   }));
 };
-HourPicker.propTypes = {
+_HourPicker.propTypes = {
   hasMeridiem: _propTypes["default"].bool,
   value: _propTypes["default"].number
 };
@@ -314,7 +316,7 @@ var TimePickerBase = exports.TimePickerBase = (0, _kind["default"])({
           case 'h':
           case 'k':
             return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HourPicker, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HourPicker, {
                 accessibilityHint: hourAccessibilityHint,
                 "aria-label": hourAriaLabel,
                 className: _TimePickerModule["default"].hourPicker,

package/TooltipDecorator/Tooltip.module.css

@@ -30,10 +30,9 @@
 .tooltip .tooltipLabel {
   --lime-tooltip-label-width: auto;
   font-family: "Limestone";
-  font-size: var(--primitive-font-size-54);
   font-style: normal;
   font-kerning: normal;
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
   font-weight: var(--primitive-font-weight-semibold);
   line-height: 1.5rem;
   white-space: nowrap;

package/TooltipDecorator/TooltipDecorator.js

@@ -23,6 +23,7 @@ Object.defineProperty(exports, "useTooltip", {
   }
 });
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _util = require("@enact/core/util");
 var _I18nDecorator = require("@enact/i18n/I18nDecorator");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Tooltip = require("./Tooltip");
@@ -93,24 +94,28 @@ var defaultConfig = {
 var TooltipDecorator = exports.TooltipDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
   var screenEdgeKeepout = config.screenEdgeKeepout,
     tooltipDestinationProp = config.tooltipDestinationProp;
-  var Decorator = function Decorator(props) {
+  var _Decorator = function Decorator(props) {
+    (0, _util.checkPropTypes)(_Decorator, props);
     var _useTooltip = (0, _useTooltip2.useTooltip)(_objectSpread({
         screenEdgeKeepout: screenEdgeKeepout
       }, props)),
       tooltip = _useTooltip.tooltip,
       handlers = _useTooltip.handlers,
       restProps = _useTooltip.restProps;
+    var tooltipRestProps = Object.assign({}, restProps);
     if (tooltip) {
       if (tooltipDestinationProp === 'children') {
-        restProps.children = [props.children, tooltip];
+        Object.assign(tooltipRestProps, {
+          children: [props.children, tooltip]
+        });
       } else {
-        restProps[tooltipDestinationProp] = tooltip;
+        Object.assign(tooltipRestProps, _defineProperty({}, tooltipDestinationProp, tooltip));
       }
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, restProps), handlers));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, tooltipRestProps), handlers));
   };
-  Decorator.displayName = 'TooltipDecorator';
-  Decorator.propTypes = /** @lends limestone/TooltipDecorator.TooltipDecorator.prototype */{
+  _Decorator.displayName = 'TooltipDecorator';
+  _Decorator.propTypes = /** @lends limestone/TooltipDecorator.TooltipDecorator.prototype */{
     /**
      * Disables the component but does not affect tooltip operation.
      *
@@ -255,6 +260,6 @@ var TooltipDecorator = exports.TooltipDecorator = (0, _hoc["default"])(defaultCo
   };
   return (0, _I18nDecorator.I18nContextDecorator)({
     rtlProp: 'rtl'
-  }, Decorator);
+  }, _Decorator);
 });
 var _default = exports["default"] = TooltipDecorator;

package/TooltipDecorator/tests/useTooltip-specs.js

@@ -30,10 +30,13 @@ describe('useTooltip', function () {
       tooltip = _useTooltip.tooltip,
       handlers = _useTooltip.handlers,
       restProps = _useTooltip.restProps;
+    var tooltipRestProps = Object.assign({}, restProps);
     if (tooltip) {
-      restProps.children = [children, tooltip];
+      Object.assign(tooltipRestProps, {
+        children: [children, tooltip]
+      });
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread({}, restProps), handlers));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread({}, tooltipRestProps), handlers));
   };
   describe('Tooltip', function () {
     beforeEach(function () {