Updating Popover and Tooltip definitions

types/reactstrap/index.d.ts

@@ -5,6 +5,7 @@
 //                 Danilo Barros <https://github.com/danilobjr>
 //                 Fábio Paiva <https://github.com/fabiopaiva>
 //                 FaithForHumans <https://github.com/FaithForHumans>
+//                 Kurt Preston <https://github.com/KurtPreston>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 

types/reactstrap/lib/Popover.d.ts

@@ -1,33 +1,37 @@
-/// <reference types='tether' />
+/// <reference types='react' />
 
 import { CSSModule } from '../index';
 
-type Placement
-  = 'top'
-  | 'bottom'
-  | 'left'
+export type Placement
+  = 'auto'
+  | 'auto-start'
+  | 'auto-end'
+  | 'top'
+  | 'top-start'
+  | 'top-end'
   | 'right'
-  | 'top left'
-  | 'top center'
-  | 'top right'
-  | 'right top'
-  | 'right middle'
-  | 'right bottom'
-  | 'bottom right'
-  | 'bottom center'
-  | 'bottom left'
-  | 'left top'
-  | 'left middle'
-  | 'left bottom';
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end';
 
-export interface PopoverProps {
-  placement?: Placement;
-  target: string;
+export interface PopoverProps extends React.HTMLAttributes<HTMLElement> {
   isOpen?: boolean;
-  tether?: Tether.ITetherOptions;
-  className?: string;
-  cssModule?: CSSModule;
   toggle?: () => void;
+  target: string | HTMLElement;
+  container?: string | HTMLElement;
+  className?: string;
+  placement?: Placement;
+  innerClassName?: string;
+  disabled?: boolean;
+  placementPrefix?: string;
+  delay?: number | {show: number, hide: number};
+  modifiers?: object;
+  cssModule?: CSSModule;
 }
 
 declare const Popover: React.StatelessComponent<PopoverProps>;

types/reactstrap/lib/Tooltip.d.ts

@@ -1,35 +1,34 @@
-/// <reference types='tether' />
+/// <reference types='react' />
 
 import { CSSModule } from '../index';
 
-type Placement
-  = 'top'
-  | 'bottom'
-  | 'left'
+export type Placement
+  = 'auto'
+  | 'auto-start'
+  | 'auto-end'
+  | 'top'
+  | 'top-start'
+  | 'top-end'
   | 'right'
-  | 'top left'
-  | 'top center'
-  | 'top right'
-  | 'right top'
-  | 'right middle'
-  | 'right bottom'
-  | 'bottom right'
-  | 'bottom center'
-  | 'bottom left'
-  | 'left top'
-  | 'left middle'
-  | 'left bottom';
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end';
 
-export interface UncontrolledProps {
-  placement?: Placement;
-  target: string;
-  disabled?: boolean;
-  tether?: Tether.ITetherOptions;
-  tetherRef?: (tether: Tether) => void;
+export interface UncontrolledProps extends React.HTMLAttributes<HTMLElement> {
+  target: string | HTMLElement;
+  container?: string | HTMLElement;
+  delay?: number | {show: number, hide: number};
   className?: string;
-  cssModule?: CSSModule;
+  innerClassName?: string;
   autohide?: boolean;
-  delay?: number | { show: number, hide: number };
+  placement?: Placement;
+  modifiers?: object;
+  cssModule?: CSSModule;
 }
 export interface UncontrolledTooltipProps extends UncontrolledProps {
   /* intentionally blank */

types/reactstrap/reactstrap-tests.tsx

@@ -2479,7 +2479,7 @@ class Example85 extends React.Component<any, any> {
         <Button id="Popover1" onClick={this.toggle}>
           Launch Popover
         </Button>
-        <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
+        <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle} onClick={() => {}}>
           <PopoverHeader>Popover Title</PopoverHeader>
           <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
         </Popover>
@@ -3500,3 +3500,24 @@ const Example113 = (props: any) => {
       </div>
     );
   };
+
+class Example114 extends React.Component<any, any> {
+private element: HTMLElement;
+
+refFn(r: HTMLElement | null) {
+    if (r) {
+        this.element = r;
+    }
+}
+
+render() {
+    return (
+    <div>
+        <p>Somewhere in here is a <a href="#" ref={this.refFn}>tooltip</a>.</p>
+        <Tooltip placement="bottom-start" isOpen={this.state.tooltipOpen} target={this.element}>
+        Hello world!
+        </Tooltip>
+    </div>
+    );
+}
+}