feat(typings): add Popup, Embed, Reveal and other updates (#1136)

feat(typings): add Popup, Embed, Reveal and other updates

index.d.ts

@@ -5,6 +5,7 @@ export * from './dist/commonjs/addons/Confirm';
 export * from './dist/commonjs/addons/Radio';
 export * from './dist/commonjs/addons/Select';
 export * from './dist/commonjs/addons/TextArea';
+export * from './dist/commonjs/addons/Portal';
 
 /**
  * Collections
@@ -31,7 +32,7 @@ export * from './dist/commonjs/elements/Label';
 export * from './dist/commonjs/elements/List';
 export * from './dist/commonjs/elements/Loader';
 export * from './dist/commonjs/elements/Rail';
-// export * from './dist/commonjs/elements/Reveal';
+export * from './dist/commonjs/elements/Reveal';
 export * from './dist/commonjs/elements/Segment';
 export * from './dist/commonjs/elements/Step';
 
@@ -42,7 +43,7 @@ export * from './dist/commonjs/modules/Accordion';
 export * from './dist/commonjs/modules/Checkbox';
 export * from './dist/commonjs/modules/Dimmer';
 export * from './dist/commonjs/modules/Dropdown';
-//export * from './dist/commonjs/modules/Embed';
+export * from './dist/commonjs/modules/Embed';
 export * from './dist/commonjs/modules/Modal';
 export * from './dist/commonjs/modules/Popup';
 export * from './dist/commonjs/modules/Progress';

src/addons/Portal/index.d.ts

@@ -0,0 +1,100 @@
+import * as React from 'react';
+
+export interface PortalProps {
+  /** Additional classes. */
+  className?: string;
+
+  /** Controls whether or not the portal should close on a click outside. */
+  closeOnDocumentClick?: boolean;
+
+  /** Controls whether or not the portal should close when escape is pressed is displayed. */
+  closeOnEscape?: boolean;
+
+  /**
+   * Controls whether or not the portal should close when mousing out of the portal.
+   * NOTE: This will prevent `closeOnTriggerMouseLeave` when mousing over the
+   * gap from the trigger to the portal.
+   */
+  closeOnPortalMouseLeave?: boolean;
+
+  /**
+   * Controls whether or not the portal should close on a click on the portal background.
+   * NOTE: This differs from closeOnDocumentClick:
+   * - DocumentClick - any click not within the portal
+   * - RootNodeClick - a click not within the portal but within the portal's wrapper
+   */
+  closeOnRootNodeClick?: boolean;
+
+  /** Controls whether or not the portal should close on blur of the trigger. */
+  closeOnTriggerBlur?: boolean;
+
+  /** Controls whether or not the portal should close on click of the trigger. */
+  closeOnTriggerClick?: boolean;
+
+  /** Controls whether or not the portal should close when mousing out of the trigger. */
+  closeOnTriggerMouseLeave?: boolean;
+
+  /** Initial value of open. */
+  defaultOpen?: boolean;
+
+  /** The node where the portal should mount. */
+  mountNode?: any;
+
+  /** Milliseconds to wait before opening on mouse over */
+  mouseEnterDelay?: number;
+
+  /** Milliseconds to wait before closing on mouse leave */
+  mouseLeaveDelay?: number;
+
+  /**
+   * Called when a close event happens
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onClose?: React.MouseEventHandler<HTMLDivElement>;
+
+  /**
+   * Called when the portal is mounted on the DOM
+   *
+   * @param {null}
+   * @param {object} data - All props.
+   */
+  onMount?: (nothing: null, props: PortalProps) => void;
+
+  /**
+   * Called when an open event happens
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onOpen?: React.MouseEventHandler<HTMLDivElement>;
+
+  /**
+   * Called when the portal is unmounted from the DOM
+   *
+   * @param {null}
+   * @param {object} data - All props.
+   */
+  onUnmount?: (nothing: null, props: PortalProps) => void;
+
+  /** Controls whether or not the portal is displayed. */
+  open?: boolean;
+
+  /** Controls whether or not the portal should open when the trigger is clicked. */
+  openOnTriggerClick?: boolean;
+
+  /** Controls whether or not the portal should open on focus of the trigger. */
+  openOnTriggerFocus?: boolean;
+
+  /** Controls whether or not the portal should open when mousing over the trigger. */
+  openOnTriggerMouseEnter?: boolean;
+
+  /** Controls whether the portal should be prepended to the mountNode instead of appended. */
+  prepend?: boolean;
+
+  /** Element to be rendered in-place where the portal is defined. */
+  trigger?: React.ReactNode;
+}
+
+export const Portal: React.ComponentClass<PortalProps>;

