From fb3f196c440f6fee358ad3cdb873be5a455a699c Mon Sep 17 00:00:00 2001
From: David <david.acevedo@appfolio.com>
Date: Mon, 14 Nov 2022 10:43:16 -0800
Subject: [PATCH 1/2] chore: potential forward ref components

---
 src/components/Activity/Activity.tsx                       | 1 +
 src/components/Activity/ActivityLog.tsx                    | 1 +
 src/components/Address/CountryInput.tsx                    | 1 +
 src/components/Address/StateInput.tsx                      | 1 +
 src/components/Alert/Alert.tsx                             | 1 +
 src/components/BlockPanel/BlockPanel.tsx                   | 1 +
 src/components/Button/Close.tsx                            | 1 +
 src/components/Button/ConfirmationButton.tsx               | 1 +
 src/components/Calendar/Calendar.tsx                       | 1 +
 src/components/Calendar/components/Day.tsx                 | 1 +
 src/components/Callout/Callout.tsx                         | 1 +
 src/components/Carousel/ImageCarousel.js                   | 1 +
 src/components/Carousel/UncontrolledCarousel.js            | 1 +
 src/components/Checkbox/CheckboxBooleanInput.tsx           | 1 +
 src/components/Checkbox/CheckboxInput.tsx                  | 1 +
 src/components/Checkbox/CheckboxListInput.tsx              | 2 ++
 src/components/ClickableContainer/ClickableContainer.tsx   | 1 +
 src/components/Combobox/Combobox.tsx                       | 2 ++
 src/components/Datapair/Datapair.tsx                       | 1 +
 src/components/Form/BoundForm.js                           | 1 +
 src/components/Form/FormChoice.js                          | 1 +
 src/components/Form/FormGroup.tsx                          | 1 +
 src/components/Form/FormRow.tsx                            | 1 +
 src/components/HasManyFields/HasManyFieldsAdd.js           | 1 +
 src/components/HasManyFields/HasManyFieldsRow.tsx          | 1 +
 src/components/HelpBubble/HelpBubble.tsx                   | 1 +
 src/components/Icon/FontAwesomeAPM.tsx                     | 1 +
 src/components/Icon/Icon.tsx                               | 1 +
 src/components/InfoBox/InfoBox.tsx                         | 1 +
 src/components/Input/CreditCardNumber.tsx                  | 1 +
 src/components/Input/CurrencyInput.tsx                     | 1 +
 src/components/Input/DateInput.js                          | 1 +
 src/components/Input/FileInput.tsx                         | 1 +
 src/components/Input/MaskedInput.tsx                       | 1 +
 src/components/Input/MonthInput.js                         | 1 +
 src/components/Input/PatternInput.js                       | 1 +
 src/components/Input/StaticInput.tsx                       | 1 +
 src/components/Input/TimeInput.js                          | 1 +
 src/components/List/List.tsx                               | 1 +
 src/components/List/ListGroup.tsx                          | 1 +
 src/components/List/ListItem.tsx                           | 1 +
 src/components/List/SortableList.tsx                       | 1 +
 src/components/List/components/FilterHeader.tsx            | 1 +
 src/components/Modal/Modal.js                              | 1 +
 src/components/MultiSelectCombobox/MultiSelectCombobox.tsx | 1 +
 src/components/Placeholder/Placeholder.tsx                 | 1 +
 src/components/Popover/Popover.tsx                         | 1 +
 src/components/Popover/PopoverHeader.tsx                   | 1 +
 src/components/Radio/RadioInput.tsx                        | 1 +
 src/components/ScrollContainer/ScrollContainer.tsx         | 1 +
 src/components/Select/Select.js                            | 1 +
 src/components/Select/SelectMultiValue.js                  | 1 +
 src/components/Spinner/ApmSpinner.tsx                      | 1 +
 src/components/Spinner/Spinner.tsx                         | 1 +
 src/components/Status/Status.tsx                           | 1 +
 src/components/SummaryBox/SummaryBox.tsx                   | 1 +
 src/components/SummaryBox/SummaryBoxItem.tsx               | 1 +
 src/components/Table/SortableTable.js                      | 1 +
 src/components/Table/Table.tsx                             | 1 +
 src/components/Table/UncontrolledTable.js                  | 1 +
 src/components/Tooltip/Tooltip.tsx                         | 1 +
 src/components/Tooltip/TooltipButton.tsx                   | 1 +
 src/components/Tree/Tree.tsx                               | 1 +
 src/components/Tree/TreeItem.tsx                           | 1 +
 src/components/Waiting/Waiting.tsx                         | 1 +
 65 files changed, 67 insertions(+)

