fix: proptypes & invariants

src/components/Accordion/index.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Card from '../Card';
 import Panel from '../Panel';
+import { invariant } from '../../lib/utils';
 
 const Accordion = ({ dts, children, maxExpand, defaultActivePanelIds, onPanelClick }) => {
   const [activePanelIds, setActivePanelIds] = React.useState(() => {
@@ -42,8 +43,10 @@ const Accordion = ({ dts, children, maxExpand, defaultActivePanelIds, onPanelCli
     });
   };
 
-  if ((_.isNumber(maxExpand) && maxExpand <= 0) || (_.isString(maxExpand) && maxExpand !== 'max'))
-    throw new Error("maxExpand must be a positive number or 'max'");
+  invariant(
+    (_.isNumber(maxExpand) && maxExpand > 0) || (_.isString(maxExpand) && maxExpand === 'max'),
+    "maxExpand must be a positive number or 'max'"
+  );
 
   return (
     <Card.Container dts={dts}>

src/components/Breadcrumb/index.jsx

@@ -41,17 +41,14 @@ Breadcrumb.propTypes = {
       label: PropTypes.string.isRequired,
     })
   ),
-  onClick: PropTypes.func,
+  onClick: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
 };
 
 Breadcrumb.defaultProps = {
   rootNode: { id: 'all', label: 'All' },
   divider: '>',
   nodes: [],
-  onClick: (newActiveId) => {
-    throw new Error(`Breadcrumb needs an onClick handler to take ${newActiveId}`);
-  },
   disabled: false,
 };
 

src/components/Button/index.jsx

