Merge pull request #32796 from jlismore/react-tabs-extendHtmlElements

[react-tabs] Props for components now extend HtmlElements

types/react-tabs/index.d.ts

@@ -1,13 +1,18 @@
-// Type definitions for react-tabs 2.3.0
+// Type definitions for react-tabs 2.3
 // Project: https://github.com/reactjs/react-tabs/
-// Definitions by: Yuu Igarashi <https://github.com/yu-i9/>, Daniel Tschinder <https://github.com/danez>, Ummon Karpe <https://github.com/Equationist>
+// Definitions by: Yuu Igarashi <https://github.com/yu-i9>
+//                 Daniel Tschinder <https://github.com/danez>
+//                 Ummon Karpe <https://github.com/Equationist>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
-import * as React from 'react';
+import * as React from "react";
 
-export interface TabsProps {
-    className?: string | Array<string> | { [name: string]: boolean; };
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+export interface TabsProps
+    extends Omit<React.HTMLProps<HTMLDivElement>, "className" | "onSelect"> {
+    className?: string | string[] | { [name: string]: boolean };
     defaultFocus?: boolean;
     defaultIndex?: number;
     disabledTabClassName?: string;
@@ -19,27 +24,30 @@ export interface TabsProps {
     selectedTabPanelClassName?: string;
 }
 
-export interface TabListProps {
-    className?: string | Array<string> | { [name: string]: boolean; };
+export interface TabListProps
+    extends Omit<React.HTMLProps<HTMLUListElement>, "className"> {
+    className?: string | string[] | { [name: string]: boolean };
 }
 
-export interface TabProps {
-    className?: string | Array<string> | { [name: string]: boolean; };
+export interface TabProps
+    extends Omit<React.HTMLProps<HTMLLIElement>, "className" | "tabIndex"> {
+    className?: string | string[] | { [name: string]: boolean };
     disabled?: boolean;
     disabledClassName?: string;
     selectedClassName?: string;
     tabIndex?: string;
 }
 
-export interface TabPanelProps {
-    className?: string | Array<string> | { [name: string]: boolean; };
+export interface TabPanelProps
+    extends Omit<React.HTMLProps<HTMLDivElement>, "className"> {
+    className?: string | string[] | { [name: string]: boolean };
     forceRender?: boolean;
     selectedClassName?: string;
 }
 
-export declare class Tabs extends React.Component<TabsProps> { }
-export declare class TabList extends React.Component<TabListProps> { }
-export declare class Tab extends React.Component<TabProps> { }
-export declare class TabPanel extends React.Component<TabPanelProps> { }
+export declare class Tabs extends React.Component<TabsProps> {}
+export declare class TabList extends React.Component<TabListProps> {}
+export declare class Tab extends React.Component<TabProps> {}
+export declare class TabPanel extends React.Component<TabPanelProps> {}
 
 export declare function resetIdCounter(): void;

types/react-tabs/react-tabs-tests.ts

@@ -9,7 +9,8 @@ import {
     TabProps,
     TabPanel,
     TabPanelProps,
-    resetIdCounter } from "react-tabs";
+    resetIdCounter
+} from "react-tabs";
 
 resetIdCounter();
 
@@ -26,15 +27,18 @@ class TestApp extends React.Component {
     }
 
     render() {
-        return React.createElement(Tabs, {onSelect: this.onSelect, selectedIndex: 1},
-                   React.createElement(TabList, {className: "test-class"},
-                       React.createElement(Tab, {disabled: true}, "Tab1"),
-                       React.createElement(Tab, {selectedClassName: "active"}, "Tab2"),
-                       React.createElement(Tab, {}, "Tab3")),
-                   React.createElement(TabPanel, {}, React.createElement("h2", {}, "Content1")),
-                   React.createElement(TabPanel, {}, React.createElement("h2", {}, "Content2")),
-                   React.createElement(TabPanel, {}, React.createElement("h2", {}, "Content3")));
+        return React.createElement(Tabs, { onSelect: this.onSelect, selectedIndex: 1, defaultFocus: true, name: 'Tabs', autoFocus: true },
+            React.createElement(TabList, { className: "test-class" },
+                React.createElement(Tab, { disabled: true }, "Tab1"),
+                React.createElement(Tab, { selectedClassName: "active" }, "Tab2"),
+                React.createElement(Tab, {}, "Tab3")),
+            React.createElement(TabPanel, {}, React.createElement("h2", {}, "Content1")),
+            React.createElement(TabPanel, {}, React.createElement("h2", {}, "Content2")),
+            React.createElement(TabPanel, {}, React.createElement("h2", {}, "Content3")));
     }
 }
 
-ReactDOM.render(React.createElement(TestApp, {}), document.getElementById("test-app"));
+ReactDOM.render(
+    React.createElement(TestApp, {}),
+    document.getElementById("test-app")
+);

types/react-tabs/tslint.json

@@ -1,79 +1,12 @@
 {
     "extends": "dtslint/dt.json",
     "rules": {
-        "adjacent-overload-signatures": false,
-        "array-type": false,
-        "arrow-return-shorthand": false,
-        "ban-types": false,
-        "callable-types": false,
-        "comment-format": false,
-        "dt-header": false,
-        "eofline": false,
-        "export-just-namespace": false,
-        "import-spacing": false,
-        "interface-name": false,
-        "interface-over-type-literal": false,
-        "jsdoc-format": false,
-        "max-line-length": false,
-        "member-access": false,
-        "new-parens": false,
         "no-any-union": false,
-        "no-boolean-literal-compare": false,
-        "no-conditional-assignment": false,
-        "no-consecutive-blank-lines": false,
-        "no-construct": false,
-        "no-declare-current-package": false,
-        "no-duplicate-imports": false,
-        "no-duplicate-variable": false,
         "no-empty-interface": false,
-        "no-for-in-array": false,
-        "no-inferrable-types": false,
-        "no-internal-module": false,
-        "no-irregular-whitespace": false,
-        "no-mergeable-namespace": false,
-        "no-misused-new": false,
-        "no-namespace": false,
         "no-object-literal-type-assertion": false,
-        "no-padding": false,
-        "no-redundant-jsdoc": false,
-        "no-redundant-jsdoc-2": false,
-        "no-redundant-undefined": false,
-        "no-reference-import": false,
-        "no-relative-import-in-test": false,
-        "no-self-import": false,
-        "no-single-declare-module": false,
-        "no-string-throw": false,
-        "no-unnecessary-callback-wrapper": false,
-        "no-unnecessary-class": false,
         "no-unnecessary-generics": false,
-        "no-unnecessary-qualifier": false,
-        "no-unnecessary-type-assertion": false,
-        "no-useless-files": false,
-        "no-var-keyword": false,
-        "no-var-requires": false,
         "no-void-expression": false,
-        "no-trailing-whitespace": false,
-        "object-literal-key-quotes": false,
-        "object-literal-shorthand": false,
-        "one-line": false,
-        "one-variable-per-declaration": false,
-        "only-arrow-functions": false,
-        "prefer-conditional-expression": false,
-        "prefer-const": false,
-        "prefer-declare-function": false,
-        "prefer-for-of": false,
-        "prefer-method-signature": false,
-        "prefer-template": false,
-        "radix": false,
-        "semicolon": false,
-        "space-before-function-paren": false,
-        "space-within-parens": false,
         "strict-export-declare-modifiers": false,
-        "trim-file": false,
-        "triple-equals": false,
-        "typedef-whitespace": false,
-        "unified-signatures": false,
-        "void-return": false,
-        "whitespace": false
+        "void-return": false
     }
 }