diff --git a/src/components/Activity/Activity.tsx b/src/components/Activity/Activity.tsx
index dce2bc5e9..8ff57711c 100644
--- a/src/components/Activity/Activity.tsx
+++ b/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,
diff --git a/src/components/Activity/ActivityLog.tsx b/src/components/Activity/ActivityLog.tsx
index ea8a0d0f1..1b1e597d2 100644
--- a/src/components/Activity/ActivityLog.tsx
+++ b/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>
 );
diff --git a/src/components/Address/CountryInput.tsx b/src/components/Address/CountryInput.tsx
index 51993851d..61295fe19 100644
--- a/src/components/Address/CountryInput.tsx
+++ b/src/components/Address/CountryInput.tsx
@@ -15,6 +15,7 @@ const defaultProps = {
   onChange: () => {},
 };
 
+// Forwards ref
 const CountryInput: FC<CountryInputProps> = ({
   onChange = defaultProps.onChange,
   ...otherProps
diff --git a/src/components/Address/StateInput.tsx b/src/components/Address/StateInput.tsx
index efedcbebc..908ce14b2 100644
--- a/src/components/Address/StateInput.tsx
+++ b/src/components/Address/StateInput.tsx
@@ -31,6 +31,7 @@ const defaultProps = {
   onChange: () => {},
 };
 
+// Forwards ref
 const StateInput: FC<StateInputProps> = ({
   className,
   countries = defaultProps.countries,
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index cd922fc0d..6c5282397 100644
--- a/src/components/Alert/Alert.tsx
+++ b/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,
diff --git a/src/components/BlockPanel/BlockPanel.tsx b/src/components/BlockPanel/BlockPanel.tsx
index 2da5e016e..ae14a6c9a 100644
--- a/src/components/BlockPanel/BlockPanel.tsx
+++ b/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,
diff --git a/src/components/Button/Close.tsx b/src/components/Button/Close.tsx
index e77942179..b6ecdad10 100644
--- a/src/components/Button/Close.tsx
+++ b/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} />
 );
diff --git a/src/components/Button/ConfirmationButton.tsx b/src/components/Button/ConfirmationButton.tsx
index 55675c804..180c882fa 100755
--- a/src/components/Button/ConfirmationButton.tsx
+++ b/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,
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index e63736f68..dc8d0c13c 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/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,
diff --git a/src/components/Calendar/components/Day.tsx b/src/components/Calendar/components/Day.tsx
index b013d0813..90f246b09 100644
--- a/src/components/Calendar/components/Day.tsx
+++ b/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(
diff --git a/src/components/Callout/Callout.tsx b/src/components/Callout/Callout.tsx
index 677ad1210..449ceb150 100644
--- a/src/components/Callout/Callout.tsx
+++ b/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}>
diff --git a/src/components/Carousel/ImageCarousel.js b/src/components/Carousel/ImageCarousel.js
index 9a973fd67..88c8e7cc1 100644
--- a/src/components/Carousel/ImageCarousel.js
+++ b/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,
diff --git a/src/components/Carousel/UncontrolledCarousel.js b/src/components/Carousel/UncontrolledCarousel.js
index e6e8713a0..e54d8aac2 100644
--- a/src/components/Carousel/UncontrolledCarousel.js
+++ b/src/components/Carousel/UncontrolledCarousel.js
@@ -18,6 +18,7 @@ const propTypes = {
   goToIndex: PropTypes.func,
 };
 
+// Forward ref
 class UncontrolledCarousel extends Component {
   constructor(props) {
     super(props);
diff --git a/src/components/Checkbox/CheckboxBooleanInput.tsx b/src/components/Checkbox/CheckboxBooleanInput.tsx
index 2bdf6bc6e..784e705f2 100644
--- a/src/components/Checkbox/CheckboxBooleanInput.tsx
+++ b/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,
diff --git a/src/components/Checkbox/CheckboxInput.tsx b/src/components/Checkbox/CheckboxInput.tsx
index 7e19a53c2..2ffee5a86 100644
--- a/src/components/Checkbox/CheckboxInput.tsx
+++ b/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)} />
diff --git a/src/components/Checkbox/CheckboxListInput.tsx b/src/components/Checkbox/CheckboxListInput.tsx
index 991a1dcc2..1c87fd60a 100644
--- a/src/components/Checkbox/CheckboxListInput.tsx
+++ b/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,
diff --git a/src/components/ClickableContainer/ClickableContainer.tsx b/src/components/ClickableContainer/ClickableContainer.tsx
index d574cce4d..9e21f5426 100644
--- a/src/components/ClickableContainer/ClickableContainer.tsx
+++ b/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,
diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
index 8f9f5fb97..be726c1ad 100644
--- a/src/components/Combobox/Combobox.tsx
+++ b/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;
diff --git a/src/components/Datapair/Datapair.tsx b/src/components/Datapair/Datapair.tsx
index ac44bb6fb..6fd41ddae 100644
--- a/src/components/Datapair/Datapair.tsx
+++ b/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 (
diff --git a/src/components/Form/BoundForm.js b/src/components/Form/BoundForm.js
index a12d52f0d..adbbfab59 100644
--- a/src/components/Form/BoundForm.js
+++ b/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,
diff --git a/src/components/Form/FormChoice.js b/src/components/Form/FormChoice.js
index 19db89b87..042e9594d 100644
--- a/src/components/Form/FormChoice.js
+++ b/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,
diff --git a/src/components/Form/FormGroup.tsx b/src/components/Form/FormGroup.tsx
index 7f72a5ac7..ccd60d069 100644
--- a/src/components/Form/FormGroup.tsx
+++ b/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) {
diff --git a/src/components/Form/FormRow.tsx b/src/components/Form/FormRow.tsx
index 9678def33..3e29e7a19 100644
--- a/src/components/Form/FormRow.tsx
+++ b/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 = '',
diff --git a/src/components/HasManyFields/HasManyFieldsAdd.js b/src/components/HasManyFields/HasManyFieldsAdd.js
index 275e134db..98aff4151 100644
--- a/src/components/HasManyFields/HasManyFieldsAdd.js
+++ b/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);
 
diff --git a/src/components/HasManyFields/HasManyFieldsRow.tsx b/src/components/HasManyFields/HasManyFieldsRow.tsx
index 06729526a..dd96b1a34 100644
--- a/src/components/HasManyFields/HasManyFieldsRow.tsx
+++ b/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;
diff --git a/src/components/HelpBubble/HelpBubble.tsx b/src/components/HelpBubble/HelpBubble.tsx
index 7f31cb599..073f35d33 100644
--- a/src/components/HelpBubble/HelpBubble.tsx
+++ b/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) {
diff --git a/src/components/Icon/FontAwesomeAPM.tsx b/src/components/Icon/FontAwesomeAPM.tsx
index 9d9d96234..2057614f3 100644
--- a/src/components/Icon/FontAwesomeAPM.tsx
+++ b/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 {
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index afbcdfef9..25df2e487 100644
--- a/src/components/Icon/Icon.tsx
+++ b/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';
diff --git a/src/components/InfoBox/InfoBox.tsx b/src/components/InfoBox/InfoBox.tsx
index b9244a56c..4c6c536fc 100644
--- a/src/components/InfoBox/InfoBox.tsx
+++ b/src/components/InfoBox/InfoBox.tsx
@@ -11,6 +11,7 @@ interface InfoBoxProps extends Omit<React.HTMLProps<HTMLDivElement>, 'className'
   vertical?: boolean;
 }
 
+// ref
 const InfoBox = ({
   children,
   className,
diff --git a/src/components/Input/CreditCardNumber.tsx b/src/components/Input/CreditCardNumber.tsx
index a08763ba2..45d376f13 100644
--- a/src/components/Input/CreditCardNumber.tsx
+++ b/src/components/Input/CreditCardNumber.tsx
@@ -57,6 +57,7 @@ const defaultProps = {
   onChange: () => {},
 };
 
+// ref
 const CreditCardNumber: FC<CreditCardNumberProps> = ({
   types = defaultProps.types,
   onChange = defaultProps.onChange,
diff --git a/src/components/Input/CurrencyInput.tsx b/src/components/Input/CurrencyInput.tsx
index d6893a8ec..3cce8f7a7 100644
--- a/src/components/Input/CurrencyInput.tsx
+++ b/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>
diff --git a/src/components/Input/DateInput.js b/src/components/Input/DateInput.js
index 1af1d2971..58ae69b83 100644
--- a/src/components/Input/DateInput.js
+++ b/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}>
diff --git a/src/components/Input/FileInput.tsx b/src/components/Input/FileInput.tsx
index 926465e11..36bb2ae8b 100644
--- a/src/components/Input/FileInput.tsx
+++ b/src/components/Input/FileInput.tsx
@@ -13,6 +13,7 @@ const FileInput = (props: FileInputProps) => {
     onChange?.(files);
   };
 
+  // ref
   return <Input {...props} type="file" onChange={handleChange} />;
 };
 
diff --git a/src/components/Input/MaskedInput.tsx b/src/components/Input/MaskedInput.tsx
index f760954ee..fabeb2cd2 100644
--- a/src/components/Input/MaskedInput.tsx
+++ b/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} />
 );
diff --git a/src/components/Input/MonthInput.js b/src/components/Input/MonthInput.js
index efd16cb87..d4d1b6328 100644
--- a/src/components/Input/MonthInput.js
+++ b/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,
diff --git a/src/components/Input/PatternInput.js b/src/components/Input/PatternInput.js
index d14ca867e..bbe6995e3 100644
--- a/src/components/Input/PatternInput.js
+++ b/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;
diff --git a/src/components/Input/StaticInput.tsx b/src/components/Input/StaticInput.tsx
index ec232d370..dd0adc99a 100644
--- a/src/components/Input/StaticInput.tsx
+++ b/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 />
diff --git a/src/components/Input/TimeInput.js b/src/components/Input/TimeInput.js
index c37311864..c66790fac 100644
--- a/src/components/Input/TimeInput.js
+++ b/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 (
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 1c68ad1c6..5494d6a4e 100644
--- a/src/components/List/List.tsx
+++ b/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 && (
diff --git a/src/components/List/ListGroup.tsx b/src/components/List/ListGroup.tsx
index d796d5cea..e006b073f 100644
--- a/src/components/List/ListGroup.tsx
+++ b/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 })}
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index 231f1bd2e..d131edb57 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -46,6 +46,7 @@ function ListItem<T>({
 
   const unselectedColor = (expanded && expandedColor) || color;
 
+  // ref
   return (
     <ListGroupItem
       color={selected ? 'primary' : unselectedColor}
diff --git a/src/components/List/SortableList.tsx b/src/components/List/SortableList.tsx
index 1474413a1..8f50ba5b3 100644
--- a/src/components/List/SortableList.tsx
+++ b/src/components/List/SortableList.tsx
@@ -41,6 +41,7 @@ function SortableList<T>({
     setAscending(sortBy?.ascending);
   };
 
+  // ref
   return (
     <List
       filter={filter}
diff --git a/src/components/List/components/FilterHeader.tsx b/src/components/List/components/FilterHeader.tsx
index 9e2c7ce59..d395adbd0 100644
--- a/src/components/List/components/FilterHeader.tsx
+++ b/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 (
diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js
index 3f30b423a..10edfa112 100644
--- a/src/components/Modal/Modal.js
+++ b/src/components/Modal/Modal.js
@@ -1,5 +1,6 @@
 import { Modal } from 'reactstrap';
 
+// ref lookup
 Modal.defaultProps = {
   ...Modal.defaultProps,
   backdrop: false,
diff --git a/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
index ab585ee04..7986aa4a8 100644
--- a/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
+++ b/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,
diff --git a/src/components/Placeholder/Placeholder.tsx b/src/components/Placeholder/Placeholder.tsx
index 6733fec46..aeee3de0d 100644
--- a/src/components/Placeholder/Placeholder.tsx
+++ b/src/components/Placeholder/Placeholder.tsx
@@ -12,6 +12,7 @@ interface PlaceholderProps extends Omit<HTMLProps<HTMLDivElement>, 'size'> {
   words?: number;
 }
 
+// ref
 const Placeholder = ({
   className,
   color,
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index 0949d2d5f..c3f8bdbb6 100644
--- a/src/components/Popover/Popover.tsx
+++ b/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} />
 );
diff --git a/src/components/Popover/PopoverHeader.tsx b/src/components/Popover/PopoverHeader.tsx
index 19fa7bf21..70ffafa9d 100644
--- a/src/components/Popover/PopoverHeader.tsx
+++ b/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} />
 );
diff --git a/src/components/Radio/RadioInput.tsx b/src/components/Radio/RadioInput.tsx
index 3ae15655a..6b282d57e 100644
--- a/src/components/Radio/RadioInput.tsx
+++ b/src/components/Radio/RadioInput.tsx
@@ -7,6 +7,7 @@ type RadioInputProps = {
   onChange?: (event: any) => void;
 };
 
+// ref
 /* eslint-disable-next-line  @typescript-eslint/no-unused-vars -- Let's figure out a better way to omit props for this scenario */
 const RadioInput: FC<RadioInputProps> = ({ type, children, value, ...props }) => (
   <div>
diff --git a/src/components/ScrollContainer/ScrollContainer.tsx b/src/components/ScrollContainer/ScrollContainer.tsx
index 32831d405..a3355c809 100644
--- a/src/components/ScrollContainer/ScrollContainer.tsx
+++ b/src/components/ScrollContainer/ScrollContainer.tsx
@@ -23,6 +23,7 @@ const defaultTheme = {
   overflowRight: 'overflow-right',
 };
 
+// ref
 const ScrollContainer = ({
   children,
   className,
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index 2fc751edf..6b7546279 100644
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -47,6 +47,7 @@ const Select = ({
   const classNames = classnames(className, { 'select-async': props.loadOptions });
   const valueComponentRenderer = valueComponent || (multi ? SelectMultiValue : undefined);
 
+  // ref
   return (
     <SelectElement
       arrowRenderer={({ isOpen }) => getSelectArrow(isOpen, arrowRenderer)}
diff --git a/src/components/Select/SelectMultiValue.js b/src/components/Select/SelectMultiValue.js
index b399a4009..cc82d39e5 100644
--- a/src/components/Select/SelectMultiValue.js
+++ b/src/components/Select/SelectMultiValue.js
@@ -42,6 +42,7 @@ export default class SelectMultiValue extends React.Component {
       className
     );
 
+    // ref
     return (
       <Badge
         className={classNames}
diff --git a/src/components/Spinner/ApmSpinner.tsx b/src/components/Spinner/ApmSpinner.tsx
index 685d541b5..bde01e681 100644
--- a/src/components/Spinner/ApmSpinner.tsx
+++ b/src/components/Spinner/ApmSpinner.tsx
@@ -11,6 +11,7 @@ type Props = {
   size?: string;
 };
 
+// ref
 const ApmSpinner: FC<Props> = ({ color, size, ...props }) => (
   <svg width={size} height={size} viewBox="-200 -200 200 200" version="1.1" {...props}>
     <defs>
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
index 73a8aba8d..5326e7833 100644
--- a/src/components/Spinner/Spinner.tsx
+++ b/src/components/Spinner/Spinner.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Spinner, SpinnerProps } from 'reactstrap';
 import ApmSpinner from './ApmSpinner';
 
+// ref
 const SpinnerWrapper = ({ type, ...props }: SpinnerProps) =>
   type === 'spin' ? <ApmSpinner {...props} /> : <Spinner type={type} {...props} />;
 
diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx
index d9ee0c2c3..36c65e4e0 100644
--- a/src/components/Status/Status.tsx
+++ b/src/components/Status/Status.tsx
@@ -32,6 +32,7 @@ const Status = ({ type = 'none', className, ...props }: StatusProps) => {
     default:
       throw new Error(`Unsupported value for 'type' prop passed to Status component: "${type}"`);
   }
+  // ref
   return (
     <Icon
       {...props}
diff --git a/src/components/SummaryBox/SummaryBox.tsx b/src/components/SummaryBox/SummaryBox.tsx
index e09b0e04a..990525f30 100644
--- a/src/components/SummaryBox/SummaryBox.tsx
+++ b/src/components/SummaryBox/SummaryBox.tsx
@@ -19,6 +19,7 @@ const defaultProps = {
   reverse: true,
 };
 
+// ref
 const SummaryBox: FC<SummaryBoxProps> = ({
   children,
   items,
diff --git a/src/components/SummaryBox/SummaryBoxItem.tsx b/src/components/SummaryBox/SummaryBoxItem.tsx
index 47f75d742..38ad49e18 100644
--- a/src/components/SummaryBox/SummaryBoxItem.tsx
+++ b/src/components/SummaryBox/SummaryBoxItem.tsx
@@ -17,6 +17,7 @@ const defaultProps = {
   value: '--',
 };
 
+// ref
 const SummaryBoxItem: FC<SummaryBoxItemProps> = ({
   className,
   label = defaultProps.label,
diff --git a/src/components/Table/SortableTable.js b/src/components/Table/SortableTable.js
index 98656579d..307cfca71 100644
--- a/src/components/Table/SortableTable.js
+++ b/src/components/Table/SortableTable.js
@@ -220,6 +220,7 @@ class SortableTable extends React.Component {
       });
     }
 
+    // ref
     return (
       <Table style={tableStyle} {...props}>
         {showColgroup && (
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index f7785509a..bce8e8e2d 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -12,6 +12,7 @@ export interface TableProps extends ReactStrapTableProps {
   children: React.ReactNode;
 }
 
+// ref
 const Table: FC<TableProps> = ({ children, ...props }) => (
   <TableComponent {...props}>{children}</TableComponent>
 );
diff --git a/src/components/Table/UncontrolledTable.js b/src/components/Table/UncontrolledTable.js
index f985afd11..8cc8a6b7c 100644
--- a/src/components/Table/UncontrolledTable.js
+++ b/src/components/Table/UncontrolledTable.js
@@ -246,6 +246,7 @@ export default class UncontrolledTable extends React.Component {
 
     const visibleRows = this.getVisibleRows();
 
+    // ref
     return (
       <div>
         <SortableTable
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index af946918a..674bafc39 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -5,6 +5,7 @@ export interface TooltipProps extends Omit<InnerTooltipProps, 'toggle'> {}
 
 const defaultProps = { isOpen: false, fade: false };
 
+// ref
 const Tooltip: FC<TooltipProps> = ({
   isOpen = defaultProps.isOpen,
   fade = defaultProps.fade,
diff --git a/src/components/Tooltip/TooltipButton.tsx b/src/components/Tooltip/TooltipButton.tsx
index a3c30937b..7fd9d5735 100644
--- a/src/components/Tooltip/TooltipButton.tsx
+++ b/src/components/Tooltip/TooltipButton.tsx
@@ -14,6 +14,7 @@ interface TooltipButtonProps extends ButtonProps {
 let count = 0;
 const getID = () => `tooltip-button-${count++}`;
 
+// ref
 const TooltipButton: FC<TooltipButtonProps> = ({
   tooltip,
   disabled = false,
diff --git a/src/components/Tree/Tree.tsx b/src/components/Tree/Tree.tsx
index 7c41abc34..3f6a61b46 100644
--- a/src/components/Tree/Tree.tsx
+++ b/src/components/Tree/Tree.tsx
@@ -13,6 +13,7 @@ export interface TreeProps<T> {
   onChange: (options: Option<T>[]) => void;
 }
 
+// ref
 function Tree<T>({
   flush = true,
   indent = 0,
diff --git a/src/components/Tree/TreeItem.tsx b/src/components/Tree/TreeItem.tsx
index da675a120..cba9ab0cc 100644
--- a/src/components/Tree/TreeItem.tsx
+++ b/src/components/Tree/TreeItem.tsx
@@ -28,6 +28,7 @@ function updateSelection(selected: boolean, children?: Option<any>[]): Option<an
 let count = 0;
 const getID = () => `tree-item-${count++}`;
 
+// ref
 function TreeItem<T>({
   className,
   indent = 0,
diff --git a/src/components/Waiting/Waiting.tsx b/src/components/Waiting/Waiting.tsx
index 3e37ff986..6d6cb4606 100644
--- a/src/components/Waiting/Waiting.tsx
+++ b/src/components/Waiting/Waiting.tsx
@@ -16,6 +16,7 @@ interface WaitingProps extends Omit<ModalProps, 'toggle'> {
 /**
  * A 'Waiting' indicator for unknown durations. See https://qa.qa.appfolio.com/gears/waiting
  */
+// ref
 const Waiting: FC<WaitingProps> = ({ children, className, title = 'Please Wait', ...props }) => (
   <Modal
     {...props}

From e1141fb31e6134e89a3337886429ebc348e5f83f Mon Sep 17 00:00:00 2001
From: David <davidacevedo@users.noreply.github.com>
Date: Fri, 3 Feb 2023 16:46:02 -0800
Subject: [PATCH 2/2] chore: update to latest reactstrap prerelease

---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 5f7eecb23..f35cb9452 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 64bad7c95..533c9b1e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -147,7 +147,7 @@ __metadata:
     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
     regenerator-runtime: ^0.13.7
     sinon: ^9.2.1
     styled-jsx: ^3.3.2
@@ -15006,9 +15006,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reactstrap@npm:^9.1.5":
-  version: 9.1.5
-  resolution: "reactstrap@npm:9.1.5"
+"reactstrap@npm:9.1.6-v10-f1a1f7e.0":
+  version: 9.1.6-v10-f1a1f7e.0
+  resolution: "reactstrap@npm:9.1.6-v10-f1a1f7e.0"
   dependencies:
     "@babel/runtime": ^7.12.5
     "@popperjs/core": ^2.6.0
@@ -15019,7 +15019,7 @@ __metadata:
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 0bb505211388cadd585aef46eaefdae622ba7e00667eae79ac62c879f2c2388d64c682f49da1d359b7981e9331a1881bee3818d8a141c1168373cb1480b171f2
+  checksum: 998984e29f222b67866a36e06fbf791f34e3fc4d4bd41e6cad9a12beda1bcd73ec1eb642f749f1d9381f2a5c404eed2a6f820b70c08a894335b43794b76f0cbc
   languageName: node
   linkType: hard