Add collapse, tab and scrollspy definitions

Add more definitions and use popper.js definition for offset and behavor

types/bootstrap/bootstrap-tests.ts

@@ -2,8 +2,10 @@
 // Alert
 // --------------------------------------------------------------------------------------
 
+// $ExpectType JQuery<HTMLElement>
 $("#alert").alert();
 
+// $ExpectType JQuery<HTMLElement>
 $("#alert").alert("close");
 
 $("#alert").on("close.bs.alert", () => {});
@@ -12,20 +14,32 @@ $("#alert").on("close.bs.alert", () => {});
 // Button
 // --------------------------------------------------------------------------------------
 
-// $("#button").button(); // must fail
+// $ExpectError
+$("#button").button();
 
+// $ExpectType JQuery<HTMLElement>
 $("#button").button("toggle");
 
 // --------------------------------------------------------------------------------------
 // Carousel
 // --------------------------------------------------------------------------------------
 
+// $ExpectType JQuery<HTMLElement>
 $("#carousel").carousel();
 
+// $ExpectType JQuery<HTMLElement>
 $("#carousel").carousel("pause");
 
 $("#carousel").carousel(100);
 
+$("#carousel").on("slide.bs.carousel", function(ev) {
+    const that: HTMLElement = this;
+    const from: number = ev.from;
+    const to: number = ev.to;
+    const direction: string = ev.direction;
+    const data: undefined = ev.data;
+});
+
 $("#carousel").carousel({
     interval: 5000,
     keyboard: true,
@@ -37,20 +51,43 @@ $("#carousel").carousel({
     pause: false,
 });
 
-$("#carousel").on("slide.bs.carousel", function(ev) {
-    const that: HTMLElement = this;
-    const from: number = ev.from;
-    const to: number = ev.to;
-    const direction: string = ev.direction;
-    const data: undefined = ev.data;
+// --------------------------------------------------------------------------------------
+// Collapse
+// --------------------------------------------------------------------------------------
+
+// $ExpectType JQuery<HTMLElement>
+$("#collapse").collapse();
+
+// $ExpectType JQuery<HTMLElement>
+$("#collapse").collapse("toggle");
+
+$("#collapse").on("show.bs.collapse", () => {});
+
+$("#collapse").collapse({
+    parent: "#parent",
+    toggle: true,
+});
+
+$("#collapse").collapse({
+    parent: document.body,
+});
+
+$("#collapse").collapse({
+    parent: $("#parent"),
+});
+
+$("#collapse").collapse({
+    toggle: false,
 });
 
 // --------------------------------------------------------------------------------------
 // Dropdown
 // --------------------------------------------------------------------------------------
 
+// $ExpectType JQuery<HTMLElement>
 $("#dropdown").dropdown();
 
+// $ExpectType JQuery<HTMLElement>
 $("#dropdown").dropdown("update");
 
 $("#dropdown").on("hide.bs.dropdown", () => {});
@@ -81,8 +118,10 @@ $("#dropdown").dropdown({
 // Modal
 // --------------------------------------------------------------------------------------
 
+// $ExpectType JQuery<HTMLElement>
 $("#modal").modal();
 
+// $ExpectType JQuery<HTMLElement>
 $("#modal").modal("show");
 
 $("#modal").on("hide.bs.modal", () => {});
@@ -98,12 +137,56 @@ $("#modal").modal({
     backdrop: "static",
 });
 
+// --------------------------------------------------------------------------------------
+// Popover
+// --------------------------------------------------------------------------------------
+
+// $ExpectType JQuery<HTMLElement>
+$("#scrollspy").popover();
+
+// $ExpectType JQuery<HTMLElement>
+$("#scrollspy").popover("toggle");
+
+$("#scrollspy").on("activate.bs.scrollspy", () => {});
+
+// TODO: test popover with options
+
+// --------------------------------------------------------------------------------------
+// Scrollspy
+// --------------------------------------------------------------------------------------
+
+// $ExpectType JQuery<HTMLElement>
+$("#scrollspy").scrollspy();
+
+// $ExpectType JQuery<HTMLElement>
+$("#scrollspy").scrollspy("refresh");
+
+$("#scrollspy").on("activate.bs.scrollspy", () => {});
+
+$("#scrollspy").scrollspy({
+    offset: 100,
+});
+
+// --------------------------------------------------------------------------------------
+// Tab
+// --------------------------------------------------------------------------------------
+
+// $ExpectType JQuery<HTMLElement>
+$("#someListItem").tab("show");
+
+$("a[data-toggle=\"list\"]").on("shown.bs.tab", (e) => {
+    e.target; // newly activated tab
+    e.relatedTarget; // previous active tab
+});
+
 // --------------------------------------------------------------------------------------
 // Tooltip
 // --------------------------------------------------------------------------------------
 
+// $ExpectType JQuery<HTMLElement>
 $("#tooltip").tooltip();
 
+// $ExpectType JQuery<HTMLElement>
 $("#tooltip").tooltip("show");
 
 $("#tooltip").on("hide.bs.tooltip", () => {});

types/bootstrap/index.d.ts

@@ -4,16 +4,16 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
-// TODO: collapse, tab (list-group, navs), popovers, scrollspy
+// TODO: popovers options
 
 /// <reference types="jquery" />
+/// <reference types="popper.js" />
 
 // --------------------------------------------------------------------------
 // Some Types and Interfaces
 // --------------------------------------------------------------------------
 
 type BootstrapPlacement = "auto" | "top" | "bottom" | "left" | "right";
-type PopperBehavior = "flip" | "clockwise" | "counterclockwise";
 
 interface BootstrapDelay {
     show: number;
@@ -26,16 +26,9 @@ interface BootstrapTooltipInstance {
     tip: HTMLElement;
 }
 
-interface BootstrapOffsetExtend {
-    top?: number;
-    left?: number;
-    width?: number;
-    height?: number;
-}
-
 interface BootstrapOffsetsExtend {
-    popper?: BootstrapOffsetExtend;
-    reference?: BootstrapOffsetExtend;
+    popper?: Partial<Popper.Offset>;
+    reference?: Partial<Popper.Offset>;
 }
 
 // --------------------------------------------------------------------------------------
@@ -75,6 +68,24 @@ interface BootstrapCarouselOption {
     wrap?: boolean;
 }
 
+interface BootstrapCollapseOption {
+    /**
+     * If parent is provided, then all collapsible elements under the specified parent will be closed when
+     * this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class).
+     * The attribute has to be set on the target collapsible area.
+     *
+     * @default ""
+     */
+    parent?: string | JQuery | Element;
+
+    /**
+     * Toggles the collapsible element on invocation.
+     *
+     * @default true
+     */
+    toggle?: boolean;
+}
+
 interface BootstrapDropdownOption {
     /**
      * Offset of the dropdown relative to its target.
@@ -99,7 +110,7 @@ interface BootstrapDropdownOption {
      *
      * @default "scrollParent"
      */
-    boundary?: "viewport" | "window" | "scrollParent" | HTMLElement;
+    boundary?: Popper.Boundary | HTMLElement;
 }
 
 interface BootstrapModalOption {
@@ -133,6 +144,26 @@ interface BootstrapModalOption {
     show?: boolean;
 }
 
+interface BootstrapPoppoverOption {
+    /**
+     * Apply a CSS fade transition to the popover.
+     *
+     * @default true
+     */
+    animation: boolean;
+
+    // TODO
+}
+
+interface BootstrapScrollspyOption {
+    /**
+     * Pixels to offset from top when calculating position of scroll.
+     *
+     * @default 10
+     */
+    offset?: number;
+}
+
 interface BootstrapTooltipOption {
     /**
      * Apply a CSS fade transition to the tooltip.
@@ -232,7 +263,7 @@ interface BootstrapTooltipOption {
      *
      * @default "flip"
      */
-    fallbackPlacement?: PopperBehavior | PopperBehavior[];
+    fallbackPlacement?: Popper.Behavior | ReadonlyArray<Popper.Behavior>;
 
     /**
      * Overflow constraint boundary of the tooltip.
@@ -242,7 +273,7 @@ interface BootstrapTooltipOption {
      *
      * @default "scrollParent"
      */
-    boundary?: "viewport" | "window" | "scrollParent" | HTMLElement;
+    boundary?: Popper.Boundary | HTMLElement;
 }
 
 // --------------------------------------------------------------------------------------
@@ -268,8 +299,12 @@ interface BootstrapCarouselEventHandler<TElement> extends JQuery.Event<TElement,
 
 type BootstrapAlertEvent = "close.bs.alert" | "closed.bs.alert";
 type BootstrapCarouselEvent = "slide.bs.carousel" | "slid.bs.carousel";
+type BootstrapCollapseEvent = "show.bs.collapse" | "shown.bs.collapse" | "hide.bs.collapse" | "hidden.bs.collapse";
 type BootstrapDropdownEvent = "show.bs.dropdown" | "shown.bs.dropdown" | "hide.bs.dropdown" | "hidden.bs.dropdown";
 type BootstrapModalEvent = "show.bs.modal" | "shown.bs.modal" | "hide.bs.modal" |  "hidden.bs.modal";
+type BootstrapPopoverEvent = "show.bs.popover" | "shown.bs.popover" | "hide.bs.popover" | "hidden.bs.popover" | "inserted.bs.popover";
+type BootstrapScrollspyEvent = "activate.bs.scrollspy";
+type BootstrapTapEvent = "show.bs.tab" | "shown.bs.tab" | "hide.bs.tab" | "hidden.bs.tab";
 type BootstrapTooltipEvent = "show.bs.tooltip" | "shown.bs.tooltip" | "hide.bs.tooltip" |  "hidden.bs.tooltip" | "inserted.bs.tooltip";
 
 // --------------------------------------------------------------------------------------
@@ -284,16 +319,29 @@ interface JQuery<TElement extends Node = HTMLElement> extends Iterable<TElement>
     carousel(action: "cycle" | "pause" | number | "prev" | "next" | "dispose"): this;
     carousel(options?: BootstrapCarouselOption): this;
 
+    collapse(action: "toggle" | "show" | "hide" | "dispose"): this;
+    collapse(options?: BootstrapCollapseOption): this;
+
     dropdown(action: "toggle" | "update" | "dispose"): this;
     dropdown(options?: BootstrapDropdownOption): this;
 
     modal(action: "toggle" | "show" | "hide" | "handleUpdate" | "dispose"): this;
     modal(options?: BootstrapModalOption): this;
 
+    popover(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this;
+    popover(options?: BootstrapPoppoverOption): this;
+
+    scrollspy(action: "refresh" | "dispose"): this;
+    scrollspy(options?: BootstrapScrollspyOption): this;
+
+    tab(action: "show" | "dispose"): this;
+
     tooltip(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this;
     tooltip(options?: BootstrapTooltipOption): this;
 
     on(events: BootstrapCarouselEvent, handler: JQuery.EventHandlerBase<TElement, BootstrapCarouselEventHandler<TElement>>): this;
-    on(events: BootstrapAlertEvent | BootstrapDropdownEvent | BootstrapModalEvent | BootstrapTooltipEvent,
+    on(events:
+        BootstrapAlertEvent | BootstrapCollapseEvent | BootstrapDropdownEvent | BootstrapModalEvent |
+        BootstrapPopoverEvent | BootstrapScrollspyEvent | BootstrapTapEvent | BootstrapTooltipEvent,
         handler: JQuery.EventHandler<TElement>): this;
 }

types/bootstrap/package.json

@@ -0,0 +1,6 @@
+{
+    "private": true,
+    "dependencies": {
+        "popper.js": "^1.12.9"
+    }
+}