From d7f0408a39c762470c497dfb3e496eac40f03df5 Mon Sep 17 00:00:00 2001 From: Andrew Sun Date: Sat, 17 Mar 2018 09:07:29 -0400 Subject: [PATCH] Add enhanced typings (#1287) * Add enhanced typings * Cleanup * Import JSX, whoops * Refactor Events definition; add support for linkEvent * Remove fixed TODO * Lots of cleanup, also address #1295 * Clean up WrapperComponent https://github.com/infernojs/inferno/pull/1287#discussion_r173642183 * Remove global.d.ts --- packages/inferno-compat/src/index.ts | 8 +- packages/inferno-create-element/src/index.ts | 4 +- packages/inferno-router/src/Link.ts | 6 +- packages/inferno-router/src/Route.ts | 51 +- packages/inferno-router/src/Switch.ts | 5 +- packages/inferno-router/src/utils.ts | 8 +- packages/inferno-router/src/withRouter.ts | 2 +- packages/inferno/src/DOM/events/delegation.ts | 3 +- packages/inferno/src/DOM/events/events.ts | 61 + packages/inferno/src/DOM/events/linkEvent.ts | 7 +- packages/inferno/src/JSX.ts | 3348 +++++++++++++++++ packages/inferno/src/core/component.ts | 71 +- packages/inferno/src/core/implementation.ts | 35 +- packages/inferno/src/index.ts | 25 +- 14 files changed, 3560 insertions(+), 74 deletions(-) create mode 100644 packages/inferno/src/DOM/events/events.ts create mode 100644 packages/inferno/src/JSX.ts diff --git a/packages/inferno-compat/src/index.ts b/packages/inferno-compat/src/index.ts index e1d5bd9ef..e496f7b55 100644 --- a/packages/inferno-compat/src/index.ts +++ b/packages/inferno-compat/src/index.ts @@ -284,7 +284,13 @@ class PureComponent extends Component { } } -class WrapperComponent extends Component { +interface ContextProps { + context: any; +} + +type WrapperComponentProps

= P & ContextProps; + +class WrapperComponent extends Component, S> { public getChildContext() { // tslint:disable-next-line return this.props.context; diff --git a/packages/inferno-create-element/src/index.ts b/packages/inferno-create-element/src/index.ts index 058b829dd..8d62a5df2 100644 --- a/packages/inferno-create-element/src/index.ts +++ b/packages/inferno-create-element/src/index.ts @@ -25,7 +25,7 @@ export function createElement(type: string | Function | Component, let children: any = _children; let ref: any = null; let key = null; - let className = null; + let className: string | null = null; let flags = 0; let newProps; @@ -44,7 +44,7 @@ export function createElement(type: string | Function | Component, for (const prop in props) { if (prop === 'className' || prop === 'class') { - className = props[prop]; + className = (props as any)[prop]; } else if (prop === 'key') { key = props.key; } else if (prop === 'children' && isUndefined(children)) { diff --git a/packages/inferno-router/src/Link.ts b/packages/inferno-router/src/Link.ts index 8c6bfa439..e29c011de 100644 --- a/packages/inferno-router/src/Link.ts +++ b/packages/inferno-router/src/Link.ts @@ -1,8 +1,8 @@ -import { linkEvent, createVNode, VNode } from 'inferno'; +import { linkEvent, createVNode, VNode, MouseEvent } from 'inferno'; import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags'; import { invariant } from './utils'; -const isModifiedEvent = (event): boolean => Boolean(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey); +const isModifiedEvent = (event: MouseEvent): boolean => Boolean(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey); export interface ILinkProps { children: any; @@ -14,7 +14,7 @@ export interface ILinkProps { innerRef: any; } -function handleClick({ props, context }, event) { +function handleClick({ props, context }, event: MouseEvent) { if (props.onClick) { props.onClick(event); } diff --git a/packages/inferno-router/src/Route.ts b/packages/inferno-router/src/Route.ts index 6f5cb73e6..bd25ca6c5 100644 --- a/packages/inferno-router/src/Route.ts +++ b/packages/inferno-router/src/Route.ts @@ -1,20 +1,35 @@ -import { Component, createComponentVNode, VNode } from 'inferno'; +import { Component, ComponentType, createComponentVNode, InfernoChildren, VNode } from 'inferno'; import { VNodeFlags } from 'inferno-vnode-flags'; import { Children, invariant, warning } from './utils'; import { matchPath } from './matchPath'; +import * as H from 'history'; const isEmptyChildren = children => Children.count(children) === 0; +export interface Match

{ + params: P; + isExact: boolean; + path: string; + url: string; +} + +export interface RouteComponentProps

{ + match: Match

; + location: H.Location; + history: H.History; + staticContext?: any; +} + export interface IRouteProps { - computedMatch: any; // private, from - path: any; - exact: any; - strict: any; - sensitive: any; - component: any; - render: any; - location: any; - children: Array>; + computedMatch?: any; // private, from + path?: string; + exact?: boolean; + strict?: boolean; + sensitive?: boolean; + component?: ComponentType> | ComponentType; + render?: ((props: RouteComponentProps) => VNode); + location?: H.Location; + children: ((props: RouteComponentProps) => VNode) | InfernoChildren; } /** @@ -40,7 +55,7 @@ class Route extends Component { }; } - public computeMatch({ computedMatch, location, path, strict, exact, sensitive }, router) { + public computeMatch({computedMatch, location, path, strict, exact, sensitive}, router) { if (computedMatch) { // already computed the match for us return computedMatch; @@ -48,10 +63,10 @@ class Route extends Component { invariant(router, 'You should not use or withRouter() outside a '); - const { route } = router; + const {route} = router; const pathname = (location || route.location).pathname; - return path ? matchPath(pathname, { path, strict, exact, sensitive }) : route.match; + return path ? matchPath(pathname, {path, strict, exact, sensitive}) : route.match; } public componentWillReceiveProps(nextProps, nextContext) { @@ -73,11 +88,11 @@ class Route extends Component { } public render(): VNode | null { - const { match } = this.state; - const { children, component, render } = this.props; - const { history, route, staticContext } = this.context.router; + const {match} = this.state; + const {children, component, render} = this.props; + const {history, route, staticContext} = this.context.router; const location = this.props.location || route.location; - const props = { match, location, history, staticContext }; + const props = {match, location, history, staticContext}; if (component) { return match ? createComponentVNode(VNodeFlags.ComponentUnknown, component, props) : null; @@ -100,7 +115,7 @@ class Route extends Component { } if (process.env.NODE_ENV !== 'production') { - Route.prototype.componentWillMount = function() { + Route.prototype.componentWillMount = function () { warning( !(this.props.component && this.props.render), 'You should not use and in the same route; will be ignored' diff --git a/packages/inferno-router/src/Switch.ts b/packages/inferno-router/src/Switch.ts index 70c4e1f7b..86136a552 100644 --- a/packages/inferno-router/src/Switch.ts +++ b/packages/inferno-router/src/Switch.ts @@ -2,10 +2,11 @@ import { Component, createComponentVNode, VNode } from 'inferno'; import { matchPath } from './matchPath'; import { Children, invariant, isValidElement, warning } from './utils'; import { combineFrom } from 'inferno-shared'; +import { IRouteProps } from "./Route"; -export interface ISwitchProps { +export interface ISwitchProps extends IRouteProps { router: any; - children: Array>; + // children: Array>; } /** diff --git a/packages/inferno-router/src/utils.ts b/packages/inferno-router/src/utils.ts index 71e49c8ba..8b522ff3f 100644 --- a/packages/inferno-router/src/utils.ts +++ b/packages/inferno-router/src/utils.ts @@ -42,7 +42,7 @@ export function invariant(condition, format, a?, b?, c?, d?, e?, f?) { const ARR = []; export const Children = { - forEach(children: any[], fn: Function): void { + forEach(children: any, fn: Function): void { if (isNullOrUndef(children)) { return; } @@ -52,11 +52,11 @@ export const Children = { } }, - count(children: any[]): number { + count(children: any): number { return Children.toArray(children).length; }, - only(children: any[]): any { + only(children: any): any { children = Children.toArray(children); if (children.length !== 1) { throw new Error('Children.only() expects only one child.'); @@ -64,7 +64,7 @@ export const Children = { return children[0]; }, - toArray(children: any[]): any[] { + toArray(children: any): any[] { return isNullOrUndef(children) ? [] : isArray(children) ? children : ARR.concat(children); } }; diff --git a/packages/inferno-router/src/withRouter.ts b/packages/inferno-router/src/withRouter.ts index ee5271d3e..8597b81b8 100644 --- a/packages/inferno-router/src/withRouter.ts +++ b/packages/inferno-router/src/withRouter.ts @@ -14,7 +14,7 @@ export function withRouter(Com) { const C: any = function(props: IWithRouterProps) { const { wrappedComponentRef, ...remainingProps } = props; - return createComponentVNode(VNodeFlags.ComponentClass, Route, { + return createComponentVNode(VNodeFlags.ComponentClass, Route, { render(routeComponentProps) { return createComponentVNode( VNodeFlags.ComponentUnknown, diff --git a/packages/inferno/src/DOM/events/delegation.ts b/packages/inferno/src/DOM/events/delegation.ts index 6ee6a2757..a943ce802 100644 --- a/packages/inferno/src/DOM/events/delegation.ts +++ b/packages/inferno/src/DOM/events/delegation.ts @@ -1,4 +1,5 @@ import { isNull } from 'inferno-shared'; +import { SemiSyntheticEvent } from "inferno"; const attachedEventCounts = {}; const attachedEvents = {}; @@ -32,7 +33,7 @@ export function handleEvent(name: string, nextEvent: Function | null, dom) { } } -function dispatchEvents(event, target, isClick: boolean, name: string, eventData: IEventData) { +function dispatchEvents(event: SemiSyntheticEvent, target, isClick: boolean, name: string, eventData: IEventData) { let dom = target; while (!isNull(dom)) { // Html Nodes can be nested fe: span inside button in that scenario browser does not handle disabled attribute on parent, diff --git a/packages/inferno/src/DOM/events/events.ts b/packages/inferno/src/DOM/events/events.ts new file mode 100644 index 000000000..428867af5 --- /dev/null +++ b/packages/inferno/src/DOM/events/events.ts @@ -0,0 +1,61 @@ +// +// Event System +// ---------------------------------------------------------------------- + +import { + NativeAnimationEvent, NativeClipboardEvent, NativeCompositionEvent, NativeDragEvent, NativeFocusEvent, + NativeKeyboardEvent, + NativeMouseEvent, NativeTouchEvent, NativeTransitionEvent, NativeUIEvent, NativeWheelEvent +} from "../../JSX"; +import { LinkedEvent } from "./linkEvent"; + +export interface SemiSyntheticEvent extends Event { + /** + * A reference to the element on which the event listener is registered. + */ + currentTarget: EventTarget & T; +} + +export type ClipboardEvent = SemiSyntheticEvent & NativeClipboardEvent; +export type CompositionEvent = SemiSyntheticEvent & NativeCompositionEvent; +export type DragEvent = MouseEvent & NativeDragEvent; +export type FocusEvent = SemiSyntheticEvent & NativeFocusEvent; +export type FormEvent = SemiSyntheticEvent; + +export interface InvalidEvent extends SemiSyntheticEvent { + target: EventTarget & T; +} + +export interface ChangeEvent extends SemiSyntheticEvent { + target: EventTarget & T; +} + +export type KeyboardEvent = SemiSyntheticEvent & NativeKeyboardEvent; +export type MouseEvent = SemiSyntheticEvent & NativeMouseEvent; +export type TouchEvent = SemiSyntheticEvent & NativeTouchEvent; +export type UIEvent = SemiSyntheticEvent & NativeUIEvent; +export type WheelEvent = MouseEvent & NativeWheelEvent; +export type AnimationEvent = SemiSyntheticEvent & NativeAnimationEvent; +export type TransitionEvent = SemiSyntheticEvent & NativeTransitionEvent; + +// +// Event Handler Types +// ---------------------------------------------------------------------- + +export type EventHandler> = { bivarianceHack(event: E): void }["bivarianceHack"] | LinkedEvent; + +export type InfernoEventHandler = EventHandler>; + +export type ClipboardEventHandler = EventHandler>; +export type CompositionEventHandler = EventHandler>; +export type DragEventHandler = EventHandler>; +export type FocusEventHandler = EventHandler>; +export type FormEventHandler = EventHandler>; +export type ChangeEventHandler = EventHandler>; +export type KeyboardEventHandler = EventHandler>; +export type MouseEventHandler = EventHandler>; +export type TouchEventHandler = EventHandler>; +export type UIEventHandler = EventHandler>; +export type WheelEventHandler = EventHandler>; +export type AnimationEventHandler = EventHandler>; +export type TransitionEventHandler = EventHandler>; diff --git a/packages/inferno/src/DOM/events/linkEvent.ts b/packages/inferno/src/DOM/events/linkEvent.ts index 0833f28bf..53c3574de 100644 --- a/packages/inferno/src/DOM/events/linkEvent.ts +++ b/packages/inferno/src/DOM/events/linkEvent.ts @@ -1,12 +1,17 @@ import { isFunction } from 'inferno-shared'; +export interface LinkedEvent { + data: T; + event: (data: T, event: E) => void; +} + /** * Links given data to event as first parameter * @param {*} data data to be linked, it will be available in function as first parameter * @param {Function} event Function to be called when event occurs * @returns {{data: *, event: Function}} */ -export function linkEvent(data, event) { +export function linkEvent(data: T, event: (data: T, event: E) => void): LinkedEvent | null { if (isFunction(event)) { return { data, event }; } diff --git a/packages/inferno/src/JSX.ts b/packages/inferno/src/JSX.ts new file mode 100644 index 000000000..b86c77e56 --- /dev/null +++ b/packages/inferno/src/JSX.ts @@ -0,0 +1,3348 @@ +import { + Component, InfernoChildren, VNode, + InfernoEventHandler, KeyboardEventHandler, FormEventHandler, CompositionEventHandler, ClipboardEventHandler, + FocusEventHandler, MouseEventHandler, DragEventHandler, WheelEventHandler, UIEventHandler, TouchEventHandler, + AnimationEventHandler, TransitionEventHandler, ChangeEventHandler, Ref +} from "inferno"; + +export type NativeAnimationEvent = AnimationEvent; +export type NativeClipboardEvent = ClipboardEvent; +export type NativeCompositionEvent = CompositionEvent; +export type NativeDragEvent = DragEvent; +export type NativeFocusEvent = FocusEvent; +export type NativeKeyboardEvent = KeyboardEvent; +export type NativeMouseEvent = MouseEvent; +export type NativeTouchEvent = TouchEvent; +export type NativeTransitionEvent = TransitionEvent; +export type NativeUIEvent = UIEvent; +export type NativeWheelEvent = WheelEvent; + +declare global { + // Based on Type definitions for React 16.0 + // Project: http://facebook.github.io/react/ + // Definitions by: Asana + // AssureSign + // Microsoft + // John Reilly + // Benoit Benezech + // Patricio Zavolinsky + // Digiguru + // Eric Anderson + // Albert Kurniawan + // Tanguy Krotoff + // Dovydas Navickas + // Stéphane Goetz + // Rich Seviora + // Josh Rutherford + // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + // TypeScript Version: 2.6 + + namespace _InfernoJSX { + // + // React Elements + // ---------------------------------------------------------------------- + + // type InfernoJSXType

= string | ComponentType

; + + interface Attributes { + key?: any; + } + + interface ClassAttributes extends Attributes { + ref?: Ref; + } + + // string fallback for custom web-components + interface DOMElement

| SVGAttributes, T extends Element> extends VNode

{ + type: string; + ref: Ref; + } + + interface DetailedInfernoHTMLElement

, T extends HTMLElement> extends DOMElement { + type: keyof InfernoHTML; + } + + // ReactSVG for ReactSVGElement + interface InfernoSVGElement extends DOMElement, SVGElement> { + type: keyof InfernoSVG; + } + + type DOMFactory

, T extends Element> = + (props?: ClassAttributes & P | null, ...children: InfernoChildren[]) => DOMElement; + + interface DetailedHTMLFactory

, T extends HTMLElement> extends DOMFactory { + (props?: ClassAttributes & P | null, ...children: InfernoChildren[]): DetailedInfernoHTMLElement; + } + + interface SVGFactory extends DOMFactory, SVGElement> { + (props?: ClassAttributes & SVGAttributes | null, ...children: InfernoChildren[]): InfernoSVGElement; + } + + // + // React Nodes + // http://facebook.github.io/react/docs/glossary.html + // ---------------------------------------------------------------------- + + // Should be Array but type aliases cannot be recursive + // type InfernoJSXFragment = {} | Array; + + type DetailedHTMLProps, T> = ClassAttributes & E; + + interface SVGProps extends SVGAttributes, ClassAttributes { + } + + interface DOMAttributes { + children?: InfernoChildren; + dangerouslySetInnerHTML?: { + __html: string; + }; + + // Clipboard Events + onCopy?: ClipboardEventHandler; + onCopyCapture?: ClipboardEventHandler; + onCut?: ClipboardEventHandler; + onCutCapture?: ClipboardEventHandler; + onPaste?: ClipboardEventHandler; + onPasteCapture?: ClipboardEventHandler; + + // Composition Events + onCompositionEnd?: CompositionEventHandler; + onCompositionEndCapture?: CompositionEventHandler; + onCompositionStart?: CompositionEventHandler; + onCompositionStartCapture?: CompositionEventHandler; + onCompositionUpdate?: CompositionEventHandler; + onCompositionUpdateCapture?: CompositionEventHandler; + + // Focus Events + onFocus?: FocusEventHandler; + onFocusCapture?: FocusEventHandler; + onBlur?: FocusEventHandler; + onBlurCapture?: FocusEventHandler; + + // Form Events + onChange?: FormEventHandler; + onChangeCapture?: FormEventHandler; + onInput?: FormEventHandler; + onInputCapture?: FormEventHandler; + onReset?: FormEventHandler; + onResetCapture?: FormEventHandler; + onSubmit?: FormEventHandler; + onSubmitCapture?: FormEventHandler; + onInvalid?: FormEventHandler; + onInvalidCapture?: FormEventHandler; + + // Image Events + onLoad?: InfernoEventHandler; + onLoadCapture?: InfernoEventHandler; + onError?: InfernoEventHandler; // also a Media Event + onErrorCapture?: InfernoEventHandler; // also a Media Event + + // Keyboard Events + onKeyDown?: KeyboardEventHandler; + onKeyDownCapture?: KeyboardEventHandler; + onKeyPress?: KeyboardEventHandler; + onKeyPressCapture?: KeyboardEventHandler; + onKeyUp?: KeyboardEventHandler; + onKeyUpCapture?: KeyboardEventHandler; + + // Media Events + onAbort?: InfernoEventHandler; + onAbortCapture?: InfernoEventHandler; + onCanPlay?: InfernoEventHandler; + onCanPlayCapture?: InfernoEventHandler; + onCanPlayThrough?: InfernoEventHandler; + onCanPlayThroughCapture?: InfernoEventHandler; + onDurationChange?: InfernoEventHandler; + onDurationChangeCapture?: InfernoEventHandler; + onEmptied?: InfernoEventHandler; + onEmptiedCapture?: InfernoEventHandler; + onEncrypted?: InfernoEventHandler; + onEncryptedCapture?: InfernoEventHandler; + onEnded?: InfernoEventHandler; + onEndedCapture?: InfernoEventHandler; + onLoadedData?: InfernoEventHandler; + onLoadedDataCapture?: InfernoEventHandler; + onLoadedMetadata?: InfernoEventHandler; + onLoadedMetadataCapture?: InfernoEventHandler; + onLoadStart?: InfernoEventHandler; + onLoadStartCapture?: InfernoEventHandler; + onPause?: InfernoEventHandler; + onPauseCapture?: InfernoEventHandler; + onPlay?: InfernoEventHandler; + onPlayCapture?: InfernoEventHandler; + onPlaying?: InfernoEventHandler; + onPlayingCapture?: InfernoEventHandler; + onProgress?: InfernoEventHandler; + onProgressCapture?: InfernoEventHandler; + onRateChange?: InfernoEventHandler; + onRateChangeCapture?: InfernoEventHandler; + onSeeked?: InfernoEventHandler; + onSeekedCapture?: InfernoEventHandler; + onSeeking?: InfernoEventHandler; + onSeekingCapture?: InfernoEventHandler; + onStalled?: InfernoEventHandler; + onStalledCapture?: InfernoEventHandler; + onSuspend?: InfernoEventHandler; + onSuspendCapture?: InfernoEventHandler; + onTimeUpdate?: InfernoEventHandler; + onTimeUpdateCapture?: InfernoEventHandler; + onVolumeChange?: InfernoEventHandler; + onVolumeChangeCapture?: InfernoEventHandler; + onWaiting?: InfernoEventHandler; + onWaitingCapture?: InfernoEventHandler; + + // MouseEvents + onClick?: MouseEventHandler; + onClickCapture?: MouseEventHandler; + onContextMenu?: MouseEventHandler; + onContextMenuCapture?: MouseEventHandler; + onDoubleClick?: MouseEventHandler; + onDoubleClickCapture?: MouseEventHandler; + onDrag?: DragEventHandler; + onDragCapture?: DragEventHandler; + onDragEnd?: DragEventHandler; + onDragEndCapture?: DragEventHandler; + onDragEnter?: DragEventHandler; + onDragEnterCapture?: DragEventHandler; + onDragExit?: DragEventHandler; + onDragExitCapture?: DragEventHandler; + onDragLeave?: DragEventHandler; + onDragLeaveCapture?: DragEventHandler; + onDragOver?: DragEventHandler; + onDragOverCapture?: DragEventHandler; + onDragStart?: DragEventHandler; + onDragStartCapture?: DragEventHandler; + onDrop?: DragEventHandler; + onDropCapture?: DragEventHandler; + onMouseDown?: MouseEventHandler; + onMouseDownCapture?: MouseEventHandler; + onMouseEnter?: MouseEventHandler; + onMouseLeave?: MouseEventHandler; + onMouseMove?: MouseEventHandler; + onMouseMoveCapture?: MouseEventHandler; + onMouseOut?: MouseEventHandler; + onMouseOutCapture?: MouseEventHandler; + onMouseOver?: MouseEventHandler; + onMouseOverCapture?: MouseEventHandler; + onMouseUp?: MouseEventHandler; + onMouseUpCapture?: MouseEventHandler; + + // Selection Events + onSelect?: InfernoEventHandler; + onSelectCapture?: InfernoEventHandler; + + // Touch Events + onTouchCancel?: TouchEventHandler; + onTouchCancelCapture?: TouchEventHandler; + onTouchEnd?: TouchEventHandler; + onTouchEndCapture?: TouchEventHandler; + onTouchMove?: TouchEventHandler; + onTouchMoveCapture?: TouchEventHandler; + onTouchStart?: TouchEventHandler; + onTouchStartCapture?: TouchEventHandler; + + // UI Events + onScroll?: UIEventHandler; + onScrollCapture?: UIEventHandler; + + // Wheel Events + onWheel?: WheelEventHandler; + onWheelCapture?: WheelEventHandler; + + // Animation Events + onAnimationStart?: AnimationEventHandler; + onAnimationStartCapture?: AnimationEventHandler; + onAnimationEnd?: AnimationEventHandler; + onAnimationEndCapture?: AnimationEventHandler; + onAnimationIteration?: AnimationEventHandler; + onAnimationIterationCapture?: AnimationEventHandler; + + // Transition Events + onTransitionEnd?: TransitionEventHandler; + onTransitionEndCapture?: TransitionEventHandler; + } + + // See CSS 3 CSS-wide keywords https://www.w3.org/TR/css3-values/#common-keywords + // See CSS 3 Explicit Defaulting https://www.w3.org/TR/css-cascade-3/#defaulting-keywords + // "all CSS properties can accept these values" + type CSSWideKeyword = "initial" | "inherit" | "unset"; + + // See CSS 3 type https://drafts.csswg.org/css-values-3/#percentages + type CSSPercentage = string; + + // See CSS 3 type https://drafts.csswg.org/css-values-3/#lengths + type CSSLength = number | string; + + // This interface is not complete. Only properties accepting + // unitless numbers are listed here (see CSSProperty.js in React) + interface CSSProperties { + /** + * Aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. + */ + alignContent?: CSSWideKeyword | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "stretch"; + + /** + * Sets the default alignment in the cross axis for all of the flex container's items, including anonymous flex items, similarly to how justify-content aligns items along the main axis. + */ + alignItems?: CSSWideKeyword | "flex-start" | "flex-end" | "center" | "baseline" | "stretch"; + + /** + * Allows the default alignment to be overridden for individual flex items. + */ + alignSelf?: CSSWideKeyword | "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch"; + + /** + * This property allows precise alignment of elements, such as graphics, + * that do not have a baseline-table or lack the desired baseline in their baseline-table. + * With the alignment-adjust property, the position of the baseline identified by the alignment-baseline + * can be explicitly determined. It also determines precisely the alignment point for each glyph within a textual element. + */ + alignmentAdjust?: CSSWideKeyword | any; + + alignmentBaseline?: CSSWideKeyword | any; + + /** + * Defines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied. + */ + animationDelay?: CSSWideKeyword | any; + + /** + * Defines whether an animation should run in reverse on some or all cycles. + */ + animationDirection?: CSSWideKeyword | any; + + /** + * Specifies how many times an animation cycle should play. + */ + animationIterationCount?: CSSWideKeyword | any; + + /** + * Defines the list of animations that apply to the element. + */ + animationName?: CSSWideKeyword | any; + + /** + * Defines whether an animation is running or paused. + */ + animationPlayState?: CSSWideKeyword | any; + + /** + * Allows changing the style of any element to platform-based interface elements or vice versa. + */ + appearance?: CSSWideKeyword | any; + + /** + * Determines whether or not the “back” side of a transformed element is visible when facing the viewer. + */ + backfaceVisibility?: CSSWideKeyword | any; + + /** + * Shorthand property to set the values for one or more of: + * background-clip, background-color, background-image, + * background-origin, background-position, background-repeat, + * background-size, and background-attachment. + */ + background?: CSSWideKeyword | any; + + /** + * If a background-image is specified, this property determines + * whether that image's position is fixed within the viewport, + * or scrolls along with its containing block. + * See CSS 3 background-attachment property https://drafts.csswg.org/css-backgrounds-3/#the-background-attachment + */ + backgroundAttachment?: CSSWideKeyword | "scroll" | "fixed" | "local"; + + /** + * This property describes how the element's background images should blend with each other and the element's background color. + * The value is a list of blend modes that corresponds to each background image. Each element in the list will apply to the + * corresponding element of background-image. If a property doesn’t have enough comma-separated values to match the number of layers, + * the UA must calculate its used value by repeating the list of values until there are enough. + */ + backgroundBlendMode?: CSSWideKeyword | any; + + /** + * Sets the background color of an element. + */ + backgroundColor?: CSSWideKeyword | any; + + backgroundComposite?: CSSWideKeyword | any; + + /** + * Applies one or more background images to an element. These can be any valid CSS image, including url() paths to image files or CSS gradients. + */ + backgroundImage?: CSSWideKeyword | any; + + /** + * Specifies what the background-position property is relative to. + */ + backgroundOrigin?: CSSWideKeyword | any; + + /** + * Sets the position of a background image. + */ + backgroundPosition?: CSSWideKeyword | any; + + /** + * Background-repeat defines if and how background images will be repeated after they have been sized and positioned + */ + backgroundRepeat?: CSSWideKeyword | any; + + /** + * Defines the size of the background images + */ + backgroundSize?: CSSWideKeyword | any; + + /** + * Obsolete - spec retired, not implemented. + */ + baselineShift?: CSSWideKeyword | any; + + /** + * Non standard. Sets or retrieves the location of the Dynamic HTML (DHTML) behavior. + */ + behavior?: CSSWideKeyword | any; + + /** + * Shorthand property that defines the different properties of all four sides of an element's border in a single declaration. + * It can be used to set border-width, border-style and border-color, or a subset of these. + */ + border?: CSSWideKeyword | any; + + /** + * Shorthand that sets the values of border-bottom-color, + * border-bottom-style, and border-bottom-width. + */ + borderBottom?: CSSWideKeyword | any; + + /** + * Sets the color of the bottom border of an element. + */ + borderBottomColor?: CSSWideKeyword | any; + + /** + * Defines the shape of the border of the bottom-left corner. + */ + borderBottomLeftRadius?: CSSWideKeyword | CSSLength; + + /** + * Defines the shape of the border of the bottom-right corner. + */ + borderBottomRightRadius?: CSSWideKeyword | CSSLength; + + /** + * Sets the line style of the bottom border of a box. + */ + borderBottomStyle?: CSSWideKeyword | any; + + /** + * Sets the width of an element's bottom border. To set all four borders, + * use the border-width shorthand property which sets the values simultaneously for border-top-width, + * border-right-width, border-bottom-width, and border-left-width. + */ + borderBottomWidth?: CSSWideKeyword | any; + + /** + * Border-collapse can be used for collapsing the borders between table cells + */ + borderCollapse?: CSSWideKeyword | any; + + /** + * The CSS border-color property sets the color of an element's four borders. + * This property can have from one to four values, made up of the elementary properties: + * • border-top-color + * • border-right-color + * • border-bottom-color + * • border-left-color The default color is the currentColor of each of these values. + * If you provide one value, it sets the color for the element. Two values set the horizontal and vertical values, + * respectively. Providing three values sets the top, vertical, and bottom values, in that order. + * Four values set all for sides: top, right, bottom, and left, in that order. + */ + borderColor?: CSSWideKeyword | any; + + /** + * Specifies different corner clipping effects, such as scoop (inner curves), bevel (straight cuts) or notch (cut-off rectangles). + * Works along with border-radius to specify the size of each corner effect. + */ + borderCornerShape?: CSSWideKeyword | any; + + /** + * The property border-image-source is used to set the image to be used instead of the border style. + * If this is set to none the border-style is used instead. + */ + borderImageSource?: CSSWideKeyword | any; + + /** + * The border-image-width CSS property defines the offset to use for dividing the border image in nine parts, + * the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, + * bottom-left corner, and central right edge. They represent inward distance from the top, right, bottom, and left edges. + */ + borderImageWidth?: CSSWideKeyword | any; + + /** + * Shorthand property that defines the border-width, border-style and border-color of an element's left border in a single declaration. + * Note that you can use the corresponding longhand properties to set specific individual properties of the left border — border-left-width, + * border-left-style and border-left-color. + */ + borderLeft?: CSSWideKeyword | any; + + /** + * The CSS border-left-color property sets the color of an element's left border. This page explains the border-left-color value, + * but often you will find it more convenient to fix the border's left color as part of a shorthand set, either border-left or border-color. + * Colors can be defined several ways. For more information, see Usage. + */ + borderLeftColor?: CSSWideKeyword | any; + + /** + * Sets the style of an element's left border. To set all four borders, use the shorthand property, border-style. + * Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style. + */ + borderLeftStyle?: CSSWideKeyword | any; + + /** + * Sets the width of an element's left border. To set all four borders, + * use the border-width shorthand property which sets the values simultaneously for border-top-width, + * border-right-width, border-bottom-width, and border-left-width. + */ + borderLeftWidth?: CSSWideKeyword | any; + + /** + * Shorthand property that sets the rounding of all four corners. + */ + borderRadius?: CSSWideKeyword | CSSLength; + + /** + * Shorthand property that defines the border-width, border-style and border-color of an element's right border + * in a single declaration. Note that you can use the corresponding longhand properties to set specific + * individual properties of the right border — border-right-width, border-right-style and border-right-color. + */ + borderRight?: CSSWideKeyword | any; + + /** + * Sets the color of an element's right border. This page explains the border-right-color value, + * but often you will find it more convenient to fix the border's right color as part of a shorthand set, + * either border-right or border-color. + * Colors can be defined several ways. For more information, see Usage. + */ + borderRightColor?: CSSWideKeyword | any; + + /** + * Sets the style of an element's right border. To set all four borders, use the shorthand property, + * border-style. Otherwise, you can set the borders individually with border-top-style, border-right-style, + * border-bottom-style, border-left-style. + */ + borderRightStyle?: CSSWideKeyword | any; + + /** + * Sets the width of an element's right border. To set all four borders, + * use the border-width shorthand property which sets the values simultaneously for border-top-width, + * border-right-width, border-bottom-width, and border-left-width. + */ + borderRightWidth?: CSSWideKeyword | any; + + /** + * Specifies the distance between the borders of adjacent cells. + */ + borderSpacing?: CSSWideKeyword | any; + + /** + * Sets the style of an element's four borders. This property can have from one to four values. + * With only one value, the value will be applied to all four borders; + * otherwise, this works as a shorthand property for each of border-top-style, border-right-style, + * border-bottom-style, border-left-style, where each border style may be assigned a separate value. + */ + borderStyle?: CSSWideKeyword | any; + + /** + * Shorthand property that defines the border-width, border-style and border-color of an element's top border + * in a single declaration. Note that you can use the corresponding longhand properties to set specific + * individual properties of the top border — border-top-width, border-top-style and border-top-color. + */ + borderTop?: CSSWideKeyword | any; + + /** + * Sets the color of an element's top border. This page explains the border-top-color value, + * but often you will find it more convenient to fix the border's top color as part of a shorthand set, + * either border-top or border-color. + * Colors can be defined several ways. For more information, see Usage. + */ + borderTopColor?: CSSWideKeyword | any; + + /** + * Sets the rounding of the top-left corner of the element. + */ + borderTopLeftRadius?: CSSWideKeyword | CSSLength; + + /** + * Sets the rounding of the top-right corner of the element. + */ + borderTopRightRadius?: CSSWideKeyword | CSSLength; + + /** + * Sets the style of an element's top border. To set all four borders, use the shorthand property, border-style. + * Otherwise, you can set the borders individually with border-top-style, border-right-style, border-bottom-style, border-left-style. + */ + borderTopStyle?: CSSWideKeyword | any; + + /** + * Sets the width of an element's top border. To set all four borders, + * use the border-width shorthand property which sets the values simultaneously for border-top-width, + * border-right-width, border-bottom-width, and border-left-width. + */ + borderTopWidth?: CSSWideKeyword | any; + + /** + * Sets the width of an element's four borders. This property can have from one to four values. + * This is a shorthand property for setting values simultaneously for border-top-width, + * border-right-width, border-bottom-width, and border-left-width. + */ + borderWidth?: CSSWideKeyword | any; + + /** + * This property specifies how far an absolutely positioned box's bottom margin edge + * is offset above the bottom edge of the box's containing block. For relatively positioned boxes, + * the offset is with respect to the bottom edges of the box itself + * (i.e., the box is given a position in the normal flow, then offset from that position according to these properties). + */ + bottom?: CSSWideKeyword | any; + + /** + * Obsolete. + */ + boxAlign?: CSSWideKeyword | any; + + /** + * Breaks a box into fragments creating new borders, + * padding and repeating backgrounds or lets it stay as a continuous box on a page break, + * column break, or, for inline elements, at a line break. + */ + boxDecorationBreak?: CSSWideKeyword | any; + + /** + * Deprecated + */ + boxDirection?: CSSWideKeyword | any; + + /** + * Do not use. This property has been replaced by the flex-wrap property. + * Gets or sets a value that specifies the direction to add successive rows or columns when the value of box-lines is set to multiple. + */ + boxLineProgression?: CSSWideKeyword | any; + + /** + * Do not use. This property has been replaced by the flex-wrap property. + * Gets or sets a value that specifies whether child elements wrap onto multiple lines or columns based on the space available in the object. + */ + boxLines?: CSSWideKeyword | any; + + /** + * Do not use. This property has been replaced by flex-order. + * Specifies the ordinal group that a child element of the object belongs to. + * This ordinal value identifies the display order (along the axis defined by the box-orient property) for the group. + */ + boxOrdinalGroup?: CSSWideKeyword | any; + + /** + * Deprecated. + */ + boxFlex?: CSSWideKeyword | number; + + /** + * Deprecated. + */ + boxFlexGroup?: CSSWideKeyword | number; + + /** + * Cast a drop shadow from the frame of almost any element. + * MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow + */ + boxShadow?: CSSWideKeyword | any; + + /** + * The CSS break-after property allows you to force a break on multi-column layouts. + * More specifically, it allows you to force a break after an element. + * It allows you to determine if a break should occur, and what type of break it should be. + * The break-after CSS property describes how the page, column or region break behaves after the generated box. + * If there is no generated box, the property is ignored. + */ + breakAfter?: CSSWideKeyword | any; + + /** + * Control page/column/region breaks that fall above a block of content + */ + breakBefore?: CSSWideKeyword | any; + + /** + * Control page/column/region breaks that fall within a block of content + */ + breakInside?: CSSWideKeyword | any; + + /** + * The clear CSS property specifies if an element can be positioned next to + * or must be positioned below the floating elements that precede it in the markup. + */ + clear?: CSSWideKeyword | any; + + /** + * Deprecated; see clip-path. + * Lets you specify the dimensions of an absolutely positioned element that should be visible, + * and the element is clipped into this shape, and displayed. + */ + clip?: CSSWideKeyword | any; + + /** + * Clipping crops an graphic, so that only a portion of the graphic is rendered, or filled. + * This clip-rule property, when used with the clip-path property, defines which clip rule, or algorithm, + * to use when filling the different parts of a graphics. + */ + clipRule?: CSSWideKeyword | any; + + /** + * The color property sets the color of an element's foreground content (usually text), + * accepting any standard CSS color from keywords and hex values to RGB(a) and HSL(a). + */ + color?: CSSWideKeyword | any; + + /** + * Describes the number of columns of the element. + * See CSS 3 column-count property https://www.w3.org/TR/css3-multicol/#cc + */ + columnCount?: CSSWideKeyword | number | "auto"; + + /** + * Specifies how to fill columns (balanced or sequential). + */ + columnFill?: CSSWideKeyword | any; + + /** + * The column-gap property controls the width of the gap between columns in multi-column elements. + */ + columnGap?: CSSWideKeyword | any; + + /** + * Sets the width, style, and color of the rule between columns. + */ + columnRule?: CSSWideKeyword | any; + + /** + * Specifies the color of the rule between columns. + */ + columnRuleColor?: CSSWideKeyword | any; + + /** + * Specifies the width of the rule between columns. + */ + columnRuleWidth?: CSSWideKeyword | any; + + /** + * The column-span CSS property makes it possible for an element to span across all columns when its value is set to all. + * An element that spans more than one column is called a spanning element. + */ + columnSpan?: CSSWideKeyword | any; + + /** + * Specifies the width of columns in multi-column elements. + */ + columnWidth?: CSSWideKeyword | any; + + /** + * This property is a shorthand property for setting column-width and/or column-count. + */ + columns?: CSSWideKeyword | any; + + /** + * The counter-increment property accepts one or more names of counters (identifiers), + * each one optionally followed by an integer which specifies the value by which the counter should be incremented + * (e.g. if the value is 2, the counter increases by 2 each time it is invoked). + */ + counterIncrement?: CSSWideKeyword | any; + + /** + * The counter-reset property contains a list of one or more names of counters, + * each one optionally followed by an integer (otherwise, the integer defaults to 0.). + * Each time the given element is invoked, the counters specified by the property are set to the given integer. + */ + counterReset?: CSSWideKeyword | any; + + /** + * The cue property specifies sound files (known as an "auditory icon") to be played by speech media agents + * before and after presenting an element's content; if only one file is specified, it is played both before and after. + * The volume at which the file(s) should be played, relative to the volume of the main element, may also be specified. + * The icon files may also be set separately with the cue-before and cue-after properties. + */ + cue?: CSSWideKeyword | any; + + /** + * The cue-after property specifies a sound file (known as an "auditory icon") to be played by speech media agents + * after presenting an element's content; the volume at which the file should be played may also be specified. + * The shorthand property cue sets cue sounds for both before and after the element is presented. + */ + cueAfter?: CSSWideKeyword | any; + + /** + * Specifies the mouse cursor displayed when the mouse pointer is over an element. + */ + cursor?: CSSWideKeyword | any; + + /** + * The direction CSS property specifies the text direction/writing direction. The rtl is used for Hebrew or Arabic text, the ltr is for other languages. + */ + direction?: CSSWideKeyword | any; + + /** + * This property specifies the type of rendering box used for an element. It is a shorthand property for many other display properties. + */ + display?: CSSWideKeyword | any; + + /** + * The ‘fill’ property paints the interior of the given graphical element. + * The area to be painted consists of any areas inside the outline of the shape. + * To determine the inside of the shape, all subpaths are considered, + * and the interior is determined according to the rules associated with the current value of the ‘fill-rule’ property. + * The zero-width geometric outline of a shape is included in the area to be painted. + */ + fill?: CSSWideKeyword | any; + + /** + * SVG: Specifies the opacity of the color or the content the current object is filled with. + * See SVG 1.1 https://www.w3.org/TR/SVG/painting.html#FillOpacityProperty + */ + fillOpacity?: CSSWideKeyword | number; + + /** + * The ‘fill-rule’ property indicates the algorithm which is to be used to determine what parts of the canvas are included inside the shape. + * For a simple, non-intersecting path, it is intuitively clear what region lies "inside"; + * however, for a more complex path, such as a path that intersects itself or where one subpath encloses another, + * the interpretation of "inside" is not so obvious. + * The ‘fill-rule’ property provides two options for how the inside of a shape is determined: + */ + fillRule?: CSSWideKeyword | any; + + /** + * Applies various image processing effects. This property is largely unsupported. See Compatibility section for more information. + */ + filter?: CSSWideKeyword | any; + + /** + * Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`. + */ + flex?: CSSWideKeyword | number | string; + + /** + * Obsolete, do not use. This property has been renamed to align-items. + * Specifies the alignment (perpendicular to the layout axis defined by the flex-direction property) of child elements of the object. + */ + flexAlign?: CSSWideKeyword | any; + + /** + * The flex-basis CSS property describes the initial main size of the flex item + * before any free space is distributed according to the flex factors described in the flex property (flex-grow and flex-shrink). + */ + flexBasis?: CSSWideKeyword | any; + + /** + * The flex-direction CSS property describes how flex items are placed in the flex container, by setting the direction of the flex container's main axis. + */ + flexDirection?: CSSWideKeyword | "row" | "row-reverse" | "column" | "column-reverse"; + + /** + * The flex-flow CSS property defines the flex container's main and cross axis. It is a shorthand property for the flex-direction and flex-wrap properties. + */ + flexFlow?: CSSWideKeyword | string; + + /** + * Specifies the flex grow factor of a flex item. + * See CSS flex-grow property https://drafts.csswg.org/css-flexbox-1/#flex-grow-property + */ + flexGrow?: CSSWideKeyword | number; + + /** + * Do not use. This property has been renamed to align-self + * Specifies the alignment (perpendicular to the layout axis defined by flex-direction) of child elements of the object. + */ + flexItemAlign?: CSSWideKeyword | any; + + /** + * Do not use. This property has been renamed to align-content. + * Specifies how a flexbox's lines align within the flexbox when there is extra space along the axis that is perpendicular to the axis defined by the flex-direction property. + */ + flexLinePack?: CSSWideKeyword | any; + + /** + * Gets or sets a value that specifies the ordinal group that a flexbox element belongs to. This ordinal value identifies the display order for the group. + */ + flexOrder?: CSSWideKeyword | any; + + /** + * Specifies the flex shrink factor of a flex item. + * See CSS flex-shrink property https://drafts.csswg.org/css-flexbox-1/#flex-shrink-property + */ + flexShrink?: CSSWideKeyword | number; + + /** + * Specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. + * If wrapping is allowed, this property also enables you to control the direction in which lines are stacked. + * See CSS flex-wrap property https://drafts.csswg.org/css-flexbox-1/#flex-wrap-property + */ + flexWrap?: CSSWideKeyword | "nowrap" | "wrap" | "wrap-reverse"; + + /** + * Elements which have the style float are floated horizontally. + * These elements can move as far to the left or right of the containing element. + * All elements after the floating element will flow around it, but elements before the floating element are not impacted. + * If several floating elements are placed after each other, they will float next to each other as long as there is room. + */ + float?: CSSWideKeyword | any; + + /** + * Flows content from a named flow (specified by a corresponding flow-into) through selected elements to form a dynamic chain of layout regions. + */ + flowFrom?: CSSWideKeyword | any; + + /** + * The font property is shorthand that allows you to do one of two things: you can either set up six of the most mature font properties in one line, + * or you can set one of a choice of keywords to adopt a system font setting. + */ + font?: CSSWideKeyword | any; + + /** + * The font-family property allows one or more font family names and/or generic family names to be specified for usage on the selected element(s)' text. + * The browser then goes through the list; for each character in the selection it applies the first font family that has an available glyph for that character. + */ + fontFamily?: CSSWideKeyword | any; + + /** + * The font-kerning property allows contextual adjustment of inter-glyph spacing, i.e. the spaces between the characters in text. + * This property controls metric kerning - that utilizes adjustment data contained in the font. Optical Kerning is not supported as yet. + */ + fontKerning?: CSSWideKeyword | any; + + /** + * Specifies the size of the font. Used to compute em and ex units. + * See CSS 3 font-size property https://www.w3.org/TR/css-fonts-3/#propdef-font-size + */ + fontSize?: CSSWideKeyword | + "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | + "larger" | "smaller" | + CSSLength | CSSPercentage; + + /** + * The font-size-adjust property adjusts the font-size of the fallback fonts defined with font-family, + * so that the x-height is the same no matter what font is used. + * This preserves the readability of the text when fallback happens. + * See CSS 3 font-size-adjust property https://www.w3.org/TR/css-fonts-3/#propdef-font-size-adjust + */ + fontSizeAdjust?: CSSWideKeyword | "none" | number; + + /** + * Allows you to expand or condense the widths for a normal, condensed, or expanded font face. + * See CSS 3 font-stretch property https://drafts.csswg.org/css-fonts-3/#propdef-font-stretch + */ + fontStretch?: CSSWideKeyword | + "normal" | "ultra-condensed" | "extra-condensed" | "condensed" | "semi-condensed" | + "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded"; + + /** + * The font-style property allows normal, italic, or oblique faces to be selected. + * Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face. + * Oblique faces can be simulated by artificially sloping the glyphs of the regular face. + * See CSS 3 font-style property https://www.w3.org/TR/css-fonts-3/#propdef-font-style + */ + fontStyle?: CSSWideKeyword | "normal" | "italic" | "oblique"; + + /** + * This value specifies whether the user agent is allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces. + */ + fontSynthesis?: CSSWideKeyword | any; + + /** + * The font-variant property enables you to select the small-caps font within a font family. + */ + fontVariant?: CSSWideKeyword | any; + + /** + * Fonts can provide alternate glyphs in addition to default glyph for a character. This property provides control over the selection of these alternate glyphs. + */ + fontVariantAlternates?: CSSWideKeyword | any; + + /** + * Specifies the weight or boldness of the font. + * See CSS 3 'font-weight' property https://www.w3.org/TR/css-fonts-3/#propdef-font-weight + */ + fontWeight?: CSSWideKeyword | "normal" | "bold" | "bolder" | "lighter" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; + + /** + * Lays out one or more grid items bound by 4 grid lines. Shorthand for setting grid-column-start, grid-column-end, grid-row-start, and grid-row-end in a single declaration. + */ + gridArea?: CSSWideKeyword | any; + + /** + * Controls a grid item's placement in a grid area, particularly grid position and a grid span. Shorthand for setting grid-column-start and grid-column-end in a single declaration. + */ + gridColumn?: CSSWideKeyword | any; + + /** + * Controls a grid item's placement in a grid area as well as grid position and a grid span. + * The grid-column-end property (with grid-row-start, grid-row-end, and grid-column-start) determines a grid item's placement by specifying the grid lines of a grid item's grid area. + */ + gridColumnEnd?: CSSWideKeyword | any; + + /** + * Determines a grid item's placement by specifying the starting grid lines of a grid item's grid area. + * A grid item's placement in a grid area consists of a grid position and a grid span. + * See also ( grid-row-start, grid-row-end, and grid-column-end) + */ + gridColumnStart?: CSSWideKeyword | any; + + /** + * Gets or sets a value that indicates which row an element within a Grid should appear in. Shorthand for setting grid-row-start and grid-row-end in a single declaration. + */ + gridRow?: CSSWideKeyword | any; + + /** + * Determines a grid item’s placement by specifying the block-end. A grid item's placement in a grid area consists of a grid position and a grid span. + * The grid-row-end property (with grid-row-start, grid-column-start, and grid-column-end) determines a grid item's placement by specifying the grid lines of a grid item's grid area. + */ + gridRowEnd?: CSSWideKeyword | any; + + /** + * Specifies a row position based upon an integer location, string value, or desired row size. + * css/properties/grid-row is used as short-hand for grid-row-position and grid-row-position + */ + gridRowPosition?: CSSWideKeyword | any; + + gridRowSpan?: CSSWideKeyword | any; + + /** + * Specifies named grid areas which are not associated with any particular grid item, but can be referenced from the grid-placement properties. + * The syntax of the grid-template-areas property also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand. + */ + gridTemplateAreas?: CSSWideKeyword | any; + + /** + * Specifies (with grid-template-rows) the line names and track sizing functions of the grid. + * Each sizing function can be specified as a length, a percentage of the grid container’s size, + * a measurement of the contents occupying the column or row, or a fraction of the free space in the grid. + */ + gridTemplateColumns?: CSSWideKeyword | any; + + /** + * Specifies (with grid-template-columns) the line names and track sizing functions of the grid. + * Each sizing function can be specified as a length, a percentage of the grid container’s size, + * a measurement of the contents occupying the column or row, or a fraction of the free space in the grid. + */ + gridTemplateRows?: CSSWideKeyword | any; + + /** + * Sets the height of an element. The content area of the element height does not include the padding, border, and margin of the element. + */ + height?: CSSWideKeyword | any; + + /** + * Specifies the minimum number of characters in a hyphenated word + */ + hyphenateLimitChars?: CSSWideKeyword | any; + + /** + * Indicates the maximum number of successive hyphenated lines in an element. The ‘no-limit’ value means that there is no limit. + */ + hyphenateLimitLines?: CSSWideKeyword | any; + + /** + * Specifies the maximum amount of trailing whitespace (before justification) that may be left in a line before hyphenation is triggered + * to pull part of a word from the next line back up into the current one. + */ + hyphenateLimitZone?: CSSWideKeyword | any; + + /** + * Specifies whether or not words in a sentence can be split by the use of a manual or automatic hyphenation mechanism. + */ + hyphens?: CSSWideKeyword | any; + + imeMode?: CSSWideKeyword | any; + + /** + * Defines how the browser distributes space between and around flex items + * along the main-axis of their container. + * See CSS justify-content property https://www.w3.org/TR/css-flexbox-1/#justify-content-property + */ + justifyContent?: CSSWideKeyword | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"; + + layoutGrid?: CSSWideKeyword | any; + + layoutGridChar?: CSSWideKeyword | any; + + layoutGridLine?: CSSWideKeyword | any; + + layoutGridMode?: CSSWideKeyword | any; + + layoutGridType?: CSSWideKeyword | any; + + /** + * Sets the left edge of an element + */ + left?: CSSWideKeyword | any; + + /** + * The letter-spacing CSS property specifies the spacing behavior between text characters. + */ + letterSpacing?: CSSWideKeyword | any; + + /** + * Deprecated. Gets or sets line-breaking rules for text in selected languages such as Japanese, Chinese, and Korean. + */ + lineBreak?: CSSWideKeyword | any; + + lineClamp?: CSSWideKeyword | number; + + /** + * Specifies the height of an inline block level element. + * See CSS 2.1 line-height property https://www.w3.org/TR/CSS21/visudet.html#propdef-line-height + */ + lineHeight?: CSSWideKeyword | "normal" | number | CSSLength | CSSPercentage; + + /** + * Shorthand property that sets the list-style-type, list-style-position and list-style-image properties in one declaration. + */ + listStyle?: CSSWideKeyword | any; + + /** + * This property sets the image that will be used as the list item marker. When the image is available, + * it will replace the marker set with the 'list-style-type' marker. That also means that if the image is not available, + * it will show the style specified by list-style-property + */ + listStyleImage?: CSSWideKeyword | any; + + /** + * Specifies if the list-item markers should appear inside or outside the content flow. + */ + listStylePosition?: CSSWideKeyword | any; + + /** + * Specifies the type of list-item marker in a list. + */ + listStyleType?: CSSWideKeyword | any; + + /** + * The margin property is shorthand to allow you to set all four margins of an element at once. + * Its equivalent longhand properties are margin-top, margin-right, margin-bottom and margin-left. + * Negative values are also allowed. + */ + margin?: CSSWideKeyword | any; + + /** + * margin-bottom sets the bottom margin of an element. + */ + marginBottom?: CSSWideKeyword | any; + + /** + * margin-left sets the left margin of an element. + */ + marginLeft?: CSSWideKeyword | any; + + /** + * margin-right sets the right margin of an element. + */ + marginRight?: CSSWideKeyword | any; + + /** + * margin-top sets the top margin of an element. + */ + marginTop?: CSSWideKeyword | any; + + /** + * The marquee-direction determines the initial direction in which the marquee content moves. + */ + marqueeDirection?: CSSWideKeyword | any; + + /** + * The 'marquee-style' property determines a marquee's scrolling behavior. + */ + marqueeStyle?: CSSWideKeyword | any; + + /** + * This property is shorthand for setting mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-composite and mask-size. + * Omitted values are set to their original properties' initial values. + */ + mask?: CSSWideKeyword | any; + + /** + * This property is shorthand for setting mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, and mask-border-repeat. + * Omitted values are set to their original properties' initial values. + */ + maskBorder?: CSSWideKeyword | any; + + /** + * This property specifies how the images for the sides and the middle part of the mask image are scaled and tiled. + * The first keyword applies to the horizontal sides, the second one applies to the vertical ones. + * If the second keyword is absent, it is assumed to be the same as the first, similar to the CSS border-image-repeat property. + */ + maskBorderRepeat?: CSSWideKeyword | any; + + /** + * This property specifies inward offsets from the top, right, bottom, and left edges of the mask image, + * dividing it into nine regions: four corners, four edges, and a middle. + * The middle image part is discarded and treated as fully transparent black unless the fill keyword is present. + * The four values set the top, right, bottom and left offsets in that order, similar to the CSS border-image-slice property. + */ + maskBorderSlice?: CSSWideKeyword | any; + + /** + * Specifies an image to be used as a mask. An image that is empty, fails to download, is non-existent, or cannot be displayed is ignored and does not mask the element. + */ + maskBorderSource?: CSSWideKeyword | any; + + /** + * This property sets the width of the mask box image, similar to the CSS border-image-width property. + */ + maskBorderWidth?: CSSWideKeyword | any; + + /** + * Determines the mask painting area, which defines the area that is affected by the mask. + * The painted content of an element may be restricted to this area. + */ + maskClip?: CSSWideKeyword | any; + + /** + * For elements rendered as a single box, specifies the mask positioning area. + * For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) + * specifies which boxes box-decoration-break operates on to determine the mask positioning area(s). + */ + maskOrigin?: CSSWideKeyword | any; + + /** + * This property must not be used. It is no longer included in any standard or standard track specification, + * nor is it implemented in any browser. It is only used when the text-align-last property is set to size. + * It controls allowed adjustments of font-size to fit line content. + */ + maxFontSize?: CSSWideKeyword | any; + + /** + * Sets the maximum height for an element. It prevents the height of the element to exceed the specified value. + * If min-height is specified and is greater than max-height, max-height is overridden. + */ + maxHeight?: CSSWideKeyword | any; + + /** + * Sets the maximum width for an element. It limits the width property to be larger than the value specified in max-width. + */ + maxWidth?: CSSWideKeyword | any; + + /** + * Sets the minimum height for an element. It prevents the height of the element to be smaller than the specified value. + * The value of min-height overrides both max-height and height. + */ + minHeight?: CSSWideKeyword | any; + + /** + * Sets the minimum width of an element. It limits the width property to be not smaller than the value specified in min-width. + */ + minWidth?: CSSWideKeyword | any; + + /** + * Specifies the transparency of an element. + * See CSS 3 opacity property https://drafts.csswg.org/css-color-3/#opacity + */ + opacity?: CSSWideKeyword | number; + + /** + * Specifies the order used to lay out flex items in their flex container. + * Elements are laid out in the ascending order of the order value. + * See CSS order property https://drafts.csswg.org/css-flexbox-1/#order-property + */ + order?: CSSWideKeyword | number; + + /** + * In paged media, this property defines the minimum number of lines in + * a block container that must be left at the bottom of the page. + * See CSS 3 orphans, widows properties https://drafts.csswg.org/css-break-3/#widows-orphans + */ + orphans?: CSSWideKeyword | number; + + /** + * The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, + * outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient. + * Outlines differ from borders in the following ways: + * • Outlines do not take up space, they are drawn above the content. + * • Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. + * Internet Explorer attempts to place the smallest contiguous outline around all elements or shapes that are indicated to have an outline. + * Opera draws a non-rectangular shape around a construct. + */ + outline?: CSSWideKeyword | any; + + /** + * The outline-color property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out. + */ + outlineColor?: CSSWideKeyword | any; + + /** + * The outline-offset property offsets the outline and draw it beyond the border edge. + */ + outlineOffset?: CSSWideKeyword | any; + + /** + * The overflow property controls how extra content exceeding the bounding box of an element is rendered. + * It can be used in conjunction with an element that has a fixed width and height, to eliminate text-induced page distortion. + */ + overflow?: CSSWideKeyword | "auto" | "hidden" | "scroll" | "visible"; + + /** + * Specifies the preferred scrolling methods for elements that overflow. + */ + overflowStyle?: CSSWideKeyword | any; + + /** + * Controls how extra content exceeding the x-axis of the bounding box of an element is rendered. + */ + overflowX?: CSSWideKeyword | "auto" | "hidden" | "scroll" | "visible"; + + /** + * Controls how extra content exceeding the y-axis of the bounding box of an element is rendered. + */ + overflowY?: CSSWideKeyword | "auto" | "hidden" | "scroll" | "visible"; + + /** + * The padding optional CSS property sets the required padding space on one to four sides of an element. + * The padding area is the space between an element and its border. Negative values are not allowed but decimal values are permitted. + * The element size is treated as fixed, and the content of the element shifts toward the center as padding is increased. + * The padding property is a shorthand to avoid setting each side separately (padding-top, padding-right, padding-bottom, padding-left). + */ + padding?: CSSWideKeyword | any; + + /** + * The padding-bottom CSS property of an element sets the padding space required on the bottom of an element. + * The padding area is the space between the content of the element and its border. + * Contrary to margin-bottom values, negative values of padding-bottom are invalid. + */ + paddingBottom?: CSSWideKeyword | any; + + /** + * The padding-left CSS property of an element sets the padding space required on the left side of an element. + * The padding area is the space between the content of the element and its border. + * Contrary to margin-left values, negative values of padding-left are invalid. + */ + paddingLeft?: CSSWideKeyword | any; + + /** + * The padding-right CSS property of an element sets the padding space required on the right side of an element. + * The padding area is the space between the content of the element and its border. + * Contrary to margin-right values, negative values of padding-right are invalid. + */ + paddingRight?: CSSWideKeyword | any; + + /** + * The padding-top CSS property of an element sets the padding space required on the top of an element. + * The padding area is the space between the content of the element and its border. + * Contrary to margin-top values, negative values of padding-top are invalid. + */ + paddingTop?: CSSWideKeyword | any; + + /** + * The page-break-after property is supported in all major browsers. With CSS3, page-break-* properties are only aliases of the break-* properties. + * The CSS3 Fragmentation spec defines breaks for all CSS box fragmentation. + */ + pageBreakAfter?: CSSWideKeyword | any; + + /** + * The page-break-before property sets the page-breaking behavior before an element. + * With CSS3, page-break-* properties are only aliases of the break-* properties. + * The CSS3 Fragmentation spec defines breaks for all CSS box fragmentation. + */ + pageBreakBefore?: CSSWideKeyword | any; + + /** + * Sets the page-breaking behavior inside an element. With CSS3, page-break-* properties are only aliases of the break-* properties. + * The CSS3 Fragmentation spec defines breaks for all CSS box fragmentation. + */ + pageBreakInside?: CSSWideKeyword | any; + + /** + * The pause property determines how long a speech media agent should pause before and after presenting an element. + * It is a shorthand for the pause-before and pause-after properties. + */ + pause?: CSSWideKeyword | any; + + /** + * The pause-after property determines how long a speech media agent should pause after presenting an element. + * It may be replaced by the shorthand property pause, which sets pause time before and after. + */ + pauseAfter?: CSSWideKeyword | any; + + /** + * The pause-before property determines how long a speech media agent should pause before presenting an element. + * It may be replaced by the shorthand property pause, which sets pause time before and after. + */ + pauseBefore?: CSSWideKeyword | any; + + /** + * The perspective property defines how far an element is placed from the view on the z-axis, from the screen to the viewer. + * Perspective defines how an object is viewed. In graphic arts, perspective is the representation on a flat surface of what the viewer's eye would see in a 3D space. + * (See Wikipedia for more information about graphical perspective and for related illustrations.) + * The illusion of perspective on a flat surface, such as a computer screen, + * is created by projecting points on the flat surface as they would appear if the flat surface were a window + * through which the viewer was looking at the object. In discussion of virtual environments, this flat surface is called a projection plane. + */ + perspective?: CSSWideKeyword | any; + + /** + * The perspective-origin property establishes the origin for the perspective property. + * It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element. + * When used with perspective, perspective-origin changes the appearance of an object, + * as if a viewer were looking at it from a different origin. + * An object appears differently if a viewer is looking directly at it versus looking at it from below, above, or from the side. + * Thus, the perspective-origin is like a vanishing point. + * The default value of perspective-origin is 50% 50%. + * This displays an object as if the viewer's eye were positioned directly at the center of the screen, both top-to-bottom and left-to-right. + * A value of 0% 0% changes the object as if the viewer was looking toward the top left angle. + * A value of 100% 100% changes the appearance as if viewed toward the bottom right angle. + */ + perspectiveOrigin?: CSSWideKeyword | any; + + /** + * The pointer-events property allows you to control whether an element can be the target for the pointing device (e.g, mouse, pen) events. + */ + pointerEvents?: CSSWideKeyword | any; + + /** + * The position property controls the type of positioning used by an element within its parent elements. + * The effect of the position property depends on a lot of factors, for example the position property of parent elements. + */ + position?: CSSWideKeyword | "static" | "relative" | "absolute" | "fixed" | "sticky"; + + /** + * Obsolete: unsupported. + * This property determines whether or not a full-width punctuation mark character should be trimmed if it appears at the beginning of a line, + * so that its "ink" lines up with the first glyph in the line above and below. + */ + punctuationTrim?: CSSWideKeyword | any; + + /** + * Sets the type of quotation marks for embedded quotations. + */ + quotes?: CSSWideKeyword | any; + + /** + * Controls whether the last region in a chain displays additional 'overset' content according its default overflow property, + * or if it displays a fragment of content as if it were flowing into a subsequent region. + */ + regionFragment?: CSSWideKeyword | any; + + /** + * The rest-after property determines how long a speech media agent should pause after presenting an element's main content, + * before presenting that element's exit cue sound. It may be replaced by the shorthand property rest, which sets rest time before and after. + */ + restAfter?: CSSWideKeyword | any; + + /** + * The rest-before property determines how long a speech media agent should pause after presenting an intro cue sound for an element, + * before presenting that element's main content. It may be replaced by the shorthand property rest, which sets rest time before and after. + */ + restBefore?: CSSWideKeyword | any; + + /** + * Specifies the position an element in relation to the right side of the containing element. + */ + right?: CSSWideKeyword | any; + + rubyAlign?: CSSWideKeyword | any; + + rubyPosition?: CSSWideKeyword | any; + + /** + * Defines the alpha channel threshold used to extract a shape from an image. Can be thought of as a "minimum opacity" threshold; + * that is, a value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque. + */ + shapeImageThreshold?: CSSWideKeyword | any; + + /** + * A future level of CSS Shapes will define a shape-inside property, which will define a shape to wrap content within the element. + * See Editor's Draft and CSSWG wiki page on next-level plans + */ + shapeInside?: CSSWideKeyword | any; + + /** + * Adds a margin to a shape-outside. In effect, defines a new shape that is the smallest contour around all the points + * that are the shape-margin distance outward perpendicular to each point on the underlying shape. + * For points where a perpendicular direction is not defined (e.g., a triangle corner), + * takes all points on a circle centered at the point and with a radius of the shape-margin distance. + * This property accepts only non-negative values. + */ + shapeMargin?: CSSWideKeyword | any; + + /** + * Declares a shape around which text should be wrapped, with possible modifications from the shape-margin property. + * The shape defined by shape-outside and shape-margin changes the geometry of a float element's float area. + */ + shapeOutside?: CSSWideKeyword | any; + + /** + * The speak property determines whether or not a speech synthesizer will read aloud the contents of an element. + */ + speak?: CSSWideKeyword | any; + + /** + * The speak-as property determines how the speech synthesizer interprets the content: words as whole words or as a sequence of letters, + * numbers as a numerical value or a sequence of digits, punctuation as pauses in speech or named punctuation characters. + */ + speakAs?: CSSWideKeyword | any; + + /** + * SVG: Specifies the opacity of the outline on the current object. + * See SVG 1.1 https://www.w3.org/TR/SVG/painting.html#StrokeOpacityProperty + */ + strokeOpacity?: CSSWideKeyword | number; + + /** + * SVG: Specifies the width of the outline on the current object. + * See SVG 1.1 https://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty + */ + strokeWidth?: CSSWideKeyword | CSSPercentage | CSSLength; + + /** + * The tab-size CSS property is used to customise the width of a tab (U+0009) character. + */ + tabSize?: CSSWideKeyword | any; + + /** + * The 'table-layout' property controls the algorithm used to lay out the table cells, rows, and columns. + */ + tableLayout?: CSSWideKeyword | any; + + /** + * The text-align CSS property describes how inline content like text is aligned in its parent block element. + * text-align does not control the alignment of block elements itself, only their inline content. + */ + textAlign?: CSSWideKeyword | any; + + /** + * The text-align-last CSS property describes how the last line of a block element or a line before line break is aligned in its parent block element. + */ + textAlignLast?: CSSWideKeyword | any; + + /** + * The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink. + * underline and overline decorations are positioned under the text, line-through over it. + */ + textDecoration?: CSSWideKeyword | any; + + /** + * Sets the color of any text decoration, such as underlines, overlines, and strike throughs. + */ + textDecorationColor?: CSSWideKeyword | any; + + /** + * Sets what kind of line decorations are added to an element, such as underlines, overlines, etc. + */ + textDecorationLine?: CSSWideKeyword | any; + + textDecorationLineThrough?: CSSWideKeyword | any; + + textDecorationNone?: CSSWideKeyword | any; + + textDecorationOverline?: CSSWideKeyword | any; + + /** + * Specifies what parts of an element’s content are skipped over when applying any text decoration. + */ + textDecorationSkip?: CSSWideKeyword | any; + + /** + * This property specifies the style of the text decoration line drawn on the specified element. + * The intended meaning for the values are the same as those of the border-style-properties. + */ + textDecorationStyle?: CSSWideKeyword | any; + + textDecorationUnderline?: CSSWideKeyword | any; + + /** + * The text-emphasis property will apply special emphasis marks to the elements text. + * Slightly similar to the text-decoration property only that this property can have affect on the line-height. + * It also is noted that this is shorthand for text-emphasis-style and for text-emphasis-color. + */ + textEmphasis?: CSSWideKeyword | any; + + /** + * The text-emphasis-color property specifies the foreground color of the emphasis marks. + */ + textEmphasisColor?: CSSWideKeyword | any; + + /** + * The text-emphasis-style property applies special emphasis marks to an element's text. + */ + textEmphasisStyle?: CSSWideKeyword | any; + + /** + * This property helps determine an inline box's block-progression dimension, + * derived from the text-height and font-size properties for non-replaced elements, + * the height or the width for replaced elements, and the stacked block-progression dimension for inline-block elements. + * The block-progression dimension determines the position of the padding, border and margin for the element. + */ + textHeight?: CSSWideKeyword | any; + + /** + * Specifies the amount of space horizontally that should be left on the first line of the text of an element. + * This horizontal spacing is at the beginning of the first line and is in respect to the left edge of the containing block box. + */ + textIndent?: CSSWideKeyword | any; + + textJustifyTrim?: CSSWideKeyword | any; + + textKashidaSpace?: CSSWideKeyword | any; + + /** + * The text-line-through property is a shorthand property for text-line-through-style, text-line-through-color and text-line-through-mode. + * (Considered obsolete; use text-decoration instead.) + */ + textLineThrough?: CSSWideKeyword | any; + + /** + * Specifies the line colors for the line-through text decoration. + * (Considered obsolete; use text-decoration-color instead.) + */ + textLineThroughColor?: CSSWideKeyword | any; + + /** + * Sets the mode for the line-through text decoration, determining whether the text decoration affects the space characters or not. + * (Considered obsolete; use text-decoration-skip instead.) + */ + textLineThroughMode?: CSSWideKeyword | any; + + /** + * Specifies the line style for line-through text decoration. + * (Considered obsolete; use text-decoration-style instead.) + */ + textLineThroughStyle?: CSSWideKeyword | any; + + /** + * Specifies the line width for the line-through text decoration. + */ + textLineThroughWidth?: CSSWideKeyword | any; + + /** + * The text-overflow shorthand CSS property determines how overflowed content that is not displayed is signaled to the users. + * It can be clipped, display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string. + * It covers the two long-hand properties text-overflow-mode and text-overflow-ellipsis + */ + textOverflow?: CSSWideKeyword | any; + + /** + * The text-overline property is the shorthand for the text-overline-style, text-overline-width, text-overline-color, and text-overline-mode properties. + */ + textOverline?: CSSWideKeyword | any; + + /** + * Specifies the line color for the overline text decoration. + */ + textOverlineColor?: CSSWideKeyword | any; + + /** + * Sets the mode for the overline text decoration, determining whether the text decoration affects the space characters or not. + */ + textOverlineMode?: CSSWideKeyword | any; + + /** + * Specifies the line style for overline text decoration. + */ + textOverlineStyle?: CSSWideKeyword | any; + + /** + * Specifies the line width for the overline text decoration. + */ + textOverlineWidth?: CSSWideKeyword | any; + + /** + * The text-rendering CSS property provides information to the browser about how to optimize when rendering text. + * Options are: legibility, speed or geometric precision. + */ + textRendering?: CSSWideKeyword | any; + + /** + * Obsolete: unsupported. + */ + textScript?: CSSWideKeyword | any; + + /** + * The CSS text-shadow property applies one or more drop shadows to the text and of an element. + * Each shadow is specified as an offset from the text, along with optional color and blur radius values. + */ + textShadow?: CSSWideKeyword | any; + + /** + * This property transforms text for styling purposes. (It has no effect on the underlying content.) + */ + textTransform?: CSSWideKeyword | any; + + /** + * Unsupported. + * This property will add a underline position value to the element that has an underline defined. + */ + textUnderlinePosition?: CSSWideKeyword | any; + + /** + * After review this should be replaced by text-decoration should it not? + * This property will set the underline style for text with a line value for underline, overline, and line-through. + */ + textUnderlineStyle?: CSSWideKeyword | any; + + /** + * This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block. + * For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, + * then offset from that position according to these properties). + */ + top?: CSSWideKeyword | any; + + /** + * Determines whether touch input may trigger default behavior supplied by the user agent, such as panning or zooming. + */ + touchAction?: CSSWideKeyword | any; + + /** + * CSS transforms allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space. + * Using this property, elements can be translated, rotated, scaled, and skewed. The value list may consist of 2D and/or 3D transform values. + */ + transform?: CSSWideKeyword | any; + + /** + * This property defines the origin of the transformation axes relative to the element to which the transformation is applied. + */ + transformOrigin?: CSSWideKeyword | any; + + /** + * This property allows you to define the relative position of the origin of the transformation grid along the z-axis. + */ + transformOriginZ?: CSSWideKeyword | any; + + /** + * This property specifies how nested elements are rendered in 3D space relative to their parent. + */ + transformStyle?: CSSWideKeyword | any; + + /** + * The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, + * and transition-delay. It allows to define the transition between two states of an element. + */ + transition?: CSSWideKeyword | any; + + /** + * Defines when the transition will start. A value of ‘0s’ means the transition will execute as soon as the property is changed. + * Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset. + */ + transitionDelay?: CSSWideKeyword | any; + + /** + * The 'transition-duration' property specifies the length of time a transition animation takes to complete. + */ + transitionDuration?: CSSWideKeyword | any; + + /** + * The 'transition-property' property specifies the name of the CSS property to which the transition is applied. + */ + transitionProperty?: CSSWideKeyword | any; + + /** + * Sets the pace of action within a transition + */ + transitionTimingFunction?: CSSWideKeyword | any; + + /** + * The unicode-bidi CSS property specifies the level of embedding with respect to the bidirectional algorithm. + */ + unicodeBidi?: CSSWideKeyword | any; + + /** + * unicode-range allows you to set a specific range of characters to be downloaded from a font (embedded using @font-face) and made available for use on the current page. + */ + unicodeRange?: CSSWideKeyword | any; + + /** + * This is for all the high level UX stuff. + */ + userFocus?: CSSWideKeyword | any; + + /** + * For inputing user content + */ + userInput?: CSSWideKeyword | any; + + /** + * The vertical-align property controls how inline elements or text are vertically aligned compared to the baseline. + * If this property is used on table-cells it controls the vertical alignment of content of the table cell. + */ + verticalAlign?: CSSWideKeyword | any; + + /** + * The visibility property specifies whether the boxes generated by an element are rendered. + */ + visibility?: CSSWideKeyword | any; + + /** + * The voice-balance property sets the apparent position (in stereo sound) of the synthesized voice for spoken media. + */ + voiceBalance?: CSSWideKeyword | any; + + /** + * The voice-duration property allows the author to explicitly set the amount of time it should take a speech synthesizer to read an element's content, + * for example to allow the speech to be synchronized with other media. + * With a value of auto (the default) the length of time it takes to read the content is determined by the content itself and the voice-rate property. + */ + voiceDuration?: CSSWideKeyword | any; + + /** + * The voice-family property sets the speaker's voice used by a speech media agent to read an element. + * The speaker may be specified as a named character (to match a voice option in the speech reading software) + * or as a generic description of the age and gender of the voice. + * Similar to the font-family property for visual media, + * a comma-separated list of fallback options may be given in case the speech reader does not recognize the character name + * or cannot synthesize the requested combination of generic properties. + */ + voiceFamily?: CSSWideKeyword | any; + + /** + * The voice-pitch property sets pitch or tone (high or low) for the synthesized speech when reading an element; + * the pitch may be specified absolutely or relative to the normal pitch for the voice-family used to read the text. + */ + voicePitch?: CSSWideKeyword | any; + + /** + * The voice-range property determines how much variation in pitch or tone will be created by the speech synthesize when reading an element. + * Emphasized text, grammatical structures and punctuation may all be rendered as changes in pitch, + * this property determines how strong or obvious those changes are; + * large ranges are associated with enthusiastic or emotional speech, + * while small ranges are associated with flat or mechanical speech. + */ + voiceRange?: CSSWideKeyword | any; + + /** + * The voice-rate property sets the speed at which the voice synthesized by a speech media agent will read content. + */ + voiceRate?: CSSWideKeyword | any; + + /** + * The voice-stress property sets the level of vocal emphasis to be used for synthesized speech reading the element. + */ + voiceStress?: CSSWideKeyword | any; + + /** + * The voice-volume property sets the volume for spoken content in speech media. It replaces the deprecated volume property. + */ + voiceVolume?: CSSWideKeyword | any; + + /** + * The white-space property controls whether and how white space inside the element is collapsed, and whether lines may wrap at unforced "soft wrap" opportunities. + */ + whiteSpace?: CSSWideKeyword | any; + + /** + * Obsolete: unsupported. + */ + whiteSpaceTreatment?: CSSWideKeyword | any; + + /** + * In paged media, this property defines the mimimum number of lines + * that must be left at the top of the second page. + * See CSS 3 orphans, widows properties https://drafts.csswg.org/css-break-3/#widows-orphans + */ + widows?: CSSWideKeyword | number; + + /** + * Specifies the width of the content area of an element. The content area of the element width does not include the padding, border, and margin of the element. + */ + width?: CSSWideKeyword | any; + + /** + * The word-break property is often used when there is long generated content that is strung together without and spaces or hyphens to beak apart. + * A common case of this is when there is a long URL that does not have any hyphens. This case could potentially cause the breaking of the layout as it could extend past the parent element. + */ + wordBreak?: CSSWideKeyword | any; + + /** + * The word-spacing CSS property specifies the spacing behavior between "words". + */ + wordSpacing?: CSSWideKeyword | any; + + /** + * An alias of css/properties/overflow-wrap, word-wrap defines whether to break words when the content exceeds the boundaries of its container. + */ + wordWrap?: CSSWideKeyword | any; + + /** + * Specifies how exclusions affect inline content within block-level elements. Elements lay out their inline content in their content area but wrap around exclusion areas. + */ + wrapFlow?: CSSWideKeyword | any; + + /** + * Set the value that is used to offset the inner wrap shape from other shapes. Inline content that intersects a shape with this property will be pushed by this shape's margin. + */ + wrapMargin?: CSSWideKeyword | any; + + /** + * Obsolete and unsupported. Do not use. + * This CSS property controls the text when it reaches the end of the block in which it is enclosed. + */ + wrapOption?: CSSWideKeyword | any; + + /** + * writing-mode specifies if lines of text are laid out horizontally or vertically, and the direction which lines of text and blocks progress. + */ + writingMode?: CSSWideKeyword | any; + + /** + * The z-index property specifies the z-order of an element and its descendants. + * When elements overlap, z-order determines which one covers the other. + * See CSS 2 z-index property https://www.w3.org/TR/CSS2/visuren.html#z-index + */ + zIndex?: CSSWideKeyword | "auto" | number; + + /** + * Sets the initial zoom factor of a document defined by @viewport. + * See CSS zoom descriptor https://drafts.csswg.org/css-device-adapt/#zoom-desc + */ + zoom?: CSSWideKeyword | "auto" | number | CSSPercentage; + + [propertyName: string]: any; + } + + interface HTMLAttributes extends DOMAttributes { + // React-specific Attributes + defaultChecked?: boolean; + defaultValue?: string | string[]; + suppressContentEditableWarning?: boolean; + + // Standard HTML Attributes + accessKey?: string; + className?: string; + contentEditable?: boolean; + contextMenu?: string; + dir?: string; + draggable?: boolean; + hidden?: boolean; + id?: string; + lang?: string; + slot?: string; + spellCheck?: boolean; + style?: CSSProperties; + tabIndex?: number; + title?: string; + + // Unknown + inputMode?: string; + is?: string; + radioGroup?: string; // , + + // WAI-ARIA + role?: string; + + // RDFa Attributes + about?: string; + datatype?: string; + inlist?: any; + prefix?: string; + property?: string; + resource?: string; + typeof?: string; + vocab?: string; + + // Non-standard Attributes + autoCapitalize?: string; + autoCorrect?: string; + autoSave?: string; + color?: string; + itemProp?: string; + itemScope?: boolean; + itemType?: string; + itemID?: string; + itemRef?: string; + results?: number; + security?: string; + unselectable?: boolean; + } + + // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/ + interface HTMLAttributes extends DOMAttributes { + /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ + 'aria-activedescendant'?: string; + /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */ + 'aria-atomic'?: boolean | 'false' | 'true'; + /** + * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be + * presented if they are made. + */ + 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both'; + /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */ + 'aria-busy'?: boolean | 'false' | 'true'; + /** + * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. + * @see aria-pressed @see aria-selected. + */ + 'aria-checked'?: boolean | 'false' | 'mixed' | 'true'; + /** + * Defines the total number of columns in a table, grid, or treegrid. + * @see aria-colindex. + */ + 'aria-colcount'?: number; + /** + * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. + * @see aria-colcount @see aria-colspan. + */ + 'aria-colindex'?: number; + /** + * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. + * @see aria-colindex @see aria-rowspan. + */ + 'aria-colspan'?: number; + /** Indicates the element that represents the current item within a container or set of related elements. */ + 'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time'; + /** + * Identifies the element (or elements) that describes the object. + * @see aria-labelledby + */ + 'aria-describedby'?: string; + /** + * Identifies the element that provides a detailed, extended description for the object. + * @see aria-describedby. + */ + 'aria-details'?: string; + /** + * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. + * @see aria-hidden @see aria-readonly. + */ + 'aria-disabled'?: boolean | 'false' | 'true'; + /** + * Indicates what functions can be performed when a dragged object is released on the drop target. + * @deprecated in ARIA 1.1 + */ + 'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup'; + /** + * Identifies the element that provides an error message for the object. + * @see aria-invalid @see aria-describedby. + */ + 'aria-errormessage'?: string; + /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ + 'aria-expanded'?: boolean | 'false' | 'true'; + /** + * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, + * allows assistive technology to override the general default of reading in document source order. + */ + 'aria-flowto'?: string; + /** + * Indicates an element's "grabbed" state in a drag-and-drop operation. + * @deprecated in ARIA 1.1 + */ + 'aria-grabbed'?: boolean | 'false' | 'true'; + /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ + 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'; + /** + * Indicates whether the element is exposed to an accessibility API. + * @see aria-disabled. + */ + 'aria-hidden'?: boolean | 'false' | 'true'; + /** + * Indicates the entered value does not conform to the format expected by the application. + * @see aria-errormessage. + */ + 'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling'; + /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */ + 'aria-keyshortcuts'?: string; + /** + * Defines a string value that labels the current element. + * @see aria-labelledby. + */ + 'aria-label'?: string; + /** + * Identifies the element (or elements) that labels the current element. + * @see aria-describedby. + */ + 'aria-labelledby'?: string; + /** Defines the hierarchical level of an element within a structure. */ + 'aria-level'?: number; + /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */ + 'aria-live'?: 'off' | 'assertive' | 'polite'; + /** Indicates whether an element is modal when displayed. */ + 'aria-modal'?: boolean | 'false' | 'true'; + /** Indicates whether a text box accepts multiple lines of input or only a single line. */ + 'aria-multiline'?: boolean | 'false' | 'true'; + /** Indicates that the user may select more than one item from the current selectable descendants. */ + 'aria-multiselectable'?: boolean | 'false' | 'true'; + /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */ + 'aria-orientation'?: 'horizontal' | 'vertical'; + /** + * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship + * between DOM elements where the DOM hierarchy cannot be used to represent the relationship. + * @see aria-controls. + */ + 'aria-owns'?: string; + /** + * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. + * A hint could be a sample value or a brief description of the expected format. + */ + 'aria-placeholder'?: string; + /** + * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. + * @see aria-setsize. + */ + 'aria-posinset'?: number; + /** + * Indicates the current "pressed" state of toggle buttons. + * @see aria-checked @see aria-selected. + */ + 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true'; + /** + * Indicates that the element is not editable, but is otherwise operable. + * @see aria-disabled. + */ + 'aria-readonly'?: boolean | 'false' | 'true'; + /** + * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. + * @see aria-atomic. + */ + 'aria-relevant'?: 'additions' | 'additions text' | 'all' | 'removals' | 'text'; + /** Indicates that user input is required on the element before a form may be submitted. */ + 'aria-required'?: boolean | 'false' | 'true'; + /** Defines a human-readable, author-localized description for the role of an element. */ + 'aria-roledescription'?: string; + /** + * Defines the total number of rows in a table, grid, or treegrid. + * @see aria-rowindex. + */ + 'aria-rowcount'?: number; + /** + * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. + * @see aria-rowcount @see aria-rowspan. + */ + 'aria-rowindex'?: number; + /** + * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. + * @see aria-rowindex @see aria-colspan. + */ + 'aria-rowspan'?: number; + /** + * Indicates the current "selected" state of various widgets. + * @see aria-checked @see aria-pressed. + */ + 'aria-selected'?: boolean | 'false' | 'true'; + /** + * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. + * @see aria-posinset. + */ + 'aria-setsize'?: number; + /** Indicates if items in a table or grid are sorted in ascending or descending order. */ + 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other'; + /** Defines the maximum allowed value for a range widget. */ + 'aria-valuemax'?: number; + /** Defines the minimum allowed value for a range widget. */ + 'aria-valuemin'?: number; + /** + * Defines the current value for a range widget. + * @see aria-valuetext. + */ + 'aria-valuenow'?: number; + /** Defines the human readable text alternative of aria-valuenow for a range widget. */ + 'aria-valuetext'?: string; + } + + interface AllHTMLAttributes extends HTMLAttributes { + // Standard HTML Attributes + accept?: string; + acceptCharset?: string; + action?: string; + allowFullScreen?: boolean; + allowTransparency?: boolean; + alt?: string; + as?: string; + async?: boolean; + autoComplete?: string; + autoFocus?: boolean; + autoPlay?: boolean; + capture?: boolean; + cellPadding?: number | string; + cellSpacing?: number | string; + charSet?: string; + challenge?: string; + checked?: boolean; + cite?: string; + classID?: string; + cols?: number; + colSpan?: number; + content?: string; + controls?: boolean; + coords?: string; + crossOrigin?: string; + data?: string; + dateTime?: string; + default?: boolean; + defer?: boolean; + disabled?: boolean; + download?: any; + encType?: string; + form?: string; + formAction?: string; + formEncType?: string; + formMethod?: string; + formNoValidate?: boolean; + formTarget?: string; + frameBorder?: number | string; + headers?: string; + height?: number | string; + high?: number; + href?: string; + hrefLang?: string; + htmlFor?: string; + httpEquiv?: string; + integrity?: string; + keyParams?: string; + keyType?: string; + kind?: string; + label?: string; + list?: string; + loop?: boolean; + low?: number; + manifest?: string; + marginHeight?: number; + marginWidth?: number; + max?: number | string; + maxLength?: number; + media?: string; + mediaGroup?: string; + method?: string; + min?: number | string; + minLength?: number; + multiple?: boolean; + muted?: boolean; + name?: string; + nonce?: string; + noValidate?: boolean; + open?: boolean; + optimum?: number; + pattern?: string; + placeholder?: string; + playsInline?: boolean; + poster?: string; + preload?: string; + readOnly?: boolean; + rel?: string; + required?: boolean; + reversed?: boolean; + rows?: number; + rowSpan?: number; + sandbox?: string; + scope?: string; + scoped?: boolean; + scrolling?: string; + seamless?: boolean; + selected?: boolean; + shape?: string; + size?: number; + sizes?: string; + span?: number; + src?: string; + srcDoc?: string; + srcLang?: string; + srcSet?: string; + start?: number; + step?: number | string; + summary?: string; + target?: string; + type?: string; + useMap?: string; + value?: string | string[] | number; + width?: number | string; + wmode?: string; + wrap?: string; + } + + interface AnchorHTMLAttributes extends HTMLAttributes { + download?: any; + href?: string; + hrefLang?: string; + media?: string; + rel?: string; + target?: string; + type?: string; + as?: string; + } + + // tslint:disable-next-line:no-empty-interface + interface AudioHTMLAttributes extends MediaHTMLAttributes { + } + + interface AreaHTMLAttributes extends HTMLAttributes { + alt?: string; + coords?: string; + download?: any; + href?: string; + hrefLang?: string; + media?: string; + rel?: string; + shape?: string; + target?: string; + } + + interface BaseHTMLAttributes extends HTMLAttributes { + href?: string; + target?: string; + } + + interface BlockquoteHTMLAttributes extends HTMLAttributes { + cite?: string; + } + + interface ButtonHTMLAttributes extends HTMLAttributes { + autoFocus?: boolean; + disabled?: boolean; + form?: string; + formAction?: string; + formEncType?: string; + formMethod?: string; + formNoValidate?: boolean; + formTarget?: string; + name?: string; + type?: string; + value?: string | string[] | number; + } + + interface CanvasHTMLAttributes extends HTMLAttributes { + height?: number | string; + width?: number | string; + } + + interface ColHTMLAttributes extends HTMLAttributes { + span?: number; + width?: number | string; + } + + interface ColgroupHTMLAttributes extends HTMLAttributes { + span?: number; + } + + interface DetailsHTMLAttributes extends HTMLAttributes { + open?: boolean; + } + + interface DelHTMLAttributes extends HTMLAttributes { + cite?: string; + dateTime?: string; + } + + interface DialogHTMLAttributes extends HTMLAttributes { + open?: boolean; + } + + interface EmbedHTMLAttributes extends HTMLAttributes { + height?: number | string; + src?: string; + type?: string; + width?: number | string; + } + + interface FieldsetHTMLAttributes extends HTMLAttributes { + disabled?: boolean; + form?: string; + name?: string; + } + + interface FormHTMLAttributes extends HTMLAttributes { + acceptCharset?: string; + action?: string; + autoComplete?: string; + encType?: string; + method?: string; + name?: string; + noValidate?: boolean; + target?: string; + } + + interface HtmlHTMLAttributes extends HTMLAttributes { + manifest?: string; + } + + interface IframeHTMLAttributes extends HTMLAttributes { + allowFullScreen?: boolean; + allowTransparency?: boolean; + frameBorder?: number | string; + height?: number | string; + marginHeight?: number; + marginWidth?: number; + name?: string; + sandbox?: string; + scrolling?: string; + seamless?: boolean; + src?: string; + srcDoc?: string; + width?: number | string; + } + + interface ImgHTMLAttributes extends HTMLAttributes { + alt?: string; + crossOrigin?: "anonymous" | "use-credentials" | ""; + height?: number | string; + sizes?: string; + src?: string; + srcSet?: string; + useMap?: string; + width?: number | string; + } + + interface InsHTMLAttributes extends HTMLAttributes { + cite?: string; + dateTime?: string; + } + + interface InputHTMLAttributes extends HTMLAttributes { + accept?: string; + alt?: string; + autoComplete?: string; + autoFocus?: boolean; + capture?: boolean; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute + checked?: boolean; + crossOrigin?: string; + disabled?: boolean; + form?: string; + formAction?: string; + formEncType?: string; + formMethod?: string; + formNoValidate?: boolean; + formTarget?: string; + height?: number | string; + list?: string; + max?: number | string; + maxLength?: number; + min?: number | string; + minLength?: number; + multiple?: boolean; + name?: string; + pattern?: string; + placeholder?: string; + readOnly?: boolean; + required?: boolean; + size?: number; + src?: string; + step?: number | string; + type?: string; + value?: string | string[] | number; + width?: number | string; + + onChange?: ChangeEventHandler; + } + + interface KeygenHTMLAttributes extends HTMLAttributes { + autoFocus?: boolean; + challenge?: string; + disabled?: boolean; + form?: string; + keyType?: string; + keyParams?: string; + name?: string; + } + + interface LabelHTMLAttributes extends HTMLAttributes { + form?: string; + htmlFor?: string; + } + + interface LiHTMLAttributes extends HTMLAttributes { + value?: string | string[] | number; + } + + interface LinkHTMLAttributes extends HTMLAttributes { + as?: string; + crossOrigin?: string; + href?: string; + hrefLang?: string; + integrity?: string; + media?: string; + rel?: string; + sizes?: string; + type?: string; + } + + interface MapHTMLAttributes extends HTMLAttributes { + name?: string; + } + + interface MenuHTMLAttributes extends HTMLAttributes { + type?: string; + } + + interface MediaHTMLAttributes extends HTMLAttributes { + autoPlay?: boolean; + controls?: boolean; + controlsList?: string; + crossOrigin?: string; + loop?: boolean; + mediaGroup?: string; + muted?: boolean; + playsinline?: boolean; + preload?: string; + src?: string; + } + + interface MetaHTMLAttributes extends HTMLAttributes { + charSet?: string; + content?: string; + httpEquiv?: string; + name?: string; + } + + interface MeterHTMLAttributes extends HTMLAttributes { + form?: string; + high?: number; + low?: number; + max?: number | string; + min?: number | string; + optimum?: number; + value?: string | string[] | number; + } + + interface QuoteHTMLAttributes extends HTMLAttributes { + cite?: string; + } + + interface ObjectHTMLAttributes extends HTMLAttributes { + classID?: string; + data?: string; + form?: string; + height?: number | string; + name?: string; + type?: string; + useMap?: string; + width?: number | string; + wmode?: string; + } + + interface OlHTMLAttributes extends HTMLAttributes { + reversed?: boolean; + start?: number; + } + + interface OptgroupHTMLAttributes extends HTMLAttributes { + disabled?: boolean; + label?: string; + } + + interface OptionHTMLAttributes extends HTMLAttributes { + disabled?: boolean; + label?: string; + selected?: boolean; + value?: string | string[] | number; + } + + interface OutputHTMLAttributes extends HTMLAttributes { + form?: string; + htmlFor?: string; + name?: string; + } + + interface ParamHTMLAttributes extends HTMLAttributes { + name?: string; + value?: string | string[] | number; + } + + interface ProgressHTMLAttributes extends HTMLAttributes { + max?: number | string; + value?: string | string[] | number; + } + + interface ScriptHTMLAttributes extends HTMLAttributes { + async?: boolean; + charSet?: string; + crossOrigin?: string; + defer?: boolean; + integrity?: string; + nonce?: string; + src?: string; + type?: string; + } + + interface SelectHTMLAttributes extends HTMLAttributes { + autoFocus?: boolean; + disabled?: boolean; + form?: string; + multiple?: boolean; + name?: string; + required?: boolean; + size?: number; + value?: string | string[] | number; + onChange?: ChangeEventHandler; + } + + interface SourceHTMLAttributes extends HTMLAttributes { + media?: string; + sizes?: string; + src?: string; + srcSet?: string; + type?: string; + } + + interface StyleHTMLAttributes extends HTMLAttributes { + media?: string; + nonce?: string; + scoped?: boolean; + type?: string; + } + + interface TableHTMLAttributes extends HTMLAttributes { + cellPadding?: number | string; + cellSpacing?: number | string; + summary?: string; + } + + interface TextareaHTMLAttributes extends HTMLAttributes { + autoComplete?: string; + autoFocus?: boolean; + cols?: number; + dirName?: string; + disabled?: boolean; + form?: string; + maxLength?: number; + minLength?: number; + name?: string; + placeholder?: string; + readOnly?: boolean; + required?: boolean; + rows?: number; + value?: string | string[] | number; + wrap?: string; + + onChange?: ChangeEventHandler; + } + + interface TdHTMLAttributes extends HTMLAttributes { + colSpan?: number; + headers?: string; + rowSpan?: number; + scope?: string; + } + + interface ThHTMLAttributes extends HTMLAttributes { + colSpan?: number; + headers?: string; + rowSpan?: number; + scope?: string; + } + + interface TimeHTMLAttributes extends HTMLAttributes { + dateTime?: string; + } + + interface TrackHTMLAttributes extends HTMLAttributes { + default?: boolean; + kind?: string; + label?: string; + src?: string; + srcLang?: string; + } + + interface VideoHTMLAttributes extends MediaHTMLAttributes { + height?: number | string; + playsInline?: boolean; + poster?: string; + width?: number | string; + } + + // this list is "complete" in that it contains every SVG attribute + // that React supports, but the types can be improved. + // Full list here: https://facebook.github.io/react/docs/dom-elements.html + // + // The three broad type categories are (in order of restrictiveness): + // - "number | string" + // - "string" + // - union of string literals + interface SVGAttributes extends DOMAttributes { + // Attributes which also defined in HTMLAttributes + // See comment in SVGDOMPropertyConfig.js + className?: string; + color?: string; + height?: number | string; + id?: string; + lang?: string; + max?: number | string; + media?: string; + method?: string; + min?: number | string; + name?: string; + style?: CSSProperties; + target?: string; + type?: string; + width?: number | string; + + // Other HTML properties supported by SVG elements in browsers + role?: string; + tabIndex?: number; + + // SVG Specific attributes + accentHeight?: number | string; + accumulate?: "none" | "sum"; + additive?: "replace" | "sum"; + alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | + "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit"; + allowReorder?: "no" | "yes"; + alphabetic?: number | string; + amplitude?: number | string; + arabicForm?: "initial" | "medial" | "terminal" | "isolated"; + ascent?: number | string; + attributeName?: string; + attributeType?: string; + autoReverse?: number | string; + azimuth?: number | string; + baseFrequency?: number | string; + baselineShift?: number | string; + baseProfile?: number | string; + bbox?: number | string; + begin?: number | string; + bias?: number | string; + by?: number | string; + calcMode?: number | string; + capHeight?: number | string; + clip?: number | string; + clipPath?: string; + clipPathUnits?: number | string; + clipRule?: number | string; + colorInterpolation?: number | string; + colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit"; + colorProfile?: number | string; + colorRendering?: number | string; + contentScriptType?: number | string; + contentStyleType?: number | string; + cursor?: number | string; + cx?: number | string; + cy?: number | string; + d?: string; + decelerate?: number | string; + descent?: number | string; + diffuseConstant?: number | string; + direction?: number | string; + display?: number | string; + divisor?: number | string; + dominantBaseline?: number | string; + dur?: number | string; + dx?: number | string; + dy?: number | string; + edgeMode?: number | string; + elevation?: number | string; + enableBackground?: number | string; + end?: number | string; + exponent?: number | string; + externalResourcesRequired?: number | string; + fill?: string; + fillOpacity?: number | string; + fillRule?: "nonzero" | "evenodd" | "inherit"; + filter?: string; + filterRes?: number | string; + filterUnits?: number | string; + floodColor?: number | string; + floodOpacity?: number | string; + focusable?: number | string; + fontFamily?: string; + fontSize?: number | string; + fontSizeAdjust?: number | string; + fontStretch?: number | string; + fontStyle?: number | string; + fontVariant?: number | string; + fontWeight?: number | string; + format?: number | string; + from?: number | string; + fx?: number | string; + fy?: number | string; + g1?: number | string; + g2?: number | string; + glyphName?: number | string; + glyphOrientationHorizontal?: number | string; + glyphOrientationVertical?: number | string; + glyphRef?: number | string; + gradientTransform?: string; + gradientUnits?: string; + hanging?: number | string; + horizAdvX?: number | string; + horizOriginX?: number | string; + ideographic?: number | string; + imageRendering?: number | string; + in2?: number | string; + in?: string; + intercept?: number | string; + k1?: number | string; + k2?: number | string; + k3?: number | string; + k4?: number | string; + k?: number | string; + kernelMatrix?: number | string; + kernelUnitLength?: number | string; + kerning?: number | string; + keyPoints?: number | string; + keySplines?: number | string; + keyTimes?: number | string; + lengthAdjust?: number | string; + letterSpacing?: number | string; + lightingColor?: number | string; + limitingConeAngle?: number | string; + local?: number | string; + markerEnd?: string; + markerHeight?: number | string; + markerMid?: string; + markerStart?: string; + markerUnits?: number | string; + markerWidth?: number | string; + mask?: string; + maskContentUnits?: number | string; + maskUnits?: number | string; + mathematical?: number | string; + mode?: number | string; + numOctaves?: number | string; + offset?: number | string; + opacity?: number | string; + operator?: number | string; + order?: number | string; + orient?: number | string; + orientation?: number | string; + origin?: number | string; + overflow?: number | string; + overlinePosition?: number | string; + overlineThickness?: number | string; + paintOrder?: number | string; + panose1?: number | string; + pathLength?: number | string; + patternContentUnits?: string; + patternTransform?: number | string; + patternUnits?: string; + pointerEvents?: number | string; + points?: string; + pointsAtX?: number | string; + pointsAtY?: number | string; + pointsAtZ?: number | string; + preserveAlpha?: number | string; + preserveAspectRatio?: string; + primitiveUnits?: number | string; + r?: number | string; + radius?: number | string; + refX?: number | string; + refY?: number | string; + renderingIntent?: number | string; + repeatCount?: number | string; + repeatDur?: number | string; + requiredExtensions?: number | string; + requiredFeatures?: number | string; + restart?: number | string; + result?: string; + rotate?: number | string; + rx?: number | string; + ry?: number | string; + scale?: number | string; + seed?: number | string; + shapeRendering?: number | string; + slope?: number | string; + spacing?: number | string; + specularConstant?: number | string; + specularExponent?: number | string; + speed?: number | string; + spreadMethod?: string; + startOffset?: number | string; + stdDeviation?: number | string; + stemh?: number | string; + stemv?: number | string; + stitchTiles?: number | string; + stopColor?: string; + stopOpacity?: number | string; + strikethroughPosition?: number | string; + strikethroughThickness?: number | string; + string?: number | string; + stroke?: string; + strokeDasharray?: string | number; + strokeDashoffset?: string | number; + strokeLinecap?: "butt" | "round" | "square" | "inherit"; + strokeLinejoin?: "miter" | "round" | "bevel" | "inherit"; + strokeMiterlimit?: number | string; + strokeOpacity?: number | string; + strokeWidth?: number | string; + surfaceScale?: number | string; + systemLanguage?: number | string; + tableValues?: number | string; + targetX?: number | string; + targetY?: number | string; + textAnchor?: string; + textDecoration?: number | string; + textLength?: number | string; + textRendering?: number | string; + to?: number | string; + transform?: string; + u1?: number | string; + u2?: number | string; + underlinePosition?: number | string; + underlineThickness?: number | string; + unicode?: number | string; + unicodeBidi?: number | string; + unicodeRange?: number | string; + unitsPerEm?: number | string; + vAlphabetic?: number | string; + values?: string; + vectorEffect?: number | string; + version?: string; + vertAdvY?: number | string; + vertOriginX?: number | string; + vertOriginY?: number | string; + vHanging?: number | string; + vIdeographic?: number | string; + viewBox?: string; + viewTarget?: number | string; + visibility?: number | string; + vMathematical?: number | string; + widths?: number | string; + wordSpacing?: number | string; + writingMode?: number | string; + x1?: number | string; + x2?: number | string; + x?: number | string; + xChannelSelector?: string; + xHeight?: number | string; + xlinkActuate?: string; + xlinkArcrole?: string; + xlinkHref?: string; + xlinkRole?: string; + xlinkShow?: string; + xlinkTitle?: string; + xlinkType?: string; + xmlBase?: string; + xmlLang?: string; + xmlns?: string; + xmlnsXlink?: string; + xmlSpace?: string; + y1?: number | string; + y2?: number | string; + y?: number | string; + yChannelSelector?: string; + z?: number | string; + zoomAndPan?: string; + } + + interface WebViewHTMLAttributes extends HTMLAttributes { + allowFullScreen?: boolean; + allowpopups?: boolean; + autoFocus?: boolean; + autosize?: boolean; + blinkfeatures?: string; + disableblinkfeatures?: string; + disableguestresize?: boolean; + disablewebsecurity?: boolean; + guestinstance?: string; + httpreferrer?: string; + nodeintegration?: boolean; + partition?: string; + plugins?: boolean; + preload?: string; + src?: string; + useragent?: string; + webpreferences?: string; + } + + // + // React.DOM + // ---------------------------------------------------------------------- + + interface InfernoHTML { + a: DetailedHTMLFactory, HTMLAnchorElement>; + abbr: DetailedHTMLFactory, HTMLElement>; + address: DetailedHTMLFactory, HTMLElement>; + area: DetailedHTMLFactory, HTMLAreaElement>; + article: DetailedHTMLFactory, HTMLElement>; + aside: DetailedHTMLFactory, HTMLElement>; + audio: DetailedHTMLFactory, HTMLAudioElement>; + b: DetailedHTMLFactory, HTMLElement>; + base: DetailedHTMLFactory, HTMLBaseElement>; + bdi: DetailedHTMLFactory, HTMLElement>; + bdo: DetailedHTMLFactory, HTMLElement>; + big: DetailedHTMLFactory, HTMLElement>; + blockquote: DetailedHTMLFactory, HTMLElement>; + body: DetailedHTMLFactory, HTMLBodyElement>; + br: DetailedHTMLFactory, HTMLBRElement>; + button: DetailedHTMLFactory, HTMLButtonElement>; + canvas: DetailedHTMLFactory, HTMLCanvasElement>; + caption: DetailedHTMLFactory, HTMLElement>; + cite: DetailedHTMLFactory, HTMLElement>; + code: DetailedHTMLFactory, HTMLElement>; + col: DetailedHTMLFactory, HTMLTableColElement>; + colgroup: DetailedHTMLFactory, HTMLTableColElement>; + data: DetailedHTMLFactory, HTMLElement>; + datalist: DetailedHTMLFactory, HTMLDataListElement>; + dd: DetailedHTMLFactory, HTMLElement>; + del: DetailedHTMLFactory, HTMLElement>; + details: DetailedHTMLFactory, HTMLElement>; + dfn: DetailedHTMLFactory, HTMLElement>; + dialog: DetailedHTMLFactory, HTMLDialogElement>; + div: DetailedHTMLFactory, HTMLDivElement>; + dl: DetailedHTMLFactory, HTMLDListElement>; + dt: DetailedHTMLFactory, HTMLElement>; + em: DetailedHTMLFactory, HTMLElement>; + embed: DetailedHTMLFactory, HTMLEmbedElement>; + fieldset: DetailedHTMLFactory, HTMLFieldSetElement>; + figcaption: DetailedHTMLFactory, HTMLElement>; + figure: DetailedHTMLFactory, HTMLElement>; + footer: DetailedHTMLFactory, HTMLElement>; + form: DetailedHTMLFactory, HTMLFormElement>; + h1: DetailedHTMLFactory, HTMLHeadingElement>; + h2: DetailedHTMLFactory, HTMLHeadingElement>; + h3: DetailedHTMLFactory, HTMLHeadingElement>; + h4: DetailedHTMLFactory, HTMLHeadingElement>; + h5: DetailedHTMLFactory, HTMLHeadingElement>; + h6: DetailedHTMLFactory, HTMLHeadingElement>; + head: DetailedHTMLFactory, HTMLHeadElement>; + header: DetailedHTMLFactory, HTMLElement>; + hgroup: DetailedHTMLFactory, HTMLElement>; + hr: DetailedHTMLFactory, HTMLHRElement>; + html: DetailedHTMLFactory, HTMLHtmlElement>; + i: DetailedHTMLFactory, HTMLElement>; + iframe: DetailedHTMLFactory, HTMLIFrameElement>; + img: DetailedHTMLFactory, HTMLImageElement>; + input: DetailedHTMLFactory, HTMLInputElement>; + ins: DetailedHTMLFactory, HTMLModElement>; + kbd: DetailedHTMLFactory, HTMLElement>; + keygen: DetailedHTMLFactory, HTMLElement>; + label: DetailedHTMLFactory, HTMLLabelElement>; + legend: DetailedHTMLFactory, HTMLLegendElement>; + li: DetailedHTMLFactory, HTMLLIElement>; + link: DetailedHTMLFactory, HTMLLinkElement>; + main: DetailedHTMLFactory, HTMLElement>; + map: DetailedHTMLFactory, HTMLMapElement>; + mark: DetailedHTMLFactory, HTMLElement>; + menu: DetailedHTMLFactory, HTMLElement>; + menuitem: DetailedHTMLFactory, HTMLElement>; + meta: DetailedHTMLFactory, HTMLMetaElement>; + meter: DetailedHTMLFactory, HTMLElement>; + nav: DetailedHTMLFactory, HTMLElement>; + noscript: DetailedHTMLFactory, HTMLElement>; + object: DetailedHTMLFactory, HTMLObjectElement>; + ol: DetailedHTMLFactory, HTMLOListElement>; + optgroup: DetailedHTMLFactory, HTMLOptGroupElement>; + option: DetailedHTMLFactory, HTMLOptionElement>; + output: DetailedHTMLFactory, HTMLElement>; + p: DetailedHTMLFactory, HTMLParagraphElement>; + param: DetailedHTMLFactory, HTMLParamElement>; + picture: DetailedHTMLFactory, HTMLElement>; + pre: DetailedHTMLFactory, HTMLPreElement>; + progress: DetailedHTMLFactory, HTMLProgressElement>; + q: DetailedHTMLFactory, HTMLQuoteElement>; + rp: DetailedHTMLFactory, HTMLElement>; + rt: DetailedHTMLFactory, HTMLElement>; + ruby: DetailedHTMLFactory, HTMLElement>; + s: DetailedHTMLFactory, HTMLElement>; + samp: DetailedHTMLFactory, HTMLElement>; + script: DetailedHTMLFactory, HTMLScriptElement>; + section: DetailedHTMLFactory, HTMLElement>; + select: DetailedHTMLFactory, HTMLSelectElement>; + small: DetailedHTMLFactory, HTMLElement>; + source: DetailedHTMLFactory, HTMLSourceElement>; + span: DetailedHTMLFactory, HTMLSpanElement>; + strong: DetailedHTMLFactory, HTMLElement>; + style: DetailedHTMLFactory, HTMLStyleElement>; + sub: DetailedHTMLFactory, HTMLElement>; + summary: DetailedHTMLFactory, HTMLElement>; + sup: DetailedHTMLFactory, HTMLElement>; + table: DetailedHTMLFactory, HTMLTableElement>; + tbody: DetailedHTMLFactory, HTMLTableSectionElement>; + td: DetailedHTMLFactory, HTMLTableDataCellElement>; + textarea: DetailedHTMLFactory, HTMLTextAreaElement>; + tfoot: DetailedHTMLFactory, HTMLTableSectionElement>; + th: DetailedHTMLFactory, HTMLTableHeaderCellElement>; + thead: DetailedHTMLFactory, HTMLTableSectionElement>; + time: DetailedHTMLFactory, HTMLElement>; + title: DetailedHTMLFactory, HTMLTitleElement>; + tr: DetailedHTMLFactory, HTMLTableRowElement>; + track: DetailedHTMLFactory, HTMLTrackElement>; + u: DetailedHTMLFactory, HTMLElement>; + ul: DetailedHTMLFactory, HTMLUListElement>; + "var": DetailedHTMLFactory, HTMLElement>; + video: DetailedHTMLFactory, HTMLVideoElement>; + wbr: DetailedHTMLFactory, HTMLElement>; + // webview: DetailedHTMLFactory, HTMLWebViewElement>; + } + + interface InfernoSVG { + animate: SVGFactory; + circle: SVGFactory; + clipPath: SVGFactory; + defs: SVGFactory; + desc: SVGFactory; + ellipse: SVGFactory; + feBlend: SVGFactory; + feColorMatrix: SVGFactory; + feComponentTransfer: SVGFactory; + feComposite: SVGFactory; + feConvolveMatrix: SVGFactory; + feDiffuseLighting: SVGFactory; + feDisplacementMap: SVGFactory; + feDistantLight: SVGFactory; + feDropShadow: SVGFactory; + feFlood: SVGFactory; + feFuncA: SVGFactory; + feFuncB: SVGFactory; + feFuncG: SVGFactory; + feFuncR: SVGFactory; + feGaussianBlur: SVGFactory; + feImage: SVGFactory; + feMerge: SVGFactory; + feMergeNode: SVGFactory; + feMorphology: SVGFactory; + feOffset: SVGFactory; + fePointLight: SVGFactory; + feSpecularLighting: SVGFactory; + feSpotLight: SVGFactory; + feTile: SVGFactory; + feTurbulence: SVGFactory; + filter: SVGFactory; + foreignObject: SVGFactory; + g: SVGFactory; + image: SVGFactory; + line: SVGFactory; + linearGradient: SVGFactory; + marker: SVGFactory; + mask: SVGFactory; + metadata: SVGFactory; + path: SVGFactory; + pattern: SVGFactory; + polygon: SVGFactory; + polyline: SVGFactory; + radialGradient: SVGFactory; + rect: SVGFactory; + stop: SVGFactory; + svg: SVGFactory; + switch: SVGFactory; + symbol: SVGFactory; + text: SVGFactory; + textPath: SVGFactory; + tspan: SVGFactory; + use: SVGFactory; + view: SVGFactory; + } + + // + // Browser Interfaces + // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts + // ---------------------------------------------------------------------- + + interface AbstractView { + styleMedia: StyleMedia; + document: Document; + } + + interface Touch { + identifier: number; + target: EventTarget; + screenX: number; + screenY: number; + clientX: number; + clientY: number; + pageX: number; + pageY: number; + } + + interface TouchList { + [index: number]: Touch; + + length: number; + + item(index: number): Touch; + + identifiedTouch(identifier: number): Touch; + } + } + + + namespace JSX { + // tslint:disable-next-line:no-empty-interface + interface Element extends VNode { + } + + interface ElementClass extends Component { + // render(): InfernoJSX.InfernoJSXNode; + } + + interface ElementAttributesProperty { + props: {}; + } + + interface ElementChildrenAttribute { + children: {}; + } + + // tslint:disable-next-line:no-empty-interface + interface IntrinsicAttributes extends _InfernoJSX.Attributes { + } + + // tslint:disable-next-line:no-empty-interface + interface IntrinsicClassAttributes extends _InfernoJSX.ClassAttributes { + } + + interface IntrinsicElements { + // HTML + a: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.AnchorHTMLAttributes, HTMLAnchorElement>; + abbr: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + address: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + area: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.AreaHTMLAttributes, HTMLAreaElement>; + article: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + aside: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + audio: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.AudioHTMLAttributes, HTMLAudioElement>; + b: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + base: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.BaseHTMLAttributes, HTMLBaseElement>; + bdi: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + bdo: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + big: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + blockquote: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.BlockquoteHTMLAttributes, HTMLElement>; + body: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLBodyElement>; + br: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLBRElement>; + button: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.ButtonHTMLAttributes, HTMLButtonElement>; + canvas: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.CanvasHTMLAttributes, HTMLCanvasElement>; + caption: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + cite: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + code: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + col: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.ColHTMLAttributes, HTMLTableColElement>; + colgroup: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.ColgroupHTMLAttributes, HTMLTableColElement>; + data: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + datalist: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLDataListElement>; + dd: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + del: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.DelHTMLAttributes, HTMLElement>; + details: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.DetailsHTMLAttributes, HTMLElement>; + dfn: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + dialog: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.DialogHTMLAttributes, HTMLDialogElement>; + div: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLDivElement>; + dl: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLDListElement>; + dt: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + em: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + embed: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.EmbedHTMLAttributes, HTMLEmbedElement>; + fieldset: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.FieldsetHTMLAttributes, HTMLFieldSetElement>; + figcaption: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + figure: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + footer: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + form: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.FormHTMLAttributes, HTMLFormElement>; + h1: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLHeadingElement>; + h2: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLHeadingElement>; + h3: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLHeadingElement>; + h4: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLHeadingElement>; + h5: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLHeadingElement>; + h6: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLHeadingElement>; + head: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLHeadElement>; + header: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + hgroup: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + hr: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLHRElement>; + html: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HtmlHTMLAttributes, HTMLHtmlElement>; + i: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + iframe: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.IframeHTMLAttributes, HTMLIFrameElement>; + img: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.ImgHTMLAttributes, HTMLImageElement>; + input: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.InputHTMLAttributes, HTMLInputElement>; + ins: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.InsHTMLAttributes, HTMLModElement>; + kbd: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + keygen: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.KeygenHTMLAttributes, HTMLElement>; + label: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.LabelHTMLAttributes, HTMLLabelElement>; + legend: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLLegendElement>; + li: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.LiHTMLAttributes, HTMLLIElement>; + link: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.LinkHTMLAttributes, HTMLLinkElement>; + main: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + map: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.MapHTMLAttributes, HTMLMapElement>; + mark: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + menu: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.MenuHTMLAttributes, HTMLElement>; + menuitem: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + meta: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.MetaHTMLAttributes, HTMLMetaElement>; + meter: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.MeterHTMLAttributes, HTMLElement>; + nav: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + noindex: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + noscript: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + object: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.ObjectHTMLAttributes, HTMLObjectElement>; + ol: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.OlHTMLAttributes, HTMLOListElement>; + optgroup: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.OptgroupHTMLAttributes, HTMLOptGroupElement>; + option: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.OptionHTMLAttributes, HTMLOptionElement>; + output: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.OutputHTMLAttributes, HTMLElement>; + p: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLParagraphElement>; + param: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.ParamHTMLAttributes, HTMLParamElement>; + picture: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + pre: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLPreElement>; + progress: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.ProgressHTMLAttributes, HTMLProgressElement>; + q: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.QuoteHTMLAttributes, HTMLQuoteElement>; + rp: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + rt: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + ruby: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + s: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + samp: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + script: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.ScriptHTMLAttributes, HTMLScriptElement>; + section: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + select: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.SelectHTMLAttributes, HTMLSelectElement>; + small: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + source: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.SourceHTMLAttributes, HTMLSourceElement>; + span: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLSpanElement>; + strong: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + style: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.StyleHTMLAttributes, HTMLStyleElement>; + sub: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + summary: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + sup: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + table: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.TableHTMLAttributes, HTMLTableElement>; + tbody: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLTableSectionElement>; + td: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.TdHTMLAttributes, HTMLTableDataCellElement>; + textarea: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.TextareaHTMLAttributes, HTMLTextAreaElement>; + tfoot: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLTableSectionElement>; + th: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.ThHTMLAttributes, HTMLTableHeaderCellElement>; + thead: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLTableSectionElement>; + time: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.TimeHTMLAttributes, HTMLElement>; + title: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLTitleElement>; + tr: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLTableRowElement>; + track: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.TrackHTMLAttributes, HTMLTrackElement>; + u: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + ul: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLUListElement>; + "var": _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + video: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.VideoHTMLAttributes, HTMLVideoElement>; + wbr: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.HTMLAttributes, HTMLElement>; + // webview: _InfernoJSX.DetailedHTMLProps<_InfernoJSX.WebViewHTMLAttributes, HTMLWebViewElement>; + + // SVG + svg: _InfernoJSX.SVGProps; + + animate: _InfernoJSX.SVGProps; // TODO: It is SVGAnimateElement but is not in TypeScript's lib.dom.d.ts for now. + animateTransform: _InfernoJSX.SVGProps; // TODO: It is SVGAnimateTransformElement but is not in TypeScript's lib.dom.d.ts for now. + circle: _InfernoJSX.SVGProps; + clipPath: _InfernoJSX.SVGProps; + defs: _InfernoJSX.SVGProps; + desc: _InfernoJSX.SVGProps; + ellipse: _InfernoJSX.SVGProps; + feBlend: _InfernoJSX.SVGProps; + feColorMatrix: _InfernoJSX.SVGProps; + feComponentTransfer: _InfernoJSX.SVGProps; + feComposite: _InfernoJSX.SVGProps; + feConvolveMatrix: _InfernoJSX.SVGProps; + feDiffuseLighting: _InfernoJSX.SVGProps; + feDisplacementMap: _InfernoJSX.SVGProps; + feDistantLight: _InfernoJSX.SVGProps; + feFlood: _InfernoJSX.SVGProps; + feFuncA: _InfernoJSX.SVGProps; + feFuncB: _InfernoJSX.SVGProps; + feFuncG: _InfernoJSX.SVGProps; + feFuncR: _InfernoJSX.SVGProps; + feGaussianBlur: _InfernoJSX.SVGProps; + feImage: _InfernoJSX.SVGProps; + feMerge: _InfernoJSX.SVGProps; + feMergeNode: _InfernoJSX.SVGProps; + feMorphology: _InfernoJSX.SVGProps; + feOffset: _InfernoJSX.SVGProps; + fePointLight: _InfernoJSX.SVGProps; + feSpecularLighting: _InfernoJSX.SVGProps; + feSpotLight: _InfernoJSX.SVGProps; + feTile: _InfernoJSX.SVGProps; + feTurbulence: _InfernoJSX.SVGProps; + filter: _InfernoJSX.SVGProps; + foreignObject: _InfernoJSX.SVGProps; + g: _InfernoJSX.SVGProps; + image: _InfernoJSX.SVGProps; + line: _InfernoJSX.SVGProps; + linearGradient: _InfernoJSX.SVGProps; + marker: _InfernoJSX.SVGProps; + mask: _InfernoJSX.SVGProps; + metadata: _InfernoJSX.SVGProps; + path: _InfernoJSX.SVGProps; + pattern: _InfernoJSX.SVGProps; + polygon: _InfernoJSX.SVGProps; + polyline: _InfernoJSX.SVGProps; + radialGradient: _InfernoJSX.SVGProps; + rect: _InfernoJSX.SVGProps; + stop: _InfernoJSX.SVGProps; + switch: _InfernoJSX.SVGProps; + symbol: _InfernoJSX.SVGProps; + text: _InfernoJSX.SVGProps; + textPath: _InfernoJSX.SVGProps; + tspan: _InfernoJSX.SVGProps; + use: _InfernoJSX.SVGProps; + view: _InfernoJSX.SVGProps; + } + } +} diff --git a/packages/inferno/src/core/component.ts b/packages/inferno/src/core/component.ts index 52590ed72..74d7386eb 100644 --- a/packages/inferno/src/core/component.ts +++ b/packages/inferno/src/core/component.ts @@ -1,5 +1,5 @@ import { VNodeFlags } from 'inferno-vnode-flags'; -import { Props, VNode } from './implementation'; +import { Props, VNode, InfernoChildren } from './implementation'; import { combineFrom, isFunction, isNull, isNullOrUndef, throwError } from 'inferno-shared'; import { updateClassComponent } from '../DOM/patching'; import { callAll, EMPTY_OBJ, LIFECYCLE } from '../DOM/utils/common'; @@ -109,6 +109,25 @@ function applyState(component: Component, force: boolean, callback?: } } +export interface ComponentLifecycle { + componentDidMount?(): void; + + componentWillMount?(): void; + + componentWillReceiveProps?(nextProps: P, nextContext: any): void; + + shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean; + + componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void; + + componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void; + + componentWillUnmount?(): void; + + getChildContext?(): void; +} + +export interface Component

extends ComponentLifecycle {} export class Component { // Public public static defaultProps: {} | null = null; @@ -128,7 +147,7 @@ export class Component { public $UPD: boolean = true; // UPDATING public $QU: Function[] | null = null; // QUEUE - constructor(props?: P, context?: any) { + constructor(props: P, context?: any) { /** @type {object} */ this.props = props || (EMPTY_OBJ as P); @@ -136,23 +155,6 @@ export class Component { this.context = context || EMPTY_OBJ; // context should not be mutable } - // LifeCycle methods - public componentDidMount?(): void; - - public componentWillMount?(): void; - - public componentWillReceiveProps?(nextProps: P, nextContext: any): void; - - public shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean; - - public componentWillUpdate?(nextProps: P, nextState: S, nextContext: any): void; - - public componentDidUpdate?(prevProps: P, prevState: S, prevContext: any): void; - - public componentWillUnmount?(): void; - - public getChildContext?(): void; - public forceUpdate(callback?: Function) { if (this.$UN) { return; @@ -177,5 +179,34 @@ export class Component { } // tslint:disable-next-line:no-empty - public render(nextProps?: P, nextState?, nextContext?): any {} + public render(nextProps?: P, nextState?, nextContext?): InfernoChildren { + return undefined; + } +} + +export type ComponentType

= ComponentClass

| StatelessComponent

; + +export type SFC

= StatelessComponent

; + +export interface StatelessComponent

{ + (props: P & { children?: InfernoChildren }, context?: any): VNode

| null; + + defaultProps?: Partial

; + displayName?: string; } + +export interface ComponentClass

{ + new (props?: P, context?: any): Component; + + defaultProps?: Partial

; + displayName?: string; +} + +export type Validator = { bivarianceHack(object: T, key: string, componentName: string, ...rest: any[]): Error | null }["bivarianceHack"]; + +export interface Requireable extends Validator { + isRequired: Validator; +} + +export type ValidationMap = {[K in keyof T]?: Validator }; + diff --git a/packages/inferno/src/core/implementation.ts b/packages/inferno/src/core/implementation.ts index ff533ec68..bf092a217 100644 --- a/packages/inferno/src/core/implementation.ts +++ b/packages/inferno/src/core/implementation.ts @@ -17,7 +17,7 @@ import { validateVNodeElementChildren } from './validate'; const keyPrefix = '$'; -export interface VNode { +export interface VNode

{ children: InfernoChildren; childFlags: ChildFlags; dom: Element | null; @@ -26,28 +26,27 @@ export interface VNode { isValidated?: boolean; key: null | number | string; parentVNode: VNode | null; - props: Props | null; - ref: Ref | Refs | null; + props: Props & P | null; + ref: Ref | Refs

| null; type: any; } export type InfernoInput = VNode | null | string | number; -export type Ref = (node?: Element | null) => any; +export type Ref = { bivarianceHack(instance: T | null): any }["bivarianceHack"]; export type InfernoChildren = string | number | boolean | undefined | VNode | Array | null; -export interface Props { +export interface Props { children?: InfernoChildren; - ref?: Ref | null; + ref?: Ref | null; key?: any; className?: string; - [k: string]: any; } -export interface Refs { +export interface Refs

{ onComponentDidMount?: (domNode: Element) => void; onComponentWillMount?(): void; - onComponentShouldUpdate?(lastProps, nextProps): boolean; - onComponentWillUpdate?(lastProps, nextProps): void; - onComponentDidUpdate?(lastProps, nextProps): void; + onComponentShouldUpdate?(lastProps: P, nextProps: P): boolean; + onComponentWillUpdate?(lastProps: P, nextProps: P): void; + onComponentDidUpdate?(lastProps: P, nextProps: P): void; onComponentWillUnmount?(domNode: Element): void; } @@ -82,15 +81,15 @@ function getVNode(childFlags: ChildFlags, children, className: string | null | u }; } -export function createVNode( +export function createVNode

( flags: VNodeFlags, type, className?: string | null, children?: InfernoChildren, childFlags?: ChildFlags, - props?: Props | null, + props?: Props & P | null, key?: string | number | null, - ref?: Ref | Refs | null + ref?: Ref | Refs

| null ): VNode { if (process.env.NODE_ENV !== 'production') { if (flags & VNodeFlags.Component) { @@ -117,7 +116,7 @@ export function createVNode( return vNode; } -export function createComponentVNode(flags: VNodeFlags, type, props?: Props | null, key?: null | string | number, ref?: Ref | Refs | null) { +export function createComponentVNode

(flags: VNodeFlags, type, props?: Props & P | null, key?: null | string | number, ref?: Ref | Refs

| null) { if (process.env.NODE_ENV !== 'production') { if (flags & VNodeFlags.HtmlElement) { throwError('Creating element vNodes using createComponentVNode is not allowed. Use Inferno.createVNode method.'); @@ -133,11 +132,11 @@ export function createComponentVNode(flags: VNodeFlags, type, props?: Props | nu if (!isNullOrUndef(defaultProps)) { if (!props) { - props = {}; // Props can be referenced and modified at application level so always create new object + (props as any) = {}; // Props can be referenced and modified at application level so always create new object } for (const prop in defaultProps) { - if (isUndefined(props[prop])) { - props[prop] = defaultProps[prop]; + if (isUndefined(props![prop])) { + props![prop] = defaultProps[prop]; } } } diff --git a/packages/inferno/src/index.ts b/packages/inferno/src/index.ts index f10658f02..39879046f 100644 --- a/packages/inferno/src/index.ts +++ b/packages/inferno/src/index.ts @@ -10,16 +10,27 @@ import { normalizeProps, options, Props, + Ref, Refs, VNode } from './core/implementation'; -import { linkEvent } from './DOM/events/linkEvent'; +import { linkEvent, LinkedEvent } from './DOM/events/linkEvent'; import { createPortal, createRenderer, render } from './DOM/rendering'; import { EMPTY_OBJ } from './DOM/utils/common'; -import { Component } from './core/component'; +import { + Component, + ComponentClass, + ComponentLifecycle, + ComponentType, + SFC, + StatelessComponent +} from './core/component'; import { getNumberStyleValue } from './DOM/props'; import { hydrate } from './DOM/hydration'; +import * as JSX from "./JSX"; +export * from "./DOM/events/events"; + if (process.env.NODE_ENV !== 'production') { /* tslint:disable-next-line:no-empty */ const testFunc = function testFn() {}; @@ -37,11 +48,17 @@ const version = process.env.INFERNO_VERSION; export { Component, + ComponentLifecycle, + ComponentType, + SFC, + StatelessComponent, + ComponentClass, EMPTY_OBJ, InfernoChildren, InfernoInput, NO_OP, Props, + Ref, Refs, VNode, createComponentVNode, @@ -54,8 +71,10 @@ export { getNumberStyleValue, hydrate, linkEvent, + LinkedEvent, normalizeProps, options, render, - version + version, + JSX };