refactor: use hooks from react-use

package.json

@@ -123,6 +123,7 @@
     "classnames": "^2.3.2",
     "react-feather": "^2.0.10",
     "react-remove-scroll": "^2.5.7",
+    "react-use": "^17.5.0",
     "styled-jsx": "^5.1.2"
   }
 }

packages/Popover/Popover.tsx

@@ -1,7 +1,8 @@
 import React, { FC, PropsWithChildren, useRef } from 'react';
 import classNames from 'classnames';
+import { useClickAway } from 'react-use';
 import { PopoverProps } from './Popover.types';
-import { useClickAway, useControlled, useTransition } from '../utils/hooks';
+import { useControlled, useTransition } from '../utils/hooks';
 import Popup from '../Popup';
 import { computePopupPosition } from '../Popup/computePopup';
 import { useTheme } from '../Theme';

packages/Select/Select.tsx

@@ -11,14 +11,15 @@ import React, {
 } from 'react';
 import { ChevronDown } from 'react-feather';
 import classNames from 'classnames';
+import { useClickAway } from 'react-use';
 import {
   SelectConfig,
   SelectOptionValue,
   SelectProps,
   SelectRef,
   SelectValue,
 } from './Select.types';
-import { useClickAway, useControlled } from '../utils/hooks';
+import { useControlled } from '../utils/hooks';
 import { RawUITheme } from '../Theme/preset/preset.type';
 import { useTheme } from '../Theme/theme-context';
 import { getValidChildren } from '../utils/common';

packages/utils/hooks/index.ts

@@ -5,7 +5,6 @@ import { usePortal } from './usePortal';
 import { useResize } from './useResize';
 import { useClickAnyWhere } from './useClickAnyWhere';
 import { useMutationObserver } from './useMutationObserver';
-import { useClickAway } from './useClickAway';
 
 export {
   useControlled,
@@ -15,5 +14,4 @@ export {
   useResize,
   useClickAnyWhere,
   useMutationObserver,
-  useClickAway,
 };