From b1a70852c2d8a2e8f945b0c16d05a1a8a0ba7557 Mon Sep 17 00:00:00 2001
From: Orr Gottlieb <orr@monday.com>
Date: Mon, 28 Dec 2020 10:05:31 +0200
Subject: [PATCH] fix: lint

---
 src/components/Button/Button.jsx              |  8 ++--
 src/components/Counter/Counter.jsx            |  8 +++-
 src/components/Dialog/Dialog.jsx              |  3 +-
 src/components/Divider/Divider.jsx            |  4 +-
 src/components/Divider/DividerConstants.js    |  2 +-
 src/components/Dropdown/Dropdown.jsx          | 43 +++++++++----------
 src/components/Dropdown/Dropdown.styles.js    |  1 +
 .../ClearIndicator/ClearIndicator.jsx         | 24 ++++++-----
 .../DropdownIndicator/DropdownIndicator.jsx   | 27 ++++++------
 .../Dropdown/components/Menu/Menu.jsx         | 24 ++++++-----
 .../Dropdown/components/Option/Option.jsx     |  6 ++-
 .../components/SingleValue/SingleValue.jsx    |  7 +--
 .../FormattedNumber/FormattedNumber.jsx       |  5 ++-
 src/components/Menu/Menu/Menu.jsx             | 11 +++--
 src/components/Menu/Menu/MenuConstants.js     |  8 ++--
 src/components/Menu/MenuItem/MenuItem.jsx     | 16 +++----
 src/components/Menu/MenuTitle/MenuTitle.jsx   |  8 ++--
 .../Menu/MenuTitle/MenuTitleConstants.js      |  2 +-
 src/hooks/useDebounceEvent.js                 |  1 -
 src/hooks/useSetFocus.js                      | 10 ++---
 20 files changed, 119 insertions(+), 99 deletions(-)

diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
index 0fa8ba9676..2d251f4875 100644
--- a/src/components/Button/Button.jsx
+++ b/src/components/Button/Button.jsx
@@ -186,7 +186,6 @@ const Button = forwardRef(
       };
     }, [
       disabled,
-      buttonRef,
       classNames,
       name,
       onMouseUp,
@@ -199,7 +198,8 @@ const Button = forwardRef(
       loading,
       onFocus,
       onBlur,
-      mergedRef
+      mergedRef,
+      ariaLabeledBy
     ]);
 
     if (loading) {
@@ -297,9 +297,9 @@ Button.propTypes = {
   ]),
   /** Disabled property which causes the button to be disabled */
   disabled: PropTypes.bool,
-  /** Icon to place on the right*/
+  /** Icon to place on the right */
   rightIcon: PropTypes.string,
-  /** Icon to place on the left*/
+  /** Icon to place on the left */
   leftIcon: PropTypes.string,
   /** the success props are used when you have async action and wants to display a success message */
   success: PropTypes.bool,
