fix: avoid PropTypes.any and PropTypes.object where relevant along wi…

…th other eslint fixes (#1121)

* fix: avoid PropTypes.any and PropTypes.object where relevant along with other eslint fixes

* fix: card header title optional

src/Card/CardHeader.jsx

@@ -31,12 +31,11 @@ const CardHeader = React.forwardRef(({
         {title && <div className={`pgn__card-header-title-${size}`}>{title}</div>}
         {subtitle && <div className={`pgn__card-header-subtitle-${size}`}>{subtitle}</div>}
       </div>
-      {actions
-        && (
+      {actions && (
         <div className="pgn__card-header-actions">
           {size !== 'md' ? cloneActions(actions) : actions}
         </div>
-        )}
+      )}
     </div>
   );
 });
@@ -49,7 +48,7 @@ CardHeader.propTypes = {
   /** The class name for the CardHeader component */
   className: PropTypes.string,
   /** The title for the CardHeader component */
-  title: PropTypes.node.isRequired,
+  title: PropTypes.node,
   /** The size of the CardHeader component */
   size: PropTypes.oneOf(['sm', 'md']),
   /** The subtitle of the CardHeader component */
@@ -60,6 +59,7 @@ CardHeader.defaultProps = {
   actions: null,
   className: null,
   size: 'md',
+  title: null,
   subtitle: null,
 };
 

src/DataTable/CollapsibleButtonGroup.jsx

@@ -84,12 +84,12 @@ CollapsibleButtonGroup.defaultProps = {
 };
 
 CollapsibleButtonGroup.propTypes = {
-  /** class names for the div wrapping the button components */
+  /** Class names for the div wrapping the button components */
   className: PropTypes.string,
+  /** Array of action objects, containing a component and their callback args */
   actions: PropTypes.arrayOf(PropTypes.shape({
     component: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,
-    // eslint-disable-next-line react/forbid-prop-types
-    args: PropTypes.object,
+    args: PropTypes.shape({}),
   })).isRequired,
 };
 

src/DataTable/filters/CheckboxFilter.jsx

@@ -64,7 +64,7 @@ CheckboxFilter.propTypes = {
       number: PropTypes.number,
     })).isRequired,
     getHeaderProps: PropTypes.func.isRequired,
-    filterValue: PropTypes.arrayOf(PropTypes.any),
+    filterValue: PropTypes.string,
   }).isRequired,
 };
 

src/DataTable/filters/MultiSelectDropdownFilter.jsx

@@ -68,7 +68,7 @@ MultiSelectDropdownFilter.propTypes = {
     })).isRequired,
     /** Generates a key unique to the column being filtered */
     getHeaderProps: PropTypes.func.isRequired,
-    filterValue: PropTypes.arrayOf([PropTypes.number, PropTypes.string]),
+    filterValue: PropTypes.string,
   }).isRequired,
 };
 

src/Icon/index.jsx

@@ -73,7 +73,10 @@ Icon.propTypes = {
   /** An icon component to render. Example import of a Paragon icon component: `import { Check } from '@edx/paragon/dist/icon';` */
   src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /** HTML element attributes to pass through to the underlying svg element */
-  svgAttrs: PropTypes.object, // eslint-disable-line
+  svgAttrs: PropTypes.shape({
+    'aria-label': PropTypes.string,
+    'aria-labelledby': PropTypes.string,
+  }),
   // eslint-disable-next-line max-len
   /** the `id` property of the Icon element, by default this value is generated with the `newId` function with the `prefix` of `Icon`. */
   id: PropTypes.string,

src/InputSelect/index.jsx

@@ -71,7 +71,7 @@ Select.propTypes = {
   ]),
   options: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.string),
-    PropTypes.arrayOf(PropTypes.object),
+    PropTypes.arrayOf(PropTypes.shape({})),
   ]).isRequired,
 };
 

src/Modal/ModalDialogHeroBackground.jsx

