@enact/limestone 1.3.0

package/ThemeDecorator/AccessibilityDecorator.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.AccessibilityDecorator = void 0;
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _Registry = _interopRequireDefault(require("@enact/core/internal/Registry"));
+var _util = require("@enact/core/util");
+var _Resizable = require("@enact/ui/Resizable");
+var _util2 = require("@enact/ui/Skinnable/util");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "focusRing", "highContrast", "skinVariants", "textSize"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var accessibilityDecoratorDefaultProps = {
+  textSize: 'normal'
+};
+
+/**
+ * A higher-order component that classifies an application with a target set of font sizing rules.
+ *
+ * @class AccessibilityDecorator
+ * @memberof limestone/ThemeDecorator
+ * @hoc
+ * @public
+ */
+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 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;
+    var variants = (0, _util2.objectify)(skinVariants);
+    if (highContrast) variants.highContrast = true;
+    if (textSize === 'large') variants.largeText = true;
+    if (focusRing) variants.focusRing = true;
+    var context = (0, _react.useContext)(_Resizable.ResizeContext);
+    var prevTextSize = (0, _react.useRef)(textSize);
+    var resizeRegistry = (0, _react.useRef)(_Registry["default"].create());
+    (0, _react.useEffect)(function () {
+      resizeRegistry.current.parent = context;
+      return function () {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        resizeRegistry.current.parent = null;
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, _react.useEffect)(function () {
+      if (prevTextSize.current !== textSize) {
+        resizeRegistry.current.notify({});
+        prevTextSize.current = textSize;
+      }
+    }, [textSize]);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizable.ResizeContext, {
+      value: resizeRegistry.current.register,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({
+        className: combinedClassName,
+        skinVariants: variants
+      }, rest))
+    });
+  };
+  AccessibilityDecorator.displayName = 'AccessibilityDecorator';
+  AccessibilityDecorator.propTypes = {
+    /** @lends limestone/ThemeDecorator.AccessibilityDecorator.prototype */
+    /**
+     * Enables additional features to help users visually differentiate components.
+     *
+     * The UI library will be responsible for using this information to add focus ring
+     * to some components.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    focusRing: _propTypes["default"].bool,
+    /**
+     * Enables additional features to help users visually differentiate components.
+     *
+     * The UI library will be responsible for using this information to adjust
+     * the components' contrast to this preset.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    highContrast: _propTypes["default"].bool,
+    /**
+     * The variant(s) on a skin that a component should use when rendering. These will
+     * typically alter the appearance of a skin's existing definition in a way that does not
+     * override that skin's general styling.
+     *
+     * Multiple data types are supported by this prop, which afford different conveniences
+     * and abilities. String and Array are effectively the same, supporting just additions
+     * to the variants being applied to a component, and are much more convenient. Objects
+     * may also be used, and have the ability to disable variants being passed by their
+     * ancestors. Objects take the format of a basic hash, with variants as key names and
+     * true/false Booleans as values, depicting their state. If a variant is excluded from
+     * any version of data type used to set this prop, that variant will ignored, falling
+     * back to the defaultVariant or parent variant, in that order.
+     *
+     * skinVariants examples:
+     * ```
+     *  // String
+     *  skinVariants="highContrast"
+     *
+     *  // Array
+     *  skinVariants={['highContrast']}
+     *
+     *  // Object
+     *  skinVariants={{
+     *  	highContrast: true,
+     *  	grayscale: false
+     *  }}
+     * ```
+     *
+     * @type {String|String[]|Object}
+     * @public
+     */
+    skinVariants: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array, _propTypes["default"].object]),
+    /**
+     * Sets the goal size of the text.
+     *
+     * The UI library will be responsible for using this
+     * information to adjust the components' text sizes to this preset.
+     * Current presets are `'normal'` (default), and `'large'`.
+     *
+     * @type {('normal'|'large')}
+     * @default 'normal'
+     * @public
+     */
+    textSize: _propTypes["default"].oneOf(['normal', 'large'])
+  };
+  return AccessibilityDecorator;
+});
+var _default = exports["default"] = AccessibilityDecorator;