diff --git a/src/components/Counter/Counter.jsx b/src/components/Counter/Counter.jsx
index 7daa1f95a7..72e2e7991e 100644
--- a/src/components/Counter/Counter.jsx
+++ b/src/components/Counter/Counter.jsx
@@ -91,7 +91,11 @@ const Counter = ({
     count?.toString().length > maxDigits ? `${10 ** maxDigits - 1}+` : count;
 
   return (
-    <span className={wrapperClassName} aria-label={`${ariaLabel} ${countText}`}>
+    <span
+      className={wrapperClassName}
+      aria-label={`${ariaLabel} ${countText}`}
+      aria-labelledby={ariaLabeledBy}
+    >
       <div className={classNames} aria-label={countText} ref={ref}>
         <SwitchTransition mode="out-in">
           <CSSTransition
@@ -129,7 +133,7 @@ Counter.propTypes = {
     Counter.colors.NEGATIVE
   ]),
   kind: PropTypes.oneOf([Counter.kinds.FILL, Counter.kinds.LINE]),
-  /** maximum number of digits to display (see relevant story)*/
+  /** maximum number of digits to display (see relevant story) */
   maxDigits: PropTypes.number
 };
 Counter.defaultProps = {
diff --git a/src/components/Dialog/Dialog.jsx b/src/components/Dialog/Dialog.jsx
index e67a3ba74a..05b4570ced 100644
--- a/src/components/Dialog/Dialog.jsx
+++ b/src/components/Dialog/Dialog.jsx
@@ -43,7 +43,8 @@ export default class Dialog extends PureComponent {
   }
 
   closeDialogOnEscape(event) {
-    if(!this.state.isOpen) {
+    const { isOpen } = this.state;
+    if (!isOpen) {
       return;
     }
     if (event.key === "Escape") this.hideDialogIfNeeded();
diff --git a/src/components/Divider/Divider.jsx b/src/components/Divider/Divider.jsx
index 6206818188..c8830bb3ed 100644
--- a/src/components/Divider/Divider.jsx
+++ b/src/components/Divider/Divider.jsx
@@ -20,12 +20,12 @@ Divider.directions = DIRECTIONS;
 
 Divider.defaultProps = {
   classname: "",
-  direction: DIRECTIONS.HORIZONTAL,
+  direction: DIRECTIONS.HORIZONTAL
 };
 
 Divider.propTypes = {
   classname: PropTypes.string,
-  direction: PropTypes.oneOf([DIRECTIONS.HORIZONTAL, DIRECTIONS.VERTICAL]),
+  direction: PropTypes.oneOf([DIRECTIONS.HORIZONTAL, DIRECTIONS.VERTICAL])
 };
 
 export default Divider;
diff --git a/src/components/Divider/DividerConstants.js b/src/components/Divider/DividerConstants.js
index 0501e4cb42..d831e48e47 100644
--- a/src/components/Divider/DividerConstants.js
+++ b/src/components/Divider/DividerConstants.js
@@ -1,4 +1,4 @@
 export const DIRECTIONS = {
   VERTICAL: "vertical",
-  HORIZONTAL: "horizontal",
+  HORIZONTAL: "horizontal"
 };
diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
index f654340e6e..92632c616c 100644
--- a/src/components/Dropdown/Dropdown.jsx
+++ b/src/components/Dropdown/Dropdown.jsx
@@ -1,6 +1,8 @@
+/* eslint-disable react/jsx-props-no-spreading,react/require-default-props,react/forbid-prop-types */
 import React, { useCallback, useMemo, useState } from "react";
 import Select, { components } from "react-select";
 import AsyncSelect from "react-select/async";
+import NOOP from "lodash/noop";
 import { WindowedMenuList } from "react-windowed-select";
 import PropTypes from "prop-types";
 import cx from "classnames";
@@ -10,7 +12,6 @@ import OptionComponent from "./components/Option/Option";
 import SingleValueComponent from "./components/SingleValue/SingleValue";
 import ClearIndicatorComponent from "./components/ClearIndicator/ClearIndicator";
 import { SIZE } from "./DropdownConstants";
-import { NOOP } from "../../utils/function-utils";
 import styles, { customTheme } from "./Dropdown.styles";
 import "./Dropdown.scss";
 
@@ -37,12 +38,12 @@ const Dropdown = ({
   asyncOptions,
   cacheOptions,
   defaultOptions,
-  isVirtualized,
+  isVirtualized
 }) => {
   const [isOpen, setOpen] = useState(false);
 
   const handleMenuOpen = useCallback(
-    (data) => {
+    data => {
       onMenuOpen(data);
       setOpen(true);
     },
@@ -50,7 +51,7 @@ const Dropdown = ({
   );
 
   const handleMenuClose = useCallback(
-    (data) => {
+    data => {
       onMenuClose(data);
       setOpen(false);
     },
@@ -60,34 +61,32 @@ const Dropdown = ({
   const customStyles = useMemo(() => styles({ size, rtl }), [size, rtl]);
 
   const Menu = useCallback(
-    (props) => <MenuComponent {...props} isOpen={isOpen} />,
+    props => <MenuComponent {...props} isOpen={isOpen} />,
     [isOpen]
   );
 
   const DropdownIndicator = useCallback(
-    (props) => <DropdownIndicatorComponent {...props} size={size} />,
+    props => <DropdownIndicatorComponent {...props} size={size} />,
     [size]
   );
 
   const Option = useCallback(
-    (props) => <OptionComponent {...props} OptionRenderer={OptionRenderer} />,
+    props => <OptionComponent {...props} OptionRenderer={OptionRenderer} />,
     [OptionRenderer]
   );
 
   const Input = useCallback(
-    (props) => <components.Input {...props} aria-label="Dropdown input" />,
+    props => <components.Input {...props} aria-label="Dropdown input" />,
     []
   );
 
   const SingleValue = useCallback(
-    (props) => (
-      <SingleValueComponent {...props} ValueRenderer={ValueRenderer} />
-    ),
+    props => <SingleValueComponent {...props} ValueRenderer={ValueRenderer} />,
     [ValueRenderer]
   );
 
   const ClearIndicator = useCallback(
-    (props) => <ClearIndicatorComponent {...props} size={size} />,
+    props => <ClearIndicatorComponent {...props} size={size} />,
     [size]
   );
 
@@ -96,13 +95,13 @@ const Dropdown = ({
   const asyncAdditions = {
     ...(asyncOptions && {
       loadOptions: asyncOptions,
-      cacheOptions: cacheOptions,
-      ...(defaultOptions && { defaultOptions }),
-    }),
+      cacheOptions,
+      ...(defaultOptions && { defaultOptions })
+    })
   };
 
   const additions = {
-    ...(!asyncOptions && { options }),
+    ...(!asyncOptions && { options })
   };
 
   return (
@@ -115,7 +114,7 @@ const Dropdown = ({
         Input,
         ...(OptionRenderer && { Option }),
         ...(ValueRenderer && { SingleValue }),
-        ...(isVirtualized && { MenuList: WindowedMenuList }),
+        ...(isVirtualized && { MenuList: WindowedMenuList })
       }}
       size={size}
       noOptionsMessage={noOptionsMessage}
@@ -154,7 +153,7 @@ Dropdown.defaultProps = {
   options: [],
   noOptionsMessage: NOOP,
   clearable: true,
-  size: SIZE.MEDIUM,
+  size: SIZE.MEDIUM
 };
 
 Dropdown.propTypes = {
@@ -241,8 +240,8 @@ Dropdown.propTypes = {
     PropTypes.func, // callback
     PropTypes.shape({
       then: PropTypes.func.isRequired,
-      catch: PropTypes.func.isRequired,
-    }), // Promise
+      catch: PropTypes.func.isRequired
+    }) // Promise
   ]),
   /**
    * If set to true, fetched async options will be cached
@@ -253,12 +252,12 @@ Dropdown.propTypes = {
    */
   defaultOptions: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.arrayOf(PropTypes.object),
+    PropTypes.arrayOf(PropTypes.object)
   ]),
   /**
    * If set to true, the menu will use virtualization. Virtualized async works only with
    */
-  isVirtualized: PropTypes.bool,
+  isVirtualized: PropTypes.bool
 };
 
 export default Dropdown;
diff --git a/src/components/Dropdown/Dropdown.styles.js b/src/components/Dropdown/Dropdown.styles.js
index c7c808de3a..97368a916a 100644
--- a/src/components/Dropdown/Dropdown.styles.js
+++ b/src/components/Dropdown/Dropdown.styles.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import { SIZE } from "./DropdownConstants";
 import { getCSSVar } from "../../services/themes";
 
diff --git a/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx b/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx
index 37bc749f4a..cf0effa53d 100644
--- a/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx
+++ b/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx
@@ -1,18 +1,22 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import { components } from "react-select";
 import Icon from "../../../Icon/Icon";
 import CloseSmall from "../../../Icon/Icons/components/CloseSmall";
 import { getIndicatorSize } from "../../Dropdown.styles";
 
-const ClearIndicator = props => (
-  <components.ClearIndicator {...props} className={"clear-indicator"}>
-    <Icon
-      iconType={Icon.type.SVG}
-      icon={CloseSmall}
-      iconSize={getIndicatorSize(props.size)}
-      tabindex="-1"
-    />
-  </components.ClearIndicator>
-);
+const ClearIndicator = props => {
+  const { size } = props;
+  return (
+    <components.ClearIndicator {...props} className="clear-indicator">
+      <Icon
+        iconType={Icon.type.SVG}
+        icon={CloseSmall}
+        iconSize={getIndicatorSize(size)}
+        tabindex="-1"
+      />
+    </components.ClearIndicator>
+  );
+};
 
 export default ClearIndicator;
diff --git a/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx b/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx
index 3c50ea1b69..468340a045 100644
--- a/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx
+++ b/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx
@@ -1,19 +1,22 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import { components } from "react-select";
 import Icon from "../../../Icon/Icon";
 import DropdownChevronDown from "../../../Icon/Icons/components/DropdownChevronDown";
 import { getIndicatorSize } from "../../Dropdown.styles";
 
-const DropdownIndicator = props => (
-  <components.DropdownIndicator {...props} className={"dropdown-indicator"}>
-    <Icon
-      iconType={Icon.type.SVG}
-      icon={DropdownChevronDown}
-      iconSize={getIndicatorSize(props.size)}
-      tabindex="-1"
-      clickable={!props.isDisabled}
-    />
-  </components.DropdownIndicator>
-);
-
+const DropdownIndicator = props => {
+  const { isDisabled, size } = props;
+  return (
+    <components.DropdownIndicator {...props} className="dropdown-indicator">
+      <Icon
+        iconType={Icon.type.SVG}
+        icon={DropdownChevronDown}
+        iconSize={getIndicatorSize(size)}
+        tabindex="-1"
+        clickable={!isDisabled}
+      />
+    </components.DropdownIndicator>
+  );
+};
 export default DropdownIndicator;
diff --git a/src/components/Dropdown/components/Menu/Menu.jsx b/src/components/Dropdown/components/Menu/Menu.jsx
index ddc7837d80..5134a78d39 100644
--- a/src/components/Dropdown/components/Menu/Menu.jsx
+++ b/src/components/Dropdown/components/Menu/Menu.jsx
@@ -1,17 +1,21 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import cx from "classnames";
 import { components } from "react-select";
 import "./Menu.scss";
 
-const Menu = props => (
-  <components.Menu
-    {...props}
-    className={cx("menu", {
-      "dropdown-wrapper__menu--open": props.isOpen
-    })}
-  >
-    {props.children}
-  </components.Menu>
-);
+const Menu = props => {
+  const { isOpen, children } = props;
+  return (
+    <components.Menu
+      {...props}
+      className={cx("menu", {
+        "dropdown-wrapper__menu--open": isOpen
+      })}
+    >
+      {children}
+    </components.Menu>
+  );
+};
 
 export default Menu;
diff --git a/src/components/Dropdown/components/Option/Option.jsx b/src/components/Dropdown/components/Option/Option.jsx
index 029c1752dc..275ac3ac97 100644
--- a/src/components/Dropdown/components/Option/Option.jsx
+++ b/src/components/Dropdown/components/Option/Option.jsx
@@ -1,12 +1,14 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import { components } from "react-select";
 import "./Option.scss";
 
 const Option = ({ OptionRenderer, ...props }) => {
+  const { data } = props;
   if (!OptionRenderer) return null;
   return (
-    <components.Option {...props} className={"dropdown-wrapper__option--reset"}>
-      <OptionRenderer {...props.data} />
+    <components.Option {...props} className="dropdown-wrapper__option--reset">
+      <OptionRenderer {...data} />
     </components.Option>
   );
 };
diff --git a/src/components/Dropdown/components/SingleValue/SingleValue.jsx b/src/components/Dropdown/components/SingleValue/SingleValue.jsx
index 410cbd2c9e..b8e442f5af 100644
--- a/src/components/Dropdown/components/SingleValue/SingleValue.jsx
+++ b/src/components/Dropdown/components/SingleValue/SingleValue.jsx
@@ -1,16 +1,17 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import { components } from "react-select";
 import "./SingleValue.scss";
 
 const SingleValue = props => {
-  const { ValueRenderer } = props;
+  const { ValueRenderer, data } = props;
   if (!ValueRenderer) return null;
   return (
     <components.SingleValue
       {...props}
-      className={"dropdown-wrapper__single-value--reset"}
+      className="dropdown-wrapper__single-value--reset"
     >
-      <ValueRenderer {...props.data} />
+      <ValueRenderer {...data} />
     </components.SingleValue>
   );
 };
diff --git a/src/components/FormattedNumber/FormattedNumber.jsx b/src/components/FormattedNumber/FormattedNumber.jsx
index 98a20f9a7a..f2f7e2288e 100644
--- a/src/components/FormattedNumber/FormattedNumber.jsx
+++ b/src/components/FormattedNumber/FormattedNumber.jsx
@@ -73,6 +73,7 @@ FormattedNumber.propTypes = {
   /**
    * A numeric value to format.
    */
+  // eslint-disable-next-line react/require-default-props
   value: PropTypes.number,
   /**
    * Add external styling. Will be added to the main container.
@@ -114,7 +115,9 @@ FormattedNumber.defaultProps = {
   compact: true,
   local: FormattedNumber.localFallBack,
   rtl: false,
-  className: ""
+  className: "",
+  prefix: "",
+  suffix: ""
 };
 
 export default FormattedNumber;
diff --git a/src/components/Menu/Menu/Menu.jsx b/src/components/Menu/Menu/Menu.jsx
index 9c12482f93..d14c1b5d00 100644
--- a/src/components/Menu/Menu/Menu.jsx
+++ b/src/components/Menu/Menu/Menu.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useCallback } from "react";
-import useKeyEvent from "../../../hooks/useKeyEvent";
 import PropTypes from "prop-types";
 import cx from "classnames";
+import useKeyEvent from "../../../hooks/useKeyEvent";
 import { MENU_SIZES } from "./MenuConstants";
 import "./Menu.scss";
 
@@ -61,7 +61,7 @@ const Menu = ({ classname, size, tabIndex, ariaLabel, children }) => {
             ...child?.props,
             activeItemIndex,
             index,
-            setActiveItemIndex,
+            setActiveItemIndex
           });
         })}
     </div>
@@ -74,8 +74,7 @@ Menu.defaultProps = {
   classname: "",
   size: MENU_SIZES.MEDIUM,
   tabIndex: 0,
-  ariaLabel: "Menu",
-  children: [],
+  ariaLabel: "Menu"
 };
 
 Menu.propTypes = {
@@ -83,10 +82,10 @@ Menu.propTypes = {
   size: PropTypes.oneOf([
     MENU_SIZES.SMALL,
     MENU_SIZES.MEDIUM,
-    MENU_SIZES.LARGE,
+    MENU_SIZES.LARGE
   ]),
   tabIndex: PropTypes.number,
-  ariaLabel: PropTypes.string,
+  ariaLabel: PropTypes.string
 };
 
 export default Menu;
diff --git a/src/components/Menu/Menu/MenuConstants.js b/src/components/Menu/Menu/MenuConstants.js
index 3a702b4497..83d0d2bd1e 100644
--- a/src/components/Menu/Menu/MenuConstants.js
+++ b/src/components/Menu/Menu/MenuConstants.js
@@ -1,5 +1,5 @@
 export const MENU_SIZES = {
-    SMALL: "small",
-    MEDIUM: "medium",
-    LARGE: "large"
-};
\ No newline at end of file
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+};
diff --git a/src/components/Menu/MenuItem/MenuItem.jsx b/src/components/Menu/MenuItem/MenuItem.jsx
index 8b780b9b7b..637c5ab8d6 100644
--- a/src/components/Menu/MenuItem/MenuItem.jsx
+++ b/src/components/Menu/MenuItem/MenuItem.jsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useRef, useEffect, useState } from "react";
 import PropTypes from "prop-types";
+import isFunction from "lodash/isFunction";
 import cx from "classnames";
 import Icon from "../../Icon/Icon";
-import isFunction from "lodash/isFunction";
 import useKeyEvent from "../../../hooks/useKeyEvent";
 import useSetFocus from "../../../hooks/useSetFocus";
 import "./MenuItem.scss";
@@ -16,16 +16,16 @@ const MenuItem = ({
   onClick,
   activeItemIndex,
   setActiveItemIndex,
-  index,
+  index
 }) => {
   const [isActive, setIsActive] = useState(activeItemIndex === index);
 
   useEffect(() => {
     setIsActive(activeItemIndex === index);
-  }, [activeItemIndex]);
+  }, [activeItemIndex, index]);
 
   const onClickCallback = useCallback(
-    (event) => {
+    event => {
       if (onClick && !disabled && isActive) {
         onClick(event);
       }
@@ -67,7 +67,7 @@ const MenuItem = ({
             clickable={false}
             icon={icon}
             iconLabel={title}
-            className={"monday-style-menu-item__icon"}
+            className="monday-style-menu-item__icon"
             ignoreFocusStyle
           />
         </div>
@@ -79,7 +79,7 @@ const MenuItem = ({
     <div
       className={cx("monday-style-menu-item", classname, {
         "monday-style-menu-item--disabled": disabled,
-        "monday-style-menu-item--focused": isActive,
+        "monday-style-menu-item--focused": isActive
       })}
       ref={ref}
       onClick={onClickCallback}
@@ -101,7 +101,7 @@ MenuItem.defaultProps = {
   onClick: undefined,
   activeItemIndex: -1,
   setActiveItemIndex: undefined,
-  index: undefined,
+  index: undefined
 };
 MenuItem.propTypes = {
   classname: PropTypes.string,
@@ -112,7 +112,7 @@ MenuItem.propTypes = {
   onClick: PropTypes.func,
   activeItemIndex: PropTypes.number,
   setActiveItemIndex: PropTypes.func,
-  index: PropTypes.number,
+  index: PropTypes.number
 };
 
 MenuItem.isSelectable = true;
diff --git a/src/components/Menu/MenuTitle/MenuTitle.jsx b/src/components/Menu/MenuTitle/MenuTitle.jsx
index ebe374c04c..d982a4fed3 100644
--- a/src/components/Menu/MenuTitle/MenuTitle.jsx
+++ b/src/components/Menu/MenuTitle/MenuTitle.jsx
@@ -18,7 +18,7 @@ const MenuTitle = ({ classname, caption, captionPosition }) => {
   };
 
   const renderDivider = () => {
-    return <div className="monday-style-menu-title__divider"></div>;
+    return <div className="monday-style-menu-title__divider" />;
   };
 
   const renderContent = () => {
@@ -56,7 +56,7 @@ MenuTitle.positions = CAPTION_POSITIONS;
 MenuTitle.defaultProps = {
   classname: "",
   caption: "",
-  captionPosition: CAPTION_POSITIONS.BOTTOM,
+  captionPosition: CAPTION_POSITIONS.BOTTOM
 };
 
 MenuTitle.propTypes = {
@@ -65,8 +65,8 @@ MenuTitle.propTypes = {
   captionPosition: PropTypes.oneOf([
     CAPTION_POSITIONS.BOTTOM,
     CAPTION_POSITIONS.TOP,
-    CAPTION_POSITIONS.CENTER,
-  ]),
+    CAPTION_POSITIONS.CENTER
+  ])
 };
 
 export default MenuTitle;
diff --git a/src/components/Menu/MenuTitle/MenuTitleConstants.js b/src/components/Menu/MenuTitle/MenuTitleConstants.js
index a342a3a6de..f113aa3b5b 100644
--- a/src/components/Menu/MenuTitle/MenuTitleConstants.js
+++ b/src/components/Menu/MenuTitle/MenuTitleConstants.js
@@ -1,5 +1,5 @@
 export const CAPTION_POSITIONS = {
   TOP: "top",
   BOTTOM: "bottom",
-  CENTER: "center",
+  CENTER: "center"
 };
diff --git a/src/hooks/useDebounceEvent.js b/src/hooks/useDebounceEvent.js
index 0bed1ed7b4..9a99a6ed40 100644
--- a/src/hooks/useDebounceEvent.js
+++ b/src/hooks/useDebounceEvent.js
@@ -1,5 +1,4 @@
 import { useMemo, useCallback, useState, useRef, useEffect } from "react";
-import NOOP from "lodash/noop";
 import debounce from "lodash/debounce";
 
 export default function useDebounceEvent({
diff --git a/src/hooks/useSetFocus.js b/src/hooks/useSetFocus.js
index aff99215fd..460faf447b 100644
--- a/src/hooks/useSetFocus.js
+++ b/src/hooks/useSetFocus.js
@@ -4,17 +4,17 @@ import useEventListener from "./useEventListener";
 export default function useSetFocus({ ref, setActive, setUnActive, isActive }) {
   useEffect(() => {
     isActive && ref && ref.current && ref.current.focus();
-  }, [isActive]);
+  }, [ref, isActive]);
 
   useEventListener({
     eventName: "mouseover",
-    ref: ref,
-    callback: setActive,
+    ref,
+    callback: setActive
   });
 
   useEventListener({
     eventName: "mouseout",
-    ref: ref,
-    callback: setUnActive,
+    ref,
+    callback: setUnActive
   });
 }