@planningcenter/tapestry-react 2.5.0 → 2.5.2

package/dist/cjs/Button/Button.js

@@ -260,7 +260,7 @@ function Button(_ref) {
     }
 
     if (type && restProps.as && restProps.as !== "button") {
-      throw Error("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
+      console.log("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
     }
   }
 

package/dist/cjs/Checkbox/Checkbox.js

@@ -85,24 +85,8 @@ function Checkbox(_ref) {
         wrapperProps = _useAccessibilityViol.wrapperProps;
 
     (0, _react.useLayoutEffect)(function () {
-      function findParent(node, findMatch) {
-        if (node && node !== document.documentElement) {
-          var matchFound = findMatch(node.parentNode);
-
-          if (matchFound) {
-            return node.parentNode;
-          } else {
-            return findParent(node.parentNode, findMatch);
-          }
-        } else {
-          return null;
-        }
-      }
-
       if (label === undefined) {
-        var labelParent = findParent(ref.current, function (parentNode) {
-          return parentNode.tagName === 'LABEL';
-        });
+        var labelParent = ref.current.closest('label') !== null;
 
         if (!labelParent) {
           setNeedsParentLabel(true);

package/dist/cjs/Pagination/Pagination.js

@@ -75,9 +75,7 @@ var NavButton = function NavButton(_ref) {
 };
 
 function Pagination(_ref2) {
-  var _ref2$activeColor = _ref2.activeColor,
-      activeColor = _ref2$activeColor === void 0 ? '#5b8bf7' : _ref2$activeColor,
-      currentPage = _ref2.currentPage,
+  var currentPage = _ref2.currentPage,
       _ref2$onPageChange = _ref2.onPageChange,
       onPageChange = _ref2$onPageChange === void 0 ? function () {
     return null;
@@ -85,11 +83,19 @@ function Pagination(_ref2) {
       visiblePages = _ref2.visiblePages,
       _ref2$totalPages = _ref2.totalPages,
       totalPages = _ref2$totalPages === void 0 ? 0 : _ref2$totalPages,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["activeColor", "currentPage", "onPageChange", "visiblePages", "totalPages"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["currentPage", "onPageChange", "visiblePages", "totalPages"]);
 
   var _useThemeValue = (0, _system.useThemeValue)('breakpoints'),
       xsBreakpoint = _useThemeValue.xs;
 
+  var _useThemeProps = (0, _system.useThemeProps)('pagination', _objectSpread({}, restProps)),
+      _useThemeProps$active = _useThemeProps.activeColor,
+      activeColor = _useThemeProps$active === void 0 ? '#5b8bf7' : _useThemeProps$active,
+      navButtonProps = _useThemeProps.navButtonProps,
+      pageLinkProps = _useThemeProps.pageLinkProps,
+      activePageLinkProps = _useThemeProps.activePageLinkProps,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["activeColor", "navButtonProps", "pageLinkProps", "activePageLinkProps"]);
+
   var currentWidth = (0, _windowSize.useWindowWidth)();
 
   function renderGap(key) {
@@ -125,10 +131,10 @@ function Pagination(_ref2) {
       square: true,
       title: number,
       variant: isCurrentPage ? 'fill' : 'naked'
-    }, isCurrentPage && {
+    }, pageLinkProps, isCurrentPage && _objectSpread({
       backgroundColor: activeColor,
       color: '#fff'
-    }));
+    }, activePageLinkProps)));
   }
 
   function renderPageLinks() {
@@ -151,22 +157,22 @@ function Pagination(_ref2) {
       shrink: 0,
       spacing: 0.5,
       width: "100%"
-    }, restProps), /*#__PURE__*/_react["default"].createElement(_Group["default"], {
+    }, themeProps), /*#__PURE__*/_react["default"].createElement(_Group["default"], {
       spacing: 0.5
-    }, /*#__PURE__*/_react["default"].createElement(NavButton, {
+    }, /*#__PURE__*/_react["default"].createElement(NavButton, (0, _extends2["default"])({
       disabled: currentPage === 1,
       iconName: "general.leftChevron",
       onClick: onPageChange.bind(null, currentPage - 1),
       tooltip: {
         title: 'Previous Page'
       }
-    }), /*#__PURE__*/_react["default"].createElement(NavButton, {
+    }, navButtonProps)), /*#__PURE__*/_react["default"].createElement(NavButton, (0, _extends2["default"])({
       disabled: currentPage === totalPages,
       iconName: "general.rightChevron",
       onClick: onPageChange.bind(null, currentPage + 1),
       tooltip: {
         title: 'Next Page'
       }
-    })), renderPageLinks());
+    }, navButtonProps))), renderPageLinks());
   }
 }