@@ -25,7 +25,7 @@ ModalDialogHeroBackground.propTypes = {
   backgroundSrc: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
-  style: PropTypes.object, // eslint-disable-line
+  style: PropTypes.shape({}),
 };
 
 ModalDialogHeroBackground.defaultProps = {

src/Modal/PopperElement.jsx

@@ -21,8 +21,9 @@ const PopperElement = ({
 
 PopperElement.propTypes = {
   children: PropTypes.node,
-  // eslint-disable-next-line react/forbid-prop-types
-  target: PropTypes.object.isRequired,
+  target: PropTypes.shape({
+    current: PropTypes.node,
+  }).isRequired,
   strategy: PropTypes.oneOf(['absolute', 'fixed']),
   placement: PropTypes.oneOf([
     'auto',
@@ -41,7 +42,7 @@ PopperElement.propTypes = {
     'left-start',
     'left-end',
   ]),
-  modifiers: PropTypes.arrayOf(PropTypes.object),
+  modifiers: PropTypes.arrayOf(PropTypes.shape({})),
 };
 
 PopperElement.defaultProps = {

src/Modal/index.jsx

@@ -274,7 +274,7 @@ Modal.propTypes = {
   /** an array of either elements or shapes that take the form of the buttonPropTypes. See the [buttonPropTypes](https://github.com/edx/paragon/blob/master/src/Button/index.jsx#L40) for a list of acceptable props to pass as part of a button. */
   buttons: PropTypes.arrayOf(PropTypes.oneOfType([
     PropTypes.element,
-    PropTypes.object, // TODO: Only accept nodes in the future
+    PropTypes.shape({}), // TODO: Only accept nodes in the future
   ])),
   /** specifies the display text of the default Close button. It defaults to "Close". */
   closeText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),

src/Overlay/index.jsx

@@ -65,8 +65,7 @@ Overlay.propTypes = {
   /** The placement of the `Overlay` in relation to it's target. */
   placement: PropTypes.oneOf(PLACEMENT_VARIANTS),
   /** A set of popper options and props passed directly to `Popper`. */
-  // eslint-disable-next-line react/forbid-prop-types
-  popperConfig: PropTypes.object,
+  popperConfig: PropTypes.shape({}),
   /** Specify whether the overlay should trigger `onHide` when the user clicks outside the overlay. */
   rootClose: PropTypes.bool,
   /** Specify event for triggering a “root close” toggle. */
@@ -97,7 +96,7 @@ OverlayTrigger.propTypes = {
   /** The initial visibility state of the `Overlay`. */
   defaultShow: PropTypes.bool,
   /** A millisecond delay amount to show and hide the `Overlay` once triggered. */
-  delay: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  delay: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({})]),
   /** The initial flip state of the `Overlay`. */
   flip: PropTypes.bool,
   onHide: PropTypes.instanceOf(null),
@@ -112,8 +111,7 @@ OverlayTrigger.propTypes = {
   /** The placement of the `Overlay` in relation to it's target. */
   placement: PropTypes.oneOf(PLACEMENT_VARIANTS),
   /** A `Popper.js` config object passed to the the underlying popper instance. */
-  // eslint-disable-next-line react/forbid-prop-types
-  popperConfig: PropTypes.object,
+  popperConfig: PropTypes.shape({}),
   /**
    * The visibility of the `Overlay`. `show` is a controlled prop so should
    * be paired with `onToggle` to avoid breaking user interactions.

src/Popover/index.jsx

@@ -65,16 +65,15 @@ WrapperPopover.propTypes = {
       PropTypes.func,
       PropTypes.shape({ current: PropTypes.element }),
     ]),
-    style: PropTypes.object, // eslint-disable-line
+    style: PropTypes.shape({}),
   }),
   /**
    * When this prop is set, it creates a `Popover` with
    * a `Popover.Content` inside passing the children directly to it.
    */
   content: PropTypes.bool,
   /** A `Popper.js` config object passed to the the underlying popper instance. */
-  // eslint-disable-next-line react/forbid-prop-types
-  popper: PropTypes.any,
+  popper: PropTypes.shape({}),
   /** Whether the `Overlay` is shown. */
   show: PropTypes.bool,
   /** Specifies the content of the `Overlay` */

src/SearchField/SearchFieldClearButton.jsx

@@ -12,12 +12,14 @@ const SearchFieldClearButton = (props) => {
   }
 
   const handleClick = () => {
-    refs.input.current?.focus();
+    if (refs.input.current) {
+      refs.input.current.focus();
+    }
   };
 
   return (
     // eslint-disable-next-line react/button-has-type
-    <button type="reset" className="btn" {...props} disabled={disabled} onClick={handleClick}>
+    <button type="reset" className="btn" disabled={disabled} onClick={handleClick} {...props}>
       {icons.clear}
       <span className="sr-only">{screenReaderText.clearButton}</span>
     </button>

src/Table/index.jsx

@@ -172,7 +172,7 @@ Table.propTypes = {
 6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.
 
 The order of objects in `columns` specifies the order of the columns in the table. */
-  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
 
 1. `label` (string or element; required) contains the display string for each column's heading.

src/Tooltip/index.jsx

@@ -55,12 +55,12 @@ Tooltip.propTypes = {
       PropTypes.func,
       PropTypes.shape({ current: PropTypes.element }),
     ]),
-    style: PropTypes.object, // eslint-disable-line
+    style: PropTypes.shape({}),
   }),
   /** Whether the `Overlay` is shown. */
   show: PropTypes.bool,
   /** A `Popper.js` config object passed to the the underlying popper instance. */
-  popper: PropTypes.any, // eslint-disable-line
+  popper: PropTypes.shape({}),
   /** Overrides underlying component base CSS class name */
   bsPrefix: PropTypes.string,
   /** Specifies the content of the `Tooltip` */

src/TransitionReplace/index.jsx

@@ -160,13 +160,11 @@ TransitionReplace.propTypes = {
    */
   onChildExited: PropTypes.func,
   /** An object that specifies transition styles. */
-  /* eslint-disable react/forbid-prop-types */
   transitionStyles: PropTypes.shape({
-    entering: PropTypes.object,
-    entered: PropTypes.object,
-    exiting: PropTypes.object,
-    exited: PropTypes.object,
-    /* eslint-enable react/forbid-prop-types */
+    entering: PropTypes.shape({}),
+    entered: PropTypes.shape({}),
+    exiting: PropTypes.shape({}),
+    exited: PropTypes.shape({}),
   }),
   /** Specifies class name to append to the `Transition`. */
   transitionClassNames: PropTypes.string,

www/src/components/PropType.jsx

@@ -103,7 +103,7 @@ const PropTypeArrayOf = ({ value, isRequired }) => (
 
 PropTypeArrayOf.propTypes = {
   isRequired: PropTypes.bool,
-  value: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  value: PropTypes.shape({}).isRequired,
 };
 
 PropTypeArrayOf.defaultProps = {
@@ -123,7 +123,7 @@ const PropTypeObjectOf = ({ value, isRequired }) => (
 
 PropTypeObjectOf.propTypes = {
   isRequired: PropTypes.bool,
-  value: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  value: PropTypes.shape({}).isRequired,
 };
 
 PropTypeObjectOf.defaultProps = {
@@ -147,7 +147,7 @@ const PropTypeShape = ({ name, value, isRequired }) => (
 PropTypeShape.propTypes = {
   isRequired: PropTypes.bool,
   name: PropTypes.string.isRequired,
-  value: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  value: PropTypes.shape({}).isRequired,
 };
 
 PropTypeShape.defaultProps = {
@@ -171,7 +171,7 @@ const PropTypeExact = ({ name, value, isRequired }) => (
 PropTypeExact.propTypes = {
   isRequired: PropTypes.bool,
   name: PropTypes.string.isRequired,
-  value: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  value: PropTypes.shape({}).isRequired,
 };
 
 PropTypeExact.defaultProps = {

www/src/components/PropsTable.jsx

@@ -50,11 +50,11 @@ const Prop = ({
 
 Prop.propTypes = {
   name: PropTypes.string.isRequired,
-  type: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  type: PropTypes.shape({}).isRequired,
   required: PropTypes.bool,
-  defaultValue: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  defaultValue: PropTypes.shape({}), // eslint-disable-line react/forbid-prop-types
   description: PropTypes.shape({
-    childMdx: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    childMdx: PropTypes.shape({}), // eslint-disable-line react/forbid-prop-types
   }),
 };
 Prop.defaultProps = {
@@ -76,7 +76,7 @@ const PropsTable = ({ props: componentProps, displayName, content }) => (
 );
 
 PropsTable.propTypes = {
-  props: PropTypes.arrayOf(PropTypes.object),
+  props: PropTypes.arrayOf(PropTypes.shape({})),
   content: PropTypes.string,
   displayName: PropTypes.string,
 };

www/src/components/SEO.jsx

@@ -84,7 +84,7 @@ SEO.defaultProps = {
 SEO.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
+  meta: PropTypes.arrayOf(PropTypes.shape({})),
   title: PropTypes.string.isRequired,
 };
 

www/src/templates/component-page-template.jsx

@@ -80,7 +80,7 @@ PageTemplate.propTypes = {
       body: PropTypes.any, // eslint-disable-line react/forbid-prop-types
     }),
     components: PropTypes.shape({
-      nodes: PropTypes.arrayOf(PropTypes.object),
+      nodes: PropTypes.arrayOf(PropTypes.shape({})),
     }),
   }).isRequired,
   pageContext: PropTypes.shape({