TypeScript definition changes (#1247)

* TypeScript definition changes

Add definitions for `EuiAccordion`, `EuiDescriptionList`, `EuiForm`,
`EuiFormHelpText` and the accessibility services, and fix a number of
small TS issues.

* Fix EuiCheckbox TS def

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `4.5.1`.
+**Bug fixes**
+
+* TypeScript definition changes for `EuiAccordion`, `EuiDescriptionList`, `EuiForm`, `EuiFormHelpText` and the accessibility services, plus a number of other TS fixes ([#1247](https://github.com/elastic/eui/pull/1247))
 
 ## [`4.5.1`](https://github.com/elastic/eui/tree/v4.5.1)
 

src/components/accordion/index.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes, Component, ReactNode } from 'react';
+
+declare module '@elastic/eui' {
+  export type EuiAccordionSize = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl';
+
+  export interface EuiAccordionProps {
+    id: string;
+    buttonContentClassName?: string;
+    buttonContent?: ReactNode;
+    extraAction?: ReactNode;
+    initialIsOpen?: boolean;
+    paddingSize?: EuiAccordionSize;
+  }
+
+  export class EuiAccordion extends Component<
+    CommonProps & HTMLAttributes<HTMLDivElement> & EuiAccordionProps
+    > {}
+}

src/components/button/index.d.ts

@@ -57,6 +57,7 @@ declare module '@elastic/eui' {
     'aria-label'?: string;
     'aria-labelledby'?: string;
     isDisabled?: boolean;
+    size?: ButtonSize;
   }
   export const EuiButtonIcon: SFC<
     EuiButtonPropsForButtonOrLink<CommonProps & EuiButtonIconProps>

src/components/combo_box/index.d.ts

@@ -10,7 +10,7 @@ import {
 declare module '@elastic/eui' {
   export type EuiComboBoxOptionProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     label: string,
-    isGroupLabelOption: boolean,
+    isGroupLabelOption?: boolean,
   }
 
   export type EuiComboBoxOptionsListPosition = 'top' | 'bottom'

src/components/description_list/index.d.ts

@@ -0,0 +1,31 @@
+import { HTMLAttributes, Component, ReactNode } from 'react';
+
+declare module '@elastic/eui' {
+  export type EuiDescriptionListType = 'row' | 'column' | 'inline';
+  export type EuiDescriptionListAlignment = 'center' | 'left';
+  export type EuiDescriptionListTextStyle = 'normal' | 'reverse';
+
+  export interface EuiDescriptionListProps {
+    listItems?: Array<{ title: ReactNode, description: ReactNode }>;
+    align?: EuiDescriptionListAlignment;
+    compressed?: boolean;
+    textStyle?: EuiDescriptionListTextStyle;
+    type?: EuiDescriptionListType;
+  }
+
+  export class EuiDescriptionList extends Component<
+    CommonProps & HTMLAttributes<HTMLDListElement> & EuiDescriptionListProps
+    > {}
+
+  export interface EuiDescriptionListTitleProps {}
+
+  export class EuiDescriptionListTitle extends Component<
+    CommonProps & HTMLAttributes<HTMLElement> & EuiDescriptionListTitleProps
+    > {}
+
+  export interface EuiDescriptionListDescriptionProps {}
+
+  export class EuiDescriptionListDescription extends Component<
+    CommonProps & HTMLAttributes<HTMLElement> & EuiDescriptionListDescriptionProps
+    > {}
+}

src/components/form/checkbox/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../common.d.ts" />
 
-import { SFC, ReactNode, HTMLAttributes, ChangeEventHandler } from 'react';
+import { SFC, ReactNode, HTMLAttributes, ChangeEventHandler, InputHTMLAttributes } from 'react';
 
 declare module '@elastic/eui' {
   /**
@@ -22,7 +22,7 @@ declare module '@elastic/eui' {
   }
 
   export const EuiCheckbox: SFC<
-    CommonProps & HTMLAttributes<HTMLDivElement> & EuiCheckboxProps
+    CommonProps & InputHTMLAttributes<HTMLInputElement> & EuiCheckboxProps
   >;
 
   /**

src/components/form/form_help_text/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference path="../../common.d.ts" />
+/// <reference path="../../icon/index.d.ts" />
+
+import { ReactNode, SFC, HTMLAttributes } from 'react';
+
+declare module '@elastic/eui' {
+
+  /**
+   * @see './field_help_text.js'
+   */
+  export interface EuiFormHelpTextProps {
+  }
+
+  export const EuiFormHelpText: SFC<
+    CommonProps & HTMLAttributes<HTMLDivElement> & EuiFormHelpTextProps
+    >;
+}

src/components/form/form_row/index.d.ts

@@ -9,7 +9,7 @@ declare module '@elastic/eui' {
 
   export type EuiFormRowProps = CommonProps &
     HTMLAttributes<HTMLDivElement> & {
-      error?: string | string[];
+      error?: ReactNode | ReactNode[];
       fullWidth?: boolean;
       hasEmptyLabelSpace?: boolean;
       helpText?: ReactNode;

src/components/form/index.d.ts

@@ -1,10 +1,27 @@
+/// <reference path="../common.d.ts" />
 /// <reference path="./checkbox/index.d.ts" />
 /// <reference path="./field_number/index.d.ts" />
 /// <reference path="./field_search/index.d.ts" />
 /// <reference path="./field_text/index.d.ts" />
+/// <reference path="./form_help_text/index.d.ts" />
 /// <reference path="./form_label/index.d.ts" />
 /// <reference path="./form_row/index.d.ts" />
 /// <reference path="./radio/index.d.ts" />
 /// <reference path="./select/index.d.ts" />
 /// <reference path="./switch/index.d.ts" />
 /// <reference path="./text_area/index.d.ts" />
+
+import { SFC, FormHTMLAttributes, ReactNode } from 'react';
+
+declare module '@elastic/eui' {
+  /**
+   * @see './form.js'
+   */
+  export type EuiFormProps = CommonProps &
+    FormHTMLAttributes<HTMLFormElement> & {
+      isInvalid?: boolean;
+      error?: ReactNode | ReactNode[];
+    };
+
+  export const EuiForm: SFC<EuiFormProps>;
+}

src/components/index.d.ts

@@ -1,8 +1,10 @@
 /// <reference path="./common.d.ts" />
+/// <reference path="./accordion/index.d.ts" />
 /// <reference path="./avatar/index.d.ts" />
 /// <reference path="./button/index.d.ts" />
 /// <reference path="./combo_box/index.d.ts" />
 /// <reference path="./context_menu/index.d.ts" />
+/// <reference path="./description_list/index.d.ts" />
 /// <reference path="./flex/index.d.ts" />
 /// <reference path="./health/index.d.ts" />
 /// <reference path="./icon/index.d.ts" />

src/components/text/index.d.ts

@@ -24,6 +24,7 @@ declare module '@elastic/eui' {
     HTMLAttributes<HTMLDivElement> & {
       size?: SIZES;
       color?: COLORS;
+      grow?: boolean;
     };
 
   type EuiTextColorProps = CommonProps &

src/components/tool_tip/index.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode, SFC } from 'react';
 
 declare module '@elastic/eui' {
-  export type ToolTipPositions = 
+  export type ToolTipPositions =
     | 'top'
     | 'right'
     | 'bottom'
@@ -22,6 +22,7 @@ declare module '@elastic/eui' {
     type?: string;
     size?: string;
     'aria-label'?: string;
+    content: ReactNode;
   }
   export const EuiIconTip: SFC<EuiIconTipProps>;
 }

src/services/accessibility/index.d.ts

@@ -0,0 +1,6 @@
+declare module '@elastic/eui' {
+  export const accessibleClickKeys: { [keyCode: number]: string };
+  export const cascadingMenuKeyCodes: { [keyCodeName: string]: keyCodes };
+  export const comboBoxKeyCodes: { [keyCodeName: string]: keyCodes };
+  export const htmlIdGenerator: (prefix?: string) => (suffix?: string) => string;
+}

src/services/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="./accessibility/index.d.ts" />
 /// <reference path="./alignment.d.ts" />
 /// <reference path="./key_codes.d.ts" />
 /// <reference path="./color/index.d.ts" />