@@ -51,7 +51,7 @@ const Button = (props) => {
 
   invariant(
     !(isLink && (color !== 'default' || size === 'large')),
-    `Button: buttons with the "link" variant do not inherit size and color properties.${isLink} ${color} ${size}`
+    `Button: buttons with the "link" variant do not inherit size and color properties.`
   );
 
   const baseClass = 'aui--button';

src/components/ConfirmModal/index.jsx

@@ -60,7 +60,7 @@ ConfirmModal.propTypes = {
   /**
    * function called when modalApply event is fired
    */
-  modalApply: PropTypes.func,
+  modalApply: PropTypes.func.isRequired,
   /**
    * function called when modalClose event is fired
    */
@@ -82,9 +82,6 @@ ConfirmModal.propTypes = {
 ConfirmModal.defaultProps = {
   buttonCancelLabel: 'Cancel',
   buttonConfirmLabel: 'Confirm',
-  modalApply: () => {
-    throw new Error('AdslotUi ConfirmModal needs a modalApply handler');
-  },
   modalTitle: '',
   modalDescription: 'Are you sure?',
   show: false,

src/components/FilePicker/index.jsx

@@ -30,7 +30,7 @@ class FilePicker extends React.PureComponent {
   };
 
   removeFile = () => {
-    this.fileInput.current.value = null;
+    this.fileInput.current.value = '';
     this.setState({ isFileSelected: false, fileName: '' });
     if (this.props.onRemove) {
       this.props.onRemove();

src/components/ListPicker/index.jsx

@@ -188,10 +188,10 @@ ListPicker.propTypes = {
   labelFormatter: PropTypes.func,
   addonFormatter: PropTypes.func,
   linkButtons: linkButtonsProps,
-  modalApply: PropTypes.func,
+  modalApply: PropTypes.func.isRequired,
   modalDescription: PropTypes.string,
   modalClassName: PropTypes.string,
-  modalClose: PropTypes.func,
+  modalClose: PropTypes.func.isRequired,
   modalFootnote: PropTypes.string,
   modalTitle: PropTypes.string,
   show: PropTypes.bool,
@@ -204,13 +204,7 @@ ListPicker.defaultProps = {
   items: [],
   itemType: 'item',
   linkButtons: [],
-  modalApply: () => {
-    throw new Error('AdslotUi ListPicker needs a modalApply handler');
-  },
   modalClassName: 'listpicker-component',
-  modalClose: () => {
-    throw new Error('AdslotUi ListPicker needs a modalClose handler');
-  },
   modalTitle: 'Select Items',
   show: false,
 };

src/components/ListPickerPure/index.jsx

@@ -114,7 +114,7 @@ const itemProps = PropTypes.shape({
 
 ListPickerPure.propTypes = {
   allowMultiSelection: PropTypes.bool,
-  deselectItem: PropTypes.func,
+  deselectItem: PropTypes.func.isRequired,
   emptyMessage: PropTypes.string,
   emptySvgSymbol: PropTypes.node,
   labelFormatter: PropTypes.func,
@@ -126,22 +126,16 @@ ListPickerPure.propTypes = {
   }),
   items: PropTypes.arrayOf(itemProps),
   itemType: PropTypes.string,
-  selectItem: PropTypes.func,
+  selectItem: PropTypes.func.isRequired,
   selectedItems: PropTypes.arrayOf(itemProps),
 };
 
 ListPickerPure.defaultProps = {
   allowMultiSelection: true,
-  deselectItem: () => {
-    throw new Error('AdslotUi ListPickerPure needs a deselectItem handler');
-  },
   emptyMessage: 'No items to select.',
   labelFormatter: (item) => item.label,
   items: [],
   itemType: 'item',
-  selectItem: () => {
-    throw new Error('AdslotUi ListPickerPure needs a selectItem handler');
-  },
   selectedItems: [],
 };
 

src/components/Popover/WithRef.jsx

@@ -7,7 +7,7 @@ import Popper from './Popper';
 import { themes, popoverPlacements, popoverStrategies } from './constants';
 import './styles.css';
 
-const WithRefM = ({
+const WithRef = ({
   theme,
   title,
   dts,
@@ -48,8 +48,6 @@ const WithRefM = ({
   );
 };
 
-const WithRef = React.memo(WithRefM);
-
 WithRef.propTypes = {
   refElement: PropTypes.instanceOf(HTMLElement),
   title: PropTypes.string,

src/components/Popover/index.jsx

@@ -17,11 +17,11 @@ const Popover = (props) => {
     setIsPopoverOpen(isOpen);
   }, [setIsPopoverOpen, isOpen]);
 
-  const closePopover = React.useCallback(() => setIsPopoverOpen(false), [setIsPopoverOpen]);
+  const closePopover = () => setIsPopoverOpen(false);
 
-  const openPopover = React.useCallback(() => setIsPopoverOpen(true), [setIsPopoverOpen]);
+  const openPopover = () => setIsPopoverOpen(true);
 
-  const togglePopover = React.useCallback(() => setIsPopoverOpen(!isPopoverOpen), [setIsPopoverOpen, isPopoverOpen]);
+  const togglePopover = () => setIsPopoverOpen(!isPopoverOpen);
 
   const onClick = () => togglePopover();
 
@@ -50,7 +50,7 @@ const Popover = (props) => {
           : {
               ...(triggers.includes('click') ? { onClick } : {}),
               ...(triggers.includes('hover') ? { onMouseOver, onMouseOut } : {}),
-              ...(triggers.includes('focus') ? { onFocus, onBlur } : {}),
+              ...(triggers.includes('focus') ? { onFocus, onBlur, tabIndex: -1 } : {}),
             })}
       >
         {children}

src/components/RichTextEditor/index.jsx

@@ -14,6 +14,7 @@ import FileUploadAction from './FileUploadAction';
 import MentionEntry from './MentionEntry';
 import FilePreviewList from './FilePreviewList';
 import Popover from '../Popover';
+import { invariant } from '../../lib/utils';
 import './styles.css';
 
 const { EditorState, Modifier, convertToRaw, RichUtils } = draftJs;
@@ -31,10 +32,11 @@ const RichTextEditor = ({
 }) => {
   const editor = React.createRef(null);
   const focusEditor = () => editor.current.focus();
-  if (value && !onChange)
-    console.warn(
-      'Failed prop type: You have provided a `value` prop to RichTextEditor component without an `onChange` handler. This will render a read-only field.'
-    );
+
+  invariant(
+    !(value && !onChange),
+    'Failed prop type: You have provided a `value` prop to RichTextEditor component without an `onChange` handler. This will render a read-only field.'
+  );
 
   const classNames = cc('aui--editor-root', className);
 

src/components/Tile/index.jsx

@@ -4,8 +4,9 @@ import PropTypes from 'prop-types';
 import { expandDts } from '../../lib/utils';
 import './styles.css';
 
+const baseClass = 'aui--tile';
+
 const Tile = ({ className, title, imgLink, onClick, dts }) => {
-  const baseClass = 'aui--tile';
   const tileClassNames = classNames(baseClass, className);
 
   return (

src/components/TreePicker/Node/index.jsx

@@ -9,6 +9,7 @@ import TextEllipsis from '../../TextEllipsis';
 import TreePickerNodeExpander from './Expander';
 import Popover from '../../Popover';
 import { TreePickerPropTypesNode } from '../../../prop-types/TreePickerPropTypes';
+import { invariant } from '../../../lib/utils';
 import './styles.css';
 
 const baseClass = 'treepickernode-component';
@@ -27,9 +28,10 @@ class TreePickerNode extends React.PureComponent {
   };
 
   componentDidMount() {
-    if (_.isUndefined(this.props.node.path) && _.isUndefined(this.props.node.ancestors)) {
-      throw new Error(`AdslotUi TreePickerNode needs property 'path' or property 'ancestors' for ${this.props.node}`);
-    }
+    invariant(
+      !(_.isUndefined(this.props.node.path) && _.isUndefined(this.props.node.ancestors)),
+      `TreePickerNode needs property 'path' or property 'ancestors' for ${this.props.node.id}`
+    );
   }
 
   setLoadingAndExpandNode = () => {
@@ -155,10 +157,10 @@ TreePickerNode.propTypes = {
 TreePickerNode.defaultProps = {
   disabled: false,
   includeNode: (node) => {
-    throw new Error(`AdslotUi TreePickerNode needs an includeNode handler for ${node}`);
+    console.error(`AdslotUi TreePickerNode needs an includeNode handler for ${node.id}`);
   },
   removeNode: (node) => {
-    throw new Error(`AdslotUi TreePickerNode needs a removeNode handler for ${node}`);
+    console.error(`AdslotUi TreePickerNode needs a removeNode handler for ${node.id}`);
   },
   selected: false,
   valueFormatter: (value) => value,

src/components/UserListPicker/index.jsx

@@ -68,9 +68,9 @@ UserListPicker.propTypes = {
    *  Array of { avatar: PropTypes.string, givenName: PropTypes.string, surname: PropTypes.string, id: PropTypes.number }
    */
   initialSelection: PropTypes.arrayOf(userType),
-  modalApply: PropTypes.func,
+  modalApply: PropTypes.func.isRequired,
   modalDescription: PropTypes.string,
-  modalClose: PropTypes.func,
+  modalClose: PropTypes.func.isRequired,
   modalTitle: PropTypes.string,
   show: PropTypes.bool,
   /**
@@ -91,14 +91,6 @@ UserListPicker.defaultProps = {
   avatarColor: _.noop,
   emptyMessage: 'No users.',
   initialSelection: [],
-  modalApply: () => {
-    throw new Error('AdslotUi UserListPicker needs a modalApply handler');
-  },
-
-  modalClose: () => {
-    throw new Error('AdslotUi UserListPicker needs a modalClose handler');
-  },
-
   modalDescription: 'Select users.',
   modalTitle: 'Select Users',
   show: false,