src/addons/TextArea/index.d.ts

@@ -1,21 +1,27 @@
 import * as React from 'react';
 import { FormTextAreaProps } from '../../collections/Form/index';
 
-export interface TextareaProps extends FormTextAreaProps{
-  
+export interface TextAreaProps extends FormTextAreaProps {
+
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** Indicates whether height of the textarea fits the content or not */
+  autoHeight?: boolean;
+
   /**
    * Called on change.
    * @param {SyntheticEvent} event - The React SyntheticEvent object
    * @param {object} data - All props and the event value.
    */
-  onChange?: (event: React.FormEvent<HTMLTextAreaElement>, value: TextareaOnChangeValue  ) => void;
+  onChange?: (event: React.FormEvent<HTMLTextAreaElement>, value: TextAreaOnChangeValue) => void;
+
+  /** The value of the textarea. */
+  value?: string;
 }
 
-interface TextareaOnChangeValue extends TextareaProps{
+interface TextAreaOnChangeValue extends TextAreaProps {
   value: any;
 }
 
-export const Textarea: React.ComponentClass<TextareaProps>;
+export const TextArea: React.ComponentClass<TextAreaProps>;

src/elements/Reveal/index.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+interface RevealContentProps {
+  /** An element type to render as (string or function). */
+  as?: any;
+
+  /** Additional classes. */
+  className?: string;
+
+  /** A reveal may contain content that is visible before interaction. */
+  hidden?: boolean;
+
+  /** A reveal may contain content that is hidden before user interaction. */
+  visible?: boolean;
+}
+
+export const RevealContent: React.ComponentClass<RevealContentProps>;
+
+interface RevealProps {
+  /** An active reveal displays its hidden content. */
+  active?: boolean;
+
+  /** An animation name that will be applied to Reveal. */
+  animated?: 'fade' | 'small fade' | 'move' | 'move right' | 'move up' | 'move down' | 'rotate' | 'rotate left';
+
+  /** An element type to render as (string or function). */
+  as?: any;
+
+  /** Additional classes. */
+  className?: string;
+
+  /** A disabled reveal will not animate when hovered. */
+  disabled?: boolean;
+
+  /** An element can show its content without delay. */
+  instant?: boolean;
+}
+
+interface RevealClass extends React.ComponentClass<RevealProps> {
+  Content: typeof RevealContent;
+}
+
+export const Reveal: RevealClass;

src/modules/Accordion/index.d.ts

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { ReactMouseEvents } from '../..';
 
-
 // Accordion
 // ----------------------------------
 interface AccordionProps {
@@ -32,7 +31,7 @@ interface AccordionProps {
 
   /** Called with (event, index) when a panel title is clicked. */
   onTitleClick?: React.MouseEventHandler<HTMLDivElement>;
-  
+
   /**
    * Create simple accordion panels from an array of { text: <string>, content: <custom> } objects.
    * Object can optionally define an `active` key to open/close the panel.
@@ -45,16 +44,18 @@ interface AccordionProps {
   styled?: boolean;
 }
 
-export class Accordion extends React.Component<AccordionProps,{}> {
+interface AccordionClass extends React.ComponentClass<AccordionProps> {
   Content: typeof AccordionContent;
   Title: typeof AccordionTitle;
 }
 
+export const Accordion: AccordionClass;
+
 
 interface AccordionContentProps {
   /** Whether or not the content is visible. */
   active?: boolean;
-  
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -68,10 +69,10 @@ interface AccordionContentProps {
 export const AccordionContent: React.ComponentClass<AccordionContentProps>;
 
 interface AccordionTitleProps extends ReactMouseEvents<HTMLElement> {
-  
+
   /** Whether or not the title is in the open state. */
   active?: boolean;
-  
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -82,4 +83,4 @@ interface AccordionTitleProps extends ReactMouseEvents<HTMLElement> {
   className?: string;
 }
 
-export const AccordionTitle: React.ComponentClass<AccordionTitleProps>;
+export const AccordionTitle: React.ComponentClass<AccordionTitleProps>;

src/modules/Checkbox/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export interface CheckboxProps {
-  
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -15,16 +15,16 @@ export interface CheckboxProps {
   defaultChecked?: boolean;
 
   /** Whether or not checkbox is indeterminate. */
-  defaultIndeterminate?:boolean;
+  defaultIndeterminate?: boolean;
 
   /** A checkbox can appear disabled and be unable to change states */
   disabled?: boolean;
 
   /** Removes padding for a label. Auto applied when there is no label. */
   fitted?: boolean;
-  
+
   /** Whether or not checkbox is indeterminate. */
-  indeterminate?:boolean;
+  indeterminate?: boolean;
 
   /** The text of the associated label element. */
   label?: string;
@@ -38,15 +38,15 @@ export interface CheckboxProps {
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and proposed checked/indeterminate state.
    */
-  onChange?: React.FormEventHandler<HTMLInputElement>;
+  onChange?: (e: React.FormEvent<HTMLInputElement>, data: this) => void;
 
   /**
    * Called when the checkbox or label is clicked.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and current checked/indeterminate state.
    */
-  onClick?: React.MouseEventHandler<HTMLInputElement>;
+  onClick?: (e: React.MouseEvent<HTMLInputElement>, data: this) => void;
 
   /** Format as a radio element. This means it is an exclusive option.*/
   radio?: any;
@@ -61,7 +61,7 @@ export interface CheckboxProps {
   toggle?: any;
 
   /** HTML input type, either checkbox or radio. */
-  type?: 'checkbox'|'radio';
+  type?: 'checkbox' | 'radio';
 
   /** The HTML input value. */
   value?: string;

src/modules/Embed/index.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+interface EmbedProps {
+  /** An embed can be active. */
+  active?: boolean;
+
+  /** An element type to render as (string or function). */
+  as?: any;
+
+  /** An embed can specify an alternative aspect ratio. */
+  aspectRatio?: '4:3' | '16:9' | '21:9';
+
+  /** Setting to true or false will force autoplay. */
+  autoplay?: boolean;
+
+  /** Whether to show networks branded UI like title cards, or after video calls to action. */
+  brandedUI?: boolean;
+
+  /** Additional classes. */
+  className?: string;
+
+  /** Specifies a default chrome color with Vimeo or YouTube. */
+  color?: string;
+
+  /** Initial value of active. */
+  defaultActive?: boolean;
+
+  /** Whether to show networks branded UI like title cards, or after video calls to action. */
+  hd?: boolean;
+
+  /** Specifies an icon to use with placeholder content. */
+  icon?: any;
+
+  /** Specifies an id for source. */
+  id?: string;
+
+  /**
+   * Сalled on click.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props and proposed value.
+   */
+  onClick?: (e: React.FormEvent<HTMLVideoElement>, data: this) => void;
+
+  /** A placeholder image for embed. */
+  placeholder?: string;
+
+  /** Specifies a source to use. */
+  source?: 'youtube' | 'vimeo';
+
+  /** Specifies a url to use for embed. */
+  url?: string;
+}
+
+export const Embed: React.ComponentClass<EmbedProps>;