feat!: add forwardRef to all components that contain innerRef

This will make us follow React best practices and depend on libraries that are expecting ref to exist
illiteratewriter · Feb 4, 2023 · 17a141a · 17a141a
1 parent 806639c
commit 17a141a
Show file tree

Hide file tree

Showing 47 changed files with 51 additions and 31 deletions.
diff --git a/src/Accordion.js b/src/Accordion.js
@@ -62,4 +62,4 @@ function Accordion(props) {
 Accordion.propTypes = propTypes;
 Accordion.defaultProps = defaultProps;
 
-export default Accordion;
+export default React.forwardRef((props, ref) => <Accordion innerRef={ref} {...props} />);
diff --git a/src/AccordionBody.js b/src/AccordionBody.js
@@ -32,7 +32,7 @@ function AccordionBody(props) {
     className,
     cssModule,
     tag: Tag,
-    innerRef,
+    innerRef = ref,
     children,
     accordionId,
     ...attributes
@@ -62,4 +62,4 @@ function AccordionBody(props) {
 AccordionBody.propTypes = propTypes;
 AccordionBody.defaultProps = defaultProps;
 
-export default AccordionBody;
+export default React.forwardRef((props, ref) => <AccordionBody innerRef={ref} {...props} />);
diff --git a/src/AccordionHeader.js b/src/AccordionHeader.js
@@ -67,4 +67,4 @@ function AccordionHeader(props) {
 AccordionHeader.propTypes = propTypes;
 AccordionHeader.defaultProps = defaultProps;
 
-export default AccordionHeader;
+export default React.forwardRef((props, ref) => <AccordionHeader innerRef={ref} {...props} />);
diff --git a/src/AccordionItem.js b/src/AccordionItem.js
@@ -35,4 +35,4 @@ function AccordionItem(props) {
 AccordionItem.propTypes = propTypes;
 AccordionItem.defaultProps = defaultProps;
 
-export default AccordionItem;
+export default React.forwardRef((props, ref) => <AccordionItem innerRef={ref} {...props} />);
diff --git a/src/Alert.js b/src/Alert.js
@@ -59,7 +59,7 @@ function Alert(props) {
     children,
     transition,
     fade,
-    innerRef,
+    innerRef = ref,
     ...attributes
   } = props;
 
@@ -108,4 +108,4 @@ function Alert(props) {
 Alert.propTypes = propTypes;
 Alert.defaultProps = defaultProps;
 
-export default Alert;
+export default React.forwardRef((props, ref) => <Alert innerRef={ref} {...props} />);
diff --git a/src/Badge.js b/src/Badge.js
@@ -60,4 +60,4 @@ function Badge(props) {
 Badge.propTypes = propTypes;
 Badge.defaultProps = defaultProps;
 
-export default Badge;
+export default React.forwardRef((props, ref) => <Badge innerRef={ref} {...props} />);
diff --git a/src/Button.js b/src/Button.js
@@ -109,4 +109,4 @@ function Button(props) {
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-export default Button;
+export default React.forwardRef((props, ref) => <Button innerRef={ref} {...props} />);
diff --git a/src/Card.js b/src/Card.js
@@ -58,4 +58,4 @@ function Card(props) {
 Card.propTypes = propTypes;
 Card.defaultProps = defaultProps;
 
-export default Card;
+export default React.forwardRef((props, ref) => <Card innerRef={ref} {...props} />);
diff --git a/src/CardBody.js b/src/CardBody.js
@@ -34,4 +34,4 @@ function CardBody(props) {
 CardBody.propTypes = propTypes;
 CardBody.defaultProps = defaultProps;
 
-export default CardBody;
+export default React.forwardRef((props, ref) => <CardBody innerRef={ref} {...props} />);
diff --git a/src/CardLink.js b/src/CardLink.js
@@ -31,4 +31,4 @@ function CardLink(props) {
 CardLink.propTypes = propTypes;
 CardLink.defaultProps = defaultProps;
 
-export default CardLink;
+export default React.forwardRef((props, ref) => <CardLink innerRef={ref} {...props} />);
diff --git a/src/CloseButton.js b/src/CloseButton.js
@@ -40,4 +40,4 @@ function CloseButton(props) {
 CloseButton.propTypes = propTypes;
 CloseButton.defaultProps = defaultProps;
 
-export default CloseButton;
+export default React.forwardRef((props, ref) => <CloseButton innerRef={ref} {...props} />);
diff --git a/src/Collapse.js b/src/Collapse.js
@@ -172,4 +172,4 @@ class Collapse extends Component {
 
 Collapse.propTypes = propTypes;
 Collapse.defaultProps = defaultProps;
-export default Collapse;
+export default React.forwardRef((props, ref) => <Collapse innerRef={ref} {...props} />);
diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -371,4 +371,4 @@ Dropdown.propTypes = propTypes;
 Dropdown.defaultProps = defaultProps;
 Dropdown.contextType = InputGroupContext;
 
-export default Dropdown;
+export default React.forwardRef((props, ref) => <Dropdown innerRef={ref} {...props} />);
diff --git a/src/DropdownToggle.js b/src/DropdownToggle.js
@@ -143,4 +143,4 @@ DropdownToggle.propTypes = propTypes;
 DropdownToggle.defaultProps = defaultProps;
 DropdownToggle.contextType = DropdownContext;
 
-export default DropdownToggle;
+export default React.forwardRef((props, ref) => <DropdownToggle innerRef={ref} {...props} />);
diff --git a/src/Fade.js b/src/Fade.js
@@ -77,4 +77,4 @@ function Fade(props) {
 Fade.propTypes = propTypes;
 Fade.defaultProps = defaultProps;
 
-export default Fade;
+export default React.forwardRef((props, ref) => <Fade innerRef={ref} {...props} />);
diff --git a/src/Form.js b/src/Form.js
@@ -54,4 +54,4 @@ class Form extends Component {
 Form.propTypes = propTypes;
 Form.defaultProps = defaultProps;
 
-export default Form;
+export default React.forwardRef((props, ref) => <Form innerRef={ref} {...props} />);
diff --git a/src/Input.js b/src/Input.js
@@ -144,4 +144,4 @@ class Input extends React.Component {
 Input.propTypes = propTypes;
 Input.defaultProps = defaultProps;
 
-export default Input;
+export default React.forwardRef((props, ref) => <Input innerRef={ref} {...props} />);
diff --git a/src/Modal.js b/src/Modal.js
@@ -574,4 +574,4 @@ Modal.defaultProps = defaultProps;
 Modal.openCount = 0;
 Modal.originalBodyOverflow = null;
 
-export default Modal;
+export default React.forwardRef((props, ref) => <Modal innerRef={ref} {...props} />);
diff --git a/src/NavLink.js b/src/NavLink.js
@@ -82,4 +82,4 @@ class NavLink extends React.Component {
 NavLink.propTypes = propTypes;
 NavLink.defaultProps = defaultProps;
 
-export default NavLink;
+export default React.forwardRef((props, ref) => <NavLink innerRef={ref} {...props} />);
diff --git a/src/Offcanvas.js b/src/Offcanvas.js
@@ -468,4 +468,4 @@ Offcanvas.propTypes = propTypes;
 Offcanvas.defaultProps = defaultProps;
 Offcanvas.openCount = 0;
 
-export default Offcanvas;
+export default React.forwardRef((props, ref) => <Offcanvas innerRef={ref} {...props} />);
diff --git a/src/Placeholder.js b/src/Placeholder.js
@@ -61,4 +61,4 @@ function Placeholder(props) {
 Placeholder.propTypes = propTypes;
 Placeholder.defaultProps = defaultProps;
 
-export default Placeholder;
+export default React.forwardRef((props, ref) => <Placeholder innerRef={ref} {...props} />);
diff --git a/src/Table.js b/src/Table.js
@@ -50,7 +50,7 @@ function Table(props) {
     responsive,
     tag: Tag,
     responsiveTag: ResponsiveTag,
-    innerRef,
+    innerRef = ref,
     ...attributes
   } = props;
 
@@ -89,4 +89,4 @@ function Table(props) {
 Table.propTypes = propTypes;
 Table.defaultProps = defaultProps;
 
-export default Table;
+export default React.forwardRef((props, ref) => <Table innerRef={ref} {...props} />);
diff --git a/src/Toast.js b/src/Toast.js
@@ -69,4 +69,4 @@ function Toast(props) {
 Toast.propTypes = propTypes;
 Toast.defaultProps = defaultProps;
 
-export default Toast;
+export default React.forwardRef((props, ref) => <Toast innerRef={ref} {...props} />);
diff --git a/src/ToastBody.js b/src/ToastBody.js
@@ -31,4 +31,4 @@ function ToastBody(props) {
 ToastBody.propTypes = propTypes;
 ToastBody.defaultProps = defaultProps;
 
-export default ToastBody;
+export default React.forwardRef((props, ref) => <ToastBody innerRef={ref} {...props} />);
diff --git a/src/TooltipPopoverWrapper.js b/src/TooltipPopoverWrapper.js
@@ -400,4 +400,4 @@ class TooltipPopoverWrapper extends React.Component {
 TooltipPopoverWrapper.propTypes = propTypes;
 TooltipPopoverWrapper.defaultProps = defaultProps;
 
-export default TooltipPopoverWrapper;
+export default React.forwardRef((props, ref) => <TooltipPopoverWrapper innerRef={ref} {...props} />);
diff --git a/src/UncontrolledAccordion.js b/src/UncontrolledAccordion.js
@@ -43,4 +43,4 @@ function UncontrolledAccordion({ defaultOpen, stayOpen, ...props }) {
 UncontrolledAccordion.propTypes = propTypes;
 UncontrolledAccordion.defaultProps = defaultProps;
 
-export default UncontrolledAccordion;
+export default React.forwardRef((props, ref) => <UncontrolledAccordion innerRef={ref} {...props} />);
diff --git a/types/lib/Accordion.d.ts b/types/lib/Accordion.d.ts
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { CSSModule } from './utils';
-
 export interface AccordionProps extends React.HTMLAttributes<HTMLElement> {
   tag?: React.ElementType;
   cssModule?: CSSModule;
   flush?: boolean;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   open: string | string[];
 }

diff --git a/types/lib/AccordionBody.d.ts b/types/lib/AccordionBody.d.ts
@@ -4,6 +4,7 @@ import { CSSModule } from './utils';
 export interface AccordionBodyProps extends React.HTMLAttributes<HTMLElement> {
   tag?: React.ElementType;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   accordionId: string;
 }

diff --git a/types/lib/AccordionHeader.d.ts b/types/lib/AccordionHeader.d.ts
@@ -4,6 +4,7 @@ import { CSSModule } from './utils';
 export interface AccordionHeaderProps extends React.HTMLAttributes<HTMLElement> {
   tag?: React.ElementType;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   targetId: string;
 }

diff --git a/types/lib/AccordionItem.d.ts b/types/lib/AccordionItem.d.ts
@@ -4,6 +4,7 @@ import { CSSModule } from './utils';
 export interface AccordionItemProps extends React.HTMLAttributes<HTMLElement> {
   tag?: React.ElementType;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 

diff --git a/types/lib/Alert.d.ts b/types/lib/Alert.d.ts
@@ -12,6 +12,7 @@ export interface UncontrolledAlertProps
   fade?: boolean;
   tag?: React.ElementType;
   transition?: FadeProps;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 export interface AlertProps extends UncontrolledAlertProps {

diff --git a/types/lib/Badge.d.ts b/types/lib/Badge.d.ts
@@ -6,6 +6,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
   color?: string;
   pill?: boolean;
   tag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   cssModule?: CSSModule;
 }

diff --git a/types/lib/Button.d.ts b/types/lib/Button.d.ts
@@ -9,6 +9,7 @@ export interface ButtonProps
   block?: boolean;
   color?: string;
   tag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLButtonElement>;
   size?: string;
   cssModule?: CSSModule;

diff --git a/types/lib/Card.d.ts b/types/lib/Card.d.ts
@@ -9,6 +9,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLElement> {
   body?: boolean;
   outline?: boolean;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 

diff --git a/types/lib/CardBody.d.ts b/types/lib/CardBody.d.ts
@@ -5,6 +5,7 @@ export interface CardBodyProps extends React.HTMLAttributes<HTMLElement> {
   [key: string]: any;
   tag?: React.ElementType;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 

diff --git a/types/lib/CardLink.d.ts b/types/lib/CardLink.d.ts
@@ -5,6 +5,7 @@ export interface CardLinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   [key: string]: any;
   tag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLAnchorElement>;
   cssModule?: CSSModule;
 }

diff --git a/types/lib/Collapse.d.ts b/types/lib/Collapse.d.ts
@@ -19,6 +19,7 @@ export interface CollapseProps extends React.HTMLAttributes<HTMLElement> {
   onExit?: () => void;
   onExiting?: () => void;
   onExited?: () => void;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 

diff --git a/types/lib/Fade.d.ts b/types/lib/Fade.d.ts
@@ -16,6 +16,7 @@ export interface FadeProps extends React.HTMLAttributes<HTMLElement> {
   transitionLeave?: boolean;
   onLeave?: () => void;
   onEnter?: () => void;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 

diff --git a/types/lib/Form.d.ts b/types/lib/Form.d.ts
@@ -4,6 +4,7 @@ import { CSSModule } from './utils';
 export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   [key: string]: any;
   tag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLFormElement>;
   cssModule?: CSSModule;
 }

diff --git a/types/lib/Input.d.ts b/types/lib/Input.d.ts
@@ -37,6 +37,7 @@ export interface InputProps
   valid?: boolean;
   invalid?: boolean;
   tag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
   plaintext?: boolean;
   addon?: boolean;

diff --git a/types/lib/Modal.d.ts b/types/lib/Modal.d.ts
@@ -31,6 +31,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLElement> {
   unmountOnClose?: boolean;
   returnFocusAfterClose?: boolean;
   container?: string | HTMLElement | React.RefObject<HTMLElement>;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   trapFocus?: boolean;
 }

diff --git a/types/lib/NavLink.d.ts b/types/lib/NavLink.d.ts
@@ -5,6 +5,7 @@ export interface NavLinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   [key: string]: any;
   tag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLAnchorElement>;
   disabled?: boolean;
   active?: boolean;

diff --git a/types/lib/Offcanvas.d.ts b/types/lib/Offcanvas.d.ts
@@ -14,6 +14,7 @@ export interface OffcanvasProps extends React.HTMLAttributes<HTMLElement> {
   contentClassName?: string;
   cssModule?: CSSModule;
   fade?: boolean;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   isOpen?: boolean;
   keyboard?: boolean;

diff --git a/types/lib/Placeholder.d.ts b/types/lib/Placeholder.d.ts
@@ -10,8 +10,9 @@ export interface PlaceholderProps extends React.HTMLAttributes<HTMLElement> {
   cssModule?: CSSModule;
   size?: string;
   widths?: string[];
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }
 
 declare class Placeholder extends React.Component<PlaceholderProps> {}
-export default Placeholder;
+export default Placeholder;
diff --git a/types/lib/Table.d.ts b/types/lib/Table.d.ts
@@ -15,6 +15,7 @@ export interface TableProps
   responsive?: boolean | string;
   tag?: React.ElementType;
   responsiveTag?: React.ElementType;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLTableElement>;
 }
 

diff --git a/types/lib/Toast.d.ts b/types/lib/Toast.d.ts
@@ -6,6 +6,7 @@ export interface ToastProps extends React.HTMLAttributes<HTMLElement> {
   [key: string]: any;
   tag?: React.ElementType;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
   isOpen?: boolean;
   fade?: boolean;

diff --git a/types/lib/ToastBody.d.ts b/types/lib/ToastBody.d.ts
@@ -5,6 +5,7 @@ export interface ToastBodyProps extends React.HTMLAttributes<HTMLElement> {
   [key: string]: any;
   tag?: React.ElementType;
   cssModule?: CSSModule;
+  ref?: React.Ref<HTMLElement>;
   innerRef?: React.Ref<HTMLElement>;
 }