package/dist/cjs/Tooltip/Tooltip.js

@@ -60,8 +60,8 @@ function Tooltip(props, ref) {
   var isPageInView = true;
   var isFocused = false;
   var isMouseDown = false;
-  var openTimeoutId = null;
-  var closeTimeoutId = null; // prevents tooltips showing when focused and navigating back to a page after leaving
+  var openTimeoutId = (0, _react.useRef)(null);
+  var closeTimeoutId = (0, _react.useRef)(null); // prevents tooltips showing when focused and navigating back to a page after leaving
 
   var cleanupPageViewChange = (0, _react.useCallback)((0, _utils.pageViewChange)(function (inView) {
     return setTimeout(function () {
@@ -77,21 +77,21 @@ function Tooltip(props, ref) {
     emitter.on('CLOSE_OPEN_TOOLTIPS', close);
     return function () {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close);
-      clearTimeout(openTimeoutId);
-      clearTimeout(closeTimeoutId);
+      clearTimeout(openTimeoutId.current);
+      clearTimeout(closeTimeoutId.current);
       cleanupPageViewChange();
     };
   }, []);
 
   var open = function open() {
-    clearTimeout(closeTimeoutId);
-    closeTimeoutId = null;
+    clearTimeout(closeTimeoutId.current);
+    closeTimeoutId.current = null;
     setIsPopoverOpen(true);
   };
 
   var close = function close() {
-    clearTimeout(openTimeoutId);
-    openTimeoutId = null;
+    clearTimeout(openTimeoutId.current);
+    openTimeoutId.current = null;
     setIsPopoverOpen(false);
   };
 
@@ -119,13 +119,13 @@ function Tooltip(props, ref) {
   var createOpenTimeout = (0, _react.useCallback)(function () {
     clearGlobalTimeout();
 
-    if (openTimeoutId === null) {
-      clearTimeout(closeTimeoutId);
-      closeTimeoutId = null;
+    if (openTimeoutId.current === null) {
+      clearTimeout(closeTimeoutId.current);
+      closeTimeoutId.current = null;
 
       if (isPopoverOpen === false) {
         emitter.emit('CLOSE_OPEN_TOOLTIPS');
-        openTimeoutId = setTimeout(function () {
+        openTimeoutId.current = setTimeout(function () {
           return open();
         }, instantDelay ? 0 : openDelay);
       }
@@ -134,11 +134,11 @@ function Tooltip(props, ref) {
   var createCloseTimeout = (0, _react.useCallback)(function () {
     startGlobalTimeout();
 
-    if (closeTimeoutId === null) {
-      clearTimeout(openTimeoutId);
-      openTimeoutId = null;
-      closeTimeoutId = setTimeout(function () {
-        close();
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current);
+      openTimeoutId.current = null;
+      closeTimeoutId.current = setTimeout(function () {
+        return close();
       }, closeDelay);
     }
   });

package/dist/esm/Button/Button.js

@@ -245,7 +245,7 @@ export function Button(_ref) {
     }
 
     if (type && restProps.as && restProps.as !== "button") {
-      throw Error("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
+      console.log("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
     }
   }
 

package/dist/esm/Checkbox/Checkbox.js

@@ -65,24 +65,8 @@ function Checkbox(_ref) {
         wrapperProps = _useAccessibilityViol.wrapperProps;
 
     useLayoutEffect(function () {
-      function findParent(node, findMatch) {
-        if (node && node !== document.documentElement) {
-          var matchFound = findMatch(node.parentNode);
-
-          if (matchFound) {
-            return node.parentNode;
-          } else {
-            return findParent(node.parentNode, findMatch);
-          }
-        } else {
-          return null;
-        }
-      }
-
       if (label === undefined) {
-        var labelParent = findParent(ref.current, function (parentNode) {
-          return parentNode.tagName === 'LABEL';
-        });
+        var labelParent = ref.current.closest('label') !== null;
 
         if (!labelParent) {
           setNeedsParentLabel(true);

package/dist/esm/Pagination/Pagination.js

@@ -14,7 +14,7 @@ import StackView from '../StackView';
 import { range } from '../utils';
 import { parseColor } from '../system/utils';
 import { useWindowWidth } from '@react-hook/window-size';
-import { useThemeValue } from '../system';
+import { useThemeValue, useThemeProps } from '../system';
 
 function getVisiblePages(currentPage, totalPages, visiblePages) {
   var start = Math.max(1, Math.min(totalPages - visiblePages + 1, Math.floor(currentPage - visiblePages / 2 + 1)));
@@ -59,9 +59,7 @@ var NavButton = function NavButton(_ref) {
 };
 
 export default function Pagination(_ref2) {
-  var _ref2$activeColor = _ref2.activeColor,
-      activeColor = _ref2$activeColor === void 0 ? '#5b8bf7' : _ref2$activeColor,
-      currentPage = _ref2.currentPage,
+  var currentPage = _ref2.currentPage,
       _ref2$onPageChange = _ref2.onPageChange,
       onPageChange = _ref2$onPageChange === void 0 ? function () {
     return null;
@@ -69,11 +67,19 @@ export default function Pagination(_ref2) {
       visiblePages = _ref2.visiblePages,
       _ref2$totalPages = _ref2.totalPages,
       totalPages = _ref2$totalPages === void 0 ? 0 : _ref2$totalPages,
-      restProps = _objectWithoutPropertiesLoose(_ref2, ["activeColor", "currentPage", "onPageChange", "visiblePages", "totalPages"]);
+      restProps = _objectWithoutPropertiesLoose(_ref2, ["currentPage", "onPageChange", "visiblePages", "totalPages"]);
 
   var _useThemeValue = useThemeValue('breakpoints'),
       xsBreakpoint = _useThemeValue.xs;
 
+  var _useThemeProps = useThemeProps('pagination', _objectSpread({}, restProps)),
+      _useThemeProps$active = _useThemeProps.activeColor,
+      activeColor = _useThemeProps$active === void 0 ? '#5b8bf7' : _useThemeProps$active,
+      navButtonProps = _useThemeProps.navButtonProps,
+      pageLinkProps = _useThemeProps.pageLinkProps,
+      activePageLinkProps = _useThemeProps.activePageLinkProps,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeColor", "navButtonProps", "pageLinkProps", "activePageLinkProps"]);
+
   var currentWidth = useWindowWidth();
 
   function renderGap(key) {
@@ -109,10 +115,10 @@ export default function Pagination(_ref2) {
       square: true,
       title: number,
       variant: isCurrentPage ? 'fill' : 'naked'
-    }, isCurrentPage && {
+    }, pageLinkProps, isCurrentPage && _objectSpread({
       backgroundColor: activeColor,
       color: '#fff'
-    }));
+    }, activePageLinkProps)));
   }
 
   function renderPageLinks() {
@@ -135,22 +141,22 @@ export default function Pagination(_ref2) {
       shrink: 0,
       spacing: 0.5,
       width: "100%"
-    }, restProps), /*#__PURE__*/React.createElement(Group, {
+    }, themeProps), /*#__PURE__*/React.createElement(Group, {
       spacing: 0.5
-    }, /*#__PURE__*/React.createElement(NavButton, {
+    }, /*#__PURE__*/React.createElement(NavButton, _extends({
       disabled: currentPage === 1,
       iconName: "general.leftChevron",
       onClick: onPageChange.bind(null, currentPage - 1),
       tooltip: {
         title: 'Previous Page'
       }
-    }), /*#__PURE__*/React.createElement(NavButton, {
+    }, navButtonProps)), /*#__PURE__*/React.createElement(NavButton, _extends({
       disabled: currentPage === totalPages,
       iconName: "general.rightChevron",
       onClick: onPageChange.bind(null, currentPage + 1),
       tooltip: {
         title: 'Next Page'
       }
-    })), renderPageLinks());
+    }, navButtonProps))), renderPageLinks());
   }
 }

package/dist/esm/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { Children, cloneElement, forwardRef, useState, useCallback, useImperativeHandle, useEffect } from 'react';
+import React, { Children, cloneElement, forwardRef, useRef, useState, useCallback, useImperativeHandle, useEffect } from 'react';
 import mitt from 'mitt';
 import Popover from '../Popover';
 import { composeEvents, pageViewChange } from '../utils';
@@ -44,8 +44,8 @@ function Tooltip(props, ref) {
   var isPageInView = true;
   var isFocused = false;
   var isMouseDown = false;
-  var openTimeoutId = null;
-  var closeTimeoutId = null; // prevents tooltips showing when focused and navigating back to a page after leaving
+  var openTimeoutId = useRef(null);
+  var closeTimeoutId = useRef(null); // prevents tooltips showing when focused and navigating back to a page after leaving
 
   var cleanupPageViewChange = useCallback(pageViewChange(function (inView) {
     return setTimeout(function () {
@@ -61,21 +61,21 @@ function Tooltip(props, ref) {
     emitter.on('CLOSE_OPEN_TOOLTIPS', close);
     return function () {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close);
-      clearTimeout(openTimeoutId);
-      clearTimeout(closeTimeoutId);
+      clearTimeout(openTimeoutId.current);
+      clearTimeout(closeTimeoutId.current);
       cleanupPageViewChange();
     };
   }, []);
 
   var open = function open() {
-    clearTimeout(closeTimeoutId);
-    closeTimeoutId = null;
+    clearTimeout(closeTimeoutId.current);
+    closeTimeoutId.current = null;
     setIsPopoverOpen(true);
   };
 
   var close = function close() {
-    clearTimeout(openTimeoutId);
-    openTimeoutId = null;
+    clearTimeout(openTimeoutId.current);
+    openTimeoutId.current = null;
     setIsPopoverOpen(false);
   };
 
@@ -103,13 +103,13 @@ function Tooltip(props, ref) {
   var createOpenTimeout = useCallback(function () {
     clearGlobalTimeout();
 
-    if (openTimeoutId === null) {
-      clearTimeout(closeTimeoutId);
-      closeTimeoutId = null;
+    if (openTimeoutId.current === null) {
+      clearTimeout(closeTimeoutId.current);
+      closeTimeoutId.current = null;
 
       if (isPopoverOpen === false) {
         emitter.emit('CLOSE_OPEN_TOOLTIPS');
-        openTimeoutId = setTimeout(function () {
+        openTimeoutId.current = setTimeout(function () {
           return open();
         }, instantDelay ? 0 : openDelay);
       }
@@ -118,11 +118,11 @@ function Tooltip(props, ref) {
   var createCloseTimeout = useCallback(function () {
     startGlobalTimeout();
 
-    if (closeTimeoutId === null) {
-      clearTimeout(openTimeoutId);
-      openTimeoutId = null;
-      closeTimeoutId = setTimeout(function () {
-        close();
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current);
+      openTimeoutId.current = null;
+      closeTimeoutId.current = setTimeout(function () {
+        return close();
       }, closeDelay);
     }
   });

package/dist/types/Pagination/Pagination.d.ts

@@ -2,15 +2,27 @@ export declare type PaginationProps = {
     /**
      * Change the color of the active page
      */
-    activeColor: string;
+    activeColor?: string;
+    /**
+     * Accepts any valid [Button](/button) props.
+     */
+    activePageLinkProps?: object;
     /**
      * Current visible page number
      */
     currentPage: number;
+    /**
+     * Accepts any valid [Button](/button) props.
+     */
+    navButtonProps?: object;
     /**
      * Callback when new page is requested
      */
     onPageChange: (nextPage: number) => undefined;
+    /**
+     * Accepts any valid [Button](/button) props.
+     */
+    pageLinkProps?: object;
     /**
      * Total available pages
      */
@@ -20,4 +32,4 @@ export declare type PaginationProps = {
      */
     visiblePages?: number;
 };
-export default function Pagination({ activeColor, currentPage, onPageChange, visiblePages, totalPages, ...restProps }: PaginationProps): JSX.Element;
+export default function Pagination({ currentPage, onPageChange, visiblePages, totalPages, ...restProps }: PaginationProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/Button/Button.tsx

@@ -346,7 +346,7 @@ export function Button({
       (restProps as any).as &&
       (restProps as any).as !== "button"
     ) {
-      throw Error(
+      console.log(
         `Tapestry-React: <Button/> type prop is only supported by <button> and not <${(restProps as any).as}>.`
       )
     }

package/src/Checkbox/Checkbox.js

@@ -120,23 +120,9 @@ function Checkbox({
       `Tapestry-React: <Checkbox/> must define a "label" prop or have a parent that renders a label for proper accessibility.`
     )
     useLayoutEffect(() => {
-      function findParent(node, findMatch) {
-        if (node && node !== document.documentElement) {
-          const matchFound = findMatch(node.parentNode)
-          if (matchFound) {
-            return node.parentNode
-          } else {
-            return findParent(node.parentNode, findMatch)
-          }
-        } else {
-          return null
-        }
-      }
       if (label === undefined) {
-        const labelParent = findParent(
-          ref.current,
-          (parentNode) => parentNode.tagName === 'LABEL'
-        )
+        const labelParent = ref.current.closest('label') !== null
+
         if (!labelParent) {
           setNeedsParentLabel(true)
         }

package/src/Pagination/Pagination.mdx

@@ -2,6 +2,7 @@
 title: Pagination
 category: General
 propsSummary: Accepts [StackView](/stackview) props.
+themeKey: pagination
 ---
 
 ```jsx live

package/src/Pagination/Pagination.tsx

@@ -7,7 +7,7 @@ import StackView from '../StackView'
 import { range } from '../utils'
 import { parseColor } from '../system/utils'
 import { useWindowWidth } from '@react-hook/window-size'
-import { useThemeValue } from '../system'
+import { useThemeValue, useThemeProps } from '../system'
 
 function getVisiblePages(currentPage, totalPages, visiblePages) {
   const start = Math.max(
@@ -40,18 +40,33 @@ export type PaginationProps = {
   /**
    * Change the color of the active page
    */
-  activeColor: string
+  activeColor?: string
+
+  /**
+   * Accepts any valid [Button](/button) props.
+   */
+  activePageLinkProps?: object
 
   /**
    * Current visible page number
    */
   currentPage: number
 
+  /**
+   * Accepts any valid [Button](/button) props.
+   */
+  navButtonProps?: object
+
   /**
    * Callback when new page is requested
    */
   onPageChange: (nextPage: number) => undefined
 
+  /**
+   * Accepts any valid [Button](/button) props.
+   */
+  pageLinkProps?: object
+
   /**
    * Total available pages
    */
@@ -83,7 +98,6 @@ const NavButton = ({ disabled, iconName, ...props }) => {
 }
 
 export default function Pagination({
-  activeColor = '#5b8bf7',
   currentPage,
   onPageChange = () => null,
   visiblePages,
@@ -91,6 +105,13 @@ export default function Pagination({
   ...restProps
 }: PaginationProps) {
   const { xs: xsBreakpoint } = useThemeValue('breakpoints')
+  const {
+    activeColor = '#5b8bf7',
+    navButtonProps,
+    pageLinkProps,
+    activePageLinkProps,
+    ...themeProps
+  } = useThemeProps('pagination', { ...restProps })
 
   const currentWidth = useWindowWidth()
 
@@ -123,7 +144,12 @@ export default function Pagination({
         square
         title={number}
         variant={isCurrentPage ? 'fill' : 'naked'}
-        {...(isCurrentPage && { backgroundColor: activeColor, color: '#fff' })}
+        {...pageLinkProps}
+        {...(isCurrentPage && {
+          backgroundColor: activeColor,
+          color: '#fff',
+          ...activePageLinkProps,
+        })}
       />
     )
   }
@@ -150,7 +176,7 @@ export default function Pagination({
         shrink={0}
         spacing={0.5}
         width="100%"
-        {...restProps}
+        {...themeProps}
       >
         <Group spacing={0.5}>
           <NavButton
@@ -158,12 +184,14 @@ export default function Pagination({
             iconName="general.leftChevron"
             onClick={onPageChange.bind(null, currentPage - 1)}
             tooltip={{ title: 'Previous Page' }}
+            {...navButtonProps}
           />
           <NavButton
             disabled={currentPage === totalPages}
             iconName="general.rightChevron"
             onClick={onPageChange.bind(null, currentPage + 1)}
             tooltip={{ title: 'Next Page' }}
+            {...navButtonProps}
           />
         </Group>
         {renderPageLinks()}

package/src/Tooltip/Tooltip.js

@@ -3,6 +3,7 @@ import React, {
   Children,
   cloneElement,
   forwardRef,
+  useRef,
   useState,
   useCallback,
   useImperativeHandle,
@@ -124,8 +125,8 @@ function Tooltip(props: Props, ref) {
   let isPageInView = true
   let isFocused = false
   let isMouseDown = false
-  let openTimeoutId = null
-  let closeTimeoutId = null
+  let openTimeoutId = useRef(null)
+  let closeTimeoutId = useRef(null)
 
   // prevents tooltips showing when focused and navigating back to a page after leaving
   const cleanupPageViewChange = useCallback(
@@ -137,21 +138,21 @@ function Tooltip(props: Props, ref) {
     emitter.on('CLOSE_OPEN_TOOLTIPS', close)
     return () => {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close)
-      clearTimeout(openTimeoutId)
-      clearTimeout(closeTimeoutId)
+      clearTimeout(openTimeoutId.current)
+      clearTimeout(closeTimeoutId.current)
       cleanupPageViewChange()
     }
   }, [])
 
   const open = () => {
-    clearTimeout(closeTimeoutId)
-    closeTimeoutId = null
+    clearTimeout(closeTimeoutId.current)
+    closeTimeoutId.current = null
     setIsPopoverOpen(true)
   }
 
   const close = () => {
-    clearTimeout(openTimeoutId)
-    openTimeoutId = null
+    clearTimeout(openTimeoutId.current)
+    openTimeoutId.current = null
     setIsPopoverOpen(false)
   }
 
@@ -179,24 +180,25 @@ function Tooltip(props: Props, ref) {
 
   const createOpenTimeout = useCallback(() => {
     clearGlobalTimeout()
-    if (openTimeoutId === null) {
-      clearTimeout(closeTimeoutId)
-      closeTimeoutId = null
+    if (openTimeoutId.current === null) {
+      clearTimeout(closeTimeoutId.current)
+      closeTimeoutId.current = null
       if (isPopoverOpen === false) {
         emitter.emit('CLOSE_OPEN_TOOLTIPS')
-        openTimeoutId = setTimeout(() => open(), instantDelay ? 0 : openDelay)
+        openTimeoutId.current = setTimeout(
+          () => open(),
+          instantDelay ? 0 : openDelay
+        )
       }
     }
   })
 
   const createCloseTimeout = useCallback(() => {
     startGlobalTimeout()
-    if (closeTimeoutId === null) {
-      clearTimeout(openTimeoutId)
-      openTimeoutId = null
-      closeTimeoutId = setTimeout(() => {
-        close()
-      }, closeDelay)
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current)
+      openTimeoutId.current = null
+      closeTimeoutId.current = setTimeout(() => close(), closeDelay)
     }
   })