[reactstrap] Update typings to 8.2 (#40865)

types/reactstrap/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for reactstrap 8.0
+// Type definitions for reactstrap 8.2
 // Project: https://github.com/reactstrap/reactstrap#readme
 // Definitions by: Ali Hammad Baig <https://github.com/alihammad>
 //                 Marco Falkenberg <https://github.com/mfal>
@@ -31,6 +31,8 @@ export { default as ButtonDropdown } from './lib/ButtonDropdown';
 export { ButtonDropdownProps } from './lib/ButtonDropdown';
 export { default as ButtonGroup } from './lib/ButtonGroup';
 export { ButtonGroupProps } from './lib/ButtonGroup';
+export { default as ButtonToggle } from './lib/ButtonToggle';
+export { ButtonToggleProps } from './lib/ButtonToggle';
 export { default as ButtonToolbar } from './lib/ButtonToolbar';
 export { ButtonToolbarProps } from './lib/ButtonToolbar';
 export { default as Card } from './lib/Card';
@@ -133,6 +135,8 @@ export { default as Navbar } from './lib/Navbar';
 export { NavbarProps } from './lib/Navbar';
 export { default as NavbarBrand } from './lib/NavbarBrand';
 export { NavbarBrandProps } from './lib/NavbarBrand';
+export { default as NavbarText } from './lib/NavbarText';
+export { NavbarTextProps } from './lib/NavbarText';
 export { default as NavbarToggler } from './lib/NavbarToggler';
 export { NavbarTogglerProps } from './lib/NavbarToggler';
 export { default as NavItem } from './lib/NavItem';

types/reactstrap/lib/Button.d.ts

@@ -11,10 +11,11 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     tag?: string | React.ReactType;
     innerRef?: React.Ref<HTMLButtonElement>;
     onClick?: React.MouseEventHandler<any>;
-    size?: any;
+    size?: string;
     id?: string;
     style?: React.CSSProperties;
     cssModule?: CSSModule;
+    close?: boolean;
 }
 
 declare class Button<T = {[key: string]: any}> extends React.Component<ButtonProps> {}

types/reactstrap/lib/ButtonToggle.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export interface ButtonToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'defaultValue'> {
+    [key: string]: any;
+    onClick?: React.MouseEventHandler<any>;
+    onBlur?: React.FocusEventHandler<any>;
+    onFocus?: React.FocusEventHandler<any>;
+    defaultValue?: boolean;
+}
+
+declare class ButtonToggle<T = {[key: string]: any}> extends React.Component<ButtonToggleProps> {}
+export default ButtonToggle;

types/reactstrap/lib/Container.d.ts

@@ -4,7 +4,7 @@ import { CSSModule } from '../index';
 export interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
     [key: string]: any;
     tag?: string | React.ReactType;
-    fluid?: boolean;
+    fluid?: boolean | string;
     className?: string;
     cssModule?: CSSModule;
 }

types/reactstrap/lib/Dropdown.d.ts

