diff --git a/src/Button.tsx b/src/Button.tsx index a96b2eed2d..0a3b68d2bb 100644 --- a/src/Button.tsx +++ b/src/Button.tsx @@ -10,6 +10,8 @@ import { } from './helpers'; import { ButtonVariant } from './types'; +export type ButtonType = 'button' | 'reset' | 'submit' | string; + export interface ButtonProps extends React.HTMLAttributes, BsPrefixPropsWithChildren { @@ -17,7 +19,7 @@ export interface ButtonProps block?: boolean; variant?: ButtonVariant; size?: 'sm' | 'lg'; - type?: 'button' | 'reset' | 'submit' | string; + type?: ButtonType; href?: string; disabled?: boolean; target?: any; diff --git a/src/DropdownButton.tsx b/src/DropdownButton.tsx index a63a44cc5a..995cbbaeb3 100644 --- a/src/DropdownButton.tsx +++ b/src/DropdownButton.tsx @@ -7,8 +7,8 @@ import DropdownMenu from './DropdownMenu'; export interface DropdownButtonProps extends DropdownProps, + Omit, 'onSelect' | 'title'>, React.PropsWithChildren { - id?: string; title: React.ReactNode; menuRole?: string; renderMenuOnMount?: boolean; diff --git a/src/DropdownItem.tsx b/src/DropdownItem.tsx index d1d51c73c4..97d7b01d8b 100644 --- a/src/DropdownItem.tsx +++ b/src/DropdownItem.tsx @@ -28,7 +28,7 @@ type DropdownItem = BsPrefixRefForwardingComponent< >; const propTypes = { - /** @default 'dropdown' */ + /** @default 'dropdown-item' */ bsPrefix: PropTypes.string, /** diff --git a/src/Figure.tsx b/src/Figure.tsx index fe6c7a0a58..7da45979f4 100644 --- a/src/Figure.tsx +++ b/src/Figure.tsx @@ -1,9 +1,9 @@ import createWithBsPrefix from './createWithBsPrefix'; - +import { BsPrefixRefForwardingComponent } from './helpers'; import FigureImage from './FigureImage'; import FigureCaption from './FigureCaption'; -type Figure = React.ComponentType & { +type Figure = BsPrefixRefForwardingComponent<'figure'> & { Image: typeof FigureImage; Caption: typeof FigureCaption; }; diff --git a/src/ModalDialog.tsx b/src/ModalDialog.tsx index ea38644817..1d9f6ed05b 100644 --- a/src/ModalDialog.tsx +++ b/src/ModalDialog.tsx @@ -6,7 +6,9 @@ import { useBootstrapPrefix } from './ThemeProvider'; import { BsPrefixPropsWithChildren } from './helpers'; -export interface ModalDialogProps extends BsPrefixPropsWithChildren { +export interface ModalDialogProps + extends React.HTMLAttributes, + BsPrefixPropsWithChildren { size?: 'sm' | 'lg' | 'xl'; centered?: boolean; scrollable?: boolean; diff --git a/src/Overlay.tsx b/src/Overlay.tsx index 88adfa563f..e0e76c24a2 100644 --- a/src/Overlay.tsx +++ b/src/Overlay.tsx @@ -12,15 +12,17 @@ import { TransitionType } from './helpers'; export type Placement = import('react-overlays/usePopper').Placement; +export type ArrowProps = { + ref: React.RefCallback; + style: React.CSSProperties; +}; + export interface OverlayInjectedProps { ref: React.RefCallback; style: React.CSSProperties; 'aria-labelledby'?: string; - arrowProps: { - ref: React.RefCallback; - style: React.CSSProperties; - }; + arrowProps: ArrowProps; show: boolean; placement: Placement; diff --git a/src/PageItem.tsx b/src/PageItem.tsx index 49ddf8eefb..40a100302e 100644 --- a/src/PageItem.tsx +++ b/src/PageItem.tsx @@ -9,8 +9,9 @@ import { import SafeAnchor from './SafeAnchor'; -export interface PageItemProps extends BsPrefixPropsWithChildren { - style?: any; +export interface PageItemProps + extends React.HTMLAttributes, + BsPrefixPropsWithChildren { disabled?: boolean; active?: boolean; activeLabel?: string; diff --git a/src/Popover.tsx b/src/Popover.tsx index 3b79a88665..646d831003 100644 --- a/src/Popover.tsx +++ b/src/Popover.tsx @@ -5,7 +5,7 @@ import isRequiredForA11y from 'prop-types-extra/lib/isRequiredForA11y'; import { useBootstrapPrefix } from './ThemeProvider'; import PopoverTitle from './PopoverTitle'; import PopoverContent from './PopoverContent'; -import { Placement } from './Overlay'; +import { ArrowProps, Placement } from './Overlay'; import { BsPrefixPropsWithChildren, BsPrefixRefForwardingComponent, @@ -17,7 +17,7 @@ export interface PopoverProps id: string; placement?: Placement; title?: string; - arrowProps?: { ref: any; style: object }; + arrowProps?: ArrowProps; content?: boolean; popper?: any; show?: boolean; diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx index 49f55644b1..f33c29d60d 100644 --- a/src/ProgressBar.tsx +++ b/src/ProgressBar.tsx @@ -7,8 +7,9 @@ import { useBootstrapPrefix } from './ThemeProvider'; import { map } from './ElementChildren'; import { BsPrefixPropsWithChildren } from './helpers'; -export interface ProgressBarProps extends BsPrefixPropsWithChildren { - style?: any; +export interface ProgressBarProps + extends React.HTMLAttributes, + BsPrefixPropsWithChildren { min?: number; now?: number; max?: number; diff --git a/src/SafeAnchor.tsx b/src/SafeAnchor.tsx index 932d0765d5..3938fbbab4 100644 --- a/src/SafeAnchor.tsx +++ b/src/SafeAnchor.tsx @@ -4,10 +4,10 @@ import PropTypes from 'prop-types'; import createChainedFunction from './createChainedFunction'; import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers'; -export interface SafeAnchorProps extends BsPrefixProps { +export interface SafeAnchorProps + extends React.HTMLAttributes, + BsPrefixProps { href?: string; - onClick?: React.MouseEventHandler; - onKeyDown?: React.KeyboardEventHandler; disabled?: boolean; role?: string; tabIndex?: number; diff --git a/src/Spinner.tsx b/src/Spinner.tsx index fc76ccae0f..38c49cd1bb 100644 --- a/src/Spinner.tsx +++ b/src/Spinner.tsx @@ -6,7 +6,9 @@ import { useBootstrapPrefix } from './ThemeProvider'; import { BsPrefixPropsWithChildren } from './helpers'; import { Variant } from './types'; -export interface SpinnerProps extends BsPrefixPropsWithChildren { +export interface SpinnerProps + extends React.HTMLAttributes, + BsPrefixPropsWithChildren { animation: 'border' | 'grow'; role?: string; size?: 'sm'; diff --git a/src/SplitButton.tsx b/src/SplitButton.tsx index 80d58d6c31..d78096c0bc 100644 --- a/src/SplitButton.tsx +++ b/src/SplitButton.tsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Button from './Button'; +import Button, { ButtonType } from './Button'; import ButtonGroup from './ButtonGroup'; import Dropdown from './Dropdown'; import { PropsFromToggle } from './DropdownToggle'; @@ -21,7 +21,7 @@ export interface SplitButtonProps target?: string; title: React.ReactNode; toggleLabel?: string; - type?: any; + type?: ButtonType; } type SplitButton = BsPrefixRefForwardingComponent<'div', SplitButtonProps>; diff --git a/src/ToggleButton.tsx b/src/ToggleButton.tsx index b6002fef37..81a3935e28 100644 --- a/src/ToggleButton.tsx +++ b/src/ToggleButton.tsx @@ -9,7 +9,8 @@ import { } from './helpers'; export interface ToggleButtonProps - extends React.PropsWithChildren { + extends ButtonProps, + React.PropsWithChildren { type?: 'checkbox' | 'radio'; name?: string; checked?: boolean; @@ -19,7 +20,7 @@ export interface ToggleButtonProps inputRef?: React.LegacyRef<'input'>; } -type ToggleButton = BsPrefixComponentClass<'button', ButtonProps>; +type ToggleButton = BsPrefixComponentClass<'button', ToggleButtonProps>; const noop = () => undefined; diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index bc5642c946..6d43edc92a 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -4,17 +4,18 @@ import PropTypes from 'prop-types'; import isRequiredForA11y from 'prop-types-extra/lib/isRequiredForA11y'; import { useBootstrapPrefix } from './ThemeProvider'; -import { Placement } from './Overlay'; +import { ArrowProps, Placement } from './Overlay'; import { BsPrefixPropsWithChildren, BsPrefixRefForwardingComponent, } from './helpers'; -export interface TooltipProps extends BsPrefixPropsWithChildren { - style?: any; +export interface TooltipProps + extends React.HTMLAttributes, + BsPrefixPropsWithChildren { id: string; placement?: Placement; - arrowProps?: { ref: any; style: object }; + arrowProps?: ArrowProps; show?: boolean; popper?: any; } diff --git a/tests/simple-types-test.tsx b/tests/simple-types-test.tsx index c679817d25..54f53e4d5c 100644 --- a/tests/simple-types-test.tsx +++ b/tests/simple-types-test.tsx @@ -13,26 +13,35 @@ import { ButtonToolbar, Card, CardColumns, + CardDeck, + CardGroup, Carousel, Container, Col, Row, Dropdown, DropdownButton, + Figure, Form, FormFile, FormControl, + Image, + Jumbotron, InputGroup, ListGroup, Modal, Nav, + Navbar, NavDropdown, + Overlay, OverlayTrigger, Tooltip, Pagination, Popover, ProgressBar, Spinner, + SplitButton, + Table, Tabs, Tab, ToggleButtonGroup, @@ -40,63 +49,167 @@ import { Toast, } from '../src'; +const style: React.CSSProperties = { + color: 'red', +}; + +// eslint-disable-next-line @typescript-eslint/no-empty-function +const noop = () => {}; + // eslint-disable-next-line @typescript-eslint/no-unused-vars const MegaComponent = () => ( <> - ()} dismissible> + ()} + style={style} + closeLabel="close" + dismissible + onClose={noop} + show + // transition={} TODO + variant="primary" + bsPrefix="alert" + > Woop woop - - - + + + - Click me! + + Click me! + - + Hello! I am the body - 42 + + 42 + 42 - - + + - + + - - + } + nextLabel="next" + onSelect={noop} + onSlid={noop} + onSlide={noop} + pause="hover" + prevIcon={} + prevLabel="previous" + slide + touch + wrap={false} + bsPrefix="carousel" + style={style} + > + First slide - +

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

 @@ -128,9 +241,19 @@ const MegaComponent = () => ( - - - + + + 1 of 3 Variable width content @@ -145,35 +268,190 @@ const MegaComponent = () => ( 3 of 3 + - - + + + Dropdown Button - - Action + + + Action + Another action Something else + + - + Action Another action Something else -
- - Email address +
+ + + ()} + as="form" + inline + validated + bsPrefix="form" + > + + ()} + as="div" + controlId="exampleForm.ControlInput1" + bsPrefix="formgroup" + style={style} + > + ()} + as="div" + column="sm" + htmlFor="id" + srOnly + bsPrefix="formlabel" + style={style} + > + Email address + + ()} + as="small" + muted + bsPrefix="formtext" + style={style} + /> ()} onChange={(e) => { // $ExpectType ChangeEvent return e; }} + style={style} /> + + ()} + as="input" + custom + disabled + feedback="test" + feedbackTooltip + id="id" + inline + isInvalid + isValid + label="label" + title="title" + type="checkbox" + bsPrefix="formcheck" + bsCustomPrefix="customcheck" + style={style} + > + + + Example select @@ -228,19 +506,61 @@ const MegaComponent = () => ( - + + + + ()} id="custom-file-ref" label="Custom file input" custom /> - + + +
- - + + @ ( aria-label="Recipient's username" aria-describedby="basic-addon2" /> - + @example.com @@ -288,8 +608,26 @@ const MegaComponent = () => (
- - + + Link 1 @@ -297,19 +635,92 @@ const MegaComponent = () => ( This one is a button - - - Modal heading + + + + Modal heading + - Woohoo, you are reading this text in a modal! - + + Woohoo, you are reading this text in a modal! + + -