@vkontakte/vkui 4.22.2 → 4.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.22.2",
+  "version": "4.23.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
     "pre-commit": "^1.2.2",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
-    "react-docgen": "^5.4.0-alpha.0",
+    "react-docgen-typescript": "^2.1.1",
     "react-dom": "^16.8.6",
     "react-frame-component": "^3.0.0",
     "react-styleguidist": "^11.1.5",

package/src/components/ActionSheet/ActionSheet.tsx

@@ -4,7 +4,7 @@ import { ViewWidth, ViewHeight } from '../../hoc/withAdaptivity';
 import { IOS } from '../../lib/platform';
 import { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';
 import { ActionSheetDropdown } from './ActionSheetDropdown';
-import { hasReactNode } from '../../lib/utils';
+import { hasReactNode, noop } from '../../lib/utils';
 import { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';
 import Caption from '../Typography/Caption/Caption';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -52,9 +52,12 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
   const platform = usePlatform();
   const [closing, setClosing] = React.useState(false);
   const onClose = () => setClosing(true);
+  const _action = React.useRef(noop);
 
   const afterClose = () => {
     restProps.onClose();
+    _action.current();
+    _action.current = noop;
   };
 
   if (process.env.NODE_ENV === 'development' && !restProps.onClose) {
@@ -64,25 +67,29 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
   const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
   const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);
 
-  const timeout = platform === IOS ? 300 : 200;
+  let timeout = platform === IOS ? 300 : 200;
+
+  if (isDesktop) {
+    timeout = 0;
+  }
 
   const fallbackTransitionFinish = useTimeout(afterClose, timeout);
   React.useEffect(() => {
     if (closing) {
-      if (isDesktop) {
-        afterClose();
-      } else {
-        fallbackTransitionFinish.set();
-      }
+      fallbackTransitionFinish.set();
     } else {
       fallbackTransitionFinish.clear();
     }
   }, [closing]);
 
-  const onItemClick = React.useCallback<ItemClickHandler>((action, autoclose) => (event) => {
-    action && action(event);
+  const onItemClick = React.useCallback<ItemClickHandler>((action, immediateAction, autoclose) => (event) => {
+    event.persist();
+    immediateAction && immediateAction(event);
     if (autoclose) {
+      _action.current = () => action && action(event);
       setClosing(true);
+    } else {
+      action && action(event);
     }
   }, []);
   const contextValue = useObjectMemo({ onItemClick, isDesktop });

package/src/components/ActionSheet/ActionSheetContext.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export type ActionType = (event: React.MouseEvent) => void;
 
-export type ItemClickHandler = (action: ActionType, autoclose: boolean) => (event: React.MouseEvent) => void;
+export type ItemClickHandler = (action: ActionType, immediateAction: ActionType, autoclose: boolean) => (event: React.MouseEvent) => void;
 
 export const ActionSheetContext = React.createContext<{
   onItemClick?: ItemClickHandler;

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -76,9 +76,7 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
       getRootRef={elementRef}
       onClick={onClick}
       style={dropdownStyles}
-      vkuiClass={classNames(getClassName('ActionSheet', platform), 'ActionSheet--desktop', {
-        'ActionSheet--closing': closing,
-      }, `ActionSheet--sizeY-${sizeY}`)}
+      vkuiClass={classNames(getClassName('ActionSheet', platform), 'ActionSheet--desktop', `ActionSheet--sizeY-${sizeY}`)}
     >
       {children}
     </FocusTrap>

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -26,6 +26,13 @@ export interface ActionSheetItemProps extends
   autoclose?: boolean;
   selectable?: boolean;
   disabled?: boolean;
+  /**
+   * Если autoclose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.
+   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.
+   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.
+   */
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  onImmediateClick?: React.MouseEventHandler<HTMLElement>;
 }
 
 const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
@@ -43,6 +50,7 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
   onChange,
   onClick,
   sizeY,
+  onImmediateClick,
   ...restProps
 }: ActionSheetItemProps) => {
   const platform = usePlatform();
@@ -59,7 +67,7 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
   return (
     <Tappable
       {...restProps}
-      onClick={selectable ? onClick : onItemClick(onClick, autoclose)}
+      onClick={selectable ? onClick : onItemClick(onClick, onImmediateClick, autoclose)}
       activeMode="ActionSheetItem--active"
       vkuiClass={
         classNames(
@@ -130,7 +138,7 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
             name={name}
             value={value}
             onChange={onChange}
-            onClick={onItemClick(noop, autoclose)}
+            onClick={onItemClick(noop, noop, autoclose)}
             defaultChecked={defaultChecked}
             checked={checked}
             disabled={restProps.disabled}

package/src/components/AdaptivityProvider/AdaptivityContext.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { hasHover, hasMouse } from '@vkontakte/vkjs';
 
 export enum SizeType {
   COMPACT = 'compact',
@@ -37,15 +38,22 @@ export interface AdaptivityProps extends SizeProps {
    * @ignore
    */
   hasMouse?: boolean;
+  /**
+   * @ignore
+   */
+  deviceHasHover?: boolean;
 }
 
 export interface AdaptivityContextInterface extends SizeProps {
   viewWidth?: ViewWidth;
   viewHeight?: ViewHeight;
   hasMouse?: boolean;
+  deviceHasHover?: boolean;
 }
 
 export const AdaptivityContext = React.createContext<AdaptivityContextInterface>({
   sizeX: SizeType.COMPACT,
   sizeY: SizeType.REGULAR,
+  hasMouse,
+  deviceHasHover: hasHover,
 });

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { hasMouse as _hasMouse } from '@vkontakte/vkjs';
+import { hasMouse as _hasMouse, hasHover as _hasHover } from '@vkontakte/vkjs';
 import { AdaptivityContext, AdaptivityContextInterface, SizeType, ViewHeight, ViewWidth } from './AdaptivityContext';
 import { useDOM } from '../../lib/dom';
 
@@ -32,14 +32,15 @@ export default function AdaptivityProvider(props: AdaptivityProviderProps) {
   React.useEffect(() => {
     function onResize() {
       const calculated = calculateAdaptivity(window.innerWidth, window.innerHeight, props);
-      const { viewWidth, viewHeight, sizeX, sizeY, hasMouse } = adaptivityRef.current;
+      const { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover } = adaptivityRef.current;
 
       if (
         viewWidth !== calculated.viewWidth ||
         viewHeight !== calculated.viewHeight ||
         sizeX !== calculated.sizeX ||
         sizeY !== calculated.sizeY ||
-        hasMouse !== calculated.hasMouse
+        hasMouse !== calculated.hasMouse ||
+        deviceHasHover !== calculated.deviceHasHover
       ) {
         adaptivityRef.current = calculated;
         updateAdaptivity({});
@@ -52,7 +53,7 @@ export default function AdaptivityProvider(props: AdaptivityProviderProps) {
     return () => {
       window.removeEventListener('resize', onResize, false);
     };
-  }, [props.viewWidth, props.viewHeight, props.sizeX, props.sizeY, props.hasMouse]);
+  }, [props.viewWidth, props.viewHeight, props.sizeX, props.sizeY, props.hasMouse, props.deviceHasHover]);
 
   return (
     <AdaptivityContext.Provider value={adaptivityRef.current}>
@@ -66,7 +67,8 @@ function calculateAdaptivity(windowWidth: number, windowHeight: number, props: A
   let viewHeight = ViewHeight.SMALL;
   let sizeY = SizeType.REGULAR;
   let sizeX = SizeType.REGULAR;
-  let hasMouse = typeof props.hasMouse === 'boolean' ? props.hasMouse : _hasMouse;
+  let hasMouse = props.hasMouse ?? _hasMouse;
+  let deviceHasHover = props.deviceHasHover ?? _hasHover;
 
   if (windowWidth >= DESKTOP_SIZE) {
     viewWidth = ViewWidth.DESKTOP;
@@ -102,5 +104,5 @@ function calculateAdaptivity(windowWidth: number, windowHeight: number, props: A
   props.sizeX && (sizeX = props.sizeX);
   props.sizeY && (sizeY = props.sizeY);
 
-  return { viewWidth, viewHeight, sizeX, sizeY, hasMouse };
+  return { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover };
 }

package/src/components/AdaptivityProvider/Readme.md

@@ -1,3 +1,3 @@
-Компонент, прокидывающий вниз данные об [адаптивности](#!/Adaptivity). Изначально, рассчитывает `sizeX`, `sizeY`, 
-`viewWidth` и `viewHeight` самостоятельно, основываясь на `window`. Все эти 4 сущности можно переопределить, передав их в 
-качестве свойств. 
+Компонент, прокидывающий вниз данные об [адаптивности](#!/Adaptivity). Все параметры, которые можно прокинуть через
+props, компонент по умолчанию вычисляет самостоятельно. Передавать их с помощью props стоит в тех случаях, когда
+вы точно уверены, что ваш сайт, например, будет открываться только на мобильных устройствах.

package/src/components/AppRoot/AppRoot.tsx

@@ -61,15 +61,13 @@ export const AppRoot: React.FC<AppRootProps> = withAdaptivity(({
 
   // setup portal
   useIsomorphicLayoutEffect(() => {
-    if (mode === 'full') {
-      return noop;
-    }
-
     const portal = document.createElement('div');
     portal.classList.add('vkui__portal-root');
     document.body.appendChild(portal);
     setPortalRoot(portal);
-    return () => portal.parentElement.removeChild(portal);
+    return () => {
+      portal.parentElement.removeChild(portal);
+    };
   }, []);
 
   // setup root classes
@@ -136,6 +134,7 @@ export const AppRoot: React.FC<AppRootProps> = withAdaptivity(({
       portalRoot: portalRoot,
       embedded: mode === 'embedded',
       keyboardInput: isKeyboardInputActive,
+      mode,
     }}>
       <ScrollContext.Provider value={scrollController}>
         <IconSettingsProvider classPrefix="vkui" globalClasses={!noLegacyClasses}>

package/src/components/AppRoot/AppRootContext.ts

@@ -4,6 +4,7 @@ export interface AppRootContextInterface {
   appRoot?: React.RefObject<HTMLDivElement>;
   portalRoot?: HTMLDivElement;
   embedded?: boolean;
+  mode?: 'partial' | 'embedded' | 'full';
   keyboardInput?: boolean;
 }
 

package/src/components/AppRoot/AppRootPortal.tsx

@@ -2,9 +2,11 @@ import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { AppRootContext } from './AppRootContext';
 
-export const AppRootPortal: React.FC<React.PropsWithChildren<{ className?: string }>> = ({ children, className }) => {
-  const { portalRoot, embedded } = React.useContext(AppRootContext);
-  return embedded && portalRoot
+export const AppRootPortal: React.FC<React.PropsWithChildren<{ className?: string; forcePortal?: boolean }>> = ({ children, className, forcePortal }) => {
+  const { portalRoot, mode } = React.useContext(AppRootContext);
+
+  forcePortal = forcePortal ?? mode !== 'full';
+  return portalRoot && forcePortal
     ? createPortal((<div className={className}>{children}</div>), portalRoot)
     : <React.Fragment>{children}</React.Fragment>;
 };

package/src/components/Cell/Cell.tsx

@@ -67,6 +67,7 @@ export const Cell: React.FC<CellProps> = ({
   Component,
   onChange,
   name,
+  value,
   checked,
   defaultChecked,
   getRootRef,
@@ -113,7 +114,7 @@ export const Cell: React.FC<CellProps> = ({
 
   let checkbox;
   if (selectable) {
-    const checkboxProps: CellCheckboxProps = { name, onChange, defaultChecked, checked, disabled };
+    const checkboxProps: CellCheckboxProps = { name, value, onChange, defaultChecked, checked, disabled };
     checkbox = <CellCheckbox vkuiClass="Cell__checkbox" {...checkboxProps} />;
   }
 

package/src/components/ChipsSelect/Readme.md

@@ -6,7 +6,7 @@
 
 >**Важно**
 >
->Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильный компоненты](#/Unstable).
+>Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
 
 ```jsx
 const colors = [{value: 'red', label: 'Красный'}, {value: 'blue', label: 'Синий'}, {value: 'navarin', label: 'Наваринского пламени с дымом',}];

package/src/components/ClickPopper/ClickPopper.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { useDOM } from '../../lib/dom';
+import { Popper, PopperCommonProps } from '../Popper/Popper';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useEventListener } from '../../hooks/useEventListener';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';
+
+export interface ClickPopperProps extends PopperCommonProps {
+  /**
+   * Содержимое `ClickPopper`
+   */
+  content?: React.ReactNode;
+  /**
+   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
+   */
+  shown?: boolean;
+  /**
+   * Вызывается при каждом изменении видимости тултипа
+   */
+  onShownChange?: (shown: boolean) => void;
+  /**
+   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элемнету компонента
+   */
+  children?: React.ReactElement;
+}
+
+export const ClickPopper: React.FC<ClickPopperProps> = ({
+  getRef,
+  content,
+  children,
+  onShownChange,
+  shown: _shown,
+  ...restProps
+}: ClickPopperProps) => {
+  const [computedShown, setComputedShown] = React.useState(_shown || false);
+  const [dropdownNode, setPopperNode] = React.useState(null);
+
+  const shown = typeof _shown === 'boolean' ? _shown : computedShown;
+
+  const { document } = useDOM();
+
+  const patchedPopperRef = useExternRef(setPopperNode, getRef);
+
+  const [childRef, child] = usePatchChildrenRef(children);
+
+  const setShown = (value: boolean) => {
+    if (typeof _shown !== 'boolean') {
+      setComputedShown(value);
+    }
+    typeof onShownChange === 'function' && onShownChange(value);
+  };
+
+  useGlobalEventListener(document, 'click', (e: MouseEvent) => {
+    if (dropdownNode && !childRef.current.contains(e.target as Node) && !dropdownNode.contains(e.target)) {
+      setShown(false);
+    }
+  });
+
+  const targetClickEvent = useEventListener('click', () => {
+    setShown(!shown);
+  });
+
+  React.useEffect(() => {
+    targetClickEvent.add(childRef.current);
+  }, []);
+
+  return (
+    <React.Fragment>
+      {child}
+      {shown &&
+        <Popper
+          {...restProps}
+          targetRef={childRef}
+          getRef={patchedPopperRef}
+        >
+          {content}
+        </Popper>
+      }
+    </React.Fragment>
+  );
+};

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -8,7 +8,15 @@ export enum Appearance {
 }
 
 export enum Scheme {
+  /**
+   * @deprecated будет удалено в 5.0.0
+   * версия оставлена для совместимости со старыми версиями клиентов
+   */
   DEPRECATED_CLIENT_LIGHT = 'client_light',
+  /**
+   * @deprecated будет удалено в 5.0.0
+   * версия оставлена для совместимости со старыми версиями клиентов
+   */
   DEPRECATED_CLIENT_DARK = 'client_dark',
   /**
    * @deprecated будет удалено в 5.0.0

package/src/components/Dropdown/Dropdown.css

@@ -0,0 +1,19 @@
+.Dropdown {
+  animation: vkui-popper-fadein .2s ease;
+  background: var(--background_content);
+}
+
+.Dropdown--ios {
+  box-shadow: 0 0 96px rgba(0, 0, 0, .16), 0 0 2px rgba(0, 0, 0, .12);
+  border-radius: 14px;
+}
+
+.Dropdown--android {
+  box-shadow: 0 0 4px rgba(0, 0, 0, .08), 0 8px 8px rgba(0, 0, 0, .16);
+  border-radius: 12px;
+}
+
+.Dropdown--vkcom {
+  box-shadow: 0 0 2px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .08);
+  border-radius: 12px;
+}

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';
+import { ClickPopper } from '../ClickPopper/ClickPopper';
+import { getClassName } from '../../helpers/getClassName';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Placement } from '../Popper/Popper';
+import './Dropdown.css';
+
+// Приходится избегать экстендов от HoverPopperProps, ClickPopperProps и PopperProps, потому что react-docgen не умеет в Omit.
+// Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.
+export interface DropdownProps {
+  /**
+   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
+   */
+  placement?: Placement;
+  /**
+   * Отступ по вспомогательной оси
+   */
+  offsetSkidding?: number;
+  /**
+   * Отступ по главной оси
+   */
+  offsetDistance?: number;
+  onPlacementChange?: (data: { placement?: Placement }) => void;
+  /**
+   * Содержимое тултипа
+   */
+  content?: React.ReactNode;
+  /**
+   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
+   */
+  shown?: boolean;
+  /**
+   * Вызывается при каждом изменении видимости тултипа
+   */
+  onShownChange?: (shown: boolean) => void;
+  /**
+   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
+   */
+  children?: React.ReactElement;
+
+  action?: 'click' | 'hover';
+  /**
+   * Актуально только для action="hover"
+   * Количество миллисекунд, после которых произойдет показ дропдауна
+   */
+  showDelay?: HoverPopperProps['showDelay'];
+  /**
+   * Актуально только для action="hover"
+   * Количество миллисекунд, после которых произойдет скрытие дропдауна
+   */
+  hideDelay?: HoverPopperProps['hideDelay'];
+}
+
+export const Dropdown: React.FC<DropdownProps> = ({ action = 'click', hideDelay, showDelay, ...popperProps }: DropdownProps) => {
+  const platform = usePlatform();
+
+  let Component;
+  let actionSpecificProps: Partial<DropdownProps> = {};
+
+  switch (action) {
+    case 'click':
+      Component = ClickPopper;
+      break;
+    case 'hover':
+      actionSpecificProps = { hideDelay, showDelay };
+      Component = HoverPopper;
+      break;
+  }
+
+  return (
+    <Component vkuiClass={getClassName('Dropdown', platform)} {...actionSpecificProps} {...popperProps} />
+  );
+};

package/src/components/Dropdown/Readme.md

@@ -0,0 +1,39 @@
+Может открываться при клике или наведении мыши на `children`. Ограничений по содержимому нет. Предназначен для 
+отрисовки части интерфейса в выпадающем окне.
+
+```jsx { "props": { "layout": false, "iframe": true } }
+const [shown, setShown] = React.useState(true);
+
+return (
+  <React.Fragment>
+    <Dropdown action="hover" placement="right" content={<Div><Text>Привет</Text></Div>}>
+      <Button style={{ margin: 20 }}>Наведи</Button>
+    </Dropdown>
+
+    <Dropdown
+      shown={shown}
+      onShownChange={setShown}
+      content={
+        <FormLayout>
+          <FormItem top="Имя">
+            <Input />
+          </FormItem>
+          <FormItem top="Фамилия">
+            <Input />
+          </FormItem>
+          <FormItem top="Соглашение">
+            <Checkbox name="agreement">Согласен</Checkbox>
+          </FormItem>
+          <FormItem>
+            <Button onClick={() => setShown(false)}>Отправить</Button>
+          </FormItem>
+        </FormLayout>
+      }
+    >
+      <Button style={{ margin: '20px 0 0 0' }}>
+        Кликни
+      </Button>
+    </Dropdown>
+  </React.Fragment>
+)
+```

package/src/components/Footer/Footer.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
+import { HasComponent } from '../../types';
 import Caption from '../Typography/Caption/Caption';
 import './Footer.css';
 
-type FooterProps = React.AllHTMLAttributes<HTMLElement>;
+export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
 
-const Footer: React.FC<FooterProps> = ({ children, ...restProps }: FooterProps) => {
+export const Footer: React.FC<FooterProps> = ({
+  children,
+  ...restProps
+}: FooterProps) => {
   return (
     <Caption Component="footer" {...restProps} level="1" weight="regular" vkuiClass="Footer">
       {children}
     </Caption>
   );
 };
-
-export default Footer;

package/src/components/HoverPopper/HoverPopper.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { Popper, PopperCommonProps } from '../Popper/Popper';
+import { useEventListener } from '../../hooks/useEventListener';
+import { useTimeout } from '../../hooks/useTimeout';
+import { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+
+export interface HoverPopperProps extends PopperCommonProps {
+  /**
+   * Содержимое тултипа
+   */
+  content?: React.ReactNode;
+  /**
+   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
+   */
+  shown?: boolean;
+  /**
+   * Вызывается при каждом изменении видимости тултипа
+   */
+  onShownChange?: (shown: boolean) => void;
+  /**
+   * Количество миллисекунд, после которых произойдет показ дропдауна
+   */
+  showDelay?: number;
+  /**
+   * Количество миллисекунд, после которых произойдет скрытие дропдауна
+   */
+  hideDelay?: number;
+  /**
+   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
+   */
+  children?: React.ReactElement;
+}
+
+export const HoverPopper: React.FC<HoverPopperProps> = ({
+  getRef,
+  content,
+  children,
+  onShownChange,
+  shown: _shown,
+  showDelay,
+  hideDelay = 150,
+  ...restProps
+}: HoverPopperProps) => {
+  const [computedShown, setComputedShown] = React.useState(_shown || false);
+
+  const shown = typeof _shown === 'boolean' ? _shown : computedShown;
+
+  const setShown = (value: boolean) => {
+    if (typeof _shown !== 'boolean') {
+      setComputedShown(value);
+    }
+    typeof onShownChange === 'function' && onShownChange(value);
+  };
+
+  const showTimeout = useTimeout(() => {
+    setShown(true);
+  }, showDelay);
+
+  const hideTimeout = useTimeout(() => {
+    setShown(false);
+  }, hideDelay);
+
+  const [childRef, child] = usePatchChildrenRef(children);
+
+  const onTargetEnter = () => {
+    hideTimeout.clear();
+    showTimeout.set();
+  };
+
+  const onTargetLeave = () => {
+    showTimeout.clear();
+    hideTimeout.set();
+  };
+
+  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);
+  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);
+
+  useIsomorphicLayoutEffect(() => {
+    targetEnterListener.add(childRef.current);
+    targetLeaveListener.add(childRef.current);
+  }, []);
+
+  return (
+    <React.Fragment>
+      {child}
+      {shown &&
+        <Popper
+          {...restProps}
+          onMouseOver={hideTimeout.clear}
+          onMouseOut={onTargetLeave}
+          getRef={getRef}
+          targetRef={childRef}
+        >
+          {content}
+        </Popper>
+      }
+    </React.Fragment>
+  );
+};