@enact/ui/Heading/Heading.d.ts

A collection of simplified unstyled cross-platform UI components for Enact

// Type definitions for ui/Heading

import { ForwardRefProps as ui_ForwardRef_ForwardRefProps } from "@enact/ui/ForwardRef";
import * as React from "react";

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 HeadingBaseProps {}
/**
 * A labeled Heading component.
 */

export class HeadingBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, HeadingBaseProps>
> {}

export interface HeadingProps
  extends Omit<Merge<HeadingBaseProps, HeadingDecoratorProps>, "componentRef"> {
  /**
   * The text for the label of the Heading.
   */
  children?: React.ReactNode;
  /**
 * Called with a reference to the root component.
 * 
 * When using   , the  `ref`  prop is forwarded to this component
as  `componentRef` .
 */
  componentRef?: object | Function;
  /**
 * Customizes the component by mapping the supplied collection of CSS class names to the
corresponding internal elements and states of this component.
 * 
 * The following classes are supported:
 * *  `heading`  - The root component class
 * *  `title`  - Applied when  `size`  is set to "title"
 * *  `subtitle`  - Applied when  `size`  is set to "subtitle"
 * *  `large`  - Applied when  `size`  is set to "large"
 * *  `medium`  - Applied when  `size`  is set to "medium"
 * *  `small`  - Applied when  `size`  is set to "small"
 * *  `tiny`  - Applied when  `size`  is set to "tiny"
 * *  `largeSpacing`  - Applied when  `spacing`  is set to "large"
 * *  `mediumSpacing`  - Applied when  `spacing`  is set to "medium"
 * *  `smallSpacing`  - Applied when  `spacing`  is set to "small"
 * *  `noneSpacing`  - Applied when  `spacing`  is set to "none"
 */
  css?: object;
  /**
 * Set the size of this component.
 * *  `'title'`  and  `'subtitle'`  are generally considered to be used only once on a given screen.
 * *  `'large'` ,  `'medium'` ,  `'small'` , and  `'tiny'`  are typically used as section headings
for content on a screen, starting with  `'large'`  for the first tier of information
followed by  `'medium'`  for the next, and so forth.
 * 
 * If the  `spacing`  prop is not set (defaulting to "auto"), these values automatically set
the spacing to the correlated names.
 */
  size?: "title" | "subtitle" | "large" | "medium" | "small" | "tiny";
  /**
 * The size of the spacing around the Heading.
 * 
 * These have no built-in measurements, as they are intended to be defined by the theme
consuming this UI element. The values correlate with customizable classes made available
by this component's  `css`  prop.
 * 
 * Allowed values include:
 * *  `'auto'`  (default) - Lets this value be based on the  `size`  prop for automatic usage.
 * *  `'large'`  - Specifically assign the  `'large'`  spacing.
 * *  `'medium'`  - Specifically assign the  `'medium'`  spacing.
 * *  `'small'`  - Specifically assign the  `'small'`  spacing.
 * *  `'none'`  - No spacing at all. Neighboring elements will directly touch the Heading.
 */
  spacing?: "auto" | "large" | "medium" | "small" | "none";
}
/**
 * A labeled Heading component.
 */

export class Heading extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, HeadingProps>
> {}

export interface HeadingDecoratorProps extends ui_ForwardRef_ForwardRefProps {}
export function HeadingDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & HeadingDecoratorProps>;

export default Heading;