@@ -9,6 +9,7 @@ export type Direction =
 
 export interface DropdownProps extends React.HTMLAttributes<HTMLElement> {
   [key: string]: any;
+  a11y?: boolean;
   disabled?: boolean;
   direction?: Direction;
   group?: boolean;
@@ -28,6 +29,7 @@ export interface DropdownProps extends React.HTMLAttributes<HTMLElement> {
 
 export interface UncontrolledDropdownProps extends DropdownProps {
   defaultOpen?: boolean;
+  onToggle?: (event: React.KeyboardEvent | React.MouseEvent, isOpen: boolean) => void;
 }
 
 declare class Dropdown<T = {[key: string]: any}> extends React.Component<DropdownProps> {}

types/reactstrap/lib/ListGroup.d.ts

@@ -5,6 +5,7 @@ export interface ListGroupProps extends React.HTMLAttributes<HTMLElement> {
     [key: string]: any;
     tag?: string | React.ReactType;
     flush?: boolean;
+    horizontal?: boolean | string;
     className?: string;
     cssModule?: CSSModule;
 }

types/reactstrap/lib/NavbarText.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from '../index';
+
+export interface NavbarTextProps extends React.HTMLProps<HTMLElement> {
+    [key: string]: any;
+    tag?: string | React.ReactType;
+    className?: string;
+    cssModule?: CSSModule;
+}
+
+declare class NavbarText<T = {[key: string]: any}> extends React.Component<NavbarTextProps> {}
+export default NavbarText;

types/reactstrap/lib/Popover.d.ts

@@ -11,6 +11,7 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLElement> {
     boundariesElement?: Popper.Boundary | Element;
     className?: string;
     placement?: Popper.Placement;
+    popperClassName?: string;
     innerClassName?: string;
     disabled?: boolean;
     hideArrow?: boolean;

types/reactstrap/lib/Row.d.ts

@@ -10,6 +10,11 @@ export interface RowProps extends Omit<React.HTMLProps<HTMLElement>, 'form'> {
     tag?: string | React.ReactType;
     noGutters?: boolean;
     form?: boolean;
+    xs?: number | string;
+    sm?: number | string;
+    md?: number | string;
+    lg?: number | string;
+    xl?: number | string;
 }
 
 declare class Row<T = {[key: string]: any}> extends React.Component<RowProps> {}

types/reactstrap/lib/Tooltip.d.ts

@@ -8,6 +8,7 @@ export interface UncontrolledTooltipProps extends React.HTMLAttributes<HTMLEleme
   container?: string | HTMLElement;
   delay?: number | {show: number, hide: number};
   className?: string;
+  popperClassName?: string;
   innerClassName?: string;
   autohide?: boolean;
   placement?: Popper.Placement;

types/reactstrap/reactstrap-tests.tsx

@@ -8,6 +8,7 @@ import {
   Button,
   ButtonDropdown,
   ButtonGroup,
+  ButtonToggle,
   ButtonToolbar,
   Dropdown,
   DropdownItem,
@@ -61,6 +62,7 @@ import {
   Nav,
   Navbar,
   NavbarBrand,
+  NavbarText,
   NavbarToggler,
   NavItem,
   NavLink,
@@ -340,6 +342,48 @@ class Example14 extends React.Component<any, any> {
   }
 }
 
+const ExampleButtonClose = () => (
+  <div>
+    <CardGroup>
+      <Card>
+        <CardBody>
+          <CardTitle>
+            <Button close />
+          </CardTitle>
+          <CardText>Default close icon</CardText>
+        </CardBody>
+      </Card>
+      <Card>
+        <CardBody>
+          <CardTitle>
+            <Button close aria-label="Cancel">
+              <span aria-hidden>&ndash;</span>
+            </Button>
+          </CardTitle>
+          <CardText>
+          Custom content and aria-label
+          </CardText>
+        </CardBody>
+      </Card>
+    </CardGroup>
+  </div>
+);
+
+class ExampleButtonToggle extends React.Component {
+  render() {
+    return (
+      <div>
+        <ButtonToggle color="primary">primary</ButtonToggle>{' '}
+        <ButtonToggle color="secondary">secondary</ButtonToggle>{' '}
+        <ButtonToggle color="success">success</ButtonToggle>{' '}
+        <ButtonToggle color="info">info</ButtonToggle>{' '}
+        <ButtonToggle color="warning">warning</ButtonToggle>{' '}
+        <ButtonToggle color="danger">danger</ButtonToggle>{' '}
+      </div>
+    );
+  }
+}
+
 // ------------- Button Dropdown
 class Example15 extends React.Component<any, any> {
   state: any;
@@ -1695,6 +1739,56 @@ class Example61 extends React.Component {
   }
 }
 
+const ExampleResponsiveContainer = (props: any) => {
+  return (
+    <>
+      <Container className="themed-container">.container</Container>
+      <Container className="themed-container" fluid="sm">.container-sm</Container>
+      <Container className="themed-container" fluid="md">.container-md</Container>
+      <Container className="themed-container" fluid="lg">.container-lg</Container>
+      <Container className="themed-container" fluid="xl">.container-xl</Container>
+      <Container className="themed-container" fluid={true}>.container-fluid</Container>
+    </>
+  );
+};
+
+const ExampleRowColumns = (props: any) => {
+  return (
+    <Container>
+      <Row xs="2">
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+      </Row>
+      <Row xs="3">
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+      </Row>
+      <Row xs="4">
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+      </Row>
+      <Row xs="4">
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col xs="6">Column</Col>
+        <Col>Column</Col>
+      </Row>
+      <Row xs="1" sm="2" md="4">
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+      </Row>
+    </Container>
+  );
+};
+
 class Example62 extends React.Component {
   render() {
     return (
@@ -1802,6 +1896,42 @@ class Example67 extends React.Component {
   }
 }
 
+const ExampleListGroupFlush = (props: any) => {
+  return (
+    <ListGroup flush>
+      <ListGroupItem disabled tag="a" href="#">Cras justo odio</ListGroupItem>
+      <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
+      <ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
+      <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
+      <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
+    </ListGroup>
+  );
+};
+
+const ExampleListGroupHorizontal = (props: any) => {
+  return (
+    <div>
+      <p>The <code>horizontal</code> prop can be a Boolean or a string specifying one of Bootstrap's breakpoints</p>
+      <ListGroup horizontal>
+        <ListGroupItem tag="a" href="#">Cras justo odio</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
+      </ListGroup>
+      <p className="mt-3">This list group is horizontal at the <code>lg</code> breakpoint and up.</p>
+      <ListGroup horizontal="lg">
+        <ListGroupItem tag="a" href="#">Cras justo odio</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
+      </ListGroup>
+      <p className="mt-3">Note that horizontal list groups cannot be combined with flush list groups. If <code>flush</code> is <code>true</code> then <code>horizontal</code> has no effect.</p>
+    </div>
+  );
+};
+
 // ------------- Media
 const Example68 = () => {
   return (
@@ -2257,7 +2387,7 @@ class Example75 extends React.Component<any, any> {
               <NavItem>
                 <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
               </NavItem>
-              <UncontrolledDropdown nav inNavbar>
+              <UncontrolledDropdown nav inNavbar onToggle={() => {}} a11y>
                 <DropdownToggle nav caret>
                   Options
                 </DropdownToggle>
@@ -2275,6 +2405,7 @@ class Example75 extends React.Component<any, any> {
                 </DropdownMenu>
               </UncontrolledDropdown>
             </Nav>
+            <NavbarText>Simple Text</NavbarText>
           </Collapse>
         </Navbar>
       </div>
@@ -3436,7 +3567,7 @@ function Example() {
   return (
     <div>
       <p>Somewhere in here is a <a href="#" id="UncontrolledTooltipExample">tooltip</a>.</p>
-      <UncontrolledTooltip placement="right" target="UncontrolledTooltipExample">
+      <UncontrolledTooltip placement="right" target="UncontrolledTooltipExample" popperClassName="popperClassName">
         Hello world!
       </UncontrolledTooltip>
     </div>
@@ -4497,7 +4628,7 @@ function Example125() {
 function Example126() {
     return (
         <div>
-            <UncontrolledPopover placement="bottom" target="UncontrolledPopover">
+            <UncontrolledPopover placement="bottom" target="UncontrolledPopover" popperClassName="popperClassName">
                 <PopoverHeader>Popover Title</PopoverHeader>
                 <PopoverBody>Lorem ipsum dolor sit amet</PopoverBody>
             </UncontrolledPopover>