Potential forward ref

package.json

@@ -74,7 +74,7 @@
     "react-text-mask": "~5.0.2",
     "react-transition-group": "^2.9.0",
     "react-use": "^17.3.2",
-    "reactstrap": "^9.1.5",
+    "reactstrap": "9.1.6-v10-f1a1f7e.0",
     "styled-jsx": "^3.3.2",
     "text-mask-addons": "^3.8.0",
     "tributejs": "^5.1.3",

src/components/Activity/Activity.tsx

@@ -17,6 +17,7 @@ interface ActivityProps extends Omit<ListGroupItemProps, 'action'> {
  * Extension to Bootstrap [ListGroupItem](https://getbootstrap.com/docs/4.3/components/list-group-item/)
  * representing a timeline event.
  */
+// Forward ref
 const Activity: FC<ActivityProps> = ({
   action,
   by,

src/components/Activity/ActivityLog.tsx

@@ -5,6 +5,7 @@ import { ListGroup, ListGroupProps } from 'reactstrap';
  * Extension to Bootstrap [ListGroup](https://getbootstrap.com/docs/4.3/components/list-group/)
  * for listing a timeline of Activities
  */
+// Passes in ref
 const ActivityLog: FC<ListGroupProps> = ({ children, ...props }) => (
   <ListGroup {...props}>{children}</ListGroup>
 );

src/components/Address/CountryInput.tsx

@@ -15,6 +15,7 @@ const defaultProps = {
   onChange: () => {},
 };
 
+// Forwards ref
 const CountryInput: FC<CountryInputProps> = ({
   onChange = defaultProps.onChange,
   ...otherProps

src/components/Address/StateInput.tsx

@@ -31,6 +31,7 @@ const defaultProps = {
   onChange: () => {},
 };
 
+// Forwards ref
 const StateInput: FC<StateInputProps> = ({
   className,
   countries = defaultProps.countries,

src/components/Alert/Alert.tsx

@@ -21,6 +21,7 @@ type Props = {
  * Extension to Bootstrap [Alert](https://getbootstrap.com/docs/4.3/components/alert/)
  * adding icon support and onToggle callback when dismissed.
  */
+// passes in ref potentially
 const Alert: FC<Props> = ({
   color = 'warning',
   children,

src/components/BlockPanel/BlockPanel.tsx

@@ -59,6 +59,7 @@ const defaultProps = {
 /**
  * BlockPanel is an extension to Bootstrap Card, which allows for expand/collapse and standardized header.
  */
+// Ref stuff
 const BlockPanel: FC<BlockPanelProps> = ({
   children,
   className = defaultProps.className,

src/components/Button/Close.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 
+// Pass in ref here
 const Close: FC<React.ComponentPropsWithoutRef<'button'>> = ({ className = '', ...props }) => (
   <button type="button" className={`btn-close ${className}`} aria-label="Close" {...props} />
 );

src/components/Button/ConfirmationButton.tsx

@@ -9,6 +9,7 @@ export interface ConfirmationButtonProps extends ButtonProps {
 
 const defaultProps = { onClick: noop };
 
+// Pass in ref here
 const ConfirmationButton: FC<ConfirmationButtonProps> = ({
   children,
   confirmation,

src/components/Calendar/Calendar.tsx

@@ -27,6 +27,7 @@ const defaultProps = {
   weekDayFormat: 'dd',
 };
 
+// Pass in ref
 const Calendar: FC<CalendarProps> = ({
   date = defaultProps.date,
   dateFormat = defaultProps.dateFormat,

src/components/Calendar/components/Day.tsx

@@ -12,6 +12,7 @@ export interface DayProps
   onClick: MouseEventHandler<HTMLTableCellElement>;
 }
 
+// Pass in ref
 const Day: FC<DayProps> = ({ day, dateFormat, locale, onClick, ...props }) => {
   const disabled = !day.enabled;
   const classNames = classnames(

src/components/Callout/Callout.tsx

@@ -8,6 +8,7 @@ interface CalloutProps extends HTMLProps<HTMLDivElement> {
   placement: 'top' | 'bottom' | 'left' | 'right';
 }
 
+// forward ref maybe
 const Callout = ({ className, color, background, placement, children, ...props }: CalloutProps) => (
   <>
     <div className={`callout text-${color} m${placement[0]}-5 ${className}`} {...props}>

src/components/Carousel/ImageCarousel.js

@@ -8,6 +8,7 @@ import Icon from '../Icon/Icon';
 import Modal from '../Modal/Modal';
 import UncontrolledCarousel from './UncontrolledCarousel';
 
+// ref stuff
 export default class ImageCarousel extends React.Component {
   static propTypes = {
     items: PropTypes.array.isRequired,

src/components/Carousel/UncontrolledCarousel.js

@@ -18,6 +18,7 @@ const propTypes = {
   goToIndex: PropTypes.func,
 };
 
+// Forward ref
 class UncontrolledCarousel extends Component {
   constructor(props) {
     super(props);

src/components/Checkbox/CheckboxBooleanInput.tsx

@@ -23,6 +23,7 @@ function getID() {
   return `checkbox-boolean-input-${count++}`;
 }
 
+// Forwards ref
 class CheckboxBooleanInput extends React.Component<CheckboxBooleanInputProps> {
   static propTypes = {
     id: PropTypes.string,

src/components/Checkbox/CheckboxInput.tsx

@@ -4,6 +4,7 @@ import CheckboxListInput, { CheckboxListInputProps } from './CheckboxListInput';
 
 type CheckboxInputProps = CheckboxListInputProps | CheckboxBooleanInputProps;
 
+// Forward ref
 const CheckboxInput: FC<CheckboxInputProps> = (props) =>
   props.children ? (
     <CheckboxListInput {...(props as CheckboxListInputProps)} />

src/components/Checkbox/CheckboxListInput.tsx

@@ -8,6 +8,8 @@ export interface CheckboxListInputProps {
   value?: string[];
 }
 
+// Forward ref
+
 class CheckboxListInput extends React.Component<CheckboxListInputProps> {
   static propTypes = {
     children: PropTypes.node,

src/components/ClickableContainer/ClickableContainer.tsx

@@ -10,6 +10,7 @@ export interface ContainerProps extends HTMLAttributes<HTMLElement> {
 /**
  * Accessible generic container component that responds to click events
  * */
+// Maybe forward ref
 const ClickableContainer: FC<ContainerProps> = ({
   className,
   onClick,

src/components/Combobox/Combobox.tsx

@@ -25,6 +25,8 @@ type OptionGroup<T> = {
   options: Option<T>[];
 };
 
+// Forward ref
+
 interface ComboboxProps<T> extends Omit<InputProps, 'onChange'> {
   options: Option<T>[] | OptionGroup<T>[];
   direction?: Direction;

src/components/Datapair/Datapair.tsx

@@ -16,6 +16,7 @@ interface DatapairProps extends ComponentProps<typeof FormLabelGroup> {
  * of two parts: the key (label) and a value. The key is an identifier for some form of data and
  * the value can be text or links.
  */
+// Forward ref
 const Datapair: FC<DatapairProps> = ({ children, className, label, value, ...attributes }) => {
   const classNames = classnames('js-datapair', className);
   return (

src/components/Form/BoundForm.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Form from './Form';
 
+// ref and maybe get rid of comp
 class BoundForm extends React.Component {
   static propTypes = {
     errors: PropTypes.object,

src/components/Form/FormChoice.js

@@ -11,6 +11,7 @@ function getID() {
   return `form-choice-${count++}`;
 }
 
+// Ref
 class FormChoice extends React.Component {
   static propTypes = {
     inline: PropTypes.bool,

src/components/Form/FormGroup.tsx

@@ -2,6 +2,7 @@ import classnames from 'classnames';
 import React from 'react';
 import { FormGroup as RSFormGroup } from 'reactstrap';
 
+// ref
 const FormGroup = (props: any) => {
   let className = 'form-group';
   if (props.className) {

src/components/Form/FormRow.tsx

@@ -61,6 +61,7 @@ type FormRowProps<T extends TypeProp> = Omit<
 > &
   BaseFormRowProps & { type?: T };
 
+// ref
 function FormRow<T extends TypeProp>({
   children,
   feedback = '',

src/components/HasManyFields/HasManyFieldsAdd.js

@@ -4,6 +4,7 @@ import React from 'react';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';
 
+// ref
 const HasManyFieldsAdd = ({ children, className, ...props }) => {
   const classes = classNames('border-0', className);
 

src/components/HasManyFields/HasManyFieldsRow.tsx

@@ -15,6 +15,7 @@ function getID() {
   return `hmf-${(count += 1)}`; // eslint-disable-line no-return-assign
 }
 
+// ref
 interface HasManyFieldsRowProps {
   children: React.ReactNode;
   className?: string;

src/components/HelpBubble/HelpBubble.tsx

@@ -22,6 +22,7 @@ const style = {
   cursor: 'pointer',
 };
 
+// ref
 function HelpBubble(props: HelpBubbleProps) {
   const idRef = useRef<string | undefined>();
   if (!idRef.current) {

src/components/Icon/FontAwesomeAPM.tsx

@@ -53,6 +53,7 @@ export interface FontAwesomeAPMProps extends React.HTMLAttributes<any> {
  * @module FontAwesome
  * @type {ReactClass}
  */
+// ref
 export default class FontAwesomeAPM extends React.Component<FontAwesomeAPMProps> {
   render() {
     const {

src/components/Icon/Icon.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import FontAwesomeAPM, { FontAwesomeAPMProps } from './FontAwesomeAPM';
 
+// ref
 const Icon: FC<FontAwesomeAPMProps> = (props) => <FontAwesomeAPM {...props} />;
 
 Icon.displayName = 'Icon';

src/components/InfoBox/InfoBox.tsx

@@ -11,6 +11,7 @@ interface InfoBoxProps extends Omit<React.HTMLProps<HTMLDivElement>, 'className'
   vertical?: boolean;
 }
 
+// ref
 const InfoBox = ({
   children,
   className,

src/components/Input/CreditCardNumber.tsx

@@ -57,6 +57,7 @@ const defaultProps = {
   onChange: () => {},
 };
 
+// ref
 const CreditCardNumber: FC<CreditCardNumberProps> = ({
   types = defaultProps.types,
   onChange = defaultProps.onChange,

src/components/Input/CurrencyInput.tsx

@@ -80,6 +80,7 @@ const CurrencyInput: FC<Props> = ({
     (maskedProps as any).inputRef = innerRef;
   }
 
+  // ref
   return (
     <InputGroup size={size} className={className}>
       <InputGroupText>$</InputGroupText>

src/components/Input/DateInput.js

@@ -318,6 +318,7 @@ export default class DateInput extends React.Component {
 
     // <DropdownToggle tag="div" disabled> is to wrap the input in a container for positioning dropdown/up, without breaking showOnFocus
     // TODO extract a DropdownInput component that can encapsulate the defaultValue/value controlled/uncontrolled behavior.
+    // ref
     return (
       <div>
         <Dropdown direction={direction} isOpen={!disabled && open} toggle={this.toggle}>

src/components/Input/FileInput.tsx

@@ -13,6 +13,7 @@ const FileInput = (props: FileInputProps) => {
     onChange?.(files);
   };
 
+  // ref
   return <Input {...props} type="file" onChange={handleChange} />;
 };
 

src/components/Input/MaskedInput.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import MaskedInputBase, { MaskedInputProps } from 'react-text-mask';
 
+// ref
 const MaskedInput: FC<MaskedInputProps> = ({ guide = false, ...props }) => (
   <MaskedInputBase className="form-control" guide={guide} {...props} />
 );

src/components/Input/MonthInput.js

@@ -52,6 +52,7 @@ function parseValue(defaultValue, dateFormat, parseDate) {
   return date;
 }
 
+// ref
 export default class MonthInput extends React.Component {
   static propTypes = {
     centerYearSelection: PropTypes.bool,

src/components/Input/PatternInput.js

@@ -30,6 +30,7 @@ export default class PatternInput extends React.Component {
     }
   };
 
+  // ref
   render() {
     /* eslint-disable-next-line  @typescript-eslint/no-unused-vars -- This should go away when converting to function component  */
     const { pattern, restrictInput, ...inputProps } = this.props;

src/components/Input/StaticInput.tsx

@@ -6,6 +6,7 @@ export interface StaticInputProps extends InputProps {
   children?: React.ReactNode;
 }
 
+// ref
 /* eslint-disable-next-line @typescript-eslint/no-unused-vars -- Figure out a better way to omit children (will need a reusable solution) */
 const StaticInput: FC<StaticInputProps> = ({ children, ...props }) => (
   <Input {...props} type="text" plaintext />

src/components/Input/TimeInput.js

@@ -241,6 +241,7 @@ export default class TimeInput extends React.Component {
     } = this.props;
     /* eslint-enable @typescript-eslint/no-unused-vars */
 
+    // ref
     const times = this.times();
 
     return (

src/components/List/List.tsx

@@ -160,6 +160,7 @@ function List<T extends Item>({
 
   const showHeader = header || select === 'checkbox' || select === 'switch' || onFilter || onSort;
 
+  // ref
   return (
     <ListGroup flush={flush} tag="div" {...props}>
       {showHeader && (

src/components/List/ListGroup.tsx

@@ -6,6 +6,7 @@ type Props = {
   striped?: boolean;
 } & ListGroupProps;
 
+// ref
 const ListGroup: FC<Props> = ({ className, striped, ...props }) => (
   <ListGroupComponent
     className={classnames(className, { 'list-group-striped': striped })}

src/components/List/ListItem.tsx

@@ -46,6 +46,7 @@ function ListItem<T>({
 
   const unselectedColor = (expanded && expandedColor) || color;
 
+  // ref
   return (
     <ListGroupItem
       color={selected ? 'primary' : unselectedColor}

src/components/List/SortableList.tsx

@@ -41,6 +41,7 @@ function SortableList<T>({
     setAscending(sortBy?.ascending);
   };
 
+  // ref
   return (
     <List
       filter={filter}

src/components/List/components/FilterHeader.tsx

@@ -10,6 +10,7 @@ export interface FilterHeaderProps
   onChange?: (value: string) => void;
 }
 
+// ref
 const FilterHeader = ({ value, onChange, className, id, ...props }: FilterHeaderProps) => {
   const [filterId] = useState(() => uniqueId('filter-'));
   return (

src/components/Modal/Modal.js

@@ -1,5 +1,6 @@
 import { Modal } from 'reactstrap';
 
+// ref lookup
 Modal.defaultProps = {
   ...Modal.defaultProps,
   backdrop: false,

src/components/MultiSelectCombobox/MultiSelectCombobox.tsx

@@ -10,6 +10,7 @@ interface MultiSelectComboboxProps<T extends ComboboxOption>
   extends Partial<UncontrolledMultiSelectComboboxProps<T>>,
     Partial<ComboboxWrapperProps> {}
 
+// ref
 function MultiSelectCombobox<T extends ComboboxOption>({
   children,
   onChange,

src/components/Placeholder/Placeholder.tsx

@@ -12,6 +12,7 @@ interface PlaceholderProps extends Omit<HTMLProps<HTMLDivElement>, 'size'> {
   words?: number;
 }
 
+// ref
 const Placeholder = ({
   className,
   color,

src/components/Popover/Popover.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { Popover as PopoverInternal, PopoverProps } from 'reactstrap';
 
+// ref
 const Popover: FC<PopoverProps> = ({ fade = false, trigger = 'legacy', ...props }) => (
   <PopoverInternal fade={fade} trigger={trigger} {...props} />
 );

src/components/Popover/PopoverHeader.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { PopoverHeaderProps, PopoverHeader as InternalPopoverHeader } from 'reactstrap';
 
+// ref
 const PopoverHeader: FC<PopoverHeaderProps> = ({ tag = 'h4', ...props }) => (
   <InternalPopoverHeader tag={tag} {...props} />
 );