@enact/sandstone/ThemeDecorator/ThemeDecorator.d.ts

Large-screen/TV support library for Enact, containing a variety of UI components.

// Type definitions for sandstone/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 sandstone_Skinnable_SkinnableProps } from "@enact/sandstone/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
      >,
      sandstone_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;