diff --git a/examples/app.tsx b/examples/app.tsx
index e0adf0983..83225c7d6 100644
--- a/examples/app.tsx
+++ b/examples/app.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import { PureComponent } from 'react';
+
import {
AppRoot,
Button,
diff --git a/examples/index.tsx b/examples/index.tsx
index d58c54af5..26ad853ed 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
+
import App from './app';
const app = document.createElement('div');
diff --git a/examples/nav-items.tsx b/examples/nav-items.tsx
index e5db9712a..6d65ef09e 100644
--- a/examples/nav-items.tsx
+++ b/examples/nav-items.tsx
@@ -1,4 +1,5 @@
import * as React from 'react';
+
import { Nav, NavItem } from '../src/ts/';
const NavItems = ({ className }: { className?: string }) => (
diff --git a/package-lock.json b/package-lock.json
index e35a3444a..493a598d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -388,14 +388,14 @@
"integrity": "sha1-f/s93vdD2a+1QF2WP9i6H9NngAU="
},
"@types/react": {
- "version": "15.6.18",
- "resolved": "https://registry.npmjs.org/@types/react/-/react-15.6.18.tgz",
- "integrity": "sha512-LzCdFyiDXw85zDQOvSfR8GTKkTMhJyJ9abBRmQxCJ64o4storiyy54w4PicI0iGg18iyl/MkykOx2QEKCHDR5Q=="
+ "version": "15.6.28",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-15.6.28.tgz",
+ "integrity": "sha512-xqkECNDgjbHK2Ak99XRaK07pBq8jpbnpxfY8MNSaSbQxzksX782ALRuU6J9zjKI5PmJdRTYOLfa4KjnJYxmHfw=="
},
"@types/react-dom": {
- "version": "15.5.7",
- "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-15.5.7.tgz",
- "integrity": "sha512-XGLjgNtPnBuO1cITYWZAk4KbH0UEDqMg2kuG3xx0UgnrcSd6ijO57Fp9rimmrDKcBnx3b2vFQuEYRXu2GihRYQ==",
+ "version": "15.5.11",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-15.5.11.tgz",
+ "integrity": "sha512-+CET7DejuzSdHA28vx27Rl1Wd/edgRkCmEsLXVLBjnGaEoLee6JGZBhU7Mmvo3+qMOcPXp8ZT5X1+qX3VlWIUw==",
"requires": {
"@types/react": "^15"
}
@@ -4593,6 +4593,16 @@
"sha.js": "^2.4.8"
}
},
+ "create-react-class": {
+ "version": "15.6.3",
+ "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
+ "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
+ "requires": {
+ "fbjs": "^0.8.9",
+ "loose-envify": "^1.3.1",
+ "object-assign": "^4.1.1"
+ }
+ },
"cross-spawn": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -15160,14 +15170,15 @@
}
},
"react": {
- "version": "15.5.4",
- "resolved": "https://registry.npmjs.org/react/-/react-15.5.4.tgz",
- "integrity": "sha1-+oPrAVBqsjfNwcjDsc6o3gEr8Ec=",
+ "version": "15.6.2",
+ "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
+ "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
"requires": {
+ "create-react-class": "^15.6.0",
"fbjs": "^0.8.9",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.0",
- "prop-types": "^15.5.7"
+ "prop-types": "^15.5.10"
}
},
"react-codemirror2": {
@@ -15443,31 +15454,20 @@
"dev": true
},
"react-docgen-typescript": {
- "version": "1.2.2",
- "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-1.2.2.tgz",
- "integrity": "sha512-Qiv9ck9dROKIQA/IjBh7ETTKcwUBmSovDoUVRyRZ31YfP6fBS2dE8a1wmU1TBL9D9lpLUEq5sZ410r4+6bwCdQ==",
+ "version": "1.16.3",
+ "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-1.16.3.tgz",
+ "integrity": "sha512-xYISCr8mFKfV15talgpicOF/e0DudTucf1BXzu/HteMF4RM3KsfxXkhWybZC3LTVbYrdbammDV26Z4Yuk+MoWg==",
"dev": true
},
"react-dom": {
- "version": "15.5.4",
- "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.5.4.tgz",
- "integrity": "sha1-ugwoeG/VLtfk8hNf4CiNRirvk9o=",
+ "version": "15.6.2",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.2.tgz",
+ "integrity": "sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=",
"requires": {
"fbjs": "^0.8.9",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.0",
- "prop-types": "~15.5.7"
- },
- "dependencies": {
- "prop-types": {
- "version": "15.5.10",
- "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz",
- "integrity": "sha1-J5ffwxJhguOpXj37suiT3ddFYVQ=",
- "requires": {
- "fbjs": "^0.8.9",
- "loose-envify": "^1.3.1"
- }
- }
+ "prop-types": "^15.5.10"
}
},
"react-group": {
@@ -20967,9 +20967,9 @@
"dev": true
},
"typescript": {
- "version": "2.3.3",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.3.3.tgz",
- "integrity": "sha1-ljnzw7QBSOjKl/4IpR3RiRu2viI=",
+ "version": "3.3.4000",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.4000.tgz",
+ "integrity": "sha512-jjOcCZvpkl2+z7JFn0yBOoLQyLoIkNZAs/fYJkUG6VKy6zLPHJGfQJYFHzibB6GJaF/8QrcECtlQ5cpvRHSMEA==",
"dev": true
},
"ua-parser-js": {
diff --git a/package.json b/package.json
index 7e96e191e..f7d200572 100644
--- a/package.json
+++ b/package.json
@@ -13,11 +13,12 @@
"lint-js": "eslint ./*.js docs/**/*.js && tslint --project tsconfig.json '@(src|tests|types|docs)/**/*.@(ts|tsx)'",
"lint-less": "lesshint 'src/less/' 'docs/less/'",
"lint": "npm run lint-js && npm run lint-less",
+ "typecheck": "tsc --noEmit --project tsconfig.json",
"test-dist-react-16": "npm i @types/react@16.4.7 @types/react-dom@16.0.6 --no-save && tsc --project 'tsconfig.json' --noEmit && npm run dist",
"test-dist-react-15": "npm i @types/react@15.6.18 @types/react-dom@15.5.7 --no-save && tsc --project 'tsconfig.json' --noEmit && npm run dist",
"test-dist": "npm run test-dist-react-15 && npm run test-dist-react-16",
"tests": "jest",
- "test": "npm run prettier-check && npm run lint && npm run tests -- --coverage --runInBand && npm run test-dist",
+ "test": "npm run typecheck && npm run prettier-check && npm run lint && npm run tests -- --coverage --runInBand && npm run test-dist",
"budo": "budo src/less/index.less examples/index.tsx --live -- -t node-lessify -p [tsify -p tsconfig.examples.json]",
"prepublishOnly": "./scripts/dist"
},
@@ -50,15 +51,15 @@
"@types/classnames": "^2.2.0",
"@types/cookie": "^0.3.1",
"@types/random-seed": "^0.3.2",
- "@types/react": ">= 15",
- "@types/react-dom": ">= 15",
+ "@types/react": ">= 15.6.28",
+ "@types/react-dom": ">= 15.5.11",
"@types/react-transition-group": "^1.1.4",
"classnames": "^2.2.5",
"cookie": "^0.3.1",
"normalize.css": "^8.0.1",
"random-seed": "^0.3.0",
- "react": ">= 15",
- "react-dom": ">= 15",
+ "react": ">= 15.6.2",
+ "react-dom": ">= 15.6.2",
"react-transition-group": "^1.2.1"
},
"devDependencies": {
@@ -89,7 +90,7 @@
"postcss": "^5.2.18",
"postcss-loader": "^2.0.7",
"prettier": "^1.19.1",
- "react-docgen-typescript": "^1.2.2",
+ "react-docgen-typescript": "^1.16.3",
"react-scripts-ts": "^2.17.0",
"react-styleguidist": "^7.2.1",
"react-test-renderer": "^15.5.4",
@@ -99,14 +100,14 @@
"tsify": "^3.0.4",
"tslint": "^5.8.0",
"tslint-config-dabapps": "github:dabapps/tslint-config-dabapps#v0.5.1",
- "typescript": "^2.3.3",
+ "typescript": "^3.3.4000",
"webpack": "^3.7.1"
},
"peerDependencies": {
"less": "^2.7.3",
"normalize.css": "^8.0.1",
- "react": ">= 15",
- "react-dom": ">= 15",
+ "react": ">= 15.6.2",
+ "react-dom": ">= 15.6.2",
"react-transition-group": ">= 1 < 2"
},
"jest": {
diff --git a/src/ts/components/app/root.tsx b/src/ts/components/app/root.tsx
index e64caadc4..44833a2c0 100644
--- a/src/ts/components/app/root.tsx
+++ b/src/ts/components/app/root.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import store, { StoreState } from '../../store';
import { ComponentProps } from '../../types';
@@ -65,9 +66,9 @@ export class AppRoot extends PureComponent<AppRootProps, AppRootState> {
className,
];
- const style = {
- paddingTop: hasFixedNavBar && navBarHeight,
- paddingBottom: hasStickyFooter && footerHeight,
+ const style: React.CSSProperties = {
+ ...(hasFixedNavBar && { paddingTop: navBarHeight }),
+ ...(hasStickyFooter && { paddingBottom: footerHeight }),
};
return (
diff --git a/src/ts/components/banners/banner.tsx b/src/ts/components/banners/banner.tsx
index 2852fdd8c..cdb8ab946 100644
--- a/src/ts/components/banners/banner.tsx
+++ b/src/ts/components/banners/banner.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export interface BannerProps extends ComponentProps, HTMLProps<HTMLElement> {
diff --git a/src/ts/components/banners/cookie-banner.tsx b/src/ts/components/banners/cookie-banner.tsx
index e4126c04e..27882b93e 100644
--- a/src/ts/components/banners/cookie-banner.tsx
+++ b/src/ts/components/banners/cookie-banner.tsx
@@ -2,6 +2,7 @@ import * as classNames from 'classnames';
import * as cookie from 'cookie';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
import Banner from './banner';
diff --git a/src/ts/components/content/content-box-footer.tsx b/src/ts/components/content/content-box-footer.tsx
index 07a22425f..c21214ce4 100644
--- a/src/ts/components/content/content-box-footer.tsx
+++ b/src/ts/components/content/content-box-footer.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type ContentBoxFooterProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/content/content-box-header.tsx b/src/ts/components/content/content-box-header.tsx
index 262f83e96..d5baec34c 100644
--- a/src/ts/components/content/content-box-header.tsx
+++ b/src/ts/components/content/content-box-header.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type ContentBoxHeaderProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/content/content-box.tsx b/src/ts/components/content/content-box.tsx
index 763ee50cb..fb1c40fca 100644
--- a/src/ts/components/content/content-box.tsx
+++ b/src/ts/components/content/content-box.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type ContentBoxProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/content/section.tsx b/src/ts/components/content/section.tsx
index a4d4de1cc..92e3319ed 100644
--- a/src/ts/components/content/section.tsx
+++ b/src/ts/components/content/section.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type SectionProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/forms/button.tsx b/src/ts/components/forms/button.tsx
index b36348957..9c583cd6b 100644
--- a/src/ts/components/forms/button.tsx
+++ b/src/ts/components/forms/button.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export interface ButtonProps extends ComponentProps, HTMLProps<HTMLElement> {
diff --git a/src/ts/components/forms/form-group.tsx b/src/ts/components/forms/form-group.tsx
index 9a1791bd2..96039d589 100644
--- a/src/ts/components/forms/form-group.tsx
+++ b/src/ts/components/forms/form-group.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export interface FormGroupProps extends ComponentProps, HTMLProps<HTMLElement> {
diff --git a/src/ts/components/forms/input-group-addon.tsx b/src/ts/components/forms/input-group-addon.tsx
index 60f498b13..d66b5234d 100644
--- a/src/ts/components/forms/input-group-addon.tsx
+++ b/src/ts/components/forms/input-group-addon.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type InputGroupAddonProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/forms/input-group.tsx b/src/ts/components/forms/input-group.tsx
index dc56a44df..374777cf1 100644
--- a/src/ts/components/forms/input-group.tsx
+++ b/src/ts/components/forms/input-group.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export interface InputGroupProps
diff --git a/src/ts/components/grid/column.tsx b/src/ts/components/grid/column.tsx
index 5e8c07b20..925dd327a 100644
--- a/src/ts/components/grid/column.tsx
+++ b/src/ts/components/grid/column.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
import { isValidColumnNumber } from '../../utils';
diff --git a/src/ts/components/grid/container.tsx b/src/ts/components/grid/container.tsx
index 2f1efb680..8d16bf6b4 100644
--- a/src/ts/components/grid/container.tsx
+++ b/src/ts/components/grid/container.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export interface ContainerProps extends ComponentProps, HTMLProps<HTMLElement> {
diff --git a/src/ts/components/grid/row.tsx b/src/ts/components/grid/row.tsx
index 69d996a7c..c55d3323f 100644
--- a/src/ts/components/grid/row.tsx
+++ b/src/ts/components/grid/row.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type RowProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/misc/alert.tsx b/src/ts/components/misc/alert.tsx
index 5f9433c9e..7c0798b65 100644
--- a/src/ts/components/misc/alert.tsx
+++ b/src/ts/components/misc/alert.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type AlertProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/misc/anchor.tsx b/src/ts/components/misc/anchor.tsx
index 1f81f1b20..0156b472a 100644
--- a/src/ts/components/misc/anchor.tsx
+++ b/src/ts/components/misc/anchor.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { getHref } from '../../utils';
export type AnchorProps = HTMLProps<HTMLAnchorElement>;
diff --git a/src/ts/components/misc/badge.tsx b/src/ts/components/misc/badge.tsx
index 92412d39d..3c4371c0b 100644
--- a/src/ts/components/misc/badge.tsx
+++ b/src/ts/components/misc/badge.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type BadgeProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/misc/code-block.tsx b/src/ts/components/misc/code-block.tsx
index fc3bbc310..05010d971 100644
--- a/src/ts/components/misc/code-block.tsx
+++ b/src/ts/components/misc/code-block.tsx
@@ -7,6 +7,7 @@ declare const hljs: void | IHighlightJS;
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
import { formatCode } from '../../utils';
diff --git a/src/ts/components/misc/collapse.tsx b/src/ts/components/misc/collapse.tsx
index f1cbcbe46..6b07b4fff 100644
--- a/src/ts/components/misc/collapse.tsx
+++ b/src/ts/components/misc/collapse.tsx
@@ -1,7 +1,6 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { PureComponent } from 'react';
-import { ComponentProps } from '../../types';
const ENOUGH_TIME_FOR_RERENDER = 50;
const DEFAULT_HEIGHT = 0;
@@ -10,9 +9,20 @@ const DEFAULT_FADE_HEIGHT = 50;
const DEFAULT_TRANSPARENT_COLOR = 'rgba(255, 255, 255, 0)';
const DEFAULT_FADE_COLOR = 'rgba(255, 255, 255, 1)';
-export interface CollapseProps
- extends ComponentProps,
- React.HTMLAttributes<HTMLDivElement> {
+export interface CollapseProps extends React.HTMLAttributes<HTMLDivElement> {
+ /**
+ * Set the component to render a different element type.
+ * @default 'div'
+ */
+ component?:
+ | 'div'
+ | 'span'
+ | 'p'
+ | 'ul'
+ | 'main'
+ | 'section'
+ | 'aside'
+ | 'strong';
/**
* Whether the collapse is open or not
* @default false
@@ -66,7 +76,7 @@ export interface CollapseState {
* Component to expand and collapse content, optionally displaying a small preview.
*/
export class Collapse extends PureComponent<CollapseProps, CollapseState> {
- private element: Element;
+ private element: HTMLElement;
private timeout: number;
public constructor(props: CollapseProps) {
@@ -147,18 +157,18 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
const { opening, opened, height } = this.state;
- const collapseStyle = {
- minHeight,
- maxHeight: opened ? null : height,
+ const collapseStyle: React.CSSProperties = {
+ minHeight: minHeight === null ? undefined : minHeight,
+ maxHeight: opened ? undefined : height,
position: 'relative' as 'relative',
- overflow: (opened ? null : 'hidden') as 'hidden' | null,
transition: `ease-in-out ${animationDuration}ms max-height`,
+ ...(opened ? { overflow: 'hidden' } : undefined),
};
- const fadeStyle = {
+ const fadeStyle: React.CSSProperties = {
height: fadeHeight,
width: '100%',
- position: 'absolute' as 'absolute',
+ position: 'absolute',
bottom: 0,
opacity: opening ? 0 : 1,
background: `linear-gradient(${transparentColor}, ${fadeColor} 80%)`,
@@ -167,7 +177,7 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
return (
<Component
- ref={(element: HTMLDivElement) => (this.element = element)}
+ ref={this.storeRef}
{...remainingProps}
className={classNames(
'clearfix collapse',
@@ -183,6 +193,10 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
</Component>
);
}
+
+ private storeRef = (element: HTMLElement) => {
+ this.element = element;
+ };
}
export default Collapse;
diff --git a/src/ts/components/misc/highlight.tsx b/src/ts/components/misc/highlight.tsx
index f1b4ceb29..d4610ee9e 100644
--- a/src/ts/components/misc/highlight.tsx
+++ b/src/ts/components/misc/highlight.tsx
@@ -2,6 +2,7 @@ import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
import * as CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+
import { ComponentProps } from '../../types';
export interface HighlightProps extends ComponentProps, HTMLProps<HTMLElement> {
diff --git a/src/ts/components/misc/spaced-group.tsx b/src/ts/components/misc/spaced-group.tsx
index 10003ae7c..6082d5d8f 100644
--- a/src/ts/components/misc/spaced-group.tsx
+++ b/src/ts/components/misc/spaced-group.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export interface SpacedGroupProps
diff --git a/src/ts/components/misc/speech-bubble.tsx b/src/ts/components/misc/speech-bubble.tsx
index 0a361471d..0dfc3afa4 100644
--- a/src/ts/components/misc/speech-bubble.tsx
+++ b/src/ts/components/misc/speech-bubble.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export interface SpeechBubbleProps
diff --git a/src/ts/components/misc/well.tsx b/src/ts/components/misc/well.tsx
index a06eed506..4f10686fc 100644
--- a/src/ts/components/misc/well.tsx
+++ b/src/ts/components/misc/well.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type WellProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/modals/modal-body.tsx b/src/ts/components/modals/modal-body.tsx
index 6287a1709..c9243d423 100644
--- a/src/ts/components/modals/modal-body.tsx
+++ b/src/ts/components/modals/modal-body.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type ModalBodyProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/modals/modal-close-icon.tsx b/src/ts/components/modals/modal-close-icon.tsx
index aee5aea42..b191e7ed9 100644
--- a/src/ts/components/modals/modal-close-icon.tsx
+++ b/src/ts/components/modals/modal-close-icon.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type ModalCloseIconProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/modals/modal-footer.tsx b/src/ts/components/modals/modal-footer.tsx
index a69b71cca..677396c27 100644
--- a/src/ts/components/modals/modal-footer.tsx
+++ b/src/ts/components/modals/modal-footer.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type ModalFooterProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/modals/modal-header.tsx b/src/ts/components/modals/modal-header.tsx
index b38d6d5df..363062bb8 100644
--- a/src/ts/components/modals/modal-header.tsx
+++ b/src/ts/components/modals/modal-header.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type ModalHeaderProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/modals/modal.tsx b/src/ts/components/modals/modal.tsx
index ab6e87458..fdb2bbc60 100644
--- a/src/ts/components/modals/modal.tsx
+++ b/src/ts/components/modals/modal.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export interface ModalProps extends ComponentProps, HTMLProps<HTMLDivElement> {
diff --git a/src/ts/components/navigation/footer.tsx b/src/ts/components/navigation/footer.tsx
index a8ee823a3..f84d434aa 100644
--- a/src/ts/components/navigation/footer.tsx
+++ b/src/ts/components/navigation/footer.tsx
@@ -2,6 +2,7 @@ import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
import * as ReactDOM from 'react-dom';
+
import store from '../../store';
import { ComponentProps } from '../../types';
diff --git a/src/ts/components/navigation/nav-bar.tsx b/src/ts/components/navigation/nav-bar.tsx
index a73d59704..ab3e8cc9b 100644
--- a/src/ts/components/navigation/nav-bar.tsx
+++ b/src/ts/components/navigation/nav-bar.tsx
@@ -2,6 +2,7 @@ import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
import * as ReactDOM from 'react-dom';
+
import store from '../../store';
import { ComponentProps } from '../../types';
import { getScrollOffset } from '../../utils';
diff --git a/src/ts/components/navigation/nav-item.tsx b/src/ts/components/navigation/nav-item.tsx
index 81b34e1ec..b959c7a14 100644
--- a/src/ts/components/navigation/nav-item.tsx
+++ b/src/ts/components/navigation/nav-item.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export interface NavItemProps extends ComponentProps, HTMLProps<HTMLElement> {
diff --git a/src/ts/components/navigation/nav.tsx b/src/ts/components/navigation/nav.tsx
index 4a471bdc5..471aa388f 100644
--- a/src/ts/components/navigation/nav.tsx
+++ b/src/ts/components/navigation/nav.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export interface NavProps extends ComponentProps, HTMLProps<HTMLElement> {}
diff --git a/src/ts/components/navigation/side-bar.tsx b/src/ts/components/navigation/side-bar.tsx
index 719867aba..960d1f47b 100644
--- a/src/ts/components/navigation/side-bar.tsx
+++ b/src/ts/components/navigation/side-bar.tsx
@@ -2,6 +2,7 @@ import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
import * as CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+
import { ComponentProps } from '../../types';
export interface SideBarProps extends HTMLProps<HTMLElement>, ComponentProps {
diff --git a/src/ts/components/precomposed/input-with-prefix-suffix.tsx b/src/ts/components/precomposed/input-with-prefix-suffix.tsx
index 0140fee1f..af686ef25 100644
--- a/src/ts/components/precomposed/input-with-prefix-suffix.tsx
+++ b/src/ts/components/precomposed/input-with-prefix-suffix.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import { PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
import InputGroup from '../forms/input-group';
import InputGroupAddon from '../forms/input-group-addon';
diff --git a/src/ts/components/prototyping/dab-ipsum.tsx b/src/ts/components/prototyping/dab-ipsum.tsx
index 87c5bfec4..28b0234f7 100644
--- a/src/ts/components/prototyping/dab-ipsum.tsx
+++ b/src/ts/components/prototyping/dab-ipsum.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import { Component } from 'react';
+
import { generateIpsum } from '../../utils';
import { WORDS } from '../../words';
diff --git a/src/ts/components/tables/table-body.tsx b/src/ts/components/tables/table-body.tsx
index e577a59d6..bcc402ba6 100644
--- a/src/ts/components/tables/table-body.tsx
+++ b/src/ts/components/tables/table-body.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type TableBodyProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/tables/table-cell.tsx b/src/ts/components/tables/table-cell.tsx
index c448ea690..e680270d0 100644
--- a/src/ts/components/tables/table-cell.tsx
+++ b/src/ts/components/tables/table-cell.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { NBSP } from '../../constants';
import { BaseTableCellProps } from '../../types';
import { shouldNotBeRendered } from '../../utils';
diff --git a/src/ts/components/tables/table-head.tsx b/src/ts/components/tables/table-head.tsx
index 7b4a70c7a..279d83e78 100644
--- a/src/ts/components/tables/table-head.tsx
+++ b/src/ts/components/tables/table-head.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type TableHeadProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/tables/table-header.tsx b/src/ts/components/tables/table-header.tsx
index f94de652f..bb66434b9 100644
--- a/src/ts/components/tables/table-header.tsx
+++ b/src/ts/components/tables/table-header.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { NBSP } from '../../constants';
import { BaseTableCellProps } from '../../types';
import { shouldNotBeRendered } from '../../utils';
diff --git a/src/ts/components/tables/table-row.tsx b/src/ts/components/tables/table-row.tsx
index cd5159914..6b94f1d95 100644
--- a/src/ts/components/tables/table-row.tsx
+++ b/src/ts/components/tables/table-row.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type TableRowProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/components/tables/table.tsx b/src/ts/components/tables/table.tsx
index 7221d8251..7b9d709c7 100644
--- a/src/ts/components/tables/table.tsx
+++ b/src/ts/components/tables/table.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export interface TableProps extends ComponentProps, HTMLProps<HTMLElement> {
diff --git a/src/ts/components/tabs/tab.tsx b/src/ts/components/tabs/tab.tsx
index 812ff791f..661d98ea0 100644
--- a/src/ts/components/tabs/tab.tsx
+++ b/src/ts/components/tabs/tab.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export interface TabProps extends ComponentProps, HTMLProps<HTMLElement> {
diff --git a/src/ts/components/tabs/tabs.tsx b/src/ts/components/tabs/tabs.tsx
index d82087259..fd9247aa8 100644
--- a/src/ts/components/tabs/tabs.tsx
+++ b/src/ts/components/tabs/tabs.tsx
@@ -1,6 +1,7 @@
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
+
import { ComponentProps } from '../../types';
export type TabsProps = ComponentProps & HTMLProps<HTMLElement>;
diff --git a/src/ts/types.ts b/src/ts/types.ts
index 75c5127e8..858bda144 100644
--- a/src/ts/types.ts
+++ b/src/ts/types.ts
@@ -2,7 +2,21 @@ export interface ComponentProps {
/**
* Set the component to render a different element type.
*/
- component?: string;
+ component?:
+ | 'div'
+ | 'span'
+ | 'a'
+ | 'p'
+ | 'button'
+ | 'footer'
+ | 'main'
+ | 'section'
+ | 'aside'
+ | 'li'
+ | 'ul'
+ | 'ol'
+ | 'nav'
+ | 'strong';
}
export interface BaseTableCellProps extends ComponentProps {
diff --git a/src/ts/utils.ts b/src/ts/utils.ts
index ce8dc5c6e..0859a8f14 100644
--- a/src/ts/utils.ts
+++ b/src/ts/utils.ts
@@ -1,4 +1,5 @@
import * as randomSeed from 'random-seed';
+
import {
MATCHES_AMPERSAND,
MATCHES_BLANK_FIRST_LINE,
diff --git a/tests/__snapshots__/collapse.tsx.snap b/tests/__snapshots__/collapse.tsx.snap
index c628bc53b..7b79f61e5 100644
--- a/tests/__snapshots__/collapse.tsx.snap
+++ b/tests/__snapshots__/collapse.tsx.snap
@@ -11,7 +11,6 @@ exports[`Collapse should accept custom duration 1`] = `
Object {
"maxHeight": 0,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 100ms max-height",
}
@@ -31,7 +30,6 @@ exports[`Collapse should accept custom duration 2`] = `
Object {
"maxHeight": 0,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 100ms max-height",
}
@@ -51,7 +49,6 @@ exports[`Collapse should accept custom duration 3`] = `
Object {
"maxHeight": 0,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 100ms max-height",
}
@@ -72,7 +69,7 @@ exports[`Collapse should close to custom height 1`] = `
Object {
"maxHeight": null,
"minHeight": null,
- "overflow": null,
+ "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -93,7 +90,6 @@ exports[`Collapse should close to custom height 2`] = `
Object {
"maxHeight": 500,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -129,7 +125,6 @@ exports[`Collapse should close to custom height 3`] = `
Object {
"maxHeight": 100,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -165,7 +160,6 @@ exports[`Collapse should close to custom height 4`] = `
Object {
"maxHeight": 100,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -200,7 +194,7 @@ exports[`Collapse should close to default height 1`] = `
Object {
"maxHeight": null,
"minHeight": null,
- "overflow": null,
+ "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -220,7 +214,6 @@ exports[`Collapse should close to default height 2`] = `
Object {
"maxHeight": 500,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -255,7 +248,6 @@ exports[`Collapse should close to default height 3`] = `
Object {
"maxHeight": 0,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -290,7 +282,6 @@ exports[`Collapse should close to default height 4`] = `
Object {
"maxHeight": 0,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -321,7 +312,6 @@ exports[`Collapse should match snapshot when collapsed 1`] = `
Object {
"maxHeight": 0,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -336,7 +326,7 @@ exports[`Collapse should match snapshot when expanded 1`] = `
Object {
"maxHeight": null,
"minHeight": null,
- "overflow": null,
+ "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -351,7 +341,6 @@ exports[`Collapse should match snapshot with custom collapsed height 1`] = `
Object {
"maxHeight": 100,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -366,7 +355,6 @@ exports[`Collapse should match snapshot with custom min height 1`] = `
Object {
"maxHeight": 0,
"minHeight": 100,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -381,7 +369,6 @@ exports[`Collapse should match snapshot with customized fade out 1`] = `
Object {
"maxHeight": 0,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -411,7 +398,6 @@ exports[`Collapse should match snapshot with fade out 1`] = `
Object {
"maxHeight": 0,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -446,7 +432,6 @@ exports[`Collapse should open from custom height 1`] = `
Object {
"maxHeight": 100,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -482,7 +467,6 @@ exports[`Collapse should open from custom height 2`] = `
Object {
"maxHeight": 100,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -518,7 +502,6 @@ exports[`Collapse should open from custom height 3`] = `
Object {
"maxHeight": 500,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -554,7 +537,7 @@ exports[`Collapse should open from custom height 4`] = `
Object {
"maxHeight": null,
"minHeight": null,
- "overflow": null,
+ "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -574,7 +557,6 @@ exports[`Collapse should open from default height 1`] = `
Object {
"maxHeight": 0,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -609,7 +591,6 @@ exports[`Collapse should open from default height 2`] = `
Object {
"maxHeight": 0,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -644,7 +625,6 @@ exports[`Collapse should open from default height 3`] = `
Object {
"maxHeight": 500,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -679,7 +659,7 @@ exports[`Collapse should open from default height 4`] = `
Object {
"maxHeight": null,
"minHeight": null,
- "overflow": null,
+ "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
@@ -695,7 +675,6 @@ exports[`Collapse should take regular element attributes 1`] = `
Object {
"maxHeight": 0,
"minHeight": null,
- "overflow": "hidden",
"position": "relative",
"transition": "ease-in-out 200ms max-height",
}
diff --git a/tests/index.tsx b/tests/index.tsx
index 141d3cc77..3ea12b409 100644
--- a/tests/index.tsx
+++ b/tests/index.tsx
@@ -49,7 +49,9 @@ describe('index file', () => {
for (const key in index) {
if (index.hasOwnProperty(key)) {
- const Component = index[key as Keys];
+ const Component = index[key as Keys] as React.ComponentType<{
+ component: 'p';
+ }>;
if (Component) {
const instance = <Component component="p" />;
diff --git a/tsconfig.json b/tsconfig.json
index ecc46bd60..b7bf1da52 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,8 @@
"noImplicitAny": true,
"skipLibCheck": true,
"pretty": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
"jsx": "react",
"target": "es5",
"module": "commonjs",