package/ThemeDecorator/I18nFontDecorator.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.I18nFontDecorator = void 0;
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _i18n = _interopRequireDefault(require("@enact/i18n"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _fontGenerator = require("./fontGenerator");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var I18nFontDecorator = exports.I18nFontDecorator = (0, _hoc["default"])(function (config, Wrapped) {
+  var I18nDecorator = function 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 = {
+    locale: _propTypes["default"].string
+  };
+  return I18nDecorator;
+});
+var _default = exports["default"] = I18nFontDecorator;

package/ThemeDecorator/ThemeDecorator.d.ts

@@ -0,0 +1,143 @@
+// Type definitions for limestone/ThemeDecorator
+
+import { FloatingLayerDecoratorProps as ui_FloatingLayer_FloatingLayerDecoratorProps } from "@enact/ui/FloatingLayer";
+import { ResolutionDecoratorProps as ui_resolution_ResolutionDecoratorProps } from "@enact/ui/resolution";
+import { SpotlightRootDecoratorProps as spotlight_SpotlightRootDecorator_SpotlightRootDecoratorProps } from "@enact/spotlight/SpotlightRootDecorator";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface AccessibilityDecoratorProps {
+  /**
+ * Enables additional features to help users visually differentiate components.
+ * 
+ * The UI library will be responsible for using this information to add focus ring
+to some components.
+ */
+  focusRing?: boolean;
+  /**
+ * Enables additional features to help users visually differentiate components.
+ * 
+ * The UI library will be responsible for using this information to adjust
+the components' contrast to this preset.
+ */
+  highContrast?: boolean;
+  /**
+ * The variant(s) on a skin that a component should use when rendering. These will
+typically alter the appearance of a skin's existing definition in a way that does not
+override that skin's general styling.
+ * 
+ * Multiple data types are supported by this prop, which afford different conveniences
+and abilities. String and Array are effectively the same, supporting just additions
+to the variants being applied to a component, and are much more convenient. Objects
+may also be used, and have the ability to disable variants being passed by their
+ancestors. Objects take the format of a basic hash, with variants as key names and
+true/false Booleans as values, depicting their state. If a variant is excluded from
+any version of data type used to set this prop, that variant will ignored, falling
+back to the defaultVariant or parent variant, in that order.
+ * 
+ * skinVariants examples:
+ * ```
+ // String
+ skinVariants="highContrast"
+
+ // Array
+ skinVariants={['highContrast']}
+
+ // Object
+ skinVariants={{
+ 	highContrast: true,
+ 	grayscale: false
+ }}
+```
+ */
+  skinVariants?: string | string[] | object;
+  /**
+ * Sets the goal size of the text.
+ * 
+ * The UI library will be responsible for using this
+information to adjust the components' text sizes to this preset.
+Current presets are  `'normal'`  (default), and  `'large'` .
+ */
+  textSize?: "normal" | "large";
+}
+export function AccessibilityDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & AccessibilityDecoratorProps>;
+
+export interface ThemeDecoratorConfig extends Object {
+  /**
+   * Applies AccessibilityDecorator.
+   *
+   * If not applied, app will not support accessibility options.
+   */
+  accessible?: boolean;
+  /**
+   * Disables use of full screen.
+   */
+  disableFullscreen?: boolean;
+  /**
+   * Enables a floating layer for popup components.
+   *
+   * If not applied, app will be responsible for applying the decorator.
+   */
+  float?: boolean;
+  /**
+ * Options for I18nDecorator.
+ * 
+ * May be  `false`  to prevent applying the decorator. If not applied, app will be responsible for
+applying the decorator.
+ */
+  i18n?: object | false;
+  /**
+   * Disables setting spotlight focus on first render.
+   */
+  noAutoFocus?: boolean;
+  /**
+   * Enables overlay mode (no background color will be applied).
+   */
+  overlay?: boolean;
+  /**
+   * Override the resolution independence settings.
+   */
+  ri?: object;
+  /**
+   * Specifies the id of the React DOM tree root node
+   */
+  rootId?: string;
+  /**
+   * Applies skinning support.
+   */
+  skin?: boolean;
+  /**
+   * Applies spotlight decorator.
+   *
+   * If not applied, app will be responsible for applying the decorator.
+   */
+  spotlight?: boolean;
+}
+export interface ThemeDecoratorProps
+  extends Merge<
+    Merge<
+      Merge<
+        Merge<
+          ui_FloatingLayer_FloatingLayerDecoratorProps,
+          ui_resolution_ResolutionDecoratorProps
+        >,
+        spotlight_SpotlightRootDecorator_SpotlightRootDecoratorProps
+      >,
+      limestone_Skinnable_SkinnableProps
+    >,
+    AccessibilityDecoratorProps
+  > {}
+export function ThemeDecorator<P>(
+  config: ThemeDecoratorConfig,
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & ThemeDecoratorProps>;
+
+export function ThemeDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & ThemeDecoratorProps>;
+
+export default ThemeDecorator;

package/ThemeDecorator/ThemeDecorator.js

@@ -0,0 +1,307 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ThemeDecorator = void 0;
+Object.defineProperty(exports, "getLastInputType", {
+  enumerable: true,
+  get: function get() {
+    return _SpotlightRootDecorator.getInputType;
+  }
+});
+var _dispatcher = require("@enact/core/dispatcher");
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _keymap = require("@enact/core/keymap");
+var _I18nDecorator = _interopRequireDefault(require("@enact/i18n/I18nDecorator"));
+var _SpotlightRootDecorator = _interopRequireWildcard(require("@enact/spotlight/SpotlightRootDecorator"));
+var _FloatingLayer = require("@enact/ui/FloatingLayer");
+var _resolution = require("@enact/ui/resolution");
+var _Touchable = require("@enact/ui/Touchable");
+var _lastInputType = require("@enact/webos/lastInputType");
+var _platform = _interopRequireDefault(require("@enact/webos/platform"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _AccessibilityDecorator = _interopRequireDefault(require("./AccessibilityDecorator"));
+var _I18nFontDecorator = _interopRequireDefault(require("./I18nFontDecorator"));
+var _screenTypes = _interopRequireDefault(require("./screenTypes.json"));
+var _ThemeDecoratorModule = _interopRequireDefault(require("./ThemeDecorator.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["skin"];
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": 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); } /**
+ * Exports the {@link limestone/ThemeDecorator.ThemeDecorator} HOC
+ *
+ * @module limestone/ThemeDecorator
+ * @exports ThemeDecorator
+ */ /**
+ * Default config for `ThemeDecorator`.
+ *
+ * @memberof limestone/ThemeDecorator.ThemeDecorator
+ * @hocconfig
+ */
+var defaultConfig = /** @lends limestone/ThemeDecorator.ThemeDecorator.defaultConfig */{
+  /**
+   * Applies AccessibilityDecorator.
+   *
+   * If not applied, app will not support accessibility options.
+   *
+   * @type {Boolean}
+   * @default true
+   * @see {@link limestone/ThemeDecorator.AccessibilityDecorator}
+   * @public
+   */
+  accessible: true,
+  /**
+   * Disables use of full screen.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  disableFullscreen: false,
+  /**
+   * Enables a floating layer for popup components.
+   *
+   * If not applied, app will be responsible for applying the decorator.
+   *
+   * @type {Boolean}
+   * @default true
+   * @see {@link ui/FloatingLayer.FloatingLayerDecorator}
+   * @public
+   */
+  "float": true,
+  /**
+   * Options for I18nDecorator.
+   *
+   * May be `false` to prevent applying the decorator. If not applied, app will be responsible for
+   * applying the decorator.
+   *
+   * @type {Object|false}
+   * @default {sync: true}
+   * @see {@link i18n/I18nDecorator}
+   * @public
+   */
+  i18n: {
+    sync: true
+  },
+  /**
+   * Disables setting spotlight focus on first render.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  noAutoFocus: false,
+  /**
+   * Enables overlay mode (no background color will be applied).
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  overlay: false,
+  /**
+   * Override the resolution independence settings.
+   *
+   * @type {Object}
+   * @see {@link ui/resolution}
+   * @public
+   */
+  ri: {
+    screenTypes: _screenTypes["default"]
+  },
+  /**
+   * Specifies the id of the React DOM tree root node
+   *
+   * @type {String}
+   * @default 'root'
+   * @public
+   */
+  rootId: 'root',
+  /**
+   * Applies skinning support.
+   *
+   * @type {Boolean}
+   * @default true
+   * @see {@link limestone/Skinnable}
+   * @public
+   */
+  skin: true,
+  /**
+   * Applies spotlight decorator.
+   *
+   * If not applied, app will be responsible for applying the decorator.
+   *
+   * @type {Boolean}
+   * @default true
+   * @see {@link spotlight/SpotlightRootDecorator}
+   * @public
+   */
+  spotlight: true
+};
+
+/**
+ * A higher-order component that applies Limestone theming to an application.
+ *
+ * It also applies {@link ui/FloatingLayer.FloatingLayerDecorator|floating layer},
+ * {@link ui/resolution.ResolutionDecorator|resolution independence},
+ * {@link limestone/Skinnable|skin support}, {@link spotlight.SpotlightRootDecorator|spotlight}, and
+ * {@link i18n/I18nDecorator.I18nDecorator|internationalization support}.
+ * It is meant to be applied to the root element of an app.
+ *
+ * {@link limestone/Skinnable|Skins} provide a way to change the coloration of your app. The
+ * currently supported skins for Limestone are "limestone" (the default, dark skin) and
+ * "limestone-light". Use the `skin` property to assign a skin. Ex: `<DecoratedApp skin="light" />`
+ *
+ * Note: This HoC passes `className` to the wrapped component. It must be passed to the main DOM
+ * node.
+ *
+ * @class ThemeDecorator
+ * @memberof limestone/ThemeDecorator
+ * @mixes ui/FloatingLayer.FloatingLayerDecorator
+ * @mixes ui/resolution.ResolutionDecorator
+ * @mixes spotlight/SpotlightRootDecorator.SpotlightRootDecorator
+ * @mixes limestone/Skinnable.Skinnable
+ * @mixes limestone/ThemeDecorator.AccessibilityDecorator
+ * @hoc
+ * @public
+ */
+var ThemeDecorator = exports.ThemeDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
+  var accessible = config.accessible,
+    ri = config.ri,
+    i18n = config.i18n,
+    spotlight = config.spotlight,
+    _float = config["float"],
+    noAutoFocus = config.noAutoFocus,
+    overlay = config.overlay,
+    skin = config.skin,
+    disableFullscreen = config.disableFullscreen,
+    rootId = config.rootId;
+
+  // Apply classes depending on screen type (overlay / fullscreen)
+  var bgClassName = (0, _classnames["default"])(_defineProperty({
+    'enact-fit': !disableFullscreen
+  }, _ThemeDecoratorModule["default"].bg, !overlay));
+  var requestInputType = null;
+  var App = Wrapped;
+  if (_float) App = (0, _FloatingLayer.FloatingLayerDecorator)({
+    wrappedClassName: bgClassName
+  }, App);
+  if (ri) App = (0, _resolution.ResolutionDecorator)(ri, App);
+  if (i18n) {
+    // Apply the @enact/i18n decorator around the font decorator so the latter will update the
+    // font stylesheet when the locale changes
+    App = (0, _I18nDecorator["default"])(_objectSpread(_objectSpread({}, i18n), {}, {
+      // We use the latin fonts (with non-Latin fallback) for these languages (even though
+      // their scripts are non-latin)
+      latinLanguageOverrides: ['ko', 'ha', 'el', 'bg', 'mk', 'mn', 'ru', 'uk', 'kk'],
+      // We use the non-latin fonts for these languages (even though their scripts are
+      // technically considered latin)
+      nonLatinLanguageOverrides: ['en-JP']
+    }), (0, _I18nFontDecorator["default"])(App));
+  }
+  if (spotlight) App = (0, _SpotlightRootDecorator["default"])({
+    noAutoFocus: noAutoFocus,
+    rootId: rootId
+  }, App);
+  if (skin) App = (0, _Skinnable["default"])(App);
+  if (accessible) App = (0, _AccessibilityDecorator["default"])(App);
+
+  // add webOS-specific key maps
+  (0, _keymap.addAll)({
+    cancel: 461,
+    nonModal: [461, 415,
+    // play
+    19,
+    // pause
+    403,
+    // red
+    404,
+    // green
+    405,
+    // yellow
+    406,
+    // blue
+    33,
+    // channel up
+    34 // channel down
+    ],
+    red: 403,
+    green: 404,
+    yellow: 405,
+    blue: 406,
+    play: 415,
+    pause: 19,
+    rewind: 412,
+    fastForward: 417,
+    pointerHide: 1537,
+    pointerShow: 1536
+  });
+
+  // configure the default hold time
+  (0, _Touchable.configure)({
+    hold: {
+      events: [{
+        name: 'hold',
+        time: 400
+      }]
+    }
+  });
+
+  // set the DOM node ID of the React DOM tree root
+  (0, _dispatcher.setDefaultTargetById)(rootId);
+  var Decorator = function Decorator(props) {
+    var skinProp = props.skin,
+      rest = _objectWithoutProperties(props, _excluded);
+    var skinName = skinProp || 'neutral';
+    var className = (0, _classnames["default"])(_ThemeDecoratorModule["default"].root, props.className, 'limestone-theme', 'enact-unselectable', _defineProperty(_defineProperty(_defineProperty({}, bgClassName, !_float), 'enact-fit', !disableFullscreen), "noAnimation", typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION));
+    (0, _react.useEffect)(function () {
+      if (spotlight && _platform["default"].tv) {
+        (0, _SpotlightRootDecorator.activateInputType)(true);
+        requestInputType = (0, _lastInputType.requestLastInputType)({
+          onSuccess: function onSuccess(res) {
+            if (res.lastInputType === 'key' || res.lastInputType === 'mouse' || res.lastInputType === 'touch') {
+              (0, _SpotlightRootDecorator.setInputType)(res.lastInputType);
+            } else {
+              (0, _SpotlightRootDecorator.activateInputType)(false);
+            }
+          },
+          onFailure: function onFailure() {
+            (0, _SpotlightRootDecorator.activateInputType)(false);
+          }
+        });
+      }
+      return function () {
+        if (requestInputType) {
+          requestInputType.cancel();
+        }
+      };
+    }, []);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(App, _objectSpread(_objectSpread({}, rest), {}, {
+      skin: skinName,
+      className: className
+    }));
+  };
+  Decorator.displayName = 'ThemeDecorator';
+  Decorator.propTypes = /** @lends limestone/ThemeDecorator.prototype */{
+    /**
+     * Assign a skin.
+     *
+     * @type {String}
+     * @private
+     */
+    skin: _propTypes["default"].string
+  };
+  return Decorator;
+});
+var _default = exports["default"] = ThemeDecorator;